@meituan-nocode/vite-plugin-nocode-compiler 0.3.0 → 0.3.1-beta.1

package/dist/index.cjs

@@ -1,7 +1,9 @@
 "use strict";
+var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -15,6 +17,14 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/index.ts
@@ -24,32 +34,13 @@ __export(index_exports, {
   default: () => index_default
 });
 module.exports = __toCommonJS(index_exports);
-var import_path = require("path");
-var import_fs = require("fs");
 var import_nocode_compiler_core = require("@meituan-nocode/nocode-compiler-core");
 
-// src/utils.ts
-function readJsonBody(req) {
-  return new Promise((resolve, reject) => {
-    let body = "";
-    req.on("data", (chunk) => {
-      body += chunk.toString();
-    });
-    req.on("end", () => {
-      try {
-        resolve(JSON.parse(body));
-      } catch (e) {
-        reject(e);
-      }
-    });
-    req.on("error", reject);
-  });
-}
-
-// package.json
-var version = "0.3.0";
+// src/utils/index.ts
+var import_path = require("path");
+var import_fs = require("fs");
 
-// src/index.ts
+// src/utils/vite-compat.ts
 function getHotChannel(server) {
   try {
     if (server.hot && typeof server.hot.on === "function") {
@@ -71,7 +62,7 @@ function safeOnConnection(server, callback) {
     channel.on("connection", callback);
     return true;
   } catch (e) {
-    console.warn("[VitePluginNocodeCompiler] Error setting up connection listener:", e);
+    console.warn("[vite-compat] Error setting up connection listener:", e);
     return false;
   }
 }
@@ -84,7 +75,7 @@ function safeSendHmrUpdate(server, payload) {
     channel.send(payload);
     return true;
   } catch (e) {
-    console.warn("[VitePluginNocodeCompiler] Error sending HMR update:", e);
+    console.warn("[vite-compat] Error sending HMR update:", e);
     return false;
   }
 }
@@ -95,7 +86,7 @@ function safeInvalidateModule(server, mod) {
       return true;
     }
   } catch (e) {
-    console.warn("[VitePluginNocodeCompiler] Error invalidating module:", e);
+    console.warn("[vite-compat] Error invalidating module:", e);
   }
   return false;
 }
@@ -105,20 +96,59 @@ function safeGetModulesByFile(server, filePath) {
       return server.moduleGraph.getModulesByFile(filePath) || null;
     }
   } catch (e) {
-    console.warn("[VitePluginNocodeCompiler] Error getting modules by file:", e);
+    console.warn("[vite-compat] Error getting modules by file:", e);
   }
   return null;
 }
