@lvce-editor/static-server 0.72.5 → 0.73.1

package/static/{cfaf263 → 44a6250}/packages/preview-worker/dist/previewWorkerMain.js

@@ -1293,6 +1293,14 @@ const terminate = () => {
   globalThis.close();
 };
 
+const createSandboxRpc = async () => {
+  const sandboxRpc = await LazyTransferMessagePortRpcParent.create({
+    commandMap: {},
+    send: async port => await invokeAndTransfer('SendMessagePortToExtensionHostWorker.sendMessagePortToPreviewSandBoxWorker', port, 'SandBox.handleMessagePort')
+  });
+  return sandboxRpc;
+};
+
 const {
   get: get$1,
   getCommandIds,
@@ -1303,21 +1311,28 @@ const {
   wrapGetter
 } = create$1();
 
-const create = (uid, uri, x, y, width, height, platform, assetDir) => {
+const create = async (uid, uri, x, y, width, height, platform, assetDir) => {
+  const sandboxRpc = await createSandboxRpc();
   const state = {
     assetDir,
     content: '',
     css: [],
     errorCount: 0,
     errorMessage: '',
+    height,
     initial: true,
     parsedDom: [],
     parsedNodesChildNodeCount: 0,
     platform,
+    sandboxRpc,
     scripts: [],
     uid,
     uri,
-    warningCount: 0
+    useSandboxWorker: false,
+    warningCount: 0,
+    width,
+    x,
+    y
   };
   set$2(uid, state, state);
 };
@@ -1427,9 +1442,11 @@ const dispatchEvent = (element, event) => {
   }
 };
 
-const dispatchClickEvent = (element, window) => {
+const dispatchClickEvent = (element, window, clientX = 0, clientY = 0) => {
   const clickEvent = new window.MouseEvent('click', {
-    bubbles: true
+    bubbles: true,
+    clientX,
+    clientY
   });
   dispatchEvent(element, clickEvent);
 };
@@ -2121,11 +2138,26 @@ const serialize = (document, elementMap) => {
   };
 };
 
-const handleClick = (state, hdId) => {
-  // console.log('click,', hdId)
-  if (!hdId) {
-    return state;
-  }
+const handleClickSandbox = async (state, hdId) => {
+  const {
+    sandboxRpc,
+    uid
+  } = state;
+  await sandboxRpc.invoke('SandBox.handleClick', uid, hdId);
+  const serialized = await sandboxRpc.invoke('SandBox.getSerializedDom', uid);
+  const parsedDom = serialized.dom;
+  const {
+    css
+  } = serialized;
+  const parsedNodesChildNodeCount = getParsedNodesChildNodeCount(parsedDom);
+  return {
+    ...state,
+    css,
+    parsedDom,
+    parsedNodesChildNodeCount
+  };
+};
+const handleClickLocal = (state, hdId, clientX, clientY) => {
   const happyDomInstance = get(state.uid);
   if (!happyDomInstance) {
     return state;
@@ -2134,16 +2166,11 @@ const handleClick = (state, hdId) => {
   if (!element) {
     return state;
   }
-
-  // console.log({ element })
-  // Dispatch click event in happy-dom so event listeners fire
-  dispatchClickEvent(element, happyDomInstance.window);
-
-  // Re-serialize the (potentially mutated) DOM
+  const adjustedClientX = clientX - state.x;
+  const adjustedClientY = clientY - state.y;
+  dispatchClickEvent(element, happyDomInstance.window, adjustedClientX, adjustedClientY);
   const elementMap = new Map();
   const serialized = serialize(happyDomInstance.document, elementMap);
-
-  // Update happy-dom state with new element map
   set$1(state.uid, {
     document: happyDomInstance.document,
     elementMap,
@@ -2161,6 +2188,15 @@ const handleClick = (state, hdId) => {
     parsedNodesChildNodeCount
   };
 };
+const handleClick = (state, hdId, clientX, clientY) => {
+  if (!hdId) {
+    return state;
+  }
+  if (state.useSandboxWorker) {
+    return handleClickSandbox(state, hdId);
+  }
+  return handleClickLocal(state, hdId, clientX, clientY);
+};
 
 const None = 0;
 const OpeningAngleBracket = 1;
@@ -55564,9 +55600,9 @@ const listenerOptions = Symbol('listenerOptions');
 const listeners = Symbol('listeners');
 const namedItems = Symbol('namedItems');
 const nextActiveElement = Symbol('nextActiveElement');
-const observe = Symbol('observe');
+const observe$1 = Symbol('observe');
 const observedAttributes = Symbol('observedAttributes');
-const observers = Symbol('observers');
+const observers$1 = Symbol('observers');
 const ownerDocument = Symbol('ownerDocument');
 const ownerElement = Symbol('ownerElement');
 const propagationStopped = Symbol('propagationStopped');
@@ -57020,15 +57056,15 @@ class NodeUtility {
     ancestorNode[childNodes].push(node);
     node[connectToNode](ancestorNode);
     // MutationObserver
-    if (ancestorNode[observers].length > 0) {
+    if (ancestorNode[observers$1].length > 0) {
       const record = new MutationRecord({
         target: ancestorNode,
         type: MutationTypeEnum$1.childList,
         addedNodes: [node]
       });
-      for (const observer of ancestorNode[observers]) {
+      for (const observer of ancestorNode[observers$1]) {
         if (observer.options?.subtree) {
-          node[observe](observer);
+          node[observe$1](observer);
         }
         if (observer.options?.childList) {
           observer.report(record);
@@ -57055,13 +57091,13 @@ class NodeUtility {
     ancestorNode[childNodes].splice(index, 1);
     node[connectToNode](null);
     // MutationObserver
-    if (ancestorNode[observers].length > 0) {
+    if (ancestorNode[observers$1].length > 0) {
       const record = new MutationRecord({
         target: ancestorNode,
         type: MutationTypeEnum$1.childList,
         removedNodes: [node]
       });
-      for (const observer of ancestorNode[observers]) {
+      for (const observer of ancestorNode[observers$1]) {
         if (observer.options?.subtree) {
           node[unobserve](observer);
         }
@@ -57115,15 +57151,15 @@ class NodeUtility {
     ancestorNode[childNodes].splice(ancestorNode[childNodes].indexOf(referenceNode), 0, newNode);
     newNode[connectToNode](ancestorNode);
     // MutationObserver
-    if (ancestorNode[observers].length > 0) {
+    if (ancestorNode[observers$1].length > 0) {
       const record = new MutationRecord({
         target: ancestorNode,
         type: MutationTypeEnum$1.childList,
         addedNodes: [newNode]
       });
-      for (const observer of ancestorNode[observers]) {
+      for (const observer of ancestorNode[observers$1]) {
         if (observer.options?.subtree) {
-          newNode[observe](observer);
+          newNode[observe$1](observer);
         }
         if (observer.options?.childList) {
           observer.report(record);
@@ -57433,7 +57469,7 @@ class Node extends EventTarget$1 {
    *
    * @returns `Symbol.toStringTag`.
    */
-  get [(_a$F = isConnected, _b$n = parentNode, _c$j = rootNode, _d$d = formNode, _e$b = selectNode, _f$9 = textAreaNode, _g$6 = styleNode, _h$5 = observers, _j$5 = childNodes, Symbol.toStringTag)]() {
+  get [(_a$F = isConnected, _b$n = parentNode, _c$j = rootNode, _d$d = formNode, _e$b = selectNode, _f$9 = textAreaNode, _g$6 = styleNode, _h$5 = observers$1, _j$5 = childNodes, Symbol.toStringTag)]() {
     return this.constructor.name;
   }
   /**
@@ -57763,11 +57799,11 @@ class Node extends EventTarget$1 {
    *
    * @param listener Listener.
    */
-  [observe](listener) {
-    this[observers].push(listener);
+  [observe$1](listener) {
+    this[observers$1].push(listener);
     if (listener.options.subtree) {
       for (const node of this[childNodes]) {
-        node[observe](listener);
+        node[observe$1](listener);
       }
     }
   }
@@ -57778,9 +57814,9 @@ class Node extends EventTarget$1 {
    * @param listener Listener.
    */
   [unobserve](listener) {
-    const index = this[observers].indexOf(listener);
+    const index = this[observers$1].indexOf(listener);
     if (index !== -1) {
-      this[observers].splice(index, 1);
+      this[observers$1].splice(index, 1);
     }
     if (listener.options.subtree) {
       for (const node of this[childNodes]) {
@@ -61672,8 +61708,8 @@ class ElementNamedNodeMap extends NamedNodeMap {
       this[ownerElement].attributeChangedCallback(item[name], oldValue, item[value]);
     }
     // MutationObserver
-    if (this[ownerElement][observers].length > 0) {
-      for (const observer of this[ownerElement][observers]) {
+    if (this[ownerElement][observers$1].length > 0) {
+      for (const observer of this[ownerElement][observers$1]) {
         if (observer.options?.attributes && (!observer.options.attributeFilter || observer.options.attributeFilter.includes(item[name]))) {
           observer.report(new MutationRecord({
             target: this[ownerElement],
@@ -61709,8 +61745,8 @@ class ElementNamedNodeMap extends NamedNodeMap {
       this[ownerElement].attributeChangedCallback(removedItem[name], removedItem[value], null);
     }
     // MutationObserver
-    if (this[ownerElement][observers].length > 0) {
-      for (const observer of this[ownerElement][observers]) {
+    if (this[ownerElement][observers$1].length > 0) {
+      for (const observer of this[ownerElement][observers$1]) {
         if (observer.options?.attributes && (!observer.options.attributeFilter || observer.options.attributeFilter.includes(removedItem[name]))) {
           observer.report(new MutationRecord({
             target: this[ownerElement],
@@ -74766,7 +74802,7 @@ class HTMLElement extends Element {
             newElement[formNode] = this[formNode];
             newElement[selectNode] = this[selectNode];
             newElement[textAreaNode] = this[textAreaNode];
-            newElement[observers] = this[observers];
+            newElement[observers$1] = this[observers$1];
             newElement[isValue] = this[isValue];
             for (let i = 0, max = this[attributes].length; i < max; i++) {
               newElement[attributes].setNamedItem(this[attributes][i]);
@@ -74777,7 +74813,7 @@ class HTMLElement extends Element {
             this[formNode] = null;
             this[selectNode] = null;
             this[textAreaNode] = null;
-            this[observers] = [];
+            this[observers$1] = [];
             this[isValue] = null;
             this[attributes] = new HTMLElementNamedNodeMap(this);
             for (let i = 0, max = this[parentNode][childNodes].length; i < max; i++) {
@@ -83007,8 +83043,8 @@ class CharacterData extends Node {
       this[ownerDocument][cacheID]++;
     }
     // MutationObserver
-    if (this[observers].length > 0) {
-      for (const observer of this[observers]) {
+    if (this[observers$1].length > 0) {
+      for (const observer of this[observers$1]) {
         if (observer.options?.characterData) {
           observer.report(new MutationRecord({
             target: this,
@@ -83796,7 +83832,7 @@ class MutationObserver {
     // Stores all observers on the window object, so that they can be disconnected when the window is closed.
     __classPrivateFieldGet$e(this, _MutationObserver_window, "f")[mutationObservers].push(this);
     // Starts observing target node.
-    target[observe](listener);
+    target[observe$1](listener);
   }
   /**
    * Disconnects.
@@ -90456,11 +90492,57 @@ const getTopLevelFunctionNames = script => {
   return names;
 };
 
+const createLocalStorage = () => {
+  const store = new Map();
+  const getItem = key => {
+    if (store.has(key)) {
+      return store.get(key);
+    }
+    return null;
+  };
+  const setItem = (key, value) => {
+    store.set(key, String(value));
+  };
+  const removeItem = key => {
+    store.delete(key);
+  };
+  const clear = () => {
+    store.clear();
+  };
+  const key = index => {
+    const keys = [...store.keys()];
+    if (index < 0 || index >= keys.length) {
+      return null;
+    }
+    return keys[index];
+  };
+  const localStorage = {
+    clear,
+    getItem,
+    key,
+    get length() {
+      return store.size;
+    },
+    removeItem,
+    setItem
+  };
+  return localStorage;
+};
+
 /* eslint-disable @typescript-eslint/no-implied-eval */
-const executeScripts = (window, document, scripts) => {
+const executeScripts = (window, document, scripts, width = 0, height = 0) => {
   window.alert = alert;
   // @ts-ignore
   globalThis.alert = alert;
+  const localStorage = createLocalStorage();
+  // @ts-ignore
+  globalThis.localStorage = localStorage;
+  window.innerWidth = width;
+  window.innerHeight = height;
+  // @ts-ignore
+  globalThis.innerWidth = width;
+  // @ts-ignore
+  globalThis.innerHeight = height;
   // Execute each script with the happy-dom window and document as context
   for (const scriptContent of scripts) {
     try {
@@ -90477,6 +90559,59 @@ const executeScripts = (window, document, scripts) => {
   }
 };
 
+/* eslint-disable @typescript-eslint/no-floating-promises */
+const observers = new Map();
+const handleMutations = async uid => {
+  const happyDomInstance = get(uid);
+  if (!happyDomInstance) {
+    return;
+  }
+  const elementMap = new Map();
+  const serialized = serialize(happyDomInstance.document, elementMap);
+  set$1(uid, {
+    document: happyDomInstance.document,
+    elementMap,
+    window: happyDomInstance.window
+  });
+  const {
+    newState: state,
+    oldState
+  } = get$1(uid);
+  const parsedDom = serialized.dom;
+  const {
+    css
+  } = serialized;
+  const parsedNodesChildNodeCount = getParsedNodesChildNodeCount(parsedDom);
+  const updatedState = {
+    ...state,
+    css,
+    parsedDom,
+    parsedNodesChildNodeCount
+  };
+  set$2(uid, oldState, updatedState);
+  try {
+    await invoke('Preview.rerender', uid);
+  } catch {
+    // ignore
+  }
+};
+const observe = (uid, document, window) => {
+  const existingObserver = observers.get(uid);
+  if (existingObserver) {
+    existingObserver.disconnect();
+  }
+  const observer = new window.MutationObserver(() => {
+    handleMutations(uid);
+  });
+  observer.observe(document.documentElement, {
+    attributes: true,
+    characterData: true,
+    childList: true,
+    subtree: true
+  });
+  observers.set(uid, observer);
+};
+
 /* eslint-disable @typescript-eslint/prefer-readonly-parameter-types */
 
 const states = new Map();
@@ -90484,6 +90619,17 @@ const set = (uid, entry) => {
   states.set(uid, entry);
 };
 
+const toNumber = value => {
+  if (typeof value === 'number') {
+    return value;
+  }
+  if (typeof value === 'string') {
+    const parsed = Number.parseInt(value, 10);
+    return Number.isNaN(parsed) ? 0 : parsed;
+  }
+  return 0;
+};
+
 const patchCanvasElements = async (document, uid) => {
   const canvasElements = document.querySelectorAll('canvas');
   if (canvasElements.length === 0) {
@@ -90492,8 +90638,8 @@ const patchCanvasElements = async (document, uid) => {
   const instances = [];
   for (let i = 0; i < canvasElements.length; i++) {
     const element = canvasElements[i];
-    const width = element.getAttribute('width') || 300;
-    const height = element.getAttribute('height') || 300;
+    const width = toNumber(element.getAttribute('width') || 300);
+    const height = toNumber(element.getAttribute('height') || 300);
     element.width = width;
     element.height = height;
     const {
@@ -90502,6 +90648,8 @@ const patchCanvasElements = async (document, uid) => {
     } = await getOffscreenCanvas(width, height);
     const dataId = String(canvasId);
     element.__canvasId = canvasId;
+    element.__offscreenCanvas = offscreenCanvas;
+    element.dataset.id = dataId;
     const context = offscreenCanvas.getContext('2d');
     element.getContext = contextType => {
       if (contextType === '2d') {
@@ -90509,8 +90657,39 @@ const patchCanvasElements = async (document, uid) => {
       }
       return undefined;
     };
+
+    // Store dimension tracking
+    const dimensions = {
+      height,
+      width
+    };
+
+    // Override width property to detect changes
+    let widthValue = width;
+    Object.defineProperty(element, 'width', {
+      configurable: true,
+      enumerable: true,
+      get: () => widthValue,
+      set: newWidth => {
+        widthValue = toNumber(newWidth);
+        element.__offscreenCanvas.width = widthValue;
+      }
+    });
+
+    // Override height property to detect changes
+    let heightValue = height;
+    Object.defineProperty(element, 'height', {
+      configurable: true,
+      enumerable: true,
+      get: () => heightValue,
+      set: newHeight => {
+        heightValue = toNumber(newHeight);
+        element.__offscreenCanvas.height = heightValue;
+      }
+    });
     instances.push({
       dataId,
+      dimensions,
       element,
       offscreenCanvas
     });
@@ -90538,15 +90717,15 @@ const updateContent = async (state, uri) => {
       scripts
     } = parseResult;
 
-    // If scripts are present, execute them via happy-dom and re-serialize the DOM
-    if (scripts.length > 0) {
+    // If scripts are present and not using sandbox worker, execute them via happy-dom and re-serialize the DOM
+    if (scripts.length > 0 && !state.useSandboxWorker) {
       try {
         const {
           document: happyDomDocument,
           window: happyDomWindow
         } = createWindow(content);
         await patchCanvasElements(happyDomDocument, state.uid);
-        executeScripts(happyDomWindow, happyDomDocument, scripts);
+        executeScripts(happyDomWindow, happyDomDocument, scripts, state.width, state.height);
         const elementMap = new Map();
         const serialized = serialize(happyDomDocument, elementMap);
         parsedDom = serialized.dom;
@@ -90556,6 +90735,7 @@ const updateContent = async (state, uri) => {
           elementMap,
           window: happyDomWindow
         });
+        observe(state.uid, happyDomDocument, happyDomWindow);
       } catch (error) {
         console.error(error);
         // If script execution fails, fall back to static HTML parsing
@@ -90611,11 +90791,26 @@ const dispatchInputEvent = (element, window) => {
   dispatchEvent(element, inputEvent);
 };
 
-const handleInput = (state, hdId, value) => {
-  // console.log('input,', hdId, value)
-  if (!hdId) {
-    return state;
-  }
+const handleInputSandbox = async (state, hdId, value) => {
+  const {
+    sandboxRpc,
+    uid
+  } = state;
+  await sandboxRpc.invoke('SandBox.handleInput', uid, hdId, value);
+  const serialized = await sandboxRpc.invoke('SandBox.getSerializedDom', uid);
+  const parsedDom = serialized.dom;
+  const {
+    css
+  } = serialized;
+  const parsedNodesChildNodeCount = getParsedNodesChildNodeCount(parsedDom);
+  return {
+    ...state,
+    css,
+    parsedDom,
+    parsedNodesChildNodeCount
+  };
+};
+const handleInputLocal = (state, hdId, value) => {
   const happyDomInstance = get(state.uid);
   if (!happyDomInstance) {
     return state;
@@ -90624,18 +90819,10 @@ const handleInput = (state, hdId, value) => {
   if (!element) {
     return state;
   }
-
-  // console.log({ element })
-  // Update the element's value from the preview
   element.value = value;
-  // Dispatch input event in happy-dom so event listeners fire
   dispatchInputEvent(element, happyDomInstance.window);
-
-  // Re-serialize the (potentially mutated) DOM
   const elementMap = new Map();
   const serialized = serialize(happyDomInstance.document, elementMap);
-
-  // Update happy-dom state with new element map
   set$1(state.uid, {
     document: happyDomInstance.document,
     elementMap,
@@ -90653,6 +90840,15 @@ const handleInput = (state, hdId, value) => {
     parsedNodesChildNodeCount
   };
 };
+const handleInput = (state, hdId, value) => {
+  if (!hdId) {
+    return state;
+  }
+  if (state.useSandboxWorker) {
+    return handleInputSandbox(state, hdId, value);
+  }
+  return handleInputLocal(state, hdId, value);
+};
 
 const dispatchKeydownEvent = (element, window, key, code) => {
   const keydownEvent = new window.KeyboardEvent('keydown', {
@@ -90663,7 +90859,90 @@ const dispatchKeydownEvent = (element, window, key, code) => {
   dispatchEvent(element, keydownEvent);
 };
 
+const handleKeydownSandbox = async (state, hdId, key, code) => {
+  const {
+    sandboxRpc,
+    uid
+  } = state;
+  await sandboxRpc.invoke('SandBox.handleKeyDown', uid, hdId, key, code);
+  const serialized = await sandboxRpc.invoke('SandBox.getSerializedDom', uid);
+  const parsedDom = serialized.dom;
+  const {
+    css
+  } = serialized;
+  const parsedNodesChildNodeCount = getParsedNodesChildNodeCount(parsedDom);
+  return {
+    ...state,
+    css,
+    parsedDom,
+    parsedNodesChildNodeCount
+  };
+};
+const handleKeydownLocal = (state, hdId, key, code) => {
+  const happyDomInstance = get(state.uid);
+  if (!happyDomInstance) {
+    return state;
+  }
+  const element = hdId ? happyDomInstance.elementMap.get(hdId) : happyDomInstance.document;
+  if (!element) {
+    return state;
+  }
+  dispatchKeydownEvent(element, happyDomInstance.window, key, code);
+  const elementMap = new Map();
+  const serialized = serialize(happyDomInstance.document, elementMap);
+  set$1(state.uid, {
+    document: happyDomInstance.document,
+    elementMap,
+    window: happyDomInstance.window
+  });
+  const parsedDom = serialized.dom;
+  const {
+    css
+  } = serialized;
+  const parsedNodesChildNodeCount = getParsedNodesChildNodeCount(parsedDom);
+  return {
+    ...state,
+    css,
+    parsedDom,
+    parsedNodesChildNodeCount
+  };
+};
 const handleKeydown = (state, hdId, key, code) => {
+  if (state.useSandboxWorker) {
+    return handleKeydownSandbox(state, hdId, key, code);
+  }
+  return handleKeydownLocal(state, hdId, key, code);
+};
+
+const dispatchKeyupEvent = (element, window, key, code) => {
+  const keyupEvent = new window.KeyboardEvent('keyup', {
+    bubbles: true,
+    code,
+    key
+  });
+  dispatchEvent(element, keyupEvent);
+};
+
+const handleKeyupSandbox = async (state, hdId, key, code) => {
+  const {
+    sandboxRpc,
+    uid
+  } = state;
+  await sandboxRpc.invoke('SandBox.handleKeyUp', uid, hdId, key, code);
+  const serialized = await sandboxRpc.invoke('SandBox.getSerializedDom', uid);
+  const parsedDom = serialized.dom;
+  const {
+    css
+  } = serialized;
+  const parsedNodesChildNodeCount = getParsedNodesChildNodeCount(parsedDom);
+  return {
+    ...state,
+    css,
+    parsedDom,
+    parsedNodesChildNodeCount
+  };
+};
+const handleKeyupLocal = (state, hdId, key, code) => {
   const happyDomInstance = get(state.uid);
   if (!happyDomInstance) {
     return state;
@@ -90672,15 +90951,211 @@ const handleKeydown = (state, hdId, key, code) => {
   if (!element) {
     return state;
   }
+  dispatchKeyupEvent(element, happyDomInstance.window, key, code);
+  const elementMap = new Map();
+  const serialized = serialize(happyDomInstance.document, elementMap);
+  set$1(state.uid, {
+    document: happyDomInstance.document,
+    elementMap,
+    window: happyDomInstance.window
+  });
+  const parsedDom = serialized.dom;
+  const {
+    css
+  } = serialized;
+  const parsedNodesChildNodeCount = getParsedNodesChildNodeCount(parsedDom);
+  return {
+    ...state,
+    css,
+    parsedDom,
+    parsedNodesChildNodeCount
+  };
+};
+const handleKeyup = (state, hdId, key, code) => {
+  if (state.useSandboxWorker) {
+    return handleKeyupSandbox(state, hdId, key, code);
+  }
+  return handleKeyupLocal(state, hdId, key, code);
+};
 
-  // Dispatch keydown event in happy-dom so event listeners fire
-  dispatchKeydownEvent(element, happyDomInstance.window, key, code);
+const dispatchMousedownEvent = (element, window, clientX = 0, clientY = 0) => {
+  const mousedownEvent = new window.MouseEvent('mousedown', {
+    bubbles: true,
+    clientX,
+    clientY
+  });
+  dispatchEvent(element, mousedownEvent);
+};
+
+const handleMousedownSandbox = async (state, hdId) => {
+  const {
+    sandboxRpc,
+    uid
+  } = state;
+  await sandboxRpc.invoke('SandBox.handleMousedown', uid, hdId);
+  const serialized = await sandboxRpc.invoke('SandBox.getSerializedDom', uid);
+  const parsedDom = serialized.dom;
+  const {
+    css
+  } = serialized;
+  const parsedNodesChildNodeCount = getParsedNodesChildNodeCount(parsedDom);
+  return {
+    ...state,
+    css,
+    parsedDom,
+    parsedNodesChildNodeCount
+  };
+};
+const handleMousedownLocal = (state, hdId, clientX, clientY) => {
+  const happyDomInstance = get(state.uid);
+  if (!happyDomInstance) {
+    return state;
+  }
+  const element = happyDomInstance.elementMap.get(hdId);
+  if (!element) {
+    return state;
+  }
+  const adjustedClientX = clientX - state.x;
+  const adjustedClientY = clientY - state.y;
+  dispatchMousedownEvent(element, happyDomInstance.window, adjustedClientX, adjustedClientY);
+  const elementMap = new Map();
+  const serialized = serialize(happyDomInstance.document, elementMap);
+  set$1(state.uid, {
+    document: happyDomInstance.document,
+    elementMap,
+    window: happyDomInstance.window
+  });
+  const parsedDom = serialized.dom;
+  const {
+    css
+  } = serialized;
+  const parsedNodesChildNodeCount = getParsedNodesChildNodeCount(parsedDom);
+  return {
+    ...state,
+    css,
+    parsedDom,
+    parsedNodesChildNodeCount
+  };
+};
+const handleMousedown = (state, hdId, clientX, clientY) => {
+  if (!hdId) {
+    return state;
+  }
+  if (state.useSandboxWorker) {
+    return handleMousedownSandbox(state, hdId);
+  }
+  return handleMousedownLocal(state, hdId, clientX, clientY);
+};
 
-  // Re-serialize the (potentially mutated) DOM
+const dispatchMousemoveEvent = (element, window, clientX = 0, clientY = 0) => {
+  const mousemoveEvent = new window.MouseEvent('mousemove', {
+    bubbles: true,
+    clientX,
+    clientY
+  });
+  dispatchEvent(element, mousemoveEvent);
+};
+
+const handleMousemoveSandbox = async (state, hdId) => {
+  const {
+    sandboxRpc,
+    uid
+  } = state;
+  await sandboxRpc.invoke('SandBox.handleMousemove', uid, hdId);
+  const serialized = await sandboxRpc.invoke('SandBox.getSerializedDom', uid);
+  const parsedDom = serialized.dom;
+  const {
+    css
+  } = serialized;
+  const parsedNodesChildNodeCount = getParsedNodesChildNodeCount(parsedDom);
+  return {
+    ...state,
+    css,
+    parsedDom,
+    parsedNodesChildNodeCount
+  };
+};
+const handleMousemoveLocal = (state, hdId, clientX, clientY) => {
+  const happyDomInstance = get(state.uid);
+  if (!happyDomInstance) {
+    return state;
+  }
+  const element = happyDomInstance.elementMap.get(hdId);
+  if (!element) {
+    return state;
+  }
+  const adjustedClientX = clientX - state.x;
+  const adjustedClientY = clientY - state.y;
+  dispatchMousemoveEvent(element, happyDomInstance.window, adjustedClientX, adjustedClientY);
   const elementMap = new Map();
   const serialized = serialize(happyDomInstance.document, elementMap);
+  set$1(state.uid, {
+    document: happyDomInstance.document,
+    elementMap,
+    window: happyDomInstance.window
+  });
+  const parsedDom = serialized.dom;
+  const {
+    css
+  } = serialized;
+  const parsedNodesChildNodeCount = getParsedNodesChildNodeCount(parsedDom);
+  return {
+    ...state,
+    css,
+    parsedDom,
+    parsedNodesChildNodeCount
+  };
+};
+const handleMousemove = (state, hdId, clientX, clientY) => {
+  if (!hdId) {
+    return state;
+  }
+  if (state.useSandboxWorker) {
+    return handleMousemoveSandbox(state, hdId);
+  }
+  return handleMousemoveLocal(state, hdId, clientX, clientY);
+};
+
+const dispatchMouseupEvent = (element, window, clientX = 0, clientY = 0) => {
+  const mouseupEvent = new window.MouseEvent('mouseup', {
+    bubbles: true,
+    clientX,
+    clientY
+  });
+  dispatchEvent(element, mouseupEvent);
+};
 
-  // Update happy-dom state with new element map
+const handleMouseupSandbox = async (state, hdId) => {
+  const {
+    sandboxRpc,
+    uid
+  } = state;
+  await sandboxRpc.invoke('SandBox.handleMouseup', uid, hdId);
+  const serialized = await sandboxRpc.invoke('SandBox.getSerializedDom', uid);
+  const parsedDom = serialized.dom;
+  const {
+    css
+  } = serialized;
+  const parsedNodesChildNodeCount = getParsedNodesChildNodeCount(parsedDom);
+  return {
+    ...state,
+    css,
+    parsedDom,
+    parsedNodesChildNodeCount
+  };
+};
+const handleMouseupLocal = (state, hdId) => {
+  const happyDomInstance = get(state.uid);
+  if (!happyDomInstance) {
+    return state;
+  }
+  const element = happyDomInstance.elementMap.get(hdId);
+  if (!element) {
+    return state;
+  }
+  dispatchMouseupEvent(element, happyDomInstance.window);
+  const elementMap = new Map();
+  const serialized = serialize(happyDomInstance.document, elementMap);
   set$1(state.uid, {
     document: happyDomInstance.document,
     elementMap,
@@ -90698,6 +91173,15 @@ const handleKeydown = (state, hdId, key, code) => {
     parsedNodesChildNodeCount
   };
 };
+const handleMouseup = (state, hdId) => {
+  if (!hdId) {
+    return state;
+  }
+  if (state.useSandboxWorker) {
+    return handleMouseupSandbox(state, hdId);
+  }
+  return handleMouseupLocal(state, hdId);
+};
 
 const loadContent = async state => {
   // Try to register to receive editor change notifications from the editor worker.
@@ -90727,15 +91211,29 @@ const loadContent = async state => {
     parsedNodesChildNodeCount: state.parsedNodesChildNodeCount,
     scripts: state.scripts
   };
+  const {
+    sandboxRpc
+  } = state;
+  let finalParsedDom = parsedDom;
+  let finalCss = css;
+  let finalParsedNodesChildNodeCount = parsedNodesChildNodeCount;
+  if (state.useSandboxWorker && scripts.length > 0) {
+    await sandboxRpc.invoke('SandBox.initialize', state.uid, content, scripts);
+    const serialized = await sandboxRpc.invoke('SandBox.getSerializedDom', state.uid);
+    finalParsedDom = serialized.dom;
+    finalCss = serialized.css;
+    finalParsedNodesChildNodeCount = finalParsedDom.length > 0 ? finalParsedDom[0].childCount || 0 : 0;
+  }
   return {
     ...state,
     content,
-    css,
+    css: finalCss,
     errorCount: 0,
     errorMessage,
     initial: false,
-    parsedDom,
-    parsedNodesChildNodeCount,
+    parsedDom: finalParsedDom,
+    parsedNodesChildNodeCount: finalParsedNodesChildNodeCount,
+    sandboxRpc,
     scripts,
     warningCount: 1
   };
@@ -90789,6 +91287,10 @@ const renderCss = (oldState, newState) => {
 const HandleInput = 4;
 const HandleClick = 11;
 const HandleKeydown = 12;
+const HandleKeyup = 13;
+const HandleMousedown = 14;
+const HandleMousemove = 15;
+const HandleMouseup = 16;
 
 const getEmptyPreviewDom = () => {
   return [{
@@ -90822,6 +91324,10 @@ const getPreviewDom = state => {
       onClick: HandleClick,
       onInput: HandleInput,
       onKeyDown: HandleKeydown,
+      onKeyUp: HandleKeyup,
+      onMouseDown: HandleMousedown,
+      onMouseMove: HandleMousemove,
+      onMouseUp: HandleMouseup,
       tabIndex: 0,
       type: Div$1
     }, ...parsedDom];
@@ -90832,6 +91338,10 @@ const getPreviewDom = state => {
     onClick: HandleClick,
     onInput: HandleInput,
     onKeyDown: HandleKeydown,
+    onKeyUp: HandleKeyup,
+    onMouseDown: HandleMousedown,
+    onMouseMove: HandleMousemove,
+    onMouseUp: HandleMouseup,
     tabIndex: 0,
     type: Div$1
   }, {
@@ -90901,7 +91411,7 @@ const renderEventListeners = () => {
   return [{
     capture: true,
     name: HandleClick,
-    params: ['handleClick', 'event.target.dataset.id']
+    params: ['handleClick', 'event.target.dataset.id', 'event.clientX', 'event.clientY']
   }, {
     capture: true,
     name: HandleInput,
@@ -90910,6 +91420,22 @@ const renderEventListeners = () => {
     capture: true,
     name: HandleKeydown,
     params: ['handleKeyDown', 'event.target.dataset.id', 'event.key', 'event.code']
+  }, {
+    capture: true,
+    name: HandleKeyup,
+    params: ['handleKeyUp', 'event.target.dataset.id', 'event.key', 'event.code']
+  }, {
+    capture: true,
+    name: HandleMousedown,
+    params: ['handleMousedown', 'event.target.dataset.id', 'event.clientX', 'event.clientY']
+  }, {
+    capture: true,
+    name: HandleMousemove,
+    params: ['handleMousemove', 'event.target.dataset.id', 'event.clientX', 'event.clientY']
+  }, {
+    capture: true,
+    name: HandleMouseup,
+    params: ['handleMouseup', 'event.target.dataset.id']
   }];
 };
 
@@ -90969,6 +91495,10 @@ const commandMap = {
   'Preview.handleFileEdited': wrapCommand(handleFileEdited),
   'Preview.handleInput': wrapCommand(handleInput),
   'Preview.handleKeyDown': wrapCommand(handleKeydown),
+  'Preview.handleKeyUp': wrapCommand(handleKeyup),
+  'Preview.handleMousedown': wrapCommand(handleMousedown),
+  'Preview.handleMousemove': wrapCommand(handleMousemove),
+  'Preview.handleMouseup': wrapCommand(handleMouseup),
   'Preview.loadContent': wrapCommand(loadContent),
   'Preview.render2': render2,
   'Preview.renderEventListeners': renderEventListeners,