@base44-preview/vite-plugin 0.1.0-dev.e65cc11 → 0.1.0-dev.ec354c8

package/dist/ErrorOverlay.d.ts

@@ -0,0 +1,12 @@
+declare const HTMLElement: {
+    new (): {};
+};
+export declare class ErrorOverlay extends HTMLElement {
+    static getOverlayHTML(): string;
+    close(): void;
+    static sendErrorToParent(error: Error, title: string, details: string | undefined, componentName: string | undefined): void;
+    constructor(error: Error);
+}
+export declare const errorOverlayCode: string;
+export {};
+//# sourceMappingURL=ErrorOverlay.d.ts.map

package/dist/ErrorOverlay.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ErrorOverlay.d.ts","sourceRoot":"","sources":["../src/ErrorOverlay.ts"],"names":[],"mappings":"AAGA,QAAA,MAAQ,WAAW;;CAA0B,CAAC;AAE9C,qBAAa,YAAa,SAAQ,WAAW;IAC3C,MAAM,CAAC,cAAc;IAMrB,KAAK;IAIL,MAAM,CAAC,iBAAiB,CACtB,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,MAAM,EACb,OAAO,EAAE,MAAM,GAAG,SAAS,EAC3B,aAAa,EAAE,MAAM,GAAG,SAAS;gBAqBvB,KAAK,EAAE,KAAK;CAuBzB;AAGD,eAAO,MAAM,gBAAgB,QAG5B,CAAC"}

package/dist/ErrorOverlay.js

