@lvce-editor/server 0.5.0 → 0.6.1

package/static/{4d80653 → 9b6f42d}/packages/renderer-process/dist/rendererProcessMain.js

@@ -4,8 +4,8 @@ var __esm = (fn, res) => function __init() {
   return fn && (res = (0, fn[__getOwnPropNames(fn)[0]])(fn = 0)), res;
 };
 var __export = (target, all) => {
-  for (var name19 in all)
-    __defProp(target, name19, { get: all[name19], enumerable: true });
+  for (var name20 in all)
+    __defProp(target, name20, { get: all[name20], enumerable: true });
 };
 
 // src/parts/Css/Css.js
@@ -188,7 +188,7 @@ var init_Assert = __esm({
 });
 
 // src/parts/ClipBoard/ClipBoard.js
-var readText, writeText;
+var readText, writeText, writeImage;
 var init_ClipBoard = __esm({
   "src/parts/ClipBoard/ClipBoard.js"() {
     "use strict";
@@ -200,6 +200,9 @@ var init_ClipBoard = __esm({
       string(text);
       await navigator.clipboard.writeText(text);
     };
+    writeImage = async (blob) => {
+      await navigator.clipboard.write([new ClipboardItem({ [blob.type]: blob })]);
+    };
   }
 });
 
@@ -215,6 +218,7 @@ var init_ClipBoard_ipc = __esm({
     init_ClipBoard();
     Commands3 = {
       "ClipBoard.readText": readText,
+      "ClipBoard.writeImage": writeImage,
       "ClipBoard.writeText": writeText
     };
   }
@@ -470,7 +474,7 @@ var init_Platform = __esm({
     state4 = {
       getAssetDir() {
         if (true) {
-          return "/4d80653";
+          return "/9b6f42d";
         }
         if (platform === "electron") {
           return "../../../../..";
@@ -716,6 +720,11 @@ var init_Download_ipc = __esm({
 });
 
 // src/parts/AriaAlert/AriaAlert.js
+var AriaAlert_exports = {};
+__export(AriaAlert_exports, {
+  alert: () => alert3,
+  state: () => state6
+});
 var state6, create$AriaAlert, setMessage, alert3;
 var init_AriaAlert = __esm({
   "src/parts/AriaAlert/AriaAlert.js"() {
@@ -1311,6 +1320,7 @@ var init_KeyBindings = __esm({
     handleKeyDown = (event) => {
       const identifier = getIdentifier(event);
       const matchingKeyBinding = getMatchingKeyBinding(identifier);
+      console.log({ identifier, matchingKeyBinding });
       if (!matchingKeyBinding) {
         return;
       }
@@ -1678,12 +1688,9 @@ var init_Menu = __esm({
       );
     };
     handleMouseEnter = (event) => {
-      const $Target = event.target;
-      const $Menu = $Target.closest(".Menu");
-      const x = event.clientX;
-      const y = event.clientY;
-      const timeStamp = event.timeStamp;
-      const index = findIndex2($Menu, $Target);
+      const { target, clientX, clientY, timeStamp } = event;
+      const $Menu = target.closest(".Menu");
+      const index = findIndex2($Menu, target);
       if (index === -1) {
         return;
       }
@@ -1692,8 +1699,8 @@ var init_Menu = __esm({
         "Menu.handleMouseEnter",
         level,
         index,
-        x,
-        y,
+        clientX,
+        clientY,
         timeStamp
       );
     };
@@ -1737,7 +1744,9 @@ var init_Menu = __esm({
         $Menu.children[newFocusedIndex].focus();
       }
     };
-    handleBackDropMouseDown = () => {
+    handleBackDropMouseDown = (event) => {
+      event.preventDefault();
+      event.stopPropagation();
       send("Menu.hide");
     };
     handleContextMenu = (event) => {
@@ -2262,9 +2271,10 @@ __export(SingleElementConditions_exports, {
   toHaveClass: () => toHaveClass,
   toHaveCss: () => toHaveCss,
   toHaveId: () => toHaveId,
-  toHaveText: () => toHaveText
+  toHaveText: () => toHaveText,
+  toHaveValue: () => toHaveValue
 });
-var toBeVisible, toHaveText, toHaveAttribute, toBeFocused, toHaveClass, toHaveId, toHaveCss;
+var toBeVisible, toHaveValue, toHaveText, toHaveAttribute, toBeFocused, toHaveClass, toHaveId, toHaveCss;
 var init_SingleElementConditions = __esm({
   "src/parts/TestFrameWork/SingleElementConditions.js"() {
     "use strict";
@@ -2274,6 +2284,9 @@ var init_SingleElementConditions = __esm({
       }
       return element.isConnected;
     };
+    toHaveValue = (element, { value }) => {
+      return element.value === value;
+    };
     toHaveText = (element, { text }) => {
       return element.textContent === text;
     };
@@ -2327,9 +2340,10 @@ __export(ConditionErrors_exports, {
   toHaveCount: () => toHaveCount2,
   toHaveCss: () => toHaveCss2,
   toHaveId: () => toHaveId2,
-  toHaveText: () => toHaveText2
+  toHaveText: () => toHaveText2,
+  toHaveValue: () => toHaveValue2
 });
-var toBeVisible2, printLocator, toHaveText2, toHaveAttribute2, toHaveCount2, toBeFocused2, toHaveClass2, toHaveId2, toBeHidden2, toHaveCss2;
+var toBeVisible2, toHaveValue2, printLocator, toHaveText2, toHaveAttribute2, toHaveCount2, toBeFocused2, toHaveClass2, toHaveId2, toBeHidden2, toHaveCss2;
 var init_ConditionErrors = __esm({
   "src/parts/TestFrameWork/ConditionErrors.js"() {
     "use strict";
@@ -2337,6 +2351,9 @@ var init_ConditionErrors = __esm({
     toBeVisible2 = (locator) => {
       return `expected selector to be visible ${locator._selector}`;
     };
+    toHaveValue2 = (locator, { value }) => {
+      return `expected selector ${locator._selector} to have value ${value}`;
+    };
     printLocator = (locator) => {
       if (locator._nth) {
         return `${locator._selector}:nth(${locator._nth})`;
@@ -2426,7 +2443,7 @@ var init_KeyBoardActions = __esm({
 });
 
 // src/parts/TestFrameWork/TestFrameWork.js
-var create$Overlay, showOverlay, Time, maxTimeout, Timeout, performAction, performKeyBoardAction, checkSingleElementCondition, checkMultiElementCondition;
+var create$Overlay, showOverlay, Time, maxTimeout, Timeout, performAction, performKeyBoardAction, AssertionError, checkSingleElementCondition, checkMultiElementCondition;
 var init_TestFrameWork = __esm({
   "src/parts/TestFrameWork/TestFrameWork.js"() {
     "use strict";
@@ -2524,6 +2541,12 @@ var init_TestFrameWork = __esm({
       const fn = KeyBoardActions_exports[fnName];
       fn(options);
     };
+    AssertionError = class extends Error {
+      constructor(message) {
+        super(message);
+        this.name = "AssertionError";
+      }
+    };
     checkSingleElementCondition = async (locator, fnName, options) => {
       const startTime = Time.getTimeStamp();
       const endTime = startTime + maxTimeout;
@@ -2544,7 +2567,7 @@ var init_TestFrameWork = __esm({
         currentTime = Time.getTimeStamp();
       }
       const message = ConditionErrors_exports[fn.name](locator, options);
-      throw new Error(message);
+      throw new AssertionError(message);
     };
     checkMultiElementCondition = async (locator, fnName, options) => {
       const startTime = Time.getTimeStamp();
@@ -2561,7 +2584,7 @@ var init_TestFrameWork = __esm({
         currentTime = Time.getTimeStamp();
       }
       const message = ConditionErrors_exports[fn.name](locator, options);
-      throw new Error(message);
+      throw new AssertionError(message);
     };
   }
 });
@@ -2587,7 +2610,7 @@ var init_TestFrameWork_ipc = __esm({
 });
 
 // src/parts/ViewletModuleId/ViewletModuleId.js
-var ActivityBar, Clock, DebugConsole, EditorCompletion, EditorImage, EditorPlainText, EditorText, Empty, Explorer, Extensions, ImagePreview2, Implementations, KeyBindings2, Main, Output, Panel2, Problems, QuickPick, References, RunAndDebug, Search, SideBar, SourceControl, StatusBar, Terminal, TitleBar;
+var ActivityBar, Clock, DebugConsole, EditorCompletion, EditorImage, EditorPlainText, EditorText, Empty, Explorer, Extensions, ImagePreview2, Implementations, KeyBindings2, Main, Output, Panel2, Problems, QuickPick, References, RunAndDebug, Search, SideBar, SourceControl, StatusBar, Terminal, TitleBar, EditorFindWidget;
 var init_ViewletModuleId = __esm({
   "src/parts/ViewletModuleId/ViewletModuleId.js"() {
     "use strict";
@@ -2617,6 +2640,7 @@ var init_ViewletModuleId = __esm({
     StatusBar = "StatusBar";
     Terminal = "Terminal";
     TitleBar = "TitleBar";
+    EditorFindWidget = "EditorFindWidget";
   }
 });
 
@@ -2809,7 +2833,7 @@ var init_ViewletExplorer = __esm({
       $Row.draggable = true;
       const $LabelText = document.createTextNode("");
       const $Label = document.createElement("div");
-      $Label.className = "TreeItemLabel";
+      $Label.className = "Label";
       $Label.append($LabelText);
       const $Icon = document.createElement("i");
       $Row.append($Icon, $Label);
@@ -2965,9 +2989,9 @@ var init_ViewletExplorer = __esm({
       $InputBox.remove();
       return $InputBox.value;
     };
-    showRenameInputBox = (state14, index, name19) => {
+    showRenameInputBox = (state14, index, name20) => {
       const $InputBox = create3();
-      $InputBox.value = name19;
+      $InputBox.value = name20;
       const $Dirent = state14.$Viewlet.children[index];
       $Dirent.replaceWith($InputBox);
       $InputBox.select();
@@ -4570,12 +4594,12 @@ var init_termterm = __esm({
     BUFFER_LINES = 200;
     noop = () => {
     };
-    createTerminal = (root, { handleInput: handleInput7, bell = noop, setWindowTitle = noop }) => {
+    createTerminal = (root, { handleInput: handleInput8, bell = noop, setWindowTitle = noop }) => {
       let focused = false;
       const handleKeyDown4 = (event) => {
         const transformedKey = transformKey(event);
         if (transformedKey) {
-          handleInput7(transformedKey);
+          handleInput8(transformedKey);
         }
       };
       const handleBeforeInput3 = (event) => {
@@ -4586,7 +4610,7 @@ var init_termterm = __esm({
         cursorStyle = 4;
         requestAnimationFrame(render3);
       };
-      const focus21 = () => {
+      const focus22 = () => {
         if (focused) {
           return;
         }
@@ -4609,7 +4633,7 @@ var init_termterm = __esm({
       textarea.addEventListener("beforeinput", handleBeforeInput3);
       root.onmousedown = (event) => {
         event.preventDefault();
-        focus21();
+        focus22();
       };
       textarea.onblur = blur;
       const WIDTH = COLS * CHAR_WIDTH$2;
@@ -4850,7 +4874,7 @@ var init_termterm = __esm({
       };
       return {
         write: write3,
-        focus: focus21,
+        focus: focus22,
         pasteText,
         writeText: pasteText,
         lines
@@ -4865,9 +4889,9 @@ var init_Terminal = __esm({
   "src/parts/Terminal/Terminal.js"() {
     "use strict";
     init_termterm();
-    create12 = ({ $Element, handleInput: handleInput7 }) => {
+    create12 = ({ $Element, handleInput: handleInput8 }) => {
       const state14 = {
-        terminal: createTerminal($Element, { handleInput: handleInput7 })
+        terminal: createTerminal($Element, { handleInput: handleInput8 })
       };
       return state14;
     };
@@ -4972,7 +4996,7 @@ var init_ViewletTerminal = __esm({
 });
 
 // src/parts/ViewletExtensions/ViewletExtensionsEvents.js
-var DEFAULT_ICON_SRC, handleScrollBarThumbMouseMove, handleScrollBarThumbMouseUp, handleScrollBarMouseDown, handleFocus4, getNodeIndex3, handleClick3, handleContextMenuMouse3, handleContextMenuKeyboard3, handleContextMenu4, handleWheel2, handleInput4, handleIconError;
+var DEFAULT_ICON_SRC, handleScrollBarThumbPointerMove, handleScrollBarThumbPointerUp, handleScrollBarPointerDown, handleFocus4, getNodeIndex3, handleClick3, handleContextMenuMouse3, handleContextMenuKeyboard3, handleContextMenu4, handleWheel2, handleInput4, handleIconError;
 var init_ViewletExtensionsEvents = __esm({
   "src/parts/ViewletExtensions/ViewletExtensionsEvents.js"() {
     "use strict";
@@ -4981,22 +5005,22 @@ var init_ViewletExtensionsEvents = __esm({
     init_RendererWorker();
     init_WheelEventType();
     DEFAULT_ICON_SRC = "/icons/extensionDefaultIcon.png";
-    handleScrollBarThumbMouseMove = (event) => {
-      const y = event.clientY;
+    handleScrollBarThumbPointerMove = (event) => {
+      const { clientY } = event;
       send(
         "Extensions.handleScrollBarMove",
-        y
+        clientY
       );
     };
-    handleScrollBarThumbMouseUp = () => {
-      window.removeEventListener("mousemove", handleScrollBarThumbMouseMove);
-      window.removeEventListener("mouseup", handleScrollBarThumbMouseUp);
+    handleScrollBarThumbPointerUp = () => {
+      window.removeEventListener("pointermove", handleScrollBarThumbPointerMove);
+      window.removeEventListener("pointerup", handleScrollBarThumbPointerUp);
     };
-    handleScrollBarMouseDown = (event) => {
+    handleScrollBarPointerDown = (event) => {
       const $Target = event.target;
       if ($Target.className === "ScrollBarThumb") {
-        window.addEventListener("mousemove", handleScrollBarThumbMouseMove);
-        window.addEventListener("mouseup", handleScrollBarThumbMouseUp);
+        window.addEventListener("pointermove", handleScrollBarThumbPointerMove);
+        window.addEventListener("pointerup", handleScrollBarThumbPointerUp);
       } else {
         const y = event.clientY;
         console.log({ y });
@@ -5172,7 +5196,7 @@ var init_ViewletExtensions = __esm({
       $ScrollBarThumb.className = "ScrollBarThumb";
       const $ScrollBar = document.createElement("div");
       $ScrollBar.className = "ScrollBarSmall";
-      $ScrollBar.onmousedown = handleScrollBarMouseDown;
+      $ScrollBar.onpointerdown = handleScrollBarPointerDown;
       $ScrollBar.append($ScrollBarThumb);
       const $ExtensionListWrapper = document.createElement("div");
       $ExtensionListWrapper.className = "ExtensionListWrapper";
@@ -5404,16 +5428,37 @@ var init_ViewletDebugConsole = __esm({
       };
     };
     refresh4 = (state14, context) => {
-      state14.$Viewlet.textContent = "Debug Console - Not implemented";
+      const { $Viewlet } = state14;
+      $Viewlet.textContent = "Debug Console - Not implemented";
     };
     focus7 = (state14) => {
-      state14.$Input.focus();
+      const { $Input } = state14;
+      $Input.focus();
     };
     dispose11 = (state14) => {
     };
   }
 });
 
+// src/parts/ViewletOutput/ViewletOutputEvents.js
+var handleChange;
+var init_ViewletOutputEvents = __esm({
+  "src/parts/ViewletOutput/ViewletOutputEvents.js"() {
+    "use strict";
+    init_RendererWorker();
+    handleChange = (event) => {
+      const $Target = event.target;
+      const value = $Target.value;
+      send(
+        "Viewlet.send",
+        "Output",
+        "setOutputChannel",
+        value
+      );
+    };
+  }
+});
+
 // src/parts/ViewletOutput/ViewletOutput.js
 var ViewletOutput_exports = {};
 __export(ViewletOutput_exports, {
@@ -5428,13 +5473,14 @@ __export(ViewletOutput_exports, {
   openFindWidget: () => openFindWidget,
   setOptions: () => setOptions
 });
-var create$Option, name8, handleChange, create16, setOptions, append2, clear, handleError3, focus8, openFindWidget, disposeFindWidget, dispose12;
+var create$Option, name8, create16, setOptions, append2, clear, handleError3, focus8, openFindWidget, disposeFindWidget, dispose12;
 var init_ViewletOutput = __esm({
   "src/parts/ViewletOutput/ViewletOutput.js"() {
     "use strict";
     init_RendererWorker();
     init_Focus();
     init_Assert();
+    init_ViewletOutputEvents();
     create$Option = (option) => {
       const $Option = document.createElement("option");
       $Option.value = option.file;
@@ -5442,16 +5488,6 @@ var init_ViewletOutput = __esm({
       return $Option;
     };
     name8 = "Output";
-    handleChange = (event) => {
-      const $Target = event.target;
-      const value = $Target.value;
-      send(
-        "Viewlet.send",
-        "Output",
-        "setOutputChannel",
-        value
-      );
-    };
     create16 = () => {
       const $ViewletOutputSelect = document.createElement("select");
       $ViewletOutputSelect.className = "ViewletOutputSelect";
@@ -5517,6 +5553,19 @@ var init_ViewletOutput = __esm({
   }
 });
 
+// src/parts/ViewletProblems/ViewletProblemsEvents.js
+var handleMouseDown3;
+var init_ViewletProblemsEvents = __esm({
+  "src/parts/ViewletProblems/ViewletProblemsEvents.js"() {
+    "use strict";
+    init_RendererWorker();
+    handleMouseDown3 = (event) => {
+      event.preventDefault();
+      send(7550, -1);
+    };
+  }
+});
+
 // src/parts/ViewletProblems/ViewletProblems.js
 var ViewletProblems_exports = {};
 __export(ViewletProblems_exports, {
@@ -5526,17 +5575,13 @@ __export(ViewletProblems_exports, {
   setFocusedIndex: () => setFocusedIndex3,
   setProblems: () => setProblems
 });
-var name9, handleMouseDown3, create17, setFocusedIndex3, setProblems, focus9;
+var name9, create17, setFocusedIndex3, setProblems, focus9;
 var init_ViewletProblems = __esm({
   "src/parts/ViewletProblems/ViewletProblems.js"() {
     "use strict";
     init_Assert();
-    init_RendererWorker();
+    init_ViewletProblemsEvents();
     name9 = "Problems";
-    handleMouseDown3 = (event) => {
-      event.preventDefault();
-      send(7550, -1);
-    };
     create17 = (problemsCount) => {
       const $Viewlet = document.createElement("div");
       $Viewlet.dataset.viewletId = "Problems";
@@ -5567,7 +5612,8 @@ var init_ViewletProblems = __esm({
       }
     };
     focus9 = (state14) => {
-      state14.$Viewlet.focus();
+      const { $Viewlet } = state14;
+      $Viewlet.focus();
     };
   }
 });
@@ -5603,6 +5649,24 @@ var init_ViewletEmpty = __esm({
   }
 });
 
+// src/parts/InputEventType/InputEventType.js
+var InsertText;
+var init_InputEventType = __esm({
+  "src/parts/InputEventType/InputEventType.js"() {
+    "use strict";
+    InsertText = "insertText";
+  }
+});
+
+// src/parts/MenuEntryId/MenuEntryId.js
+var Editor;
+var init_MenuEntryId = __esm({
+  "src/parts/MenuEntryId/MenuEntryId.js"() {
+    "use strict";
+    Editor = 3;
+  }
+});
+
 // src/parts/ModifierKey/ModifierKey.js
 var Ctrl, Alt, None2;
 var init_ModifierKey = __esm({
@@ -5614,674 +5678,682 @@ var init_ModifierKey = __esm({
   }
 });
 
-// src/parts/Editor/LayerCursor.js
-var create$Cursor, render$Cursor, render$CursorsLess, render$CursorsEqual, render$CursorsMore, render$Cursors, setCursors;
-var init_LayerCursor = __esm({
-  "src/parts/Editor/LayerCursor.js"() {
+// src/parts/Editor/EditorEvents.js
+var handleContextMenu5, handleFocus5, handleBlur3, handleBeforeInput, handleCompositionStart, handleCompositionUpdate, handleCompositionEnd, handleCut, handleSelectionMove, handleSelectionDone, getModifier2, handleSingleClick, handleDoubleClick, handleTripleClick, isRightClick, getTextNodeOffset, getTotalOffset, handleMouseDown4, handlePointerMove, handleWheel3, handlePaste, handleScrollBarThumbPointerMove2, handleScrollBarThumbPointerUp2, handleScrollBarThumbPointerDown, handleScrollBarMouseDown, handleScrollBarContextMenu;
+var init_EditorEvents = __esm({
+  "src/parts/Editor/EditorEvents.js"() {
     "use strict";
-    create$Cursor = () => {
-      const $Cursor = document.createElement("div");
-      $Cursor.className = "EditorCursor";
-      return $Cursor;
-    };
-    render$Cursor = ($Cursor, $Texts, cursor) => {
-      $Cursor.style.top = `${cursor.top}px`;
-      const range = document.createRange();
-      if (cursor.leftIndex === -1) {
-        console.warn("cursor left is negative");
-        $Cursor.style.left = "0px";
-        return;
-      }
-      const $Row = $Texts.children[cursor.topIndex];
-      if (!$Row) {
-        console.warn("no row", cursor, $Row);
-        return;
-      }
-      const $Node = $Row.children[cursor.leftIndex];
-      if (!$Node) {
-        console.warn("no node", cursor, $Row);
-        return;
-      }
-      if (cursor.leftIndex === 0 && cursor.remainingOffset === 0) {
-        $Cursor.style.left = "0px";
-      } else {
-        const $TextNode = $Node.firstChild;
-        range.setStart($TextNode, cursor.remainingOffset);
-        range.setEnd($TextNode, cursor.remainingOffset);
-        const rect = range.getBoundingClientRect();
-        const left = Math.round(rect.left);
-        $Cursor.style.left = `${left}px`;
-      }
+    init_Focus();
+    init_InputEventType();
+    init_MenuEntryId();
+    init_ModifierKey();
+    init_MouseEventType();
+    init_RendererWorker();
+    init_WheelEventType();
+    handleContextMenu5 = (event) => {
+      event.preventDefault();
+      const { clientX, clientY } = event;
+      send(
+        "ContextMenu.show",
+        clientX,
+        clientY,
+        Editor
+      );
     };
-    render$CursorsLess = ($Cursors, $Texts, cursors) => {
-      for (let i = 0; i < $Cursors.children.length; i++) {
-        render$Cursor($Cursors.children[i], $Texts, cursors[i]);
-      }
-      const fragment = document.createDocumentFragment();
-      for (let i = $Cursors.children.length; i < cursors.length; i++) {
-        const $Cursor = create$Cursor();
-        render$Cursor($Cursor, $Texts, cursors[i]);
-        fragment.append($Cursor);
-      }
-      $Cursors.append(fragment);
+    handleFocus5 = (event) => {
+      setFocus("EditorText");
     };
-    render$CursorsEqual = ($Cursors, $Texts, cursors) => {
-      for (let i = 0; i < cursors.length; i++) {
-        render$Cursor($Cursors.children[i], $Texts, cursors[i]);
-      }
+    handleBlur3 = (event) => {
+      send("Editor.blur");
     };
-    render$CursorsMore = ($Cursors, $Texts, cursors) => {
-      for (let i = 0; i < cursors.length; i++) {
-        render$Cursor($Cursors.children[i], $Texts, cursors[i]);
-      }
-      const diff = $Cursors.children.length - cursors.length;
-      for (let i = 0; i < diff; i++) {
-        $Cursors.lastChild.remove();
+    handleBeforeInput = (event) => {
+      event.preventDefault();
+      switch (event.inputType) {
+        case InsertText:
+          send(
+            "Editor.type",
+            event.data
+          );
+          break;
+        default:
+          break;
       }
     };
-    render$Cursors = ($Cursors, $Texts, cursors) => {
-      if ($Cursors.children.length < cursors.length) {
-        render$CursorsLess($Cursors, $Texts, cursors);
-      } else if ($Cursors.children.length === cursors.length) {
-        render$CursorsEqual($Cursors, $Texts, cursors);
-      } else {
-        render$CursorsMore($Cursors, $Texts, cursors);
-      }
+    handleCompositionStart = (event) => {
+      send(
+        "Editor.compositionStart",
+        event.data
+      );
     };
-    setCursors = (state14, cursors) => {
-      console.log({ cursors });
-      render$Cursors(state14.$LayerCursor, state14.$LayerText, cursors);
+    handleCompositionUpdate = (event) => {
+      send(
+        "Editor.compositionUpdate",
+        event.data
+      );
     };
-  }
-});
-
-// src/parts/Editor/LayerDiagnostics.js
-var create$Diagnostic, render$Diagnostic, render$DiagnosticsLess, render$DiagnosticsEqual, render$DiagnosticsMore, render$Diagnostics, setDiagnostics;
-var init_LayerDiagnostics = __esm({
-  "src/parts/Editor/LayerDiagnostics.js"() {
-    "use strict";
-    create$Diagnostic = () => {
-      const $Diagnostic = document.createElement("div");
-      $Diagnostic.className = "EditorDiagnostic";
-      return $Diagnostic;
+    handleCompositionEnd = (event) => {
+      send(
+        "Editor.compositionEnd",
+        event.data
+      );
     };
-    render$Diagnostic = ($Diagnostic, diagnostic) => {
-      $Diagnostic.style.top = `${diagnostic.top}px`;
-      $Diagnostic.style.left = `${diagnostic.left}px`;
-      $Diagnostic.style.width = `${diagnostic.width}px`;
-      $Diagnostic.style.height = `${diagnostic.height}px`;
+    handleCut = (event) => {
+      event.preventDefault();
+      send("Editor.cut");
     };
-    render$DiagnosticsLess = ($Diagnostics, diagnostics) => {
-      for (let i = 0; i < $Diagnostics.children.length; i++) {
-        render$Diagnostic($Diagnostics.children[i], diagnostics[i]);
-      }
-      const fragment = document.createDocumentFragment();
-      for (let i = $Diagnostics.children.length; i < diagnostics.length; i++) {
-        const $Diagnostic = create$Diagnostic();
-        render$Diagnostic($Diagnostic, diagnostics[i]);
-        fragment.append($Diagnostic);
+    handleSelectionMove = (event) => {
+      const x = event.clientX;
+      const y = event.clientY;
+      const totalOffset = getTotalOffset(event);
+      if (event.altKey) {
+        send(
+          "Editor.moveRectangleSelectionPx",
+          x,
+          y,
+          totalOffset
+        );
+      } else {
+        send(
+          "Editor.moveSelectionPx",
+          x,
+          y,
+          totalOffset
+        );
       }
-      $Diagnostics.append(fragment);
     };
-    render$DiagnosticsEqual = ($Diagnostics, diagnostics) => {
-      for (let i = 0; i < diagnostics.length; i++) {
-        render$Diagnostic($Diagnostics.children[i], diagnostics[i]);
-      }
+    handleSelectionDone = (event) => {
+      document.removeEventListener("mousemove", handleSelectionMove);
+      document.removeEventListener("mouseup", handleSelectionDone);
     };
-    render$DiagnosticsMore = ($Diagnostics, diagnostics) => {
-      for (let i = 0; i < diagnostics.length; i++) {
-        render$Diagnostic($Diagnostics.children[i], diagnostics[i]);
+    getModifier2 = (event) => {
+      if (event.ctrlKey) {
+        return Ctrl;
       }
-      const diff = $Diagnostics.children.length - diagnostics.length;
-      for (let i = 0; i < diff; i++) {
-        $Diagnostics.lastChild.remove();
+      if (event.altKey) {
+        return Alt;
       }
+      return None2;
     };
-    render$Diagnostics = ($Diagnostics, diagnostics) => {
-      if ($Diagnostics.children.length < diagnostics.length) {
-        render$DiagnosticsLess($Diagnostics, diagnostics);
-      } else if ($Diagnostics.children.length === diagnostics.length) {
-        render$DiagnosticsEqual($Diagnostics, diagnostics);
-      } else {
-        render$DiagnosticsMore($Diagnostics, diagnostics);
-      }
+    handleSingleClick = (event, x, y, offset) => {
+      const modifier = getModifier2(event);
+      send(
+        "Editor.handleSingleClick",
+        modifier,
+        x,
+        y,
+        offset
+      );
+      const $Target = event.target;
+      document.addEventListener("mousemove", handleSelectionMove, { passive: true });
+      document.addEventListener("mouseup", handleSelectionDone);
     };
-    setDiagnostics = (state14, diagnostics) => {
-      render$Diagnostics(state14.$LayerDiagnostics, diagnostics);
+    handleDoubleClick = (event, x, y, offset) => {
+      send(
+        "Editor.handleDoubleClick",
+        x,
+        y,
+        offset
+      );
     };
-  }
-});
-
-// src/parts/Editor/LayerScrollBar.js
-var setPosition, create$ScrollBarDiagnostic, render$ScrollBarDiagnostic, render$ScrollBarDiagnosticsLess, render$ScrollBarDiagnosticsEqual, render$ScrollBarDiagnosticsMore, render$ScrollBarDiagnostics, setDiagnostics2;
-var init_LayerScrollBar = __esm({
-  "src/parts/Editor/LayerScrollBar.js"() {
-    "use strict";
-    setPosition = (state14, scrollBarY, scrollBarHeight) => {
-      state14.$ScrollBarThumb.style.top = `${scrollBarY}px`;
-      state14.$ScrollBarThumb.style.height = `${scrollBarHeight}px`;
+    handleTripleClick = (event, x, y, offset) => {
+      send(
+        "Editor.handleTripleClick",
+        x,
+        y,
+        offset
+      );
     };
-    create$ScrollBarDiagnostic = () => {
-      const $ScrollBarDiagnostic = document.createElement("div");
-      $ScrollBarDiagnostic.className = "ScrollBarDiagnostic";
-      return $ScrollBarDiagnostic;
+    isRightClick = (event) => {
+      return event.button === RightClick;
     };
-    render$ScrollBarDiagnostic = ($ScrollBarDiagnostic, scrollBarDiagnostic) => {
-      $ScrollBarDiagnostic.style.top = `${scrollBarDiagnostic.top}px`;
+    getTextNodeOffset = (textNode) => {
+      let $Token = textNode.parentElement;
+      let offset = 0;
+      while ($Token.previousSibling) {
+        $Token = $Token.previousSibling;
+        offset += $Token.textContent.length;
+      }
+      return offset;
     };
-    render$ScrollBarDiagnosticsLess = ($ScrollBarDiagnostics, scrollBarDiagnostics) => {
-      for (let i = 0; i < $ScrollBarDiagnostics.children.length; i++) {
-        render$ScrollBarDiagnostic(
-          $ScrollBarDiagnostics.children[i],
-          scrollBarDiagnostics[i]
-        );
+    getTotalOffset = (event) => {
+      if (document.caretRangeFromPoint) {
+        const range = document.caretRangeFromPoint(event.clientX, event.clientY);
+        if (!range) {
+          return 0;
+        }
+        const textNode = range.startContainer;
+        const textNodeOffset = getTextNodeOffset(textNode);
+        const offset = range.startOffset;
+        const totalOffset = textNodeOffset + offset;
+        return totalOffset;
       }
-      const fragment = document.createDocumentFragment();
-      for (let i = $ScrollBarDiagnostics.children.length; i < scrollBarDiagnostics.length; i++) {
-        const $ScrollBarDiagnostic = create$ScrollBarDiagnostic();
-        render$ScrollBarDiagnostic($ScrollBarDiagnostic, scrollBarDiagnostics[i]);
-        fragment.append($ScrollBarDiagnostic);
+      if (document.caretPositionFromPoint) {
+        const range = document.caretPositionFromPoint(event.clientX, event.clientY);
+        if (!range) {
+          return 0;
+        }
+        const textNode = range.offsetNode;
+        const textNodeOffset = getTextNodeOffset(textNode);
+        const offset = range.offset;
+        const totalOffset = textNodeOffset + offset;
+        return totalOffset;
       }
-      $ScrollBarDiagnostics.append(fragment);
+      throw new Error("caret position is not supported");
     };
-    render$ScrollBarDiagnosticsEqual = ($ScrollBarDiagnostics, scrollBarDiagnostics) => {
-      for (let i = 0; i < scrollBarDiagnostics.length; i++) {
-        render$ScrollBarDiagnostic(
-          $ScrollBarDiagnostics.children[i],
-          scrollBarDiagnostics[i]
-        );
+    handleMouseDown4 = (event) => {
+      if (isRightClick(event)) {
+        return;
+      }
+      event.preventDefault();
+      const totalOffset = getTotalOffset(event);
+      const x = event.clientX;
+      const y = event.clientY;
+      switch (event.detail) {
+        case 1:
+          handleSingleClick(event, x, y, totalOffset);
+          break;
+        case 2:
+          handleDoubleClick(event, x, y, totalOffset);
+          break;
+        case 3:
+          handleTripleClick(event, x, y, totalOffset);
+          break;
+        default:
+          break;
       }
     };
-    render$ScrollBarDiagnosticsMore = ($ScrollBarDiagnostics, scrollBarDiagnostics) => {
-      for (let i = 0; i < scrollBarDiagnostics.length; i++) {
-        render$ScrollBarDiagnostic(
-          $ScrollBarDiagnostics.children[i],
-          scrollBarDiagnostics[i]
+    handlePointerMove = (event) => {
+      const x = event.clientX;
+      const y = event.clientY;
+      if (event.altKey) {
+        const offset = getTotalOffset(event);
+        send(
+          "Editor.handleMouseMoveWithAltKey",
+          x,
+          y,
+          offset
         );
       }
-      const diff = $ScrollBarDiagnostics.children.length - scrollBarDiagnostics.length;
-      for (let i = 0; i < diff; i++) {
-        $ScrollBarDiagnostics.lastChild.remove();
-      }
     };
-    render$ScrollBarDiagnostics = ($ScrollBarDiagnostics, scrollBarDiagnostics) => {
-      if ($ScrollBarDiagnostics.children.length < scrollBarDiagnostics.length) {
-        render$ScrollBarDiagnosticsLess($ScrollBarDiagnostics, scrollBarDiagnostics);
-      } else if ($ScrollBarDiagnostics.children.length === scrollBarDiagnostics.length) {
-        render$ScrollBarDiagnosticsEqual(
-          $ScrollBarDiagnostics,
-          scrollBarDiagnostics
-        );
-      } else {
-        render$ScrollBarDiagnosticsMore($ScrollBarDiagnostics, scrollBarDiagnostics);
+    handleWheel3 = (event) => {
+      const { deltaMode, deltaY } = event;
+      switch (deltaMode) {
+        case DomDeltaLine:
+          send(
+            "Editor.setDeltaY",
+            deltaY
+          );
+          break;
+        case DomDeltaPixel:
+          send(
+            "Editor.setDeltaY",
+            deltaY
+          );
+          break;
+        default:
+          break;
       }
     };
-    setDiagnostics2 = (editor, scrollBarDiagnostics) => {
-      render$ScrollBarDiagnostics(
-        editor.$ScrollBarDiagnostics,
-        scrollBarDiagnostics
+    handlePaste = (event) => {
+      event.preventDefault();
+      const text = event.clipboardData.getData("text");
+      send("Editor.paste", text);
+    };
+    handleScrollBarThumbPointerMove2 = (event) => {
+      const { clientY } = event;
+      send(
+        "Editor.handleScrollBarMove",
+        clientY
+      );
+    };
+    handleScrollBarThumbPointerUp2 = (event) => {
+      const { target, pointerId } = event;
+      target.releasePointerCapture(pointerId);
+      target.removeEventListener("pointermove", handleScrollBarThumbPointerMove2);
+      target.removeEventListener("pointerup", handleScrollBarThumbPointerUp2);
+    };
+    handleScrollBarThumbPointerDown = (event) => {
+      const { target, pointerId } = event;
+      target.setPointerCapture(pointerId);
+      target.addEventListener("pointermove", handleScrollBarThumbPointerMove2, {
+        passive: false
+      });
+      target.addEventListener("pointerup", handleScrollBarThumbPointerUp2);
+    };
+    handleScrollBarMouseDown = (event) => {
+      event.preventDefault();
+      const y = event.clientY;
+      send(
+        "Editor.handleScrollBarClick",
+        y
       );
     };
+    handleScrollBarContextMenu = (event) => {
+      event.preventDefault();
+      event.stopPropagation();
+    };
   }
 });
 
-// src/parts/Editor/LayerSelections.js
-var create$Selection, render$Selection, render$SelectionsLess, render$SelectionsEqual, render$SelectionsMore, render$Selections, setSelections;
-var init_LayerSelections = __esm({
-  "src/parts/Editor/LayerSelections.js"() {
+// src/parts/Editor/LayerCursor.js
+var create$Cursor, render$Cursor, render$CursorsLess, render$CursorsEqual, render$CursorsMore, render$Cursors, setCursors;
+var init_LayerCursor = __esm({
+  "src/parts/Editor/LayerCursor.js"() {
     "use strict";
-    init_Platform();
-    init_Assert();
-    create$Selection = () => {
-      const $Selection = document.createElement("div");
-      $Selection.className = "EditorSelection";
-      return $Selection;
-    };
-    render$Selection = ($Selection, selections, i) => {
-      object($Selection);
-      number(i);
-      const top = selections[i * 4];
-      const left = selections[i * 4 + 1];
-      const width = selections[i * 4 + 2];
-      const height = selections[i * 4 + 3];
-      $Selection.style.top = `${top}px`;
-      $Selection.style.left = `${left}px`;
-      $Selection.style.width = `${width}px`;
-      $Selection.style.height = `${height}px`;
+    create$Cursor = () => {
+      const $Cursor = document.createElement("div");
+      $Cursor.className = "EditorCursor";
+      return $Cursor;
     };
-    render$SelectionsLess = ($Selections, childCount, selections, selectionCount) => {
-      for (let i = 0, j = 0; i < childCount; i++, j += 4) {
-        render$Selection($Selections.children[i], selections, i);
-      }
-      const fragment = document.createDocumentFragment();
-      for (let i = childCount; i < selectionCount; i++) {
-        const $Selection = create$Selection();
-        render$Selection($Selection, selections, i);
-        fragment.append($Selection);
+    render$Cursor = ($Cursor, $Texts, cursor) => {
+      $Cursor.style.top = `${cursor.top}px`;
+      const range = document.createRange();
+      if (cursor.leftIndex === -1) {
+        console.warn("cursor left is negative");
+        $Cursor.style.left = "0px";
+        return;
       }
-      $Selections.append(fragment);
-    };
-    render$SelectionsEqual = ($Selections, childCount, selections, selectionCount) => {
-      for (let i = 0; i < selectionCount; i++) {
-        render$Selection($Selections.children[i], selections, i);
+      const $Row = $Texts.children[cursor.topIndex];
+      if (!$Row) {
+        console.warn("no row", cursor, $Row);
+        return;
       }
-    };
-    render$SelectionsMore = ($Selections, childCount, selections, selectionCount) => {
-      for (let i = 0; i < selectionCount; i++) {
-        render$Selection($Selections.children[i], selections, i);
+      const $Node = $Row.children[cursor.leftIndex];
+      if (!$Node) {
+        console.warn("no node", cursor, $Row);
+        return;
       }
-      const diff = childCount - selectionCount;
+      if (cursor.leftIndex === 0 && cursor.remainingOffset === 0) {
+        $Cursor.style.left = "0px";
+      } else {
+        const $TextNode = $Node.firstChild;
+        range.setStart($TextNode, cursor.remainingOffset);
+        range.setEnd($TextNode, cursor.remainingOffset);
+        const rect = range.getBoundingClientRect();
+        const left = Math.round(rect.left);
+        $Cursor.style.left = `${left}px`;
+      }
+    };
+    render$CursorsLess = ($Cursors, $Texts, cursors) => {
+      for (let i = 0; i < $Cursors.children.length; i++) {
+        render$Cursor($Cursors.children[i], $Texts, cursors[i]);
+      }
+      const fragment = document.createDocumentFragment();
+      for (let i = $Cursors.children.length; i < cursors.length; i++) {
+        const $Cursor = create$Cursor();
+        render$Cursor($Cursor, $Texts, cursors[i]);
+        fragment.append($Cursor);
+      }
+      $Cursors.append(fragment);
+    };
+    render$CursorsEqual = ($Cursors, $Texts, cursors) => {
+      for (let i = 0; i < cursors.length; i++) {
+        render$Cursor($Cursors.children[i], $Texts, cursors[i]);
+      }
+    };
+    render$CursorsMore = ($Cursors, $Texts, cursors) => {
+      for (let i = 0; i < cursors.length; i++) {
+        render$Cursor($Cursors.children[i], $Texts, cursors[i]);
+      }
+      const diff = $Cursors.children.length - cursors.length;
       for (let i = 0; i < diff; i++) {
-        $Selections.lastChild.remove();
+        $Cursors.lastChild.remove();
       }
     };
-    render$Selections = ($Selections, selections) => {
-      const selectionsCount = selections.length / 4;
-      const childCount = $Selections.children.length;
-      if (childCount < selectionsCount) {
-        render$SelectionsLess($Selections, childCount, selections, selectionsCount);
-      } else if (childCount === selectionsCount) {
-        render$SelectionsEqual($Selections, childCount, selections, selectionsCount);
+    render$Cursors = ($Cursors, $Texts, cursors) => {
+      if ($Cursors.children.length < cursors.length) {
+        render$CursorsLess($Cursors, $Texts, cursors);
+      } else if ($Cursors.children.length === cursors.length) {
+        render$CursorsEqual($Cursors, $Texts, cursors);
       } else {
-        render$SelectionsMore($Selections, childCount, selections, selectionsCount);
+        render$CursorsMore($Cursors, $Texts, cursors);
       }
     };
-    setSelections = (state14, selections) => {
-      render$Selections(state14.$LayerSelections, selections);
+    setCursors = (state14, cursors) => {
+      render$Cursors(state14.$LayerCursor, state14.$LayerText, cursors);
     };
   }
 });
 
-// src/parts/Editor/LayerText.js
-var create$Row3, create$Token, render$Token, render$LineLess, render$LineEqual, render$LineMore, render$Line, render$LinesLess, render$LinesEqual, render$LinesMore, render$Lines, setLineInfos;
-var init_LayerText = __esm({
-  "src/parts/Editor/LayerText.js"() {
+// src/parts/Editor/LayerDiagnostics.js
+var create$Diagnostic, render$Diagnostic, render$DiagnosticsLess, render$DiagnosticsEqual, render$DiagnosticsMore, render$Diagnostics, setDiagnostics;
+var init_LayerDiagnostics = __esm({
+  "src/parts/Editor/LayerDiagnostics.js"() {
     "use strict";
-    init_Assert();
-    create$Row3 = () => {
-      const $Row = document.createElement("div");
-      $Row.className = "EditorRow";
-      return $Row;
-    };
-    create$Token = () => {
-      const $Token = document.createElement("span");
-      $Token.className = "Token";
-      return $Token;
+    create$Diagnostic = () => {
+      const $Diagnostic = document.createElement("div");
+      $Diagnostic.className = "EditorDiagnostic";
+      return $Diagnostic;
     };
-    render$Token = ($Token, text, className) => {
-      $Token.className = className;
-      if ($Token.firstChild) {
-        $Token.firstChild.nodeValue = text;
-      } else {
-        $Token.textContent = text;
-      }
+    render$Diagnostic = ($Diagnostic, diagnostic) => {
+      $Diagnostic.style.top = `${diagnostic.top}px`;
+      $Diagnostic.style.left = `${diagnostic.left}px`;
+      $Diagnostic.style.width = `${diagnostic.width}px`;
+      $Diagnostic.style.height = `${diagnostic.height}px`;
     };
-    render$LineLess = ($Line, lineInfo) => {
-      let i = 0;
-      while (i < $Line.children.length * 2) {
-        const text = lineInfo[i++];
-        const className = lineInfo[i++];
-        render$Token($Line.children[i / 2 - 1], text, className);
+    render$DiagnosticsLess = ($Diagnostics, diagnostics) => {
+      for (let i = 0; i < $Diagnostics.children.length; i++) {
+        render$Diagnostic($Diagnostics.children[i], diagnostics[i]);
       }
       const fragment = document.createDocumentFragment();
-      while (i < lineInfo.length) {
-        const text = lineInfo[i++];
-        const className = lineInfo[i++];
-        const $Token = create$Token();
-        render$Token($Token, text, className);
-        fragment.append($Token);
+      for (let i = $Diagnostics.children.length; i < diagnostics.length; i++) {
+        const $Diagnostic = create$Diagnostic();
+        render$Diagnostic($Diagnostic, diagnostics[i]);
+        fragment.append($Diagnostic);
       }
-      $Line.append(fragment);
+      $Diagnostics.append(fragment);
     };
-    render$LineEqual = ($Line, lineInfo) => {
-      let i = 0;
-      while (i < lineInfo.length) {
-        const text = lineInfo[i++];
-        const className = lineInfo[i++];
-        render$Token($Line.children[i / 2 - 1], text, className);
+    render$DiagnosticsEqual = ($Diagnostics, diagnostics) => {
+      for (let i = 0; i < diagnostics.length; i++) {
+        render$Diagnostic($Diagnostics.children[i], diagnostics[i]);
       }
     };
-    render$LineMore = ($Line, lineInfo) => {
-      let i = 0;
-      while (i < lineInfo.length) {
-        const text = lineInfo[i++];
-        const className = lineInfo[i++];
-        render$Token($Line.children[i / 2 - 1], text, className);
+    render$DiagnosticsMore = ($Diagnostics, diagnostics) => {
+      for (let i = 0; i < diagnostics.length; i++) {
+        render$Diagnostic($Diagnostics.children[i], diagnostics[i]);
       }
-      const diff = $Line.children.length - lineInfo.length / 2;
-      for (let i2 = lineInfo.length; i2 < lineInfo.length + diff; i2++) {
-        $Line.lastChild.remove();
+      const diff = $Diagnostics.children.length - diagnostics.length;
+      for (let i = 0; i < diff; i++) {
+        $Diagnostics.lastChild.remove();
       }
     };
-    render$Line = ($Line, lineInfo) => {
-      if ($Line.children.length < lineInfo.length / 2) {
-        render$LineLess($Line, lineInfo);
-      } else if ($Line.children.length === lineInfo.length / 2) {
-        render$LineEqual($Line, lineInfo);
+    render$Diagnostics = ($Diagnostics, diagnostics) => {
+      if ($Diagnostics.children.length < diagnostics.length) {
+        render$DiagnosticsLess($Diagnostics, diagnostics);
+      } else if ($Diagnostics.children.length === diagnostics.length) {
+        render$DiagnosticsEqual($Diagnostics, diagnostics);
       } else {
-        render$LineMore($Line, lineInfo);
+        render$DiagnosticsMore($Diagnostics, diagnostics);
       }
     };
-    render$LinesLess = ($Lines, lineInfos) => {
-      for (let i = 0; i < $Lines.children.length; i++) {
-        render$Line($Lines.children[i], lineInfos[i]);
+    setDiagnostics = (state14, diagnostics) => {
+      render$Diagnostics(state14.$LayerDiagnostics, diagnostics);
+    };
+  }
+});
+
+// src/parts/Editor/LayerScrollBar.js
+var setPosition, create$ScrollBarDiagnostic, render$ScrollBarDiagnostic, render$ScrollBarDiagnosticsLess, render$ScrollBarDiagnosticsEqual, render$ScrollBarDiagnosticsMore, render$ScrollBarDiagnostics, setDiagnostics2;
+var init_LayerScrollBar = __esm({
+  "src/parts/Editor/LayerScrollBar.js"() {
+    "use strict";
+    setPosition = (state14, scrollBarY, scrollBarHeight) => {
+      state14.$ScrollBarThumb.style.top = `${scrollBarY}px`;
+      state14.$ScrollBarThumb.style.height = `${scrollBarHeight}px`;
+    };
+    create$ScrollBarDiagnostic = () => {
+      const $ScrollBarDiagnostic = document.createElement("div");
+      $ScrollBarDiagnostic.className = "ScrollBarDiagnostic";
+      return $ScrollBarDiagnostic;
+    };
+    render$ScrollBarDiagnostic = ($ScrollBarDiagnostic, scrollBarDiagnostic) => {
+      $ScrollBarDiagnostic.style.top = `${scrollBarDiagnostic.top}px`;
+    };
+    render$ScrollBarDiagnosticsLess = ($ScrollBarDiagnostics, scrollBarDiagnostics) => {
+      for (let i = 0; i < $ScrollBarDiagnostics.children.length; i++) {
+        render$ScrollBarDiagnostic(
+          $ScrollBarDiagnostics.children[i],
+          scrollBarDiagnostics[i]
+        );
       }
       const fragment = document.createDocumentFragment();
-      for (let i = $Lines.children.length; i < lineInfos.length; i++) {
-        const $Line = create$Row3();
-        render$Line($Line, lineInfos[i]);
-        fragment.append($Line);
+      for (let i = $ScrollBarDiagnostics.children.length; i < scrollBarDiagnostics.length; i++) {
+        const $ScrollBarDiagnostic = create$ScrollBarDiagnostic();
+        render$ScrollBarDiagnostic($ScrollBarDiagnostic, scrollBarDiagnostics[i]);
+        fragment.append($ScrollBarDiagnostic);
       }
-      $Lines.append(fragment);
+      $ScrollBarDiagnostics.append(fragment);
     };
-    render$LinesEqual = ($Lines, lineInfos) => {
-      for (let i = 0; i < lineInfos.length; i++) {
-        render$Line($Lines.children[i], lineInfos[i]);
+    render$ScrollBarDiagnosticsEqual = ($ScrollBarDiagnostics, scrollBarDiagnostics) => {
+      for (let i = 0; i < scrollBarDiagnostics.length; i++) {
+        render$ScrollBarDiagnostic(
+          $ScrollBarDiagnostics.children[i],
+          scrollBarDiagnostics[i]
+        );
       }
     };
-    render$LinesMore = ($Lines, lineInfos) => {
-      for (let i = 0; i < lineInfos.length; i++) {
-        render$Line($Lines.children[i], lineInfos[i]);
+    render$ScrollBarDiagnosticsMore = ($ScrollBarDiagnostics, scrollBarDiagnostics) => {
+      for (let i = 0; i < scrollBarDiagnostics.length; i++) {
+        render$ScrollBarDiagnostic(
+          $ScrollBarDiagnostics.children[i],
+          scrollBarDiagnostics[i]
+        );
       }
-      const diff = $Lines.children.length - lineInfos.length;
-      for (let i = lineInfos.length; i < lineInfos.length + diff; i++) {
-        $Lines.lastChild.remove();
+      const diff = $ScrollBarDiagnostics.children.length - scrollBarDiagnostics.length;
+      for (let i = 0; i < diff; i++) {
+        $ScrollBarDiagnostics.lastChild.remove();
       }
     };
-    render$Lines = ($Lines, lineInfos) => {
-      object($Lines);
-      array(lineInfos);
-      if ($Lines.children.length < lineInfos.length) {
-        render$LinesLess($Lines, lineInfos);
-      } else if ($Lines.children.length === lineInfos.length) {
-        render$LinesEqual($Lines, lineInfos);
+    render$ScrollBarDiagnostics = ($ScrollBarDiagnostics, scrollBarDiagnostics) => {
+      if ($ScrollBarDiagnostics.children.length < scrollBarDiagnostics.length) {
+        render$ScrollBarDiagnosticsLess($ScrollBarDiagnostics, scrollBarDiagnostics);
+      } else if ($ScrollBarDiagnostics.children.length === scrollBarDiagnostics.length) {
+        render$ScrollBarDiagnosticsEqual(
+          $ScrollBarDiagnostics,
+          scrollBarDiagnostics
+        );
       } else {
-        render$LinesMore($Lines, lineInfos);
+        render$ScrollBarDiagnosticsMore($ScrollBarDiagnostics, scrollBarDiagnostics);
       }
     };
-    setLineInfos = (state14, lineInfos) => {
-      render$Lines(state14.$LayerText, lineInfos);
+    setDiagnostics2 = (editor, scrollBarDiagnostics) => {
+      render$ScrollBarDiagnostics(
+        editor.$ScrollBarDiagnostics,
+        scrollBarDiagnostics
+      );
     };
   }
 });
 
-// src/parts/InputEventType/InputEventType.js
-var InsertText;
-var init_InputEventType = __esm({
-  "src/parts/InputEventType/InputEventType.js"() {
-    "use strict";
-    InsertText = "insertText";
-  }
-});
-
-// src/parts/Editor/Editor.js
-var Editor_exports = {};
-__export(Editor_exports, {
-  create: () => create19,
-  dispose: () => dispose14,
-  focus: () => focus11,
-  mount: () => mount,
-  renderCursors: () => renderCursors,
-  renderDiagnostics: () => renderDiagnostics,
-  renderSelections: () => renderSelections,
-  renderTextAndCursors: () => renderTextAndCursors,
-  renderTextAndCursorsAndSelections: () => renderTextAndCursorsAndSelections,
-  setLanguageId: () => setLanguageId,
-  setScrollBar: () => setScrollBar2,
-  setSelections: () => setSelections2,
-  setSettings: () => setSettings,
-  setText: () => setText
-});
-var handleContextMenu5, handleFocus5, handleBlur3, handleBeforeInput, handleCompositionStart, handleCompositionUpdate, handleCompositionEnd, handleCut, handleSelectionMove, handleSelectionDone, getModifier2, handleSingleClick, handleDoubleClick, handleTripleClick, isRightClick, getTextNodeOffset, getTotalOffset, handleMouseDown4, handleMouseMove, handleWheel3, handlePaste, handleScrollBarThumbMouseMove2, handleScrollBarThumbMouseUp2, handleScrollBarThumbMouseDown, handleScrollBarMouseDown2, create19, setText, setSettings, setScrollBar2, renderCursors, renderSelections, renderTextAndCursors, setSelections2, renderTextAndCursorsAndSelections, mount, dispose14, focus11, setLanguageId, renderDiagnostics;
-var init_Editor = __esm({
-  "src/parts/Editor/Editor.js"() {
+// src/parts/Editor/LayerSelections.js
+var create$Selection, render$Selection, render$SelectionsLess, render$SelectionsEqual, render$SelectionsMore, render$Selections, setSelections;
+var init_LayerSelections = __esm({
+  "src/parts/Editor/LayerSelections.js"() {
     "use strict";
-    init_Assert();
-    init_Focus();
-    init_ModifierKey();
-    init_MouseEventType();
     init_Platform();
-    init_RendererWorker();
-    init_LayerCursor();
-    init_LayerDiagnostics();
-    init_LayerScrollBar();
-    init_LayerSelections();
-    init_LayerText();
-    init_WheelEventType();
-    init_InputEventType();
-    handleContextMenu5 = (event) => {
-      event.preventDefault();
-      const x = event.clientX;
-      const y = event.clientY;
-      send(
-        "ContextMenu.show",
-        x,
-        y,
-        "editor"
-      );
-    };
-    handleFocus5 = (event) => {
-      setFocus("EditorText");
+    init_Assert();
+    create$Selection = () => {
+      const $Selection = document.createElement("div");
+      $Selection.className = "EditorSelection";
+      return $Selection;
     };
-    handleBlur3 = (event) => {
-      send("Editor.blur");
+    render$Selection = ($Selection, selections, i) => {
+      object($Selection);
+      number(i);
+      const top = selections[i * 4];
+      const left = selections[i * 4 + 1];
+      const width = selections[i * 4 + 2];
+      const height = selections[i * 4 + 3];
+      $Selection.style.top = `${top}px`;
+      $Selection.style.left = `${left}px`;
+      $Selection.style.width = `${width}px`;
+      $Selection.style.height = `${height}px`;
     };
-    handleBeforeInput = (event) => {
-      event.preventDefault();
-      switch (event.inputType) {
-        case InsertText:
-          send(
-            "Editor.type",
-            event.data
-          );
-          break;
-        default:
-          break;
+    render$SelectionsLess = ($Selections, childCount, selections, selectionCount) => {
+      for (let i = 0, j = 0; i < childCount; i++, j += 4) {
+        render$Selection($Selections.children[i], selections, i);
       }
-    };
-    handleCompositionStart = (event) => {
-      send(
-        "Editor.compositionStart",
-        event.data
-      );
-    };
-    handleCompositionUpdate = (event) => {
-      send(
-        "Editor.compositionUpdate",
-        event.data
-      );
-    };
-    handleCompositionEnd = (event) => {
-      send(
-        "Editor.compositionEnd",
-        event.data
-      );
-    };
-    handleCut = (event) => {
-      event.preventDefault();
-      send("Editor.cut");
-    };
-    handleSelectionMove = (event) => {
-      const x = event.clientX;
-      const y = event.clientY;
-      const totalOffset = getTotalOffset(event);
-      if (event.altKey) {
-        send(
-          "Editor.moveRectangleSelectionPx",
-          x,
-          y,
-          totalOffset
-        );
-      } else {
-        send(
-          "Editor.moveSelectionPx",
-          x,
-          y,
-          totalOffset
-        );
+      const fragment = document.createDocumentFragment();
+      for (let i = childCount; i < selectionCount; i++) {
+        const $Selection = create$Selection();
+        render$Selection($Selection, selections, i);
+        fragment.append($Selection);
       }
+      $Selections.append(fragment);
     };
-    handleSelectionDone = (event) => {
-      document.removeEventListener("mousemove", handleSelectionMove);
-      document.removeEventListener("mouseup", handleSelectionDone);
+    render$SelectionsEqual = ($Selections, childCount, selections, selectionCount) => {
+      for (let i = 0; i < selectionCount; i++) {
+        render$Selection($Selections.children[i], selections, i);
+      }
     };
-    getModifier2 = (event) => {
-      if (event.ctrlKey) {
-        return Ctrl;
+    render$SelectionsMore = ($Selections, childCount, selections, selectionCount) => {
+      for (let i = 0; i < selectionCount; i++) {
+        render$Selection($Selections.children[i], selections, i);
       }
-      if (event.altKey) {
-        return Alt;
+      const diff = childCount - selectionCount;
+      for (let i = 0; i < diff; i++) {
+        $Selections.lastChild.remove();
       }
-      return None2;
     };
-    handleSingleClick = (event, x, y, offset) => {
-      console.log("click", { x, y, offset });
-      const modifier = getModifier2(event);
-      send(
-        "Editor.handleSingleClick",
-        modifier,
-        x,
-        y,
-        offset
-      );
-      const $Target = event.target;
-      document.addEventListener("mousemove", handleSelectionMove, { passive: true });
-      document.addEventListener("mouseup", handleSelectionDone);
+    render$Selections = ($Selections, selections) => {
+      const selectionsCount = selections.length / 4;
+      const childCount = $Selections.children.length;
+      if (childCount < selectionsCount) {
+        render$SelectionsLess($Selections, childCount, selections, selectionsCount);
+      } else if (childCount === selectionsCount) {
+        render$SelectionsEqual($Selections, childCount, selections, selectionsCount);
+      } else {
+        render$SelectionsMore($Selections, childCount, selections, selectionsCount);
+      }
     };
-    handleDoubleClick = (event, x, y, offset) => {
-      send(
-        "Editor.handleDoubleClick",
-        x,
-        y,
-        offset
-      );
+    setSelections = (state14, selections) => {
+      render$Selections(state14.$LayerSelections, selections);
     };
-    handleTripleClick = (event, x, y, offset) => {
-      send(
-        "Editor.handleTripleClick",
-        x,
-        y,
-        offset
-      );
+  }
+});
+
+// src/parts/Editor/LayerText.js
+var create$Row3, create$Token, render$Token, render$LineLess, render$LineEqual, render$LineMore, render$Line, render$LinesLess, render$LinesEqual, render$LinesMore, render$Lines, setLineInfos;
+var init_LayerText = __esm({
+  "src/parts/Editor/LayerText.js"() {
+    "use strict";
+    init_Assert();
+    create$Row3 = () => {
+      const $Row = document.createElement("div");
+      $Row.className = "EditorRow";
+      return $Row;
     };
-    isRightClick = (event) => {
-      return event.button === RightClick;
+    create$Token = () => {
+      const $Token = document.createElement("span");
+      $Token.className = "Token";
+      return $Token;
     };
-    getTextNodeOffset = (textNode) => {
-      let $Token = textNode.parentElement;
-      let offset = 0;
-      while ($Token.previousSibling) {
-        $Token = $Token.previousSibling;
-        offset += $Token.textContent.length;
+    render$Token = ($Token, text, className) => {
+      $Token.className = className;
+      if ($Token.firstChild) {
+        $Token.firstChild.nodeValue = text;
+      } else {
+        $Token.textContent = text;
       }
-      return offset;
     };
-    getTotalOffset = (event) => {
-      if (document.caretRangeFromPoint) {
-        const range = document.caretRangeFromPoint(event.clientX, event.clientY);
-        if (!range) {
-          return 0;
-        }
-        const textNode = range.startContainer;
-        const textNodeOffset = getTextNodeOffset(textNode);
-        const offset = range.startOffset;
-        const totalOffset = textNodeOffset + offset;
-        return totalOffset;
+    render$LineLess = ($Line, lineInfo) => {
+      let i = 0;
+      while (i < $Line.children.length * 2) {
+        const text = lineInfo[i++];
+        const className = lineInfo[i++];
+        render$Token($Line.children[i / 2 - 1], text, className);
       }
-      if (document.caretPositionFromPoint) {
-        const range = document.caretPositionFromPoint(event.clientX, event.clientY);
-        if (!range) {
-          return 0;
-        }
-        const textNode = range.offsetNode;
-        const textNodeOffset = getTextNodeOffset(textNode);
-        const offset = range.offset;
-        const totalOffset = textNodeOffset + offset;
-        return totalOffset;
+      const fragment = document.createDocumentFragment();
+      while (i < lineInfo.length) {
+        const text = lineInfo[i++];
+        const className = lineInfo[i++];
+        const $Token = create$Token();
+        render$Token($Token, text, className);
+        fragment.append($Token);
       }
-      throw new Error("caret position is not supported");
+      $Line.append(fragment);
     };
-    handleMouseDown4 = (event) => {
-      if (isRightClick(event)) {
-        return;
-      }
-      event.preventDefault();
-      const totalOffset = getTotalOffset(event);
-      const x = event.clientX;
-      const y = event.clientY;
-      console.log("detail", event.detail);
-      switch (event.detail) {
-        case 1:
-          handleSingleClick(event, x, y, totalOffset);
-          break;
-        case 2:
-          handleDoubleClick(event, x, y, totalOffset);
-          break;
-        case 3:
-          handleTripleClick(event, x, y, totalOffset);
-          break;
-        default:
-          break;
+    render$LineEqual = ($Line, lineInfo) => {
+      let i = 0;
+      while (i < lineInfo.length) {
+        const text = lineInfo[i++];
+        const className = lineInfo[i++];
+        render$Token($Line.children[i / 2 - 1], text, className);
       }
     };
-    handleMouseMove = (event) => {
-      const x = event.clientX;
-      const y = event.clientY;
-      if (event.altKey) {
-        const offset = getTotalOffset(event);
-        send(
-          "Editor.handleMouseMoveWithAltKey",
-          x,
-          y,
-          offset
-        );
+    render$LineMore = ($Line, lineInfo) => {
+      let i = 0;
+      while (i < lineInfo.length) {
+        const text = lineInfo[i++];
+        const className = lineInfo[i++];
+        render$Token($Line.children[i / 2 - 1], text, className);
+      }
+      const diff = $Line.children.length - lineInfo.length / 2;
+      for (let i2 = lineInfo.length; i2 < lineInfo.length + diff; i2++) {
+        $Line.lastChild.remove();
       }
     };
-    handleWheel3 = (event) => {
-      switch (event.deltaMode) {
-        case DomDeltaLine:
-          send(
-            "Editor.setDeltaY",
-            event.deltaY
-          );
-          break;
-        case DomDeltaPixel:
-          send(
-            "Editor.setDeltaY",
-            event.deltaY
-          );
-          break;
-        default:
-          break;
+    render$Line = ($Line, lineInfo) => {
+      if ($Line.children.length < lineInfo.length / 2) {
+        render$LineLess($Line, lineInfo);
+      } else if ($Line.children.length === lineInfo.length / 2) {
+        render$LineEqual($Line, lineInfo);
+      } else {
+        render$LineMore($Line, lineInfo);
       }
     };
-    handlePaste = (event) => {
-      event.preventDefault();
-      const text = event.clipboardData.getData("text");
-      send("Editor.paste", text);
+    render$LinesLess = ($Lines, lineInfos) => {
+      for (let i = 0; i < $Lines.children.length; i++) {
+        render$Line($Lines.children[i], lineInfos[i]);
+      }
+      const fragment = document.createDocumentFragment();
+      for (let i = $Lines.children.length; i < lineInfos.length; i++) {
+        const $Line = create$Row3();
+        render$Line($Line, lineInfos[i]);
+        fragment.append($Line);
+      }
+      $Lines.append(fragment);
     };
-    handleScrollBarThumbMouseMove2 = (event) => {
-      const y = event.clientY;
-      send(
-        "Editor.handleScrollBarMove",
-        y
-      );
+    render$LinesEqual = ($Lines, lineInfos) => {
+      for (let i = 0; i < lineInfos.length; i++) {
+        render$Line($Lines.children[i], lineInfos[i]);
+      }
     };
-    handleScrollBarThumbMouseUp2 = () => {
-      window.removeEventListener("mousemove", handleScrollBarThumbMouseMove2);
-      window.removeEventListener("mouseup", handleScrollBarThumbMouseUp2);
+    render$LinesMore = ($Lines, lineInfos) => {
+      for (let i = 0; i < lineInfos.length; i++) {
+        render$Line($Lines.children[i], lineInfos[i]);
+      }
+      const diff = $Lines.children.length - lineInfos.length;
+      for (let i = lineInfos.length; i < lineInfos.length + diff; i++) {
+        $Lines.lastChild.remove();
+      }
     };
-    handleScrollBarThumbMouseDown = (event) => {
-      window.addEventListener("mousemove", handleScrollBarThumbMouseMove2);
-      window.addEventListener("mouseup", handleScrollBarThumbMouseUp2);
+    render$Lines = ($Lines, lineInfos) => {
+      object($Lines);
+      array(lineInfos);
+      if ($Lines.children.length < lineInfos.length) {
+        render$LinesLess($Lines, lineInfos);
+      } else if ($Lines.children.length === lineInfos.length) {
+        render$LinesEqual($Lines, lineInfos);
+      } else {
+        render$LinesMore($Lines, lineInfos);
+      }
     };
-    handleScrollBarMouseDown2 = (event) => {
-      const y = event.clientY;
-      send(
-        "Editor.handleScrollBarClick",
-        y
-      );
+    setLineInfos = (state14, lineInfos) => {
+      render$Lines(state14.$LayerText, lineInfos);
     };
+  }
+});
+
+// src/parts/Editor/Editor.js
+var Editor_exports = {};
+__export(Editor_exports, {
+  create: () => create19,
+  dispose: () => dispose14,
+  focus: () => focus11,
+  mount: () => mount,
+  renderCursors: () => renderCursors,
+  renderDiagnostics: () => renderDiagnostics,
+  renderSelections: () => renderSelections,
+  renderTextAndCursors: () => renderTextAndCursors,
+  renderTextAndCursorsAndSelections: () => renderTextAndCursorsAndSelections,
+  setLanguageId: () => setLanguageId,
+  setScrollBar: () => setScrollBar2,
+  setSelections: () => setSelections2,
+  setSettings: () => setSettings,
+  setText: () => setText
+});
+var create19, setText, setSettings, setScrollBar2, renderCursors, renderSelections, renderTextAndCursors, setSelections2, renderTextAndCursorsAndSelections, mount, dispose14, focus11, setLanguageId, renderDiagnostics;
+var init_Editor = __esm({
+  "src/parts/Editor/Editor.js"() {
+    "use strict";
+    init_Assert();
+    init_EditorEvents();
+    init_LayerCursor();
+    init_LayerDiagnostics();
+    init_LayerScrollBar();
+    init_LayerSelections();
+    init_LayerText();
     create19 = () => {
       const $EditorInput = document.createElement("textarea");
       $EditorInput.className = "EditorInput";
@@ -6296,9 +6368,18 @@ var init_Editor = __esm({
       $EditorInput.role = "textbox";
       $EditorInput.onpaste = handlePaste;
       $EditorInput.addEventListener("beforeinput", handleBeforeInput);
-      $EditorInput.addEventListener("compositionstart", handleCompositionStart);
-      $EditorInput.addEventListener("compositionupdate", handleCompositionUpdate);
-      $EditorInput.addEventListener("compositionend", handleCompositionEnd);
+      $EditorInput.addEventListener(
+        "compositionstart",
+        handleCompositionStart
+      );
+      $EditorInput.addEventListener(
+        "compositionupdate",
+        handleCompositionUpdate
+      );
+      $EditorInput.addEventListener(
+        "compositionend",
+        handleCompositionEnd
+      );
       $EditorInput.onfocus = handleFocus5;
       $EditorInput.onblur = handleBlur3;
       $EditorInput.oncut = handleCut;
@@ -6309,12 +6390,13 @@ var init_Editor = __esm({
       $LayerText.addEventListener("mousedown", handleMouseDown4);
       const $ScrollBarThumb = document.createElement("div");
       $ScrollBarThumb.className = "ScrollBarThumb";
-      $ScrollBarThumb.addEventListener("mousedown", handleScrollBarThumbMouseDown);
+      $ScrollBarThumb.onpointerdown = handleScrollBarThumbPointerDown;
       const $ScrollBarDiagnostics = document.createElement("div");
       $ScrollBarDiagnostics.className = "EditorScrollBarDiagnostics";
       const $ScrollBar = document.createElement("div");
       $ScrollBar.className = "ScrollBar";
-      $ScrollBar.onmousedown = handleScrollBarMouseDown2;
+      $ScrollBar.onmousedown = handleScrollBarMouseDown;
+      $ScrollBar.oncontextmenu = handleScrollBarContextMenu;
       $ScrollBar.append($ScrollBarThumb);
       const $LayerSelections = document.createElement("div");
       $LayerSelections.className = "Selections";
@@ -6335,7 +6417,9 @@ var init_Editor = __esm({
       $Editor.append($EditorInput, $EditorLayers, $ScrollBarDiagnostics, $ScrollBar);
       $Editor.addEventListener("contextmenu", handleContextMenu5);
       $Editor.addEventListener("wheel", handleWheel3, { passive: true });
-      $Editor.addEventListener("mousemove", handleMouseMove, { passive: true });
+      $Editor.addEventListener("mousemove", handlePointerMove, {
+        passive: true
+      });
       return {
         $LayerCursor,
         $LayerSelections,
@@ -6466,12 +6550,13 @@ var init_ViewletEditorText = __esm({
 });
 
 // src/parts/ViewletEditorImage/ViewletEditorImageEvents.js
-var handlePointerMove, handlePointerUp, handlePointerDown, handleWheel4, handleContextMenu6;
+var handlePointerMove2, handlePointerUp, handlePointerDown, handleWheel4, handleContextMenu6;
 var init_ViewletEditorImageEvents = __esm({
   "src/parts/ViewletEditorImage/ViewletEditorImageEvents.js"() {
     "use strict";
     init_RendererWorker();
-    handlePointerMove = (event) => {
+    init_MouseEventType();
+    handlePointerMove2 = (event) => {
       const { pointerId, clientX, clientY } = event;
       send(
         "EditorImage.handlePointerMove",
@@ -6481,7 +6566,10 @@ var init_ViewletEditorImageEvents = __esm({
       );
     };
     handlePointerUp = (event) => {
-      const { pointerId, clientX, clientY, target } = event;
+      const { pointerId, clientX, clientY, target, button } = event;
+      if (button !== LeftClick) {
+        return;
+      }
       target.releasePointerCapture(pointerId);
       send(
         "EditorImage.handlePointerUp",
@@ -6492,7 +6580,9 @@ var init_ViewletEditorImageEvents = __esm({
     };
     handlePointerDown = (event) => {
       const { pointerId, clientX, clientY, target, button } = event;
-      console.log({ button });
+      if (button !== LeftClick) {
+        return;
+      }
       target.setPointerCapture(pointerId);
       send(
         "EditorImage.handlePointerDown",
@@ -6513,6 +6603,8 @@ var init_ViewletEditorImageEvents = __esm({
     };
     handleContextMenu6 = (event) => {
       event.preventDefault();
+      const { clientX, clientY } = event;
+      send("EditorImage.handleContextMenu", clientX, clientY);
     };
   }
 });
@@ -6548,7 +6640,7 @@ var init_ViewletEditorImage = __esm({
       $Viewlet.onpointerup = handlePointerUp;
       $Viewlet.addEventListener(
         "pointermove",
-        handlePointerMove,
+        handlePointerMove2,
         { passive: true }
       );
       $Viewlet.oncontextmenu = handleContextMenu6;
@@ -6651,12 +6743,12 @@ var init_ViewletSideBar = __esm({
       object(state14);
       state14.$SideBar.replaceChildren();
     };
-    appendViewlet = (state14, name19, $Viewlet) => {
+    appendViewlet = (state14, name20, $Viewlet) => {
       object(state14);
-      string(name19);
+      string(name20);
       const $SideBarTitleAreaTitle = state14.$SideBarTitleAreaTitle;
-      $SideBarTitleAreaTitle.title = name19;
-      $SideBarTitleAreaTitle.textContent = name19;
+      $SideBarTitleAreaTitle.title = name20;
+      $SideBarTitleAreaTitle.textContent = name20;
       $Viewlet.id = "SideBarContent";
       if (state14.$SideBarContent) {
         state14.$SideBarContent.replaceWith($Viewlet);
@@ -6740,9 +6832,9 @@ var init_ViewletPanel = __esm({
     setTabs = (state14, tabs) => {
       state14.$PanelTabs.append(...tabs.map(create$PanelTab));
     };
-    appendViewlet2 = (state14, name19, $Viewlet) => {
+    appendViewlet2 = (state14, name20, $Viewlet) => {
       object(state14);
-      string(name19);
+      string(name20);
       object($Viewlet);
       $Viewlet.id = "PanelContent";
       if (state14.$PanelContent) {
@@ -6987,49 +7079,13 @@ var init_ViewletActivityBar = __esm({
   }
 });
 
-// src/parts/ViewletQuickPick/ViewletQuickPick.js
-var ViewletQuickPick_exports = {};
-__export(ViewletQuickPick_exports, {
-  create: () => create26,
-  dispose: () => dispose20,
-  focus: () => focus15,
-  hideStatus: () => hideStatus,
-  setCursorOffset: () => setCursorOffset,
-  setFocusedIndex: () => setFocusedIndex5,
-  setItemsHeight: () => setItemsHeight,
-  setPicks: () => setPicks,
-  setValue: () => setValue,
-  setVisiblePicks: () => setVisiblePicks,
-  showNoResults: () => showNoResults
-});
-var activeId3, getNodeIndex6, getTargetIndex, handleWheel5, handleMouseDown5, handleInput5, handleBlur5, create$QuickPickItem, render$QuickPickItemLabel, render$QuickPickItemIcon, render$QuickPickItemEqual, render$QuickPickItem, render$QuickPickItemsLess, render$QuickPickItemsEqual, render$QuickPickItemsMore, render$QuickPickItems, setVisiblePicks, setFocusedIndex5, focus15, handleBeforeInput2, create26, setPicks, create$QuickPickStatus, hideStatus, showNoResults, dispose20, setValue, setCursorOffset, setItemsHeight;
-var init_ViewletQuickPick = __esm({
-  "src/parts/ViewletQuickPick/ViewletQuickPick.js"() {
+// src/parts/ViewletQuickPick/ViewletQuickPickEvents.js
+var handleWheel5, handleMouseDown5, handleInput5, handleBlur5;
+var init_ViewletQuickPickEvents = __esm({
+  "src/parts/ViewletQuickPick/ViewletQuickPickEvents.js"() {
     "use strict";
-    init_AriaAlert();
-    init_Focus();
-    init_InputBox();
     init_RendererWorker();
     init_WheelEventType();
-    activeId3 = "QuickPickItemActive";
-    getNodeIndex6 = ($Node) => {
-      let index = 0;
-      while ($Node = $Node.previousElementSibling) {
-        index++;
-      }
-      return index;
-    };
-    getTargetIndex = ($Target) => {
-      switch ($Target.className) {
-        case "QuickPickItem":
-        case "QuickPickItem Focused":
-          return getNodeIndex6($Target);
-        case "QuickPickItemLabel":
-          return getNodeIndex6($Target.parentNode);
-        default:
-          return -1;
-      }
-    };
     handleWheel5 = (event) => {
       switch (event.deltaMode) {
         case DomDeltaLine:
@@ -7050,14 +7106,11 @@ var init_ViewletQuickPick = __esm({
     };
     handleMouseDown5 = (event) => {
       event.preventDefault();
-      const $Target = event.target;
-      const index = getTargetIndex($Target);
-      if (index === -1) {
-        return;
-      }
+      const { clientX, clientY } = event;
       send(
-        "QuickPick.selectIndex",
-        index
+        "QuickPick.handleClickAt",
+        clientX,
+        clientY
       );
     };
     handleInput5 = (event) => {
@@ -7070,16 +7123,61 @@ var init_ViewletQuickPick = __esm({
     handleBlur5 = (event) => {
       send("QuickPick.handleBlur");
     };
+  }
+});
+
+// src/parts/ViewletQuickPick/ViewletQuickPick.js
+var ViewletQuickPick_exports = {};
+__export(ViewletQuickPick_exports, {
+  create: () => create26,
+  dispose: () => dispose20,
+  focus: () => focus15,
+  hideStatus: () => hideStatus,
+  setCursorOffset: () => setCursorOffset,
+  setFocusedIndex: () => setFocusedIndex5,
+  setItemsHeight: () => setItemsHeight,
+  setPicks: () => setPicks,
+  setValue: () => setValue,
+  setVisiblePicks: () => setVisiblePicks,
+  showNoResults: () => showNoResults
+});
+var activeId3, ClassNames, Ids, Roles, create$QuickPickItem, render$QuickPickItemLabel, render$QuickPickItemIcon, render$QuickPickItemEqual, render$QuickPickItem, render$QuickPickItemsLess, render$QuickPickItemsEqual, render$QuickPickItemsMore, render$QuickPickItems, setVisiblePicks, setFocusedIndex5, focus15, handleBeforeInput2, create26, setPicks, create$QuickPickStatus, hideStatus, showNoResults, dispose20, setValue, setCursorOffset, setItemsHeight;
+var init_ViewletQuickPick = __esm({
+  "src/parts/ViewletQuickPick/ViewletQuickPick.js"() {
+    "use strict";
+    init_AriaAlert();
+    init_Focus();
+    init_InputBox();
+    init_RendererWorker();
+    init_ViewletQuickPickEvents();
+    activeId3 = "QuickPickItemActive";
+    ClassNames = {
+      Label: "Label",
+      QuickPickItem: "QuickPickItem",
+      Icon: "Icon",
+      QuickPickItemDescription: "QuickPickItemDescription",
+      QuickPickStatus: "QuickPickStatus"
+    };
+    Ids = {
+      QuickPickHeader: "QuickPickHeader",
+      QuickPickItems: "QuickPickItems",
+      QuickPick: "QuickPick"
+    };
+    Roles = {
+      ListBox: "listbox",
+      ComboBox: "combobox",
+      Option: "option"
+    };
     create$QuickPickItem = () => {
       const $QuickPickItemLabelText = document.createTextNode("");
       const $QuickPickItemLabel = document.createElement("div");
-      $QuickPickItemLabel.className = "QuickPickItemLabel";
+      $QuickPickItemLabel.className = ClassNames.Label;
       $QuickPickItemLabel.append($QuickPickItemLabelText);
       const $QuickPickItemIcon = document.createElement("i");
-      $QuickPickItemIcon.className = "Icon";
+      $QuickPickItemIcon.className = ClassNames.Icon;
       const $QuickPickItem = document.createElement("div");
-      $QuickPickItem.className = "QuickPickItem";
-      $QuickPickItem.role = "option";
+      $QuickPickItem.className = ClassNames.QuickPickItem;
+      $QuickPickItem.role = Roles.Option;
       $QuickPickItem.append($QuickPickItemIcon, $QuickPickItemLabel);
       return $QuickPickItem;
     };
@@ -7178,8 +7276,8 @@ var init_ViewletQuickPick = __esm({
     };
     create26 = () => {
       const $QuickPickInput = create3();
-      $QuickPickInput.setAttribute("aria-controls", "QuickPickItems");
-      $QuickPickInput.role = "combobox";
+      $QuickPickInput.setAttribute("aria-controls", Ids.QuickPickItems);
+      $QuickPickInput.role = Roles.ComboBox;
       $QuickPickInput.ariaLabel = "Type the name of a command to run.";
       $QuickPickInput.ariaAutoComplete = "list";
       $QuickPickInput.onblur = handleBlur5;
@@ -7187,16 +7285,20 @@ var init_ViewletQuickPick = __esm({
       $QuickPickInput.addEventListener("beforeinput", handleBeforeInput2);
       $QuickPickInput.ariaExpanded = "true";
       const $QuickPickHeader = document.createElement("div");
-      $QuickPickHeader.id = "QuickPickHeader";
+      $QuickPickHeader.id = Ids.QuickPickHeader;
       $QuickPickHeader.append($QuickPickInput);
       const $QuickPickItems = document.createElement("div");
-      $QuickPickItems.id = "QuickPickItems";
-      $QuickPickItems.role = "listbox";
+      $QuickPickItems.id = Ids.QuickPickItems;
+      $QuickPickItems.role = Roles.ListBox;
       $QuickPickItems.onmousedown = handleMouseDown5;
-      $QuickPickItems.addEventListener("wheel", handleWheel5, { passive: true });
+      $QuickPickItems.addEventListener(
+        "wheel",
+        handleWheel5,
+        { passive: true }
+      );
       $QuickPickItems.ariaRoleDescription = "Quick Input";
       const $QuickPick = document.createElement("div");
-      $QuickPick.id = "QuickPick";
+      $QuickPick.id = Ids.QuickPick;
       $QuickPick.append($QuickPickHeader, $QuickPickItems);
       $QuickPick.ariaLabel = "Quick open";
       return {
@@ -7353,7 +7455,7 @@ var init_ViewletStatusBar = __esm({
 });
 
 // src/parts/TitleBarMenuBar/TitleBarMenuBarEvents.js
-var isInsideTitleBarMenu, handleFocusOut2, handleKeyDown3, handleMouseEnter3, getNodeIndex7, getIndex2, handleClick5;
+var isInsideTitleBarMenu, handleFocusOut2, handleKeyDown3, handleMouseEnter3, getNodeIndex6, getIndex2, handleClick5;
 var init_TitleBarMenuBarEvents = __esm({
   "src/parts/TitleBarMenuBar/TitleBarMenuBarEvents.js"() {
     "use strict";
@@ -7460,7 +7562,7 @@ var init_TitleBarMenuBarEvents = __esm({
         enterY
       );
     };
-    getNodeIndex7 = ($Node) => {
+    getNodeIndex6 = ($Node) => {
       let index = 0;
       while ($Node = $Node.previousElementSibling) {
         index++;
@@ -7470,7 +7572,7 @@ var init_TitleBarMenuBarEvents = __esm({
     getIndex2 = ($Target) => {
       switch ($Target.className) {
         case "TitleBarTopLevelEntry":
-          return getNodeIndex7($Target);
+          return getNodeIndex6($Target);
         default:
           return -1;
       }
@@ -7537,14 +7639,14 @@ var init_TitleBarMenuBar = __esm({
         $TitleBarMenu.children[focusIndex4].focus();
       }
     };
-    openMenu = (state14, unFocusIndex, index, level, menuItems, menuFocusedIndex, focus21, x, y, width, height) => {
+    openMenu = (state14, unFocusIndex, index, level, menuItems, menuFocusedIndex, focus22, x, y, width, height) => {
       object(state14);
       number(unFocusIndex);
       number(index);
       number(level);
       array(menuItems);
       number(menuFocusedIndex);
-      boolean(focus21);
+      boolean(focus22);
       number(x);
       number(y);
       number(width);
@@ -7800,30 +7902,10 @@ var init_EditorGroup = __esm({
   }
 });
 
-// src/parts/ViewletMain/ViewletMain.js
-var ViewletMain_exports = {};
-__export(ViewletMain_exports, {
-  addEditor: () => addEditor,
-  appendViewlet: () => appendViewlet3,
-  closeAllViewlets: () => closeAllViewlets,
-  closeOneTab: () => closeOneTab,
-  closeOneTabOnly: () => closeOneTabOnly,
-  closeOthers: () => closeOthers,
-  closeTabsLeft: () => closeTabsLeft,
-  closeTabsRight: () => closeTabsRight,
-  closeViewletAndTab: () => closeViewletAndTab,
-  create: () => create32,
-  dispose: () => dispose22,
-  focus: () => focus18,
-  focusAnotherTab: () => focusAnotherTab,
-  openAnotherTab: () => openAnotherTab,
-  openEditor: () => openEditor,
-  openViewlet: () => openViewlet,
-  replaceEditor: () => replaceEditor
-});
-var handleDragOver2, handleDrop2, create$MainTabs, create32, dispose22, replaceEditor, addEditor, openEditor, closeAllViewlets, closeViewletAndTab, focus18, getNodeIndex8, getIndex3, handleTabCloseButtonMouseDown, handleTabMouseDown, handleTabsMouseDown, handleTabsContextMenu, openViewlet, create$MainContent, appendViewlet3, openAnotherTab, closeOneTab, closeOneTabOnly, focusAnotherTab, closeOthers, closeTabsRight, closeTabsLeft;
-var init_ViewletMain = __esm({
-  "src/parts/ViewletMain/ViewletMain.js"() {
+// src/parts/ViewletMain/ViewletMainEvents.js
+var handleDragOver2, handleDrop2, getNodeIndex7, getIndex3, handleTabCloseButtonMouseDown, handleTabMouseDown, handleTabsMouseDown, handleTabsContextMenu;
+var init_ViewletMainEvents = __esm({
+  "src/parts/ViewletMain/ViewletMainEvents.js"() {
     "use strict";
     init_EditorGroup();
     init_Layout();
@@ -7840,66 +7922,7 @@ var init_ViewletMain = __esm({
       state9.$Main.classList.remove("DropTarget");
       send("Main.handleDrop");
     };
-    create$MainTabs = () => {
-      const $MainTabs = document.createElement("div");
-      $MainTabs.className = "MainTabs";
-      $MainTabs.role = "tablist";
-      $MainTabs.onmousedown = handleTabsMouseDown;
-      $MainTabs.oncontextmenu = handleTabsContextMenu;
-      return $MainTabs;
-    };
-    create32 = () => {
-      const $Main = state9.$Main;
-      $Main.ondrop = handleDrop2;
-      $Main.ondragover = handleDragOver2;
-      return {
-        $Viewlet: $Main,
-        $Main,
-        $MainContent: void 0,
-        $MainTabs: void 0
-      };
-    };
-    dispose22 = (state14) => {
-      console.log(state14);
-      state14.$MainContent.remove();
-      state14.$MainContent = void 0;
-      state14.$MainTabs.remove();
-      state14.$MainTabs = void 0;
-    };
-    replaceEditor = (state14, id, uri, languageId) => {
-      replaceOne(state14.editorGroup, id, uri, languageId);
-    };
-    addEditor = (state14, id, uri, languageId) => {
-      addOne2(state14.editorGroup, id, uri, languageId);
-    };
-    openEditor = async (state14, id, uri, languageId) => {
-      console.log("open editor", id, uri, languageId);
-      state14.editorGroup = create31();
-      state14.activeEditorState = addOne2(
-        state14.editorGroup,
-        id,
-        uri,
-        languageId
-      );
-    };
-    closeAllViewlets = (state14) => {
-      const $Main = state9.$Main;
-      while ($Main.firstChild) {
-        $Main.firstChild.remove();
-      }
-      state14.$MainContent = void 0;
-      state14.$MainTabs = void 0;
-    };
-    closeViewletAndTab = (state14, index) => {
-      state14.$MainContent.remove();
-      state14.$MainContent = void 0;
-      state14.$MainTabs.remove();
-      state14.$MainTabs = void 0;
-    };
-    focus18 = () => {
-      console.log("todo focus main");
-    };
-    getNodeIndex8 = ($Node) => {
+    getNodeIndex7 = ($Node) => {
       let index = 0;
       while ($Node = $Node.previousElementSibling) {
         index++;
@@ -7909,9 +7932,9 @@ var init_ViewletMain = __esm({
     getIndex3 = ($Target) => {
       switch ($Target.className) {
         case "EditorTabCloseButton":
-          return getNodeIndex8($Target.parentNode);
+          return getNodeIndex7($Target.parentNode);
         case "MainTab":
-          return getNodeIndex8($Target);
+          return getNodeIndex7($Target);
         default:
           return -1;
       }
@@ -7976,6 +7999,96 @@ var init_ViewletMain = __esm({
         y
       );
     };
+  }
+});
+
+// src/parts/ViewletMain/ViewletMain.js
+var ViewletMain_exports = {};
+__export(ViewletMain_exports, {
+  addEditor: () => addEditor,
+  appendViewlet: () => appendViewlet3,
+  closeAllViewlets: () => closeAllViewlets,
+  closeOneTab: () => closeOneTab,
+  closeOneTabOnly: () => closeOneTabOnly,
+  closeOthers: () => closeOthers,
+  closeTabsLeft: () => closeTabsLeft,
+  closeTabsRight: () => closeTabsRight,
+  closeViewletAndTab: () => closeViewletAndTab,
+  create: () => create32,
+  dispose: () => dispose22,
+  focus: () => focus18,
+  focusAnotherTab: () => focusAnotherTab,
+  openAnotherTab: () => openAnotherTab,
+  openEditor: () => openEditor,
+  openViewlet: () => openViewlet,
+  replaceEditor: () => replaceEditor
+});
+var create$MainTabs, create32, dispose22, replaceEditor, addEditor, openEditor, closeAllViewlets, closeViewletAndTab, focus18, openViewlet, create$MainContent, appendViewlet3, openAnotherTab, closeOneTab, closeOneTabOnly, focusAnotherTab, closeOthers, closeTabsRight, closeTabsLeft;
+var init_ViewletMain = __esm({
+  "src/parts/ViewletMain/ViewletMain.js"() {
+    "use strict";
+    init_EditorGroup();
+    init_Layout();
+    init_ViewletMainEvents();
+    create$MainTabs = () => {
+      const $MainTabs = document.createElement("div");
+      $MainTabs.className = "MainTabs";
+      $MainTabs.role = "tablist";
+      $MainTabs.onmousedown = handleTabsMouseDown;
+      $MainTabs.oncontextmenu = handleTabsContextMenu;
+      return $MainTabs;
+    };
+    create32 = () => {
+      const $Main = state9.$Main;
+      $Main.ondrop = handleDrop2;
+      $Main.ondragover = handleDragOver2;
+      return {
+        $Viewlet: $Main,
+        $Main,
+        $MainContent: void 0,
+        $MainTabs: void 0
+      };
+    };
+    dispose22 = (state14) => {
+      console.log(state14);
+      state14.$MainContent.remove();
+      state14.$MainContent = void 0;
+      state14.$MainTabs.remove();
+      state14.$MainTabs = void 0;
+    };
+    replaceEditor = (state14, id, uri, languageId) => {
+      replaceOne(state14.editorGroup, id, uri, languageId);
+    };
+    addEditor = (state14, id, uri, languageId) => {
+      addOne2(state14.editorGroup, id, uri, languageId);
+    };
+    openEditor = async (state14, id, uri, languageId) => {
+      console.log("open editor", id, uri, languageId);
+      state14.editorGroup = create31();
+      state14.activeEditorState = addOne2(
+        state14.editorGroup,
+        id,
+        uri,
+        languageId
+      );
+    };
+    closeAllViewlets = (state14) => {
+      const $Main = state9.$Main;
+      while ($Main.firstChild) {
+        $Main.firstChild.remove();
+      }
+      state14.$MainContent = void 0;
+      state14.$MainTabs = void 0;
+    };
+    closeViewletAndTab = (state14, index) => {
+      state14.$MainContent.remove();
+      state14.$MainContent = void 0;
+      state14.$MainTabs.remove();
+      state14.$MainTabs = void 0;
+    };
+    focus18 = () => {
+      console.log("todo focus main");
+    };
     openViewlet = (state14, tabLabel, tabTitle, oldActiveIndex) => {
       const $Tab = document.createElement("div");
       $Tab.className = "MainTab";
@@ -8086,7 +8199,7 @@ __export(ViewletEditorCompletion_exports, {
   setPosition: () => setPosition2,
   showLoading: () => showLoading
 });
-var name14, getNodeIndex9, getIndex4, handleMousedown3, create$CompletionItem, create33, setPosition2, setItems3, move, dispose23, focusIndex3, showLoading, handleError5;
+var name14, getNodeIndex8, getIndex4, handleMousedown3, create$CompletionItem, create33, setPosition2, setItems3, move, dispose23, focusIndex3, showLoading, handleError5;
 var init_ViewletEditorCompletion = __esm({
   "src/parts/ViewletEditorCompletion/ViewletEditorCompletion.js"() {
     "use strict";
@@ -8094,7 +8207,7 @@ var init_ViewletEditorCompletion = __esm({
     init_RendererWorker();
     init_Widget();
     name14 = "EditorCompletion";
-    getNodeIndex9 = ($Node) => {
+    getNodeIndex8 = ($Node) => {
       let index = 0;
       while ($Node = $Node.previousElementSibling) {
         index++;
@@ -8103,7 +8216,7 @@ var init_ViewletEditorCompletion = __esm({
     };
     getIndex4 = ($Target) => {
       if ($Target.classList.contains("EditorCompletionItem")) {
-        return getNodeIndex9($Target);
+        return getNodeIndex8($Target);
       }
       return -1;
     };
@@ -8196,14 +8309,14 @@ var init_ViewletEditorCompletion = __esm({
 });
 
 // src/parts/ViewletLocations/ViewletLocations.js
-var getNodeIndex10, handleLocationsMouseDown, create34, create$Location, render$Location, render$Locations, setLocations, setMessage3, setFocusedIndex6, handleError6, focus19;
+var getNodeIndex9, handleLocationsMouseDown, create34, create$Location, render$Location, render$Locations, setLocations, setMessage3, setFocusedIndex6, handleError6, focus19;
 var init_ViewletLocations = __esm({
   "src/parts/ViewletLocations/ViewletLocations.js"() {
     "use strict";
     init_RendererWorker();
     init_Focus();
     init_MouseEventType();
-    getNodeIndex10 = ($Node) => {
+    getNodeIndex9 = ($Node) => {
       let index = 0;
       while ($Node = $Node.previousElementSibling) {
         index++;
@@ -8216,7 +8329,7 @@ var init_ViewletLocations = __esm({
       }
       const $Target = event.target;
       if ($Target.classList.contains("TreeItem")) {
-        const index = getNodeIndex10($Target);
+        const index = getNodeIndex9($Target);
         send(
           "Locations.selectIndex",
           index
@@ -8413,17 +8526,18 @@ var init_ViewletKeyBindingsEvents = __esm({
       send("KeyBindings.handleInput", value);
     };
     handleWheel6 = (event) => {
-      switch (event.deltaMode) {
+      const { deltaMode, deltaY } = event;
+      switch (deltaMode) {
         case DomDeltaLine:
           send(
             "KeyBindings.handleWheel",
-            event.deltaY
+            deltaY
           );
           break;
         case DomDeltaPixel:
           send(
             "KeyBindings.handleWheel",
-            event.deltaY
+            deltaY
           );
           break;
         default:
@@ -8434,7 +8548,7 @@ var init_ViewletKeyBindingsEvents = __esm({
 });
 
 // src/parts/VirtualDomElements/VirtualDomElements.js
-var Div, H1, Kbd, Table, TBody, Td, Text, Th, THead, Tr;
+var Div, H1, Kbd, Table, TBody, Td, Text, Th, THead, Tr, Input;
 var init_VirtualDomElements = __esm({
   "src/parts/VirtualDomElements/VirtualDomElements.js"() {
     "use strict";
@@ -8448,11 +8562,12 @@ var init_VirtualDomElements = __esm({
     Th = 8;
     THead = 9;
     Tr = 10;
+    Input = 11;
   }
 });
 
 // src/parts/ElementTags/ElementTags.js
-var H12, Div2, Kbd2, Table2, TBody2, THead2, Td2, Th2, Tr2;
+var H12, Div2, Kbd2, Table2, TBody2, THead2, Td2, Th2, Tr2, Input2;
 var init_ElementTags = __esm({
   "src/parts/ElementTags/ElementTags.js"() {
     "use strict";
@@ -8465,6 +8580,7 @@ var init_ElementTags = __esm({
     Td2 = "td";
     Th2 = "th";
     Tr2 = "tr";
+    Input2 = "input";
   }
 });
 
@@ -8495,6 +8611,8 @@ var init_ElementTagMap = __esm({
           return THead2;
         case Tr:
           return Tr2;
+        case Input:
+          return Input2;
         default:
           throw new Error(`element tag not found ${type2}`);
       }
@@ -8570,7 +8688,7 @@ __export(ViewletKeyBindings_exports, {
   name: () => name18,
   setTableDom: () => setTableDom
 });
-var name18, create36, replaceChildren, setTableDom;
+var name18, create36, setTableDom;
 var init_ViewletKeyBindings = __esm({
   "src/parts/ViewletKeyBindings/ViewletKeyBindings.js"() {
     "use strict";
@@ -8604,13 +8722,148 @@ var init_ViewletKeyBindings = __esm({
         $KeyBindingsTableWrapper
       };
     };
-    replaceChildren = ($Element, $NewChildren) => {
-      $Element.replaceChildren($NewChildren);
-    };
     setTableDom = (state14, dom) => {
       const { $KeyBindingsTableWrapper } = state14;
       const $Root = render2(dom);
-      replaceChildren($KeyBindingsTableWrapper, $Root.firstChild);
+      $KeyBindingsTableWrapper.replaceChildren($Root.firstChild);
+    };
+  }
+});
+
+// src/parts/ViewletEditorFindWidget/ViewletEditorFindWidgetEvents.js
+var handleInput7, handleClickClose, handleClickPreviousMatch, handleClickNextMatch, handleClick6;
+var init_ViewletEditorFindWidgetEvents = __esm({
+  "src/parts/ViewletEditorFindWidget/ViewletEditorFindWidgetEvents.js"() {
+    "use strict";
+    init_RendererWorker();
+    handleInput7 = (event) => {
+      const { target } = event;
+      const { value } = target;
+      send("EditorFindWidget.handleInput", value);
+    };
+    handleClickClose = (event) => {
+      event.preventDefault();
+      send("Viewlet.closeWidget", "EditorFindWidget");
+    };
+    handleClickPreviousMatch = (event) => {
+      event.preventDefault();
+      send("EditorFindWidget.focusPrevious");
+    };
+    handleClickNextMatch = (event) => {
+      event.preventDefault();
+      send("EditorFindWidget.focusNext");
+    };
+    handleClick6 = (event) => {
+      const { target } = event;
+      const { title } = target;
+      switch (title) {
+        case "Close":
+          handleClickClose(event);
+          break;
+        case "Previous Match":
+          handleClickPreviousMatch(event);
+          break;
+        case "Next Match":
+          handleClickNextMatch(event);
+          break;
+        default:
+          break;
+      }
+    };
+  }
+});
+
+// src/parts/ViewletEditorFindWidget/ViewletEditorFindWidget.js
+var ViewletEditorFindWidget_exports = {};
+__export(ViewletEditorFindWidget_exports, {
+  create: () => create37,
+  dispose: () => dispose25,
+  focus: () => focus20,
+  name: () => name19,
+  setMatchCountText: () => setMatchCountText,
+  setValue: () => setValue2
+});
+var name19, UiStrings, Icons, create$Button, create37, focus20, setValue2, setMatchCountText, dispose25;
+var init_ViewletEditorFindWidget = __esm({
+  "src/parts/ViewletEditorFindWidget/ViewletEditorFindWidget.js"() {
+    "use strict";
+    init_InputBox();
+    init_ViewletEditorFindWidgetEvents();
+    init_Focus();
+    name19 = "EditorFindWidget";
+    UiStrings = {
+      Close: "Close",
+      PreviousMatch: "Previous Match",
+      NextMatch: "Next Match"
+    };
+    Icons = {
+      Close: "/icons/icon-close.svg",
+      PreviousMatch: "/icons/arrow-up.svg",
+      NextMatch: "/icons/arrow-down.svg"
+    };
+    create$Button = (label, icon) => {
+      const $Icon = document.createElement("div");
+      $Icon.className = "MaskIcon";
+      $Icon.style.webkitMaskImage = `url('${icon}')`;
+      $Icon.role = "none";
+      const $Button = document.createElement("div");
+      $Button.role = "button";
+      $Button.ariaLabel = label;
+      $Button.title = label;
+      $Button.tabIndex = 0;
+      $Button.className = `EditorFindWidgetButton`;
+      $Button.append($Icon);
+      return $Button;
+    };
+    create37 = () => {
+      const $InputBox = create3();
+      $InputBox.oninput = handleInput7;
+      $InputBox.ariaLabel = "Find";
+      const $MatchCountText = document.createTextNode("");
+      const $MatchCount = document.createElement("div");
+      $MatchCount.className = "EditorFindWidgetMatchCount";
+      $MatchCount.append($MatchCountText);
+      const $ButtonFocusNext = create$Button(UiStrings.NextMatch, Icons.NextMatch);
+      const $ButtonFocusPrevious = create$Button(
+        UiStrings.PreviousMatch,
+        Icons.PreviousMatch
+      );
+      const $ButtonClose = create$Button(UiStrings.Close, Icons.Close);
+      const $Viewlet = document.createElement("div");
+      $Viewlet.onclick = handleClick6;
+      $Viewlet.className = "Viewlet";
+      $Viewlet.dataset.viewletId = "EditorFindWidget";
+      $Viewlet.append(
+        $InputBox,
+        $MatchCount,
+        $ButtonFocusPrevious,
+        $ButtonFocusNext,
+        $ButtonClose
+      );
+      return {
+        $Viewlet,
+        $InputBox,
+        $MatchCount,
+        $MatchCountText,
+        $ButtonClose,
+        $ButtonFocusNext,
+        $ButtonFocusPrevious
+      };
+    };
+    focus20 = (state14) => {
+      const { $InputBox } = state14;
+      $InputBox.focus();
+      setFocus("EditorFindWidget");
+    };
+    setValue2 = (state14, value) => {
+      const { $InputBox } = state14;
+      $InputBox.value = value;
+    };
+    setMatchCountText = (state14, value) => {
+      const { $MatchCountText } = state14;
+      $MatchCountText.nodeValue = value;
+    };
+    dispose25 = () => {
     };
   }
 });
@@ -8675,6 +8928,8 @@ var init_ViewletModule = __esm({
           return Promise.resolve().then(() => (init_ViewletEditorPlainText(), ViewletEditorPlainText_exports));
         case KeyBindings2:
           return Promise.resolve().then(() => (init_ViewletKeyBindings(), ViewletKeyBindings_exports));
+        case EditorFindWidget:
+          return Promise.resolve().then(() => (init_ViewletEditorFindWidget(), ViewletEditorFindWidget_exports));
         default:
           throw new Error("unknown module");
       }
@@ -8683,7 +8938,7 @@ var init_ViewletModule = __esm({
 });
 
 // src/parts/Viewlet/Viewlet.js
-var state11, load2, create37, loadModule, invoke, focus20, refresh8, sendMultiple, dispose25, handleError7, appendViewlet4, executeCommands, show;
+var state11, load2, create38, loadModule, invoke, focus21, refresh8, sendMultiple, dispose26, handleError7, appendViewlet4, ariaAnnounce, executeCommands, show, setBounds;
 var init_Viewlet = __esm({
   "src/parts/Viewlet/Viewlet.js"() {
     "use strict";
@@ -8703,7 +8958,7 @@ var init_Viewlet = __esm({
         factory: module
       };
     };
-    create37 = (id) => {
+    create38 = (id) => {
       const module = state11.modules[id];
       state11.instances[id] = {
         state: module.create(),
@@ -8722,12 +8977,11 @@ var init_Viewlet = __esm({
       }
       if (typeof instance.factory[method] !== "function") {
         console.warn(`method ${method} in ${viewletId} not implemented`);
-        console.log(instance.factory);
         return;
       }
       return instance.factory[method](instance.state, ...args);
     };
-    focus20 = (viewletId) => {
+    focus21 = (viewletId) => {
       const instance = state11.instances[viewletId];
       if (instance && instance.factory && instance.factory.focus) {
         instance.factory.focus(instance.state);
@@ -8746,10 +9000,14 @@ var init_Viewlet = __esm({
     sendMultiple = (commands) => {
       for (const command of commands) {
         const [_, viewletId, method, ...args] = command;
-        invoke(viewletId, method, ...args);
+        if (_ === "Viewlet.ariaAnnounce") {
+          ariaAnnounce(viewletId);
+        } else {
+          invoke(viewletId, method, ...args);
+        }
       }
     };
-    dispose25 = (id) => {
+    dispose26 = (id) => {
       string(id);
       const instance = state11.instances[id];
       if (!instance) {
@@ -8783,7 +9041,7 @@ var init_Viewlet = __esm({
         instance.state.$Viewlet.textContent = `${message}`;
       }
     };
-    appendViewlet4 = (parentId, childId, focus21) => {
+    appendViewlet4 = (parentId, childId, focus22) => {
       if (parentId === "Widget") {
         return;
       }
@@ -8798,15 +9056,19 @@ var init_Viewlet = __esm({
         childInstance.factory.name,
         childInstance.state.$Viewlet
       );
-      if (focus21 && childInstance.factory.focus) {
+      if (focus22 && childInstance.factory.focus) {
         childInstance.factory.focus(childInstance.state);
       }
     };
+    ariaAnnounce = async (message) => {
+      const AriaAlert = await Promise.resolve().then(() => (init_AriaAlert(), AriaAlert_exports));
+      AriaAlert.alert(message);
+    };
     executeCommands = (commands) => {
       for (const [command, ...args] of commands) {
         switch (command) {
           case "Viewlet.create":
-            create37(...args);
+            create38(...args);
             break;
           case "Viewlet.send":
             invoke(...args);
@@ -8815,7 +9077,13 @@ var init_Viewlet = __esm({
             show(...args);
             break;
           case "Viewlet.dispose":
-            dispose25(...args);
+            dispose26(...args);
+            break;
+          case "Viewlet.setBounds":
+            setBounds(...args);
+            break;
+          case "Viewlet.ariaAnnounce":
+            ariaAnnounce(...args);
             break;
           default:
             throw new Error(`unknown command ${command}`);
@@ -8831,6 +9099,14 @@ var init_Viewlet = __esm({
         instance.factory.focus(instance.state);
       }
     };
+    setBounds = (id, left, top, width, height) => {
+      const instance = state11.instances[id];
+      const $Viewlet = instance.state.$Viewlet;
+      $Viewlet.style.left = `${left}px`;
+      $Viewlet.style.top = `${top}px`;
+      $Viewlet.style.width = `${width}px`;
+      $Viewlet.style.height = `${height}px`;
+    };
   }
 });
 
@@ -8846,9 +9122,9 @@ var init_Viewlet_ipc = __esm({
     init_Viewlet();
     Commands26 = {
       "Viewlet.appendViewlet": appendViewlet4,
-      "Viewlet.dispose": dispose25,
+      "Viewlet.dispose": dispose26,
       "Viewlet.executeCommands": executeCommands,
-      "Viewlet.focus": focus20,
+      "Viewlet.focus": focus21,
       "Viewlet.handleError": handleError7,
       "Viewlet.invoke": invoke,
       "Viewlet.load": load2,
@@ -8856,7 +9132,8 @@ var init_Viewlet_ipc = __esm({
       "Viewlet.refresh": refresh8,
       "Viewlet.send": invoke,
       "Viewlet.sendMultiple": sendMultiple,
-      "Viewlet.show": show
+      "Viewlet.show": show,
+      "Viewlet.setBounds": setBounds
     };
   }
 });
@@ -9063,6 +9340,7 @@ var init_ModuleMap = __esm({
         case "Audio.play":
           return Audio2;
         case "ClipBoard.readText":
+        case "ClipBoard.writeImage":
         case "ClipBoard.writeText":
           return ClipBoard;
         case "Css.setInlineStyle":
@@ -9179,6 +9457,7 @@ var init_ModuleMap = __esm({
         case "Viewlet.refresh":
         case "Viewlet.send":
         case "Viewlet.sendMultiple":
+        case "Viewlet.setBounds":
           return Viewlet;
         case "WebStorage.clear":
         case "WebStorage.getItem":
@@ -9280,14 +9559,14 @@ var init_JsonRpcError = __esm({
 // src/parts/IpcParent/IpcParentWithMessagePort.js
 var IpcParentWithMessagePort_exports = {};
 __export(IpcParentWithMessagePort_exports, {
-  create: () => create38
+  create: () => create39
 });
-var create38;
+var create39;
 var init_IpcParentWithMessagePort = __esm({
   "src/parts/IpcParent/IpcParentWithMessagePort.js"() {
     "use strict";
     init_Assert();
-    create38 = async ({ url }) => {
+    create39 = async ({ url }) => {
       string(url);
       const port = await new Promise((resolve2) => {
         globalThis.acceptPort = resolve2;
@@ -9300,21 +9579,25 @@ var init_IpcParentWithMessagePort = __esm({
 });
 
 // src/parts/IpcParent/IpcParentWithModuleWorker.js
-var getDisplayName, tryToGetActualErrorMessage, isFirefoxError, create39;
+var IpcParentWithModuleWorker_exports = {};
+__export(IpcParentWithModuleWorker_exports, {
+  create: () => create40
+});
+var getDisplayName, tryToGetActualErrorMessage, isFirefoxError, create40;
 var init_IpcParentWithModuleWorker = __esm({
   "src/parts/IpcParent/IpcParentWithModuleWorker.js"() {
     "use strict";
-    getDisplayName = (name19) => {
-      if (!name19) {
+    getDisplayName = (name20) => {
+      if (!name20) {
         return "<unknown> worker";
       }
-      if (name19.endsWith("Worker")) {
-        return name19.toLowerCase();
+      if (name20.endsWith("Worker")) {
+        return name20.toLowerCase();
       }
-      return `${name19} worker`;
+      return `${name20} worker`;
     };
-    tryToGetActualErrorMessage = async ({ url, name: name19 }) => {
-      const displayName = getDisplayName(name19);
+    tryToGetActualErrorMessage = async ({ url, name: name20 }) => {
+      const displayName = getDisplayName(name20);
       try {
         await import(url);
         return `Failed to start ${displayName}: Unknown Error`;
@@ -9341,11 +9624,11 @@ var init_IpcParentWithModuleWorker = __esm({
         "SyntaxError: export declarations may only appear at top level of a module"
       ].includes(message);
     };
-    create39 = async ({ url, name: name19 }) => {
+    create40 = async ({ url, name: name20 }) => {
       try {
         const worker = new Worker(url, {
           type: "module",
-          name: name19
+          name: name20
         });
         await new Promise((resolve2, reject) => {
           const cleanup = () => {
@@ -9368,7 +9651,7 @@ var init_IpcParentWithModuleWorker = __esm({
             } else {
               const actualErrorMessage = await tryToGetActualErrorMessage({
                 url,
-                name: name19
+                name: name20
               });
               reject(new Error(actualErrorMessage));
             }
@@ -9389,11 +9672,15 @@ var init_IpcParentWithModuleWorker = __esm({
 });
 
 // src/parts/IpcParent/IpcParentWithReferencePort.js
-var create40;
+var IpcParentWithReferencePort_exports = {};
+__export(IpcParentWithReferencePort_exports, {
+  create: () => create41
+});
+var create41;
 var init_IpcParentWithReferencePort = __esm({
   "src/parts/IpcParent/IpcParentWithReferencePort.js"() {
     "use strict";
-    create40 = async (url) => {
+    create41 = async (url) => {
       const referencePort = await new Promise((resolve2) => {
         globalThis.acceptReferencePort = resolve2;
         import(url);
@@ -9405,31 +9692,32 @@ var init_IpcParentWithReferencePort = __esm({
 });
 
 // src/parts/IpcParent/IpcParent.js
-var Methods, METHOD_PREFERRED, create41;
+var Methods, METHOD_PREFERRED, getModule, create42;
 var init_IpcParent = __esm({
   "src/parts/IpcParent/IpcParent.js"() {
     "use strict";
-    init_IpcParentWithMessagePort();
-    init_IpcParentWithModuleWorker();
-    init_IpcParentWithReferencePort();
     Methods = {
       MessagePort: 1,
       ModuleWorker: 2,
       ReferencePort: 3
     };
     METHOD_PREFERRED = Methods.ModuleWorker;
-    create41 = async ({ method, ...options }) => {
+    getModule = () => {
       switch (METHOD_PREFERRED) {
         case Methods.ModuleWorker:
-          return create39(options);
+          return Promise.resolve().then(() => (init_IpcParentWithModuleWorker(), IpcParentWithModuleWorker_exports));
         case Methods.MessagePort:
-          return create38(options);
+          return Promise.resolve().then(() => (init_IpcParentWithMessagePort(), IpcParentWithMessagePort_exports));
         case Methods.ReferencePort:
-          return create40(options);
+          return Promise.resolve().then(() => (init_IpcParentWithReferencePort(), IpcParentWithReferencePort_exports));
         default:
           throw new Error("unknown method");
       }
     };
+    create42 = async ({ method, ...options }) => {
+      const module = await getModule();
+      return module.create(options);
+    };
   }
 });
 
@@ -9503,7 +9791,7 @@ var init_RendererWorker = __esm({
       throw new JsonRpcError("unexpected message from renderer worker");
     };
     getIpc = async () => {
-      const rendererWorker = await create41({
+      const rendererWorker = await create42({
         method: Methods.ModuleWorker,
         url: getRendererWorkerUrl(),
         name: "Renderer Worker"