-var overrideMap = /* @__PURE__ */ new Map();
-function resolveFileToAbsPath(file, viteRoot) {
+function triggerHmrUpdate(server, fullPath, verbose = false) {
+  const modules = server.moduleGraph.getModulesByFile(fullPath);
+  if (modules && modules.size > 0) {
+    for (const mod of modules) {
+      safeInvalidateModule(server, mod);
+      safeSendHmrUpdate(server, {
+        type: "update",
+        updates: [
+          {
+            type: "js-update",
+            path: mod.url,
+            acceptedPath: mod.url,
+            timestamp: Date.now()
+          }
+        ]
+      });
+      if (verbose) {
+        console.log(`[vite-compat] HMR triggered for: ${mod.url}`);
+      }
+    }
+  } else {
+    const mod = server.moduleGraph.getModuleById(fullPath);
+    if (mod) {
+      safeInvalidateModule(server, mod);
+      safeSendHmrUpdate(server, {
+        type: "update",
+        updates: [
+          {
+            type: "js-update",
+            path: mod.url,
+            acceptedPath: mod.url,
+            timestamp: Date.now()
+          }
+        ]
+      });
+    }
+  }
+}
+
+// src/utils/index.ts
+function resolveFileToAbsPath(file, rootDir) {
   if ((0, import_path.isAbsolute)(file)) {
     return (0, import_fs.existsSync)(file) ? (0, import_path.normalize)(file) : null;
   }
-  const fromRoot = (0, import_path.join)(viteRoot, file);
+  const fromRoot = (0, import_path.join)(rootDir, file);
   if ((0, import_fs.existsSync)(fromRoot)) {
     return (0, import_path.normalize)(fromRoot);
   }
-  let dir = viteRoot;
+  let dir = rootDir;
   while (true) {
     const candidate = (0, import_path.join)(dir, file);
     if ((0, import_fs.existsSync)(candidate)) {
@@ -130,6 +160,254 @@ function resolveFileToAbsPath(file, viteRoot) {
   }
   return null;
 }
+function readJsonBody(req) {
+  return new Promise((resolve2, reject) => {
+    let body = "";
+    req.on("data", (chunk) => {
+      body += chunk.toString();
+    });
+    req.on("end", () => {
+      try {
+        resolve2(JSON.parse(body));
+      } catch (e) {
+        reject(e);
+      }
+    });
+    req.on("error", reject);
+  });
+}
+
+// package.json
+var version = "0.3.1-beta.1";
+
+// src/design-mode/types.ts
+var SANDBOX_SCRIPT_PATH = "/sandbox-script.js";
+var VIRTUAL_CODE_API_PATH = "/api/virtual-code";
+var DEFAULT_DESIGN_MODE_OPTIONS = {
+  enableVirtualCode: true,
+  virtualCodeApiPath: VIRTUAL_CODE_API_PATH,
+  verbose: false,
+  exclude: [/node_modules/],
+  include: [/\.[jt]sx?$/]
+};
+
+// src/design-mode/virtual-code.ts
+var path = __toESM(require("path"), 1);
+var virtualCodeMap = /* @__PURE__ */ new Map();
+function matchesDesignModePattern(id, options) {
+  const exclude = options.exclude || [];
+  const include = options.include || [];
+  if (exclude.some((re) => re.test(id))) return false;
+  if (!include.some((re) => re.test(id))) return false;
+  return true;
+}
+function extractRelativePath(id) {
+  const srcIndex = id.indexOf("/src/");
+  return srcIndex !== -1 ? id.slice(srcIndex + 1) : null;
+}
+function hasVirtualCode(id) {
+  const relativePath = extractRelativePath(id);
+  if (!relativePath) return false;
+  return virtualCodeMap.has(relativePath) || virtualCodeMap.has("/" + relativePath);
+}
+function shouldSkipDesignModeTransform(id, options) {
+  if (!matchesDesignModePattern(id, options)) return true;
+  if (hasVirtualCode(id)) return true;
+  return false;
+}
+function loadVirtualCode(id, options) {
+  if (!matchesDesignModePattern(id, options)) return void 0;
+  const relativePath = extractRelativePath(id);
+  if (!relativePath) return void 0;
+  const code = virtualCodeMap.get(relativePath) || virtualCodeMap.get("/" + relativePath);
+  if (code && options.verbose) {
+    console.log(`[DesignMode] Using virtual code for: ${relativePath}`);
+  }
+  return code;
+}
+function createVirtualCodeMiddleware(server, options, projectRoot) {
+  var _a;
+  const apiPath = options.virtualCodeApiPath || VIRTUAL_CODE_API_PATH;
+  const verbose = (_a = options.verbose) != null ? _a : false;
+  return (req, res, next) => {
+    var _a2;
+    if (!((_a2 = req.url) == null ? void 0 : _a2.startsWith(apiPath))) {
+      return next();
+    }
+    if (req.method === "OPTIONS") {
+      res.setHeader("Access-Control-Allow-Origin", "*");
+      res.setHeader("Access-Control-Allow-Methods", "GET, POST, DELETE, OPTIONS");
+      res.setHeader("Access-Control-Allow-Headers", "Content-Type");
+      res.statusCode = 204;
+      res.end();
+      return;
+    }
+    res.setHeader("Content-Type", "application/json");
+    res.setHeader("Access-Control-Allow-Origin", "*");
+    if (req.method === "POST") {
+      let body = "";
+      req.on("data", (chunk) => body += chunk.toString());
+      req.on("end", () => {
+        try {
+          const { filePath, content } = JSON.parse(body);
+          virtualCodeMap.set(filePath, content);
+          if (verbose) {
+            console.log(`[DnD] Virtual code set for: ${filePath}`);
+          }
+          const fullPath = path.resolve(projectRoot, filePath);
+          triggerHmrUpdate(server, fullPath, verbose);
+          res.end(JSON.stringify({ success: true, filePath }));
+        } catch (error) {
+          res.statusCode = 500;
+          res.end(JSON.stringify({ error: String(error) }));
+        }
+      });
+      return;
+    }
+    if (req.method === "GET") {
+      const url = new URL(req.url, `http://${req.headers.host}`);
+      const filePath = url.searchParams.get("path");
+      if (filePath) {
+        const content = virtualCodeMap.get(filePath);
+        res.statusCode = content ? 200 : 404;
+        res.end(JSON.stringify(content ? { content } : { error: "Not found" }));
+      } else {
+        res.end(JSON.stringify({ paths: Array.from(virtualCodeMap.keys()) }));
+      }
+      return;
+    }
+    if (req.method === "DELETE") {
+      const url = new URL(req.url, `http://${req.headers.host}`);
+      const filePath = url.searchParams.get("path");
+      const pathsToInvalidate = filePath ? [filePath] : Array.from(virtualCodeMap.keys());
+      filePath ? virtualCodeMap.delete(filePath) : virtualCodeMap.clear();
+      if (verbose) {
+        console.log(`[DnD] Virtual code ${filePath ? `cleared for: ${filePath}` : "all cleared"}`);
+      }
+      for (const p of pathsToInvalidate) {
+        const fullPath = path.resolve(projectRoot, p);
+        triggerHmrUpdate(server, fullPath, verbose);
+      }
+      res.end(JSON.stringify({ success: true, clearedPaths: pathsToInvalidate }));
+      return;
+    }
+    res.statusCode = 405;
+    res.end(JSON.stringify({ error: "Method not allowed" }));
+  };
+}
+
+// src/design-mode/sandbox-script.ts
+function getSandboxScriptContent() {
+  return '(()=>{var e={572(e,t,n){var r=n(736).Symbol;e.exports=r},561(e,t,n){var r=n(572),o=n(504),i=n(567),s=r?r.toStringTag:void 0;e.exports=function(e){return null==e?void 0===e?"[object Undefined]":"[object Null]":s&&s in Object(e)?o(e):i(e)}},605(e,t,n){var r=n(327),o=/^\\s+/;e.exports=function(e){return e?e.slice(0,r(e)+1).replace(o,""):e}},433(e,t,n){var r="object"==typeof n.g&&n.g&&n.g.Object===Object&&n.g;e.exports=r},504(e,t,n){var r=n(572),o=Object.prototype,i=o.hasOwnProperty,s=o.toString,a=r?r.toStringTag:void 0;e.exports=function(e){var t=i.call(e,a),n=e[a];try{e[a]=void 0;var r=!0}catch(e){}var o=s.call(e);return r&&(t?e[a]=n:delete e[a]),o}},567(e){var t=Object.prototype.toString;e.exports=function(e){return t.call(e)}},736(e,t,n){var r=n(433),o="object"==typeof self&&self&&self.Object===Object&&self,i=r||o||Function("return this")();e.exports=i},327(e){var t=/\\s/;e.exports=function(e){for(var n=e.length;n--&&t.test(e.charAt(n)););return n}},702(e,t,n){var r=n(230),o=n(381),i=n(569),s=Math.max,a=Math.min;e.exports=function(e,t,n){var c,u,l,d,f,h,p=0,g=!1,m=!1,v=!0;if("function"!=typeof e)throw new TypeError("Expected a function");function y(t){var n=c,r=u;return c=u=void 0,p=t,d=e.apply(r,n)}function w(e){var n=e-h;return void 0===h||n>=t||n<0||m&&e-p>=l}function b(){var e=o();if(w(e))return E(e);f=setTimeout(b,function(e){var n=t-(e-h);return m?a(n,l-(e-p)):n}(e))}function E(e){return f=void 0,v&&c?y(e):(c=u=void 0,d)}function N(){var e=o(),n=w(e);if(c=arguments,u=this,h=e,n){if(void 0===f)return function(e){return p=e,f=setTimeout(b,t),g?y(e):d}(h);if(m)return clearTimeout(f),f=setTimeout(b,t),y(h)}return void 0===f&&(f=setTimeout(b,t)),d}return t=i(t)||0,r(n)&&(g=!!n.leading,l=(m="maxWait"in n)?s(i(n.maxWait)||0,t):l,v="trailing"in n?!!n.trailing:v),N.cancel=function(){void 0!==f&&clearTimeout(f),p=0,c=h=u=f=void 0},N.flush=function(){return void 0===f?d:E(o())},N}},230(e){e.exports=function(e){var t=typeof e;return null!=e&&("object"==t||"function"==t)}},470(e){e.exports=function(e){return null!=e&&"object"==typeof e}},89(e,t,n){var r=n(561),o=n(470);e.exports=function(e){return"symbol"==typeof e||o(e)&&"[object Symbol]"==r(e)}},381(e,t,n){var r=n(736);e.exports=function(){return r.Date.now()}},569(e,t,n){var r=n(605),o=n(230),i=n(89),s=/^[-+]0x[0-9a-f]+$/i,a=/^0b[01]+$/i,c=/^0o[0-7]+$/i,u=parseInt;e.exports=function(e){if("number"==typeof e)return e;if(i(e))return NaN;if(o(e)){var t="function"==typeof e.valueOf?e.valueOf():e;e=o(t)?t+"":t}if("string"!=typeof e)return 0===e?e:+e;e=r(e);var n=a.test(e);return n||c.test(e)?u(e.slice(2),n?2:8):s.test(e)?NaN:+e}}},t={};function n(r){var o=t[r];if(void 0!==o)return o.exports;var i=t[r]={exports:{}};return e[r](i,i.exports,n),i.exports}n.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return n.d(t,{a:t}),t},n.d=(e,t)=>{for(var r in t)n.o(t,r)&&!n.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},n.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),n.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),(()=>{"use strict";var e=n(702),t=n.n(e),r=class extends Error{code;constructor(e,t){super(t),this.name="PenpalError",this.code=e}},o=e=>({name:e.name,message:e.message,stack:e.stack,penpalCode:e instanceof r?e.code:void 0}),i=Symbol("Reply"),s=class{value;transferables;#e=i;constructor(e,t){this.value=e,this.transferables=t?.transferables}},a="penpal",c=e=>"object"==typeof e&&null!==e,u=e=>"function"==typeof e,l=e=>"SYN"===e.type,d=e=>"ACK1"===e.type,f=e=>"ACK2"===e.type,h=e=>"CALL"===e.type,p=e=>"REPLY"===e.type,g=(e,t=[])=>{const n=[];for(const r of Object.keys(e)){const o=e[r];u(o)?n.push([...t,r]):c(o)&&n.push(...g(o,[...t,r]))}return n},m=e=>e.join("."),v=(e,t,n)=>({namespace:a,channel:e,type:"REPLY",callId:t,isError:!0,...n instanceof Error?{value:o(n),isSerializedErrorInstance:!0}:{value:n}}),y=crypto.randomUUID?.bind(crypto)??(()=>new Array(4).fill(0).map(()=>Math.floor(Math.random()*Number.MAX_SAFE_INTEGER).toString(16)).join("-")),w=Symbol("CallOptions"),b=class{transferables;timeout;#e=w;constructor(e){this.transferables=e?.transferables,this.timeout=e?.timeout}},E=new Set(["apply","call","bind"]),N=(e,t,n=[])=>new Proxy(n.length?()=>{}:Object.create(null),{get(r,o){if("then"!==o)return n.length&&E.has(o)?Reflect.get(r,o):N(e,t,[...n,o])},apply:(t,r,o)=>e(n,o)}),C=e=>new r("CONNECTION_DESTROYED",`Method call ${m(e)}() failed due to destroyed connection`),S=class extends Error{constructor(e){super(`You\'ve hit a bug in Penpal. Please file an issue with the following information: ${e}`)}},x="deprecated-penpal",O=e=>e.join("."),P=e=>new S(`Unexpected message to translate: ${JSON.stringify(e)}`),T=({messenger:e,methods:t,timeout:n,channel:o,log:i})=>{const w=y();let E;const S=[];let O=!1;const P=g(t),{promise:T,resolve:M,reject:I}=(()=>{let e,t;return{promise:new Promise((n,r)=>{e=n,t=r}),resolve:e,reject:t}})(),A=void 0!==n?setTimeout(()=>{I(new r("CONNECTION_TIMEOUT",`Connection timed out after ${n}ms`))},n):void 0,R=()=>{for(const e of S)e()},L=()=>{if(O)return;S.push(((e,t,n,o)=>{let i=!1;const l=async l=>{if(i)return;if(!h(l))return;o?.(`Received ${m(l.methodPath)}() call`,l);const{methodPath:d,args:f,id:p}=l;let g,y;try{const e=((e,t)=>{const n=e.reduce((e,t)=>c(e)?e[t]:void 0,t);return u(n)?n:void 0})(d,t);if(!e)throw new r("METHOD_NOT_FOUND",`Method \\`${m(d)}\\` is not found.`);let o=await e(...f);o instanceof s&&(y=o.transferables,o=await o.value),g={namespace:a,channel:n,type:"REPLY",callId:p,value:o}}catch(e){g=v(n,p,e)}if(!i)try{o?.(`Sending ${m(d)}() reply`,g),e.sendMessage(g,y)}catch(t){throw"DataCloneError"===t.name&&(g=v(n,p,t),o?.(`Sending ${m(d)}() reply`,g),e.sendMessage(g)),t}};return e.addMessageHandler(l),()=>{i=!0,e.removeMessageHandler(l)}})(e,t,o,i));const{remoteProxy:n,destroy:l}=((e,t,n)=>{let o=!1;const i=new Map,s=e=>{if(!p(e))return;const{callId:t,value:o,isError:s,isSerializedErrorInstance:a}=e,c=i.get(t);c&&(i.delete(t),n?.(`Received ${m(c.methodPath)}() call`,e),s?c.reject(a?(({name:e,message:t,stack:n,penpalCode:o})=>{const i=o?new r(o,t):new Error(t);return i.name=e,i.stack=n,i})(o):o):c.resolve(o))};return e.addMessageHandler(s),{remoteProxy:N((s,c)=>{if(o)throw C(s);const u=y(),l=c[c.length-1],d=l instanceof b,{timeout:f,transferables:h}=d?l:{},p=d?c.slice(0,-1):c;return new Promise((o,c)=>{const l=void 0!==f?window.setTimeout(()=>{i.delete(u),c(new r("METHOD_CALL_TIMEOUT",`Method call ${m(s)}() timed out after ${f}ms`))},f):void 0;i.set(u,{methodPath:s,resolve:o,reject:c,timeoutId:l});try{const r={namespace:a,channel:t,type:"CALL",id:u,methodPath:s,args:p};n?.(`Sending ${m(s)}() call`,r),e.sendMessage(r,h)}catch(e){c(new r("TRANSMISSION_FAILED",e.message))}})},n),destroy:()=>{o=!0,e.removeMessageHandler(s);for(const{methodPath:e,reject:t,timeoutId:n}of i.values())clearTimeout(n),t(C(e));i.clear()}}})(e,o,i);S.push(l),clearTimeout(A),O=!0,M({remoteProxy:n,destroy:R})},D=()=>{const t={namespace:a,type:"SYN",channel:o,participantId:w};i?.("Sending handshake SYN",t);try{e.sendMessage(t)}catch(e){I(new r("TRANSMISSION_FAILED",e.message))}},F=t=>{l(t)&&(t=>{if(i?.("Received handshake SYN",t),t.participantId===E&&E!==x)return;if(E=t.participantId,D(),!(w>E||E===x))return;const n={namespace:a,channel:o,type:"ACK1",methodPaths:P};i?.("Sending handshake ACK1",n);try{e.sendMessage(n)}catch(e){return void I(new r("TRANSMISSION_FAILED",e.message))}})(t),d(t)&&(t=>{i?.("Received handshake ACK1",t);const n={namespace:a,channel:o,type:"ACK2"};i?.("Sending handshake ACK2",n);try{e.sendMessage(n)}catch(e){return void I(new r("TRANSMISSION_FAILED",e.message))}L()})(t),f(t)&&(e=>{i?.("Received handshake ACK2",e),L()})(t)};return e.addMessageHandler(F),S.push(()=>e.removeMessageHandler(F)),D(),T},M=new WeakSet,I=class{#t;#n;#r;#o;#i;#s=new Set;#a;#c=!1;constructor({remoteWindow:e,allowedOrigins:t}){if(!e)throw new r("INVALID_ARGUMENT","remoteWindow must be defined");this.#t=e,this.#n=t?.length?t:[window.origin]}initialize=({log:e,validateReceivedMessage:t})=>{this.#r=e,this.#o=t,window.addEventListener("message",this.#u)};sendMessage=(e,t)=>{if(l(e)){const n=this.#l(e);return void this.#t.postMessage(e,{targetOrigin:n,transfer:t})}if(d(e)||this.#c){const n=this.#c?(e=>{if(d(e))return{penpal:"synAck",methodNames:e.methodPaths.map(O)};if(h(e))return{penpal:"call",id:e.id,methodName:O(e.methodPath),args:e.args};if(p(e))return e.isError?{penpal:"reply",id:e.callId,resolution:"rejected",...e.isSerializedErrorInstance?{returnValue:e.value,returnValueIsError:!0}:{returnValue:e.value}}:{penpal:"reply",id:e.callId,resolution:"fulfilled",returnValue:e.value};throw P(e)})(e):e,r=this.#l(e);return void this.#t.postMessage(n,{targetOrigin:r,transfer:t})}if(f(e)){const{port1:n,port2:r}=new MessageChannel;this.#a=n,n.addEventListener("message",this.#d),n.start();const o=[r,...t||[]],i=this.#l(e);return void this.#t.postMessage(e,{targetOrigin:i,transfer:o})}if(!this.#a)throw new S("Port is undefined");this.#a.postMessage(e,{transfer:t})};addMessageHandler=e=>{this.#s.add(e)};removeMessageHandler=e=>{this.#s.delete(e)};destroy=()=>{window.removeEventListener("message",this.#u),this.#f(),this.#s.clear()};#h=e=>this.#n.some(t=>t instanceof RegExp?t.test(e):t===e||"*"===t);#l=e=>{if(l(e))return"*";if(!this.#i)throw new S("Concrete remote origin not set");return"null"===this.#i&&this.#n.includes("*")?"*":this.#i};#f=()=>{this.#a?.removeEventListener("message",this.#d),this.#a?.close(),this.#a=void 0};#u=({source:e,origin:t,ports:n,data:r})=>{if(e===this.#t&&((e=>c(e)&&"penpal"in e)(r)&&(this.#r?.("Please upgrade the child window to the latest version of Penpal."),this.#c=!0,r=(e=>{if("syn"===e.penpal)return{namespace:a,channel:void 0,type:"SYN",participantId:x};if("ack"===e.penpal)return{namespace:a,channel:void 0,type:"ACK2"};if("call"===e.penpal)return{namespace:a,channel:void 0,type:"CALL",id:e.id,methodPath:(t=e.methodName,t.split(".")),args:e.args};var t;if("reply"===e.penpal)return"fulfilled"===e.resolution?{namespace:a,channel:void 0,type:"REPLY",callId:e.id,value:e.returnValue}:{namespace:a,channel:void 0,type:"REPLY",callId:e.id,isError:!0,...e.returnValueIsError?{value:e.returnValue,isSerializedErrorInstance:!0}:{value:e.returnValue}};throw P(e)})(r)),this.#o?.(r)))if(this.#h(t)){if(l(r)&&(this.#f(),this.#i=t),f(r)&&!this.#c){if(this.#a=n[0],!this.#a)throw new S("No port received on ACK2");this.#a.addEventListener("message",this.#d),this.#a.start()}for(const e of this.#s)e(r)}else this.#r?.(`Received a message from origin \\`${t}\\` which did not match allowed origins \\`[${this.#n.join(", ")}]\\``)};#d=({data:e})=>{if(this.#o?.(e))for(const t of this.#s)t(e)}},A=document,R=window,L=Array.prototype,D=L.filter,F=L.indexOf,j=L.map,$=L.push,_=L.reverse,k=L.slice,W=L.splice,z=/^#[\\w-]*$/,U=/^\\.[\\w-]*$/,V=/<.+>/,H=/^\\w+$/;function B(e,t){return void 0===t&&(t=A),U.test(e)?t.getElementsByClassName(e.slice(1)):H.test(e)?t.getElementsByTagName(e):t.querySelectorAll(e)}function Y(e,t){if(void 0===t&&(t=A),e){if(e.__cash)return e;var n=e;if(ne(e)){if(t.__cash&&(t=t[0]),!(n=z.test(e)?t.getElementById(e.slice(1)):V.test(e)?ke(e):B(e,t)))return}else if(te(e))return this.ready(e);(n.nodeType||n===R)&&(n=[n]),this.length=n.length;for(var r=0,o=this.length;r<o;r++)this[r]=n[r]}}function K(e,t){return new Y(e,t)}var q=K.fn=K.prototype=Y.prototype={constructor:K,__cash:!0,length:0,splice:W};q.get=function(e){return void 0===e?k.call(this):this[e<0?e+this.length:e]},q.eq=function(e){return K(this.get(e))},q.first=function(){return this.eq(0)},q.last=function(){return this.eq(-1)},q.map=function(e){return K(j.call(this,function(t,n){return e.call(t,n,t)}))},q.slice=function(){return K(k.apply(this,arguments))};var G=/(?:^\\w|[A-Z]|\\b\\w)/g,X=/[\\s-_]+/g;function J(e){return e.replace(G,function(e,t){return e[t?"toUpperCase":"toLowerCase"]()}).replace(X,"")}function Z(e,t){for(var n=0,r=e.length;n<r&&!1!==t.call(e[n],e[n],n,e);n++);}K.camelCase=J,K.each=Z,q.each=function(e){return Z(this,function(t,n){return e.call(t,n,t)}),this},q.removeProp=function(e){return this.each(function(t,n){delete n[e]})},K.extend=q.extend=function(e){void 0===e&&(e=this);for(var t=arguments,n=t.length,r=n<2?0:1;r<n;r++)for(var o in t[r])e[o]=t[r][o];return e};var Q=1;function ee(e,t){var n=e&&(e.matches||e.webkitMatchesSelector||e.mozMatchesSelector||e.msMatchesSelector||e.oMatchesSelector);return!!n&&n.call(e,t)}function te(e){return"function"==typeof e}function ne(e){return"string"==typeof e}function re(e){return!isNaN(parseFloat(e))&&isFinite(e)}K.guid=Q,K.matches=ee,K.isFunction=te,K.isString=ne,K.isNumeric=re;var oe=Array.isArray;function ie(e){return ne(e)?function(t,n){return ee(n,e)}:e.__cash?function(t,n){return e.is(n)}:function(e,t,n){return t===n}}K.isArray=oe,q.prop=function(e,t){if(e){if(ne(e))return arguments.length<2?this[0]&&this[0][e]:this.each(function(n,r){r[e]=t});for(var n in e)this.prop(n,e[n]);return this}},q.filter=function(e){if(!e)return K();var t=te(e)?e:ie(e);return K(D.call(this,function(n,r){return t.call(n,r,n,e)}))};var se=/\\S+/g;function ae(e){return ne(e)&&e.match(se)||[]}function ce(e){return e.filter(function(e,t,n){return n.indexOf(e)===t})}function ue(e,t,n){if(1===e.nodeType){var r=R.getComputedStyle(e,null);return t?n?r.getPropertyValue(t):r[t]:r}}function le(e,t){return parseInt(ue(e,t),10)||0}q.hasClass=function(e){var t=ae(e),n=!1;return t.length&&this.each(function(e,r){return!(n=r.classList.contains(t[0]))}),n},q.removeAttr=function(e){var t=ae(e);return t.length?this.each(function(e,n){Z(t,function(e){n.removeAttribute(e)})}):this},q.attr=function(e,t){if(e){if(ne(e)){if(arguments.length<2){if(!this[0])return;var n=this[0].getAttribute(e);return null===n?void 0:n}return null===t?this.removeAttr(e):this.each(function(n,r){r.setAttribute(e,t)})}for(var r in e)this.attr(r,e[r]);return this}},q.toggleClass=function(e,t){var n=ae(e),r=void 0!==t;return n.length?this.each(function(e,o){Z(n,function(e){r?t?o.classList.add(e):o.classList.remove(e):o.classList.toggle(e)})}):this},q.addClass=function(e){return this.toggleClass(e,!0)},q.removeClass=function(e){return arguments.length?this.toggleClass(e,!1):this.attr("class","")},K.unique=ce,q.add=function(e,t){return K(ce(this.get().concat(K(e,t).get())))};var de=/^--/;function fe(e){return de.test(e)}var he={},pe=A.createElement("div").style,ge=["webkit","moz","ms","o"];function me(e,t){if(void 0===t&&(t=fe(e)),t)return e;if(!he[e]){var n=J(e),r=""+n.charAt(0).toUpperCase()+n.slice(1);Z((n+" "+ge.join(r+" ")+r).split(" "),function(t){if(t in pe)return he[e]=t,!1})}return he[e]}K.prefixedProp=me;var ve={animationIterationCount:!0,columnCount:!0,flexGrow:!0,flexShrink:!0,fontWeight:!0,lineHeight:!0,opacity:!0,order:!0,orphans:!0,widows:!0,zIndex:!0};function ye(e,t,n){return void 0===n&&(n=fe(e)),n||ve[e]||!re(t)?t:t+"px"}q.css=function(e,t){if(ne(e)){var n=fe(e);return e=me(e,n),arguments.length<2?this[0]&&ue(this[0],e,n):e?(t=ye(e,t,n),this.each(function(r,o){1===o.nodeType&&(n?o.style.setProperty(e,t):o.style[e]=t)})):this}for(var r in e)this.css(r,e[r]);return this};var we="__cashData",be=/^data-(.*)/;function Ee(e){return e[we]=e[we]||{}}function Ne(e,t){var n=Ee(e);if(t){if(!(t in n)){var r=e.dataset?e.dataset[t]||e.dataset[J(t)]:K(e).attr("data-"+t);if(void 0!==r){try{r=JSON.parse(r)}catch(e){}n[t]=r}}return n[t]}return n}function Ce(e,t){return le(e,"border"+(t?"Left":"Top")+"Width")+le(e,"padding"+(t?"Left":"Top"))+le(e,"padding"+(t?"Right":"Bottom"))+le(e,"border"+(t?"Right":"Bottom")+"Width")}function Se(e,t){for(var n=0,r=t.length;n<r;n++)if(e.indexOf(t[n])<0)return!1;return!0}function xe(e,t,n){Z(e[n],function(e){e[0];var r=e[1];t.removeEventListener(n,r)}),delete e[n]}K.hasData=function(e){return we in e},q.data=function(e,t){var n=this;if(!e){if(!this[0])return;return Z(this[0].attributes,function(e){var t=e.name.match(be);t&&n.data(t[1])}),Ne(this[0])}if(ne(e))return void 0===t?this[0]&&Ne(this[0],e):this.each(function(n,r){return function(e,t,n){Ee(e)[t]=n}(r,e,t)});for(var r in e)this.data(r,e[r]);return this},q.removeData=function(e){return this.each(function(t,n){return function(e,t){void 0===t?delete e[we]:delete Ee(e)[t]}(n,e)})},Z(["Width","Height"],function(e){q["inner"+e]=function(){if(this[0])return this[0]===R?R["inner"+e]:this[0]["client"+e]}}),Z(["width","height"],function(e,t){q[e]=function(n){return this[0]?arguments.length?(n=parseInt(n,10),this.each(function(r,o){if(1===o.nodeType){var i=ue(o,"boxSizing");o.style[e]=ye(e,n+("border-box"===i?Ce(o,!t):0))}})):this[0]===R?this[0][J("outer-"+e)]:this[0].getBoundingClientRect()[e]-Ce(this[0],!t):void 0===n?void 0:this}}),Z(["Width","Height"],function(e,t){q["outer"+e]=function(n){if(this[0])return this[0]===R?R["outer"+e]:this[0]["offset"+e]+(n?le(this[0],"margin"+(t?"Top":"Left"))+le(this[0],"margin"+(t?"Bottom":"Right")):0)}});var Oe="__cashEvents";function Pe(e){return e[Oe]=e[Oe]||{}}function Te(e){var t=e.split(".");return[t[0],t.slice(1).sort()]}function Me(e,t,n,r){var o=Pe(e);if(t){var i=o[t];if(!i)return;r&&(r.guid=r.guid||Q++),o[t]=i.filter(function(o){var i=o[0],s=o[1];if(r&&s.guid!==r.guid||!Se(i,n))return!0;e.removeEventListener(t,s)})}else if(n&&n.length)for(t in o)Me(e,t,n,r);else for(t in o)xe(o,e,t)}q.off=function(e,t){var n=this;return void 0===e?this.each(function(e,t){return Me(t)}):Z(ae(e),function(e){var r=Te(e),o=r[0],i=r[1];n.each(function(e,n){return Me(n,o,i,t)})}),this},q.on=function(e,t,n,r){var o=this;if(!ne(e)){for(var i in e)this.on(i,t,e[i]);return this}return te(t)&&(n=t,t=!1),Z(ae(e),function(e){var i=Te(e),s=i[0],a=i[1];o.each(function(e,o){var i=function e(i){if(!i.namespace||Se(a,i.namespace.split("."))){var c=o;if(t){for(var u=i.target;!ee(u,t);){if(u===o)return;if(!(u=u.parentNode))return}c=u}i.namespace=i.namespace||"";var l=n.call(c,i,i.data);r&&Me(o,s,a,e),!1===l&&(i.preventDefault(),i.stopPropagation())}};i.guid=n.guid=n.guid||Q++,function(e,t,n,r){r.guid=r.guid||Q++;var o=Pe(e);o[t]=o[t]||[],o[t].push([n,r]),e.addEventListener(t,r)}(o,s,a,i)})}),this},q.one=function(e,t,n){return this.on(e,t,n,!0)},q.ready=function(e){var t=function(){return e(K)};return"loading"!==A.readyState?setTimeout(t):A.addEventListener("DOMContentLoaded",t),this},q.trigger=function(e,t){var n=e;if(ne(e)){var r=Te(e),o=r[0],i=r[1];(n=A.createEvent("HTMLEvents")).initEvent(o,!0,!0),n.namespace=i.join(".")}return n.data=t,this.each(function(e,t){t.dispatchEvent(n)})};var Ie=/select-one/i,Ae=/select-multiple/i;function Re(e){var t=e.type;return Ie.test(t)?function(e){return e.selectedIndex<0?null:e.options[e.selectedIndex].value}(e):Ae.test(t)?function(e){var t=[];return Z(e.options,function(e){!e.selected||e.disabled||e.parentNode.disabled||t.push(e.value)}),t}(e):e.value}var Le=/%20/g,De=/file|reset|submit|button|image/i,Fe=/radio|checkbox/i;q.serialize=function(){var e="";return this.each(function(t,n){Z(n.elements||[n],function(t){if(!t.disabled&&t.name&&"FIELDSET"!==t.tagName&&!De.test(t.type)&&(!Fe.test(t.type)||t.checked)){var n=Re(t);void 0!==n&&Z(oe(n)?n:[n],function(n){e+=function(e,t){return"&"+encodeURIComponent(e)+"="+encodeURIComponent(t).replace(Le,"+")}(t.name,n)})}})}),e.substr(1)},q.val=function(e){return void 0===e?this[0]&&Re(this[0]):this.each(function(t,n){var r=Ae.test(n.type),o=null===e?r?[]:"":e;r&&oe(o)?Z(n.options,function(e){e.selected=o.indexOf(e.value)>=0}):n.value=o})},q.clone=function(){return this.map(function(e,t){return t.cloneNode(!0)})},q.detach=function(){return this.each(function(e,t){t.parentNode&&t.parentNode.removeChild(t)})};var je,$e=/^\\s*<(\\w+)[^>]*>/,_e=/^\\s*<(\\w+)\\s*\\/?>(?:<\\/\\1>)?\\s*$/;function ke(e){if(function(){if(!je){var e=A.createElement("table"),t=A.createElement("tr");je={"*":A.createElement("div"),tr:A.createElement("tbody"),td:t,th:t,thead:e,tbody:e,tfoot:e}}}(),!ne(e))return[];if(_e.test(e))return[A.createElement(RegExp.$1)];var t=$e.test(e)&&RegExp.$1,n=je[t]||je["*"];return n.innerHTML=e,K(n.childNodes).detach().get()}function We(e,t,n){if(void 0!==t){var r=ne(t);!r&&t.length?Z(t,function(t){return We(e,t,n)}):Z(e,r?function(e){e.insertAdjacentHTML(n?"afterbegin":"beforeend",t)}:function(e,r){return function(e,t,n){n?e.insertBefore(t,e.childNodes[0]):e.appendChild(t)}(e,r?t.cloneNode(!0):t,n)})}}K.parseHTML=ke,q.empty=function(){var e=this[0];if(e)for(;e.firstChild;)e.removeChild(e.firstChild);return this},q.append=function(){var e=this;return Z(arguments,function(t){We(e,t)}),this},q.appendTo=function(e){return We(K(e),this),this},q.html=function(e){if(void 0===e)return this[0]&&this[0].innerHTML;var t=e.nodeType?e[0].outerHTML:e;return this.each(function(e,n){n.innerHTML=t})},q.insertAfter=function(e){var t=this;return K(e).each(function(e,n){var r=n.parentNode;t.each(function(t,o){r.insertBefore(e?o.cloneNode(!0):o,n.nextSibling)})}),this},q.after=function(){var e=this;return Z(_.apply(arguments),function(t){_.apply(K(t).slice()).insertAfter(e)}),this},q.insertBefore=function(e){var t=this;return K(e).each(function(e,n){var r=n.parentNode;t.each(function(t,o){r.insertBefore(e?o.cloneNode(!0):o,n)})}),this},q.before=function(){var e=this;return Z(arguments,function(t){K(t).insertBefore(e)}),this},q.prepend=function(){var e=this;return Z(arguments,function(t){We(e,t,!0)}),this},q.prependTo=function(e){return We(K(e),_.apply(this.slice()),!0),this},q.remove=function(){return this.detach().off()},q.replaceWith=function(e){var t=this;return this.each(function(n,r){var o=r.parentNode;if(o){var i=n?K(e).clone():K(e);if(!i[0])return t.remove(),!1;o.replaceChild(i[0],r),K(i[0]).after(i.slice(1))}})},q.replaceAll=function(e){return K(e).replaceWith(this),this},q.text=function(e){return void 0===e?this[0]?this[0].textContent:"":this.each(function(t,n){n.textContent=e})};var ze=A.documentElement;q.offset=function(){var e=this[0];if(e){var t=e.getBoundingClientRect();return{top:t.top+R.pageYOffset-ze.clientTop,left:t.left+R.pageXOffset-ze.clientLeft}}},q.offsetParent=function(){return K(this[0]&&this[0].offsetParent)},q.position=function(){var e=this[0];if(e)return{left:e.offsetLeft,top:e.offsetTop}},q.children=function(e){var t=[];return this.each(function(e,n){$.apply(t,n.children)}),t=K(ce(t)),e?t.filter(function(t,n){return ee(n,e)}):t},q.contents=function(){var e=[];return this.each(function(t,n){$.apply(e,"IFRAME"===n.tagName?[n.contentDocument]:n.childNodes)}),K(e.length&&ce(e))},q.find=function(e){for(var t=[],n=0,r=this.length;n<r;n++){var o=B(e,this[n]);o.length&&$.apply(t,o)}return K(t.length&&ce(t))},q.has=function(e){var t=ne(e)?function(t,n){return!!B(e,n).length}:function(t,n){return n.contains(e)};return this.filter(t)},q.is=function(e){if(!e||!this[0])return!1;var t=ie(e),n=!1;return this.each(function(r,o){return!(n=t(r,o,e))}),n},q.next=function(){return K(this[0]&&this[0].nextElementSibling)},q.not=function(e){if(!e||!this[0])return this;var t=ie(e);return this.filter(function(n,r){return!t(n,r,e)})},q.parent=function(){var e=[];return this.each(function(t,n){n&&n.parentNode&&e.push(n.parentNode)}),K(ce(e))},q.index=function(e){var t=e?K(e)[0]:this[0],n=e?this:K(t).parent().children();return F.call(n,t)},q.closest=function(e){return e&&this[0]?this.is(e)?this.filter(e):this.parent().closest(e):K()},q.parents=function(e){var t,n=[];return this.each(function(r,o){for(t=o;t&&t.parentNode&&t!==A.body.parentNode;)t=t.parentNode,(!e||e&&ee(t,e))&&n.push(t)}),K(ce(n))},q.prev=function(){return K(this[0]&&this[0].previousElementSibling)},q.siblings=function(){var e=this[0];return this.parent().children().filter(function(t,n){return n!==e})};const Ue=K,Ve=new class{getFiberNode(e){try{const t=Object.keys(e).find(e=>e.startsWith("__reactFiber$")||e.startsWith("__reactInternalInstance$"));return t?e[t]:null}catch(e){return console.warn("[ReactFiberService] Error getting fiber node:",e),null}}getDebugOwner(e){const t=this.getFiberNode(e);return t?._debugOwner??null}getDebugSource(e){const t=this.getFiberNode(e);return t?._debugSource??null}getOwnerDebugSource(e){const t=this.getDebugOwner(e);return t?._debugSource??null}hasDirectSourceInfo(e){return!!e.getAttribute("data-nocode-id")||!!this.getDebugSource(e)}hasOwnerNocodeId(e){const t=this.getDebugOwner(e);if(!t?.memoizedProps)return!1;const n=t.memoizedProps["data-nocode-id"];return"string"==typeof n&&n.length>0}getOwnerNocodeId(e){const t=this.getDebugOwner(e);if(!t?.memoizedProps)return null;const n=t.memoizedProps["data-nocode-id"];return"string"==typeof n?n:null}isSelectableElement(e){if(this.hasDirectSourceInfo(e))return!0;const t=this.getFiberNode(e),n=this.getOwnerDebugSource(e);return!!(t?.return&&5!==t.return.tag&&this.hasOwnerNocodeId(e)&&n)}isComponent(e){if(!this.isSelectableElement(e))return!1;if(e.getAttribute("data-nocode-components-name"))return!0;if(this.getDebugSource(e))return!1;const t=this.getFiberNode(e);return!(!t?.return||5===t.return.tag)}getComponentName(e){const t=e.getAttribute("data-nocode-tag-name");if(t)return t;const n=this.getDebugOwner(e);if(n?.type){const e=n.type;if("function"==typeof e){const t=e.displayName||e.name||"Unknown";return this.normalizeComponentName(t)}if("string"==typeof e)return e}return e.tagName.toLowerCase()}normalizeComponentName(e){return e.replace(/\\d+$/,"")}getComponentProps(e){if(!this.isComponent(e))return;const t=this.getDebugOwner(e);return t?.memoizedProps?this.sanitizeProps(t.memoizedProps):void 0}sanitizeProps(e){const t={};for(const[n,r]of Object.entries(e)){if("children"===n||n.startsWith("_"))continue;const e=this.sanitizeValue(r);void 0!==e&&(t[n]=e)}return t}sanitizeValue(e){if(null===e)return null;if(void 0===e)return;if("function"==typeof e)return;if("symbol"==typeof e)return;if("object"!=typeof e)return e;if("$$typeof"in e)return;if(e instanceof Node)return;if(Array.isArray(e)){const t=[];for(const n of e){const e=this.sanitizeValue(n);void 0!==e&&t.push(e)}return t}const t={};for(const[n,r]of Object.entries(e)){if(n.startsWith("_"))continue;const e=this.sanitizeValue(r);void 0!==e&&(t[n]=e)}return t}buildComponentInfo(e,t){const n=this.isComponent(e),r={isComponent:n,componentType:n?"component":"host",name:n?this.getComponentName(e):e.tagName.toLowerCase()};if(n){const n={...t,...this.getComponentProps(e)??{}},{cleanProps:o,extractedProps:i}=this.extractSpecialProps(n);i.componentsName&&(r.componentsName=i.componentsName),i.componentsVersion&&(r.componentsVersion=i.componentsVersion),r.props=o}return r}extractSpecialProps(e){const t={},n={};for(const[r,o]of Object.entries(e))"componentsName"===r&&"string"==typeof o?n.componentsName=o:"componentsVersion"===r&&"string"==typeof o?n.componentsVersion=o:t[r]=o;return{cleanProps:t,extractedProps:n}}};function He(e){const t={},n=e.attributes;for(let e=0;e<n.length;e++){const r=n[e];r.name.startsWith("data-nocode-")&&(t[r.name.replace("data-nocode-","").replace(/-([a-z])/g,(e,t)=>t.toUpperCase())]=r.value)}return t}const Be="data-dnd",Ye=`[${Be}]`;function Ke(e){return document.querySelector(`[${Be}="${e}"]`)}const qe=(e,t)=>{const n=e.getBoundingClientRect(),{x:r,y:o}=((e,t)=>{let n=e.x,r=e.y;if(t){const e=t.getBoundingClientRect();n-=e.left,r-=e.top}return{x:n,y:r}})({x:n.left,y:n.top},t);return{width:e.offsetWidth,height:e.offsetHeight,top:o,left:r}},Ge=(e,t)=>{const n=qe(e,t),r=function(e){return e.dataset}(e),o=Xe(e),i=Je(e),s=(e=>{const t=window.getComputedStyle(e);return{display:t.display,flexDirection:t.flexDirection,flexWrap:t.flexWrap,position:t.position}})(e),a=r.dnd||"",c=function(e){if(!e)return{};const t=e.split(":");if(t.length>=3){const n=t.pop(),r=t.pop(),o=t.join(":");return{id:e,filename:decodeURIComponent(o),component:r,codeId:n}}return 2===t.length?{id:e,component:t[0],codeId:t[1]}:{id:e}}(a),u=He(e),l=function(e){const t=He(e);return Ve.buildComponentInfo(e,t)}(e),d=(e=>{const t=e.querySelectorAll(`:scope > ${Ye}`);if(!t.length)return[];const n=[];return t.forEach(e=>{const t=e;n.push(qe(t))}),n})(e);return{id:a,codeId:c.codeId,name:c.component||e.tagName.toLowerCase(),filename:c.filename,bounding:n,display:o,computedStyle:s,text:i,nocodeData:u,componentInfo:l,childrenBoundings:d.length>0?d:void 0}},Xe=e=>Ue(e).css("display"),Je=e=>{const t=[];return e.childNodes.forEach(e=>{if(e.nodeType===Node.TEXT_NODE){const n=e.textContent?.trim()||"";n&&t.push(n)}}),t.join(" ")};function Ze(e){const t=["div","p","section","article","main","header","footer","nav","h1","h2","h3","h4","h5","h6","span","a","button","i","input","textarea","select","label","form","ul","ol","li","table","thead","tbody","tr","td","th","img","video","audio","canvas","svg"];try{const n=e.tagName.toLowerCase();if(!t.includes(n))return!1;const r=window.getComputedStyle(e);if("none"===r.display||"hidden"===r.visibility||"0"===r.opacity)return!1;const o=e.getBoundingClientRect();return!("inline"!==r.display&&"inline-block"!==r.display&&(0===o.width||0===o.height))}catch(e){return console.warn("Element validation failed:",e),!1}}function Qe(e,t=20){let n=e,r=0;for(;n&&r<t;){if(n.getAttribute(Be))return n;n=n.parentElement,r++}return null}function et(e){const t=window.getComputedStyle(e),n={};for(let e=0;e<t.length;e++){const r=t[e];n[r]=t.getPropertyValue(r)}return n}function tt(e){return(...t)=>{try{const n=e(...t);return n&&"function"==typeof n.then?n.catch(n=>(console.error(`Async error in ${e.name}:`,n),console.error("Error stack:",n.stack),console.error("Function arguments:",t),null)):n}catch(n){return console.error(`Sync error in ${e.name}:`,n),n instanceof Error&&console.error("Error stack:",n.stack),console.error("Function arguments:",t),null}}}const nt={getDraggableParentsData:(e,t)=>{const n=function(e,t){const n=((e,t)=>{const n=document.elementFromPoint(e,t);if(!n)return null;const r=n=>{if(n?.shadowRoot){const o=n.shadowRoot.elementFromPoint(e,t);return o===n?n:o?.shadowRoot?r(o):o||n}return n};return r(n)})(e,t);if(!n)return null;let r=n;if(!Ze(r)){let e=r.parentElement,t=0;const n=20;for(;e&&t<n;){if(Ze(e)){r=e;break}e=e.parentElement,t++}if(!Ze(r))return null}const o=Qe(r);return o&&Ze(o)?o:null}(e.x,e.y);if(!n)return;const r=(e=>{const t=Ue(e).closest(Ye).get(0),n=Ue(e).parents(Ye).get();return n[0]!==t&&n.unshift(t),n})(n);if(r.length){if(t){const e=r.map(e=>Ge(e));return{...e[0],computedStyle:et(n),parents:e.slice(1)}}return{...Ge(r[0]),computedStyle:et(r[0])}}},getElementDataById:e=>{const t=Ke(e);if(t)return{...Ge(t),computedStyle:et(t)};console.warn("[getElementDataById] Element not found for domId:",e)},getEditableTextElementAtPosition:e=>{const t=function(e,t){if(document.caretPositionFromPoint){const n=document.caretPositionFromPoint(e,t);return n?.offsetNode??null}if(document.caretRangeFromPoint){const n=document.caretRangeFromPoint(e,t);return n?.startContainer??null}return document.elementFromPoint(e,t)}(e.x,e.y);if(!t)return void console.log("[getEditableTextElementAtPosition] No node at point:",e);if(t.nodeType!==Node.TEXT_NODE)return void console.log("[getEditableTextElementAtPosition] Not a text node:",t.nodeType);const n=t.textContent?.trim();if(!n)return void console.log("[getEditableTextElementAtPosition] Empty text node");const r=t.parentElement;if(!r)return void console.log("[getEditableTextElementAtPosition] No parent element");const o=Qe(r);if(o){if(function(e){const t=e.childNodes;let n=!1;for(let e=0;e<t.length;e++){const r=t[e];if(r.nodeType===Node.ELEMENT_NODE)return!1;if(r.nodeType===Node.TEXT_NODE){const e=r.textContent?.trim();e&&(n=!0)}}return n}(o))return console.log("[getEditableTextElementAtPosition] Found editable text element:",o.tagName,o.textContent),{...Ge(o),computedStyle:et(o)};console.log("[getEditableTextElementAtPosition] Element has child elements, cannot edit directly:",o.tagName)}else console.log("[getEditableTextElementAtPosition] No marked element found")},updateElementTextContent:(e,t)=>{const n=Ke(e);return n?(n.textContent=t,!0):(console.warn("[updateElementTextContent] Element not found:",e),!1)},scrollToElement:e=>{const t=Ke(e);return t?(t.scrollIntoView({behavior:"instant",block:"center",inline:"center"}),!0):(console.warn("[scrollToElement] Element not found for domId:",e),!1)}},rt=Object.fromEntries(Object.entries(nt).map(([e,t])=>[e,tt(t)])),ot="nocode-design-mode";let it=null,st=!1,at=null;const ct=t()(()=>{it?.onWindowMutated&&(console.log(`${ot} - Notifying parent of DOM mutation`),it.onWindowMutated({added:{},removed:{}}))},100),ut=async()=>{if(st||it)return it;st=!0,console.log(`${ot} - Creating penpal connection`);const e=(({messenger:e,methods:t={},timeout:n,channel:o,log:i})=>{if(!e)throw new r("INVALID_ARGUMENT","messenger must be defined");if(M.has(e))throw new r("INVALID_ARGUMENT","A messenger can only be used for a single connection");M.add(e);const s=[e.destroy],u=(e=>{let t,n=!1;return(...r)=>(n||(n=!0,t=e(...r)),t)})(t=>{if(t){const t={namespace:a,channel:o,type:"DESTROY"};try{e.sendMessage(t)}catch(e){}}for(const e of s)e();i?.("Connection destroyed")}),l=e=>(e=>c(e)&&e.namespace===a)(e)&&e.channel===o;return{promise:(async()=>{try{e.initialize({log:i,validateReceivedMessage:l}),e.addMessageHandler(e=>{(e=>"DESTROY"===e.type)(e)&&u(!1)});const{remoteProxy:r,destroy:a}=await T({messenger:e,methods:t,timeout:n,channel:o,log:i});return s.push(a),r}catch(e){throw u(!0),e}})(),destroy:()=>{u(!0)}}})({messenger:new I({remoteWindow:window===window.top?(console.warn(`${ot} - Not in an iframe, using window.parent as fallback`),window.parent):window.parent===window.top?window.parent:window.top?(console.log(`${ot} - Using window.top for nested iframe scenario`),window.top):window.parent,allowedOrigins:["*"]}),methods:rt});return e.promise.then(e=>{if(!e)return console.error(`${ot} - Failed to setup penpal connection: child is null`),void lt();it=e,console.log(`${ot} - Penpal connection set`),(()=>{if(at)return;at=new MutationObserver(e=>{e.some(e=>{const t=e.target;return"SCRIPT"!==t.tagName&&"STYLE"!==t.tagName&&("attributes"!==e.type||"style"===e.attributeName||"class"===e.attributeName)})&&ct()});const e=()=>{document.body&&at&&(at.observe(document.body,{childList:!0,subtree:!0,attributes:!0,attributeFilter:["style","class"],characterData:!0}),console.log(`${ot} - MutationObserver started`))};"loading"===document.readyState?document.addEventListener("DOMContentLoaded",e):e()})()}).finally(()=>{st=!1}),e.promise.catch(e=>{console.error(`${ot} - Failed to setup penpal connection:`,e),lt()}),it},lt=t()(()=>{st||(console.log(`${ot} - Reconnecting to penpal parent`),it=null,ut())},1e3);ut()})()})();';
+}
+function createSandboxScriptMiddleware(options) {
+  var _a;
+  const verbose = (_a = options.verbose) != null ? _a : false;
+  const scriptContent = getSandboxScriptContent();
+  return (req, res, next) => {
+    if (req.url !== SANDBOX_SCRIPT_PATH) {
+      return next();
+    }
+    if (!scriptContent) {
+      if (verbose) {
+        console.warn("[DesignMode] sandbox-script.js not embedded. Build may be incomplete.");
+      }
+      res.statusCode = 404;
+      res.end("/* sandbox-script.js not available */");
+      return;
+    }
+    res.setHeader("Content-Type", "application/javascript");
+    res.setHeader("Cache-Control", "no-cache");
+    res.end(scriptContent);
+  };
+}
+function injectSandboxScript(html) {
+  const scriptTag = `<script src="${SANDBOX_SCRIPT_PATH}"></script>`;
+  if (html.includes(SANDBOX_SCRIPT_PATH)) {
+    return html;
+  }
+  if (html.includes("</head>")) {
+    return html.replace("</head>", `    ${scriptTag}
+  </head>`);
+  }
+  if (html.includes("<body>")) {
+    return html.replace("<body>", `<body>
+    ${scriptTag}`);
+  }
+  return html + `
+${scriptTag}`;
+}
+
+// src/visual-edit/override-code.ts
+var overrideMap = /* @__PURE__ */ new Map();
+function loadOverrideCode(id) {
+  const [filePath] = id.split("?", 2);
+  return overrideMap.get(filePath);
+}
+function clearAllOverridesAndInvalidate(server) {
+  if (overrideMap.size === 0) return;
+  for (const filePath of overrideMap.keys()) {
+    const mods = safeGetModulesByFile(server, filePath);
+    if (mods && mods.size > 0) {
+      for (const mod of mods) {
+        safeInvalidateModule(server, mod);
+      }
+    }
+  }
+  overrideMap.clear();
+}
+var OVERRIDE_API_PATH = "/__nocode_file_override";
+function createOverrideMiddleware(server) {
+  return async (req, res, next) => {
+    var _a;
+    if (!((_a = req.url) == null ? void 0 : _a.startsWith(OVERRIDE_API_PATH))) {
+      return next();
+    }
+    if (req.method !== "POST") {
+      return next();
+    }
+    try {
+      const { file, code } = await readJsonBody(req);
+      if (!file || typeof code !== "string") {
+        res.statusCode = 400;
+        res.end(JSON.stringify({ error: "file and code are required" }));
+        return;
+      }
+      const absolutePath = resolveFileToAbsPath(file, server.config.root);
+      if (!absolutePath) {
+        console.warn("[nocode-compiler] file not found:", file, server.config.root);
+        res.statusCode = 404;
+        res.end(JSON.stringify({ error: "file not found" }));
+        return;
+      }
+      overrideMap.set(absolutePath, code);
+      const mods = safeGetModulesByFile(server, absolutePath);
+      if (mods && mods.size > 0) {
+        for (const mod of mods) {
+          safeInvalidateModule(server, mod);
+          safeSendHmrUpdate(server, {
+            type: "update",
+            updates: [
+              {
+                type: "js-update",
+                path: mod.url,
+                acceptedPath: mod.url,
+                timestamp: Date.now()
+              }
+            ]
+          });
+        }
+      }
+      res.statusCode = 200;
+      res.end(JSON.stringify({ success: true }));
+    } catch (error) {
+      res.statusCode = 500;
+      res.end(JSON.stringify({ error: String(error) }));
+    }
+  };
+}
+
+// src/index.ts
 var PLUGIN_NAME = "vite-plugin-nocode-compiler";
 function ensurePluginFirst(config, onError) {
   try {
@@ -149,6 +427,10 @@ function componentCompiler(options = {}) {
     enableLogging: false,
     ...options
   };
+  const designModeOptions = {
+    ...DEFAULT_DESIGN_MODE_OPTIONS,
+    ...options.designModeOptions
+  };
   const monitorService = new import_nocode_compiler_core.MonitorService({
     pluginName: "vite-plugin-nocode-compiler",
     framework: "vite",
@@ -157,8 +439,10 @@ function componentCompiler(options = {}) {
   monitorService.reportMetrics(import_nocode_compiler_core.MetricType.PLUGIN_USE, 1);
   const vueCompiler = new import_nocode_compiler_core.VueCompiler(options);
   const jsxCompiler = new import_nocode_compiler_core.JSXCompiler(options);
+  const designModeCompiler = new import_nocode_compiler_core.DesignModeCompiler(options);
   let server;
   let pkgRegistry;
+  let projectRoot = "";
   return {
     name: PLUGIN_NAME,
     enforce: "pre",
@@ -166,81 +450,59 @@ function componentCompiler(options = {}) {
      * 配置解析完成后：
      * 1. 将本插件移到插件列表最前面，确保在所有 enforce: 'pre' 插件中第一个执行
      * 2. 初始化 PackageVersionRegistry
+     * 并预扫描项目 dependencies，填充版本缓存
      */
     configResolved(config) {
       ensurePluginFirst(config, (error) => monitorService.reportError(error, { scene: "ensurePluginFirst" }));
       pkgRegistry = new import_nocode_compiler_core.PackageVersionRegistry(config.root);
+      projectRoot = config.root;
+      (0, import_nocode_compiler_core.preloadDependencyVersions)(pkgRegistry);
     },
     /**
-     * 配置开发服务器，添加 Override 中间件
-     * 兼容 Vite 2.x - 5.x
+     * 配置开发服务器，添加 Override 中间件和设计模式中间件
+     * 兼容 Vite 2.x - 6.x
      */
     configureServer(_server) {
       server = _server;
       safeOnConnection(server, () => {
-        if (overrideMap.size === 0) return;
-        for (const filePath of overrideMap.keys()) {
-          const mods = safeGetModulesByFile(server, filePath);
-          if (mods && mods.size > 0) {
-            for (const mod of mods) {
-              safeInvalidateModule(server, mod);
-            }
-          }
-        }
-        overrideMap.clear();
-      });
-      server.middlewares.use("/__nocode_file_override", async (req, res, next) => {
-        if (req.method !== "POST") {
-          return next();
-        }
-        try {
-          const { file, code } = await readJsonBody(req);
-          if (!file || typeof code !== "string") {
-            res.statusCode = 400;
-            res.end(JSON.stringify({ error: "file and code are required" }));
-            return;
-          }
-          const absolutePath = resolveFileToAbsPath(file, server.config.root);
-          if (!absolutePath) {
-            console.warn("[nocode-compiler] file not found:", file, server.config.root);
-            res.statusCode = 404;
-            res.end(JSON.stringify({ error: "file not found" }));
-            return;
+        clearAllOverridesAndInvalidate(server);
+        if (virtualCodeMap.size > 0) {
+          if (designModeOptions.verbose) {
+            console.log(`[DesignMode] Client reconnected, clearing ${virtualCodeMap.size} virtual code entries`);
           }
-          overrideMap.set(absolutePath, code);
-          const mods = safeGetModulesByFile(server, absolutePath);
-          if (mods && mods.size > 0) {
-            for (const mod of mods) {
-              safeInvalidateModule(server, mod);
-              safeSendHmrUpdate(server, {
-                type: "update",
-                updates: [
-                  {
-                    type: "js-update",
-                    path: mod.url,
-                    acceptedPath: mod.url,
-                    timestamp: Date.now()
-                  }
-                ]
-              });
-            }
-          }
-          res.statusCode = 200;
-          res.end(JSON.stringify({ success: true }));
-        } catch (error) {
-          res.statusCode = 500;
-          res.end(JSON.stringify({ error: String(error) }));
+          virtualCodeMap.clear();
         }
       });
+      server.middlewares.use(createOverrideMiddleware(server));
+      server.middlewares.use(createSandboxScriptMiddleware(designModeOptions));
+      if (designModeOptions.enableVirtualCode) {
+        server.middlewares.use(createVirtualCodeMiddleware(server, designModeOptions, projectRoot));
+        console.log(`[DesignMode] Virtual code API enabled at ${designModeOptions.virtualCodeApiPath}`);
+      }
+    },
+    /**
+     * 转换 index.html：
+     * 1. 在 <body> 标签上注入组件库版本信息和编译插件版本
+     * 2. 注入 sandbox script（设计模式功能）
+     * 兼容 Vite 2.x - 6.x（transformIndexHtml 从 Vite 2 起就支持简单函数形式）
+     */
+    transformIndexHtml(html) {
+      const metadata = (0, import_nocode_compiler_core.generateBodyMetadata)(pkgRegistry, version);
+      html = (0, import_nocode_compiler_core.injectBodyMetadata)(html, metadata);
+      html = injectSandboxScript(html);
+      return html;
     },
     /**
-     * 加载模块时，如果有 override 则返回 override 内容
+     * 加载模块时，检查 override 和虚拟代码
      */
     load(id) {
       if (id.includes("node_modules")) return;
-      const [filePath] = id.split("?", 2);
-      if (overrideMap.has(filePath)) {
-        return overrideMap.get(filePath);
+      const overrideCode = loadOverrideCode(id);
+      if (overrideCode) {
+        return overrideCode;
+      }
+      if (designModeOptions.enableVirtualCode) {
+        return loadVirtualCode(id, designModeOptions);
       }
       return void 0;
     },
@@ -249,6 +511,12 @@ function componentCompiler(options = {}) {
         return code;
       }
       const [filePath, query] = id.split("?", 2);
+      if (!shouldSkipDesignModeTransform(id, designModeOptions)) {
+        const result = designModeCompiler.compile(code, filePath);
+        if (result) {
+          code = result.code;
+        }
+      }
       const { useJSXCompiler, useVueCompiler } = (0, import_nocode_compiler_core.detectCompileScenario)({
         filePath,
         query

package/dist/index.d.cts

@@ -1,8 +1,28 @@
 import { Plugin } from 'vite';
 
+/**
+ * 设计模式插件选项（Vite 特有配置）
+ */
+interface DesignModePluginOptions {
+    /** 是否启用虚拟代码 API，默认 true */
+    enableVirtualCode?: boolean;
+    /** 虚拟代码 API 路径，默认 '/api/virtual-code' */
+    virtualCodeApiPath?: string;
+    /** 是否启用详细日志，默认 false */
+    verbose?: boolean;
+    /** 要排除的文件模式，默认 [/node_modules/] */
+    exclude?: RegExp[];
+    /** 要包含的文件模式，默认 [/\.[jt]sx?$/] */
+    include?: RegExp[];
+}
+
 interface NocodeCompilerOptions {
+    /** 是否启用日志，默认 false */
     enableLogging?: boolean;
+    /** 根路径配置 */
     rootPath?: string;
+    /** 设计模式插件选项 */
+    designModeOptions?: DesignModePluginOptions;
 }
 declare function componentCompiler(options?: NocodeCompilerOptions): Plugin;
 

package/dist/index.d.ts

@@ -1,8 +1,28 @@
 import { Plugin } from 'vite';
 
+/**
+ * 设计模式插件选项（Vite 特有配置）
+ */
+interface DesignModePluginOptions {
+    /** 是否启用虚拟代码 API，默认 true */
+    enableVirtualCode?: boolean;
+    /** 虚拟代码 API 路径，默认 '/api/virtual-code' */
+    virtualCodeApiPath?: string;
+    /** 是否启用详细日志，默认 false */
+    verbose?: boolean;
+    /** 要排除的文件模式，默认 [/node_modules/] */
+    exclude?: RegExp[];
+    /** 要包含的文件模式，默认 [/\.[jt]sx?$/] */
+    include?: RegExp[];
+}
+
 interface NocodeCompilerOptions {
+    /** 是否启用日志，默认 false */
     enableLogging?: boolean;
+    /** 根路径配置 */
     rootPath?: string;
+    /** 设计模式插件选项 */
+    designModeOptions?: DesignModePluginOptions;
 }
 declare function componentCompiler(options?: NocodeCompilerOptions): Plugin;
 

package/dist/index.js

@@ -1,30 +1,11 @@
 // src/index.ts
+import { JSXCompiler, VueCompiler, DesignModeCompiler, detectCompileScenario, PackageVersionRegistry, MonitorService, MetricType, preloadDependencyVersions, generateBodyMetadata, injectBodyMetadata } from "@meituan-nocode/nocode-compiler-core";
+
+// src/utils/index.ts
 import { normalize, dirname, isAbsolute, join } from "path";
 import { existsSync } from "fs";
-import { JSXCompiler, VueCompiler, detectCompileScenario, PackageVersionRegistry, MonitorService, MetricType } from "@meituan-nocode/nocode-compiler-core";
-
-// src/utils.ts
-function readJsonBody(req) {
-  return new Promise((resolve, reject) => {
-    let body = "";
-    req.on("data", (chunk) => {
-      body += chunk.toString();
-    });
-    req.on("end", () => {
-      try {
-        resolve(JSON.parse(body));
-      } catch (e) {
-        reject(e);
-      }
-    });
-    req.on("error", reject);
-  });
-}
-
-// package.json
-var version = "0.3.0";
 
-// src/index.ts
+// src/utils/vite-compat.ts
 function getHotChannel(server) {
   try {
     if (server.hot && typeof server.hot.on === "function") {
@@ -46,7 +27,7 @@ function safeOnConnection(server, callback) {
     channel.on("connection", callback);
     return true;
   } catch (e) {
-    console.warn("[VitePluginNocodeCompiler] Error setting up connection listener:", e);
+    console.warn("[vite-compat] Error setting up connection listener:", e);
     return false;
   }
 }
@@ -59,7 +40,7 @@ function safeSendHmrUpdate(server, payload) {
     channel.send(payload);
     return true;
   } catch (e) {
-    console.warn("[VitePluginNocodeCompiler] Error sending HMR update:", e);
+    console.warn("[vite-compat] Error sending HMR update:", e);
     return false;
   }
 }
@@ -70,7 +51,7 @@ function safeInvalidateModule(server, mod) {
       return true;
     }
   } catch (e) {
-    console.warn("[VitePluginNocodeCompiler] Error invalidating module:", e);
+    console.warn("[vite-compat] Error invalidating module:", e);
   }
   return false;
 }
@@ -80,20 +61,59 @@ function safeGetModulesByFile(server, filePath) {
       return server.moduleGraph.getModulesByFile(filePath) || null;
     }
   } catch (e) {
-    console.warn("[VitePluginNocodeCompiler] Error getting modules by file:", e);
+    console.warn("[vite-compat] Error getting modules by file:", e);
   }
   return null;
 }
-var overrideMap = /* @__PURE__ */ new Map();
-function resolveFileToAbsPath(file, viteRoot) {
+function triggerHmrUpdate(server, fullPath, verbose = false) {
+  const modules = server.moduleGraph.getModulesByFile(fullPath);
+  if (modules && modules.size > 0) {
+    for (const mod of modules) {
+      safeInvalidateModule(server, mod);
+      safeSendHmrUpdate(server, {
+        type: "update",
+        updates: [
+          {
+            type: "js-update",
+            path: mod.url,
+            acceptedPath: mod.url,
+            timestamp: Date.now()
+          }
+        ]
+      });
+      if (verbose) {
+        console.log(`[vite-compat] HMR triggered for: ${mod.url}`);
+      }
+    }
+  } else {
+    const mod = server.moduleGraph.getModuleById(fullPath);
+    if (mod) {
+      safeInvalidateModule(server, mod);
+      safeSendHmrUpdate(server, {
+        type: "update",
+        updates: [
+          {
+            type: "js-update",
+            path: mod.url,
+            acceptedPath: mod.url,
+            timestamp: Date.now()
+          }
+        ]
+      });
+    }
+  }
+}
+
+// src/utils/index.ts
+function resolveFileToAbsPath(file, rootDir) {
   if (isAbsolute(file)) {
     return existsSync(file) ? normalize(file) : null;
   }
-  const fromRoot = join(viteRoot, file);
+  const fromRoot = join(rootDir, file);
   if (existsSync(fromRoot)) {
     return normalize(fromRoot);
   }
-  let dir = viteRoot;
+  let dir = rootDir;
   while (true) {
     const candidate = join(dir, file);
     if (existsSync(candidate)) {
@@ -105,6 +125,254 @@ function resolveFileToAbsPath(file, viteRoot) {
   }
   return null;
 }
+function readJsonBody(req) {
+  return new Promise((resolve2, reject) => {
+    let body = "";
+    req.on("data", (chunk) => {
+      body += chunk.toString();
+    });
+    req.on("end", () => {
+      try {
+        resolve2(JSON.parse(body));
+      } catch (e) {
+        reject(e);
+      }
+    });
+    req.on("error", reject);
+  });
+}
+
+// package.json
+var version = "0.3.1-beta.1";
+
+// src/design-mode/types.ts
+var SANDBOX_SCRIPT_PATH = "/sandbox-script.js";
+var VIRTUAL_CODE_API_PATH = "/api/virtual-code";
+var DEFAULT_DESIGN_MODE_OPTIONS = {
+  enableVirtualCode: true,
+  virtualCodeApiPath: VIRTUAL_CODE_API_PATH,
+  verbose: false,
+  exclude: [/node_modules/],
+  include: [/\.[jt]sx?$/]
+};
+
+// src/design-mode/virtual-code.ts
+import * as path from "path";
+var virtualCodeMap = /* @__PURE__ */ new Map();
+function matchesDesignModePattern(id, options) {
+  const exclude = options.exclude || [];
+  const include = options.include || [];
+  if (exclude.some((re) => re.test(id))) return false;
+  if (!include.some((re) => re.test(id))) return false;
+  return true;
+}
+function extractRelativePath(id) {
+  const srcIndex = id.indexOf("/src/");
+  return srcIndex !== -1 ? id.slice(srcIndex + 1) : null;
+}
+function hasVirtualCode(id) {
+  const relativePath = extractRelativePath(id);
+  if (!relativePath) return false;
+  return virtualCodeMap.has(relativePath) || virtualCodeMap.has("/" + relativePath);
+}
+function shouldSkipDesignModeTransform(id, options) {
+  if (!matchesDesignModePattern(id, options)) return true;
+  if (hasVirtualCode(id)) return true;
+  return false;
+}
+function loadVirtualCode(id, options) {
+  if (!matchesDesignModePattern(id, options)) return void 0;
+  const relativePath = extractRelativePath(id);
+  if (!relativePath) return void 0;
+  const code = virtualCodeMap.get(relativePath) || virtualCodeMap.get("/" + relativePath);
+  if (code && options.verbose) {
+    console.log(`[DesignMode] Using virtual code for: ${relativePath}`);
+  }
+  return code;
+}
+function createVirtualCodeMiddleware(server, options, projectRoot) {
+  var _a;
+  const apiPath = options.virtualCodeApiPath || VIRTUAL_CODE_API_PATH;
+  const verbose = (_a = options.verbose) != null ? _a : false;
+  return (req, res, next) => {
+    var _a2;
+    if (!((_a2 = req.url) == null ? void 0 : _a2.startsWith(apiPath))) {
+      return next();
+    }
+    if (req.method === "OPTIONS") {
+      res.setHeader("Access-Control-Allow-Origin", "*");
+      res.setHeader("Access-Control-Allow-Methods", "GET, POST, DELETE, OPTIONS");
+      res.setHeader("Access-Control-Allow-Headers", "Content-Type");
+      res.statusCode = 204;
+      res.end();
+      return;
+    }
+    res.setHeader("Content-Type", "application/json");
+    res.setHeader("Access-Control-Allow-Origin", "*");
+    if (req.method === "POST") {
+      let body = "";
+      req.on("data", (chunk) => body += chunk.toString());
+      req.on("end", () => {
+        try {
+          const { filePath, content } = JSON.parse(body);
+          virtualCodeMap.set(filePath, content);
+          if (verbose) {
+            console.log(`[DnD] Virtual code set for: ${filePath}`);
+          }
+          const fullPath = path.resolve(projectRoot, filePath);
+          triggerHmrUpdate(server, fullPath, verbose);
+          res.end(JSON.stringify({ success: true, filePath }));
+        } catch (error) {
+          res.statusCode = 500;
+          res.end(JSON.stringify({ error: String(error) }));
+        }
+      });
+      return;
+    }
+    if (req.method === "GET") {
+      const url = new URL(req.url, `http://${req.headers.host}`);
+      const filePath = url.searchParams.get("path");
+      if (filePath) {
+        const content = virtualCodeMap.get(filePath);
+        res.statusCode = content ? 200 : 404;
+        res.end(JSON.stringify(content ? { content } : { error: "Not found" }));
+      } else {
+        res.end(JSON.stringify({ paths: Array.from(virtualCodeMap.keys()) }));
+      }
+      return;
+    }
+    if (req.method === "DELETE") {
+      const url = new URL(req.url, `http://${req.headers.host}`);
+      const filePath = url.searchParams.get("path");
+      const pathsToInvalidate = filePath ? [filePath] : Array.from(virtualCodeMap.keys());
+      filePath ? virtualCodeMap.delete(filePath) : virtualCodeMap.clear();
+      if (verbose) {
+        console.log(`[DnD] Virtual code ${filePath ? `cleared for: ${filePath}` : "all cleared"}`);
+      }
+      for (const p of pathsToInvalidate) {
+        const fullPath = path.resolve(projectRoot, p);
+        triggerHmrUpdate(server, fullPath, verbose);
+      }
+      res.end(JSON.stringify({ success: true, clearedPaths: pathsToInvalidate }));
+      return;
+    }
+    res.statusCode = 405;
+    res.end(JSON.stringify({ error: "Method not allowed" }));
+  };
+}
+
+// src/design-mode/sandbox-script.ts
+function getSandboxScriptContent() {
+  return '(()=>{var e={572(e,t,n){var r=n(736).Symbol;e.exports=r},561(e,t,n){var r=n(572),o=n(504),i=n(567),s=r?r.toStringTag:void 0;e.exports=function(e){return null==e?void 0===e?"[object Undefined]":"[object Null]":s&&s in Object(e)?o(e):i(e)}},605(e,t,n){var r=n(327),o=/^\\s+/;e.exports=function(e){return e?e.slice(0,r(e)+1).replace(o,""):e}},433(e,t,n){var r="object"==typeof n.g&&n.g&&n.g.Object===Object&&n.g;e.exports=r},504(e,t,n){var r=n(572),o=Object.prototype,i=o.hasOwnProperty,s=o.toString,a=r?r.toStringTag:void 0;e.exports=function(e){var t=i.call(e,a),n=e[a];try{e[a]=void 0;var r=!0}catch(e){}var o=s.call(e);return r&&(t?e[a]=n:delete e[a]),o}},567(e){var t=Object.prototype.toString;e.exports=function(e){return t.call(e)}},736(e,t,n){var r=n(433),o="object"==typeof self&&self&&self.Object===Object&&self,i=r||o||Function("return this")();e.exports=i},327(e){var t=/\\s/;e.exports=function(e){for(var n=e.length;n--&&t.test(e.charAt(n)););return n}},702(e,t,n){var r=n(230),o=n(381),i=n(569),s=Math.max,a=Math.min;e.exports=function(e,t,n){var c,u,l,d,f,h,p=0,g=!1,m=!1,v=!0;if("function"!=typeof e)throw new TypeError("Expected a function");function y(t){var n=c,r=u;return c=u=void 0,p=t,d=e.apply(r,n)}function w(e){var n=e-h;return void 0===h||n>=t||n<0||m&&e-p>=l}function b(){var e=o();if(w(e))return E(e);f=setTimeout(b,function(e){var n=t-(e-h);return m?a(n,l-(e-p)):n}(e))}function E(e){return f=void 0,v&&c?y(e):(c=u=void 0,d)}function N(){var e=o(),n=w(e);if(c=arguments,u=this,h=e,n){if(void 0===f)return function(e){return p=e,f=setTimeout(b,t),g?y(e):d}(h);if(m)return clearTimeout(f),f=setTimeout(b,t),y(h)}return void 0===f&&(f=setTimeout(b,t)),d}return t=i(t)||0,r(n)&&(g=!!n.leading,l=(m="maxWait"in n)?s(i(n.maxWait)||0,t):l,v="trailing"in n?!!n.trailing:v),N.cancel=function(){void 0!==f&&clearTimeout(f),p=0,c=h=u=f=void 0},N.flush=function(){return void 0===f?d:E(o())},N}},230(e){e.exports=function(e){var t=typeof e;return null!=e&&("object"==t||"function"==t)}},470(e){e.exports=function(e){return null!=e&&"object"==typeof e}},89(e,t,n){var r=n(561),o=n(470);e.exports=function(e){return"symbol"==typeof e||o(e)&&"[object Symbol]"==r(e)}},381(e,t,n){var r=n(736);e.exports=function(){return r.Date.now()}},569(e,t,n){var r=n(605),o=n(230),i=n(89),s=/^[-+]0x[0-9a-f]+$/i,a=/^0b[01]+$/i,c=/^0o[0-7]+$/i,u=parseInt;e.exports=function(e){if("number"==typeof e)return e;if(i(e))return NaN;if(o(e)){var t="function"==typeof e.valueOf?e.valueOf():e;e=o(t)?t+"":t}if("string"!=typeof e)return 0===e?e:+e;e=r(e);var n=a.test(e);return n||c.test(e)?u(e.slice(2),n?2:8):s.test(e)?NaN:+e}}},t={};function n(r){var o=t[r];if(void 0!==o)return o.exports;var i=t[r]={exports:{}};return e[r](i,i.exports,n),i.exports}n.n=e=>{var t=e&&e.__esModule?()=>e.default:()=>e;return n.d(t,{a:t}),t},n.d=(e,t)=>{for(var r in t)n.o(t,r)&&!n.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},n.g=function(){if("object"==typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(e){if("object"==typeof window)return window}}(),n.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),(()=>{"use strict";var e=n(702),t=n.n(e),r=class extends Error{code;constructor(e,t){super(t),this.name="PenpalError",this.code=e}},o=e=>({name:e.name,message:e.message,stack:e.stack,penpalCode:e instanceof r?e.code:void 0}),i=Symbol("Reply"),s=class{value;transferables;#e=i;constructor(e,t){this.value=e,this.transferables=t?.transferables}},a="penpal",c=e=>"object"==typeof e&&null!==e,u=e=>"function"==typeof e,l=e=>"SYN"===e.type,d=e=>"ACK1"===e.type,f=e=>"ACK2"===e.type,h=e=>"CALL"===e.type,p=e=>"REPLY"===e.type,g=(e,t=[])=>{const n=[];for(const r of Object.keys(e)){const o=e[r];u(o)?n.push([...t,r]):c(o)&&n.push(...g(o,[...t,r]))}return n},m=e=>e.join("."),v=(e,t,n)=>({namespace:a,channel:e,type:"REPLY",callId:t,isError:!0,...n instanceof Error?{value:o(n),isSerializedErrorInstance:!0}:{value:n}}),y=crypto.randomUUID?.bind(crypto)??(()=>new Array(4).fill(0).map(()=>Math.floor(Math.random()*Number.MAX_SAFE_INTEGER).toString(16)).join("-")),w=Symbol("CallOptions"),b=class{transferables;timeout;#e=w;constructor(e){this.transferables=e?.transferables,this.timeout=e?.timeout}},E=new Set(["apply","call","bind"]),N=(e,t,n=[])=>new Proxy(n.length?()=>{}:Object.create(null),{get(r,o){if("then"!==o)return n.length&&E.has(o)?Reflect.get(r,o):N(e,t,[...n,o])},apply:(t,r,o)=>e(n,o)}),C=e=>new r("CONNECTION_DESTROYED",`Method call ${m(e)}() failed due to destroyed connection`),S=class extends Error{constructor(e){super(`You\'ve hit a bug in Penpal. Please file an issue with the following information: ${e}`)}},x="deprecated-penpal",O=e=>e.join("."),P=e=>new S(`Unexpected message to translate: ${JSON.stringify(e)}`),T=({messenger:e,methods:t,timeout:n,channel:o,log:i})=>{const w=y();let E;const S=[];let O=!1;const P=g(t),{promise:T,resolve:M,reject:I}=(()=>{let e,t;return{promise:new Promise((n,r)=>{e=n,t=r}),resolve:e,reject:t}})(),A=void 0!==n?setTimeout(()=>{I(new r("CONNECTION_TIMEOUT",`Connection timed out after ${n}ms`))},n):void 0,R=()=>{for(const e of S)e()},L=()=>{if(O)return;S.push(((e,t,n,o)=>{let i=!1;const l=async l=>{if(i)return;if(!h(l))return;o?.(`Received ${m(l.methodPath)}() call`,l);const{methodPath:d,args:f,id:p}=l;let g,y;try{const e=((e,t)=>{const n=e.reduce((e,t)=>c(e)?e[t]:void 0,t);return u(n)?n:void 0})(d,t);if(!e)throw new r("METHOD_NOT_FOUND",`Method \\`${m(d)}\\` is not found.`);let o=await e(...f);o instanceof s&&(y=o.transferables,o=await o.value),g={namespace:a,channel:n,type:"REPLY",callId:p,value:o}}catch(e){g=v(n,p,e)}if(!i)try{o?.(`Sending ${m(d)}() reply`,g),e.sendMessage(g,y)}catch(t){throw"DataCloneError"===t.name&&(g=v(n,p,t),o?.(`Sending ${m(d)}() reply`,g),e.sendMessage(g)),t}};return e.addMessageHandler(l),()=>{i=!0,e.removeMessageHandler(l)}})(e,t,o,i));const{remoteProxy:n,destroy:l}=((e,t,n)=>{let o=!1;const i=new Map,s=e=>{if(!p(e))return;const{callId:t,value:o,isError:s,isSerializedErrorInstance:a}=e,c=i.get(t);c&&(i.delete(t),n?.(`Received ${m(c.methodPath)}() call`,e),s?c.reject(a?(({name:e,message:t,stack:n,penpalCode:o})=>{const i=o?new r(o,t):new Error(t);return i.name=e,i.stack=n,i})(o):o):c.resolve(o))};return e.addMessageHandler(s),{remoteProxy:N((s,c)=>{if(o)throw C(s);const u=y(),l=c[c.length-1],d=l instanceof b,{timeout:f,transferables:h}=d?l:{},p=d?c.slice(0,-1):c;return new Promise((o,c)=>{const l=void 0!==f?window.setTimeout(()=>{i.delete(u),c(new r("METHOD_CALL_TIMEOUT",`Method call ${m(s)}() timed out after ${f}ms`))},f):void 0;i.set(u,{methodPath:s,resolve:o,reject:c,timeoutId:l});try{const r={namespace:a,channel:t,type:"CALL",id:u,methodPath:s,args:p};n?.(`Sending ${m(s)}() call`,r),e.sendMessage(r,h)}catch(e){c(new r("TRANSMISSION_FAILED",e.message))}})},n),destroy:()=>{o=!0,e.removeMessageHandler(s);for(const{methodPath:e,reject:t,timeoutId:n}of i.values())clearTimeout(n),t(C(e));i.clear()}}})(e,o,i);S.push(l),clearTimeout(A),O=!0,M({remoteProxy:n,destroy:R})},D=()=>{const t={namespace:a,type:"SYN",channel:o,participantId:w};i?.("Sending handshake SYN",t);try{e.sendMessage(t)}catch(e){I(new r("TRANSMISSION_FAILED",e.message))}},F=t=>{l(t)&&(t=>{if(i?.("Received handshake SYN",t),t.participantId===E&&E!==x)return;if(E=t.participantId,D(),!(w>E||E===x))return;const n={namespace:a,channel:o,type:"ACK1",methodPaths:P};i?.("Sending handshake ACK1",n);try{e.sendMessage(n)}catch(e){return void I(new r("TRANSMISSION_FAILED",e.message))}})(t),d(t)&&(t=>{i?.("Received handshake ACK1",t);const n={namespace:a,channel:o,type:"ACK2"};i?.("Sending handshake ACK2",n);try{e.sendMessage(n)}catch(e){return void I(new r("TRANSMISSION_FAILED",e.message))}L()})(t),f(t)&&(e=>{i?.("Received handshake ACK2",e),L()})(t)};return e.addMessageHandler(F),S.push(()=>e.removeMessageHandler(F)),D(),T},M=new WeakSet,I=class{#t;#n;#r;#o;#i;#s=new Set;#a;#c=!1;constructor({remoteWindow:e,allowedOrigins:t}){if(!e)throw new r("INVALID_ARGUMENT","remoteWindow must be defined");this.#t=e,this.#n=t?.length?t:[window.origin]}initialize=({log:e,validateReceivedMessage:t})=>{this.#r=e,this.#o=t,window.addEventListener("message",this.#u)};sendMessage=(e,t)=>{if(l(e)){const n=this.#l(e);return void this.#t.postMessage(e,{targetOrigin:n,transfer:t})}if(d(e)||this.#c){const n=this.#c?(e=>{if(d(e))return{penpal:"synAck",methodNames:e.methodPaths.map(O)};if(h(e))return{penpal:"call",id:e.id,methodName:O(e.methodPath),args:e.args};if(p(e))return e.isError?{penpal:"reply",id:e.callId,resolution:"rejected",...e.isSerializedErrorInstance?{returnValue:e.value,returnValueIsError:!0}:{returnValue:e.value}}:{penpal:"reply",id:e.callId,resolution:"fulfilled",returnValue:e.value};throw P(e)})(e):e,r=this.#l(e);return void this.#t.postMessage(n,{targetOrigin:r,transfer:t})}if(f(e)){const{port1:n,port2:r}=new MessageChannel;this.#a=n,n.addEventListener("message",this.#d),n.start();const o=[r,...t||[]],i=this.#l(e);return void this.#t.postMessage(e,{targetOrigin:i,transfer:o})}if(!this.#a)throw new S("Port is undefined");this.#a.postMessage(e,{transfer:t})};addMessageHandler=e=>{this.#s.add(e)};removeMessageHandler=e=>{this.#s.delete(e)};destroy=()=>{window.removeEventListener("message",this.#u),this.#f(),this.#s.clear()};#h=e=>this.#n.some(t=>t instanceof RegExp?t.test(e):t===e||"*"===t);#l=e=>{if(l(e))return"*";if(!this.#i)throw new S("Concrete remote origin not set");return"null"===this.#i&&this.#n.includes("*")?"*":this.#i};#f=()=>{this.#a?.removeEventListener("message",this.#d),this.#a?.close(),this.#a=void 0};#u=({source:e,origin:t,ports:n,data:r})=>{if(e===this.#t&&((e=>c(e)&&"penpal"in e)(r)&&(this.#r?.("Please upgrade the child window to the latest version of Penpal."),this.#c=!0,r=(e=>{if("syn"===e.penpal)return{namespace:a,channel:void 0,type:"SYN",participantId:x};if("ack"===e.penpal)return{namespace:a,channel:void 0,type:"ACK2"};if("call"===e.penpal)return{namespace:a,channel:void 0,type:"CALL",id:e.id,methodPath:(t=e.methodName,t.split(".")),args:e.args};var t;if("reply"===e.penpal)return"fulfilled"===e.resolution?{namespace:a,channel:void 0,type:"REPLY",callId:e.id,value:e.returnValue}:{namespace:a,channel:void 0,type:"REPLY",callId:e.id,isError:!0,...e.returnValueIsError?{value:e.returnValue,isSerializedErrorInstance:!0}:{value:e.returnValue}};throw P(e)})(r)),this.#o?.(r)))if(this.#h(t)){if(l(r)&&(this.#f(),this.#i=t),f(r)&&!this.#c){if(this.#a=n[0],!this.#a)throw new S("No port received on ACK2");this.#a.addEventListener("message",this.#d),this.#a.start()}for(const e of this.#s)e(r)}else this.#r?.(`Received a message from origin \\`${t}\\` which did not match allowed origins \\`[${this.#n.join(", ")}]\\``)};#d=({data:e})=>{if(this.#o?.(e))for(const t of this.#s)t(e)}},A=document,R=window,L=Array.prototype,D=L.filter,F=L.indexOf,j=L.map,$=L.push,_=L.reverse,k=L.slice,W=L.splice,z=/^#[\\w-]*$/,U=/^\\.[\\w-]*$/,V=/<.+>/,H=/^\\w+$/;function B(e,t){return void 0===t&&(t=A),U.test(e)?t.getElementsByClassName(e.slice(1)):H.test(e)?t.getElementsByTagName(e):t.querySelectorAll(e)}function Y(e,t){if(void 0===t&&(t=A),e){if(e.__cash)return e;var n=e;if(ne(e)){if(t.__cash&&(t=t[0]),!(n=z.test(e)?t.getElementById(e.slice(1)):V.test(e)?ke(e):B(e,t)))return}else if(te(e))return this.ready(e);(n.nodeType||n===R)&&(n=[n]),this.length=n.length;for(var r=0,o=this.length;r<o;r++)this[r]=n[r]}}function K(e,t){return new Y(e,t)}var q=K.fn=K.prototype=Y.prototype={constructor:K,__cash:!0,length:0,splice:W};q.get=function(e){return void 0===e?k.call(this):this[e<0?e+this.length:e]},q.eq=function(e){return K(this.get(e))},q.first=function(){return this.eq(0)},q.last=function(){return this.eq(-1)},q.map=function(e){return K(j.call(this,function(t,n){return e.call(t,n,t)}))},q.slice=function(){return K(k.apply(this,arguments))};var G=/(?:^\\w|[A-Z]|\\b\\w)/g,X=/[\\s-_]+/g;function J(e){return e.replace(G,function(e,t){return e[t?"toUpperCase":"toLowerCase"]()}).replace(X,"")}function Z(e,t){for(var n=0,r=e.length;n<r&&!1!==t.call(e[n],e[n],n,e);n++);}K.camelCase=J,K.each=Z,q.each=function(e){return Z(this,function(t,n){return e.call(t,n,t)}),this},q.removeProp=function(e){return this.each(function(t,n){delete n[e]})},K.extend=q.extend=function(e){void 0===e&&(e=this);for(var t=arguments,n=t.length,r=n<2?0:1;r<n;r++)for(var o in t[r])e[o]=t[r][o];return e};var Q=1;function ee(e,t){var n=e&&(e.matches||e.webkitMatchesSelector||e.mozMatchesSelector||e.msMatchesSelector||e.oMatchesSelector);return!!n&&n.call(e,t)}function te(e){return"function"==typeof e}function ne(e){return"string"==typeof e}function re(e){return!isNaN(parseFloat(e))&&isFinite(e)}K.guid=Q,K.matches=ee,K.isFunction=te,K.isString=ne,K.isNumeric=re;var oe=Array.isArray;function ie(e){return ne(e)?function(t,n){return ee(n,e)}:e.__cash?function(t,n){return e.is(n)}:function(e,t,n){return t===n}}K.isArray=oe,q.prop=function(e,t){if(e){if(ne(e))return arguments.length<2?this[0]&&this[0][e]:this.each(function(n,r){r[e]=t});for(var n in e)this.prop(n,e[n]);return this}},q.filter=function(e){if(!e)return K();var t=te(e)?e:ie(e);return K(D.call(this,function(n,r){return t.call(n,r,n,e)}))};var se=/\\S+/g;function ae(e){return ne(e)&&e.match(se)||[]}function ce(e){return e.filter(function(e,t,n){return n.indexOf(e)===t})}function ue(e,t,n){if(1===e.nodeType){var r=R.getComputedStyle(e,null);return t?n?r.getPropertyValue(t):r[t]:r}}function le(e,t){return parseInt(ue(e,t),10)||0}q.hasClass=function(e){var t=ae(e),n=!1;return t.length&&this.each(function(e,r){return!(n=r.classList.contains(t[0]))}),n},q.removeAttr=function(e){var t=ae(e);return t.length?this.each(function(e,n){Z(t,function(e){n.removeAttribute(e)})}):this},q.attr=function(e,t){if(e){if(ne(e)){if(arguments.length<2){if(!this[0])return;var n=this[0].getAttribute(e);return null===n?void 0:n}return null===t?this.removeAttr(e):this.each(function(n,r){r.setAttribute(e,t)})}for(var r in e)this.attr(r,e[r]);return this}},q.toggleClass=function(e,t){var n=ae(e),r=void 0!==t;return n.length?this.each(function(e,o){Z(n,function(e){r?t?o.classList.add(e):o.classList.remove(e):o.classList.toggle(e)})}):this},q.addClass=function(e){return this.toggleClass(e,!0)},q.removeClass=function(e){return arguments.length?this.toggleClass(e,!1):this.attr("class","")},K.unique=ce,q.add=function(e,t){return K(ce(this.get().concat(K(e,t).get())))};var de=/^--/;function fe(e){return de.test(e)}var he={},pe=A.createElement("div").style,ge=["webkit","moz","ms","o"];function me(e,t){if(void 0===t&&(t=fe(e)),t)return e;if(!he[e]){var n=J(e),r=""+n.charAt(0).toUpperCase()+n.slice(1);Z((n+" "+ge.join(r+" ")+r).split(" "),function(t){if(t in pe)return he[e]=t,!1})}return he[e]}K.prefixedProp=me;var ve={animationIterationCount:!0,columnCount:!0,flexGrow:!0,flexShrink:!0,fontWeight:!0,lineHeight:!0,opacity:!0,order:!0,orphans:!0,widows:!0,zIndex:!0};function ye(e,t,n){return void 0===n&&(n=fe(e)),n||ve[e]||!re(t)?t:t+"px"}q.css=function(e,t){if(ne(e)){var n=fe(e);return e=me(e,n),arguments.length<2?this[0]&&ue(this[0],e,n):e?(t=ye(e,t,n),this.each(function(r,o){1===o.nodeType&&(n?o.style.setProperty(e,t):o.style[e]=t)})):this}for(var r in e)this.css(r,e[r]);return this};var we="__cashData",be=/^data-(.*)/;function Ee(e){return e[we]=e[we]||{}}function Ne(e,t){var n=Ee(e);if(t){if(!(t in n)){var r=e.dataset?e.dataset[t]||e.dataset[J(t)]:K(e).attr("data-"+t);if(void 0!==r){try{r=JSON.parse(r)}catch(e){}n[t]=r}}return n[t]}return n}function Ce(e,t){return le(e,"border"+(t?"Left":"Top")+"Width")+le(e,"padding"+(t?"Left":"Top"))+le(e,"padding"+(t?"Right":"Bottom"))+le(e,"border"+(t?"Right":"Bottom")+"Width")}function Se(e,t){for(var n=0,r=t.length;n<r;n++)if(e.indexOf(t[n])<0)return!1;return!0}function xe(e,t,n){Z(e[n],function(e){e[0];var r=e[1];t.removeEventListener(n,r)}),delete e[n]}K.hasData=function(e){return we in e},q.data=function(e,t){var n=this;if(!e){if(!this[0])return;return Z(this[0].attributes,function(e){var t=e.name.match(be);t&&n.data(t[1])}),Ne(this[0])}if(ne(e))return void 0===t?this[0]&&Ne(this[0],e):this.each(function(n,r){return function(e,t,n){Ee(e)[t]=n}(r,e,t)});for(var r in e)this.data(r,e[r]);return this},q.removeData=function(e){return this.each(function(t,n){return function(e,t){void 0===t?delete e[we]:delete Ee(e)[t]}(n,e)})},Z(["Width","Height"],function(e){q["inner"+e]=function(){if(this[0])return this[0]===R?R["inner"+e]:this[0]["client"+e]}}),Z(["width","height"],function(e,t){q[e]=function(n){return this[0]?arguments.length?(n=parseInt(n,10),this.each(function(r,o){if(1===o.nodeType){var i=ue(o,"boxSizing");o.style[e]=ye(e,n+("border-box"===i?Ce(o,!t):0))}})):this[0]===R?this[0][J("outer-"+e)]:this[0].getBoundingClientRect()[e]-Ce(this[0],!t):void 0===n?void 0:this}}),Z(["Width","Height"],function(e,t){q["outer"+e]=function(n){if(this[0])return this[0]===R?R["outer"+e]:this[0]["offset"+e]+(n?le(this[0],"margin"+(t?"Top":"Left"))+le(this[0],"margin"+(t?"Bottom":"Right")):0)}});var Oe="__cashEvents";function Pe(e){return e[Oe]=e[Oe]||{}}function Te(e){var t=e.split(".");return[t[0],t.slice(1).sort()]}function Me(e,t,n,r){var o=Pe(e);if(t){var i=o[t];if(!i)return;r&&(r.guid=r.guid||Q++),o[t]=i.filter(function(o){var i=o[0],s=o[1];if(r&&s.guid!==r.guid||!Se(i,n))return!0;e.removeEventListener(t,s)})}else if(n&&n.length)for(t in o)Me(e,t,n,r);else for(t in o)xe(o,e,t)}q.off=function(e,t){var n=this;return void 0===e?this.each(function(e,t){return Me(t)}):Z(ae(e),function(e){var r=Te(e),o=r[0],i=r[1];n.each(function(e,n){return Me(n,o,i,t)})}),this},q.on=function(e,t,n,r){var o=this;if(!ne(e)){for(var i in e)this.on(i,t,e[i]);return this}return te(t)&&(n=t,t=!1),Z(ae(e),function(e){var i=Te(e),s=i[0],a=i[1];o.each(function(e,o){var i=function e(i){if(!i.namespace||Se(a,i.namespace.split("."))){var c=o;if(t){for(var u=i.target;!ee(u,t);){if(u===o)return;if(!(u=u.parentNode))return}c=u}i.namespace=i.namespace||"";var l=n.call(c,i,i.data);r&&Me(o,s,a,e),!1===l&&(i.preventDefault(),i.stopPropagation())}};i.guid=n.guid=n.guid||Q++,function(e,t,n,r){r.guid=r.guid||Q++;var o=Pe(e);o[t]=o[t]||[],o[t].push([n,r]),e.addEventListener(t,r)}(o,s,a,i)})}),this},q.one=function(e,t,n){return this.on(e,t,n,!0)},q.ready=function(e){var t=function(){return e(K)};return"loading"!==A.readyState?setTimeout(t):A.addEventListener("DOMContentLoaded",t),this},q.trigger=function(e,t){var n=e;if(ne(e)){var r=Te(e),o=r[0],i=r[1];(n=A.createEvent("HTMLEvents")).initEvent(o,!0,!0),n.namespace=i.join(".")}return n.data=t,this.each(function(e,t){t.dispatchEvent(n)})};var Ie=/select-one/i,Ae=/select-multiple/i;function Re(e){var t=e.type;return Ie.test(t)?function(e){return e.selectedIndex<0?null:e.options[e.selectedIndex].value}(e):Ae.test(t)?function(e){var t=[];return Z(e.options,function(e){!e.selected||e.disabled||e.parentNode.disabled||t.push(e.value)}),t}(e):e.value}var Le=/%20/g,De=/file|reset|submit|button|image/i,Fe=/radio|checkbox/i;q.serialize=function(){var e="";return this.each(function(t,n){Z(n.elements||[n],function(t){if(!t.disabled&&t.name&&"FIELDSET"!==t.tagName&&!De.test(t.type)&&(!Fe.test(t.type)||t.checked)){var n=Re(t);void 0!==n&&Z(oe(n)?n:[n],function(n){e+=function(e,t){return"&"+encodeURIComponent(e)+"="+encodeURIComponent(t).replace(Le,"+")}(t.name,n)})}})}),e.substr(1)},q.val=function(e){return void 0===e?this[0]&&Re(this[0]):this.each(function(t,n){var r=Ae.test(n.type),o=null===e?r?[]:"":e;r&&oe(o)?Z(n.options,function(e){e.selected=o.indexOf(e.value)>=0}):n.value=o})},q.clone=function(){return this.map(function(e,t){return t.cloneNode(!0)})},q.detach=function(){return this.each(function(e,t){t.parentNode&&t.parentNode.removeChild(t)})};var je,$e=/^\\s*<(\\w+)[^>]*>/,_e=/^\\s*<(\\w+)\\s*\\/?>(?:<\\/\\1>)?\\s*$/;function ke(e){if(function(){if(!je){var e=A.createElement("table"),t=A.createElement("tr");je={"*":A.createElement("div"),tr:A.createElement("tbody"),td:t,th:t,thead:e,tbody:e,tfoot:e}}}(),!ne(e))return[];if(_e.test(e))return[A.createElement(RegExp.$1)];var t=$e.test(e)&&RegExp.$1,n=je[t]||je["*"];return n.innerHTML=e,K(n.childNodes).detach().get()}function We(e,t,n){if(void 0!==t){var r=ne(t);!r&&t.length?Z(t,function(t){return We(e,t,n)}):Z(e,r?function(e){e.insertAdjacentHTML(n?"afterbegin":"beforeend",t)}:function(e,r){return function(e,t,n){n?e.insertBefore(t,e.childNodes[0]):e.appendChild(t)}(e,r?t.cloneNode(!0):t,n)})}}K.parseHTML=ke,q.empty=function(){var e=this[0];if(e)for(;e.firstChild;)e.removeChild(e.firstChild);return this},q.append=function(){var e=this;return Z(arguments,function(t){We(e,t)}),this},q.appendTo=function(e){return We(K(e),this),this},q.html=function(e){if(void 0===e)return this[0]&&this[0].innerHTML;var t=e.nodeType?e[0].outerHTML:e;return this.each(function(e,n){n.innerHTML=t})},q.insertAfter=function(e){var t=this;return K(e).each(function(e,n){var r=n.parentNode;t.each(function(t,o){r.insertBefore(e?o.cloneNode(!0):o,n.nextSibling)})}),this},q.after=function(){var e=this;return Z(_.apply(arguments),function(t){_.apply(K(t).slice()).insertAfter(e)}),this},q.insertBefore=function(e){var t=this;return K(e).each(function(e,n){var r=n.parentNode;t.each(function(t,o){r.insertBefore(e?o.cloneNode(!0):o,n)})}),this},q.before=function(){var e=this;return Z(arguments,function(t){K(t).insertBefore(e)}),this},q.prepend=function(){var e=this;return Z(arguments,function(t){We(e,t,!0)}),this},q.prependTo=function(e){return We(K(e),_.apply(this.slice()),!0),this},q.remove=function(){return this.detach().off()},q.replaceWith=function(e){var t=this;return this.each(function(n,r){var o=r.parentNode;if(o){var i=n?K(e).clone():K(e);if(!i[0])return t.remove(),!1;o.replaceChild(i[0],r),K(i[0]).after(i.slice(1))}})},q.replaceAll=function(e){return K(e).replaceWith(this),this},q.text=function(e){return void 0===e?this[0]?this[0].textContent:"":this.each(function(t,n){n.textContent=e})};var ze=A.documentElement;q.offset=function(){var e=this[0];if(e){var t=e.getBoundingClientRect();return{top:t.top+R.pageYOffset-ze.clientTop,left:t.left+R.pageXOffset-ze.clientLeft}}},q.offsetParent=function(){return K(this[0]&&this[0].offsetParent)},q.position=function(){var e=this[0];if(e)return{left:e.offsetLeft,top:e.offsetTop}},q.children=function(e){var t=[];return this.each(function(e,n){$.apply(t,n.children)}),t=K(ce(t)),e?t.filter(function(t,n){return ee(n,e)}):t},q.contents=function(){var e=[];return this.each(function(t,n){$.apply(e,"IFRAME"===n.tagName?[n.contentDocument]:n.childNodes)}),K(e.length&&ce(e))},q.find=function(e){for(var t=[],n=0,r=this.length;n<r;n++){var o=B(e,this[n]);o.length&&$.apply(t,o)}return K(t.length&&ce(t))},q.has=function(e){var t=ne(e)?function(t,n){return!!B(e,n).length}:function(t,n){return n.contains(e)};return this.filter(t)},q.is=function(e){if(!e||!this[0])return!1;var t=ie(e),n=!1;return this.each(function(r,o){return!(n=t(r,o,e))}),n},q.next=function(){return K(this[0]&&this[0].nextElementSibling)},q.not=function(e){if(!e||!this[0])return this;var t=ie(e);return this.filter(function(n,r){return!t(n,r,e)})},q.parent=function(){var e=[];return this.each(function(t,n){n&&n.parentNode&&e.push(n.parentNode)}),K(ce(e))},q.index=function(e){var t=e?K(e)[0]:this[0],n=e?this:K(t).parent().children();return F.call(n,t)},q.closest=function(e){return e&&this[0]?this.is(e)?this.filter(e):this.parent().closest(e):K()},q.parents=function(e){var t,n=[];return this.each(function(r,o){for(t=o;t&&t.parentNode&&t!==A.body.parentNode;)t=t.parentNode,(!e||e&&ee(t,e))&&n.push(t)}),K(ce(n))},q.prev=function(){return K(this[0]&&this[0].previousElementSibling)},q.siblings=function(){var e=this[0];return this.parent().children().filter(function(t,n){return n!==e})};const Ue=K,Ve=new class{getFiberNode(e){try{const t=Object.keys(e).find(e=>e.startsWith("__reactFiber$")||e.startsWith("__reactInternalInstance$"));return t?e[t]:null}catch(e){return console.warn("[ReactFiberService] Error getting fiber node:",e),null}}getDebugOwner(e){const t=this.getFiberNode(e);return t?._debugOwner??null}getDebugSource(e){const t=this.getFiberNode(e);return t?._debugSource??null}getOwnerDebugSource(e){const t=this.getDebugOwner(e);return t?._debugSource??null}hasDirectSourceInfo(e){return!!e.getAttribute("data-nocode-id")||!!this.getDebugSource(e)}hasOwnerNocodeId(e){const t=this.getDebugOwner(e);if(!t?.memoizedProps)return!1;const n=t.memoizedProps["data-nocode-id"];return"string"==typeof n&&n.length>0}getOwnerNocodeId(e){const t=this.getDebugOwner(e);if(!t?.memoizedProps)return null;const n=t.memoizedProps["data-nocode-id"];return"string"==typeof n?n:null}isSelectableElement(e){if(this.hasDirectSourceInfo(e))return!0;const t=this.getFiberNode(e),n=this.getOwnerDebugSource(e);return!!(t?.return&&5!==t.return.tag&&this.hasOwnerNocodeId(e)&&n)}isComponent(e){if(!this.isSelectableElement(e))return!1;if(e.getAttribute("data-nocode-components-name"))return!0;if(this.getDebugSource(e))return!1;const t=this.getFiberNode(e);return!(!t?.return||5===t.return.tag)}getComponentName(e){const t=e.getAttribute("data-nocode-tag-name");if(t)return t;const n=this.getDebugOwner(e);if(n?.type){const e=n.type;if("function"==typeof e){const t=e.displayName||e.name||"Unknown";return this.normalizeComponentName(t)}if("string"==typeof e)return e}return e.tagName.toLowerCase()}normalizeComponentName(e){return e.replace(/\\d+$/,"")}getComponentProps(e){if(!this.isComponent(e))return;const t=this.getDebugOwner(e);return t?.memoizedProps?this.sanitizeProps(t.memoizedProps):void 0}sanitizeProps(e){const t={};for(const[n,r]of Object.entries(e)){if("children"===n||n.startsWith("_"))continue;const e=this.sanitizeValue(r);void 0!==e&&(t[n]=e)}return t}sanitizeValue(e){if(null===e)return null;if(void 0===e)return;if("function"==typeof e)return;if("symbol"==typeof e)return;if("object"!=typeof e)return e;if("$$typeof"in e)return;if(e instanceof Node)return;if(Array.isArray(e)){const t=[];for(const n of e){const e=this.sanitizeValue(n);void 0!==e&&t.push(e)}return t}const t={};for(const[n,r]of Object.entries(e)){if(n.startsWith("_"))continue;const e=this.sanitizeValue(r);void 0!==e&&(t[n]=e)}return t}buildComponentInfo(e,t){const n=this.isComponent(e),r={isComponent:n,componentType:n?"component":"host",name:n?this.getComponentName(e):e.tagName.toLowerCase()};if(n){const n={...t,...this.getComponentProps(e)??{}},{cleanProps:o,extractedProps:i}=this.extractSpecialProps(n);i.componentsName&&(r.componentsName=i.componentsName),i.componentsVersion&&(r.componentsVersion=i.componentsVersion),r.props=o}return r}extractSpecialProps(e){const t={},n={};for(const[r,o]of Object.entries(e))"componentsName"===r&&"string"==typeof o?n.componentsName=o:"componentsVersion"===r&&"string"==typeof o?n.componentsVersion=o:t[r]=o;return{cleanProps:t,extractedProps:n}}};function He(e){const t={},n=e.attributes;for(let e=0;e<n.length;e++){const r=n[e];r.name.startsWith("data-nocode-")&&(t[r.name.replace("data-nocode-","").replace(/-([a-z])/g,(e,t)=>t.toUpperCase())]=r.value)}return t}const Be="data-dnd",Ye=`[${Be}]`;function Ke(e){return document.querySelector(`[${Be}="${e}"]`)}const qe=(e,t)=>{const n=e.getBoundingClientRect(),{x:r,y:o}=((e,t)=>{let n=e.x,r=e.y;if(t){const e=t.getBoundingClientRect();n-=e.left,r-=e.top}return{x:n,y:r}})({x:n.left,y:n.top},t);return{width:e.offsetWidth,height:e.offsetHeight,top:o,left:r}},Ge=(e,t)=>{const n=qe(e,t),r=function(e){return e.dataset}(e),o=Xe(e),i=Je(e),s=(e=>{const t=window.getComputedStyle(e);return{display:t.display,flexDirection:t.flexDirection,flexWrap:t.flexWrap,position:t.position}})(e),a=r.dnd||"",c=function(e){if(!e)return{};const t=e.split(":");if(t.length>=3){const n=t.pop(),r=t.pop(),o=t.join(":");return{id:e,filename:decodeURIComponent(o),component:r,codeId:n}}return 2===t.length?{id:e,component:t[0],codeId:t[1]}:{id:e}}(a),u=He(e),l=function(e){const t=He(e);return Ve.buildComponentInfo(e,t)}(e),d=(e=>{const t=e.querySelectorAll(`:scope > ${Ye}`);if(!t.length)return[];const n=[];return t.forEach(e=>{const t=e;n.push(qe(t))}),n})(e);return{id:a,codeId:c.codeId,name:c.component||e.tagName.toLowerCase(),filename:c.filename,bounding:n,display:o,computedStyle:s,text:i,nocodeData:u,componentInfo:l,childrenBoundings:d.length>0?d:void 0}},Xe=e=>Ue(e).css("display"),Je=e=>{const t=[];return e.childNodes.forEach(e=>{if(e.nodeType===Node.TEXT_NODE){const n=e.textContent?.trim()||"";n&&t.push(n)}}),t.join(" ")};function Ze(e){const t=["div","p","section","article","main","header","footer","nav","h1","h2","h3","h4","h5","h6","span","a","button","i","input","textarea","select","label","form","ul","ol","li","table","thead","tbody","tr","td","th","img","video","audio","canvas","svg"];try{const n=e.tagName.toLowerCase();if(!t.includes(n))return!1;const r=window.getComputedStyle(e);if("none"===r.display||"hidden"===r.visibility||"0"===r.opacity)return!1;const o=e.getBoundingClientRect();return!("inline"!==r.display&&"inline-block"!==r.display&&(0===o.width||0===o.height))}catch(e){return console.warn("Element validation failed:",e),!1}}function Qe(e,t=20){let n=e,r=0;for(;n&&r<t;){if(n.getAttribute(Be))return n;n=n.parentElement,r++}return null}function et(e){const t=window.getComputedStyle(e),n={};for(let e=0;e<t.length;e++){const r=t[e];n[r]=t.getPropertyValue(r)}return n}function tt(e){return(...t)=>{try{const n=e(...t);return n&&"function"==typeof n.then?n.catch(n=>(console.error(`Async error in ${e.name}:`,n),console.error("Error stack:",n.stack),console.error("Function arguments:",t),null)):n}catch(n){return console.error(`Sync error in ${e.name}:`,n),n instanceof Error&&console.error("Error stack:",n.stack),console.error("Function arguments:",t),null}}}const nt={getDraggableParentsData:(e,t)=>{const n=function(e,t){const n=((e,t)=>{const n=document.elementFromPoint(e,t);if(!n)return null;const r=n=>{if(n?.shadowRoot){const o=n.shadowRoot.elementFromPoint(e,t);return o===n?n:o?.shadowRoot?r(o):o||n}return n};return r(n)})(e,t);if(!n)return null;let r=n;if(!Ze(r)){let e=r.parentElement,t=0;const n=20;for(;e&&t<n;){if(Ze(e)){r=e;break}e=e.parentElement,t++}if(!Ze(r))return null}const o=Qe(r);return o&&Ze(o)?o:null}(e.x,e.y);if(!n)return;const r=(e=>{const t=Ue(e).closest(Ye).get(0),n=Ue(e).parents(Ye).get();return n[0]!==t&&n.unshift(t),n})(n);if(r.length){if(t){const e=r.map(e=>Ge(e));return{...e[0],computedStyle:et(n),parents:e.slice(1)}}return{...Ge(r[0]),computedStyle:et(r[0])}}},getElementDataById:e=>{const t=Ke(e);if(t)return{...Ge(t),computedStyle:et(t)};console.warn("[getElementDataById] Element not found for domId:",e)},getEditableTextElementAtPosition:e=>{const t=function(e,t){if(document.caretPositionFromPoint){const n=document.caretPositionFromPoint(e,t);return n?.offsetNode??null}if(document.caretRangeFromPoint){const n=document.caretRangeFromPoint(e,t);return n?.startContainer??null}return document.elementFromPoint(e,t)}(e.x,e.y);if(!t)return void console.log("[getEditableTextElementAtPosition] No node at point:",e);if(t.nodeType!==Node.TEXT_NODE)return void console.log("[getEditableTextElementAtPosition] Not a text node:",t.nodeType);const n=t.textContent?.trim();if(!n)return void console.log("[getEditableTextElementAtPosition] Empty text node");const r=t.parentElement;if(!r)return void console.log("[getEditableTextElementAtPosition] No parent element");const o=Qe(r);if(o){if(function(e){const t=e.childNodes;let n=!1;for(let e=0;e<t.length;e++){const r=t[e];if(r.nodeType===Node.ELEMENT_NODE)return!1;if(r.nodeType===Node.TEXT_NODE){const e=r.textContent?.trim();e&&(n=!0)}}return n}(o))return console.log("[getEditableTextElementAtPosition] Found editable text element:",o.tagName,o.textContent),{...Ge(o),computedStyle:et(o)};console.log("[getEditableTextElementAtPosition] Element has child elements, cannot edit directly:",o.tagName)}else console.log("[getEditableTextElementAtPosition] No marked element found")},updateElementTextContent:(e,t)=>{const n=Ke(e);return n?(n.textContent=t,!0):(console.warn("[updateElementTextContent] Element not found:",e),!1)},scrollToElement:e=>{const t=Ke(e);return t?(t.scrollIntoView({behavior:"instant",block:"center",inline:"center"}),!0):(console.warn("[scrollToElement] Element not found for domId:",e),!1)}},rt=Object.fromEntries(Object.entries(nt).map(([e,t])=>[e,tt(t)])),ot="nocode-design-mode";let it=null,st=!1,at=null;const ct=t()(()=>{it?.onWindowMutated&&(console.log(`${ot} - Notifying parent of DOM mutation`),it.onWindowMutated({added:{},removed:{}}))},100),ut=async()=>{if(st||it)return it;st=!0,console.log(`${ot} - Creating penpal connection`);const e=(({messenger:e,methods:t={},timeout:n,channel:o,log:i})=>{if(!e)throw new r("INVALID_ARGUMENT","messenger must be defined");if(M.has(e))throw new r("INVALID_ARGUMENT","A messenger can only be used for a single connection");M.add(e);const s=[e.destroy],u=(e=>{let t,n=!1;return(...r)=>(n||(n=!0,t=e(...r)),t)})(t=>{if(t){const t={namespace:a,channel:o,type:"DESTROY"};try{e.sendMessage(t)}catch(e){}}for(const e of s)e();i?.("Connection destroyed")}),l=e=>(e=>c(e)&&e.namespace===a)(e)&&e.channel===o;return{promise:(async()=>{try{e.initialize({log:i,validateReceivedMessage:l}),e.addMessageHandler(e=>{(e=>"DESTROY"===e.type)(e)&&u(!1)});const{remoteProxy:r,destroy:a}=await T({messenger:e,methods:t,timeout:n,channel:o,log:i});return s.push(a),r}catch(e){throw u(!0),e}})(),destroy:()=>{u(!0)}}})({messenger:new I({remoteWindow:window===window.top?(console.warn(`${ot} - Not in an iframe, using window.parent as fallback`),window.parent):window.parent===window.top?window.parent:window.top?(console.log(`${ot} - Using window.top for nested iframe scenario`),window.top):window.parent,allowedOrigins:["*"]}),methods:rt});return e.promise.then(e=>{if(!e)return console.error(`${ot} - Failed to setup penpal connection: child is null`),void lt();it=e,console.log(`${ot} - Penpal connection set`),(()=>{if(at)return;at=new MutationObserver(e=>{e.some(e=>{const t=e.target;return"SCRIPT"!==t.tagName&&"STYLE"!==t.tagName&&("attributes"!==e.type||"style"===e.attributeName||"class"===e.attributeName)})&&ct()});const e=()=>{document.body&&at&&(at.observe(document.body,{childList:!0,subtree:!0,attributes:!0,attributeFilter:["style","class"],characterData:!0}),console.log(`${ot} - MutationObserver started`))};"loading"===document.readyState?document.addEventListener("DOMContentLoaded",e):e()})()}).finally(()=>{st=!1}),e.promise.catch(e=>{console.error(`${ot} - Failed to setup penpal connection:`,e),lt()}),it},lt=t()(()=>{st||(console.log(`${ot} - Reconnecting to penpal parent`),it=null,ut())},1e3);ut()})()})();';
+}
+function createSandboxScriptMiddleware(options) {
+  var _a;
+  const verbose = (_a = options.verbose) != null ? _a : false;
+  const scriptContent = getSandboxScriptContent();
+  return (req, res, next) => {
+    if (req.url !== SANDBOX_SCRIPT_PATH) {
+      return next();
+    }
+    if (!scriptContent) {
+      if (verbose) {
+        console.warn("[DesignMode] sandbox-script.js not embedded. Build may be incomplete.");
+      }
+      res.statusCode = 404;
+      res.end("/* sandbox-script.js not available */");
+      return;
+    }
+    res.setHeader("Content-Type", "application/javascript");
+    res.setHeader("Cache-Control", "no-cache");
+    res.end(scriptContent);
+  };
+}
+function injectSandboxScript(html) {
+  const scriptTag = `<script src="${SANDBOX_SCRIPT_PATH}"></script>`;
+  if (html.includes(SANDBOX_SCRIPT_PATH)) {
+    return html;
+  }
+  if (html.includes("</head>")) {
+    return html.replace("</head>", `    ${scriptTag}
+  </head>`);
+  }
+  if (html.includes("<body>")) {
+    return html.replace("<body>", `<body>
+    ${scriptTag}`);
+  }
+  return html + `
+${scriptTag}`;
+}
+
+// src/visual-edit/override-code.ts
+var overrideMap = /* @__PURE__ */ new Map();
+function loadOverrideCode(id) {
+  const [filePath] = id.split("?", 2);
+  return overrideMap.get(filePath);
+}
+function clearAllOverridesAndInvalidate(server) {
+  if (overrideMap.size === 0) return;
+  for (const filePath of overrideMap.keys()) {
+    const mods = safeGetModulesByFile(server, filePath);
+    if (mods && mods.size > 0) {
+      for (const mod of mods) {
+        safeInvalidateModule(server, mod);
+      }
+    }
+  }
+  overrideMap.clear();
+}
+var OVERRIDE_API_PATH = "/__nocode_file_override";
+function createOverrideMiddleware(server) {
+  return async (req, res, next) => {
+    var _a;
+    if (!((_a = req.url) == null ? void 0 : _a.startsWith(OVERRIDE_API_PATH))) {
+      return next();
+    }
+    if (req.method !== "POST") {
+      return next();
+    }
+    try {
+      const { file, code } = await readJsonBody(req);
+      if (!file || typeof code !== "string") {
+        res.statusCode = 400;
+        res.end(JSON.stringify({ error: "file and code are required" }));
+        return;
+      }
+      const absolutePath = resolveFileToAbsPath(file, server.config.root);
+      if (!absolutePath) {
+        console.warn("[nocode-compiler] file not found:", file, server.config.root);
+        res.statusCode = 404;
+        res.end(JSON.stringify({ error: "file not found" }));
+        return;
+      }
+      overrideMap.set(absolutePath, code);
+      const mods = safeGetModulesByFile(server, absolutePath);
+      if (mods && mods.size > 0) {
+        for (const mod of mods) {
+          safeInvalidateModule(server, mod);
+          safeSendHmrUpdate(server, {
+            type: "update",
+            updates: [
+              {
+                type: "js-update",
+                path: mod.url,
+                acceptedPath: mod.url,
+                timestamp: Date.now()
+              }
+            ]
+          });
+        }
+      }
+      res.statusCode = 200;
+      res.end(JSON.stringify({ success: true }));
+    } catch (error) {
+      res.statusCode = 500;
+      res.end(JSON.stringify({ error: String(error) }));
+    }
+  };
+}
+
+// src/index.ts
 var PLUGIN_NAME = "vite-plugin-nocode-compiler";
 function ensurePluginFirst(config, onError) {
   try {
@@ -124,6 +392,10 @@ function componentCompiler(options = {}) {
     enableLogging: false,
     ...options
   };
+  const designModeOptions = {
+    ...DEFAULT_DESIGN_MODE_OPTIONS,
+    ...options.designModeOptions
+  };
   const monitorService = new MonitorService({
     pluginName: "vite-plugin-nocode-compiler",
     framework: "vite",
@@ -132,8 +404,10 @@ function componentCompiler(options = {}) {
   monitorService.reportMetrics(MetricType.PLUGIN_USE, 1);
   const vueCompiler = new VueCompiler(options);
   const jsxCompiler = new JSXCompiler(options);
+  const designModeCompiler = new DesignModeCompiler(options);
   let server;
   let pkgRegistry;
+  let projectRoot = "";
   return {
     name: PLUGIN_NAME,
     enforce: "pre",
@@ -141,81 +415,59 @@ function componentCompiler(options = {}) {
      * 配置解析完成后：
      * 1. 将本插件移到插件列表最前面，确保在所有 enforce: 'pre' 插件中第一个执行
      * 2. 初始化 PackageVersionRegistry
+     * 并预扫描项目 dependencies，填充版本缓存
      */
     configResolved(config) {
       ensurePluginFirst(config, (error) => monitorService.reportError(error, { scene: "ensurePluginFirst" }));
       pkgRegistry = new PackageVersionRegistry(config.root);
+      projectRoot = config.root;
+      preloadDependencyVersions(pkgRegistry);
     },
     /**
-     * 配置开发服务器，添加 Override 中间件
-     * 兼容 Vite 2.x - 5.x
+     * 配置开发服务器，添加 Override 中间件和设计模式中间件
+     * 兼容 Vite 2.x - 6.x
      */
     configureServer(_server) {
       server = _server;
       safeOnConnection(server, () => {
-        if (overrideMap.size === 0) return;
-        for (const filePath of overrideMap.keys()) {
-          const mods = safeGetModulesByFile(server, filePath);
-          if (mods && mods.size > 0) {
-            for (const mod of mods) {
-              safeInvalidateModule(server, mod);
-            }
-          }
-        }
-        overrideMap.clear();
-      });
-      server.middlewares.use("/__nocode_file_override", async (req, res, next) => {
-        if (req.method !== "POST") {
-          return next();
-        }
-        try {
-          const { file, code } = await readJsonBody(req);
-          if (!file || typeof code !== "string") {
-            res.statusCode = 400;
-            res.end(JSON.stringify({ error: "file and code are required" }));
-            return;
-          }
-          const absolutePath = resolveFileToAbsPath(file, server.config.root);
-          if (!absolutePath) {
-            console.warn("[nocode-compiler] file not found:", file, server.config.root);
-            res.statusCode = 404;
-            res.end(JSON.stringify({ error: "file not found" }));
-            return;
+        clearAllOverridesAndInvalidate(server);
+        if (virtualCodeMap.size > 0) {
+          if (designModeOptions.verbose) {
+            console.log(`[DesignMode] Client reconnected, clearing ${virtualCodeMap.size} virtual code entries`);
           }
-          overrideMap.set(absolutePath, code);
-          const mods = safeGetModulesByFile(server, absolutePath);
-          if (mods && mods.size > 0) {
-            for (const mod of mods) {
-              safeInvalidateModule(server, mod);
-              safeSendHmrUpdate(server, {
-                type: "update",
-                updates: [
-                  {
-                    type: "js-update",
-                    path: mod.url,
-                    acceptedPath: mod.url,
-                    timestamp: Date.now()
-                  }
-                ]
-              });
-            }
-          }
-          res.statusCode = 200;
-          res.end(JSON.stringify({ success: true }));
-        } catch (error) {
-          res.statusCode = 500;
-          res.end(JSON.stringify({ error: String(error) }));
+          virtualCodeMap.clear();
         }
       });
+      server.middlewares.use(createOverrideMiddleware(server));
+      server.middlewares.use(createSandboxScriptMiddleware(designModeOptions));
+      if (designModeOptions.enableVirtualCode) {
+        server.middlewares.use(createVirtualCodeMiddleware(server, designModeOptions, projectRoot));
+        console.log(`[DesignMode] Virtual code API enabled at ${designModeOptions.virtualCodeApiPath}`);
+      }
+    },
+    /**
+     * 转换 index.html：
+     * 1. 在 <body> 标签上注入组件库版本信息和编译插件版本
+     * 2. 注入 sandbox script（设计模式功能）
+     * 兼容 Vite 2.x - 6.x（transformIndexHtml 从 Vite 2 起就支持简单函数形式）
+     */
+    transformIndexHtml(html) {
+      const metadata = generateBodyMetadata(pkgRegistry, version);
+      html = injectBodyMetadata(html, metadata);
+      html = injectSandboxScript(html);
+      return html;
     },
     /**
-     * 加载模块时，如果有 override 则返回 override 内容
+     * 加载模块时，检查 override 和虚拟代码
      */
     load(id) {
       if (id.includes("node_modules")) return;
-      const [filePath] = id.split("?", 2);
-      if (overrideMap.has(filePath)) {
-        return overrideMap.get(filePath);
+      const overrideCode = loadOverrideCode(id);
+      if (overrideCode) {
+        return overrideCode;
+      }
+      if (designModeOptions.enableVirtualCode) {
+        return loadVirtualCode(id, designModeOptions);
       }
       return void 0;
     },
@@ -224,6 +476,12 @@ function componentCompiler(options = {}) {
         return code;
       }
       const [filePath, query] = id.split("?", 2);
+      if (!shouldSkipDesignModeTransform(id, designModeOptions)) {
+        const result = designModeCompiler.compile(code, filePath);
+        if (result) {
+          code = result.code;
+        }
+      }
       const { useJSXCompiler, useVueCompiler } = detectCompileScenario({
         filePath,
         query

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@meituan-nocode/vite-plugin-nocode-compiler",
-  "version": "0.3.0",
+  "version": "0.3.1-beta.1",
   "description": "Vite plugin for nocode compiler",
   "type": "module",
   "exports": {
@@ -16,14 +16,15 @@
   "files": [
     "dist"
   ],
+  "dependencies": {
+    "@nocode/design-mode-sandbox-script": "0.1.0-beta.3",
+    "@meituan-nocode/nocode-compiler-core": "0.2.9-beta.1"
+  },
   "devDependencies": {
-    "@types/node": "^20.0.0",
+    "@types/node": "^20.19.31",
+    "tsup": "8.5.0",
     "typescript": "^5.0.0",
-    "vite": "^4.5.14",
-    "tsup": "8.5.0"
-  },
-  "dependencies": {
-    "@meituan-nocode/nocode-compiler-core": "0.2.8"
+    "vite": "^4.5.14"
   },
   "scripts": {
     "dev": "tsup --watch",