@@ -0,0 +1,51 @@
+/// <reference lib="dom" />
+// Make HTMLElement available in non-browser environments
+const { HTMLElement = class {
+} } = globalThis;
+export class ErrorOverlay extends HTMLElement {
+    static getOverlayHTML() {
+        return `
+      <div>
+			</div>
+    `;
+    }
+    close() {
+        this.parentNode?.removeChild(this);
+    }
+    static sendErrorToParent(error, title, details, componentName) {
+        // Send error to parent using framewire
+        if (globalThis.window?.parent) {
+            try {
+                globalThis.window.parent?.postMessage({
+                    type: "app_error",
+                    error: { title, details, componentName, originalError: error },
+                }, "*");
+            }
+            catch (error) {
+                console.warn("Failed to send error to iframe parent:", error?.message);
+            }
+        }
+    }
+    constructor(error) {
+        super();
+        const stack = error?.stack;
+        let componentName = stack?.match(/at\s+(\w+)\s+\(eval/)?.[1];
+        if (componentName === "eval") {
+            componentName = undefined;
+        }
+        const title = componentName
+            ? `in ${componentName}: ${error.message?.toString()}`
+            : error.message?.toString();
+        const details = error?.stack;
+        // Call editor frame with the error (via post message)
+        ErrorOverlay.sendErrorToParent(error, title, details, componentName);
+        // Create the overlay element using HTML template
+        const overlay = document.createElement("div");
+        overlay.innerHTML = ErrorOverlay.getOverlayHTML();
+        // Add to DOM
+        document.body.appendChild(overlay);
+    }
+}
+// vite/react-plugin transpiles classes with _SomeClass, so we need to replace all _ErrorOverlay with ErrorOverlay
+export const errorOverlayCode = ErrorOverlay.toString().replaceAll("_ErrorOverlay", "ErrorOverlay");
+//# sourceMappingURL=ErrorOverlay.js.map

package/dist/ErrorOverlay.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ErrorOverlay.js","sourceRoot":"","sources":["../src/ErrorOverlay.ts"],"names":[],"mappings":"AAAA,2BAA2B;AAE3B,yDAAyD;AACzD,MAAM,EAAE,WAAW,GAAG;CAAQ,EAAE,GAAG,UAAU,CAAC;AAE9C,MAAM,OAAO,YAAa,SAAQ,WAAW;IAC3C,MAAM,CAAC,cAAc;QACnB,OAAO;;;KAGN,CAAC;IACJ,CAAC;IACD,KAAK;QACF,IAAY,CAAC,UAAU,EAAE,WAAW,CAAC,IAAI,CAAC,CAAC;IAC9C,CAAC;IAED,MAAM,CAAC,iBAAiB,CACtB,KAAY,EACZ,KAAa,EACb,OAA2B,EAC3B,aAAiC;QAEjC,uCAAuC;QACvC,IAAI,UAAU,CAAC,MAAM,EAAE,MAAM,EAAE,CAAC;YAC9B,IAAI,CAAC;gBACH,UAAU,CAAC,MAAM,CAAC,MAAM,EAAE,WAAW,CACnC;oBACE,IAAI,EAAE,WAAW;oBACjB,KAAK,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE,aAAa,EAAE,aAAa,EAAE,KAAK,EAAE;iBAC/D,EACD,GAAG,CACJ,CAAC;YACJ,CAAC;YAAC,OAAO,KAAK,EAAE,CAAC;gBACf,OAAO,CAAC,IAAI,CACV,wCAAwC,EACvC,KAAe,EAAE,OAAO,CAC1B,CAAC;YACJ,CAAC;QACH,CAAC;IACH,CAAC;IAED,YAAY,KAAY;QACtB,KAAK,EAAE,CAAC;QAER,MAAM,KAAK,GAAG,KAAK,EAAE,KAAK,CAAC;QAC3B,IAAI,aAAa,GAAG,KAAK,EAAE,KAAK,CAAC,qBAAqB,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC;QAC7D,IAAI,aAAa,KAAK,MAAM,EAAE,CAAC;YAC7B,aAAa,GAAG,SAAS,CAAC;QAC5B,CAAC;QACD,MAAM,KAAK,GAAG,aAAa;YACzB,CAAC,CAAC,MAAM,aAAa,KAAK,KAAK,CAAC,OAAO,EAAE,QAAQ,EAAE,EAAE;YACrD,CAAC,CAAC,KAAK,CAAC,OAAO,EAAE,QAAQ,EAAE,CAAC;QAC9B,MAAM,OAAO,GAAG,KAAK,EAAE,KAAK,CAAC;QAE7B,sDAAsD;QACtD,YAAY,CAAC,iBAAiB,CAAC,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,aAAa,CAAC,CAAC;QAErE,iDAAiD;QACjD,MAAM,OAAO,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QAC9C,OAAO,CAAC,SAAS,GAAG,YAAY,CAAC,cAAc,EAAE,CAAC;QAElD,aAAa;QACb,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC;IACrC,CAAC;CACF;AAED,kHAAkH;AAClH,MAAM,CAAC,MAAM,gBAAgB,GAAG,YAAY,CAAC,QAAQ,EAAE,CAAC,UAAU,CAChE,eAAe,EACf,cAAc,CACf,CAAC"}

package/dist/error-overlay-plugin.d.ts

@@ -0,0 +1,3 @@
+import type { Plugin } from "vite";
+export declare function errorOverlayPlugin(): Plugin;
+//# sourceMappingURL=error-overlay-plugin.d.ts.map

package/dist/error-overlay-plugin.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"error-overlay-plugin.d.ts","sourceRoot":"","sources":["../src/error-overlay-plugin.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,MAAM,CAAC;AAEnC,wBAAgB,kBAAkB,IAa3B,MAAM,CACZ"}

package/dist/error-overlay-plugin.js

@@ -0,0 +1,14 @@
+import { errorOverlayCode } from "./ErrorOverlay.js";
+export function errorOverlayPlugin() {
+    return {
+        name: "error-overlay",
+        transform(code, id, opts = {}) {
+            if (opts?.ssr)
+                return;
+            if (!id.includes("vite/dist/client/client.mjs"))
+                return;
+            return code.replace("class ErrorOverlay", errorOverlayCode + "\nclass OldErrorOverlay");
+        },
+    };
+}
+//# sourceMappingURL=error-overlay-plugin.js.map

package/dist/error-overlay-plugin.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"error-overlay-plugin.js","sourceRoot":"","sources":["../src/error-overlay-plugin.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAGrD,MAAM,UAAU,kBAAkB;IAChC,OAAO;QACL,IAAI,EAAE,eAAe;QACrB,SAAS,CAAC,IAAI,EAAE,EAAE,EAAE,IAAI,GAAG,EAAE;YAC3B,IAAI,IAAI,EAAE,GAAG;gBAAE,OAAO;YAEtB,IAAI,CAAC,EAAE,CAAC,QAAQ,CAAC,6BAA6B,CAAC;gBAAE,OAAO;YAExD,OAAO,IAAI,CAAC,OAAO,CACjB,oBAAoB,EACpB,gBAAgB,GAAG,yBAAyB,CAC7C,CAAC;QACJ,CAAC;KACQ,CAAC;AACd,CAAC"}

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAc,MAAM,MAAM,CAAC;AAG/C,MAAM,CAAC,OAAO,UAAU,UAAU,CAChC,IAAI,GAAE;IACJ,gBAAgB,CAAC,EAAE,OAAO,CAAC;CACvB,GA6HD,MAAM,CACZ"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,MAAM,EAAc,MAAM,MAAM,CAAC;AAK/C,MAAM,CAAC,OAAO,UAAU,UAAU,CAChC,IAAI,GAAE;IACJ,gBAAgB,CAAC,EAAE,OAAO,CAAC;CACvB,GAiID,MAAM,CACZ"}

