@lvce-editor/renderer-process 27.0.0 → 29.0.0

package/dist/rendererProcessMain.js

@@ -76,10 +76,8 @@ const readText = async () => {
 const normalizeItems = async items => {
   const normalized = [];
   for (const clipboardItem of items) {
-    for (const type of clipboardItem.types) {
-      if (!type.startsWith('web ')) {
-        continue;
-      }
+    const webTypes = clipboardItem.types.filter(type => type.startsWith('web '));
+    for (const type of webTypes) {
       const blob = await clipboardItem.getType(type);
       normalized.push({
         blob,
@@ -98,11 +96,11 @@ const writeText = async text => {
   string(text);
   await navigator.clipboard.writeText(text);
 };
-const toClipBoardItem = options => {
+const toClipboardItem = options => {
   return new ClipboardItem(options);
 };
 const write$1 = async itemOptions => {
-  const items = itemOptions.map(toClipBoardItem);
+  const items = itemOptions.map(toClipboardItem);
   await navigator.clipboard.write(items);
 };
 const writeImage = async blob => {
@@ -184,7 +182,7 @@ const uidSymbol = Symbol('uid');
 
 const getUidTarget = $Element => {
   while ($Element) {
-    if ($Element[uidSymbol]) {
+    if (Object.getOwnPropertyDescriptor($Element, uidSymbol)?.value) {
       return $Element;
     }
     $Element = $Element.parentNode;
@@ -193,14 +191,18 @@ const getUidTarget = $Element => {
 };
 
 const setComponentUid = ($Element, uid) => {
-  $Element[uidSymbol] = uid;
+  Object.defineProperty($Element, uidSymbol, {
+    configurable: true,
+    value: uid,
+    writable: true
+  });
 };
 const getComponentUid = $Element => {
   const $Target = getUidTarget($Element);
   if (!$Target) {
     return 0;
   }
-  return $Target[uidSymbol];
+  return Object.getOwnPropertyDescriptor($Target, uidSymbol)?.value;
 };
 const getComponentUidFromEvent = event => {
   const {
@@ -227,10 +229,10 @@ const setDragImage = (dataTransfer, label) => {
   dragImage.textContent = label;
   document.body.append(dragImage);
   dataTransfer.setDragImage(dragImage, -10, -10);
-  const handleTimeOut = () => {
+  const handleTimeout = () => {
     dragImage.remove();
   };
-  setTimeout(handleTimeOut, 0);
+  setTimeout(handleTimeout, 0);
 };
 
 const applyDragInfoMaybe = event => {
@@ -451,10 +453,7 @@ const getEventListenerArg = (param, event) => {
 };
 
 const getEventListenerArgs = (params, event) => {
-  const serialized = [];
-  for (const param of params) {
-    serialized.push(getEventListenerArg(param, event));
-  }
+  const serialized = Array.from(params, param => getEventListenerArg(param, event));
   return serialized;
 };
 
@@ -1257,13 +1256,13 @@ const attachEvent = ($Node, eventMap, key, value, newEventMap) => {
   if (previous) {
     $Node.removeEventListener(keyLower, previous.listener, previous.options);
   }
-  if (newEventMap && newEventMap[value]) {
-    const fn = newEventMap[value];
+  const fn = newEventMap?.[value];
+  if (fn) {
     const options = getOptions(fn);
     // TODO support event listener options
-    $Node.addEventListener(keyLower, newEventMap[value], options);
+    $Node.addEventListener(keyLower, fn, options);
     listenersByEvent.set(keyLower, {
-      listener: newEventMap[value],
+      listener: fn,
       options
     });
     attachedListeners.set($Node, listenersByEvent);
@@ -1681,7 +1680,7 @@ const getActiveElementInside = $Viewlet => {
 };
 
 const queryInputs = $Viewlet => {
-  return [...$Viewlet.querySelectorAll('input, textarea, select')];
+  return [...$Viewlet.querySelectorAll(':scope input, :scope textarea, :scope select')];
 };
 
 const focusElement = $Element => {
@@ -1707,7 +1706,7 @@ const createHiddenContainer = (activeElement, focused) => {
   return $Hidden;
 };
 const restoreFocusedElement = ($Hidden, $New, focused) => {
-  const $NewFocused = $New.querySelector(`[name="${focused}"]`);
+  const $NewFocused = $New.querySelector(`[name="${CSS.escape(focused)}"]`);
   if (!$NewFocused) {
     return;
   }
@@ -1742,7 +1741,7 @@ const restoreFocus = ($Viewlet, isRootTree, isTreeFocused, focused) => {
     return;
   }
   if (isTreeFocused) {
-    const $Tree = $Viewlet.querySelector('[role="tree"]');
+    const $Tree = $Viewlet.querySelector(':scope [role="tree"]');
     if ($Tree) {
       // @ts-ignore
       focusElement($Tree);
@@ -1752,7 +1751,7 @@ const restoreFocus = ($Viewlet, isRootTree, isTreeFocused, focused) => {
   if (!focused) {
     return;
   }
-  const $Focused = $Viewlet.querySelector(`[name="${focused}"]`);
+  const $Focused = $Viewlet.querySelector(`[name="${CSS.escape(focused)}"]`);
   if ($Focused) {
     // @ts-ignore
     focusElement($Focused);
@@ -1817,9 +1816,9 @@ const addFileHandle = fileHandle => {
 const getTitleBarHeight = () => {
   if (
   // @ts-expect-error
-  navigator.windowControlsOverlay?.getTitlebarAreaRect) {
+  globalThis.navigator.windowControlsOverlay?.getTitlebarAreaRect) {
     // @ts-expect-error
-    const titleBarRect = navigator.windowControlsOverlay.getTitlebarAreaRect();
+    const titleBarRect = globalThis.navigator.windowControlsOverlay.getTitlebarAreaRect();
     return titleBarRect.height;
   }
   return 0;
@@ -1866,9 +1865,17 @@ const hydrate$4 = () => {
 
 const shouldLaunchMultipleWorkers = true;
 
+const getConfig = () => {
+  const configElement = document.getElementById('Config');
+  if (!configElement?.textContent) {
+    return {};
+  }
+  return JSON.parse(configElement.textContent);
+};
 const getInitData = () => {
   const initData = {
     Config: {
+      ...getConfig(),
       shouldLaunchMultipleWorkers: shouldLaunchMultipleWorkers
     },
     Layout: {
@@ -2069,7 +2076,7 @@ const getData$1 = event => {
 };
 const wrap = worker => {
   let handleMessage;
-  return {
+  const wrapped = {
     get onmessage() {
       return handleMessage;
     },
@@ -2079,7 +2086,7 @@ const wrap = worker => {
           const data = getData$1(event);
           listener({
             data,
-            target: this
+            target: wrapped
           });
         };
       } else {
@@ -2095,6 +2102,7 @@ const wrap = worker => {
       worker.postMessage(message, transfer);
     }
   };
+  return wrapped;
 };
 
 const IpcParentWithModuleWorker$2 = {
@@ -2112,7 +2120,10 @@ const create$J = async ({
 }) => {
   string(url);
   const portPromise = await new Promise(resolve => {
-    globalThis.acceptPort = resolve;
+    Object.defineProperty(globalThis, 'acceptPort', {
+      configurable: true,
+      value: resolve
+    });
   });
   await import(url);
   const port = await portPromise;
@@ -2133,7 +2144,10 @@ const IpcParentWithMessagePort$2 = {
 
 const create$I = async url => {
   const referencePort = await new Promise(resolve => {
-    globalThis.acceptReferencePort = resolve;
+    Object.defineProperty(globalThis, 'acceptReferencePort', {
+      configurable: true,
+      value: resolve
+    });
     import(url);
   });
   delete globalThis.acceptReferencePort;
@@ -3534,7 +3548,7 @@ const create$Widgets = () => {
   return $Widgets;
 };
 const append$1 = $Element => {
-  // TODO should not call append in the first place if it is already in dom
+  // TODO should not call append in the first place if it is already in DOM
   if (state$6.widgetSet.has($Element)) {
     return;
   }
@@ -3672,7 +3686,7 @@ const Menu = 'menu';
 const None$1 = 'none';
 const Status = 'status';
 const TabList = 'tablist';
-const ToolBar = 'toolbar';
+const Toolbar = 'toolbar';
 
 const create$BackDrop = () => {
   const $BackDrop = document.createElement('div');
@@ -3722,7 +3736,7 @@ const stopPropagation = event => {
   event.stopPropagation();
 };
 
-// TODO this module should be called dom or dom utils
+// TODO this module should be called DOM or DOM utils
 
 // TODO this module makes for weird code splitting chunks,
 // maybe duplicate the code per file for better chunks
@@ -3824,8 +3838,8 @@ const FocusOutput = 28;
 // TODO using .style.top, .style.left causes chrome devtools to show many layout shift -> maybe use transform instead
 
 // TODO when cycling through items, recalculate style is much slower
-// than in vscode (1.49ms vs 0.33ms)
-// paint is also faster in vscode (0.32ms vs 0.14ms)
+// than in VS Code (1.49ms vs 0.33ms)
+// paint is also faster in VS Code (0.32ms vs 0.14ms)
 
 // TODO focus on menu is not announced to screenreader
 
@@ -3964,7 +3978,7 @@ const focusIndex = (level, oldFocusedIndex, newFocusedIndex) => {
   }
 };
 
-// TODO replace function that recycles menu dom nodes
+// TODO replace function that recycles menu DOM nodes
 
 const handleBackDropMouseDown = event => {
   preventDefault(event);
@@ -3978,7 +3992,7 @@ const handleBackDropMouseDown = event => {
 const handleContextMenu$7 = event => {
   preventDefault(event);
 };
-const showMenu = (x, y, width, height, items, level, parentIndex = -1, dom, mouseBlocking = false) => {
+const showMenu = (x, y, width, height, items, level, parentIndex = -1, dom = [], mouseBlocking = false) => {
   if (mouseBlocking) {
     const $BackDrop = create$BackDrop();
     $BackDrop.onmousedown = handleBackDropMouseDown;
@@ -4007,7 +4021,7 @@ const showMenu = (x, y, width, height, items, level, parentIndex = -1, dom, mous
     send('Focus.setFocus', FocusMenu);
   }
 };
-const hideSubMenu = level => {
+const hideSubmenu = level => {
   const $$ChildMenus = state$3.$$Menus.slice(level);
   for (const $ChildMenu of $$ChildMenus) {
     remove$1($ChildMenu);
@@ -4053,7 +4067,6 @@ const showControlled = ({
   x,
   y
 }) => {
-  // @ts-expect-error
   showMenu(x, y, width, height, items, level);
   // TODO menu should not necessarily know about parent (titleBarMenuBar)
   // it should be the other way around
@@ -4090,7 +4103,7 @@ const openUrl = url => {
   window.open(url);
 };
 const redirectToUrl = url => {
-  window.location.href = url;
+  window.location.assign(url);
 };
 
 const isElectronUserAgentSpecificMemoryError = error => {
@@ -4103,9 +4116,9 @@ const isElectronUserAgentSpecificMemoryError = error => {
 const measureUserAgentSpecificMemory = async () => {
   try {
     // @ts-expect-error
-    if (performance?.measureUserAgentSpecificMemory) {
+    if (globalThis.performance?.measureUserAgentSpecificMemory) {
       // @ts-expect-error
-      const memory = await performance.measureUserAgentSpecificMemory();
+      const memory = await globalThis.performance.measureUserAgentSpecificMemory();
       return memory;
     }
   } catch (error) {
@@ -4150,7 +4163,7 @@ const getCombinedErrorMessage = (error, message) => {
   if (message) {
     return `${message}: ${error}`;
   }
-  return `${error}`;
+  return String(error);
 };
 
 const mergeStacks = (parent, child) => {
@@ -4172,7 +4185,8 @@ const getErrorStack = error => {
     return error.stack;
   }
   if (error && error.lineNumber && error.columnNumber && error.fileName) {
-    const normalStackLooksLike = new Error().stack;
+    const testError = new Error();
+    const normalStackLooksLike = testError.stack;
     // @ts-ignore
     if (/^[$\w]+@.*/.test(normalStackLooksLike)) {
       // firefox stack trace
@@ -4538,7 +4552,7 @@ const press = options => {
   keyUp(element, options);
 };
 
-const KeyBoardActions = {
+const KeyboardActions = {
   __proto__: null,
   press
 };
@@ -4686,8 +4700,8 @@ const performAction = async (locator, fnName, options) => {
   }
   fn(element, options);
 };
-const performKeyBoardAction = (fnName, options) => {
-  const fn = KeyBoardActions[fnName];
+const performKeyboardAction = (fnName, options) => {
+  const fn = KeyboardActions[fnName];
   fn(options);
 };
 const checkSingleElementCondition = async (locator, fnName, options) => {
@@ -4761,7 +4775,8 @@ const transferToWebView = objectId => {
   // TODO allow specifying transfer origin from renderer worker
   // TODO allow specifing method from renderer worker
   const port = acquire(objectId);
-  const targetOrigin = new URL($Iframe.src || location.href, location.href).origin;
+  const targetUrl = new URL($Iframe.src || location.href, location.href);
+  const targetOrigin = targetUrl.origin;
   contentWindow.postMessage({
     jsonrpc: '2.0',
     method: 'handlePort',
@@ -4793,7 +4808,7 @@ const getIdentifiers = () => {
   return state$2.identifiers;
 };
 
-// TODO store keybindings as json somewhere
+// TODO store keybindings as JSON somewhere
 
 // TODO sort keybindings by `when` priority -> focus.editorCompletions: 10, focus.editor:9 etc.
 
@@ -4801,7 +4816,7 @@ const getIdentifiers = () => {
 // could remove some context logic and have less user configuration when these are default
 // e.g. arrow down focuses next, arrow up always focuses previous item (like in aria spec)
 
-// TODO ui should only have keys -> commands get resolved inside renderer worker
+// TODO UI should only have keys -> commands get resolved inside renderer worker
 // TODO should toggle terminal, not only open
 
 const setIdentifiers = identifiers => {
@@ -5221,7 +5236,7 @@ const setOffsetX = (state, offsetX) => {
   const {
     $Viewlet
   } = state;
-  const $ColorPickerSliderThumb = $Viewlet.querySelector('.ColorPickerSliderThumb');
+  const $ColorPickerSliderThumb = $Viewlet.querySelector(':scope .ColorPickerSliderThumb');
   setXAndYTransform($ColorPickerSliderThumb, offsetX, 0);
   applyUidWorkaround($Viewlet);
 };
@@ -5311,14 +5326,14 @@ const setValue$2 = (state, value) => {
   const {
     $Viewlet
   } = state;
-  const $Input = $Viewlet.querySelector('input');
+  const $Input = $Viewlet.querySelector(':scope input');
   $Input.value = value;
 };
 const focus$c = state => {
   const {
     $Viewlet
   } = state;
-  const $Input = $Viewlet.querySelector('input');
+  const $Input = $Viewlet.querySelector(':scope input');
   $Input.focus();
 };
 
@@ -5347,7 +5362,7 @@ const create$p = icon => {
 };
 
 const create$Button = (label, icon) => {
-  // TODO icon div might not be needed (unnecessary html element)
+  // TODO icon div might not be needed (unnecessary HTML element)
   const $Icon = create$p(icon);
   const $Button = document.createElement('button');
   $Button.className = 'IconButton';
@@ -5544,14 +5559,14 @@ const ViewletE2eTestEvents = {
 };
 
 // TODO could use browser view when running in electron
-const setIframe$2 = (state, src, sandbox = []) => {
+const setIframe$3 = (state, src, sandbox = []) => {
   if (!src) {
     return;
   }
   const {
     $Viewlet
   } = state;
-  const $Parent = $Viewlet.querySelector('.E2eTestIframeWrapper');
+  const $Parent = $Viewlet.querySelector(':scope .E2eTestIframeWrapper');
   const $Iframe = document.createElement('iframe');
   for (const element of sandbox) {
     $Iframe.sandbox.add(element);
@@ -5564,7 +5579,7 @@ const setPreviewTransform = (state, transform) => {
   const {
     $Viewlet
   } = state;
-  const $Parent = $Viewlet.querySelector('.E2eTestIframeWrapper');
+  const $Parent = $Viewlet.querySelector(':scope .E2eTestIframeWrapper');
   $Parent.style.transform = transform;
 };
 // export const setPort = (state, portId, origin) => {
@@ -5587,7 +5602,7 @@ const setPreviewTransform = (state, transform) => {
 const ViewletE2eTest = {
   __proto__: null,
   Events: ViewletE2eTestEvents,
-  setIframe: setIframe$2,
+  setIframe: setIframe$3,
   setPreviewTransform
 };
 
@@ -5635,7 +5650,7 @@ const handleLoad$1 = event => {
   console.log(event.target.src);
   send('E2eTests.handleLoad');
 };
-const setIframe$1 = (state, src, sandbox = []) => {
+const setIframe$2 = (state, src, sandbox = []) => {
   if (!src) {
     return;
   }
@@ -5676,7 +5691,7 @@ const setPort$2 = (state, portId, origin) => {
 const ViewletE2eTests = {
   __proto__: null,
   Events: ViewletE2eTestsEvents,
-  setIframe: setIframe$1,
+  setIframe: setIframe$2,
   setPort: setPort$2
 };
 
@@ -5927,7 +5942,7 @@ const handleError$5 = (state, error) => {
   const {
     $Viewlet
   } = state;
-  $Viewlet.textContent = `${error}`;
+  $Viewlet.textContent = String(error);
 };
 const setBounds$8 = (state, x, y, width, height) => {
   const {
@@ -6010,7 +6025,7 @@ const ViewletEditorCompletionDetails = {
   setDom: setDom$7
 };
 
-// TODO not sure whether created dom node
+// TODO not sure whether created DOM node
 // should stay in state or be removed
 // one option would result in less memory usage
 // the other option would result in less garbage collection
@@ -6227,7 +6242,7 @@ const setTransform = (state, transform) => {
   const {
     $Viewlet
   } = state;
-  const $ImageWrapper = $Viewlet.querySelector('.ImageContent');
+  const $ImageWrapper = $Viewlet.querySelector(':scope .ImageContent');
   $ImageWrapper.style.transform = transform;
 };
 const setDragging = (state, isDragging) => {
@@ -6411,6 +6426,66 @@ const ViewletError = {
   setMessage: setMessage$1
 };
 
+const commandMap$1 = {};
+
+const ViewletExtensionViewEvents = {
+  __proto__: null,
+  commandMap: commandMap$1
+};
+
+const setIframeCredentialless = ($Iframe, credentialless) => {
+  if (credentialless) {
+    // @ts-ignore
+    $Iframe.credentialless = credentialless;
+  }
+};
+
+const setIframeCsp = ($Iframe, csp) => {
+  if (csp) {
+    // @ts-ignore
+    $Iframe.csp = csp;
+  }
+};
+
+const setIframeSandBox = ($Iframe, sandbox) => {
+  if (sandbox.length === 0) {
+    return;
+  }
+  $Iframe.sandbox.add(...sandbox);
+};
+
+const setIframeSrc = ($Iframe, src, srcDoc = '') => {
+  if (src) {
+    $Iframe.src = src;
+  } else if (srcDoc) {
+    $Iframe.srcdoc = srcDoc;
+  }
+};
+
+const setIframe$1 = (state, src, sandbox = [], srcDoc = '', csp = '', credentialless = true, title = '') => {
+  if (!src && !srcDoc) {
+    return;
+  }
+  const {
+    $Viewlet
+  } = state;
+  $Viewlet.textContent = '';
+  const $Iframe = document.createElement('iframe');
+  $Iframe.className = 'ExtensionViewIframe';
+  $Iframe.title = title;
+  setIframeCredentialless($Iframe, credentialless);
+  setIframeCsp($Iframe, csp);
+  setIframeSandBox($Iframe, sandbox);
+  setIframeSrc($Iframe, src, srcDoc);
+  $Viewlet.append($Iframe);
+};
+
+const ViewletExtensionView = {
+  __proto__: null,
+  Events: ViewletExtensionViewEvents,
+  setIframe: setIframe$1
+};
+
 const handleInput$4 = event => {
   const {
     target
@@ -6530,7 +6605,7 @@ const setValue$1 = (state, value) => {
   const {
     $Viewlet
   } = state;
-  const $InputBox = $Viewlet.querySelector('.MultilineInputBox');
+  const $InputBox = $Viewlet.querySelector(':scope .MultilineInputBox');
   if (!$InputBox) {
     return;
   }
@@ -6593,7 +6668,7 @@ const setFocusedIndex$1 = (state, oldFocusedIndex, newFocusedIndex) => {
   const {
     $Viewlet
   } = state;
-  const $Locations = $Viewlet.children[1];
+  const $Locations = $Viewlet.querySelector(':scope .LocationList');
   if (oldFocusedIndex === -1) {
     $Locations.classList.remove('FocusOutline');
   } else {
@@ -6703,7 +6778,7 @@ const setValue = (state, value) => {
   const {
     $Viewlet
   } = state;
-  const $InputBox = $Viewlet.querySelector('input');
+  const $InputBox = $Viewlet.querySelector(':scope input');
   $InputBox.value = value;
 };
 const setColumnWidths = (state, columnWidth1, columnWidth2, columnWidth3) => {
@@ -6711,7 +6786,7 @@ const setColumnWidths = (state, columnWidth1, columnWidth2, columnWidth3) => {
   const {
     $Viewlet
   } = state;
-  const $$Resizers = $Viewlet.querySelectorAll('.Resizer');
+  const $$Resizers = $Viewlet.querySelectorAll(':scope .Resizer');
   const $Resizer1 = $$Resizers[0];
   const $Resizer2 = $$Resizers[1];
   $Resizer1.style.left = `${paddingLeft + columnWidth1}px`;
@@ -6858,9 +6933,9 @@ const handleKeyUp = handleKeyUp$1;
 
 const create$c = () => {
   // TODO use aria role splitter once supported https://github.com/w3c/aria/issues/1348
-  const $SashSideBar = document.createElement('div');
-  $SashSideBar.className = 'Viewlet Sash SashVertical';
-  $SashSideBar.id = 'SashSideBar';
+  const $SashSidebar = document.createElement('div');
+  $SashSidebar.className = 'Viewlet Sash SashVertical';
+  $SashSidebar.id = 'SashSideBar';
 
   // TODO use aria role splitter once supported https://github.com/w3c/aria/issues/1348
   const $SashPanel = document.createElement('div');
@@ -6870,19 +6945,19 @@ const create$c = () => {
   $Viewlet.id = 'Workbench';
   $Viewlet.className = 'Viewlet Layout Workbench';
   $Viewlet.role = Application;
-  $Viewlet.append($SashSideBar, $SashPanel);
+  $Viewlet.append($SashSidebar, $SashPanel);
   return {
     $SashPanel,
-    $SashSideBar,
+    $SashSidebar,
     $Viewlet
   };
 };
 const attachEvents$2 = state => {
   const {
     $SashPanel,
-    $SashSideBar
+    $SashSidebar
   } = state;
-  attachEvents$6($SashSideBar, {
+  attachEvents$6($SashSidebar, {
     [DoubleClick]: handleSashDoubleClick,
     [PointerDown]: handleSashPointerDown
   });
@@ -6898,13 +6973,13 @@ const attachEvents$2 = state => {
     [Resize]: handleResize
   });
 };
-const setSashes = (state, sashSideBar, sashPanel) => {
+const setSashes = (state, sashSidebar, sashPanel) => {
   const {
     $SashPanel,
-    $SashSideBar
+    $SashSidebar
   } = state;
-  setBounds$a($SashSideBar, sashSideBar.x, sashSideBar.y, sashSideBar.width, sashSideBar.height);
-  $SashSideBar.classList.toggle('SashActive', sashSideBar.active);
+  setBounds$a($SashSidebar, sashSidebar.x, sashSidebar.y, sashSidebar.width, sashSidebar.height);
+  $SashSidebar.classList.toggle('SashActive', sashSidebar.active);
   setBounds$a($SashPanel, sashPanel.x, sashPanel.y, sashPanel.width, sashPanel.height);
   $SashPanel.classList.toggle('SashActive', sashPanel.active);
 };
@@ -6933,6 +7008,7 @@ const EditorPlainText = 'EditorPlainText';
 const EditorWidgetError = 'EditorWidgetError';
 const Empty = 'Empty';
 const Error$1 = 'Error';
+const ExtensionView = 'ExtensionView';
 const FindWidget = 'FindWidget';
 const ImagePreview = 'ImagePreview';
 const InlineDiffEditor = 'InlineDiffEditor';
@@ -6944,7 +7020,7 @@ const Panel = 'Panel';
 const References = 'References';
 const RunAndDebug = 'Run And Debug';
 const ScreenCapture = 'ScreenCapture';
-const SideBar$1 = 'SideBar';
+const Sidebar$1 = 'SideBar';
 const SimpleBrowser = 'SimpleBrowser';
 const SourceControl = 'Source Control';
 const StatusBar$1 = 'StatusBar';
@@ -7082,16 +7158,16 @@ const create$a = () => {
   const $ButtonMaximize = create$Button(UiStrings.Maximize, 'ChevronUp');
   // TODO use event delegation
 
-  const $PanelToolBar = document.createElement('div');
-  $PanelToolBar.className = 'PanelToolBar';
-  $PanelToolBar.role = ToolBar;
-  $PanelToolBar.append($ButtonMaximize, $ButtonClose);
+  const $PanelToolbar = document.createElement('div');
+  $PanelToolbar.className = 'PanelToolBar';
+  $PanelToolbar.role = Toolbar;
+  $PanelToolbar.append($ButtonMaximize, $ButtonClose);
   const $PanelActions = document.createElement('div');
   $PanelActions.className = 'Actions';
   $PanelActions.role = 'toolbar';
   const $PanelHeader = document.createElement('div');
   $PanelHeader.className = 'PanelHeader';
-  $PanelHeader.append($PanelTabs, $PanelActions, $PanelToolBar);
+  $PanelHeader.append($PanelTabs, $PanelActions, $PanelToolbar);
   // const $PanelContent = document.createElement('div')
   // $PanelContent.id = 'PanelContent'
   const $Viewlet = document.createElement('div');
@@ -7207,7 +7283,7 @@ const ViewletRunAndDebug = {
   __proto__: null
 };
 
-const handleLoadedMetaData = event => {
+const handleLoadedMetadata = event => {
   // TODO should send event to renderer worker, renderer worker should invoke play method
   const {
     target
@@ -7229,7 +7305,7 @@ const setScreenCapture = (state, id) => {
   const $Video = document.createElement('video');
   const screenCapture = get$2(id);
   $Video.srcObject = screenCapture;
-  $Video.onloadedmetadata = handleLoadedMetaData;
+  $Video.onloadedmetadata = handleLoadedMetadata;
   $Viewlet.append($Video);
 };
 
@@ -7239,7 +7315,7 @@ const ViewletScreenCapture = {
   setScreenCapture
 };
 
-const SideBar = 'Side Bar';
+const Sidebar = 'Side Bar';
 const StatusBar = 'Status Bar';
 
 const handleClickAction = (target, uid) => {
@@ -7259,44 +7335,44 @@ const handleHeaderClick = event => {
 };
 
 const create$8 = () => {
-  const $SideBarTitleAreaTitle = document.createElement('h2');
-  $SideBarTitleAreaTitle.className = 'SideBarTitleAreaTitle';
-  const $SideBarTitleArea = document.createElement('div');
-  $SideBarTitleArea.className = 'SideBarTitleArea';
-  $SideBarTitleArea.append($SideBarTitleAreaTitle);
+  const $SidebarTitleAreaTitle = document.createElement('h2');
+  $SidebarTitleAreaTitle.className = 'SideBarTitleAreaTitle';
+  const $SidebarTitleArea = document.createElement('div');
+  $SidebarTitleArea.className = 'SideBarTitleArea';
+  $SidebarTitleArea.append($SidebarTitleAreaTitle);
   const $Viewlet = document.createElement('div');
   $Viewlet.id = 'SideBar';
   $Viewlet.className = 'Viewlet SideBar';
   $Viewlet.role = Complementary;
-  $Viewlet.ariaRoleDescription = SideBar;
-  $Viewlet.append($SideBarTitleArea);
+  $Viewlet.ariaRoleDescription = Sidebar;
+  $Viewlet.append($SidebarTitleArea);
   return {
     $Actions: undefined,
-    $SideBar: $Viewlet,
-    $SideBarContent: undefined,
-    $SideBarTitleArea,
-    $SideBarTitleAreaTitle,
+    $Sidebar: $Viewlet,
+    $SidebarContent: undefined,
+    $SidebarTitleArea,
+    $SidebarTitleAreaTitle,
     $Viewlet
   };
 };
 const attachEvents = state => {
   const {
-    $SideBarTitleArea
+    $SidebarTitleArea
   } = state;
-  attachEvents$6($SideBarTitleArea, {
+  attachEvents$6($SidebarTitleArea, {
     [Click]: handleHeaderClick
   });
 };
 const dispose$5 = state => {
   object(state);
-  state.$SideBar.replaceChildren();
+  state.$Sidebar.replaceChildren();
 };
 const setTitle = (state, name) => {
   const {
-    $SideBarTitleAreaTitle
+    $SidebarTitleAreaTitle
   } = state;
-  $SideBarTitleAreaTitle.title = name;
-  $SideBarTitleAreaTitle.textContent = name;
+  $SidebarTitleAreaTitle.title = name;
+  $SidebarTitleAreaTitle.textContent = name;
 };
 const setActionsDom = (state, actions, parentId, eventMap = {}) => {
   if (actions.length === 0) {
@@ -7304,14 +7380,14 @@ const setActionsDom = (state, actions, parentId, eventMap = {}) => {
   }
   const {
     $Actions,
-    $SideBarTitleArea
+    $SidebarTitleArea
   } = state;
   const $Parent = document.createElement('div');
   const $NewViewlet = rememberFocus$1($Parent, actions, {}, parentId);
   if ($Actions) {
     $Actions.replaceWith($NewViewlet);
   } else {
-    $SideBarTitleArea.append($NewViewlet);
+    $SidebarTitleArea.append($NewViewlet);
   }
   state.$Actions = $NewViewlet;
 };
@@ -7319,7 +7395,7 @@ const focus$5 = async () => {
   // await
 };
 
-const ViewletSideBar = {
+const ViewletSidebar = {
   __proto__: null,
   attachEvents,
   create: create$8,
@@ -7511,7 +7587,7 @@ const focus$4 = state => {
   const {
     $Viewlet
   } = state;
-  $Viewlet.querySelector('input').focus();
+  $Viewlet.querySelector(':scope input').focus();
 };
 
 const ViewletSourceControl = {
@@ -8093,35 +8169,6 @@ const ViewletWebViewEvents = {
   returnValue
 };
 
-const setIframeCredentialless = ($Iframe, credentialless) => {
-  if (credentialless) {
-    // @ts-ignore
-    $Iframe.credentialless = credentialless;
-  }
-};
-
-const setIframeCsp = ($Iframe, csp) => {
-  if (csp) {
-    // @ts-ignore
-    $Iframe.csp = csp;
-  }
-};
-
-const setIframeSandBox = ($Iframe, sandbox) => {
-  if (sandbox.length === 0) {
-    return;
-  }
-  $Iframe.sandbox.add(...sandbox);
-};
-
-const setIframeSrc = ($Iframe, src, srcDoc = '') => {
-  if (src) {
-    $Iframe.src = src;
-  } else if (srcDoc) {
-    $Iframe.srcdoc = srcDoc;
-  }
-};
-
 // TODO could use browser view when running in electron
 const setIframe = (state, src, sandbox = [], srcDoc = '', csp = '', credentialless = true) => {
   if (!src && !srcDoc) {
@@ -8130,7 +8177,7 @@ const setIframe = (state, src, sandbox = [], srcDoc = '', csp = '', credentialle
   const {
     $Viewlet
   } = state;
-  const $Parent = $Viewlet.querySelector('.WebViewWrapper');
+  const $Parent = $Viewlet.querySelector(':scope .WebViewWrapper');
   if (!$Parent) {
     throw new Error('webview wrapper not found');
   }
@@ -8206,6 +8253,7 @@ const moduleLoaders = {
   [Empty]: () => ViewletEmpty,
   [EmptyEditor]: () => ViewletEmptyEditor,
   [Error$1]: () => ViewletError,
+  [ExtensionView]: () => ViewletExtensionView,
   [FindWidget]: () => ViewletFindWidget,
   [ImagePreview]: () => ImagePreview$1,
   [Implementations]: () => ViewletImplementations,
@@ -8217,7 +8265,7 @@ const moduleLoaders = {
   [References]: () => ViewletReferences,
   [RunAndDebug]: () => ViewletRunAndDebug,
   [ScreenCapture]: () => ViewletScreenCapture,
-  [SideBar$1]: () => ViewletSideBar,
+  [Sidebar$1]: () => ViewletSidebar,
   [SimpleBrowser]: () => ViewletSimpleBrowser,
   [SourceControl]: () => ViewletSourceControl,
   [StatusBar$1]: () => ViewletStatusBar,
@@ -8243,7 +8291,7 @@ const load$1 = moduleId => {
 
 const state$1 = {
   currentPanelView: undefined,
-  currentSideBarView: undefined,
+  currentSidebarView: undefined,
   modules: Object.create(null)
 };
 
@@ -8377,7 +8425,7 @@ const setInputValues = (viewletId, items) => {
     setElementProperty(viewletId, name, 'value', value);
   }
 };
-const setCheckBoxValue = (viewletId, name, value) => {
+const setCheckboxValue = (viewletId, name, value) => {
   setElementProperty(viewletId, name, 'checked', value);
 };
 const setSelectionByName = (viewletId, name, start, end) => {
@@ -8452,18 +8500,18 @@ const isSpecial = id => {
   return specialIds.has(id);
 };
 const createPlaceholder = (viewletId, parentId, top, left, width, height) => {
-  const $PlaceHolder = document.createElement('div');
-  $PlaceHolder.className = `Viewlet ${viewletId}`;
-  setBounds$a($PlaceHolder, left, top, width, height);
+  const $Placeholder = document.createElement('div');
+  $Placeholder.className = `Viewlet ${viewletId}`;
+  setBounds$a($Placeholder, left, top, width, height);
   if (isSpecial(viewletId)) {
-    $PlaceHolder.id = viewletId;
+    $Placeholder.id = viewletId;
   }
   const parentInstance = get$a(parentId);
   const $Parent = parentInstance.state.$Viewlet;
-  $Parent.append($PlaceHolder);
+  $Parent.append($Placeholder);
   set$9(viewletId, {
     state: {
-      $Viewlet: $PlaceHolder
+      $Viewlet: $Placeholder
     }
   });
 };
@@ -8500,7 +8548,7 @@ const setDom2 = (viewletId, dom) => {
       uid = get($Viewlet);
     } catch {}
   }
-  // TODO optimize rendering with virtual dom diffing
+  // TODO optimize rendering with virtual DOM diffing
   const $NewViewlet = rememberFocus($Viewlet, dom, Events, viewletId);
   if (uid) {
     // @ts-ignore
@@ -8607,7 +8655,7 @@ const handleError$1 = (id, parentId, message) => {
     return;
   }
   if (instance?.state.$Viewlet) {
-    instance.state.$Viewlet.textContent = `${message}`;
+    instance.state.$Viewlet.textContent = String(message);
   }
   // TODO error should bubble up to until highest possible component
   const parentInstance = get$a(parentId);
@@ -8726,22 +8774,23 @@ const replaceChildren = (parentId, childIds) => {
   $Parent.replaceChildren($Fragment);
 };
 const applyLateFocusMaybe = () => {
-  if (focusCallback !== emptyFocusCallback) {
+  if (focusCallback === emptyFocusCallback) {
+    return;
+  }
+  const {
+    id,
+    selector
+  } = focusCallback;
+  focusCallback = emptyFocusCallback;
+  const instance = get$a(id);
+  if (instance) {
     const {
-      id,
-      selector
-    } = focusCallback;
-    focusCallback = emptyFocusCallback;
-    const instance = get$a(id);
-    if (instance) {
-      const {
-        $Viewlet
-      } = instance.state;
-      const $Element = $Viewlet.querySelector(selector);
-      if ($Element) {
-        $Element.focus();
-        focusCallback = emptyFocusCallback;
-      }
+      $Viewlet
+    } = instance.state;
+    const $Element = $Viewlet.querySelector(selector);
+    if ($Element) {
+      $Element.focus();
+      focusCallback = emptyFocusCallback;
     }
   }
 };
@@ -8812,7 +8861,7 @@ const commandHandlers = {
   'Viewlet.replaceChildren': replaceChildren,
   'Viewlet.send': invoke,
   'Viewlet.setBounds': setBounds$1,
-  'Viewlet.setCheckBoxValue': setCheckBoxValue,
+  'Viewlet.setCheckBoxValue': setCheckboxValue,
   'Viewlet.setCss': addCssStyleSheet,
   'Viewlet.setDom': setDom,
   'Viewlet.setDom2': setDom2,
@@ -8900,15 +8949,17 @@ const set$1 = title => {
 
 // workaround for not being setPointerCapture() not working on
 // synthetic events
+let originalSetPointerCapture;
+let originalReleasePointerCapture;
 const mock = () => {
-  globalThis._originalSetPointerCapture = Element.prototype.setPointerCapture;
-  globalThis._originalReleasePointerCapture = Element.prototype.releasePointerCapture;
+  originalSetPointerCapture = Element.prototype.setPointerCapture;
+  originalReleasePointerCapture = Element.prototype.releasePointerCapture;
   Element.prototype.setPointerCapture = () => {};
   Element.prototype.releasePointerCapture = () => {};
 };
 const unmock = () => {
-  Element.prototype.setPointerCapture = globalThis._originalSetPointerCapture;
-  Element.prototype.releasePointerCapture = globalThis._originalReleasePointerCapture;
+  Element.prototype.setPointerCapture = originalSetPointerCapture;
+  Element.prototype.releasePointerCapture = originalReleasePointerCapture;
 };
 
 const isFile = value => {
@@ -9045,7 +9096,7 @@ const commandMap = {
   'MeasureTextHeight.measureTextHeight': measureTextHeight,
   'Menu.focusIndex': focusIndex,
   'Menu.hide': hide,
-  'Menu.hideSubMenu': hideSubMenu,
+  'Menu.hideSubMenu': hideSubmenu,
   'Menu.showControlled': showControlled,
   'Menu.showMenu': showMenu,
   'Meta.setThemeColor': setThemeColor,
@@ -9067,7 +9118,7 @@ const commandMap = {
   'TestFrameWork.checkSingleElementCondition': checkSingleElementCondition,
   'TestFrameWork.performAction': performAction,
   'TestFrameWork.performAction2': performAction2,
-  'TestFrameWork.performKeyBoardAction': performKeyBoardAction,
+  'TestFrameWork.performKeyBoardAction': performKeyboardAction,
   'TestFrameWork.showOverlay': showOverlay,
   'TestFrameWork.transfer': transfer,
   'TestFrameWork.transferToWebView': transferToWebView,
@@ -9345,9 +9396,9 @@ const getIsFirefox = () => {
   }
   if (
   // @ts-expect-error
-  navigator.userAgentData?.brands) {
+  globalThis.navigator.userAgentData?.brands) {
     // @ts-expect-error
-    return navigator.userAgentData.brands.includes('Firefox');
+    return globalThis.navigator.userAgentData.brands.includes('Firefox');
   }
   return navigator.userAgent.toLowerCase().includes('firefox');
 };
@@ -9509,7 +9560,7 @@ const handleError = async (error, notify = true, prefix = '') => {
 };
 
 const isChromeExtensionError = error => {
-  return `${error}` === 'Script error.';
+  return String(error) === 'Script error.';
 };
 
 const handleUnhandledRejection = event => {
@@ -9791,7 +9842,7 @@ const create = () => {
   const $Viewlet = document.createElement('div');
   const term = new Dl();
   term.open($Viewlet);
-  term.write('Hello from \u001B[1;3;31mxterm.js\u001B[0m $ ');
+  term.write('Hello from \u{1B}[1;3;31mxterm.js\u{1B}[0m $ ');
   return {
     $Viewlet
   };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lvce-editor/renderer-process",
-  "version": "27.0.0",
+  "version": "29.0.0",
   "keywords": [
     "lvce-editor",
     "renderer-process"