@lvce-editor/static-server 0.72.4 → 0.73.0

package/static/{cbbb037 → 37635ff}/packages/renderer-worker/dist/rendererWorkerMain.js

@@ -108,7 +108,7 @@ const getAssetDir$1 = () => {
   // @ts-ignore
   {
     // @ts-ignore
-    return '/cbbb037';
+    return '/37635ff';
   }
 };
 const assetDir = getAssetDir$1();
@@ -204,7 +204,7 @@ class VError extends Error {
   }
 }
 
-const getCss = async relativePath => {
+const getCss$1 = async relativePath => {
   try {
     const url = `${assetDir}${relativePath}`;
     const response = await fetch(url);
@@ -832,12 +832,12 @@ const listen$1 = async () => {
 const invoke$B = (method, ...params) => {
   return state$C.rpc.invoke(method, ...params);
 };
-const invokeAndTransfer$i = (method, ...params) => {
+const invokeAndTransfer$j = (method, ...params) => {
   return state$C.rpc.invokeAndTransfer(method, ...params);
 };
 
 const actuallyLoadCssStyleSheet = async css => {
-  const text = await getCss(css);
+  const text = await getCss$1(css);
   const id = getCssId(css);
   await addCssStyleSheet(id, text);
 };
@@ -1508,7 +1508,7 @@ const invokeHelper = async (ipc, method, params, useSendAndTransfer) => {
 const invoke$A = (ipc, method, ...params) => {
   return invokeHelper(ipc, method, params, false);
 };
-const invokeAndTransfer$h = (ipc, method, ...params) => {
+const invokeAndTransfer$i = (ipc, method, ...params) => {
   return invokeHelper(ipc, method, params, true);
 };
 
@@ -1527,7 +1527,7 @@ const getOrCreateWorker = fn => {
     },
     async invokeAndTransfer(method, ...params) {
       const ipc = await getOrCreate$2(fn);
-      return invokeAndTransfer$h(ipc, method, ...params);
+      return invokeAndTransfer$i(ipc, method, ...params);
     },
     async dispose() {
       const promise = workers.get(fn);
@@ -1690,7 +1690,7 @@ const launchErrorWorker = async () => {
 
 const {
   invoke: invoke$z,
-  invokeAndTransfer: invokeAndTransfer$g
+  invokeAndTransfer: invokeAndTransfer$h
 } = getOrCreateWorker(launchErrorWorker);
 
 const serializeError = error => {
@@ -2046,11 +2046,11 @@ const invoke$y = async (method, ...params) => {
   const result = await invoke$A(ipc, method, ...params);
   return result;
 };
-const invokeAndTransfer$f = async (method, ...params) => {
+const invokeAndTransfer$g = async (method, ...params) => {
   const {
     ipc
   } = state$x;
-  const result = await invokeAndTransfer$h(ipc, method, ...params);
+  const result = await invokeAndTransfer$i(ipc, method, ...params);
   return result;
 };
 
@@ -2163,7 +2163,7 @@ const launchExtensionManagementWorker = async () => {
 
 const {
   invoke: invoke$x,
-  invokeAndTransfer: invokeAndTransfer$e} = getOrCreateWorker(launchExtensionManagementWorker);
+  invokeAndTransfer: invokeAndTransfer$f} = getOrCreateWorker(launchExtensionManagementWorker);
 
 // TODO make storage configurable via settings as localstorage or indexeddb
 // also allow disabling caching via settings
@@ -3351,7 +3351,7 @@ const create$10 = async ({
     port1,
     port2
   } = getPortTuple(port);
-  await invokeAndTransfer$i('IpcParent.create', {
+  await invokeAndTransfer$j('IpcParent.create', {
     method: ModuleWorkerWithMessagePort,
     url,
     name,
@@ -3427,7 +3427,7 @@ const getConfig = () => {
 
 const objects = Object.create(null);
 const transferToRendererProcess = async (objectId, transferable) => {
-  await invokeAndTransfer$i('Transferrable.transfer', transferable, objectId);
+  await invokeAndTransfer$j('Transferrable.transfer', transferable, objectId);
 };
 const transfer = (objectId, transferable) => {
   number(objectId);
@@ -3468,7 +3468,7 @@ const launchExtensionHostWorker = async () => {
 
 const {
   invoke: invoke$w,
-  invokeAndTransfer: invokeAndTransfer$d
+  invokeAndTransfer: invokeAndTransfer$e
 } = getOrCreateWorker(launchExtensionHostWorker);
 
 const ActivityBar$3 = 'ActivityBar';
@@ -3585,7 +3585,7 @@ const launchFileSearchWorker = async () => {
 
 const {
   invoke: invoke$v,
-  invokeAndTransfer: invokeAndTransfer$c
+  invokeAndTransfer: invokeAndTransfer$d
 } = getOrCreateWorker(launchFileSearchWorker);
 
 const state$m = {
@@ -3945,10 +3945,7 @@ const getRenderCommands = (module, oldState, newState, uid = newState.uid || mod
     }
   }
   if (module.renderTitle && !module.renderTitle.isEqual(oldState, newState)) {
-    const title = module.renderTitle.apply(oldState, newState);
-    if (parentId) {
-      commands.push(['Viewlet.send', parentId, 'setTitle', title]);
-    }
+    module.renderTitle.apply(oldState, newState);
   }
   if (module.getBadgeCount && parentId) {
     const badgeCount = module.getBadgeCount(newState);
@@ -4134,7 +4131,7 @@ const loadModule = (getModule, id) => {
 const load$5 = async (viewlet, focus = false, restore = false, restoreState = undefined) => {
   // console.time(`load/${viewlet.id}`)
   // TODO
-  if (viewlet.id === 'Terminal') {
+  if (viewlet.id === 'Terminal' || viewlet.id === 'SideBar' || viewlet.id === 'TitleBar' || viewlet.id === 'Panel' || viewlet.id === 'ActivityBar' || viewlet.id === 'Main' || viewlet.id === 'StatusBar') {
     viewlet.setBounds = false;
   }
   if (viewlet.type !== 0) {
@@ -4142,6 +4139,7 @@ const load$5 = async (viewlet, focus = false, restore = false, restoreState = un
     throw new Error('viewlet must be empty');
   }
   const shouldRender = viewlet.render ?? true;
+  const shouldRenderEvents = viewlet.shouldRenderEvents ?? true;
   let state = ViewletState.Default;
   // @ts-ignore
   const viewletUid = viewlet.uid || create$11();
@@ -4180,10 +4178,15 @@ const load$5 = async (viewlet, focus = false, restore = false, restoreState = un
     }
     const args = viewlet.args || [];
     let newState = await module.loadContent(viewletState, instanceSavedState, ...args);
+    const commands = [];
     if (module.renderEventListeners) {
       // TODO reuse event listeners between components
       const eventListeners = await module.renderEventListeners();
-      await invoke$B('Viewlet.registerEventListeners', viewletUid, eventListeners);
+      if (shouldRenderEvents === false) {
+        commands.push(['Viewlet.registerEventListeners', viewletUid, eventListeners]);
+      } else {
+        await invoke$B('Viewlet.registerEventListeners', viewletUid, eventListeners);
+      }
     }
     if ((viewlet.visible === undefined || viewlet.visible === true) && module.show) {
       await module.show(newState);
@@ -4254,7 +4257,6 @@ const load$5 = async (viewlet, focus = false, restore = false, restoreState = un
     if (newState.badgeCount) {
       await execute$3('Layout.handleBadgeCountChange');
     }
-    const commands = [];
     if (module.hasFunctionalRootRender) {
       commands.push([kCreateFunctionalRoot, viewlet.id, viewletUid, module.hasFunctionalEvents]);
     } else {
@@ -4278,9 +4280,9 @@ const load$5 = async (viewlet, focus = false, restore = false, restoreState = un
         const allCommands = [...commands, ...extraCommands
         // ['Viewlet.show', viewlet.id],
         ];
-        if (viewlet.setBounds !== false) {
-          allCommands.splice(1, 0, [kSetBounds, viewletUid, x, y, width, height]);
-        }
+        // if (viewlet.setBounds !== false) {
+        //   allCommands.splice(1, 0, [kSetBounds, viewletUid, x, y, width, height])
+        // }
         if (module.contentLoadedEffects) {
           module.contentLoadedEffects(newState);
         }
@@ -4880,7 +4882,7 @@ const launchIconThemeWorker = async () => {
 
 const {
   invoke: invoke$u,
-  invokeAndTransfer: invokeAndTransfer$b
+  invokeAndTransfer: invokeAndTransfer$c
 } = getOrCreateWorker(launchIconThemeWorker);
 
 const getFileIcon$1 = file => {
@@ -6329,9 +6331,11 @@ const startup = async (platform, assetDir) => {
     ...layoutState
   });
   commands.splice(1, 1);
-  const layoutModule = getInstance(Layout);
-  const placeholderCommands = layoutModule.factory.getInitialPlaceholderCommands(layoutModule.state);
-  commands.push(...placeholderCommands);
+
+  // TODO add back placeholder rendering
+  // const layoutModule = ViewletStates.getInstance(ViewletModuleId.Layout)
+  // const placeholderCommands = layoutModule.factory.getInitialPlaceholderCommands(layoutModule.state)
+  // commands.push(...placeholderCommands)
   commands.push(['Viewlet.appendToBody', layout.uid]);
   await invoke$B('Viewlet.executeCommands', commands);
   // await Layout.hydrate(initData)
@@ -6685,6 +6689,7 @@ const commandMap = {
   'SendMessagePortToExtensionHostWorker.sendMessagePortToExtensionManagementWorker': lazy('SendMessagePortToExtensionHostWorker.sendMessagePortToExtensionManagementWorker'),
   'SendMessagePortToExtensionHostWorker.sendMessagePortToFileSystemWorker': lazy('SendMessagePortToExtensionHostWorker.sendMessagePortToFileSystemWorker'),
   'SendMessagePortToExtensionHostWorker.sendMessagePortToIconThemeWorker': lazy('SendMessagePortToExtensionHostWorker.sendMessagePortToIconThemeWorker'),
+  'SendMessagePortToExtensionHostWorker.sendMessagePortToPreviewSandBoxWorker': lazy('SendMessagePortToExtensionHostWorker.sendMessagePortToPreviewSandBoxWorker'),
   'SendMessagePortToExtensionHostWorker.sendMessagePortToIframeWorker': lazy('SendMessagePortToExtensionHostWorker.sendMessagePortToIframeWorker'),
   'SendMessagePortToExtensionHostWorker.sendMessagePortToMarkdownWorker': lazy('SendMessagePortToExtensionHostWorker.sendMessagePortToMarkdownWorker'),
   'SendMessagePortToExtensionHostWorker.sendMessagePortToRendererProcess': lazy('SendMessagePortToExtensionHostWorker.sendMessagePortToRendererProcess'),
@@ -6911,7 +6916,7 @@ const getPort = async ipcId => {
     port2
   } = getPortTuple();
   // TODO call sendMessagePortToElectron function
-  const webContentsId = await invokeAndTransfer$i('IpcParent.create', {
+  const webContentsId = await invokeAndTransfer$j('IpcParent.create', {
     method: Electron,
     port: port1,
     ipcId
@@ -7391,7 +7396,7 @@ const IpcParentWithNode = {
 const sendMessagePortToElectron = async (port, initialCommand, ipcId) => {
   object(port);
   string(initialCommand);
-  await invokeAndTransfer$f(initialCommand, port, ipcId);
+  await invokeAndTransfer$g(initialCommand, port, ipcId);
 };
 
 const create$S = async options => {
@@ -8374,7 +8379,7 @@ const launchFileSystemWorker = async () => {
 
 const {
   invoke: invoke$t,
-  invokeAndTransfer: invokeAndTransfer$a} = getOrCreateWorker(launchFileSystemWorker);
+  invokeAndTransfer: invokeAndTransfer$b} = getOrCreateWorker(launchFileSystemWorker);
 
 // TODO move all of this to an extension
 
@@ -9633,7 +9638,7 @@ const launchClipBoardWorker = async () => {
 
 const {
   invoke: invoke$p,
-  invokeAndTransfer: invokeAndTransfer$9} = getOrCreateWorker(launchClipBoardWorker);
+  invokeAndTransfer: invokeAndTransfer$a} = getOrCreateWorker(launchClipBoardWorker);
 
 const readText = async () => {
   return await invoke$p('ClipBoard.readText');
@@ -9996,8 +10001,8 @@ const attachDebugger = async pid => {
   await invoke$y('AttachDebugger.attachDebugger', pid);
 };
 
-const version = '0.72.4';
-const commit$1 = 'cbbb037';
+const version = '0.73.0';
+const commit$1 = '37635ff';
 const productNameLong = 'Lvce Editor - OSS';
 const getPid = () => {
   return invoke$y('Process.getPid');
@@ -12304,7 +12309,7 @@ const launchTerminalWorker = async () => {
 
 const {
   invoke: invoke$n,
-  invokeAndTransfer: invokeAndTransfer$8
+  invokeAndTransfer: invokeAndTransfer$9
 } = getOrCreateWorker(launchTerminalWorker);
 
 const previewWorkerUrl = `${assetDir}/packages/preview-worker/dist/previewWorkerMain.js`;
@@ -12322,7 +12327,7 @@ const launchPreviewWorker = async () => {
 
 const {
   invoke: invoke$m,
-  invokeAndTransfer: invokeAndTransfer$7,
+  invokeAndTransfer: invokeAndTransfer$8,
   restart: restart$d
 } = getOrCreateWorker(launchPreviewWorker);
 
@@ -12342,12 +12347,12 @@ const create2 = async (canvasId, width, height) => {
 };
 const createForTerminal = async (canvasId, callbackId) => {
   const canvas = await create$Q(canvasId);
-  await invokeAndTransfer$8('OffscreenCanvas.handleResult', callbackId, canvas);
+  await invokeAndTransfer$9('OffscreenCanvas.handleResult', callbackId, canvas);
 };
 const createForPreview = async (callbackId, width, height) => {
   const canvasId = create$11();
   const canvas = await create2(canvasId, width, height);
-  await invokeAndTransfer$7('Preview.executeCallback', callbackId, canvas, canvasId);
+  await invokeAndTransfer$8('Preview.executeCallback', callbackId, canvas, canvasId);
 };
 
 const name$12 = 'OffscreenCanvas';
@@ -12631,7 +12636,7 @@ const ExtensionHostClosingTagCompletion_ipc = {
 const sendMessagePortToRendererProcess$1 = async (port, initialCommand) => {
   object(port);
   string(initialCommand);
-  await invokeAndTransfer$i(initialCommand, port);
+  await invokeAndTransfer$j(initialCommand, port);
 };
 
 const name$S = 'SendMessagePortToRendererProcess';
@@ -12698,7 +12703,7 @@ const launchEditorWorker = async () => {
 
 const {
   invoke: invoke$l,
-  invokeAndTransfer: invokeAndTransfer$6
+  invokeAndTransfer: invokeAndTransfer$7
 } = getOrCreateWorker(launchEditorWorker);
 const actualInvoke = invoke$l;
 
@@ -12716,9 +12721,25 @@ const launchOpenerWorker = async () => {
 };
 
 const {
-  invokeAndTransfer: invokeAndTransfer$5
+  invokeAndTransfer: invokeAndTransfer$6
 } = getOrCreateWorker(launchOpenerWorker);
 
+const previewSandBoxWorkerUrl = `${assetDir}/packages/renderer-worker/node_modules/@lvce-editor/preview-sandbox-worker/dist/previewSandboxWorkerMain.js`;
+
+const launchPreviewSandBoxWorker = async () => {
+  const configuredWorkerUrl = getConfiguredWorkerUrl$1('develop.previewSandboxWorkerPath', previewSandBoxWorkerUrl);
+  const ipc = await create$12({
+    method: ModuleWorkerAndWorkaroundForChromeDevtoolsBug,
+    url: configuredWorkerUrl,
+    name: 'Preview Sandbox Worker'
+  });
+  handleIpc(ipc);
+  return ipc;
+};
+
+const {
+  invokeAndTransfer: invokeAndTransfer$5} = getOrCreateWorker(launchPreviewSandBoxWorker);
+
 const iframeWorkerUrl = `${assetDir}/packages/iframe-worker/dist/iframeWorkerMain.js`;
 
 const launchIframeWorker = async () => {
@@ -12796,27 +12817,27 @@ const {
 const sendMessagePortToExtensionHostWorker = async (port, initialCommand, rpcId) => {
   object(port);
   string(initialCommand);
-  await invokeAndTransfer$d(initialCommand, port, rpcId);
+  await invokeAndTransfer$e(initialCommand, port, rpcId);
 };
 const sendMessagePortToSharedProcess = async (port, initialCommand, rpcId) => {
   object(port);
   string(initialCommand);
-  await invokeAndTransfer$f(initialCommand, port, rpcId);
+  await invokeAndTransfer$g(initialCommand, port, rpcId);
 };
 const sendMessagePortToErrorWorker = async (port, initialCommand, rpcId) => {
   object(port);
   string(initialCommand);
-  await invokeAndTransfer$g(initialCommand, port, rpcId);
+  await invokeAndTransfer$h(initialCommand, port, rpcId);
 };
 const sendMessagePortToEditorWorker = async (port, initialCommand, rpcId) => {
   object(port);
   string(initialCommand);
-  await invokeAndTransfer$6(initialCommand, port, rpcId);
+  await invokeAndTransfer$7(initialCommand, port, rpcId);
 };
 const sendMessagePortToRendererProcess = async (port, initialCommand, rpcId) => {
   object(port);
   string(initialCommand);
-  await invokeAndTransfer$i(initialCommand, port, rpcId);
+  await invokeAndTransfer$j(initialCommand, port, rpcId);
 };
 const sendMessagePortToMarkdownWorker = async (port, initialCommand, rpcId) => {
   object(port);
@@ -12826,7 +12847,7 @@ const sendMessagePortToMarkdownWorker = async (port, initialCommand, rpcId) => {
 const sendMessagePortToClipBoardWorker = async (port, initialCommand, rpcId) => {
   object(port);
   string(initialCommand);
-  await invokeAndTransfer$9(initialCommand, port, rpcId);
+  await invokeAndTransfer$a(initialCommand, port, rpcId);
 };
 const sendMessagePortToMainAreaWorker = async (port, initialCommand, rpcId) => {
   object(port);
@@ -12836,12 +12857,12 @@ const sendMessagePortToMainAreaWorker = async (port, initialCommand, rpcId) => {
 const sendMessagePortToFileSystemWorker = async (port, initialCommand, rpcId) => {
   object(port);
   string(initialCommand);
-  await invokeAndTransfer$a(initialCommand, port, rpcId);
+  await invokeAndTransfer$b(initialCommand, port, rpcId);
 };
 const sendMessagePortToIconThemeWorker = async (port, initialCommand, rpcId) => {
   object(port);
   string(initialCommand);
-  await invokeAndTransfer$b(initialCommand, port, rpcId);
+  await invokeAndTransfer$c(initialCommand, port, rpcId);
 };
 const sendMessagePortToTextMeasurementWorker = async (port, initialCommand, rpcId) => {
   object(port);
@@ -12856,7 +12877,7 @@ const sendMessagePortToSourceControlWorker = async (port, initialCommand, rpcId)
 const sendMessagePortToExtensionManagementWorker = async (port, initialCommand, rpcId) => {
   object(port);
   string(initialCommand);
-  await invokeAndTransfer$e(initialCommand, port, rpcId);
+  await invokeAndTransfer$f(initialCommand, port, rpcId);
 };
 const sendMessagePortToIframeWorker = async (port, initialCommand, rpcId) => {
   object(port);
@@ -12866,9 +12887,14 @@ const sendMessagePortToIframeWorker = async (port, initialCommand, rpcId) => {
 const sendMessagePortToFileSearchWorker = async (port, initialCommand, rpcId) => {
   object(port);
   string(initialCommand);
-  await invokeAndTransfer$c(initialCommand, port, rpcId);
+  await invokeAndTransfer$d(initialCommand, port, rpcId);
 };
 const sendMessagePortToOpenerWorker = async (port, initialCommand, rpcId) => {
+  object(port);
+  string(initialCommand);
+  await invokeAndTransfer$6(initialCommand, port, rpcId);
+};
+const sendMessagePortToPreviewSandBoxWorker = async (port, initialCommand, rpcId) => {
   object(port);
   string(initialCommand);
   await invokeAndTransfer$5(initialCommand, port, rpcId);
@@ -12893,7 +12919,8 @@ const Commands$S = {
   sendMessagePortToRendererProcess: sendMessagePortToRendererProcess,
   sendMessagePortToSharedProcess: sendMessagePortToSharedProcess,
   sendMessagePortToSourceControlWorker: sendMessagePortToSourceControlWorker,
-  sendMessagePortToTextMeasurementWorker: sendMessagePortToTextMeasurementWorker
+  sendMessagePortToTextMeasurementWorker: sendMessagePortToTextMeasurementWorker,
+  sendMessagePortToPreviewSandBoxWorker: sendMessagePortToPreviewSandBoxWorker
 };
 
 const SendMessagePortToExtensionHostWorker_ipc = {
@@ -13002,7 +13029,7 @@ getHost().endsWith('.gitpod.io');
 const WebView = 'lvce-oss-webview';
 
 const setPort = async (uid, port, origin, portType) => {
-  await invokeAndTransfer$i('WebView.setPort', uid, port, origin, portType);
+  await invokeAndTransfer$j('WebView.setPort', uid, port, origin, portType);
 };
 
 /**
@@ -13018,7 +13045,7 @@ const getSecret = key => {
   return get$e(key);
 };
 const registerInterceptor = async (id, port) => {
-  await invokeAndTransfer$d('WebView.registerInterceptor', id, port);
+  await invokeAndTransfer$e('WebView.registerInterceptor', id, port);
 };
 const unregisterInterceptor = async id => {
   await invoke$w('WebView.unregisterInterceptor', id);
@@ -13031,10 +13058,10 @@ const compat = {
     return invoke$B(...args);
   },
   rendererProcessInvokeAndTransfer(...args) {
-    return invokeAndTransfer$i(...args);
+    return invokeAndTransfer$j(...args);
   },
   extensionHostWorkerInvokeAndTransfer(...args) {
-    return invokeAndTransfer$d(...args);
+    return invokeAndTransfer$e(...args);
   },
   extensionHostWorkerInvoke(...args) {
     return invoke$w(...args);
@@ -13420,8 +13447,8 @@ const apply = (oldState, newState) => {
 };
 
 const hasFunctionalRender$D = true;
-const hasFunctionalRootRender$t = true;
-const hasFunctionalEvents$k = true;
+const hasFunctionalRootRender$w = true;
+const hasFunctionalEvents$n = true;
 const renderDialog$3 = {
   isEqual(oldState, newState) {
     return false;
@@ -13430,7 +13457,7 @@ const renderDialog$3 = {
   multiple: true
 };
 const render$G = [renderDialog$3];
-const renderEventListeners$k = async () => {
+const renderEventListeners$m = async () => {
   const listeners = await invoke$r('About.renderEventListeners');
   return listeners;
 };
@@ -13442,14 +13469,14 @@ const ViewletAbout_ipc = {
   create: create$P,
   getCommands: getCommands$j,
   getKeyBindings: getKeyBindings$m,
-  hasFunctionalEvents: hasFunctionalEvents$k,
+  hasFunctionalEvents: hasFunctionalEvents$n,
   hasFunctionalRender: hasFunctionalRender$D,
-  hasFunctionalRootRender: hasFunctionalRootRender$t,
+  hasFunctionalRootRender: hasFunctionalRootRender$w,
   loadContent: loadContent$K,
   name: name$D,
   render: render$G,
   renderDialog: renderDialog$3,
-  renderEventListeners: renderEventListeners$k
+  renderEventListeners: renderEventListeners$m
 };
 
 const activityBarWorkerUrl = `${assetDir}/packages/activity-bar-worker/dist/activityBarWorkerMain.js`;
@@ -13696,8 +13723,8 @@ const getQuickPickMenuEntries$4 = () => {
 };
 
 const hasFunctionalRender$C = true;
-const hasFunctionalRootRender$s = true;
-const hasFunctionalEvents$j = true;
+const hasFunctionalRootRender$v = true;
+const hasFunctionalEvents$m = true;
 const renderItems$d = {
   isEqual(oldState, newState) {
     return JSON.stringify(oldState.commands) === JSON.stringify(newState.commands);
@@ -13706,7 +13733,7 @@ const renderItems$d = {
   multiple: true
 };
 const render$F = [renderItems$d];
-const renderEventListeners$j = async () => {
+const renderEventListeners$l = async () => {
   const listeners = await invoke$g('ActivityBar.renderEventListeners');
   return listeners;
 };
@@ -13766,16 +13793,16 @@ const ViewletActivityBar_ipc = {
   getKeyBindings: getKeyBindings$l,
   getMenus: getMenus$c,
   getQuickPickMenuEntries: getQuickPickMenuEntries$4,
-  hasFunctionalEvents: hasFunctionalEvents$j,
+  hasFunctionalEvents: hasFunctionalEvents$m,
   hasFunctionalRender: hasFunctionalRender$C,
   hasFunctionalResize: hasFunctionalResize$j,
-  hasFunctionalRootRender: hasFunctionalRootRender$s,
+  hasFunctionalRootRender: hasFunctionalRootRender$v,
   hotReload: hotReload$g,
   loadContent: loadContent$J,
   menus: menus$g,
   name: name$C,
   render: render$F,
-  renderEventListeners: renderEventListeners$j,
+  renderEventListeners: renderEventListeners$l,
   resize: resize$j
 };
 
@@ -13892,8 +13919,10 @@ const Th = 13;
 const THead = 14;
 const Tr = 15;
 const I = 16;
+const H2 = 22;
 const Select$1 = 63;
 const Option = 64;
+const Reference = 100;
 
 const h = (type, props, childCount) => {
   return {
@@ -13943,7 +13972,16 @@ const HandleAudioError = 'handleAudioError';
 const HandleBlur = 'handleBlur';
 const HandleClickAt = 'handleClickAt';
 const HandleClickBackward = 'handleClickBackward';
+const HandleClickClose = 'handleClickClose';
+const HandleClickMaximize = 'handleClickMaximize';
 const HandleClickForward = 'handleClickForward';
+const HandleSashSideBarPointerDown = 'handleSashSideBarPointerDown';
+const HandleSashPreviewPointerDown = 'HandleSashPreviewPointerDown';
+const HandleSashSideBarPointerMove = 'HandleSashSideBarPointerMove';
+const HandleSashSideBarPointerUp = 'HandleSashSideBarPointerUp';
+const HandleSashPanelPointerDown = 'handleSashPanelPointerDown';
+const HandleSashPanelPointerMove = 'handleSashPanelPointerMove';
+const HandleSashPanelPointerUp = 'handleSashPanelPointerUp';
 const HandleClickOpenExternal = 'handleClickOpenExternal';
 const HandleClickReload = 'handleClickReload';
 const HandleContextMenu = 'handleContextMenu';
@@ -13962,7 +14000,7 @@ const getAudioVirtualDom = (src, errorMessage) => {
 };
 
 const hasFunctionalRender$B = true;
-const hasFunctionalRootRender$r = true;
+const hasFunctionalRootRender$u = true;
 const renderAudio = {
   isEqual(oldState, newState) {
     return oldState.src === newState.src && oldState.audioErrorMessage === newState.audioErrorMessage;
@@ -13984,7 +14022,7 @@ const ViewletAudio_ipc = {
   dispose: dispose$q,
   handleAudioError,
   hasFunctionalRender: hasFunctionalRender$B,
-  hasFunctionalRootRender: hasFunctionalRootRender$r,
+  hasFunctionalRootRender: hasFunctionalRootRender$u,
   loadContent: loadContent$I,
   name: name$B,
   render: render$E
@@ -14007,7 +14045,7 @@ const loadContent$H = async state => {
   };
 };
 
-const getDom$1 = overview => {
+const getDom = overview => {
   const dom = [];
   dom.push({
     type: Div,
@@ -14024,7 +14062,7 @@ const renderOverview = {
   },
   apply(oldState, newState) {
     const browserViewString = JSON.stringify(newState.browserViewMap, null, 2);
-    const dom = getDom$1(browserViewString);
+    const dom = getDom(browserViewString);
     return ['setDom', dom];
   }
 };
@@ -14103,7 +14141,7 @@ const handleClickOk = async state => {
   await execute$3(okCommand);
   return state;
 };
-const handleClickClose = async state => {
+const handleClickClose$1 = async state => {
   await closeWidget(Confirm$1);
   return state;
 };
@@ -14121,7 +14159,7 @@ const getKeyBindings$k = () => {
 };
 
 const hasFunctionalRender$z = true;
-const hasFunctionalRootRender$q = true;
+const hasFunctionalRootRender$t = true;
 const renderDialog$2 = {
   isEqual(oldState, newState) {
     return oldState.productName === newState.productName && oldState.lines === newState.lines;
@@ -14150,11 +14188,11 @@ const ViewletConfirm_ipc = {
   create: create$K,
   getKeyBindings: getKeyBindings$k,
   handleClickCancel,
-  handleClickClose,
+  handleClickClose: handleClickClose$1,
   handleClickOk,
   handleFocusIn,
   hasFunctionalRender: hasFunctionalRender$z,
-  hasFunctionalRootRender: hasFunctionalRootRender$q,
+  hasFunctionalRootRender: hasFunctionalRootRender$t,
   loadContent: loadContent$F,
   name: name$z,
   render: render$C,
@@ -14544,8 +14582,8 @@ const getKeyBindings$i = () => {
 };
 
 const hasFunctionalRender$x = true;
-const hasFunctionalRootRender$p = true;
-const hasFunctionalEvents$i = true;
+const hasFunctionalRootRender$s = true;
+const hasFunctionalEvents$l = true;
 const renderDialog$1 = {
   isEqual(oldState, newState) {
     return false;
@@ -14554,7 +14592,7 @@ const renderDialog$1 = {
   multiple: true
 };
 const render$A = [renderDialog$1];
-const renderEventListeners$i = async () => {
+const renderEventListeners$k = async () => {
   const listeners = await invoke$f('LanguageModels.renderEventListeners');
   return listeners;
 };
@@ -14567,15 +14605,15 @@ const ViewletLanguageModels_ipc = {
   getCommands: getCommands$h,
   getKeyBindings: getKeyBindings$i,
   getMenus: getMenus$b,
-  hasFunctionalEvents: hasFunctionalEvents$i,
+  hasFunctionalEvents: hasFunctionalEvents$l,
   hasFunctionalRender: hasFunctionalRender$x,
-  hasFunctionalRootRender: hasFunctionalRootRender$p,
+  hasFunctionalRootRender: hasFunctionalRootRender$s,
   hotReload: hotReload$f,
   loadContent: loadContent$D,
   menus: menus$f,
   render: render$A,
   renderDialog: renderDialog$1,
-  renderEventListeners: renderEventListeners$i
+  renderEventListeners: renderEventListeners$k
 };
 
 const Control = 'Control';
@@ -14691,7 +14729,7 @@ const getDefineKeyBindingsVirtualDom = message => {
 };
 
 const hasFunctionalRender$w = true;
-const hasFunctionalRootRender$o = true;
+const hasFunctionalRootRender$r = true;
 const renderValue = {
   isEqual(oldState, newState) {
     return oldState.value === newState.value;
@@ -14708,7 +14746,7 @@ const renderFocus = {
     return ['focus'];
   }
 };
-const renderDom$4 = {
+const renderDom$6 = {
   isEqual(oldState, newState) {
     return oldState.message === newState.message;
   },
@@ -14717,7 +14755,7 @@ const renderDom$4 = {
     return ['Viewlet.setDom2', dom];
   }
 };
-const render$z = [renderDom$4, renderValue, renderFocus];
+const render$z = [renderDom$6, renderValue, renderFocus];
 
 const ViewletDefineKeyBinding_ipc = {
   __proto__: null,
@@ -14727,7 +14765,7 @@ const ViewletDefineKeyBinding_ipc = {
   handleBlur: handleBlur$2,
   handleKeyDown: handleKeyDown$2,
   hasFunctionalRender: hasFunctionalRender$w,
-  hasFunctionalRootRender: hasFunctionalRootRender$o,
+  hasFunctionalRootRender: hasFunctionalRootRender$r,
   loadContent: loadContent$C,
   render: render$z
 };
@@ -14914,9 +14952,11 @@ const decrement = state => {
 const setUri = wrapPreviewCommand('setUri');
 const rerender$1 = wrapPreviewCommand('rerender');
 const handleClick = wrapPreviewCommand('handleClick');
+const handleMouseMove = wrapPreviewCommand('handleMouseMove');
+const handleKeyUp = wrapPreviewCommand('handleKeyUp');
 const handleKeyDown$1 = wrapPreviewCommand('handleKeyDown');
 const handleInput$2 = wrapPreviewCommand('handleInput');
-const renderEventListeners$h = () => invoke$m('Preview.renderEventListeners');
+const renderEventListeners$j = () => invoke$m('Preview.renderEventListeners');
 const dispose$m = state => {
   return {
     ...state,
@@ -14947,15 +14987,17 @@ const Commands$w = {
   setUri,
   rerender: rerender$1,
   handleKeyDown: handleKeyDown$1,
+  handleKeyUp,
   handleClick,
+  handleMouseMove,
   handleInput: handleInput$2,
-  renderEventListeners: renderEventListeners$h,
+  renderEventListeners: renderEventListeners$j,
   hotReload: hotReload$e
 };
 const hasFunctionalRender$u = true;
-const hasFunctionalRootRender$n = true;
+const hasFunctionalRootRender$q = true;
 const hasFunctionalResize$i = true;
-const hasFunctionalEvents$h = true;
+const hasFunctionalEvents$k = true;
 const renderItems$c = {
   isEqual(oldState, newState) {
     return JSON.stringify(oldState.commands) === JSON.stringify(newState.commands);
@@ -14978,16 +15020,18 @@ const ViewletPreview_ipc = {
   handleClick,
   handleInput: handleInput$2,
   handleKeyDown: handleKeyDown$1,
-  hasFunctionalEvents: hasFunctionalEvents$h,
+  handleKeyUp,
+  handleMouseMove,
+  hasFunctionalEvents: hasFunctionalEvents$k,
   hasFunctionalRender: hasFunctionalRender$u,
   hasFunctionalResize: hasFunctionalResize$i,
-  hasFunctionalRootRender: hasFunctionalRootRender$n,
+  hasFunctionalRootRender: hasFunctionalRootRender$q,
   hotReload: hotReload$e,
   increment,
   loadContent: loadContent$A,
   name: name$w,
   render: render$x,
-  renderEventListeners: renderEventListeners$h,
+  renderEventListeners: renderEventListeners$j,
   rerender: rerender$1,
   setUri
 };
@@ -15691,10 +15735,9 @@ const getVisibleDiffLinesWithTokens = (lines, changes, minLineY, maxLineY, langu
 };
 
 const SetScrollBar = 'setScrollBar';
-const SetTitle = 'setTitle';
 
 const hasFunctionalRender$t = true;
-const hasFunctionalRootRender$m = true;
+const hasFunctionalRootRender$p = true;
 const renderChanges$1 = {
   isEqual(oldState, newState) {
     return oldState.changes === newState.changes && oldState.minLineY === newState.minLineY && oldState.maxLineY === newState.maxLineY;
@@ -15732,7 +15775,7 @@ const ViewletDiffEditor_ipc = {
   create: create$D,
   getDynamicCss,
   hasFunctionalRender: hasFunctionalRender$t,
-  hasFunctionalRootRender: hasFunctionalRootRender$m,
+  hasFunctionalRootRender: hasFunctionalRootRender$p,
   loadContent: loadContent$z,
   name: name$v,
   render: render$w,
@@ -15911,7 +15954,7 @@ const getE2eTestVirtualDom = content => {
 };
 
 const hasFunctionalRender$s = true;
-const hasFunctionalRootRender$l = true;
+const hasFunctionalRootRender$o = true;
 const renderElements = {
   isEqual(oldState, newState) {
     return oldState.name === newState.name && oldState.content === newState.content;
@@ -15968,7 +16011,7 @@ const ViewletE2eTest_ipc = {
   handleSashCornerPointerUp,
   hasFunctionalRender: hasFunctionalRender$s,
   hasFunctionalResize: hasFunctionalResize$h,
-  hasFunctionalRootRender: hasFunctionalRootRender$l,
+  hasFunctionalRootRender: hasFunctionalRootRender$o,
   loadContent: loadContent$y,
   menus: menus$e,
   name: name$u,
@@ -16163,7 +16206,7 @@ const getVisibleE2eTests = (tests, index) => {
 };
 
 const hasFunctionalRender$r = true;
-const hasFunctionalRootRender$k = true;
+const hasFunctionalRootRender$n = true;
 const renderTests = {
   isEqual(oldState, newState) {
     return oldState.tests === newState.tests && oldState.index === newState.index;
@@ -16223,7 +16266,7 @@ const ViewletE2eTests_ipc = {
   handleContextMenu: handleContextMenu$1,
   handleLoad,
   hasFunctionalRender: hasFunctionalRender$r,
-  hasFunctionalRootRender: hasFunctionalRootRender$k,
+  hasFunctionalRootRender: hasFunctionalRootRender$n,
   loadContent: loadContent$x,
   menus: menus$d,
   name: name$t,
@@ -16641,7 +16684,7 @@ const rerender = async state => {
     commands
   };
 };
-const contentLoaded$5 = async state => {
+const contentLoaded$3 = async state => {
   const {
     languageId
   } = state;
@@ -16840,7 +16883,7 @@ const ViewletEditorText_ipc = {
   CommandsWithSideEffectsLazy,
   Css: Css$v,
   Events: Events$4,
-  contentLoaded: contentLoaded$5,
+  contentLoaded: contentLoaded$3,
   contentLoadedEffects,
   create: create$x,
   customErrorRenderer,
@@ -17199,8 +17242,8 @@ const getDisplayName$1 = () => {
 };
 
 const hasFunctionalRender$p = true;
-const hasFunctionalRootRender$j = true;
-const hasFunctionalEvents$g = true;
+const hasFunctionalRootRender$m = true;
+const hasFunctionalEvents$j = true;
 const renderItems$b = {
   isEqual(oldState, newState) {
     return JSON.stringify(oldState.commands) === JSON.stringify(newState.commands);
@@ -17209,7 +17252,7 @@ const renderItems$b = {
   multiple: true
 };
 const render$p = [renderItems$b];
-const renderEventListeners$g = async () => {
+const renderEventListeners$i = async () => {
   const listeners = await invoke$d('Explorer.renderEventListeners');
   return listeners;
 };
@@ -17230,7 +17273,7 @@ const getPostFix = root => {
   }
   return '';
 };
-const renderTitle$3 = {
+const renderTitle$2 = {
   isEqual(oldState, newState) {
     return oldState.root === newState.root;
   },
@@ -17263,18 +17306,18 @@ const ViewletExplorer_ipc = {
   getDisplayName: getDisplayName$1,
   getKeyBindings: getKeyBindings$e,
   getMouseActions,
-  hasFunctionalEvents: hasFunctionalEvents$g,
+  hasFunctionalEvents: hasFunctionalEvents$j,
   hasFunctionalRender: hasFunctionalRender$p,
   hasFunctionalResize: hasFunctionalResize$f,
-  hasFunctionalRootRender: hasFunctionalRootRender$j,
+  hasFunctionalRootRender: hasFunctionalRootRender$m,
   hotReload: hotReload$d,
   loadContent: loadContent$t,
   menus: menus$b,
   name: name$p,
   render: render$p,
   renderActions: renderActions$9,
-  renderEventListeners: renderEventListeners$g,
-  renderTitle: renderTitle$3,
+  renderEventListeners: renderEventListeners$i,
+  renderTitle: renderTitle$2,
   resize: resize$g,
   restoreState,
   saveState: saveState$g
@@ -17415,17 +17458,17 @@ const getMenus$9 = async () => {
 const name$o = 'ExtensionDetail';
 
 const hasFunctionalRender$o = true;
-const hasFunctionalRootRender$i = true;
-const hasFunctionalEvents$f = true;
-const renderDom$3 = {
+const hasFunctionalRootRender$l = true;
+const hasFunctionalEvents$i = true;
+const renderDom$5 = {
   isEqual(oldState, newState) {
     return false;
   },
   apply: apply,
   multiple: true
 };
-const render$o = [renderDom$3];
-const renderEventListeners$f = async () => {
+const render$o = [renderDom$5];
+const renderEventListeners$h = async () => {
   const listeners = await invoke$c('ExtensionDetail.renderEventListeners');
   return listeners;
 };
@@ -17438,16 +17481,16 @@ const ViewletExtensionDetail_ipc = {
   getCommands: getCommands$f,
   getKeyBindings: getKeyBindings$d,
   getMenus: getMenus$9,
-  hasFunctionalEvents: hasFunctionalEvents$f,
+  hasFunctionalEvents: hasFunctionalEvents$i,
   hasFunctionalRender: hasFunctionalRender$o,
   hasFunctionalResize: hasFunctionalResize$e,
-  hasFunctionalRootRender: hasFunctionalRootRender$i,
+  hasFunctionalRootRender: hasFunctionalRootRender$l,
   hotReload: hotReload$c,
   loadContent: loadContent$s,
   menus: menus$a,
   name: name$o,
   render: render$o,
-  renderEventListeners: renderEventListeners$f,
+  renderEventListeners: renderEventListeners$h,
   saveState: saveState$f
 };
 
@@ -17584,8 +17627,8 @@ const getMenus$8 = async () => {
 const name$n = 'Extensions';
 
 const hasFunctionalRender$n = true;
-const hasFunctionalRootRender$h = true;
-const hasFunctionalEvents$e = true;
+const hasFunctionalRootRender$k = true;
+const hasFunctionalEvents$h = true;
 const renderItems$a = {
   isEqual(oldState, newState) {
     return JSON.stringify(oldState.commands) === JSON.stringify(newState.commands);
@@ -17594,7 +17637,7 @@ const renderItems$a = {
   multiple: true
 };
 const render$n = [renderItems$a];
-const renderEventListeners$e = async () => {
+const renderEventListeners$g = async () => {
   const listeners = await invoke$b('SearchExtensions.renderEventListeners');
   return listeners;
 };
@@ -17625,7 +17668,7 @@ const renderActions$8 = {
   }
 };
 
-const renderTitle$2 = {
+const renderTitle$1 = {
   isEqual(oldState, newState) {
     return oldState === newState;
   },
@@ -17661,18 +17704,18 @@ const ViewletExtensions_ipc = {
   getCommands: getCommands$e,
   getKeyBindings: getKeyBindings$c,
   getMenus: getMenus$8,
-  hasFunctionalEvents: hasFunctionalEvents$e,
+  hasFunctionalEvents: hasFunctionalEvents$h,
   hasFunctionalRender: hasFunctionalRender$n,
   hasFunctionalResize: hasFunctionalResize$d,
-  hasFunctionalRootRender: hasFunctionalRootRender$h,
+  hasFunctionalRootRender: hasFunctionalRootRender$k,
   hotReload: hotReload$b,
   loadContent: loadContent$r,
   menus: menus$9,
   name: name$n,
   render: render$n,
   renderActions: renderActions$8,
-  renderEventListeners: renderEventListeners$e,
-  renderTitle: renderTitle$2,
+  renderEventListeners: renderEventListeners$g,
+  renderTitle: renderTitle$1,
   resize: resize$f,
   saveState: saveState$e
 };
@@ -17776,8 +17819,8 @@ const getKeyBindings$b = () => {
 const name$m = 'IframeInspector';
 
 const hasFunctionalRender$m = true;
-const hasFunctionalRootRender$g = true;
-const hasFunctionalEvents$d = true;
+const hasFunctionalRootRender$j = true;
+const hasFunctionalEvents$g = true;
 const renderContent = {
   isEqual(oldState, newState) {
     return false;
@@ -17786,7 +17829,7 @@ const renderContent = {
   multiple: true
 };
 const render$m = [renderContent];
-const renderEventListeners$d = async () => {
+const renderEventListeners$f = async () => {
   const listeners = await invoke$a('IframeInspector.renderEventListeners');
   return listeners;
 };
@@ -17798,15 +17841,15 @@ const ViewletIframeInspector_ipc = {
   create: create$q,
   getCommands: getCommands$d,
   getKeyBindings: getKeyBindings$b,
-  hasFunctionalEvents: hasFunctionalEvents$d,
+  hasFunctionalEvents: hasFunctionalEvents$g,
   hasFunctionalRender: hasFunctionalRender$m,
-  hasFunctionalRootRender: hasFunctionalRootRender$g,
+  hasFunctionalRootRender: hasFunctionalRootRender$j,
   hotReload: hotReload$a,
   loadContent: loadContent$q,
   name: name$m,
   render: render$m,
   renderContent,
-  renderEventListeners: renderEventListeners$d
+  renderEventListeners: renderEventListeners$f
 };
 
 const first = () => {
@@ -18020,7 +18063,7 @@ const loadContent$o = async (state, savedState) => {
   // @ts-ignore
   return loadContent$p(state, savedState);
 };
-const contentLoaded$4 = state => {
+const contentLoaded$2 = state => {
   set$a('Locations', {
     factory: ViewletLocations,
     state
@@ -18030,8 +18073,8 @@ const contentLoaded$4 = state => {
 const dispose$g = dispose$h;
 
 const hasFunctionalRender$l = true;
-const hasFunctionalRootRender$f = true;
-const hasFunctionalEvents$c = true;
+const hasFunctionalRootRender$i = true;
+const hasFunctionalEvents$f = true;
 const renderItems$9 = {
   isEqual(oldState, newState) {
     return newState.commands.length === 0;
@@ -18040,7 +18083,7 @@ const renderItems$9 = {
   multiple: true
 };
 const render$l = [renderItems$9];
-const renderEventListeners$c = async () => {
+const renderEventListeners$e = async () => {
   const listeners = await invoke$9('References.renderEventListeners');
   return listeners;
 };
@@ -18051,16 +18094,16 @@ const Commands$m = {};
 const ViewletImplementations_ipc = {
   __proto__: null,
   Commands: Commands$m,
-  contentLoaded: contentLoaded$4,
+  contentLoaded: contentLoaded$2,
   create: create$o,
   dispose: dispose$g,
-  hasFunctionalEvents: hasFunctionalEvents$c,
+  hasFunctionalEvents: hasFunctionalEvents$f,
   hasFunctionalRender: hasFunctionalRender$l,
-  hasFunctionalRootRender: hasFunctionalRootRender$f,
+  hasFunctionalRootRender: hasFunctionalRootRender$i,
   loadContent: loadContent$o,
   name: name$l,
   render: render$l,
-  renderEventListeners: renderEventListeners$c
+  renderEventListeners: renderEventListeners$e
 };
 
 const getInlineDiffChanges = (linesLeft, linesRight) => {
@@ -18276,7 +18319,7 @@ const getVisibleInlineDiffEditorLines = (inlineDiffLines, minLineY, maxLineY) =>
 };
 
 const hasFunctionalRender$k = true;
-const hasFunctionalRootRender$e = true;
+const hasFunctionalRootRender$h = true;
 const renderChanges = {
   isEqual(oldState, newState) {
     return oldState.inlineChanges === newState.inlineChanges && oldState.minLineY === newState.minLineY && oldState.maxLineY === newState.maxLineY && oldState.deltaY === newState.deltaY && oldState.height === newState.height && oldState.finalDeltaY === newState.finalDeltaY && oldState.lineNumbers === newState.lineNumbers;
@@ -18309,7 +18352,7 @@ const ViewletInlineDiffEditor_ipc = {
   create: create$n,
   getDynamicCss,
   hasFunctionalRender: hasFunctionalRender$k,
-  hasFunctionalRootRender: hasFunctionalRootRender$e,
+  hasFunctionalRootRender: hasFunctionalRootRender$h,
   loadContent: loadContent$n,
   name: name$k,
   render: render$k,
@@ -18440,8 +18483,8 @@ const getMenus$7 = async () => {
 const name$j = 'KeyBindings';
 
 const hasFunctionalRender$j = true;
-const hasFunctionalRootRender$d = true;
-const hasFunctionalEvents$b = true;
+const hasFunctionalRootRender$g = true;
+const hasFunctionalEvents$e = true;
 const renderKeyBindings = {
   isEqual(oldState, newState) {
     return newState.commands && newState.commands.length === 0;
@@ -18450,7 +18493,7 @@ const renderKeyBindings = {
   multiple: true
 };
 const render$j = [renderKeyBindings];
-const renderEventListeners$b = async () => {
+const renderEventListeners$d = async () => {
   const listeners = await invoke$8('KeyBindings.renderEventListeners');
   return listeners;
 };
@@ -18484,21 +18527,21 @@ const ViewletKeyBindings_ipc = {
   getCommands: getCommands$c,
   getKeyBindings: getKeyBindings$a,
   getMenus: getMenus$7,
-  hasFunctionalEvents: hasFunctionalEvents$b,
+  hasFunctionalEvents: hasFunctionalEvents$e,
   hasFunctionalRender: hasFunctionalRender$j,
   hasFunctionalResize: hasFunctionalResize$c,
-  hasFunctionalRootRender: hasFunctionalRootRender$d,
+  hasFunctionalRootRender: hasFunctionalRootRender$g,
   hotReload: hotReload$8,
   loadContent: loadContent$m,
   menus: menus$8,
   name: name$j,
   render: render$j,
-  renderEventListeners: renderEventListeners$b,
+  renderEventListeners: renderEventListeners$d,
   resize: resize$e,
   saveState: saveState$b
 };
 
-const commit = 'cbbb037';
+const commit = '37635ff';
 
 const getDefaultTitleBarHeight = () => {
   switch (getPlatform$1()) {
@@ -18509,53 +18552,46 @@ const getDefaultTitleBarHeight = () => {
   }
 };
 
-const WindowWidth = 0;
-const WindowHeight = 1;
-const MainVisible = 2;
-const MainTop = 3;
-const MainLeft = 4;
-const MainWidth = 5;
-const MainHeight = 6;
-const ActivityBarVisible = 7;
-const ActivityBarTop = 8;
-const ActivityBarLeft = 9;
-const ActivityBarWidth = 10;
-const ActivityBarHeight = 11;
-const SideBarVisible = 12;
-const SideBarTop = 13;
-const SideBarLeft = 14;
-const SideBarWidth = 15;
-const SideBarHeight = 16;
-const SideBarMinWidth = 17;
-const SideBarMaxWidth = 18;
-const PanelVisible = 19;
-const panelTop = 20;
-const PanelLeft = 21;
-const PanelWidth = 22;
-const PanelHeight = 23;
-const PanelMinHeight = 24;
-const PanelMaxHeight = 25;
-const StatusBarVisible = 26;
-const StatusBarTop = 27;
-const StatusBarLeft = 28;
-const StatusBarWidth = 29;
-const StatusBarHeight = 30;
-const TitleBarVisible = 31;
-const TitleBarTop = 32;
-const TitleBarLeft = 33;
-const TitleBarWidth = 34;
-const TitleBarHeight = 35;
-const PreviewVisible = 36;
-const PreviewTop = 37;
-const PreviewLeft = 38;
-const PreviewWidth = 39;
-const PreviewHeight = 40;
-const PreviewMinHeight = 41;
-const PreviewMaxHeight = 42;
-const PreviewMinWidth = 43;
-const PreviewMaxWidth = 44;
-const TitleBarNative = 45;
-const Total = 46;
+const WindowWidth = 'windowWidth';
+const WindowHeight = 'windowHeight';
+const MainVisible = 'mainVisible';
+const MainTop = 'mainTop';
+const MainLeft = 'mainLeft';
+const MainWidth = 'mainWidth';
+const MainHeight = 'mainHeight';
+const ActivityBarVisible = 'activityBarVisible';
+const ActivityBarTop = 'activityBarTop';
+const ActivityBarLeft = 'activityBarLeft';
+const ActivityBarWidth = 'activityBarWidth';
+const ActivityBarHeight = 'activityBarHeight';
+const SideBarVisible = 'sideBarVisible';
+const SideBarTop = 'sideBarTop';
+const SideBarLeft = 'sideBarLeft';
+const SideBarWidth = 'sideBarWidth';
+const SideBarHeight = 'sideBarHeight';
+const SideBarMinWidth = 'sideBarMinWidth';
+const SideBarMaxWidth = 'sideBarMaxWidth';
+const PanelVisible = 'panelVisible';
+const panelTop = 'panelTop';
+const PanelLeft = 'panelLeft';
+const PanelWidth = 'panelWidth';
+const PanelHeight = 'panelHeight';
+const PanelMinHeight = 'panelMinHeight';
+const PanelMaxHeight = 'panelMaxHeight';
+const StatusBarVisible = 'statusBarVisible';
+const StatusBarTop = 'statusBarTop';
+const StatusBarLeft = 'statusBarLeft';
+const StatusBarWidth = 'statusBarWidth';
+const StatusBarHeight = 'statusBarHeight';
+const TitleBarVisible = 'titleBarVisible';
+const TitleBarTop = 'titleBarTop';
+const TitleBarWidth = 'titleBarWidth';
+const TitleBarHeight = 'titleBarHeight';
+const PreviewVisible = 'previewVisible';
+const PreviewTop = 'previewTop';
+const PreviewLeft = 'previewLeft';
+const PreviewWidth = 'previewWidth';
+const PreviewHeight = 'previewHeight';
 const SashId = 'sashId';
 
 const Main$1 = {
@@ -18733,7 +18769,7 @@ const getModuleId$1 = async (uri, opener) => {
   return EditorText;
 };
 
-const getPoints = (source, destination, sideBarLocation = Right) => {
+const getPoints = (source, sideBarLocation = Right) => {
   const activityBarVisible = source[ActivityBarVisible];
   const panelVisible = source[PanelVisible];
   const sideBarVisible = source[SideBarVisible];
@@ -18778,11 +18814,11 @@ const getPoints = (source, destination, sideBarLocation = Right) => {
     } else {
       p8 = availableWidth;
     }
-    destination[ActivityBarLeft] = p8;
-    destination[ActivityBarTop] = p2;
-    destination[ActivityBarWidth] = 48;
-    destination[ActivityBarHeight] = p4 - p2;
-    destination[ActivityBarVisible] = activityBarVisible;
+    const destinationActivityBarLeft = p8;
+    const destinationActivityBarTop = p2;
+    const destinationActivityBarWidth = 48;
+    const destinationActivityBarHeight = p4 - p2;
+    const destinationActivityBarVisible = activityBarVisible;
 
     // Calculate sidebar width for left section
     const adjustedSideBarWidth = previewVisible ? Math.min(newSideBarWidth, (availableWidth - 48) * 0.3) : newSideBarWidth;
@@ -18790,40 +18826,79 @@ const getPoints = (source, destination, sideBarLocation = Right) => {
     if (sideBarVisible && p7 < 0) {
       p7 = 0;
     }
-    destination[MainLeft] = p6;
-    destination[MainTop] = p2;
-    destination[MainWidth] = p7 - p6;
-    destination[MainHeight] = p3 - p2;
-    destination[MainVisible] = 1;
-    destination[PanelLeft] = p6;
-    destination[panelTop] = p3;
-    destination[PanelWidth] = previewVisible ? availableWidth : windowWidth;
-    destination[PanelHeight] = p4 - p3;
-    destination[PanelVisible] = panelVisible;
-    destination[SideBarLeft] = p7;
-    destination[SideBarTop] = p2;
-    destination[SideBarWidth] = adjustedSideBarWidth;
-    destination[SideBarHeight] = p3 - p2;
-    destination[SideBarVisible] = sideBarVisible;
-    destination[StatusBarLeft] = p1;
-    destination[StatusBarTop] = p4;
-    destination[StatusBarWidth] = windowWidth;
-    destination[StatusBarHeight] = 20;
-    destination[StatusBarVisible] = statusBarVisible;
-    destination[TitleBarLeft] = p6;
-    destination[TitleBarTop] = p1;
-    destination[TitleBarWidth] = windowWidth;
-    if (source[TitleBarNative]) {
-      destination[TitleBarHeight] = 0;
+    const destinationMainLeft = p6;
+    const destinationMainTop = p2;
+    const destinationMainWidth = p7 - p6;
+    const destinationMainHeight = p3 - p2;
+    const destinationMainVisible = 1;
+    const destinationPanelLeft = p6;
+    const destinationpanelTop = p3;
+    const destinationPanelWidth = previewVisible ? availableWidth : windowWidth;
+    const destinationPanelHeight = p4 - p3;
+    const destinationPanelVisible = panelVisible;
+    const destinationSideBarLeft = p7;
+    const destinationSideBarTop = p2;
+    const destinationSideBarWidth = adjustedSideBarWidth;
+    const destinationSideBarHeight = p3 - p2;
+    const destinationSideBarVisible = sideBarVisible;
+    const destinationStatusBarLeft = p1;
+    const destinationStatusBarTop = p4;
+    const destinationStatusBarWidth = windowWidth;
+    const destinationStatusBarHeight = 20;
+    const destinationStatusBarVisible = statusBarVisible;
+    const destinationTitleBarLeft = p6;
+    const destinationTitleBarTop = p1;
+    const destinationTitleBarWidth = windowWidth;
+    let destinationTitleBarHeight = 0;
+    if (!source.titleBarVisible) {
+      destinationTitleBarHeight = 0;
     } else {
-      destination[TitleBarHeight] = getDefaultTitleBarHeight();
-    }
-    destination[TitleBarVisible] = titleBarVisible;
-    destination[PreviewLeft] = previewVisible ? availableWidth : 0;
-    destination[PreviewTop] = p2;
-    destination[PreviewWidth] = previewVisible ? windowWidth - availableWidth : 0;
-    destination[PreviewHeight] = p3 - p2;
-    destination[PreviewVisible] = previewVisible;
+      destinationTitleBarHeight = getDefaultTitleBarHeight();
+    }
+    const destinationTitleBarVisible = titleBarVisible;
+    const destinationPreviewLeft = previewVisible ? availableWidth : 0;
+    const destinationPreviewTop = p2;
+    const destinationPreviewWidth = previewVisible ? windowWidth - availableWidth : 0;
+    const destinationPreviewHeight = p3 - p2;
+    const destinationPreviewVisible = previewVisible;
+    return {
+      ...source,
+      activityBarTop: destinationActivityBarTop,
+      activityBarLeft: destinationActivityBarLeft,
+      activityBarWidth: destinationActivityBarWidth,
+      activityBarHeight: destinationActivityBarHeight,
+      activityBarVisible: destinationActivityBarVisible,
+      mainLeft: destinationMainLeft,
+      mainTop: destinationMainTop,
+      mainWidth: destinationMainWidth,
+      mainHeight: destinationMainHeight,
+      mainVisible: Boolean(destinationMainVisible),
+      panelLeft: destinationPanelLeft,
+      panelTop: destinationpanelTop,
+      panelWidth: destinationPanelWidth,
+      panelHeight: destinationPanelHeight,
+      panelVisible: destinationPanelVisible,
+      sideBarLeft: destinationSideBarLeft,
+      sideBarTop: destinationSideBarTop,
+      sideBarWidth: destinationSideBarWidth,
+      sideBarHeight: destinationSideBarHeight,
+      sideBarVisible: destinationSideBarVisible,
+      statusBarLeft: destinationStatusBarLeft,
+      statusBarTop: destinationStatusBarTop,
+      statusBarWidth: destinationStatusBarWidth,
+      statusBarHeight: destinationStatusBarHeight,
+      statusBarVisible: destinationStatusBarVisible,
+      titleBarLeft: destinationTitleBarLeft,
+      titleBarTop: destinationTitleBarTop,
+      titleBarWidth: destinationTitleBarWidth,
+      titleBarHeight: destinationTitleBarHeight,
+      titleBarVisible: destinationTitleBarVisible,
+      previewLeft: destinationPreviewLeft,
+      previewTop: destinationPreviewTop,
+      previewWidth: destinationPreviewWidth,
+      previewHeight: destinationPreviewHeight,
+      previewVisible: destinationPreviewVisible
+    };
   } else {
     const p1 = /* Top */0;
     let p2 = /* End of Title Bar */0;
@@ -18853,70 +18928,106 @@ const getPoints = (source, destination, sideBarLocation = Right) => {
     } else {
       p8 = p7;
     }
-    destination[ActivityBarLeft] = p6;
-    destination[ActivityBarTop] = p2;
-    destination[ActivityBarWidth] = 48;
-    destination[ActivityBarHeight] = p4 - p2;
-    destination[ActivityBarVisible] = activityBarVisible;
+    const destinationActivityBarLeft = p6;
+    const destinationActivityBarTop = p2;
+    const destinationActivityBarWidth = 48;
+    const destinationActivityBarHeight = p4 - p2;
+    const destinationActivityBarVisible = activityBarVisible;
 
     // For when preview is visible, constrain main area to left 50% of window
     let mainWidth = availableWidth - p8;
-    destination[MainLeft] = p8;
-    destination[MainTop] = p2;
-    destination[MainWidth] = mainWidth;
-    destination[MainHeight] = p3 - p2;
-    destination[MainVisible] = 1;
-    destination[PanelLeft] = p6;
-    destination[panelTop] = p3;
-    destination[PanelWidth] = availableWidth;
-    destination[PanelHeight] = p4 - p3;
-    destination[PanelVisible] = panelVisible;
-    destination[SideBarLeft] = p7;
-    destination[SideBarTop] = p2;
-    destination[SideBarWidth] = p8 - p7;
-    destination[SideBarHeight] = p3 - p2;
-    destination[SideBarVisible] = sideBarVisible;
-    destination[StatusBarLeft] = p1;
-    destination[StatusBarTop] = p4;
-    destination[StatusBarWidth] = windowWidth;
-    destination[StatusBarHeight] = 20;
-    destination[StatusBarVisible] = statusBarVisible;
-    destination[TitleBarLeft] = p6;
-    destination[TitleBarTop] = p1;
-    destination[TitleBarWidth] = windowWidth;
-    destination[TitleBarHeight] = titleBarHeight;
-    destination[TitleBarVisible] = titleBarVisible;
-    destination[PreviewLeft] = previewVisible ? availableWidth : 0;
-    destination[PreviewTop] = p2;
-    destination[PreviewWidth] = previewVisible ? windowWidth - availableWidth : 0;
-    destination[PreviewHeight] = p3 - p2;
-    destination[PreviewVisible] = previewVisible;
+    const destinationMainLeft = p8;
+    const destinationMainTop = p2;
+    const destinationMainWidth = mainWidth;
+    const destinationMainHeight = p3 - p2;
+    const destinationMainVisible = 1;
+    const destinationPanelLeft = p6;
+    const destinationpanelTop = p3;
+    const destinationPanelWidth = availableWidth;
+    const destinationPanelHeight = p4 - p3;
+    const destinationPanelVisible = panelVisible;
+    const destinationSideBarLeft = p7;
+    const destinationSideBarTop = p2;
+    const destinationSideBarWidth = p8 - p7;
+    const destinationSideBarHeight = p3 - p2;
+    const destinationSideBarVisible = sideBarVisible;
+    const destinationStatusBarLeft = p1;
+    const destinationStatusBarTop = p4;
+    const destinationStatusBarWidth = windowWidth;
+    const destinationStatusBarHeight = 20;
+    const destinationStatusBarVisible = statusBarVisible;
+    const destinationTitleBarLeft = p6;
+    const destinationTitleBarTop = p1;
+    const destinationTitleBarWidth = windowWidth;
+    const destinationTitleBarHeight = titleBarHeight;
+    const destinationTitleBarVisible = titleBarVisible;
+    const destinationPreviewLeft = previewVisible ? availableWidth : 0;
+    const destinationPreviewTop = p2;
+    const destinationPreviewWidth = previewVisible ? windowWidth - availableWidth : 0;
+    const destinationPreviewHeight = p3 - p2;
+    const destinationPreviewVisible = previewVisible;
+    return {
+      ...source,
+      activityBarTop: destinationActivityBarTop,
+      activityBarLeft: destinationActivityBarLeft,
+      activityBarWidth: destinationActivityBarWidth,
+      activityBarHeight: destinationActivityBarHeight,
+      activityBarVisible: destinationActivityBarVisible,
+      mainLeft: destinationMainLeft,
+      mainTop: destinationMainTop,
+      mainWidth: destinationMainWidth,
+      mainHeight: destinationMainHeight,
+      mainVisible: Boolean(destinationMainVisible),
+      panelLeft: destinationPanelLeft,
+      panelTop: destinationpanelTop,
+      panelWidth: destinationPanelWidth,
+      panelHeight: destinationPanelHeight,
+      panelVisible: destinationPanelVisible,
+      sideBarLeft: destinationSideBarLeft,
+      sideBarTop: destinationSideBarTop,
+      sideBarWidth: destinationSideBarWidth,
+      sideBarHeight: destinationSideBarHeight,
+      sideBarVisible: destinationSideBarVisible,
+      statusBarLeft: destinationStatusBarLeft,
+      statusBarTop: destinationStatusBarTop,
+      statusBarWidth: destinationStatusBarWidth,
+      statusBarHeight: destinationStatusBarHeight,
+      statusBarVisible: destinationStatusBarVisible,
+      titleBarLeft: destinationTitleBarLeft,
+      titleBarTop: destinationTitleBarTop,
+      titleBarWidth: destinationTitleBarWidth,
+      titleBarHeight: destinationTitleBarHeight,
+      titleBarVisible: destinationTitleBarVisible,
+      previewLeft: destinationPreviewLeft,
+      previewTop: destinationPreviewTop,
+      previewWidth: destinationPreviewWidth,
+      previewHeight: destinationPreviewHeight,
+      previewVisible: destinationPreviewVisible
+    };
   }
 };
+
 const create$l = id => {
   number(id);
   return {
-    points: new Uint16Array(Total),
     sideBarLocation: Right,
     uid: id,
-    activityBarId: create$11(),
-    activityBarSashId: create$11(),
-    sideBarSashId: create$11(),
-    sideBarId: create$11(),
-    panelSashId: create$11(),
-    panelId: create$11(),
-    mainId: create$11(),
-    contentAreaId: create$11(),
-    mainContentsId: create$11(),
-    statusBarId: create$11(),
-    titleBarId: create$11(),
-    workbenchId: create$11(),
-    previewId: create$11(),
-    previewSashId: create$11(),
+    activityBarId: -1,
+    activityBarSashId: -1,
+    sideBarSashId: -1,
+    sideBarId: -1,
+    panelSashId: -1,
+    panelId: -1,
+    mainId: -1,
+    contentAreaId: -1,
+    statusBarId: -1,
+    titleBarId: -1,
+    workbenchId: -1,
+    previewId: -1,
+    previewSashId: -1,
     activityBarVisible: false,
     activityBarSashVisible: false,
-    contentAreaVisible: false,
-    mainContentsVisible: false,
+    contentAreaVisible: true,
     mainVisible: false,
     panelSashVisible: false,
     panelVisible: false,
@@ -18927,6 +19038,45 @@ const create$l = id => {
     statusBarVisible: false,
     titleBarVisible: false,
     workbenchVisible: false,
+    activityBarHeight: 0,
+    activityBarLeft: 0,
+    activityBarTop: 0,
+    activityBarWidth: 0,
+    mainHeight: 0,
+    mainLeft: 0,
+    mainTop: 0,
+    mainWidth: 0,
+    panelHeight: 0,
+    panelLeft: 0,
+    panelTop: 0,
+    panelWidth: 0,
+    previewHeight: 0,
+    previewLeft: 0,
+    previewTop: 0,
+    previewWidth: 0,
+    sideBarHeight: 0,
+    sideBarLeft: 0,
+    sideBarTop: 0,
+    sideBarWidth: 0,
+    statusBarHeight: 0,
+    statusBarLeft: 0,
+    statusBarTop: 0,
+    windowWidth: 0,
+    windowHeight: 0,
+    statusBarWidth: 0,
+    titleBarHeight: 0,
+    titleBarLeft: 0,
+    titleBarTop: 0,
+    titleBarWidth: 0,
+    panelMaxHeight: 0,
+    panelMinHeight: 0,
+    previewMaxHeight: 0,
+    previewMaxWidth: 0,
+    previewMinHeight: 0,
+    previewMinWidth: 0,
+    sideBarMaxWidth: 0,
+    sideBarMinWidth: 0,
+    titleBarNative: false,
     sideBarView: '',
     updateState: 'none',
     updateProgress: 0,
@@ -18935,24 +19085,35 @@ const create$l = id => {
     assetDir,
     commands: [],
     sashId: None$6,
-    previewUri: ''
+    previewUri: '',
+    panelView: Problems,
+    initial: true
   };
 };
 const saveState$a = state => {
   const {
-    points,
-    sideBarView,
-    sideBarLocation,
+    activityBarVisible,
+    panelHeight,
+    panelVisible,
     previewUri,
-    previewVisible
+    previewVisible,
+    previewWidth,
+    sideBarLocation,
+    sideBarView,
+    sideBarVisible,
+    sideBarWidth
   } = state;
-  const pointsArray = [...points];
   return {
-    points: pointsArray,
-    sideBarView,
-    sideBarLocation,
+    activityBarVisible,
+    panelHeight,
+    panelVisible,
     previewUri,
-    previewVisible
+    previewVisible,
+    previewWidth,
+    sideBarLocation,
+    sideBarView,
+    sideBarVisible,
+    sideBarWidth
   };
 };
 const getSideBarLocationType = () => {
@@ -18965,15 +19126,32 @@ const getSideBarLocationType = () => {
   }
 };
 const getSavedPoints = savedState => {
-  if (savedState && savedState.points) {
-    const {
-      points
-    } = savedState;
-    if (Array.isArray(points) && points.length === Total) {
-      return new Uint16Array(points);
-    }
+  if (!savedState) {
+    return {
+      sideBarVisible: true,
+      sideBarWidth: 240,
+      previewWidth: 0,
+      previewVisible: false,
+      panelVisible: false,
+      panelHeight: 0
+    };
   }
-  return new Uint16Array(Total);
+  const {
+    sideBarVisible,
+    sideBarWidth,
+    previewWidth,
+    previewVisible,
+    panelVisible,
+    panelHeight
+  } = savedState;
+  return {
+    sideBarVisible: sideBarVisible || true,
+    sideBarWidth: sideBarWidth || 240,
+    previewWidth: previewWidth || 0,
+    previewVisible: previewVisible || false,
+    panelVisible: panelVisible || false,
+    panelHeight: panelHeight || 160
+  };
 };
 const isNativeTitleBarStyle = platform => {
   return platform === Electron$1 && get$e('window.titleBarStyle') === 'native';
@@ -18996,76 +19174,75 @@ const loadContent$l = (state, savedState) => {
     windowHeight
   } = bounds;
   const sideBarLocation = getSideBarLocationType();
-  const newPoints = getSavedPoints(savedState);
+  const {
+    panelHeight,
+    panelVisible,
+    sideBarVisible,
+    sideBarWidth,
+    previewVisible,
+    previewWidth
+  } = getSavedPoints(savedState);
   const savedView = getSavedSideBarView(savedState);
   const previewUri = savedState?.previewUri || '';
-  const previewVisible = savedState?.previewVisible || false;
-  newPoints[ActivityBarVisible] = 1;
-  newPoints[ActivityBarWidth] = 48;
-  newPoints[MainVisible] = 1;
-  newPoints[PanelHeight] ||= 160;
-  newPoints[PanelMaxHeight] = 600;
-  newPoints[PanelMinHeight] = 150;
-  newPoints[SideBarMaxWidth] = 9999999;
-  newPoints[SideBarMinWidth] = 170;
-  newPoints[SideBarVisible] = 1;
-  newPoints[SideBarWidth] ||= 240;
-  newPoints[StatusBarHeight] = 20;
-  newPoints[StatusBarVisible] = 1;
-  newPoints[PreviewVisible] = previewVisible ? 1 : 0;
-  newPoints[PreviewHeight] ||= 350;
-  newPoints[PreviewMinHeight] = Math.max(200, windowHeight / 2);
-  newPoints[PreviewMaxHeight] = 1200;
-  newPoints[PreviewWidth] ||= 600;
-  newPoints[PreviewMinWidth] = 100;
-  newPoints[PreviewMaxWidth] = Math.max(1800, windowWidth / 2);
-  if (isNativeTitleBarStyle(state.platform)) {
-    newPoints[TitleBarHeight] = 0;
-    newPoints[TitleBarVisible] = 1;
-    newPoints[TitleBarNative] = 1;
-  } else {
-    newPoints[TitleBarHeight] = getDefaultTitleBarHeight();
-    newPoints[TitleBarVisible] = 1;
-    newPoints[TitleBarNative] = 0;
-  }
-  newPoints[WindowHeight] = windowHeight;
-  newPoints[WindowWidth] = windowWidth;
-  // TODO get side bar min width from preferences
-  getPoints(newPoints, newPoints, sideBarLocation);
-  return {
+  const intermediateState = {
     ...state,
-    points: newPoints,
-    sideBarLocation,
+    activityBarVisible: true,
+    activityBarWidth: 48,
+    mainVisible: true,
+    panelHeight,
+    panelMaxHeight: 600,
+    panelMinHeight: 150,
+    sideBarMaxWidth: 9999999,
+    panelVisible,
+    sideBarMinWidth: 170,
+    sideBarVisible,
+    sideBarWidth,
+    statusBarHeight: 20,
+    statusBarVisible: true,
+    previewVisible,
+    previewHeight: 350,
+    previewMinHeight: Math.max(200, windowHeight / 2),
+    previewMaxHeight: 1200,
+    previewWidth,
+    previewMinWidth: 100,
+    previewMaxWidth: Math.max(1800, windowWidth / 2),
+    titleBarHeight: isNativeTitleBarStyle(state.platform) ? 0 : getDefaultTitleBarHeight(),
+    titleBarVisible: true,
+    titleBarNative: isNativeTitleBarStyle(state.platform),
+    windowHeight,
+    windowWidth,
     activityBarSashVisible: true,
-    sideBarSashVisible: true,
     panelSashVisible: true,
     previewSashVisible: true,
-    previewVisible,
-    mainContentsVisible: true,
-    workbenchVisible: true,
+    previewUri,
+    sideBarLocation,
+    sideBarSashVisible: true,
     sideBarView: savedView,
-    previewUri
+    workbenchVisible: true,
+    initial: false
   };
+  // TODO get side bar min width from preferences
+  const newState = getPoints(intermediateState, sideBarLocation);
+  return newState;
 };
 const show$4 = async (state, module, currentViewletId) => {
-  const {
-    points
-  } = state;
   const {
     kVisible,
     kTop,
     kLeft,
     kWidth,
     kHeight,
-    moduleId
+    moduleId,
+    kId
   } = module;
-  const newPoints = new Uint16Array(points);
-  newPoints[kVisible] = 1;
-  getPoints(newPoints, newPoints);
-  const x = newPoints[kLeft];
-  const y = newPoints[kTop];
-  const width = newPoints[kWidth];
-  const height = newPoints[kHeight];
+  const intermediateState = {
+    ...state,
+    [kVisible]: true
+  };
+  const x = state[kLeft];
+  const y = state[kTop];
+  const width = state[kWidth];
+  const height = state[kHeight];
   const uid = state.uid;
   const childUid = create$11();
   const commands = await load$5({
@@ -19083,74 +19260,59 @@ const show$4 = async (state, module, currentViewletId) => {
     parentUid: uid,
     uid: childUid
   }, false, true, undefined);
-  if (commands) {
-    commands.push(['Viewlet.append', uid, childUid]);
-  }
-  const resizeCommands = await getResizeCommands(points, newPoints);
+  const resizeCommands = await getResizeCommands(state, intermediateState);
   commands.push(...resizeCommands);
-  const isPreview = moduleId === Preview$3;
   return {
     newState: {
-      ...state,
-      points: newPoints,
-      ...(isPreview && {
-        previewVisible: true,
-        previewSashVisible: true
-      })
+      ...intermediateState,
+      [kId]: childUid
     },
     commands
   };
 };
 const hide$2 = async (state, module) => {
-  const {
-    points
-  } = state;
   const {
     kVisible,
     moduleId
   } = module;
-  const newPoints = new Uint16Array(points);
-  newPoints[kVisible] = 0;
-  getPoints(newPoints, newPoints);
+  const newState = getPoints({
+    ...state,
+    [kVisible]: false
+  });
   // TODO save state to local storage after rending (in background)
   await saveViewletState(moduleId);
   // TODO also resize other viewlets if necessary
   const instanceState = getState$1(moduleId);
   const commands = disposeFunctional(instanceState.uid);
-  const resizeCommands = await getResizeCommands(points, newPoints);
+  const resizeCommands = await getResizeCommands(state, newState);
   commands.push(...resizeCommands);
 
   // TODO send change event to activity bar worker
   // but in a functional way so that there is only
   // one rendering event
 
-  const isPreview = moduleId === Preview$3;
   return {
-    newState: {
-      ...state,
-      points: newPoints,
-      ...(isPreview && {
-        previewVisible: false,
-        previewSashVisible: false
-      })
-    },
+    newState,
     commands
   };
 };
 const toggle = (state, module, moduleId) => {
-  const {
-    points
-  } = state;
   const {
     kVisible
   } = module;
-  if (points[kVisible]) {
+  console.log({
+    kVisible,
+    state
+  });
+  if (state[kVisible]) {
     return hide$2(state, module);
   }
   return show$4(state, module);
 };
 const showSideBar = async state => {
-  // @ts-ignore
+  const {
+    sideBarView
+  } = state;
   const {
     newState,
     commands
@@ -19158,13 +19320,14 @@ const showSideBar = async state => {
   const {
     activityBarId
   } = newState;
-  const sideBar = getState$1(SideBar$2);
-  // TODO potential race conditions
-  await invoke$g('ActivityBar.handleSideBarViewletChange', activityBarId, sideBar.currentViewletId);
+  await invoke$g('ActivityBar.handleSideBarViewletChange', activityBarId, sideBarView);
   const diffResult = await invoke$g('ActivityBar.diff2', activityBarId);
   const activityBarCommands = await invoke$g('ActivityBar.render2', activityBarId, diffResult);
   return {
-    newState,
+    newState: {
+      ...newState,
+      sideBarVisible: true
+    },
     commands: [...commands, ...activityBarCommands]
   };
 };
@@ -19176,11 +19339,15 @@ const hideSideBar = async state => {
   const {
     activityBarId
   } = newState;
+  // TODO instead of this, call handleSidebarViewChange. activity bar then can get active view if needed
   await invoke$g('ActivityBar.handleSideBarHidden', activityBarId);
   const diffResult = await invoke$g('ActivityBar.diff2', activityBarId);
   const activityBarCommands = await invoke$g('ActivityBar.render2', activityBarId, diffResult);
   return {
-    newState,
+    newState: {
+      ...newState,
+      sideBarVisible: false
+    },
     commands: [...commands, ...activityBarCommands]
   };
 };
@@ -19222,10 +19389,10 @@ const toggleStatusBar = state => {
 };
 const showPreview = async (state, uri) => {
   const {
-    points
+    previewVisible,
+    previewId
   } = state;
-  const previewIsVisible = points[PreviewVisible] === 1;
-  if (previewIsVisible) {
+  if (previewVisible && previewId !== -1) {
     await execute$3('Preview.setUri', uri);
     return {
       newState: {
@@ -19235,6 +19402,10 @@ const showPreview = async (state, uri) => {
       commands: []
     };
   }
+  setState$1(state.uid, {
+    ...state,
+    previewUri: uri
+  });
   // @ts-ignore
   const result = await show$4(state, Preview$1);
   return {
@@ -19251,7 +19422,6 @@ const hidePreview = state => {
 const togglePreview = (state, uri) => {
   // @ts-ignore
   state.previewUri = uri;
-  // @ts-ignore
   return toggle(state, Preview$1);
 };
 const showTitleBar = state => {
@@ -19284,7 +19454,6 @@ const createViewlet = async (state, viewletModuleId, editorUid, tabId, bounds, u
     append: false,
     args: []
   }, false, true);
-  // @ts-ignore
   return {
     newState: state,
     commands: commands
@@ -19308,18 +19477,8 @@ const toggleMain = state => {
   // @ts-ignore
   return toggle(state, Main$1);
 };
-const getReferenceNodes = sideBarLocation => {
-  if (sideBarLocation === Left) {
-    return [TitleBar$1, ActivityBar$2, 'SashActivityBar', 'SashSideBar', SideBar$2, Main$2, Preview$3, 'SashPanel', Panel$2, StatusBar$1];
-  }
-  return [TitleBar$1, Main$2, 'SashSideBar', SideBar$2, 'SashActivityBar', ActivityBar$2, Preview$3, 'SashPanel', Panel$2, StatusBar$1];
-};
 const loadIfVisible = async (state, module) => {
   try {
-    const {
-      points,
-      sideBarLocation
-    } = state;
     const {
       kVisible,
       kTop,
@@ -19330,15 +19489,15 @@ const loadIfVisible = async (state, module) => {
       kId,
       kReady
     } = module;
-    const visible = points[kVisible];
-    const x = points[kLeft];
-    const y = points[kTop];
-    const width = points[kWidth];
-    const height = points[kHeight];
+    const visible = state[kVisible];
+    const x = state[kLeft];
+    const y = state[kTop];
+    const width = state[kWidth];
+    const height = state[kHeight];
     let commands = [];
-    const parentUid = state.uid;
+    let childUid = -1;
     if (visible) {
-      const childUid = state[kId];
+      childUid = create$11();
       commands = await load$5({
         getModule: load$3,
         id: moduleId,
@@ -19354,11 +19513,6 @@ const loadIfVisible = async (state, module) => {
         uid: childUid
         // render: false,
       }, false, true);
-      if (commands) {
-        const referenceNodes = getReferenceNodes(sideBarLocation);
-        // @ts-ignore
-        commands.push(['Viewlet.append', parentUid, childUid, referenceNodes]);
-      }
     }
     const orderedCommands = reorderCommands(commands);
     const latestState = getState$1(Layout);
@@ -19367,8 +19521,11 @@ const loadIfVisible = async (state, module) => {
         ...latestState,
         [kReady]: true,
         workbenchVisible: true,
-        contentAreaVisible: true,
-        mainContentsVisible: true
+        // contentAreaVisible: true,
+        // mainContentsVisible: true,
+        mainVisible: true,
+        [kVisible]: true,
+        [kId]: childUid
       },
       commands: orderedCommands
     };
@@ -19400,7 +19557,8 @@ const loadStatusBarIfVisible = state => {
 const loadTitleBarIfVisible = async state => {
   const updated = await loadIfVisible(state, TitleBar);
   return {
-    ...updated
+    ...updated,
+    titleBarVisible: true
   };
 };
 const loadPreviewIfVisible = state => {
@@ -19417,6 +19575,12 @@ const handleSashPointerDown = (state, sashId) => {
     commands
   };
 };
+const handleSashSideBarPointerDown = state => {
+  return handleSashPointerDown(state, SideBar$1);
+};
+const handleSashPanelPointerDown = state => {
+  return handleSashPointerDown(state, Panel$1);
+};
 const handleSashPointerUp = (state, sashId) => {
   const newState = {
     ...state,
@@ -19428,105 +19592,154 @@ const handleSashPointerUp = (state, sashId) => {
     commands
   };
 };
-const getNewStatePointerMoveSideBar = (points, x, y) => {
-  const windowWidth = points[WindowWidth];
-  const activityBarWidth = points[ActivityBarWidth];
-  const sideBarMinWidth = points[SideBarMinWidth];
-  const newSideBarWidth = windowWidth - activityBarWidth - x;
-  const newPoints = new Uint16Array(points);
+const getNewStatePointerMoveSideBar = async (state, x, y) => {
+  const {
+    previewWidth,
+    windowWidth,
+    activityBarWidth,
+    sideBarMinWidth
+  } = state;
+  const newSideBarWidth = windowWidth - activityBarWidth - x - previewWidth;
   if (newSideBarWidth <= sideBarMinWidth / 2) {
-    newPoints[SideBarVisible] = 0;
-    newPoints[MainWidth] = windowWidth - activityBarWidth;
-  } else if (newSideBarWidth <= sideBarMinWidth) {
-    newPoints[SideBarWidth] = sideBarMinWidth;
-    newPoints[MainWidth] = windowWidth - activityBarWidth - sideBarMinWidth;
-    newPoints[SideBarLeft] = windowWidth - activityBarWidth - sideBarMinWidth;
-    newPoints[SideBarVisible] = 1;
-  } else {
-    newPoints[SideBarVisible] = 1;
-    newPoints[MainWidth] = x;
-    newPoints[SideBarLeft] = x;
-    newPoints[SideBarWidth] = newSideBarWidth;
+    return hideSideBar(state);
   }
-  return newPoints;
+  if (newSideBarWidth <= sideBarMinWidth) {
+    return {
+      commands: [],
+      newState: {
+        ...state,
+        sideBarWidth: sideBarMinWidth,
+        mainWidth: windowWidth - activityBarWidth - sideBarMinWidth,
+        sideBarLeft: windowWidth - activityBarWidth - sideBarMinWidth,
+        sideBarVisible: true
+      }
+    };
+  }
+  return {
+    newState: {
+      ...state,
+      sideBarVisible: true,
+      mainWidth: x,
+      sideBarLeft: x,
+      sideBarWidth: newSideBarWidth
+    },
+    commands: []
+  };
 };
-const getNewStatePointerMoveActivityBar = (points, x, y) => {
-  const windowWidth = points[WindowWidth];
+const getNewStatePointerMoveActivityBar = async (state, x, y) => {
+  const windowWidth = state[WindowWidth];
   const previewMinWidth = 200; // TODO: make configurable
   const mainMinWidth = 100; // TODO: make configurable
   const newPreviewWidth = windowWidth - x;
-  const newPoints = new Uint16Array(points);
   if (newPreviewWidth < previewMinWidth / 2) {
-    // Hide preview when dragging too far left
-    newPoints[PreviewVisible] = 0;
-    newPoints[PreviewWidth] = 0;
-    newPoints[PreviewLeft] = windowWidth;
-    newPoints[MainWidth] = windowWidth - 48;
+    return {
+      commands: [],
+      newState: {
+        ...state,
+        previewVisible: false,
+        previewWidth: 0,
+        previewLeft: windowWidth,
+        mainWidth: windowWidth - 48
+      }
+    };
   } else if (newPreviewWidth < previewMinWidth) {
-    // Snap to minimum preview width
-    newPoints[PreviewVisible] = 1;
-    newPoints[PreviewWidth] = previewMinWidth;
-    newPoints[PreviewLeft] = x;
-    newPoints[MainWidth] = x - 48;
+    return {
+      commands: [],
+      newState: {
+        ...state,
+        previewVisible: true,
+        previewWidth: previewMinWidth,
+        previewLeft: x,
+        mainWidth: x - 48
+      }
+    };
   } else {
-    newPoints[PreviewVisible] = 1;
-    newPoints[PreviewLeft] = x;
-    newPoints[PreviewWidth] = newPreviewWidth;
-    newPoints[MainWidth] = Math.max(mainMinWidth, x - 48);
-  }
-  return newPoints;
-};
-const getNewStatePointerMovePanel = (points, x, y) => {
-  const windowHeight = points[WindowHeight];
-  const statusBarHeight = points[StatusBarHeight];
-  const titleBarHeight = points[TitleBarHeight];
-  const activityBarHeight = points[ActivityBarHeight];
-  const panelMinHeight = points[PanelMinHeight];
+    return {
+      newState: {
+        ...state,
+        previewVisible: true,
+        previewLeft: x,
+        previewWidth: newPreviewWidth,
+        mainWidth: Math.max(mainMinWidth, x - 48)
+      },
+      commands: []
+    };
+  }
+};
+const getNewStatePointerMovePanel = async (state, x, y) => {
+  const windowHeight = state[WindowHeight];
+  const statusBarHeight = state[StatusBarHeight];
+  const titleBarHeight = state[TitleBarHeight];
+  const activityBarHeight = state[ActivityBarHeight];
+  const panelMinHeight = state[PanelMinHeight];
   const newPanelHeight = windowHeight - statusBarHeight - y;
-  const newPoints = new Uint16Array(points);
   if (newPanelHeight < panelMinHeight / 2) {
-    newPoints[PanelVisible] = 0;
-    newPoints[MainHeight] = windowHeight - statusBarHeight - titleBarHeight;
+    return {
+      newState: {
+        ...state,
+        panelVisible: false,
+        mainHeight: windowHeight - statusBarHeight - titleBarHeight
+      },
+      commands: []
+    };
   } else if (newPanelHeight <= panelMinHeight) {
-    newPoints[PanelVisible] = 1;
-    newPoints[PanelHeight] = panelMinHeight;
-    newPoints[MainHeight] = windowHeight - activityBarHeight - panelMinHeight;
+    return {
+      newState: {
+        ...state,
+        panelVisible: true,
+        panelHeight: panelMinHeight,
+        mainHeight: windowHeight - activityBarHeight - panelMinHeight
+      },
+      commands: []
+    };
   } else {
-    newPoints[PanelVisible] = 1;
-    newPoints[MainHeight] = y - titleBarHeight;
-    newPoints[panelTop] = y;
-    newPoints[PanelHeight] = windowHeight - statusBarHeight - y;
-  }
-  return newPoints;
-};
-const getNewStatePointerMovePreview = (points, x, y) => {
-  const windowHeight = points[WindowHeight];
-  const windowWidth = points[WindowWidth];
-  const newPoints = new Uint16Array(points);
-  newPoints[PreviewLeft] = x;
-  newPoints[PreviewTop] = y;
-  newPoints[PreviewWidth] = windowWidth - x;
-  newPoints[PreviewHeight] = windowHeight - y;
-  return newPoints;
-};
-const getNewStatePointerMove = (sashId, points, x, y) => {
+    return {
+      newState: {
+        ...state,
+        panelVisible: true,
+        mainHeight: y - titleBarHeight,
+        panelTop: y,
+        panelHeight: windowHeight - statusBarHeight - y
+      },
+      commands: []
+    };
+  }
+};
+const getNewStatePointerMovePreview = async (state, x, y) => {
+  const windowHeight = state.windowHeight;
+  const windowWidth = state.windowWidth;
+  return {
+    newState: {
+      ...state,
+      previewLeft: x,
+      previewTop: y,
+      previewWidth: windowWidth - x,
+      previewHeight: windowHeight - y
+    },
+    commands: []
+  };
+};
+const getNewStatePointerMove = async (sashId, state, x, y) => {
   switch (sashId) {
     case SideBar$1:
-      return getNewStatePointerMoveSideBar(points, x);
+      return getNewStatePointerMoveSideBar(state, x);
     case Panel$1:
-      return getNewStatePointerMovePanel(points, x, y);
+      return getNewStatePointerMovePanel(state, x, y);
     case Preview$2:
-      return getNewStatePointerMovePreview(points, x, y);
+      return getNewStatePointerMovePreview(state, x, y);
     case ActivityBar$1:
-      return getNewStatePointerMoveActivityBar(points, x);
+      return getNewStatePointerMoveActivityBar(state, x);
     default:
-      throw new Error(`unsupported sash type ${sashId}`);
+      return {
+        newState: state,
+        commands: []
+      };
   }
 };
-const isEqual = (oldPoints, newPoints, kTop, kLeft, kWidth, kHeight) => {
-  return oldPoints[kTop] === newPoints[kTop] && oldPoints[kLeft] === newPoints[kLeft] && oldPoints[kWidth] === newPoints[kWidth] && oldPoints[kHeight] === newPoints[kHeight];
+const isEqual = (oldState, newState, kTop, kLeft, kWidth, kHeight) => {
+  return oldState[kTop] === newState[kTop] && oldState[kLeft] === newState[kLeft] && oldState[kWidth] === newState[kWidth] && oldState[kHeight] === newState[kHeight];
 };
-const getResizeCommands = async (oldPoints, newPoints) => {
+const getResizeCommands = async (oldState, newState) => {
   const modules = [Main$1, ActivityBar, SideBar, TitleBar, StatusBar, Panel, Preview$1];
   const individualCommands = await Promise.all(modules.map(async module => {
     const {
@@ -19541,24 +19754,27 @@ const getResizeCommands = async (oldPoints, newPoints) => {
       return [];
     }
     const instanceUid = instance.state.uid;
-    if (isEqual(oldPoints, newPoints, kTop, kLeft, kWidth, kHeight)) {
+    if (isEqual(oldState, newState, kTop, kLeft, kWidth, kHeight)) {
       return [];
     }
-    const newTop = newPoints[kTop];
-    const newLeft = newPoints[kLeft];
-    const newWidth = newPoints[kWidth];
-    const newHeight = newPoints[kHeight];
+    const newTop = newState[kTop];
+    const newLeft = newState[kLeft];
+    const newWidth = newState[kWidth];
+    const newHeight = newState[kHeight];
     number(newTop);
     number(newLeft);
     number(newWidth);
     number(newHeight);
-    const resizeCommands = await resize$k(instanceUid, {
+    let resizeCommands = await resize$k(instanceUid, {
       x: newLeft,
       y: newTop,
       width: newWidth,
       height: newHeight
     });
-    return [...resizeCommands, ['Viewlet.setBounds', instanceUid, newLeft, newTop, newWidth, newHeight]];
+    if (resizeCommands.length === 1 && resizeCommands[0][0] === 'Viewlet.setBounds' && resizeCommands[0][1] === newState.mainId) {
+      return [];
+    }
+    return [...resizeCommands];
   }));
   const commands = individualCommands.flat(1);
   return commands;
@@ -19627,17 +19843,13 @@ const showPlaceholder = (uid, points, module) => {
 };
 const handleSashPointerMove = async (state, x, y) => {
   const {
-    points,
     sashId
   } = state;
-  const newPoints = getNewStatePointerMove(sashId, points, x, y);
-  getPoints(newPoints, newPoints);
+  let newState = state;
+  const updated = await getNewStatePointerMove(sashId, state, x, y);
+  newState = updated.newState;
   // TODO resize commands, resize viewlets recursively
-  const allCommands = await getResizeCommands(points, newPoints);
-  let newState = {
-    ...state,
-    points: newPoints
-  };
+  const allCommands = await getResizeCommands(state, newState);
   const uid = state.uid;
   const modules = [Panel, SideBar, Preview$1];
   for (const module of modules) {
@@ -19645,10 +19857,10 @@ const handleSashPointerMove = async (state, x, y) => {
       kVisible,
       moduleId
     } = module;
-    if (points[kVisible] !== newPoints[kVisible]) {
-      if (newPoints[kVisible]) {
-        showAsync(uid, newPoints, module); // TODO avoid side effect
-        const commands = showPlaceholder(uid, newPoints, module);
+    if (state[kVisible] !== newState[kVisible]) {
+      if (newState[kVisible]) {
+        showAsync(uid, newState, module); // TODO avoid side effect
+        const commands = showPlaceholder(uid, newState, module);
         // @ts-ignore
         allCommands.push(commands);
         if (moduleId === Preview$3) {
@@ -19679,20 +19891,15 @@ const handleSashPointerMove = async (state, x, y) => {
   };
 };
 const handleResize = async (state, windowWidth, windowHeight) => {
-  const {
-    points
-  } = state;
-  const newPoints = new Uint16Array(points);
-  newPoints[WindowWidth] = windowWidth;
-  newPoints[WindowHeight] = windowHeight;
-  getPoints(newPoints, newPoints);
+  const newState = getPoints({
+    ...state,
+    windowWidth,
+    windowHeight
+  });
   // TODO duplicate code with handleSashPointerMove
-  const commands = await getResizeCommands(points, newPoints);
+  const commands = await getResizeCommands(state, newState);
   return {
-    newState: {
-      ...state,
-      points: newPoints
-    },
+    newState,
     commands
   };
 };
@@ -19717,19 +19924,15 @@ const handleBlur$1 = state => {
   return handleFocusChange$1(state, false);
 };
 const handleSashDoubleClickPanel = async state => {
-  const {
-    points
-  } = state;
-  if (points[PanelVisible]) {
-    const newPoints = new Uint16Array(points);
-    newPoints[PanelHeight] = 200;
-    getPoints(newPoints, newPoints);
-    const commands = await getResizeCommands(points, newPoints);
+  if (state.panelVisible) {
+    const newState = getPoints({
+      ...state,
+      panelVisible: true,
+      panelHeight: 200
+    });
+    const commands = await getResizeCommands(state, newState);
     return {
-      newState: {
-        ...state,
-        points: newPoints
-      },
+      newState,
       commands
     };
   }
@@ -19741,19 +19944,14 @@ const handleSashDoubleClickPanel = async state => {
 
 // TODO return commands and newState
 const handleSashDoubleClickSideBar = async state => {
-  const {
-    points
-  } = state;
-  if (points[SideBarVisible]) {
-    const newPoints = new Uint16Array(points);
-    newPoints[SideBarWidth] = 240;
-    getPoints(newPoints, newPoints);
-    const commands = await getResizeCommands(points, newPoints);
+  if (state.sideBarVisible) {
+    const newState = getPoints({
+      ...state,
+      sideBarWidth: 240
+    });
+    const commands = await getResizeCommands(state, newState);
     return {
-      newState: {
-        ...state,
-        points: newPoints
-      },
+      newState,
       commands
     };
   }
@@ -19763,19 +19961,14 @@ const handleSashDoubleClickSideBar = async state => {
   };
 };
 const handleSashDoubleClickActivityBar = async state => {
-  const {
-    points
-  } = state;
-  if (points[PreviewVisible]) {
-    const newPoints = new Uint16Array(points);
-    newPoints[PreviewWidth] = 600; // Reset to default width
-    getPoints(newPoints, newPoints);
-    const commands = await getResizeCommands(points, newPoints);
+  if (state.previewVisible[PreviewVisible]) {
+    const newState = getPoints({
+      ...state,
+      previewWidth: 600
+    });
+    const commands = await getResizeCommands(state, newState);
     return {
-      newState: {
-        ...state,
-        points: newPoints
-      },
+      newState,
       commands
     };
   }
@@ -19785,17 +19978,10 @@ const handleSashDoubleClickActivityBar = async state => {
   };
 };
 const moveSideBar = async (state, position) => {
-  const {
-    points
-  } = state;
-  const newPoints = new Uint16Array(points);
-  getPoints(newPoints, newPoints, position);
-
   // update layout state synchronously to avoid races when moveSideBar
   // is called multiple times — update the viewlet state first
   const immediateState = {
-    ...state,
-    points: newPoints,
+    ...getPoints(state, position),
     sideBarLocation: position
   };
   await setState(state.uid, immediateState);
@@ -19810,13 +19996,11 @@ const moveSideBar = async (state, position) => {
   // notify all viewlets about the preference change using callGlobalEvent
   const prefEventResult = await callGlobalEvent(immediateState, 'handlePreferencesChanged');
   const prefCommands = prefEventResult.commands || [];
-  const resizeCommands = await getResizeCommands(points, newPoints);
+  const resizeCommands = await getResizeCommands(state, immediateState);
   const allCommands = [...resizeCommands, ...prefCommands];
   return {
     newState: {
       ...prefEventResult.newState,
-      // keep the points and location we already applied
-      points: newPoints,
       sideBarLocation: position
     },
     commands: allCommands
@@ -19851,32 +20035,9 @@ const handleSashDoubleClick = (state, sashId) => {
 };
 const isSideBarVisible = state => {
   const {
-    points
+    sideBarVisible
   } = state;
-  return points[SideBarVisible];
-};
-const getInitialPlaceholderCommands = state => {
-  const {
-    points
-  } = state;
-  const commands = [];
-  const uid = state.uid;
-  const modules = [TitleBar, Main$1, SideBar, ActivityBar, Panel, StatusBar];
-  for (const module of modules) {
-    const {
-      kVisible,
-      kTop,
-      kLeft,
-      kWidth,
-      kHeight,
-      moduleId
-    } = module;
-    if (points[kVisible]) {
-      // @ts-ignore
-      commands.push(['Viewlet.createPlaceholder', moduleId, uid, points[kTop], points[kLeft], points[kWidth], points[kHeight]]);
-    }
-  }
-  return commands;
+  return sideBarVisible;
 };
 const getAllQuickPickMenuEntries = () => {
   return getAll();
@@ -19953,6 +20114,19 @@ const openSideBarView = async (state, moduleId, focus = false, args) => {
     commands
   };
 };
+const openPanelView = async (state, moduleId, focus = false, args) => {
+  const {
+    newState,
+    commands
+  } = await callGlobalEvent(state, 'handlePanelViewletChange', moduleId);
+  return {
+    newState: {
+      ...newState,
+      sideBarView: moduleId
+    },
+    commands
+  };
+};
 const getBadgeCounts = state => {
   const states = getAllInstances();
   const badgeCounts = Object.create(null);
@@ -19985,6 +20159,8 @@ const CommandsWithSideEffects = {
   handleResize: handleResize,
   handleSashDoubleClick: handleSashDoubleClick,
   handleSashPointerDown: handleSashPointerDown,
+  handleSashSideBarPointerDown: handleSashSideBarPointerDown,
+  handleSashPanelPointerDown: handleSashPanelPointerDown,
   handleSashPointerMove: handleSashPointerMove,
   handleSashPointerUp: handleSashPointerUp,
   handleWorkspaceRefresh: handleWorkspaceRefresh,
@@ -20005,6 +20181,7 @@ const CommandsWithSideEffects = {
   moveSideBarLeft: moveSideBarLeft,
   moveSideBarRight: moveSideBarRight,
   openSideBarViewlet: openSideBarView,
+  openPanelViewlet: openPanelView,
   setUpdateState: setUpdateState,
   showActivityBar: showActivityBar,
   showE2eTests: showE2eTests,
@@ -20505,293 +20682,338 @@ const getQuickPickMenuEntries$1 = () => {
 
 const name$i = 'Layout';
 
-const Horizontal = 'horizontal';
-const Vertical = 'vertical';
-
-const getDom = id => {
-  const instance = getByUid(id);
-  if (!instance) {
-    return [{
-      type: Div,
-      childCount: 0,
-      className: `Element-${id}`
-    }];
-  }
-  const commands = render$H(instance.factory, instance.renderedState, instance.state, instance.state.uid);
-  const domCommand = commands.find(command => command[0] === 'Viewlet.setDom2');
-  if (domCommand) {
-    return domCommand[2];
-  }
-  // TODO ask viewlet registry to render component with that id
+const getSashSideBarDom = () => {
   return [{
+    type: Button$1,
+    className: 'Viewlet Sash SashVertical SashSideBar',
+    onPointerDown: HandleSashSideBarPointerDown,
+    childCount: 1
+  }, {
     type: Div,
-    className: `Element-${id}`,
     childCount: 0
   }];
 };
-const renderComponent = (kVisible, kId, oldState, newState, commands, appendIds) => {
-  if (oldState[kVisible] && !newState[kVisible]) {
-    commands.push(['Viewlet.remove', newState[kId]]);
-  }
-  if (!oldState[kVisible] && newState[kVisible]) {
-    commands.push(['Viewlet.create', newState[kId]]);
-    const dom = getDom(newState[kId]);
-    commands.push(['Viewlet.setDom2', newState[kId], dom]);
-    return;
-  }
-  if (newState[kId]) {
-    appendIds.push(newState[kId]);
-  }
-};
-const getActivityBarCommands = (oldState, newState, commands, contentAppendIds) => {
-  return renderComponent('activityBarVisible', 'activityBarId', oldState, newState, commands, contentAppendIds);
+const getSashPreviewDom = () => {
+  return {
+    type: Div,
+    className: 'Viewlet Sash SashVertical',
+    onPointerDown: HandleSashPreviewPointerDown
+  };
 };
-const getSideBarSashCommands = (oldState, newState, commands, contentAppendIds) => {
-  if (oldState.sideBarSashVisible && !newState.sideBarSashVisible) {
-    commands.push(['Viewlet.remove', newState.sideBarSashId]);
-    return;
-  }
-  if (!oldState.sideBarSashVisible && newState.sideBarSashVisible) {
-    commands.push(['Viewlet.createFunctionalRoot', `${newState.sideBarSashId}`, newState.sideBarSashId, true]);
-    const dom = [{
+const getActivityBarDom = activityBarId => {
+  if (activityBarId === -1) {
+    return {
       type: Div,
-      className: `Sash SashSideBar`,
+      className: 'Viewlet ActivityBar',
       childCount: 0
-    }];
-    commands.push(['Viewlet.setDom2', newState.sideBarSashId, dom]);
+    };
   }
-  if (newState.sideBarSashVisible) {
-    contentAppendIds.push(newState.sideBarSashId);
+  return {
+    type: Reference,
+    uid: activityBarId
+  };
+};
+const getSideBarDom$1 = sideBarId => {
+  if (sideBarId === -1) {
+    return {
+      type: Div,
+      className: 'Viewlet SideBar',
+      childCount: 0
+    };
   }
+  return {
+    type: Reference,
+    uid: sideBarId
+  };
 };
-const getSideBarCommands = (oldState, newState, commands, contentAppendIds) => {
-  return renderComponent('sideBarVisible', 'sideBarId', oldState, newState, commands, contentAppendIds);
+const getMainDom = mainId => {
+  if (mainId === -1) {
+    return {
+      type: Div,
+      className: 'Viewlet Main',
+      childCount: 0
+    };
+  } else {
+    return {
+      type: Reference,
+      uid: mainId
+    };
+  }
 };
-const getMainCommands = (oldState, newState, commands, mainContentsAppendIds) => {
-  return renderComponent('mainVisible', 'mainId', oldState, newState, commands, mainContentsAppendIds);
+const getPreviewDom = previewId => {
+  if (previewId === -1) {
+    return {
+      type: Div,
+      className: 'Viewlet Preview',
+      childCount: 0
+    };
+  }
+  return {
+    type: Reference,
+    uid: previewId
+  };
 };
-const getPanelSashCommands = (oldState, newState, commands, contentAppendIds) => {
-  if (oldState.panelSashVisible && !newState.panelSashVisible) {
-    commands.push(['Viewlet.remove', newState.panelSashId]);
-    return;
+const getContentAreaVirtualDomLeft = state => {
+  const {
+    activityBarVisible,
+    activityBarId,
+    sideBarVisible,
+    sideBarId,
+    sideBarSashVisible,
+    mainVisible,
+    mainId,
+    previewSashVisible,
+    previewVisible,
+    previewId
+  } = state;
+  const children = [];
+  let delta = 0;
+  // Add components based on sidebar location
+  if (activityBarVisible && activityBarId !== -1) {
+    children.push(getActivityBarDom(activityBarId));
   }
-  if (!oldState.panelSashVisible && newState.panelSashVisible) {
-    commands.push(['Viewlet.createFunctionalRoot', `${newState.panelSashId}`, newState.panelSashId, true]);
-    const dom = getDom(newState.panelSashId);
-    commands.push(['Viewlet.setDom2', newState.panelSashId, dom]);
+  if (sideBarVisible) {
+    children.push(getSideBarDom$1(sideBarId));
   }
-  if (newState.panelSashVisible) {
-    contentAppendIds.push(newState.panelSashId);
+  if (sideBarSashVisible) {
+    children.push(...getSashSideBarDom());
+    delta--;
   }
-};
-const getPanelCommands = (oldState, newState, commands, mainContentsAppendIds) => {
-  return renderComponent('panelVisible', 'panelId', oldState, newState, commands, mainContentsAppendIds);
-};
-const getMainContentsCommands = (oldState, newState, commands, contentAppendIds) => {
-  if (oldState.mainContentsVisible && !newState.mainContentsVisible) {
-    commands.push(['Viewlet.remove', newState.mainContentsId]);
-    return;
+  if (mainVisible) {
+    children.push(getMainDom(mainId));
   }
-  if (!oldState.mainContentsVisible && newState.mainContentsVisible) {
-    const mainContentsAppendIds = [];
-    getMainCommands(oldState, newState, commands, mainContentsAppendIds);
-    getPanelSashCommands(oldState, newState, commands, mainContentsAppendIds);
-    getPanelCommands(oldState, newState, commands, mainContentsAppendIds);
-    commands.push(['Viewlet.createFunctionalRoot', `${newState.mainContentsId}`, newState.mainContentsId, true]);
-    const dom = [{
-      type: Div,
-      className: 'MainContents',
-      childCount: 0
-    }];
-    commands.push(['Viewlet.setDom2', newState.mainContentsId, dom]);
-    commands.push(['Viewlet.replaceChildren', newState.mainContentsId, mainContentsAppendIds]);
+  if (previewSashVisible) {
+    children.push(getSashPreviewDom());
   }
-  if (newState.mainContentsVisible) {
-    contentAppendIds.push(newState.mainContentsId);
+  if (previewVisible) {
+    children.push(getPreviewDom(previewId));
   }
+  return [{
+    type: Div,
+    className: 'ContentArea',
+    childCount: children.length + delta
+  }, ...children];
 };
-const getPreviewSashCommands = (oldState, newState, commands, workbenchAppendIds) => {
-  if (oldState.previewSashVisible && !newState.previewSashVisible) {
-    commands.push(['Viewlet.remove', newState.previewSashId]);
-    return;
+const getContentAreaVirtualDomRight = state => {
+  const {
+    mainVisible,
+    mainId,
+    sideBarSashVisible,
+    sideBarVisible,
+    sideBarId,
+    activityBarVisible,
+    activityBarId,
+    previewSashVisible,
+    previewVisible,
+    previewId
+  } = state;
+  const children = [];
+  if (mainVisible) {
+    children.push(getMainDom(mainId));
   }
-  if (!oldState.previewSashVisible && newState.previewSashVisible) {
-    commands.push(['Viewlet.createFunctionalRoot', `${newState.previewSashId}`, newState.previewSashId, true]);
-    const dom = [{
-      type: Div,
-      className: `Sash SashPreview`,
-      childCount: 0
-    }];
-    commands.push(['Viewlet.setDom2', newState.previewSashId, dom]);
+  let delta = 0;
+  if (sideBarSashVisible) {
+    children.push(...getSashSideBarDom());
+    delta--;
   }
-  if (newState.previewSashVisible) {
-    workbenchAppendIds.push(newState.previewSashId);
+  if (sideBarVisible) {
+    children.push(getSideBarDom$1(sideBarId));
   }
+  if (activityBarVisible) {
+    children.push(getActivityBarDom(activityBarId));
+  }
+  if (previewSashVisible) {
+    children.push(getSashPreviewDom());
+  }
+  if (previewVisible) {
+    children.push(getPreviewDom(previewId));
+  }
+  return [{
+    type: Div,
+    className: 'ContentArea',
+    childCount: children.length + delta
+  }, ...children];
 };
-const getPreviewCommands = (oldState, newState, commands, workbenchAppendIds) => {
-  return renderComponent('previewVisible', 'previewId', oldState, newState, commands, workbenchAppendIds);
-};
-const getTitleBarCommands = (oldState, newState, commands, workbenchAppendIds) => {
-  return renderComponent('titleBarVisible', 'titleBarId', oldState, newState, commands, workbenchAppendIds);
+const getTitleBarDom = titleBarId => {
+  if (titleBarId === -1) {
+    return {
+      type: Div,
+      className: 'Viewlet TitleBar',
+      childCount: 0
+    };
+  } else {
+    return {
+      type: Reference,
+      uid: titleBarId
+    };
+  }
 };
-const getContentCommands = (oldState, newState, commands, workbenchAppendIds) => {
-  // TODO support secondary side bar / chat view
-  const contentAppendIds = [];
-  if (newState.sideBarLocation === Left) {
-    getActivityBarCommands(oldState, newState, commands, contentAppendIds);
-    getSideBarCommands(oldState, newState, commands, contentAppendIds);
-    getSideBarSashCommands(oldState, newState, commands, contentAppendIds);
-    getMainContentsCommands(oldState, newState, commands, contentAppendIds);
+const getStatusBarDom = statusBarId => {
+  if (statusBarId === -1) {
+    return {
+      type: Div,
+      className: 'Viewlet StatusBar',
+      childCount: 0
+    };
   } else {
-    getMainContentsCommands(oldState, newState, commands, contentAppendIds);
-    getSideBarSashCommands(oldState, newState, commands, contentAppendIds);
-    getSideBarCommands(oldState, newState, commands, contentAppendIds);
-    getActivityBarCommands(oldState, newState, commands, contentAppendIds);
-  }
-  if (!oldState.contentAreaVisible && newState.contentAreaVisible) {
-    commands.push(['Viewlet.createFunctionalRoot', `${newState.contentAreaId}`, newState.contentAreaId, true]);
-    const dom = [{
+    return {
+      type: Reference,
+      uid: statusBarId
+    };
+  }
+};
+const getPanelDom$1 = panelId => {
+  if (panelId === -1) {
+    return {
       type: Div,
-      className: 'ContentArea',
+      className: 'Viewlet StatusBar',
       childCount: 0
-    }];
-    commands.push(['Viewlet.setDom2', newState.contentAreaId, dom]);
+    };
+  } else {
+    return {
+      type: Reference,
+      uid: panelId
+    };
   }
-  if (newState.contentAreaVisible) {
-    commands.push(['Viewlet.replaceChildren', newState.contentAreaId, contentAppendIds]);
-    workbenchAppendIds.push(newState.contentAreaId);
+};
+const getContentAreaVirtualDom = state => {
+  const {
+    sideBarLocation
+  } = state;
+  if (sideBarLocation === Left) {
+    return getContentAreaVirtualDomLeft(state);
   }
+  return getContentAreaVirtualDomRight(state);
 };
-const getStatusBarCommands = (oldState, newState, commands, workbenchAppendIds) => {
-  return renderComponent('statusBarVisible', 'statusBarId', oldState, newState, commands, workbenchAppendIds);
+const getLayoutVirtualDom = state => {
+  const {
+    titleBarVisible,
+    titleBarId,
+    statusBarVisible,
+    statusBarId,
+    panelVisible,
+    panelId
+  } = state;
+  const dom = [];
+  let workbenchChildCount = 0;
+  dom.push({
+    type: Div,
+    id: 'Workbench',
+    className: 'Viewlet Layout Workbench new',
+    role: 'application',
+    childCount: 0
+  });
+  if (titleBarVisible) {
+    workbenchChildCount++;
+    dom.push(getTitleBarDom(titleBarId));
+  }
+  workbenchChildCount++;
+  dom.push(...getContentAreaVirtualDom(state));
+  if (panelVisible) {
+    workbenchChildCount++;
+    dom.push(getPanelDom$1(panelId));
+  }
+  // Add StatusBar if visible
+  if (statusBarVisible) {
+    workbenchChildCount++;
+    dom.push(getStatusBarDom(statusBarId));
+  }
+
+  // Update workbench childCount
+  dom[0].childCount = workbenchChildCount;
+  return dom;
 };
-const getWorkbenchCommands = (oldState, newState, commands, workbenchAppendIds) => {
-  if (!oldState.workbenchVisible && newState.workbenchVisible) {
-    commands.push(['Viewlet.createFunctionalRoot', `${newState.workbenchId}`, newState.workbenchId, true]);
-    const dom = [{
-      type: Div,
-      id: 'Workbench',
-      className: 'Viewlet Layout Workbench new',
-      role: 'application',
-      childCount: 0
-    }];
-    commands.push(['Viewlet.setDom2', newState.workbenchId, dom]);
-  }
-  if (newState.workbenchVisible) {
-    commands.push(['Viewlet.replaceChildren', newState.workbenchId, workbenchAppendIds]);
-  }
-  if (!oldState.workbenchVisible && newState.workbenchVisible) {
-    commands.push(['Viewlet.appendToBody', newState.workbenchId]);
-  }
-};
-const renderDom$2 = (oldState, newState) => {
-  // const dom = (
-  //   <div class="Workbench" id="1">
-  //     <div class="TitleBar" id="2"></div>
-  //     <div class="ContentArea" id="3">
-  //       <If condition={sideBarLocation === 'left'}>
-  //         <div class="MainContents" id="4">
-  //           <div class="Main" id="5"></div>
-  //         </div>
-  //         <div class="SideBar" id="6"></div>
-  //         <div class="ActivityBar" id="7"></div>
-  //       </If>
-  //       <If condition={sideBarLocation === 'right'}>
-  //         <div class="ActivityBar" id="7"></div>
-  //         <div class="SideBar" id="6"></div>
-  //         <div class="MainContents" id="4">
-  //           <div class="Main" id="5"></div>
-  //         </div>
-  //       </If>
-  //     </div>
-  //     <div class="StatusBar" id="8"></div>
-  //   </div>
-  // )
-  const commands = [];
-  const workbenchAppendIds = [];
-  getTitleBarCommands(oldState, newState, commands, workbenchAppendIds);
-  getContentCommands(oldState, newState, commands, workbenchAppendIds);
-  getPreviewSashCommands(oldState, newState, commands, workbenchAppendIds);
-  getPreviewCommands(oldState, newState, commands, workbenchAppendIds);
-  getStatusBarCommands(oldState, newState, commands, workbenchAppendIds);
-  getWorkbenchCommands(oldState, newState, commands, workbenchAppendIds);
 
+const renderDom$4 = (oldState, newState) => {
+  const dom = getLayoutVirtualDom(newState);
+  const commands = [['Viewlet.setDom2', newState.uid, dom]];
   // TODO ensure focus commands are last in the commands array
   return commands;
 };
 
-// @ts-ignore
-const kMainLeft = 4;
-const kSideBarTop = 13;
-const kSideBarLeft = 14;
-const kSideBarHeight = 16;
-const kpanelTop = 20;
-// const kPanelLeft = 21
-const kPanelWidth = 22;
-const kSashId = 'sashId';
 const hasFunctionalRender$i = true;
-const renderSashes = {
+const hasFunctionalRootRender$f = true;
+const hasFunctionalEvents$d = true;
+const renderDom$3 = {
   isEqual(oldState, newState) {
-    return false;
+    return oldState.mainVisible === newState.mainVisible && oldState.mainId === newState.mainId && oldState.titleBarVisible === newState.titleBarVisible && oldState.titleBarId === newState.titleBarId && oldState.activityBarVisible === newState.activityBarVisible && oldState.activityBarId === newState.activityBarId && oldState.panelVisible === newState.panelVisible && oldState.panelId === newState.panelId && oldState.sideBarLocation === newState.sideBarLocation && oldState.sideBarVisible === newState.sideBarVisible && oldState.sideBarId === newState.sideBarId && oldState.statusBarVisible === newState.statusBarVisible && oldState.statusBarId === newState.statusBarId && oldState.previewVisible === newState.previewVisible && oldState.previewId === newState.previewId;
   },
   apply(oldState, newState) {
-    const {
-      points
-    } = newState;
-    const mainLeft = points[kMainLeft];
-    // const mainWidth = points[kMainWidth]
-    const sideBarLeft = points[kSideBarLeft];
-    const sideBarTop = points[kSideBarTop];
-    const sideBarHeight = points[kSideBarHeight];
-    // const activityBarLeft = points[kActivityBarLeft]
-    // const activityBarTop = points[kActivityBarTop]
-    // const activityBarHeight = points[kActivityBarHeight]
-    const panelTop = points[kpanelTop];
-    const panelWidth = points[kPanelWidth];
-    const sideBarActive = newState[kSashId] === 'SideBar';
-    const panelActive = newState[kSashId] === 'Panel';
-    // const activityBarActive = newState[kSashId] === 'ActivityBar'
-    return ['setSashes',
-    // {
-    //   id: 'SashActivityBar',
-    //   x: activityBarLeft,
-    //   y: activityBarTop,
-    //   width: 4,
-    //   height: activityBarHeight,
-    //   direction: SashDirectionType.Horizontal,
-    //   active: activityBarActive,
-    // },
-    {
-      id: 'SashSideBar',
-      x: sideBarLeft,
-      y: sideBarTop,
-      width: 4,
-      height: sideBarHeight,
-      direction: Horizontal,
-      active: sideBarActive
-    }, {
-      id: 'SashPanel',
-      x: mainLeft,
-      y: panelTop,
-      width: panelWidth,
-      height: 4,
-      direction: Vertical,
-      active: panelActive
-    }];
-  }
+    const commands = renderDom$4(oldState, newState);
+    return commands;
+  },
+  multiple: true
+};
+const getCss = newState => {
+  const sideBarWidth = newState.sideBarWidth;
+  const activityBarWidth = newState.activityBarWidth;
+  const panelHeight = newState.panelHeight;
+  const titleBarHeight = newState.titleBarHeight;
+  const previewWidth = newState.previewWidth;
+  const sashSideBarLeft = newState.sideBarLeft;
+  return `:root {
+  --ActivityBarWidth: ${activityBarWidth}px;
+  --PanelHeight: ${panelHeight}px;
+  --SideBarWidth: ${sideBarWidth}px;
+  --TitleBarHeight: ${titleBarHeight}px;
+  --PreviewWidth: ${previewWidth}px;
+  --SashSideBarLeft: ${sashSideBarLeft}px;
+}`;
 };
-const renderDom$1 = {
-  isEqual(oldState, newState) {
+const renderCss = {
+  isEqual() {
     return false;
   },
-  apply(oldState, newState) {
+  apply(newState) {
     // @ts-ignore
-    renderDom$2(oldState, newState);
-    return [];
+    const css = getCss(newState);
+    return [['Viewlet.setCss', newState.uid, css]];
+  },
+  multiple: true
+};
+const renderEventListeners$c = () => {
+  return [{
+    name: HandleSashSideBarPointerDown,
+    params: ['handleSashSideBarPointerDown'],
+    trackPointerEvents: [HandleSashSideBarPointerMove, HandleSashSideBarPointerUp]
+  }, {
+    name: HandleSashSideBarPointerMove,
+    params: ['handleSashPointerMove', 'event.clientX', 'event.clientY']
+  }, {
+    name: HandleSashSideBarPointerUp,
+    params: ['handleSashPointerUp']
+  }, {
+    name: HandleSashPanelPointerMove,
+    params: ['handleSashPointerMove', 'event.clientX', 'event.clientY']
+  }, {
+    name: HandleSashPanelPointerUp,
+    params: ['handleSashSideBarPointerUp']
+  }, {
+    name: HandleSashPanelPointerDown,
+    params: ['handleSashPanelPointerDown'],
+    trackPointerEvents: [HandleSashPanelPointerMove, HandleSashPanelPointerUp]
+  }, {
+    name: HandleSashPanelPointerMove,
+    params: ['handleSashPointerMove', 'event.clientX', 'event.clientY']
+  }, {
+    name: HandleSashPanelPointerUp,
+    params: ['handleSashPanelPointerUp']
+  }, {
+    name: HandleSashPreviewPointerDown,
+    params: ['handleSashPreviewPointerDown']
+    // trackPointerEvents: [DomEventListenersFunctions.HandleSashPanelPointerMove, DomEventListenersFunctions.HandleSashPanelPointerUp],
+  }];
+};
+const renderWindowListeners = {
+  isEqual(oldState) {
+    return !oldState.initial;
+  },
+  apply() {
+    return [['Viewlet.attachWindowEvents']];
   },
   multiple: true
 };
-const render$i = [renderDom$1, renderSashes];
+const render$i = [renderDom$3, renderCss, renderWindowListeners];
 
 const ViewletLayout_ipc = {
   __proto__: null,
@@ -20806,11 +21028,9 @@ const ViewletLayout_ipc = {
   getAssetDir,
   getBadgeCounts,
   getCommit,
-  getInitialPlaceholderCommands,
   getKeyBindings: getKeyBindings$9,
   getModuleId,
   getPlatform,
-  getPoints,
   getQuickPickMenuEntries: getQuickPickMenuEntries$1,
   getSideBarPosition,
   handleBadgeCountChange,
@@ -20819,11 +21039,15 @@ const ViewletLayout_ipc = {
   handleFocus,
   handleResize,
   handleSashDoubleClick,
+  handleSashPanelPointerDown,
   handleSashPointerDown,
   handleSashPointerMove,
   handleSashPointerUp,
+  handleSashSideBarPointerDown,
   handleWorkspaceRefresh,
+  hasFunctionalEvents: hasFunctionalEvents$d,
   hasFunctionalRender: hasFunctionalRender$i,
+  hasFunctionalRootRender: hasFunctionalRootRender$f,
   hideActivityBar,
   hideMain,
   hidePanel: hidePanel$1,
@@ -20844,8 +21068,10 @@ const ViewletLayout_ipc = {
   moveSideBarLeft,
   moveSideBarRight,
   name: name$i,
+  openPanelView,
   openSideBarView,
   render: render$i,
+  renderEventListeners: renderEventListeners$c,
   saveState: saveState$a,
   setUpdateState,
   showActivityBar,
@@ -21385,8 +21611,8 @@ const getMenus$6 = async () => {
 
 const hasFunctionalRender$h = true;
 const hasFunctionalResize$b = true;
-const hasFunctionalRootRender$c = true;
-const hasFunctionalEvents$a = true;
+const hasFunctionalRootRender$e = true;
+const hasFunctionalEvents$c = true;
 const renderItems$8 = {
   isEqual(oldState, newState) {
     return JSON.stringify(oldState.commands) === JSON.stringify(newState.commands);
@@ -21395,7 +21621,7 @@ const renderItems$8 = {
   multiple: true
 };
 const render$h = [renderItems$8];
-const renderEventListeners$a = async () => {
+const renderEventListeners$b = async () => {
   const listeners = await invoke$7('MainArea.renderEventListeners');
   return listeners;
 };
@@ -21475,10 +21701,10 @@ const ViewletMain_ipc = {
   getKeyBindings: getKeyBindings$8,
   getMenus: getMenus$6,
   getQuickPickMenuEntries,
-  hasFunctionalEvents: hasFunctionalEvents$a,
+  hasFunctionalEvents: hasFunctionalEvents$c,
   hasFunctionalRender: hasFunctionalRender$h,
   hasFunctionalResize: hasFunctionalResize$b,
-  hasFunctionalRootRender: hasFunctionalRootRender$c,
+  hasFunctionalRootRender: hasFunctionalRootRender$e,
   hotReload: hotReload$7,
   loadContent: loadContent$k,
   menus: menus$7,
@@ -21486,7 +21712,7 @@ const ViewletMain_ipc = {
   openEditorWithType,
   openKeyBindings,
   render: render$h,
-  renderEventListeners: renderEventListeners$a,
+  renderEventListeners: renderEventListeners$b,
   resize: resize$d,
   saveState: saveState$9,
   saveWithoutFormatting
@@ -21657,8 +21883,8 @@ const getCommands$a = async () => {
 const Css$h = ["/css/parts/ViewletOutput.css", "/css/parts/Select.css"];
 
 const hasFunctionalRender$g = true;
-const hasFunctionalRootRender$b = true;
-const hasFunctionalEvents$9 = true;
+const hasFunctionalRootRender$d = true;
+const hasFunctionalEvents$b = true;
 const renderDialog = {
   isEqual(oldState, newState) {
     return false;
@@ -21667,7 +21893,7 @@ const renderDialog = {
   multiple: true
 };
 const render$g = [renderDialog];
-const renderEventListeners$9 = async () => {
+const renderEventListeners$a = async () => {
   const listeners = await invoke$6('Output.renderEventListeners');
   return listeners;
 };
@@ -21690,17 +21916,17 @@ const ViewletOutput_ipc = {
   Css: Css$h,
   create: create$h,
   getCommands: getCommands$a,
-  hasFunctionalEvents: hasFunctionalEvents$9,
+  hasFunctionalEvents: hasFunctionalEvents$b,
   hasFunctionalRender: hasFunctionalRender$g,
   hasFunctionalResize: hasFunctionalResize$a,
-  hasFunctionalRootRender: hasFunctionalRootRender$b,
+  hasFunctionalRootRender: hasFunctionalRootRender$d,
   hotReload: hotReload$6,
   loadContent: loadContent$h,
   name: name$f,
   render: render$g,
   renderActions: renderActions$6,
   renderDialog,
-  renderEventListeners: renderEventListeners$9,
+  renderEventListeners: renderEventListeners$a,
   saveState: saveState$8
 };
 
@@ -21741,7 +21967,9 @@ const create$g = (id, uri, x, y, width, height) => {
     width,
     height,
     actions: [],
-    badgeCounts: Object.create(null)
+    badgeCounts: Object.create(null),
+    childUid: -1,
+    actionsUid: -1
   };
 };
 const saveState$7 = state => {
@@ -21754,27 +21982,19 @@ const saveState$7 = state => {
 };
 const getSavedViewletId = savedState => {
   if (savedState && savedState.currentViewletId) {
-    return savedState.currentViewletId;
+    return savedState.currentViewletId || Problems;
   }
   return Problems;
 };
-const getSelectedIndex = (views, savedViewletId) => {
-  const index = views.indexOf(savedViewletId);
-  if (index === -1) {
-    return 0;
-  }
-  return index;
-};
 const loadContent$g = (state, savedState) => {
   const savedViewletId = getSavedViewletId(savedState);
   const views = getPanelViews();
-  const selectedIndex = getSelectedIndex(views, savedViewletId);
-  return {
+  const loaded = {
     ...state,
     views,
-    currentViewletId: savedViewletId,
-    selectedIndex
+    currentViewletId: savedViewletId
   };
+  return openViewlet$1(loaded, savedViewletId);
 };
 const setBadgeCount = (state, id, count) => {
   const {
@@ -21788,10 +22008,12 @@ const setBadgeCount = (state, id, count) => {
     }
   };
 };
-const contentLoaded$3 = state => {
-  const commands = [];
-  return commands;
-};
+
+// export const contentLoaded = (state) => {
+//   const commands = []
+//   return commands
+// }
+
 const getContentDimensions$1 = dimensions => {
   return {
     x: dimensions.x,
@@ -21802,15 +22024,16 @@ const getContentDimensions$1 = dimensions => {
 };
 
 // TODO
-const getChildren$2 = state => {
-  const {
-    currentViewletId
-  } = state;
-  return [{
-    id: currentViewletId,
-    ...getContentDimensions$1(state)
-  }];
-};
+// export const getChildren = (state) => {
+//   const { currentViewletId } = state
+//   return [
+//     {
+//       id: currentViewletId,
+//       ...getContentDimensions(state),
+//     },
+//   ]
+// }
+
 const dispose$c = state => {
   return {
     ...state,
@@ -21825,12 +22048,12 @@ const openViewlet$1 = async (state, id, focus = false) => {
   const {
     currentViewletId
   } = state;
-  state.currentViewletId = id;
   const childDimensions = getContentDimensions$1(state);
-  // TODO load actions
+  const uid = state.uid;
+  const childUid = create$11();
   const commands = await load$5({
     getModule: load$3,
-    id,
+    id: currentViewletId,
     type: 0,
     // @ts-ignore
     uri: '',
@@ -21840,28 +22063,46 @@ const openViewlet$1 = async (state, id, focus = false) => {
     x: childDimensions.x,
     y: childDimensions.y,
     width: childDimensions.width,
-    parentUid: state.uid,
     height: childDimensions.height,
-    append: true
-  });
+    parentUid: uid,
+    append: false,
+    args: [],
+    uid: childUid,
+    shouldRenderEvents: false
+  }, false, true);
+  let actionsDom = [];
+  let actionsUid = -1;
   if (commands) {
-    const currentViewletState = getState$1(currentViewletId);
-    const currentViewletUid = currentViewletState.uid;
-    number(currentViewletUid);
-    commands.unshift(...disposeFunctional(currentViewletUid));
+    const actionsDomIndex = commands.findIndex(command => command[2] === 'setActionsDom');
+    if (actionsDomIndex !== -1) {
+      actionsDom = commands[actionsDomIndex][3];
+      commands.splice(actionsDomIndex, 1);
+    }
+    const eventsIndex = commands.findIndex(command => command[0] === 'Viewlet.registerEventListeners');
+    const events = commands[eventsIndex][2];
+    actionsUid = create$11();
+    commands.push(['Viewlet.createFunctionalRoot', currentViewletId, actionsUid, true], ['Viewlet.registerEventListeners', actionsUid, events], ['Viewlet.setDom2', actionsUid, actionsDom], ['Viewlet.setUid', actionsUid, childUid]);
     await invoke$B('Viewlet.sendMultiple', commands);
-    if (commands.at(-1).includes(Error$4)) {
-      state.currentViewletId = Error$4;
-    }
   }
   return {
-    ...state
+    ...state,
+    currentViewletId,
+    childUid,
+    actionsUid
   };
 };
 const hidePanel = async state => {
   await execute$3('Layout.hidePanel');
   return state;
 };
+const handleClickClose = async state => {
+  await execute$3('Layout.hidePanel');
+  return state;
+};
+const handleClickMaximize = async state => {
+  // TODO
+  return state;
+};
 const selectIndex = async (state, index) => {
   await openViewlet$1(state, state.views[index]);
   return {
@@ -21897,6 +22138,15 @@ const handleFilterInput = async (state, value) => {
   await execute$3(fullCommand, value);
   return state;
 };
+const renderEventListeners$9 = () => {
+  return [{
+    name: HandleClickMaximize,
+    params: ['handleClickMaximize']
+  }, {
+    name: HandleClickClose,
+    params: ['handleClickClose']
+  }];
+};
 
 const Commands$e = {
   handleClickAction: handleClickAction,
@@ -21904,7 +22154,9 @@ const Commands$e = {
   hidePanel: hidePanel,
   selectIndex: selectIndex,
   selectView: selectView,
-  toggleView: toggleView
+  toggleView: toggleView,
+  handleClickClose: handleClickClose,
+  handleClickMaximize: handleClickMaximize
 };
 
 const Css$g = ["/css/parts/ViewletPanel.css", "/css/parts/ViewletPanelTabs.css"];
@@ -21942,17 +22194,87 @@ const getPanelTabsVirtualDom = (tabs, selectedIndex, badgeCounts) => {
   return dom;
 };
 
+const getActionsDom$1 = newState => {
+  const actions = newState.actionsUid || -1;
+  if (actions === -1) {
+    return [{
+      type: Div,
+      className: 'Actions',
+      role: 'toolbar',
+      childCount: 0
+    }];
+  }
+  return [{
+    type: Reference,
+    uid: actions
+  }];
+};
+const getGlobalActionsDom = newState => {
+  return [{
+    type: Div,
+    className: 'PanelToolBar',
+    role: 'toolbar',
+    childCount: 2
+  }, {
+    type: Button$1,
+    childCount: 1,
+    className: 'IconButton',
+    titleM: 'Maximize',
+    ariaLabel: 'Maximize',
+    onClick: HandleClickMaximize
+  }, {
+    type: Div,
+    childCount: 0,
+    className: 'MaskIcon MaskIconChevronUp'
+  }, {
+    type: Button$1,
+    childCount: 1,
+    className: 'IconButton',
+    titleM: 'Close',
+    ariaLabel: 'Close',
+    onClick: HandleClickClose
+  }, {
+    type: Div,
+    childCount: 0,
+    className: 'MaskIcon MaskIconClose'
+  }];
+};
+const getPanelDom = newState => {
+  const {
+    childUid
+  } = newState;
+  const tabsDom = getPanelTabsVirtualDom(newState.views, newState.selectedIndex, newState.badgeCounts);
+  return [{
+    type: Div,
+    className: 'Panel',
+    childCount: 2
+  }, {
+    type: Div,
+    className: 'PanelHeader',
+    childCount: 3
+  }, {
+    type: Div,
+    className: 'PanelTabs',
+    childCount: newState.views.length
+  }, ...tabsDom, ...getActionsDom$1(newState), ...getGlobalActionsDom(), {
+    type: Reference,
+    uid: childUid
+  }];
+};
+
 const hasFunctionalRender$f = true;
-const renderTabs$1 = {
+const hasFunctionalRootRender$c = true;
+const hasFunctionalEvents$a = true;
+const renderDom$2 = {
   isEqual(oldState, newState) {
-    return oldState.views === newState.views && oldState.selectedIndex === newState.selectedIndex && oldState.badgeCounts === newState.badgeCounts;
+    return false;
   },
   apply(oldState, newState) {
-    const dom = getPanelTabsVirtualDom(newState.views, newState.selectedIndex, newState.badgeCounts);
-    return [/* method */'setTabsDom', /* tabs */dom];
+    const dom = getPanelDom(newState);
+    return [/* method */'Viewlet.setDom2', dom];
   }
 };
-const render$f = [renderTabs$1];
+const render$f = [renderDom$2];
 
 const resize$c = async (state, dimensions) => {
   const currentViewletInstance = getInstance(state.currentViewletId);
@@ -21981,18 +22303,21 @@ const ViewletPanel_ipc = {
   Commands: Commands$e,
   Css: Css$g,
   Variables: Variables$4,
-  contentLoaded: contentLoaded$3,
   create: create$g,
   dispose: dispose$c,
-  getChildren: getChildren$2,
   handleClickAction,
+  handleClickClose,
+  handleClickMaximize,
   handleFilterInput,
+  hasFunctionalEvents: hasFunctionalEvents$a,
   hasFunctionalRender: hasFunctionalRender$f,
+  hasFunctionalRootRender: hasFunctionalRootRender$c,
   hidePanel,
   loadContent: loadContent$g,
   name: name$e,
   openViewlet: openViewlet$1,
   render: render$f,
+  renderEventListeners: renderEventListeners$9,
   resize: resize$c,
   saveState: saveState$7,
   selectIndex,
@@ -22149,8 +22474,8 @@ const getMenus$5 = async () => {
 };
 
 const hasFunctionalRender$e = true;
-const hasFunctionalRootRender$a = true;
-const hasFunctionalEvents$8 = true;
+const hasFunctionalRootRender$b = true;
+const hasFunctionalEvents$9 = true;
 const renderItems$7 = {
   isEqual(oldState, newState) {
     return newState.commands.length === 0;
@@ -22198,10 +22523,10 @@ const ViewletProblems_ipc = {
   getCommands: getCommands$9,
   getKeyBindings: getKeyBindings$7,
   getMenus: getMenus$5,
-  hasFunctionalEvents: hasFunctionalEvents$8,
+  hasFunctionalEvents: hasFunctionalEvents$9,
   hasFunctionalRender: hasFunctionalRender$e,
   hasFunctionalResize: hasFunctionalResize$9,
-  hasFunctionalRootRender: hasFunctionalRootRender$a,
+  hasFunctionalRootRender: hasFunctionalRootRender$b,
   loadContent: loadContent$f,
   menus: menus$6,
   name: name$d,
@@ -22311,8 +22636,8 @@ const getKeyBindings$6 = () => {
 };
 
 const hasFunctionalRender$d = true;
-const hasFunctionalRootRender$9 = true;
-const hasFunctionalEvents$7 = true;
+const hasFunctionalRootRender$a = true;
+const hasFunctionalEvents$8 = true;
 const renderItems$6 = {
   isEqual(oldState, newState) {
     return false;
@@ -22337,9 +22662,9 @@ const ViewletQuickPick_ipc = {
   dispose: dispose$b,
   getCommands: getCommands$8,
   getKeyBindings: getKeyBindings$6,
-  hasFunctionalEvents: hasFunctionalEvents$7,
+  hasFunctionalEvents: hasFunctionalEvents$8,
   hasFunctionalRender: hasFunctionalRender$d,
-  hasFunctionalRootRender: hasFunctionalRootRender$9,
+  hasFunctionalRootRender: hasFunctionalRootRender$a,
   loadContent: loadContent$e,
   name: name$c,
   render: render$d,
@@ -22359,7 +22684,7 @@ const loadContent$d = async (state, savedState) => {
 };
 
 // TODO side effect is not good here, find a way to call ViewletLocations
-const contentLoaded$2 = state => {
+const contentLoaded$1 = state => {
   set$a('Locations', {
     factory: ViewletLocations,
     state,
@@ -22458,20 +22783,20 @@ const ViewletReferences_ipc = {
   __proto__: null,
   Commands: Commands$b,
   Css: Css$d,
-  contentLoaded: contentLoaded$2,
+  contentLoaded: contentLoaded$1,
   create: create$d,
   dispose: dispose$a,
   getActions: getActions$1,
   getCommands: getCommands$7,
   getDisplayName,
-  hasFunctionalEvents: hasFunctionalEvents$c,
+  hasFunctionalEvents: hasFunctionalEvents$f,
   hasFunctionalRender: hasFunctionalRender$l,
-  hasFunctionalRootRender: hasFunctionalRootRender$f,
+  hasFunctionalRootRender: hasFunctionalRootRender$i,
   loadContent: loadContent$d,
   name: name$b,
   render: render$l,
   renderActions: renderActions$4,
-  renderEventListeners: renderEventListeners$c,
+  renderEventListeners: renderEventListeners$e,
   saveState: saveState$4
 };
 
@@ -22556,7 +22881,7 @@ const hotReload$5 = async state => {
     isHotReloading: false
   };
 };
-const contentLoaded$1 = async () => {
+const contentLoaded = async () => {
   // TODO
   // const debugId = Workspace.isTest() ? 'test-debug' : 'node-debug' // TODO
   // await Debug.start(debugId)
@@ -22669,8 +22994,8 @@ const getMenus$4 = async () => {
 };
 
 const hasFunctionalRender$c = true;
-const hasFunctionalRootRender$8 = true;
-const hasFunctionalEvents$6 = true;
+const hasFunctionalRootRender$9 = true;
+const hasFunctionalEvents$7 = true;
 const renderItems$5 = {
   isEqual(oldState, newState) {
     return newState.commands.length === 0;
@@ -22702,7 +23027,7 @@ const ViewletRunAndDebug_ipc = {
   Css: Css$c,
   Events: Events$2,
   Variables: Variables$2,
-  contentLoaded: contentLoaded$1,
+  contentLoaded,
   create: create$c,
   dispose: dispose$9,
   getCommands: getCommands$6,
@@ -22710,10 +23035,10 @@ const ViewletRunAndDebug_ipc = {
   getMenus: getMenus$4,
   handleDebugInput,
   handleEvaluate,
-  hasFunctionalEvents: hasFunctionalEvents$6,
+  hasFunctionalEvents: hasFunctionalEvents$7,
   hasFunctionalRender: hasFunctionalRender$c,
   hasFunctionalResize: hasFunctionalResize$8,
-  hasFunctionalRootRender: hasFunctionalRootRender$8,
+  hasFunctionalRootRender: hasFunctionalRootRender$9,
   hotReload: hotReload$5,
   loadContent: loadContent$c,
   menus: menus$5,
@@ -22963,8 +23288,8 @@ const getMenus$3 = async () => {
 const name$9 = 'Search';
 
 const hasFunctionalRender$a = true;
-const hasFunctionalRootRender$7 = true;
-const hasFunctionalEvents$5 = true;
+const hasFunctionalRootRender$8 = true;
+const hasFunctionalEvents$6 = true;
 const renderItems$4 = {
   isEqual(oldState, newState) {
     return newState.commands.length === 0;
@@ -23004,10 +23329,10 @@ const ViewletSearch_ipc = {
   getCommands: getCommands$5,
   getKeyBindings: getKeyBindings$4,
   getMenus: getMenus$3,
-  hasFunctionalEvents: hasFunctionalEvents$5,
+  hasFunctionalEvents: hasFunctionalEvents$6,
   hasFunctionalRender: hasFunctionalRender$a,
   hasFunctionalResize: hasFunctionalResize$7,
-  hasFunctionalRootRender: hasFunctionalRootRender$7,
+  hasFunctionalRootRender: hasFunctionalRootRender$8,
   hotReload: hotReload$4,
   loadContent: loadContent$a,
   menus: menus$4,
@@ -23144,8 +23469,8 @@ const getMenus$2 = async () => {
 };
 
 const hasFunctionalRender$9 = true;
-const hasFunctionalRootRender$6 = true;
-const hasFunctionalEvents$4 = true;
+const hasFunctionalRootRender$7 = true;
+const hasFunctionalEvents$5 = true;
 const renderItems$3 = {
   isEqual(oldState, newState) {
     return newState.commands.length === 0;
@@ -23182,10 +23507,10 @@ const ViewletSettings_ipc = {
   getCommands: getCommands$4,
   getKeyBindings: getKeyBindings$3,
   getMenus: getMenus$2,
-  hasFunctionalEvents: hasFunctionalEvents$4,
+  hasFunctionalEvents: hasFunctionalEvents$5,
   hasFunctionalRender: hasFunctionalRender$9,
   hasFunctionalResize: hasFunctionalResize$6,
-  hasFunctionalRootRender: hasFunctionalRootRender$6,
+  hasFunctionalRootRender: hasFunctionalRootRender$7,
   hotReload: hotReload$3,
   loadContent: loadContent$9,
   menus: menus$3,
@@ -23206,7 +23531,8 @@ const create$8 = (id, uri, x, y, width, height) => {
     height,
     titleAreaHeight: 35,
     actions: [],
-    title: EmptyString
+    title: EmptyString,
+    childUid: -1
   };
 };
 
@@ -23217,12 +23543,10 @@ const create$8 = (id, uri, x, y, width, height) => {
 //   }
 // }
 
-const saveChildState = state => {
-  const {
-    currentViewletId
-  } = state;
-  return [currentViewletId];
-};
+// export const saveChildState = (state) => {
+//   const { currentViewletId } = state
+//   return [currentViewletId]
+// }
 
 // const getSavedViewletId = (savedState) => {
 //   if (savedState && savedState.currentViewletId) {
@@ -23238,16 +23562,14 @@ const loadContent$8 = async (state, savedState) => {
     savedViewletId = Explorer$1;
   }
   // const savedViewletId = getSavedViewletId(savedState)
-  return {
-    ...state,
-    currentViewletId: savedViewletId
-  };
-};
-const contentLoaded = async (state, savedState) => {
-  const commands = [];
-  return commands;
+  return handleSideBarViewletChange(state, savedViewletId);
 };
 
+// export const contentLoaded = async (state, savedState) => {
+//   const commands = []
+//   return commands
+// }
+
 // export const loadContentEffects = () => {
 //   LifeCycle.once(LifeCycle.PHASE_TWELVE, hydrateLazy)
 //   GlobalEventBus.addListener('Layout.hideSideBar', handleSideBarClose)
@@ -23269,27 +23591,27 @@ const getContentDimensions = (dimensions, titleAreaHeight) => {
 };
 
 // TODO
-const getChildren$1 = state => {
-  const {
-    titleAreaHeight,
-    currentViewletId
-  } = state;
-  return [{
-    id: currentViewletId,
-    ...getContentDimensions(state, titleAreaHeight),
-    setBounds: false
-  }];
-};
+// export const getChildren = (state) => {
+//   const { titleAreaHeight, currentViewletId } = state
+//   return [
+//     {
+//       id: currentViewletId,
+//       ...getContentDimensions(state, titleAreaHeight),
+//       setBounds: false,
+//     },
+//   ]
+// }
+
 const handleSideBarViewletChange = async (state, moduleId) => {
   console.assert(typeof moduleId === 'string');
   if (!moduleId) {
-    const currentViewletState = getState$1(state.currentViewletId);
-    const currentViewletUid = currentViewletState.uid;
-    const commands = [];
-    commands.unshift(...disposeFunctional(currentViewletUid));
+    // const currentViewletState = ViewletStates.getState(state.currentViewletId)
+    // const currentViewletUid = currentViewletState.uid
+    // const commands = []
+    // commands.unshift(...Viewlet.disposeFunctional(currentViewletUid))
 
     // TODO return commands in a functional way
-    await invoke$B('Viewlet.sendMultiple', commands);
+    // await RendererProcess.invoke('Viewlet.sendMultiple', commands)
     return state;
   }
   // TODO set it in layout
@@ -23301,6 +23623,7 @@ const handleSideBarViewletChange = async (state, moduleId) => {
   state.currentViewletId = moduleId;
   const childDimensions = getContentDimensions(state, titleAreaHeight);
   const uid = state.uid;
+  const childUid = create$11();
   const commands = await load$5({
     getModule: load$3,
     id: moduleId,
@@ -23315,25 +23638,34 @@ const handleSideBarViewletChange = async (state, moduleId) => {
     width: childDimensions.width,
     height: childDimensions.height,
     parentUid: uid,
-    append: true,
-    args: []
+    append: false,
+    args: [],
+    uid: childUid,
+    shouldRenderEvents: false
   }, false, true);
+  let actionsDom = [];
+  let actionsUid = -1;
   if (commands) {
-    const currentViewletState = getState$1(currentViewletId);
-    const currentViewletUid = currentViewletState.uid;
-    number(currentViewletUid);
-    commands.unshift(...disposeFunctional(currentViewletUid));
-
-    // TODO return commands in a functional way
+    const actionsDomIndex = commands.findIndex(command => command[2] === 'setActionsDom');
+    if (actionsDomIndex) {
+      actionsDom = commands[actionsDomIndex][3];
+      commands.splice(actionsDomIndex, 1);
+    }
+    const eventsIndex = commands.findIndex(command => command[0] === 'Viewlet.registerEventListeners');
+    const events = commands[eventsIndex][2];
+    actionsUid = create$11();
+    commands.push(['Viewlet.createFunctionalRoot', moduleId, actionsUid, true], ['Viewlet.registerEventListeners', actionsUid, events], ['Viewlet.setDom2', actionsUid, actionsDom], ['Viewlet.setUid', actionsUid, childUid]);
     await invoke$B('Viewlet.sendMultiple', commands);
   }
 
-  // // TODO race condition (check if disposed after created)
+  // TODO race condition (check if disposed after created)
 
   await savePromise;
   return {
     ...state,
-    currentViewletId: moduleId
+    currentViewletId: moduleId,
+    childUid,
+    actionsUid
   };
 };
 
@@ -23416,16 +23748,60 @@ const Commands$7 = {
 
 const Css$8 = [];
 
+const getActionsDom = newState => {
+  const actions = newState.actionsUid || -1;
+  if (actions === -1) {
+    return [{
+      type: Div,
+      className: 'Actions',
+      role: 'toolbar',
+      childCount: 0
+    }];
+  }
+  return [{
+    type: Reference,
+    uid: actions
+  }];
+};
+const getTitleAreaDom = newState => {
+  const title = newState.title || newState.currentViewletId;
+  return [{
+    type: Div,
+    className: 'SideBarTitleArea',
+    childCount: 2
+  }, {
+    type: H2,
+    childCount: 1,
+    className: 'SideBarTitleAreaTitle'
+  }, text(title), ...getActionsDom(newState)];
+};
+const getSideBarDom = newState => {
+  const {
+    childUid
+  } = newState;
+  return [{
+    type: Div,
+    className: 'SideBar',
+    childCount: 2
+  }, ...getTitleAreaDom(newState), {
+    type: Reference,
+    uid: childUid
+  }];
+};
+
 const hasFunctionalRender$8 = true;
-const renderTitle$1 = {
+const hasFunctionalRootRender$6 = true;
+const hasFunctionalEvents$4 = true;
+const renderDom$1 = {
   isEqual(oldState, newState) {
     return false;
   },
   apply(oldState, newState) {
-    return [/* method */SetTitle, /* name */newState.title || newState.currentViewletId];
+    const dom = getSideBarDom(newState);
+    return [/* method */'Viewlet.setDom2', dom];
   }
 };
-const render$8 = [renderTitle$1];
+const render$8 = [renderDom$1];
 
 const name$7 = 'SideBar';
 
@@ -23434,22 +23810,21 @@ const ViewletSideBar_ipc = {
   Commands: Commands$7,
   Css: Css$8,
   close,
-  contentLoaded,
   create: create$8,
   dispose: dispose$5,
   focus: focus$1,
-  getChildren: getChildren$1,
   handleClickAction,
   handleSideBarViewletChange,
   handleUpdateStateChange,
+  hasFunctionalEvents: hasFunctionalEvents$4,
   hasFunctionalRender: hasFunctionalRender$8,
+  hasFunctionalRootRender: hasFunctionalRootRender$6,
   loadContent: loadContent$8,
   name: name$7,
   openDefaultViewlet,
   openViewlet,
   render: render$8,
-  resize: resize$7,
-  saveChildState
+  resize: resize$7
 };
 
 const embedsWorkerUrl = `${assetDir}/packages/embeds-worker/dist/embedsWorkerMain.js`;