package/dist/index.js

@@ -1,11 +1,14 @@
 import { loadEnv } from "vite";
+import { errorOverlayPlugin } from "./error-overlay-plugin.js";
+import { visualEditPlugin } from "./visual-edit-plugin.js";
 export default function vitePlugin(opts = {}) {
     const { legacySDKImports = false } = opts;
     return {
         name: "base44",
+        enforce: "pre",
         config: ({ mode }) => {
             const env = loadEnv(mode ?? "development", process.cwd(), "");
-            const isRunningInSandbox = process.env.BASE44_SANDBOX_MODE === "true";
+            const isRunningInSandbox = env.BASE44_SANDBOX_MODE === "true";
             return {
                 resolve: {
                     alias: {
@@ -26,6 +29,9 @@ export default function vitePlugin(opts = {}) {
                                     });
                                 },
                             },
+                            ...(mode === "development"
+                                ? [errorOverlayPlugin(), visualEditPlugin()]
+                                : []),
                         ],
                         server: {
                             host: "0.0.0.0", // Bind to all interfaces for container access

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}

package/dist/visual-edit-plugin.d.ts

@@ -0,0 +1,11 @@
+export declare function visualEditPlugin(): {
+    name: string;
+    enforce: string;
+    order: string;
+    transformIndexHtml(html: any): any;
+    transform(code: any, id: any): {
+        code: any;
+        map: null;
+    } | null;
+};
+//# sourceMappingURL=visual-edit-plugin.d.ts.map

package/dist/visual-edit-plugin.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"visual-edit-plugin.d.ts","sourceRoot":"","sources":["../src/visual-edit-plugin.ts"],"names":[],"mappings":"AAkGA,wBAAgB,gBAAgB;;;;6BAMH,GAAG;oBAKZ,GAAG,MAAM,GAAG;;;;EA4J/B"}

package/dist/visual-edit-plugin.js

@@ -0,0 +1,228 @@
+import { parse } from "@babel/parser";
+import { default as traverse } from "@babel/traverse";
+import { default as generate } from "@babel/generator";
+import * as t from "@babel/types";
+// Helper function to check if JSX element contains dynamic content
+function checkIfElementHasDynamicContent(jsxElement) {
+    let hasDynamicContent = false;
+    // Helper function to check if any node contains dynamic patterns
+    function checkNodeForDynamicContent(node) {
+        // JSX expressions like {variable}, {func()}, {obj.prop}
+        if (t.isJSXExpressionContainer(node)) {
+            const expression = node.expression;
+            // Skip empty expressions {}
+            if (t.isJSXEmptyExpression(expression)) {
+                return false;
+            }
+            // Any non-literal expression is considered dynamic
+            if (!t.isLiteral(expression)) {
+                return true;
+            }
+        }
+        // Template literals with expressions `Hello ${name}`
+        if (t.isTemplateLiteral(node) && node.expressions.length > 0) {
+            return true;
+        }
+        // Member expressions like props.title, state.value
+        if (t.isMemberExpression(node)) {
+            return true;
+        }
+        // Function calls like getData(), format()
+        if (t.isCallExpression(node)) {
+            return true;
+        }
+        // Conditional expressions like condition ? "yes" : "no"
+        if (t.isConditionalExpression(node)) {
+            return true;
+        }
+        // Identifier references (could be props, state, variables)
+        if (t.isIdentifier(node)) {
+            // Common dynamic identifiers
+            const dynamicNames = [
+                "props",
+                "state",
+                "data",
+                "item",
+                "value",
+                "text",
+                "content",
+            ];
+            if (dynamicNames.some((name) => node.name.includes(name))) {
+                return true;
+            }
+        }
+        return false;
+    }
+    // Recursively traverse all child nodes
+    function traverseNode(node) {
+        if (checkNodeForDynamicContent(node)) {
+            hasDynamicContent = true;
+            return;
+        }
+        // Recursively check child nodes
+        Object.keys(node).forEach((key) => {
+            const value = node[key];
+            if (Array.isArray(value)) {
+                value.forEach((child) => {
+                    if (child && typeof child === "object" && child.type) {
+                        traverseNode(child);
+                    }
+                });
+            }
+            else if (value && typeof value === "object" && value.type) {
+                traverseNode(value);
+            }
+        });
+    }
+    // Check all children of the JSX element
+    jsxElement.children.forEach((child) => {
+        if (hasDynamicContent)
+            return; // Early exit if already found dynamic content
+        traverseNode(child);
+    });
+    return hasDynamicContent;
+}
+export function visualEditPlugin() {
+    return {
+        name: "visual-edit-transform",
+        enforce: "pre",
+        order: "pre",
+        // Inject Tailwind CDN for visual editing capabilities
+        transformIndexHtml(html) {
+            // Inject the Tailwind CSS CDN script right before the closing </head> tag
+            const tailwindScript = `    <!-- Tailwind CSS CDN for visual editing -->\n    <script src="https://cdn.tailwindcss.com"></script>\n  `;
+            return html.replace("</head>", tailwindScript + "</head>");
+        },
+        transform(code, id) {
+            // Skip node_modules and visual-edit-agent itself
+            if (id.includes("node_modules") || id.includes("visual-edit-agent")) {
+                return null;
+            }
+            // Process JS/JSX/TS/TSX files
+            if (!id.match(/\.(jsx?|tsx?)$/)) {
+                return null;
+            }
+            // Extract filename from path, preserving pages/ or components/ structure
+            const pathParts = id.split("/");
+            let filename;
+            // Check if this is a pages or components file
+            if (id.includes("/pages/")) {
+                const pagesIndex = pathParts.findIndex((part) => part === "pages");
+                if (pagesIndex >= 0 && pagesIndex < pathParts.length - 1) {
+                    // Get all parts from 'pages' to the file, preserving nested structure
+                    const relevantParts = pathParts.slice(pagesIndex, pathParts.length);
+                    const lastPart = relevantParts[relevantParts.length - 1];
+                    // Remove file extension from the last part
+                    relevantParts[relevantParts.length - 1] = lastPart.includes(".")
+                        ? lastPart.split(".")[0]
+                        : lastPart;
+                    filename = relevantParts.join("/");
+                }
+                else {
+                    filename = pathParts[pathParts.length - 1];
+                    if (filename.includes(".")) {
+                        filename = filename.split(".")[0];
+                    }
+                }
+            }
+            else if (id.includes("/components/")) {
+                const componentsIndex = pathParts.findIndex((part) => part === "components");
+                if (componentsIndex >= 0 && componentsIndex < pathParts.length - 1) {
+                    // Get all parts from 'components' to the file, preserving nested structure
+                    const relevantParts = pathParts.slice(componentsIndex, pathParts.length);
+                    const lastPart = relevantParts[relevantParts.length - 1];
+                    // Remove file extension from the last part
+                    relevantParts[relevantParts.length - 1] = lastPart.includes(".")
+                        ? lastPart.split(".")[0]
+                        : lastPart;
+                    filename = relevantParts.join("/");
+                }
+                else {
+                    filename = pathParts[pathParts.length - 1];
+                    if (filename.includes(".")) {
+                        filename = filename.split(".")[0];
+                    }
+                }
+            }
+            else {
+                // For other files (like layout), just use the filename
+                filename = pathParts[pathParts.length - 1];
+                if (filename.includes(".")) {
+                    filename = filename.split(".")[0];
+                }
+            }
+            try {
+                // Parse the code into an AST
+                const ast = parse(code, {
+                    sourceType: "module",
+                    plugins: [
+                        "jsx",
+                        "typescript",
+                        "decorators-legacy",
+                        "classProperties",
+                        "objectRestSpread",
+                        "functionBind",
+                        "exportDefaultFrom",
+                        "exportNamespaceFrom",
+                        "dynamicImport",
+                        "nullishCoalescingOperator",
+                        "optionalChaining",
+                        "asyncGenerators",
+                        "bigInt",
+                        "optionalCatchBinding",
+                        "throwExpressions",
+                    ],
+                });
+                // Traverse the AST and add source location and dynamic content attributes to JSX elements
+                let elementsProcessed = 0;
+                traverse.default(ast, {
+                    JSXElement(path) {
+                        const jsxElement = path.node;
+                        const openingElement = jsxElement.openingElement;
+                        // Skip fragments
+                        if (t.isJSXFragment(jsxElement))
+                            return;
+                        // Skip if already has source location attribute
+                        const hasSourceLocation = openingElement.attributes.some((attr) => t.isJSXAttribute(attr) &&
+                            t.isJSXIdentifier(attr.name) &&
+                            attr.name.name === "data-source-location");
+                        if (hasSourceLocation)
+                            return;
+                        // Get line and column from AST node location
+                        const { line, column } = openingElement.loc?.start || {
+                            line: 1,
+                            column: 0,
+                        };
+                        // Create the source location attribute
+                        const sourceLocationAttr = t.jsxAttribute(t.jsxIdentifier("data-source-location"), t.stringLiteral(`${filename}:${line}:${column}`));
+                        // Check if element has dynamic content
+                        const isDynamic = checkIfElementHasDynamicContent(jsxElement);
+                        // Create the dynamic content attribute
+                        const dynamicContentAttr = t.jsxAttribute(t.jsxIdentifier("data-dynamic-content"), t.stringLiteral(isDynamic ? "true" : "false"));
+                        // Add both attributes to the beginning of the attributes array
+                        openingElement.attributes.unshift(sourceLocationAttr, dynamicContentAttr);
+                        elementsProcessed++;
+                    },
+                });
+                // Generate the code back from the AST
+                const result = generate.default(ast, {
+                    compact: false,
+                    concise: false,
+                    retainLines: true,
+                });
+                return {
+                    code: result.code,
+                    map: null,
+                };
+            }
+            catch (error) {
+                console.error("Failed to add source location to JSX:", error);
+                return {
+                    code: code, // Return original code on failure
+                    map: null,
+                };
+            }
+        },
+    };
+}
+//# sourceMappingURL=visual-edit-plugin.js.map

package/dist/visual-edit-plugin.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"visual-edit-plugin.js","sourceRoot":"","sources":["../src/visual-edit-plugin.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@base44-preview/vite-plugin",
-  "version": "0.1.0-dev.e65cc11",
+  "version": "0.1.0-dev.ec354c8",
   "description": "The Vite plugin for base44 based applications",
   "type": "module",
   "license": "MIT",
@@ -17,8 +17,16 @@
     "build": "tsc"
   },
   "devDependencies": {
+    "@types/babel__generator": "^7.27.0",
+    "@types/babel__traverse": "^7.28.0",
     "@types/node": "^24.6.2",
     "typescript": "^5.9.3",
     "vite": "^7.1.9"
+  },
+  "dependencies": {
+    "@babel/generator": "^7.28.5",
+    "@babel/parser": "^7.28.5",
+    "@babel/traverse": "^7.28.5",
+    "@babel/types": "^7.28.5"
   }
 }

