@lvce-editor/preview-sandbox-worker 1.1.0 → 1.2.0

package/dist/previewSandBoxWorkerMain.js

@@ -96,12 +96,6 @@ const array = value => {
     throw new AssertionError('expected value to be of type array');
   }
 };
-const string = value => {
-  const type = getType(value);
-  if (type !== String$1) {
-    throw new AssertionError('expected value to be of type string');
-  }
-};
 
 const isMessagePort = value => {
   return value && value instanceof MessagePort;
@@ -514,7 +508,7 @@ const IpcParentWithMessagePort$1 = {
 
 const Two$1 = '2.0';
 const callbacks$1 = Object.create(null);
-const get$3 = id => {
+const get$2 = id => {
   return callbacks$1[id];
 };
 const remove$1 = id => {
@@ -663,7 +657,7 @@ const warn = (...args) => {
   console.warn(...args);
 };
 const resolve = (id, response) => {
-  const fn = get$3(id);
+  const fn = get$2(id);
   if (!fn) {
     console.log(response);
     warn(`callback ${id} may already be disposed`);
@@ -713,7 +707,7 @@ const getErrorProperty = (error, prettyError) => {
     }
   };
 };
-const create$1$1 = (id, error) => {
+const create$1 = (id, error) => {
   return {
     jsonrpc: Two$1,
     id,
@@ -724,9 +718,9 @@ const getErrorResponse = (id, error, preparePrettyError, logError) => {
   const prettyError = preparePrettyError(error);
   logError(error, prettyError);
   const errorProperty = getErrorProperty(error, prettyError);
-  return create$1$1(id, errorProperty);
+  return create$1(id, errorProperty);
 };
-const create$4 = (message, result) => {
+const create$3 = (message, result) => {
   return {
     jsonrpc: Two$1,
     id: message.id,
@@ -735,7 +729,7 @@ const create$4 = (message, result) => {
 };
 const getSuccessResponse = (message, result) => {
   const resultProperty = result ?? null;
-  return create$4(message, resultProperty);
+  return create$3(message, resultProperty);
 };
 const getErrorResponseSimple = (id, error) => {
   return {
@@ -963,53 +957,6 @@ const listen$1 = async (module, options) => {
   const ipc = module.wrap(rawIpc);
   return ipc;
 };
-
-/* eslint-disable @typescript-eslint/no-misused-promises */
-
-const createSharedLazyRpc = factory => {
-  let rpcPromise;
-  const getOrCreate = () => {
-    if (!rpcPromise) {
-      rpcPromise = factory();
-    }
-    return rpcPromise;
-  };
-  return {
-    async dispose() {
-      const rpc = await getOrCreate();
-      await rpc.dispose();
-    },
-    async invoke(method, ...params) {
-      const rpc = await getOrCreate();
-      return rpc.invoke(method, ...params);
-    },
-    async invokeAndTransfer(method, ...params) {
-      const rpc = await getOrCreate();
-      return rpc.invokeAndTransfer(method, ...params);
-    },
-    async send(method, ...params) {
-      const rpc = await getOrCreate();
-      rpc.send(method, ...params);
-    }
-  };
-};
-const create$j = async ({
-  commandMap,
-  isMessagePortOpen,
-  send
-}) => {
-  return createSharedLazyRpc(() => {
-    return create$3({
-      commandMap,
-      isMessagePortOpen,
-      send
-    });
-  });
-};
-const LazyTransferMessagePortRpcParent = {
-  __proto__: null,
-  create: create$j
-};
 const create$5 = async ({
   commandMap,
   isMessagePortOpen = true,
@@ -1031,23 +978,7 @@ const PlainMessagePortRpc = {
   __proto__: null,
   create: create$5
 };
-const create$3 = async ({
-  commandMap,
-  isMessagePortOpen,
-  send
-}) => {
-  const {
-    port1,
-    port2
-  } = new MessageChannel();
-  await send(port1);
-  return create$5({
-    commandMap,
-    isMessagePortOpen,
-    messagePort: port2
-  });
-};
-const create$2$1 = async ({
+const create$2 = async ({
   commandMap
 }) => {
   // TODO create a commandMap per rpc instance
@@ -1059,7 +990,7 @@ const create$2$1 = async ({
 };
 const WebWorkerRpcClient = {
   __proto__: null,
-  create: create$2$1
+  create: create$2
 };
 const createMockRpc = ({
   commandMap
@@ -1089,7 +1020,7 @@ const Span$1 = 8;
 const Table$1 = 9;
 const TBody$1 = 10;
 const Td$1 = 11;
-const Text$2 = 12;
+const Text = 12;
 const Th$1 = 13;
 const THead$1 = 14;
 const Tr$1 = 15;
@@ -1136,17 +1067,13 @@ const Html = 73;
 const Canvas$1 = 77;
 const Reference = 100;
 
-const EditorWorker = 99;
 const RendererWorker = 1;
 
-const SetDom2 = 'Viewlet.setDom2';
-const SetPatches = 'Viewlet.setPatches';
-
 const rpcs = Object.create(null);
-const set$5 = (id, rpc) => {
+const set$3 = (id, rpc) => {
   rpcs[id] = rpc;
 };
-const get$2 = id => {
+const get$1 = id => {
   return rpcs[id];
 };
 const remove = id => {
@@ -1154,21 +1081,21 @@ const remove = id => {
 };
 
 /* eslint-disable  @typescript-eslint/explicit-function-return-type */
-const create$2 = rpcId => {
+const create = rpcId => {
   return {
     async dispose() {
-      const rpc = get$2(rpcId);
+      const rpc = get$1(rpcId);
       await rpc.dispose();
     },
     // @ts-ignore
     invoke(method, ...params) {
-      const rpc = get$2(rpcId);
+      const rpc = get$1(rpcId);
       // @ts-ignore
       return rpc.invoke(method, ...params);
     },
     // @ts-ignore
     invokeAndTransfer(method, ...params) {
-      const rpc = get$2(rpcId);
+      const rpc = get$1(rpcId);
       // @ts-ignore
       return rpc.invokeAndTransfer(method, ...params);
     },
@@ -1176,7 +1103,7 @@ const create$2 = rpcId => {
       const mockRpc = createMockRpc({
         commandMap
       });
-      set$5(rpcId, mockRpc);
+      set$3(rpcId, mockRpc);
       // @ts-ignore
       mockRpc[Symbol.dispose] = () => {
         remove(rpcId);
@@ -1185,201 +1112,20 @@ const create$2 = rpcId => {
       return mockRpc;
     },
     set(rpc) {
-      set$5(rpcId, rpc);
+      set$3(rpcId, rpc);
     }
   };
 };
 
-const {
-  invoke: invoke$1,
-  set: set$4
-} = create$2(EditorWorker);
-
 const {
   invoke,
-  invokeAndTransfer,
-  set: set$3
-} = create$2(RendererWorker);
-const sendMessagePortToEditorWorker = async (port, rpcId) => {
-  const command = 'HandleMessagePort.handleMessagePort';
-  await invokeAndTransfer('SendMessagePortToExtensionHostWorker.sendMessagePortToEditorWorker', port, command, rpcId);
-};
-const readFile = async uri => {
-  return invoke('FileSystem.readFile', uri);
-};
+  set: set$2
+} = create(RendererWorker);
 
-const toCommandId = key => {
-  const dotIndex = key.indexOf('.');
-  return key.slice(dotIndex + 1);
-};
-const create$1 = () => {
-  const states = Object.create(null);
-  const commandMapRef = {};
-  return {
-    clear() {
-      for (const key of Object.keys(states)) {
-        delete states[key];
-      }
-    },
-    diff(uid, modules, numbers) {
-      const {
-        newState,
-        oldState
-      } = states[uid];
-      const diffResult = [];
-      for (let i = 0; i < modules.length; i++) {
-        const fn = modules[i];
-        if (!fn(oldState, newState)) {
-          diffResult.push(numbers[i]);
-        }
-      }
-      return diffResult;
-    },
-    dispose(uid) {
-      delete states[uid];
-    },
-    get(uid) {
-      return states[uid];
-    },
-    getCommandIds() {
-      const keys = Object.keys(commandMapRef);
-      const ids = keys.map(toCommandId);
-      return ids;
-    },
-    getKeys() {
-      return Object.keys(states).map(key => {
-        return Number.parseInt(key);
-      });
-    },
-    registerCommands(commandMap) {
-      Object.assign(commandMapRef, commandMap);
-    },
-    set(uid, oldState, newState) {
-      states[uid] = {
-        newState,
-        oldState
-      };
-    },
-    wrapCommand(fn) {
-      const wrapped = async (uid, ...args) => {
-        const {
-          newState,
-          oldState
-        } = states[uid];
-        const newerState = await fn(newState, ...args);
-        if (oldState === newerState || newState === newerState) {
-          return;
-        }
-        const latestOld = states[uid];
-        const latestNew = {
-          ...latestOld.newState,
-          ...newerState
-        };
-        states[uid] = {
-          newState: latestNew,
-          oldState: latestOld.oldState
-        };
-      };
-      return wrapped;
-    },
-    wrapGetter(fn) {
-      const wrapped = (uid, ...args) => {
-        const {
-          newState
-        } = states[uid];
-        return fn(newState, ...args);
-      };
-      return wrapped;
-    }
-  };
-};
 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,
-  registerCommands,
-  set: set$2,
-  wrapCommand} = create$1();
-
-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,
-    useSandboxWorker: false,
-    warningCount: 0,
-    width,
-    x,
-    y
-  };
-  set$2(uid, state, state);
-};
-
-const iEqual = (oldState, newState) => {
-  if (oldState.css.length !== newState.css.length) {
-    return false;
-  }
-  for (let i = 0; i < oldState.css.length; i++) {
-    if (oldState.css[i] !== newState.css[i]) {
-      return false;
-    }
-  }
-  return true;
-};
-
-const isEqual = (oldState, newState) => {
-  return oldState.warningCount === newState.warningCount && oldState.initial === newState.initial && oldState.content === newState.content && oldState.parsedDom === newState.parsedDom && oldState.parsedNodesChildNodeCount === newState.parsedNodesChildNodeCount && oldState.css === newState.css && oldState.scripts === newState.scripts;
-};
-
-const RenderItems = 4;
-const RenderCss = 10;
-const RenderIncremental = 11;
-
-const modules = [isEqual, iEqual];
-const numbers = [RenderIncremental, RenderCss];
-
-const diff = (oldState, newState) => {
-  const diffResult = [];
-  for (let i = 0; i < modules.length; i++) {
-    const fn = modules[i];
-    if (!fn(oldState, newState)) {
-      diffResult.push(numbers[i]);
-    }
-  }
-  return diffResult;
-};
-
-const diff2 = uid => {
-  const {
-    newState,
-    oldState
-  } = get$1(uid);
-  const result = diff(oldState, newState);
-  return result;
-};
-
 /* eslint-disable @typescript-eslint/prefer-readonly-parameter-types */
 const callBacks = Object.create(null);
 let id = 0;
@@ -1405,6 +1151,7 @@ const executeCallback = (id, ...args) => {
   }
 };
 const getOffscreenCanvas = async (width, height) => {
+  // TODO ask preview worker
   const {
     id,
     promise
@@ -1417,61 +1164,6 @@ const getOffscreenCanvas = async (width, height) => {
   };
 };
 
-const dispatchEvent = (element, event) => {
-  element.dispatchEvent(event);
-
-  // Also invoke direct on* handler if set (e.g. element.onclick = function(){})
-  const handlerName = `on${event.type}`;
-  const handler = element[handlerName];
-  if (typeof handler === 'function') {
-    handler.call(element, event);
-  } else if (handler === null || handler === undefined) {
-    if (!element.getAttribute) {
-      return;
-    }
-    // Check if there's an inline HTML attribute that wasn't converted to a property
-    const attrValue = element.getAttribute(handlerName);
-    if (attrValue && typeof attrValue === 'string' && element.ownerDocument && element.ownerDocument.defaultView) {
-      const window = element.ownerDocument.defaultView;
-      // Handle inline event handlers like onclick="someFunction(2)"
-      // Evaluate in the context of the window so functions are in scope
-      // eslint-disable-next-line @typescript-eslint/no-implied-eval
-      const fn = new Function('event', `with(this) { ${attrValue} }`);
-      fn.call(window, event);
-    }
-  }
-};
-
-const dispatchClickEvent = (element, window) => {
-  const clickEvent = new window.MouseEvent('click', {
-    bubbles: true
-  });
-  dispatchEvent(element, clickEvent);
-};
-
-const getParsedNodesChildNodeCount = parsedDom => {
-  array(parsedDom);
-  const rootCountFromParse = parsedDom.rootChildCount;
-  if (typeof rootCountFromParse === 'number') {
-    return rootCountFromParse;
-  }
-  let rootChildCount = 0;
-  let i = 0;
-  while (i < parsedDom.length) {
-    rootChildCount++;
-
-    // skip the entire subtree of the current node
-    let toSkip = parsedDom[i].childCount;
-    i++;
-    while (toSkip > 0 && i < parsedDom.length) {
-      toSkip -= 1;
-      toSkip += parsedDom[i].childCount;
-      i++;
-    }
-  }
-  return rootChildCount;
-};
-
 /* eslint-disable @typescript-eslint/prefer-readonly-parameter-types */
 
 const states$1 = new Map();
@@ -1486,298 +1178,10 @@ const text = data => {
   return {
     childCount: 0,
     text: data,
-    type: Text$2
-  };
-};
-
-const SetText = 1;
-const Replace = 2;
-const SetAttribute = 3;
-const RemoveAttribute = 4;
-const Add = 6;
-const NavigateChild = 7;
-const NavigateParent = 8;
-const RemoveChild = 9;
-const NavigateSibling = 10;
-const SetReferenceNodeUid = 11;
-
-const isKey = key => {
-  return key !== 'type' && key !== 'childCount';
-};
-
-const getKeys = node => {
-  const keys = Object.keys(node).filter(isKey);
-  return keys;
-};
-
-const arrayToTree = nodes => {
-  const result = [];
-  let i = 0;
-  while (i < nodes.length) {
-    const node = nodes[i];
-    const {
-      children,
-      nodesConsumed
-    } = getChildrenWithCount(nodes, i + 1, node.childCount || 0);
-    result.push({
-      node,
-      children
-    });
-    i += 1 + nodesConsumed;
-  }
-  return result;
-};
-const getChildrenWithCount = (nodes, startIndex, childCount) => {
-  if (childCount === 0) {
-    return {
-      children: [],
-      nodesConsumed: 0
-    };
-  }
-  const children = [];
-  let i = startIndex;
-  let remaining = childCount;
-  let totalConsumed = 0;
-  while (remaining > 0 && i < nodes.length) {
-    const node = nodes[i];
-    const nodeChildCount = node.childCount || 0;
-    const {
-      children: nodeChildren,
-      nodesConsumed
-    } = getChildrenWithCount(nodes, i + 1, nodeChildCount);
-    children.push({
-      node,
-      children: nodeChildren
-    });
-    const nodeSize = 1 + nodesConsumed;
-    i += nodeSize;
-    totalConsumed += nodeSize;
-    remaining--;
-  }
-  return {
-    children,
-    nodesConsumed: totalConsumed
+    type: Text
   };
 };
 
-const compareNodes = (oldNode, newNode) => {
-  const patches = [];
-  // Check if node type changed - return null to signal incompatible nodes
-  // (caller should handle this with a Replace operation)
-  if (oldNode.type !== newNode.type) {
-    return null;
-  }
-  // Handle reference nodes - special handling for uid changes
-  if (oldNode.type === Reference) {
-    if (oldNode.uid !== newNode.uid) {
-      patches.push({
-        type: SetReferenceNodeUid,
-        uid: newNode.uid
-      });
-    }
-    return patches;
-  }
-  // Handle text nodes
-  if (oldNode.type === Text$2 && newNode.type === Text$2) {
-    if (oldNode.text !== newNode.text) {
-      patches.push({
-        type: SetText,
-        value: newNode.text
-      });
-    }
-    return patches;
-  }
-  // Compare attributes
-  const oldKeys = getKeys(oldNode);
-  const newKeys = getKeys(newNode);
-  // Check for attribute changes
-  for (const key of newKeys) {
-    if (oldNode[key] !== newNode[key]) {
-      patches.push({
-        type: SetAttribute,
-        key,
-        value: newNode[key]
-      });
-    }
-  }
-  // Check for removed attributes
-  for (const key of oldKeys) {
-    if (!(key in newNode)) {
-      patches.push({
-        type: RemoveAttribute,
-        key
-      });
-    }
-  }
-  return patches;
-};
-
-const treeToArray = node => {
-  const result = [node.node];
-  for (const child of node.children) {
-    result.push(...treeToArray(child));
-  }
-  return result;
-};
-
-const diffChildren = (oldChildren, newChildren, patches) => {
-  const maxLength = Math.max(oldChildren.length, newChildren.length);
-  // Track where we are: -1 means at parent, >= 0 means at child index
-  let currentChildIndex = -1;
-  // Collect indices of children to remove (we'll add these patches at the end in reverse order)
-  const indicesToRemove = [];
-  for (let i = 0; i < maxLength; i++) {
-    const oldNode = oldChildren[i];
-    const newNode = newChildren[i];
-    if (!oldNode && !newNode) {
-      continue;
-    }
-    if (!oldNode) {
-      // Add new node - we should be at the parent
-      if (currentChildIndex >= 0) {
-        // Navigate back to parent
-        patches.push({
-          type: NavigateParent
-        });
-        currentChildIndex = -1;
-      }
-      // Flatten the entire subtree so renderInternal can handle it
-      const flatNodes = treeToArray(newNode);
-      patches.push({
-        type: Add,
-        nodes: flatNodes
-      });
-    } else if (newNode) {
-      // Compare nodes to see if we need any patches
-      const nodePatches = compareNodes(oldNode.node, newNode.node);
-      // If nodePatches is null, the node types are incompatible - need to replace
-      if (nodePatches === null) {
-        // Navigate to this child
-        if (currentChildIndex === -1) {
-          patches.push({
-            type: NavigateChild,
-            index: i
-          });
-          currentChildIndex = i;
-        } else if (currentChildIndex !== i) {
-          patches.push({
-            type: NavigateSibling,
-            index: i
-          });
-          currentChildIndex = i;
-        }
-        // Replace the entire subtree
-        const flatNodes = treeToArray(newNode);
-        patches.push({
-          type: Replace,
-          nodes: flatNodes
-        });
-        // After replace, we're at the new element (same position)
-        continue;
-      }
-      // Check if we need to recurse into children
-      const hasChildrenToCompare = oldNode.children.length > 0 || newNode.children.length > 0;
-      // Only navigate to this element if we need to do something
-      if (nodePatches.length > 0 || hasChildrenToCompare) {
-        // Navigate to this child if not already there
-        if (currentChildIndex === -1) {
-          patches.push({
-            type: NavigateChild,
-            index: i
-          });
-          currentChildIndex = i;
-        } else if (currentChildIndex !== i) {
-          patches.push({
-            type: NavigateSibling,
-            index: i
-          });
-          currentChildIndex = i;
-        }
-        // Apply node patches (these apply to the current element, not children)
-        if (nodePatches.length > 0) {
-          patches.push(...nodePatches);
-        }
-        // Compare children recursively
-        if (hasChildrenToCompare) {
-          diffChildren(oldNode.children, newNode.children, patches);
-        }
-      }
-    } else {
-      // Remove old node - collect the index for later removal
-      indicesToRemove.push(i);
-    }
-  }
-  // Navigate back to parent if we ended at a child
-  if (currentChildIndex >= 0) {
-    patches.push({
-      type: NavigateParent
-    });
-    currentChildIndex = -1;
-  }
-  // Add remove patches in reverse order (highest index first)
-  // This ensures indices remain valid as we remove
-  for (let j = indicesToRemove.length - 1; j >= 0; j--) {
-    patches.push({
-      type: RemoveChild,
-      index: indicesToRemove[j]
-    });
-  }
-};
-const diffTrees = (oldTree, newTree, patches, path) => {
-  // At the root level (path.length === 0), we're already AT the element
-  // So we compare the root node directly, then compare its children
-  if (path.length === 0 && oldTree.length === 1 && newTree.length === 1) {
-    const oldNode = oldTree[0];
-    const newNode = newTree[0];
-    // Compare root nodes
-    const nodePatches = compareNodes(oldNode.node, newNode.node);
-    // If nodePatches is null, the root node types are incompatible - need to replace
-    if (nodePatches === null) {
-      const flatNodes = treeToArray(newNode);
-      patches.push({
-        type: Replace,
-        nodes: flatNodes
-      });
-      return;
-    }
-    if (nodePatches.length > 0) {
-      patches.push(...nodePatches);
-    }
-    // Compare children
-    if (oldNode.children.length > 0 || newNode.children.length > 0) {
-      diffChildren(oldNode.children, newNode.children, patches);
-    }
-  } else {
-    // Non-root level or multiple root elements - use the regular comparison
-    diffChildren(oldTree, newTree, patches);
-  }
-};
-
-const removeTrailingNavigationPatches = patches => {
-  // Find the last non-navigation patch
-  let lastNonNavigationIndex = -1;
-  for (let i = patches.length - 1; i >= 0; i--) {
-    const patch = patches[i];
-    if (patch.type !== NavigateChild && patch.type !== NavigateParent && patch.type !== NavigateSibling) {
-      lastNonNavigationIndex = i;
-      break;
-    }
-  }
-  // Return patches up to and including the last non-navigation patch
-  return lastNonNavigationIndex === -1 ? [] : patches.slice(0, lastNonNavigationIndex + 1);
-};
-
-const diffTree = (oldNodes, newNodes) => {
-  // Step 1: Convert flat arrays to tree structures
-  const oldTree = arrayToTree(oldNodes);
-  const newTree = arrayToTree(newNodes);
-  // Step 3: Compare the trees
-  const patches = [];
-  diffTrees(oldTree, newTree, patches, []);
-  // Remove trailing navigation patches since they serve no purpose
-  return removeTrailingNavigationPatches(patches);
-};
-
 const Div = 'div';
 const H1 = 'h1';
 const H2 = 'h2';
@@ -1985,7 +1389,7 @@ const isDefaultAllowedAttribute = (attributeName, defaultAllowedAttributes) => {
 const TAGS_TO_SKIP = new Set(['script', 'meta', 'title']);
 
 // Tags to skip but process children
-const TAGS_TO_SKIP_TAG_ONLY$1 = new Set(['html', 'body', 'head']);
+const TAGS_TO_SKIP_TAG_ONLY = new Set(['html', 'body', 'head']);
 
 // Tags where we extract content as CSS
 const CSS_TAGS = new Set(['style']);
@@ -2026,7 +1430,7 @@ const serializeNode = (node, dom, css, context) => {
   }
 
   // For html/body tags, serialize children only
-  if (TAGS_TO_SKIP_TAG_ONLY$1.has(tagName)) {
+  if (TAGS_TO_SKIP_TAG_ONLY.has(tagName)) {
     let childCount = 0;
     const {
       childNodes
@@ -2136,62 +1540,260 @@ const serialize = (document, elementMap) => {
   };
 };
 
-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 getSerializedDom = uid => {
+  const item = get(uid);
+  if (!item) {
+    throw new Error(`No HappyDom instance found for uid ${uid}`);
+  }
   const {
-    css
-  } = serialized;
-  const parsedNodesChildNodeCount = getParsedNodesChildNodeCount(parsedDom);
-  return {
-    ...state,
-    css,
-    parsedDom,
-    parsedNodesChildNodeCount
-  };
+    document,
+    elementMap
+  } = item;
+  const serialized = serialize(document, elementMap);
+  return serialized;
+};
+
+const dispatchEvent = (element, event) => {
+  element.dispatchEvent(event);
+
+  // Also invoke direct on* handler if set (e.g. element.onclick = function(){})
+  const handlerName = `on${event.type}`;
+  const handler = element[handlerName];
+  if (typeof handler === 'function') {
+    handler.call(element, event);
+  } else if (handler === null || handler === undefined) {
+    if (!element.getAttribute) {
+      return;
+    }
+    // Check if there's an inline HTML attribute that wasn't converted to a property
+    const attrValue = element.getAttribute(handlerName);
+    if (attrValue && typeof attrValue === 'string' && element.ownerDocument && element.ownerDocument.defaultView) {
+      const window = element.ownerDocument.defaultView;
+      // Handle inline event handlers like onclick="someFunction(2)"
+      // Evaluate in the context of the window so functions are in scope
+      // eslint-disable-next-line @typescript-eslint/no-implied-eval
+      const fn = new Function('event', `with(this) { ${attrValue} }`);
+      fn.call(window, event);
+    }
+  }
+};
+
+const dispatchClickEvent = (element, window) => {
+  const clickEvent = new window.MouseEvent('click', {
+    bubbles: true
+  });
+  dispatchEvent(element, clickEvent);
 };
-const handleClickLocal = (state, hdId) => {
-  const happyDomInstance = get(state.uid);
+
+const handleClickLocal = (uid, hdId) => {
+  const happyDomInstance = get(uid);
   if (!happyDomInstance) {
-    return state;
+    return;
   }
   const element = happyDomInstance.elementMap.get(hdId);
   if (!element) {
-    return state;
+    return;
   }
   dispatchClickEvent(element, happyDomInstance.window);
   const elementMap = new Map();
-  const serialized = serialize(happyDomInstance.document, elementMap);
-  set$1(state.uid, {
+  set$1(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 handleClick = (state, hdId) => {
-  if (!hdId) {
-    return state;
+const handleClick = (uid, hdId) => {
+  return handleClickLocal(uid, hdId);
+};
+
+const dispatchInputEvent = (element, window) => {
+  const inputEvent = new window.Event('input', {
+    bubbles: true
+  });
+  dispatchEvent(element, inputEvent);
+};
+
+const handleInputLocal = (uid, hdId, value) => {
+  const happyDomInstance = get(uid);
+  if (!happyDomInstance) {
+    return;
+  }
+  const element = happyDomInstance.elementMap.get(hdId);
+  if (!element) {
+    return;
+  }
+  element.value = value;
+  dispatchInputEvent(element, happyDomInstance.window);
+  const elementMap = new Map();
+  set$1(uid, {
+    document: happyDomInstance.document,
+    elementMap,
+    window: happyDomInstance.window
+  });
+};
+const handleInput = (uid, hdId, value) => {
+  return handleInputLocal(uid, hdId, value);
+};
+
+const dispatchKeydownEvent = (element, window, key, code) => {
+  const keydownEvent = new window.KeyboardEvent('keydown', {
+    bubbles: true,
+    code,
+    key
+  });
+  dispatchEvent(element, keydownEvent);
+};
+
+const handleKeydownLocal = (uid, hdId, key, code) => {
+  const happyDomInstance = get(uid);
+  if (!happyDomInstance) {
+    return;
+  }
+  const element = hdId ? happyDomInstance.elementMap.get(hdId) : happyDomInstance.document;
+  if (!element) {
+    return;
+  }
+  dispatchKeydownEvent(element, happyDomInstance.window, key, code);
+  const elementMap = new Map();
+  set$1(uid, {
+    document: happyDomInstance.document,
+    elementMap,
+    window: happyDomInstance.window
+  });
+};
+const handleKeydown = (uid, hdId, key, code) => {
+  return handleKeydownLocal(uid, hdId, key, code);
+};
+
+const dispatchKeyupEvent = (element, window, key, code) => {
+  const keyupEvent = new window.KeyboardEvent('keyup', {
+    bubbles: true,
+    code,
+    key
+  });
+  dispatchEvent(element, keyupEvent);
+};
+
+const handleKeyupLocal = (uid, hdId, key, code) => {
+  const happyDomInstance = get(uid);
+  if (!happyDomInstance) {
+    return;
+  }
+  const element = hdId ? happyDomInstance.elementMap.get(hdId) : happyDomInstance.document;
+  if (!element) {
+    return;
+  }
+  dispatchKeyupEvent(element, happyDomInstance.window, key, code);
+  const elementMap = new Map();
+  set$1(uid, {
+    document: happyDomInstance.document,
+    elementMap,
+    window: happyDomInstance.window
+  });
+};
+const handleKeyup = (uid, hdId, key, code) => {
+  return handleKeyupLocal(uid, hdId, key, code);
+};
+
+const handleMessagePort = async port => {
+  await PlainMessagePortRpc.create({
+    commandMap: {},
+    messagePort: port
+  });
+};
+
+const dispatchMousedownEvent = (element, window, clientX = 0, clientY = 0) => {
+  const mousedownEvent = new window.MouseEvent('mousedown', {
+    bubbles: true,
+    clientX,
+    clientY
+  });
+  dispatchEvent(element, mousedownEvent);
+};
+
+const handleMousedownLocal = (uid, hdId, clientX, clientY, x, y) => {
+  const happyDomInstance = get(uid);
+  if (!happyDomInstance) {
+    return;
+  }
+  const element = happyDomInstance.elementMap.get(hdId);
+  if (!element) {
+    return;
+  }
+  const adjustedClientX = clientX - x;
+  const adjustedClientY = clientY - y;
+  dispatchMousedownEvent(element, happyDomInstance.window, adjustedClientX, adjustedClientY);
+  const elementMap = new Map();
+  set$1(uid, {
+    document: happyDomInstance.document,
+    elementMap,
+    window: happyDomInstance.window
+  });
+};
+const handleMousedown = (uid, hdId, clientX, clientY, x, y) => {
+  return handleMousedownLocal(uid, hdId, clientX, clientY, x, y);
+};
+
+const dispatchMousemoveEvent = (element, window, clientX = 0, clientY = 0) => {
+  const mousemoveEvent = new window.MouseEvent('mousemove', {
+    bubbles: true,
+    clientX,
+    clientY
+  });
+  dispatchEvent(element, mousemoveEvent);
+};
+
+const handleMousemoveLocal = (uid, hdId, clientX, clientY, x, y) => {
+  const happyDomInstance = get(uid);
+  if (!happyDomInstance) {
+    return;
+  }
+  const element = happyDomInstance.elementMap.get(hdId);
+  if (!element) {
+    return;
+  }
+  const adjustedClientX = clientX - x;
+  const adjustedClientY = clientY - y;
+  dispatchMousemoveEvent(element, happyDomInstance.window, adjustedClientX, adjustedClientY);
+  const elementMap = new Map();
+  set$1(uid, {
+    document: happyDomInstance.document,
+    elementMap,
+    window: happyDomInstance.window
+  });
+};
+const handleMousemove = (uid, hdId, clientX, clientY, x, y) => {
+  return handleMousemoveLocal(uid, hdId, clientX, clientY, x, y);
+};
+
+const dispatchMouseupEvent = (element, window, clientX = 0, clientY = 0) => {
+  const mouseupEvent = new window.MouseEvent('mouseup', {
+    bubbles: true,
+    clientX,
+    clientY
+  });
+  dispatchEvent(element, mouseupEvent);
+};
+
+const handleMouseupLocal = (uid, hdId) => {
+  const happyDomInstance = get(uid);
+  if (!happyDomInstance) {
+    return;
   }
-  if (state.useSandboxWorker) {
-    return handleClickSandbox(state, hdId);
+  const element = happyDomInstance.elementMap.get(hdId);
+  if (!element) {
+    return;
   }
-  return handleClickLocal(state, hdId);
+  dispatchMouseupEvent(element, happyDomInstance.window);
+  const elementMap = new Map();
+  set$1(uid, {
+    document: happyDomInstance.document,
+    elementMap,
+    window: happyDomInstance.window
+  });
+};
+const handleMouseup = (uid, hdId) => {
+  return handleMouseupLocal(uid, hdId);
 };
 
 function getDefaultExportFromCjs (x) {
@@ -89933,6 +89535,29 @@ const executeScripts = (window, document, scripts, width = 0, height = 0) => {
   }
 };
 
+const getParsedNodesChildNodeCount = parsedDom => {
+  array(parsedDom);
+  const rootCountFromParse = parsedDom.rootChildCount;
+  if (typeof rootCountFromParse === 'number') {
+    return rootCountFromParse;
+  }
+  let rootChildCount = 0;
+  let i = 0;
+  while (i < parsedDom.length) {
+    rootChildCount++;
+
+    // skip the entire subtree of the current node
+    let toSkip = parsedDom[i].childCount;
+    i++;
+    while (toSkip > 0 && i < parsedDom.length) {
+      toSkip -= 1;
+      toSkip += parsedDom[i].childCount;
+      i++;
+    }
+  }
+  return rootChildCount;
+};
+
 /* eslint-disable @typescript-eslint/no-floating-promises */
 const observers = new Map();
 const handleMutations = async uid => {
@@ -89947,22 +89572,17 @@ const handleMutations = async uid => {
     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);
+  // @ts-ignore
+  getParsedNodesChildNodeCount(parsedDom);
+
+  // const updatedState = {
+  //   css,
+  //   parsedDom,
+  //   parsedNodesChildNodeCount,
+  // }
+
+  // TODO notify
   try {
     await invoke('Preview.rerender', uid);
   } catch {
@@ -89986,561 +89606,6 @@ const observe = (uid, document, window) => {
   observers.set(uid, observer);
 };
 
-const None = 0;
-const OpeningAngleBracket = 1;
-const ClosingAngleBracket = 2;
-const TagNameStart = 3;
-const TagNameEnd = 4;
-const Content = 5;
-const ClosingTagSlash = 6;
-const WhitespaceInsideOpeningTag = 7;
-const AttributeName = 8;
-const AttributeEqualSign = 9;
-const AttributeQuoteStart = 10;
-const AttributeValue = 11;
-const AttributeQuoteEnd = 12;
-const WhitespaceAfterClosingTagSlash = 13;
-const WhitespaceAfterOpeningTagOpenAngleBracket = 14;
-const ExclamationMark = 15;
-const Doctype = 16;
-const StartCommentDashes = 17;
-const Comment = 18;
-const EndCommentTag = 19;
-const Text = 20;
-const CommentStart = 21;
-
-const isSelfClosingTag = tag => {
-  switch (tag.toLowerCase()) {
-    case 'area':
-    case 'base':
-    case 'col':
-    case Br:
-    case Hr:
-    case Img:
-    case Input:
-    case 'embed':
-    case 'link':
-    case 'meta':
-    case 'param':
-    case 'source':
-    case 'track':
-    case 'wbr':
-      return true;
-    default:
-      return false;
-  }
-};
-
-const parseText = text => {
-  return text.replaceAll('&gt;', '>').replaceAll('&lt;', '<').replaceAll('&amp;', '&');
-};
-
-class UnexpectedTokenError extends Error {
-  constructor() {
-    super('Unexpected token');
-    this.name = 'UnexpectedTokenError';
-  }
-}
-
-const State = {
-  AfterAttributeEqualSign: 8,
-  AfterAttributeName: 7,
-  AfterAttributeValueClosingQuote: 11,
-  AfterAttributeValueInsideDoubleQuote: 10,
-  AfterClosingTagName: 5,
-  AfterClosingTagSlash: 4,
-  AfterExclamationMark: 16,
-  AfterOpeningAngleBracket: 2,
-  InsideAttributeAfterDoubleQuote: 9,
-  InsideComment: 17,
-  InsideOpeningTag: 3,
-  InsideOpeningTagAfterWhitespace: 6,
-  InsideRawTextElement: 18,
-  TopLevelContent: 1
-};
-
-// Raw-text elements whose content should not be parsed as HTML
-const RAW_TEXT_ELEMENTS = new Set(['script', 'style']);
-const RE_ANGLE_BRACKET_OPEN = /^</;
-const RE_ANGLE_BRACKET_OPEN_TAG = /^<(?![\s%])/;
-const RE_ANGLE_BRACKET_CLOSE = /^>/;
-const RE_SLASH = /^\//;
-const RE_TAGNAME = /^[a-zA-Z\d$]+/;
-const RE_CONTENT = /^[^<>]+/;
-const RE_WHITESPACE = /^\s+/;
-const RE_ATTRIBUTE_NAME = /^[a-zA-Z\d-]+/;
-const RE_EQUAL_SIGN = /^=/;
-const RE_DOUBLE_QUOTE = /^"/;
-const RE_ATTRIBUTE_VALUE_INSIDE_DOUBLE_QUOTE = /^[^"\n]+/;
-const RE_TEXT = /^[^<>]+/;
-const RE_EXCLAMATION_MARK = /^!/;
-const RE_DASH_DASH = /^--/;
-const RE_DOCTYPE = /^doctype/i;
-const RE_BLOCK_COMMENT_CONTENT = /^[a-zA-Z\s]+/;
-const RE_COMMENT_END = /^-->/;
-const RE_TAG_TEXT = /^[^\s>]+/;
-const RE_ANY_TEXT = /^[^\n]+/;
-const RE_ATTRIBUTE_TEXT = /^[^\n<>/\s]+/;
-const RE_BLOCK_COMMENT_START = /^<!--/;
-const RE_SELF_CLOSING = /^\/>/;
-const tokenizeHtml = text => {
-  string(text);
-  let state = State.TopLevelContent;
-  let index = 0;
-  let next;
-  const tokens = [];
-  let token = None;
-  let rawTextTagName = ''; // Track which raw-text element we're inside
-  while (index < text.length) {
-    const part = text.slice(index);
-    switch (state) {
-      case State.AfterAttributeEqualSign:
-        if (next = part.match(RE_DOUBLE_QUOTE)) {
-          token = AttributeQuoteStart;
-          state = State.InsideAttributeAfterDoubleQuote;
-        } else if (next = part.match(RE_ANGLE_BRACKET_CLOSE)) {
-          token = ClosingAngleBracket;
-          state = State.TopLevelContent;
-        } else if (next = part.match(RE_ATTRIBUTE_TEXT)) {
-          token = AttributeValue;
-          state = State.InsideOpeningTag;
-        } else {
-          throw new UnexpectedTokenError();
-        }
-        break;
-      case State.AfterAttributeName:
-        if (next = part.match(RE_EQUAL_SIGN)) {
-          token = AttributeEqualSign;
-          state = State.AfterAttributeEqualSign;
-        } else if (next = part.match(RE_ANGLE_BRACKET_CLOSE)) {
-          token = ClosingAngleBracket;
-          state = State.TopLevelContent;
-        } else if (next = part.match(RE_WHITESPACE)) {
-          token = WhitespaceInsideOpeningTag;
-          state = State.InsideOpeningTagAfterWhitespace;
-        } else if (next = part.match(RE_ANGLE_BRACKET_OPEN)) {
-          token = OpeningAngleBracket;
-          state = State.AfterOpeningAngleBracket;
-        } else {
-          text.slice(index); // ?
-          throw new UnexpectedTokenError();
-        }
-        break;
-      case State.AfterAttributeValueClosingQuote:
-        if (next = part.match(RE_ANGLE_BRACKET_CLOSE)) {
-          token = ClosingAngleBracket;
-          state = State.TopLevelContent;
-        } else if (next = part.match(RE_WHITESPACE)) {
-          token = WhitespaceInsideOpeningTag;
-          state = State.InsideOpeningTagAfterWhitespace;
-        } else if (next = part.match(RE_SELF_CLOSING)) {
-          token = ClosingAngleBracket;
-          state = State.TopLevelContent;
-        } else {
-          throw new UnexpectedTokenError();
-        }
-        break;
-      case State.AfterAttributeValueInsideDoubleQuote:
-        if (next = part.match(RE_DOUBLE_QUOTE)) {
-          token = AttributeQuoteEnd;
-          state = State.AfterAttributeValueClosingQuote;
-        } else {
-          throw new UnexpectedTokenError();
-        }
-        break;
-      case State.AfterClosingTagName:
-        if (next = part.match(RE_ANGLE_BRACKET_CLOSE)) {
-          token = ClosingAngleBracket;
-          state = State.TopLevelContent;
-        } else if (next = part.match(RE_WHITESPACE)) {
-          token = Content;
-          state = State.TopLevelContent;
-        } else {
-          throw new UnexpectedTokenError();
-        }
-        break;
-      case State.AfterClosingTagSlash:
-        if (next = part.match(RE_TAGNAME)) {
-          token = TagNameEnd;
-          state = State.AfterClosingTagName;
-        } else if (next = part.match(RE_WHITESPACE)) {
-          token = WhitespaceAfterClosingTagSlash;
-          state = State.TopLevelContent;
-        } else if (next = part.match(RE_ANGLE_BRACKET_CLOSE)) {
-          token = ClosingAngleBracket;
-          state = State.TopLevelContent;
-        } else {
-          throw new UnexpectedTokenError();
-        }
-        break;
-      case State.AfterExclamationMark:
-        if (next = part.match(RE_DASH_DASH)) {
-          token = StartCommentDashes;
-          state = State.InsideComment;
-        } else if (next = part.match(RE_DOCTYPE)) {
-          token = Doctype;
-          state = State.InsideOpeningTag;
-        } else {
-          text.slice(index); // ?
-          throw new UnexpectedTokenError();
-        }
-        break;
-      case State.AfterOpeningAngleBracket:
-        if (next = part.match(RE_TAGNAME)) {
-          token = TagNameStart;
-          state = State.InsideOpeningTag;
-          // Track raw-text elements so we can switch to raw content mode after >
-          if (RAW_TEXT_ELEMENTS.has(next[0].toLowerCase())) {
-            rawTextTagName = next[0].toLowerCase();
-          }
-        } else if (next = part.match(RE_SLASH)) {
-          token = ClosingTagSlash;
-          state = State.AfterClosingTagSlash;
-        } else if (next = part.match(RE_WHITESPACE)) {
-          token = WhitespaceAfterOpeningTagOpenAngleBracket;
-          state = State.TopLevelContent;
-        } else if (next = part.match(RE_ANGLE_BRACKET_CLOSE)) {
-          token = ClosingAngleBracket;
-          state = State.TopLevelContent;
-        } else if (next = part.match(RE_EXCLAMATION_MARK)) {
-          token = ExclamationMark;
-          state = State.AfterExclamationMark;
-        } else if (next = part.match(RE_ANY_TEXT)) {
-          token = Text;
-          state = State.TopLevelContent;
-        } else {
-          text.slice(index); // ?
-          throw new UnexpectedTokenError();
-        }
-        break;
-      case State.InsideAttributeAfterDoubleQuote:
-        if (next = text.slice(index).match(RE_ATTRIBUTE_VALUE_INSIDE_DOUBLE_QUOTE)) {
-          token = AttributeValue;
-          state = State.AfterAttributeValueInsideDoubleQuote;
-        } else if (next = part.match(RE_DOUBLE_QUOTE)) {
-          token = AttributeQuoteEnd;
-          state = State.AfterAttributeValueClosingQuote;
-        } else {
-          throw new UnexpectedTokenError();
-        }
-        break;
-      case State.InsideComment:
-        if (next = part.match(RE_BLOCK_COMMENT_CONTENT)) {
-          token = Comment;
-          state = State.InsideComment;
-        } else if (next = part.match(RE_COMMENT_END)) {
-          token = EndCommentTag;
-          state = State.TopLevelContent;
-        } else {
-          text.slice(index); // ?
-          throw new UnexpectedTokenError();
-        }
-        break;
-      case State.InsideOpeningTag:
-        if (next = part.match(RE_ANGLE_BRACKET_CLOSE)) {
-          token = ClosingAngleBracket;
-          state = State.TopLevelContent;
-        } else if (next = part.match(RE_WHITESPACE)) {
-          token = WhitespaceInsideOpeningTag;
-          state = State.InsideOpeningTagAfterWhitespace;
-        } else if (next = part.match(RE_TAG_TEXT)) {
-          token = Text;
-          state = State.TopLevelContent;
-        } else {
-          throw new UnexpectedTokenError();
-        }
-        break;
-      case State.InsideOpeningTagAfterWhitespace:
-        if (next = part.match(RE_ATTRIBUTE_NAME)) {
-          token = AttributeName;
-          state = State.AfterAttributeName;
-        } else if (next = part.match(RE_ANGLE_BRACKET_CLOSE)) {
-          token = ClosingAngleBracket;
-          state = State.TopLevelContent;
-        } else if (next = part.match(RE_SELF_CLOSING)) {
-          token = ClosingAngleBracket;
-          state = State.TopLevelContent;
-        } else if (next = part.match(RE_TEXT)) {
-          token = AttributeName;
-          state = State.AfterAttributeName;
-        } else {
-          text.slice(index).match(RE_TEXT); // ?
-          text.slice(index); // ?
-          throw new UnexpectedTokenError();
-        }
-        break;
-      case State.InsideRawTextElement:
-        {
-          // Match everything up to the closing tag for the current raw-text element
-          const closingTagPattern = new RegExp(`^([\\s\\S]*?)(<\\/${rawTextTagName}>)`, 'i');
-          const rawMatch = part.match(closingTagPattern);
-          if (rawMatch) {
-            // Emit content before the closing tag (if any)
-            if (rawMatch[1].length > 0) {
-              tokens.push({
-                text: rawMatch[1],
-                type: Content
-              });
-              index += rawMatch[1].length;
-            }
-            // Now emit the closing tag tokens: <, /, tagname, >
-            // < token
-            tokens.push({
-              text: '<',
-              type: OpeningAngleBracket
-            });
-            index += 1;
-            // / token
-            tokens.push({
-              text: '/',
-              type: ClosingTagSlash
-            });
-            index += 1;
-            // tagname token
-            tokens.push({
-              text: rawTextTagName,
-              type: TagNameEnd
-            });
-            index += rawTextTagName.length;
-            // > token
-            tokens.push({
-              text: '>',
-              type: ClosingAngleBracket
-            });
-            index += 1;
-            rawTextTagName = '';
-            state = State.TopLevelContent;
-            continue;
-          }
-          // No closing tag found — consume everything as content
-          next = [part];
-          token = Content;
-          rawTextTagName = '';
-          state = State.TopLevelContent;
-          break;
-        }
-      case State.TopLevelContent:
-        if (next = part.match(RE_ANGLE_BRACKET_OPEN_TAG)) {
-          token = OpeningAngleBracket;
-          state = State.AfterOpeningAngleBracket;
-        } else if (next = part.match(RE_CONTENT)) {
-          token = Content;
-          state = State.TopLevelContent;
-        } else if (next = part.match(RE_BLOCK_COMMENT_START)) {
-          token = CommentStart;
-          state = State.InsideComment;
-        } else if (next = part.match(RE_ANGLE_BRACKET_CLOSE)) {
-          token = Content;
-          state = State.TopLevelContent;
-        } else if (next = part.match(RE_ANGLE_BRACKET_OPEN)) {
-          token = Text;
-          state = State.TopLevelContent;
-        } else {
-          throw new UnexpectedTokenError();
-        }
-        break;
-      default:
-        throw new UnexpectedTokenError();
-    }
-    const tokenText = next[0];
-    // After closing angle bracket of a raw-text element opening tag,
-    // switch to raw text content mode instead of top-level content
-    if (rawTextTagName && token === ClosingAngleBracket && state === State.TopLevelContent) {
-      state = State.InsideRawTextElement;
-    }
-    tokens.push({
-      text: tokenText,
-      type: token
-    });
-    index += tokenText.length;
-  }
-  return tokens;
-};
-
-// Tags that should be completely skipped (both tag and content)
-const TAGS_TO_SKIP_COMPLETELY = new Set(['meta', 'title']);
-
-// Tags that should have their opening/closing tags skipped but content processed
-const TAGS_TO_SKIP_TAG_ONLY = new Set(['html', 'head']);
-
-// Tags where we capture content as CSS
-const TAGS_TO_CAPTURE_AS_CSS = new Set(['style']);
-
-// Tags where we capture content as JavaScript
-const TAGS_TO_CAPTURE_AS_JS = new Set(['script']);
-const parseHtml = (html, allowedAttributes = [], defaultAllowedAttributes = []) => {
-  string(html);
-  array(allowedAttributes);
-  array(defaultAllowedAttributes);
-
-  // Combine default allowed attributes with any additional ones provided
-  const allAllowedAttributes = new Set([...defaultAllowedAttributes, ...allowedAttributes]);
-  const useBuiltInDefaults = allowedAttributes.length === 0;
-  const tokens = tokenizeHtml(html);
-  const dom = [];
-  const css = [];
-  const scripts = [];
-  const root = {
-    childCount: 0,
-    type: 0
-  };
-  let current = root;
-  const stack = [root];
-  const tagStack = []; // Track tag names to match closing tags
-  let attributeName = '';
-  let lastTagWasSelfClosing = false;
-  let skipDepth = 0; // Track how many levels deep we are in skipped content
-  let captureCss = false; // Track if we're inside a style tag
-  let cssContent = ''; // Accumulate CSS content
-  let captureJs = false; // Track if we're inside a script tag
-  let jsContent = ''; // Accumulate JavaScript content
-
-  for (const token of tokens) {
-    switch (token.type) {
-      case AttributeName:
-        if (skipDepth === 0 && !captureCss && !captureJs) {
-          attributeName = token.text;
-        }
-        break;
-      case AttributeValue:
-        if (skipDepth === 0 && !captureCss && !captureJs && (allAllowedAttributes.has(attributeName) || useBuiltInDefaults && isDefaultAllowedAttribute(attributeName, defaultAllowedAttributes))) {
-          let finalAttributeName = attributeName;
-          if (attributeName === 'class') finalAttributeName = 'className';else if (attributeName === 'type') finalAttributeName = 'inputType';
-          current[finalAttributeName] = token.text;
-        }
-        attributeName = '';
-        break;
-      case ClosingAngleBracket:
-        if (skipDepth === 0 && !captureCss && !captureJs) {
-          // Handle boolean attributes (attributes without values)
-          if (attributeName && (allAllowedAttributes.has(attributeName) || useBuiltInDefaults && isDefaultAllowedAttribute(attributeName, defaultAllowedAttributes))) {
-            let finalAttributeName = attributeName;
-            if (attributeName === 'class') finalAttributeName = 'className';else if (attributeName === 'type') finalAttributeName = 'inputType';
-            current[finalAttributeName] = attributeName;
-          }
-          attributeName = '';
-          // Return to parent if the current tag is self-closing
-          if (lastTagWasSelfClosing) {
-            current = stack.at(-1) || root;
-            lastTagWasSelfClosing = false;
-          }
-        }
-        break;
-      case Content:
-        if (captureCss) {
-          cssContent += token.text;
-        } else if (captureJs) {
-          jsContent += token.text;
-        } else if (skipDepth === 0) {
-          current.childCount++;
-          dom.push(text(parseText(token.text)));
-        }
-        break;
-      case Doctype:
-        // Ignore DOCTYPE - it's parsed but not rendered since we're in a div
-        break;
-      case TagNameEnd:
-        const tagNameToClose = tagStack.pop()?.toLowerCase() || '';
-        if (TAGS_TO_CAPTURE_AS_CSS.has(tagNameToClose)) {
-          // Finished capturing CSS
-          if (cssContent.trim()) {
-            css.push(cssContent);
-          }
-          cssContent = '';
-          captureCss = false;
-        } else if (TAGS_TO_CAPTURE_AS_JS.has(tagNameToClose)) {
-          // Finished capturing JavaScript
-          if (jsContent.trim()) {
-            scripts.push(jsContent);
-          }
-          jsContent = '';
-          captureJs = false;
-        } else if (TAGS_TO_SKIP_COMPLETELY.has(tagNameToClose)) {
-          // We were skipping this content, so decrement skipDepth
-          skipDepth--;
-        } else if (TAGS_TO_SKIP_TAG_ONLY.has(tagNameToClose)) ; else {
-          // Normal tag - pop from stack
-          if (stack.length > 1) {
-            stack.pop();
-          }
-          current = stack.at(-1) || root;
-        }
-        break;
-      case TagNameStart:
-        const tagNameLower = token.text.toLowerCase();
-        lastTagWasSelfClosing = isSelfClosingTag(token.text);
-
-        // Check if this tag captures CSS content
-        if (TAGS_TO_CAPTURE_AS_CSS.has(tagNameLower)) {
-          captureCss = true;
-          cssContent = '';
-          tagStack.push(token.text);
-        }
-        // Check if this tag captures JavaScript content
-        else if (TAGS_TO_CAPTURE_AS_JS.has(tagNameLower)) {
-          captureJs = true;
-          jsContent = '';
-          tagStack.push(token.text);
-        }
-        // Check if this tag should be completely skipped (meta, title)
-        else if (TAGS_TO_SKIP_COMPLETELY.has(tagNameLower)) {
-          if (!lastTagWasSelfClosing) {
-            // For non-self-closing tags like title, mark as skipped
-            skipDepth++;
-            tagStack.push(token.text);
-          }
-          // For self-closing tags like meta, we just skip them without tracking
-        }
-        // Check if this tag should have its opening/closing tags skipped (html, head)
-        else if (TAGS_TO_SKIP_TAG_ONLY.has(tagNameLower)) {
-          if (!lastTagWasSelfClosing) {
-            // Track the tag name for matching the closing tag
-            tagStack.push(token.text);
-          }
-        }
-        // Normal tag processing
-        else if (skipDepth === 0) {
-          current.childCount++;
-          const newNode = {
-            childCount: 0,
-            type: getVirtualDomTag(token.text)
-          };
-          dom.push(newNode);
-          current = newNode;
-          if (!lastTagWasSelfClosing) {
-            stack.push(current);
-            tagStack.push(token.text);
-          }
-        }
-        break;
-      case WhitespaceInsideOpeningTag:
-        if (skipDepth === 0 && !captureCss && !captureJs &&
-        // Handle boolean attributes (attributes without values)
-        attributeName && (allAllowedAttributes.has(attributeName) || useBuiltInDefaults && isDefaultAllowedAttribute(attributeName, defaultAllowedAttributes))) {
-          let finalAttributeName = attributeName;
-          if (attributeName === 'class') finalAttributeName = 'className';else if (attributeName === 'type') finalAttributeName = 'inputType';
-          current[finalAttributeName] = attributeName;
-        }
-        attributeName = '';
-        break;
-    }
-  }
-  try {
-    Object.defineProperty(dom, 'rootChildCount', {
-      configurable: true,
-      enumerable: false,
-      value: root.childCount
-    });
-  } catch {
-    dom.rootChildCount = root.childCount;
-  }
-  return {
-    css,
-    dom,
-    scripts
-  };
-};
-
 /* eslint-disable @typescript-eslint/prefer-readonly-parameter-types */
 
 const states = new Map();
@@ -90629,729 +89694,44 @@ const patchCanvasElements = async (document, uid) => {
   });
 };
 
-/* eslint-disable prefer-destructuring */
-
-const updateContent = async (state, uri) => {
+const updateContent = async (uid, width, height, content, scripts) => {
   try {
-    // Read the file content using RendererWorker RPC
-    const content = await readFile(uri);
-
-    // Parse the content into virtual DOM and CSS
-    const parseResult = parseHtml(content);
-    let parsedDom = parseResult.dom;
-    let {
-      css
-    } = parseResult;
     const {
-      scripts
-    } = parseResult;
-
-    // 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, state.width, state.height);
-        const elementMap = new Map();
-        const serialized = serialize(happyDomDocument, elementMap);
-        parsedDom = serialized.dom;
-        css = serialized.css;
-        set$1(state.uid, {
-          document: happyDomDocument,
-          elementMap,
-          window: happyDomWindow
-        });
-        observe(state.uid, happyDomDocument, happyDomWindow);
-      } catch (error) {
-        console.error(error);
-        // If script execution fails, fall back to static HTML parsing
-      }
-    }
-    const parsedNodesChildNodeCount = getParsedNodesChildNodeCount(parsedDom);
+      document: happyDomDocument,
+      window: happyDomWindow
+    } = createWindow(content);
+    await patchCanvasElements(happyDomDocument, uid);
+    executeScripts(happyDomWindow, happyDomDocument, scripts, width, height);
+    const elementMap = new Map();
+    set$1(uid, {
+      document: happyDomDocument,
+      elementMap,
+      window: happyDomWindow
+    });
+    observe(uid, happyDomDocument, happyDomWindow);
     return {
-      content,
-      css,
-      errorMessage: '',
-      parsedDom,
-      parsedNodesChildNodeCount,
-      scripts
+      errorMessage: ''
     };
   } catch (error) {
     // If file reading or parsing fails, return empty content and parsedDom with error message
     const errorMessage = error instanceof Error ? error.message : 'Unknown error';
     return {
-      content: '',
-      css: [],
-      errorMessage,
-      parsedDom: [],
-      parsedNodesChildNodeCount: 0,
-      scripts: []
+      errorMessage
     };
   }
 };
 
-const handleFileEdited = async state => {
-  const {
-    content,
-    css,
-    errorMessage,
-    parsedDom,
-    parsedNodesChildNodeCount,
-    scripts
-  } = await updateContent(state, state.uri);
-  return {
-    ...state,
-    content,
-    css,
-    errorMessage,
-    parsedDom,
-    parsedNodesChildNodeCount,
-    scripts
-  };
-};
-
-const dispatchInputEvent = (element, window) => {
-  const inputEvent = new window.Event('input', {
-    bubbles: true
-  });
-  dispatchEvent(element, inputEvent);
-};
-
-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;
-  }
-  const element = happyDomInstance.elementMap.get(hdId);
-  if (!element) {
-    return state;
-  }
-  element.value = value;
-  dispatchInputEvent(element, happyDomInstance.window);
-  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 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', {
-    bubbles: true,
-    code,
-    key
-  });
-  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;
-  }
-  const element = hdId ? happyDomInstance.elementMap.get(hdId) : happyDomInstance.document;
-  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);
-};
-
-const handleMessagePort = async port => {
-  await PlainMessagePortRpc.create({
-    commandMap: {},
-    messagePort: port
-  });
-};
-
-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);
-};
-
-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);
-};
-
-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,
-    window: happyDomInstance.window
-  });
-  const parsedDom = serialized.dom;
-  const {
-    css
-  } = serialized;
-  const parsedNodesChildNodeCount = getParsedNodesChildNodeCount(parsedDom);
-  return {
-    ...state,
-    css,
-    parsedDom,
-    parsedNodesChildNodeCount
-  };
-};
-const handleMouseup = (state, hdId) => {
-  if (!hdId) {
-    return state;
-  }
-  if (state.useSandboxWorker) {
-    return handleMouseupSandbox(state, hdId);
-  }
-  return handleMouseupLocal(state, hdId);
-};
-
-const loadContent = async state => {
+const loadContent = async (uid, width, height, content, scripts) => {
   // Try to register to receive editor change notifications from the editor worker.
   // Use dynamic access and ignore errors so this is safe in environments where
   // the EditorWorker / ListenerType are not available (e.g. unit tests).
-  const EditorChange = 1;
-  const rpcId = 9112;
-  try {
-    await invoke$1('Listener.register', EditorChange, rpcId);
-  } catch (error) {
-    console.error(error);
-  }
 
   // Read and parse file contents if we have a URI
   const {
-    content,
-    css,
-    errorMessage,
-    parsedDom,
-    parsedNodesChildNodeCount,
-    scripts
-  } = state.uri ? await updateContent(state, state.uri) : {
-    content: state.content,
-    css: state.css,
-    errorMessage: state.errorMessage,
-    parsedDom: state.parsedDom,
-    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;
-  }
+    errorMessage
+  } = await updateContent(uid, width, height, content, scripts);
   return {
-    ...state,
-    content,
-    css: finalCss,
-    errorCount: 0,
-    errorMessage,
-    initial: false,
-    parsedDom: finalParsedDom,
-    parsedNodesChildNodeCount: finalParsedNodesChildNodeCount,
-    sandboxRpc,
-    scripts,
-    warningCount: 1
-  };
-};
-
-const BODY_SELECTOR_REGEX = /\bbody\b/g;
-const HTML_SELECTOR_REGEX = /\bhtml\b/g;
-
-/**
- * Wraps CSS in a CSS nesting block (.Preview { ... }) and replaces 'html' and 'body'
- * selectors with '&' (the parent selector in CSS nesting).
- * This approach uses CSS nesting to automatically scope all selectors to the preview div.
- * Other selectors like 'button' or '*' are automatically scoped within the nesting.
- *
- * @param css The CSS string to process
- * @returns The CSS string wrapped in .Preview nesting block with proper selector replacements
- */
-const replaceCssBodySelector = css => {
-  if (!css.trim()) {
-    return css;
-  }
-
-  // Replace 'html' selector with '&' (CSS nesting parent selector)
-  let result = css.replaceAll(HTML_SELECTOR_REGEX, '&');
-
-  // Replace 'body' selector with '&' (CSS nesting parent selector)
-  result = result.replaceAll(BODY_SELECTOR_REGEX, '&');
-
-  // Wrap the entire CSS in .Preview nesting block
-  result = `.Preview {\n${result}\n}`;
-  return result;
-};
-
-const renderCss = (oldState, newState) => {
-  const {
-    css,
-    uid
-  } = newState;
-
-  // Combine all CSS strings into a single string
-  let cssString = css.join('\n');
-
-  // Replace body selector with .Preview since we render the preview in a div element, not a body
-  cssString = replaceCssBodySelector(cssString);
-
-  // Return command in format that can be handled by the viewlet
-  // The 'Viewlet.setCss' is a method that should be called on the viewlet
-  return ['Viewlet.setCss', uid, cssString];
-};
-
-const HandleInput = 4;
-const HandleClick = 11;
-const HandleKeydown = 12;
-const HandleKeyup = 13;
-const HandleMousedown = 14;
-const HandleMousemove = 15;
-const HandleMouseup = 16;
-
-const getEmptyPreviewDom = () => {
-  return [{
-    childCount: 1,
-    className: 'Viewlet Preview',
-    type: Div$1
-  }, {
-    childCount: 1,
-    type: H1$1
-  }, {
-    text: 'No URI has been specified',
-    type: Text$2
-  }];
-};
-
-const getPreviewDom = state => {
-  const {
-    parsedDom,
-    parsedNodesChildNodeCount,
-    uri
-  } = state;
-  if (!uri) {
-    return getEmptyPreviewDom();
-  }
-
-  // If parsedDom is available, render it as children of the wrapper
-  if (parsedDom && parsedDom.length > 0) {
-    return [{
-      childCount: parsedNodesChildNodeCount,
-      className: 'Viewlet Preview',
-      onClick: HandleClick,
-      onInput: HandleInput,
-      onKeyDown: HandleKeydown,
-      onKeyUp: HandleKeyup,
-      onMouseDown: HandleMousedown,
-      onMouseMove: HandleMousemove,
-      onMouseUp: HandleMouseup,
-      tabIndex: 0,
-      type: Div$1
-    }, ...parsedDom];
-  }
-  return [{
-    childCount: 1,
-    className: 'Viewlet Preview',
-    onClick: HandleClick,
-    onInput: HandleInput,
-    onKeyDown: HandleKeydown,
-    onKeyUp: HandleKeyup,
-    onMouseDown: HandleMousedown,
-    onMouseMove: HandleMousemove,
-    onMouseUp: HandleMouseup,
-    tabIndex: 0,
-    type: Div$1
-  }, {
-    childCount: 1,
-    type: H1$1
-  }, {
-    text: 'Edit the file on the left to get started.',
-    type: Text$2
-  }];
-};
-
-const renderItems = (oldState, newState) => {
-  const {
-    initial,
-    uid
-  } = newState;
-  if (initial) {
-    return [SetDom2, uid, []];
-  }
-  const dom = getPreviewDom(newState);
-  return [SetDom2, uid, dom];
-};
-
-const renderIncremental = (oldState, newState) => {
-  const oldDom = renderItems(oldState, oldState)[2];
-  const newDom = renderItems(newState, newState)[2];
-  const patches = diffTree(oldDom, newDom);
-  return [SetPatches, newState.uid, patches];
-};
-
-const getRenderer = diffType => {
-  switch (diffType) {
-    case RenderCss:
-      return renderCss;
-    case RenderIncremental:
-      return renderIncremental;
-    case RenderItems:
-      return renderItems;
-    default:
-      throw new Error('unknown renderer');
-  }
-};
-
-const applyRender = (oldState, newState, diffResult) => {
-  const commands = [];
-  for (const item of diffResult) {
-    const fn = getRenderer(item);
-    const result = fn(oldState, newState);
-    if (result.length > 0) {
-      commands.push(result);
-    }
-  }
-  return commands;
-};
-
-const render2 = (uid, diffResult) => {
-  const {
-    newState,
-    oldState
-  } = get$1(uid);
-  set$2(uid, newState, newState);
-  const commands = applyRender(oldState, newState, diffResult);
-  return commands;
-};
-
-const rerender = state => {
-  // Create a new copy of parsedDom array to trigger diff
-  const parsedDom = [...state.parsedDom];
-
-  // Return a new state object with the copied parsedDom
-  // This will cause DiffItems.isEqual to return false since parsedDom reference changed
-  return {
-    ...state,
-    parsedDom
+    errorMessage
   };
 };
 
@@ -91363,36 +89743,26 @@ const resize = (state, dimensions) => {
 };
 
 const commandMap = {
-  'PreviewSandBox.create': create,
-  'PreviewSandBox.diff2': diff2,
-  'PreviewSandBox.executeCallback': executeCallback,
-  'PreviewSandBox.handleClick': wrapCommand(handleClick),
-  'PreviewSandBox.handleFileEdited': wrapCommand(handleFileEdited),
-  'PreviewSandBox.handleInput': wrapCommand(handleInput),
-  'PreviewSandBox.handleKeyDown': wrapCommand(handleKeydown),
-  'PreviewSandBox.handleKeyUp': wrapCommand(handleKeyup),
-  'PreviewSandBox.handleMessagePort': handleMessagePort,
-  'PreviewSandBox.handleMousedown': wrapCommand(handleMousedown),
-  'PreviewSandBox.handleMousemove': wrapCommand(handleMousemove),
-  'PreviewSandBox.handleMouseup': wrapCommand(handleMouseup),
-  'PreviewSandBox.loadContent': wrapCommand(loadContent),
-  'PreviewSandBox.render2': render2,
-  'PreviewSandBox.rerender': wrapCommand(rerender),
-  'PreviewSandBox.resize': wrapCommand(resize),
-  'PreviewSandBox.terminate': terminate
+  'SandBox.executeCallback': executeCallback,
+  'SandBox.getSerializedDom': getSerializedDom,
+  'SandBox.handleClick': handleClick,
+  'SandBox.handleInput': handleInput,
+  'SandBox.handleKeyDown': handleKeydown,
+  'SandBox.handleKeyUp': handleKeyup,
+  'SandBox.handleMessagePort': handleMessagePort,
+  'SandBox.handleMousedown': handleMousedown,
+  'SandBox.handleMousemove': handleMousemove,
+  'SandBox.handleMouseup': handleMouseup,
+  'SandBox.loadContent': loadContent,
+  'SandBox.resize': resize,
+  'SandBox.terminate': terminate
 };
 
 const listen = async () => {
-  registerCommands(commandMap);
   const rpc = await WebWorkerRpcClient.create({
     commandMap: commandMap
   });
-  set$3(rpc);
-  const editorRpc = await LazyTransferMessagePortRpcParent.create({
-    commandMap: {},
-    send: port => sendMessagePortToEditorWorker(port, 9112)
-  });
-  set$4(editorRpc);
+  set$2(rpc);
 };
 
 const main = async () => {