package/src/ErrorOverlay.ts

@@ -0,0 +1,71 @@
+/// <reference lib="dom" />
+
+// Make HTMLElement available in non-browser environments
+const { HTMLElement = class {} } = globalThis;
+
+export class ErrorOverlay extends HTMLElement {
+  static getOverlayHTML() {
+    return `
+      <div>
+			</div>
+    `;
+  }
+  close() {
+    (this as any).parentNode?.removeChild(this);
+  }
+
+  static sendErrorToParent(
+    error: Error,
+    title: string,
+    details: string | undefined,
+    componentName: string | undefined
+  ) {
+    // Send error to parent using framewire
+    if (globalThis.window?.parent) {
+      try {
+        globalThis.window.parent?.postMessage(
+          {
+            type: "app_error",
+            error: { title, details, componentName, originalError: error },
+          },
+          "*"
+        );
+      } catch (error) {
+        console.warn(
+          "Failed to send error to iframe parent:",
+          (error as Error)?.message
+        );
+      }
+    }
+  }
+
+  constructor(error: Error) {
+    super();
+
+    const stack = error?.stack;
+    let componentName = stack?.match(/at\s+(\w+)\s+\(eval/)?.[1];
+    if (componentName === "eval") {
+      componentName = undefined;
+    }
+    const title = componentName
+      ? `in ${componentName}: ${error.message?.toString()}`
+      : error.message?.toString();
+    const details = error?.stack;
+
+    // Call editor frame with the error (via post message)
+    ErrorOverlay.sendErrorToParent(error, title, details, componentName);
+
+    // Create the overlay element using HTML template
+    const overlay = document.createElement("div");
+    overlay.innerHTML = ErrorOverlay.getOverlayHTML();
+
+    // Add to DOM
+    document.body.appendChild(overlay);
+  }
+}
+
+// vite/react-plugin transpiles classes with _SomeClass, so we need to replace all _ErrorOverlay with ErrorOverlay
+export const errorOverlayCode = ErrorOverlay.toString().replaceAll(
+  "_ErrorOverlay",
+  "ErrorOverlay"
+);

package/src/error-overlay-plugin.ts

@@ -0,0 +1,18 @@
+import { errorOverlayCode } from "./ErrorOverlay.js";
+import type { Plugin } from "vite";
+
+export function errorOverlayPlugin() {
+  return {
+    name: "error-overlay",
+    transform(code, id, opts = {}) {
+      if (opts?.ssr) return;
+
+      if (!id.includes("vite/dist/client/client.mjs")) return;
+
+      return code.replace(
+        "class ErrorOverlay",
+        errorOverlayCode + "\nclass OldErrorOverlay"
+      );
+    },
+  } as Plugin;
+}

package/src/index.ts

@@ -1,5 +1,7 @@
 import type { Plugin, UserConfig } from "vite";
 import { loadEnv } from "vite";
+import { errorOverlayPlugin } from "./error-overlay-plugin.js";
+import { visualEditPlugin } from "./visual-edit-plugin.js";
 
 export default function vitePlugin(
   opts: {
@@ -10,9 +12,10 @@ export default function vitePlugin(
 
   return {
     name: "base44",
+    enforce: "pre",
     config: ({ mode }) => {
       const env = loadEnv(mode ?? "development", process.cwd(), "");
-      const isRunningInSandbox = process.env.BASE44_SANDBOX_MODE === "true";
+      const isRunningInSandbox = env.BASE44_SANDBOX_MODE === "true";
 
       return {
         resolve: {
@@ -37,6 +40,9 @@ export default function vitePlugin(
                     });
                   },
                 },
+                ...(mode === "development"
+                  ? [errorOverlayPlugin(), visualEditPlugin()]
+                  : []),
               ],
               server: {
                 host: "0.0.0.0", // Bind to all interfaces for container access

package/src/visual-edit-plugin.ts

@@ -0,0 +1,266 @@
+import { parse } from "@babel/parser";
+import { default as traverse } from "@babel/traverse";
+import { default as generate } from "@babel/generator";
+import * as t from "@babel/types";
+
+// Helper function to check if JSX element contains dynamic content
+function checkIfElementHasDynamicContent(jsxElement: any) {
+  let hasDynamicContent = false;
+
+  // Helper function to check if any node contains dynamic patterns
+  function checkNodeForDynamicContent(node: any) {
+    // JSX expressions like {variable}, {func()}, {obj.prop}
+    if (t.isJSXExpressionContainer(node)) {
+      const expression = node.expression;
+
+      // Skip empty expressions {}
+      if (t.isJSXEmptyExpression(expression)) {
+        return false;
+      }
+
+      // Any non-literal expression is considered dynamic
+      if (!t.isLiteral(expression)) {
+        return true;
+      }
+    }
+
+    // Template literals with expressions `Hello ${name}`
+    if (t.isTemplateLiteral(node) && node.expressions.length > 0) {
+      return true;
+    }
+
+    // Member expressions like props.title, state.value
+    if (t.isMemberExpression(node)) {
+      return true;
+    }
+
+    // Function calls like getData(), format()
+    if (t.isCallExpression(node)) {
+      return true;
+    }
+
+    // Conditional expressions like condition ? "yes" : "no"
+    if (t.isConditionalExpression(node)) {
+      return true;
+    }
+
+    // Identifier references (could be props, state, variables)
+    if (t.isIdentifier(node)) {
+      // Common dynamic identifiers
+      const dynamicNames = [
+        "props",
+        "state",
+        "data",
+        "item",
+        "value",
+        "text",
+        "content",
+      ];
+      if (dynamicNames.some((name) => node.name.includes(name))) {
+        return true;
+      }
+    }
+
+    return false;
+  }
+
+  // Recursively traverse all child nodes
+  function traverseNode(node: any) {
+    if (checkNodeForDynamicContent(node)) {
+      hasDynamicContent = true;
+      return;
+    }
+
+    // Recursively check child nodes
+    Object.keys(node).forEach((key) => {
+      const value = node[key];
+
+      if (Array.isArray(value)) {
+        value.forEach((child) => {
+          if (child && typeof child === "object" && child.type) {
+            traverseNode(child);
+          }
+        });
+      } else if (value && typeof value === "object" && value.type) {
+        traverseNode(value);
+      }
+    });
+  }
+
+  // Check all children of the JSX element
+  jsxElement.children.forEach((child: any) => {
+    if (hasDynamicContent) return; // Early exit if already found dynamic content
+    traverseNode(child);
+  });
+
+  return hasDynamicContent;
+}
+
+export function visualEditPlugin() {
+  return {
+    name: "visual-edit-transform",
+    enforce: "pre",
+    order: "pre",
+    // Inject Tailwind CDN for visual editing capabilities
+    transformIndexHtml(html: any) {
+      // Inject the Tailwind CSS CDN script right before the closing </head> tag
+      const tailwindScript = `    <!-- Tailwind CSS CDN for visual editing -->\n    <script src="https://cdn.tailwindcss.com"></script>\n  `;
+      return html.replace("</head>", tailwindScript + "</head>");
+    },
+    transform(code: any, id: any) {
+      // Skip node_modules and visual-edit-agent itself
+      if (id.includes("node_modules") || id.includes("visual-edit-agent")) {
+        return null;
+      }
+
+      // Process JS/JSX/TS/TSX files
+      if (!id.match(/\.(jsx?|tsx?)$/)) {
+        return null;
+      }
+
+      // Extract filename from path, preserving pages/ or components/ structure
+      const pathParts = id.split("/");
+      let filename;
+
+      // Check if this is a pages or components file
+      if (id.includes("/pages/")) {
+        const pagesIndex = pathParts.findIndex((part: any) => part === "pages");
+        if (pagesIndex >= 0 && pagesIndex < pathParts.length - 1) {
+          // Get all parts from 'pages' to the file, preserving nested structure
+          const relevantParts = pathParts.slice(pagesIndex, pathParts.length);
+          const lastPart = relevantParts[relevantParts.length - 1];
+          // Remove file extension from the last part
+          relevantParts[relevantParts.length - 1] = lastPart.includes(".")
+            ? lastPart.split(".")[0]
+            : lastPart;
+          filename = relevantParts.join("/");
+        } else {
+          filename = pathParts[pathParts.length - 1];
+          if (filename.includes(".")) {
+            filename = filename.split(".")[0];
+          }
+        }
+      } else if (id.includes("/components/")) {
+        const componentsIndex = pathParts.findIndex(
+          (part: any) => part === "components"
+        );
+        if (componentsIndex >= 0 && componentsIndex < pathParts.length - 1) {
+          // Get all parts from 'components' to the file, preserving nested structure
+          const relevantParts = pathParts.slice(
+            componentsIndex,
+            pathParts.length
+          );
+          const lastPart = relevantParts[relevantParts.length - 1];
+          // Remove file extension from the last part
+          relevantParts[relevantParts.length - 1] = lastPart.includes(".")
+            ? lastPart.split(".")[0]
+            : lastPart;
+          filename = relevantParts.join("/");
+        } else {
+          filename = pathParts[pathParts.length - 1];
+          if (filename.includes(".")) {
+            filename = filename.split(".")[0];
+          }
+        }
+      } else {
+        // For other files (like layout), just use the filename
+        filename = pathParts[pathParts.length - 1];
+        if (filename.includes(".")) {
+          filename = filename.split(".")[0];
+        }
+      }
+
+      try {
+        // Parse the code into an AST
+        const ast = parse(code, {
+          sourceType: "module",
+          plugins: [
+            "jsx",
+            "typescript",
+            "decorators-legacy",
+            "classProperties",
+            "objectRestSpread",
+            "functionBind",
+            "exportDefaultFrom",
+            "exportNamespaceFrom",
+            "dynamicImport",
+            "nullishCoalescingOperator",
+            "optionalChaining",
+            "asyncGenerators",
+            "bigInt",
+            "optionalCatchBinding",
+            "throwExpressions",
+          ],
+        });
+
+        // Traverse the AST and add source location and dynamic content attributes to JSX elements
+        let elementsProcessed = 0;
+        traverse.default(ast, {
+          JSXElement(path) {
+            const jsxElement = path.node;
+            const openingElement = jsxElement.openingElement;
+
+            // Skip fragments
+            if (t.isJSXFragment(jsxElement)) return;
+
+            // Skip if already has source location attribute
+            const hasSourceLocation = openingElement.attributes.some(
+              (attr) =>
+                t.isJSXAttribute(attr) &&
+                t.isJSXIdentifier(attr.name) &&
+                attr.name.name === "data-source-location"
+            );
+
+            if (hasSourceLocation) return;
+
+            // Get line and column from AST node location
+            const { line, column } = openingElement.loc?.start || {
+              line: 1,
+              column: 0,
+            };
+
+            // Create the source location attribute
+            const sourceLocationAttr = t.jsxAttribute(
+              t.jsxIdentifier("data-source-location"),
+              t.stringLiteral(`${filename}:${line}:${column}`)
+            );
+
+            // Check if element has dynamic content
+            const isDynamic = checkIfElementHasDynamicContent(jsxElement);
+
+            // Create the dynamic content attribute
+            const dynamicContentAttr = t.jsxAttribute(
+              t.jsxIdentifier("data-dynamic-content"),
+              t.stringLiteral(isDynamic ? "true" : "false")
+            );
+
+            // Add both attributes to the beginning of the attributes array
+            openingElement.attributes.unshift(
+              sourceLocationAttr,
+              dynamicContentAttr
+            );
+            elementsProcessed++;
+          },
+        });
+
+        // Generate the code back from the AST
+        const result = generate.default(ast, {
+          compact: false,
+          concise: false,
+          retainLines: true,
+        });
+
+        return {
+          code: result.code,
+          map: null,
+        };
+      } catch (error) {
+        console.error("Failed to add source location to JSX:", error);
+        return {
+          code: code, // Return original code on failure
+          map: null,
+        };
+      }
+    },
+  };
+}