@base44/vite-plugin 1.0.28 → 1.0.31

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

@@ -1 +1 @@
-{"version":3,"file":"visual-edit-plugin.d.ts","sourceRoot":"","sources":["../src/visual-edit-plugin.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,MAAM,CAAC;AAInC,wBAAgB,gBAAgB,IAwEzB,MAAM,CACZ"}
+{"version":3,"file":"visual-edit-plugin.d.ts","sourceRoot":"","sources":["../src/visual-edit-plugin.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAa,MAAM,EAAc,MAAM,MAAM,CAAC;AAI1D,wBAAgB,gBAAgB,IA+EzB,MAAM,CACZ"}

package/dist/visual-edit-plugin.js

@@ -7,7 +7,13 @@ import { JSXUtils } from "./jsx-utils.js";
 export function visualEditPlugin() {
     return {
         name: "visual-edit-transform",
-        apply: (config) => config.mode === "development",
+        // Dev SERVER only: the injected data-* markers are consumed by the
+        // visual-edit agent in the live preview, which vite serves — never by
+        // build output. Gating on mode alone also caught `vite build --mode
+        // development` (the platform's validation build), where instrumenting
+        // user code is pure risk: an injection bug there fails the build on
+        // code that doesn't exist on disk.
+        apply: (config, env) => env.command === "serve" && config.mode === "development",
         enforce: "pre",
         order: "pre",
         transformIndexHtml(html) {
@@ -73,28 +79,20 @@ export function visualEditPlugin() {
         },
     };
 }
+// Emit the canonical real path (src/pages/Home.jsx) the backend and sandbox use, NOT a
+// legacy alias (pages/Home). The path is anchored on the last "src" segment with the
+// extension retained, so consumers get the file's true sandbox path directly.
 function extractFilename(id) {
-    const pathParts = id.split("/");
-    const segmentIndex = findSegmentIndex(pathParts, ["pages", "components"]);
-    if (segmentIndex >= 0 && segmentIndex < pathParts.length - 1) {
-        const relevantParts = pathParts.slice(segmentIndex);
-        const last = relevantParts[relevantParts.length - 1];
-        relevantParts[relevantParts.length - 1] = stripExtension(last ?? "");
-        return relevantParts.join("/");
+    // Drop any Vite query suffix (e.g. "?v=...") and normalize separators.
+    const cleanId = id.split("?")[0].replace(/\\/g, "/");
+    const parts = cleanId.split("/");
+    // Anchor on the LAST "src" segment so a "src" elsewhere in the absolute path
+    // (e.g. a user's home dir) can't mis-anchor. base44 apps keep all source under src/.
+    const srcIndex = parts.lastIndexOf("src");
+    if (srcIndex >= 0) {
+        return parts.slice(srcIndex).join("/"); // src/pages/Home.jsx, src/Layout.jsx, src/components/ui/Card.tsx
     }
-    const lastPart = pathParts[pathParts.length - 1] ?? "";
-    return stripExtension(lastPart);
-}
-function findSegmentIndex(parts, segments) {
-    for (const segment of segments) {
-        const idx = parts.findIndex((part) => part === segment);
-        if (idx >= 0)
-            return idx;
-    }
-    return -1;
-}
-function stripExtension(filename) {
-    const dotIndex = filename.indexOf(".");
-    return dotIndex >= 0 ? filename.substring(0, dotIndex) : filename;
+    // Fallback: file not under src/ — use the bare filename (extension kept).
+    return parts[parts.length - 1] ?? "";
 }
 //# sourceMappingURL=visual-edit-plugin.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"visual-edit-plugin.js","sourceRoot":"","sources":["../src/visual-edit-plugin.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"visual-edit-plugin.js","sourceRoot":"","sources":["../src/visual-edit-plugin.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACtC,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AACtD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AACvD,OAAO,KAAK,CAAC,MAAM,cAAc,CAAC;AAElC,OAAO,EAAE,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAClD,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAE1C,MAAM,UAAU,gBAAgB;IAC9B,OAAO;QACL,IAAI,EAAE,uBAAuB;QAC7B,mEAAmE;QACnE,sEAAsE;QACtE,oEAAoE;QACpE,sEAAsE;QACtE,oEAAoE;QACpE,mCAAmC;QACnC,KAAK,EAAE,CAAC,MAAkB,EAAE,GAAc,EAAE,EAAE,CAC5C,GAAG,CAAC,OAAO,KAAK,OAAO,IAAI,MAAM,CAAC,IAAI,KAAK,aAAa;QAC1D,OAAO,EAAE,KAAK;QACd,KAAK,EAAE,KAAK;QACZ,kBAAkB,CAAC,IAAS;YAC1B,MAAM,cAAc,GAAG,+GAA+G,CAAC;YACvI,OAAO,IAAI,CAAC,OAAO,CAAC,SAAS,EAAE,cAAc,GAAG,SAAS,CAAC,CAAC;QAC7D,CAAC;QACD,SAAS,CAAC,IAAS,EAAE,EAAO;YAC1B,IAAI,EAAE,CAAC,QAAQ,CAAC,cAAc,CAAC,IAAI,EAAE,CAAC,QAAQ,CAAC,mBAAmB,CAAC,EAAE,CAAC;gBACpE,OAAO,IAAI,CAAC;YACd,CAAC;YAED,IAAI,CAAC,EAAE,CAAC,KAAK,CAAC,gBAAgB,CAAC,EAAE,CAAC;gBAChC,OAAO,IAAI,CAAC;YACd,CAAC;YAED,MAAM,QAAQ,GAAG,eAAe,CAAC,EAAE,CAAC,CAAC;YAErC,IAAI,CAAC;gBACH,MAAM,GAAG,GAAG,KAAK,CAAC,IAAI,EAAE;oBACtB,UAAU,EAAE,QAAQ;oBACpB,OAAO,EAAE;wBACP,KAAK;wBACL,YAAY;wBACZ,mBAAmB;wBACnB,iBAAiB;wBACjB,kBAAkB;wBAClB,cAAc;wBACd,mBAAmB;wBACnB,qBAAqB;wBACrB,eAAe;wBACf,2BAA2B;wBAC3B,kBAAkB;wBAClB,iBAAiB;wBACjB,QAAQ;wBACR,sBAAsB;wBACtB,kBAAkB;qBACnB;iBACF,CAAC,CAAC;gBAEH,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;gBACjB,MAAM,SAAS,GAAG,IAAI,YAAY,CAAC,CAAC,EAAE,QAAQ,CAAC,CAAC;gBAEhD,QAAQ,CAAC,OAAO,CAAC,GAAG,EAAE;oBACpB,UAAU,CAAC,IAAI;wBACb,MAAM,UAAU,GAAG,IAAI,CAAC,IAAI,CAAC;wBAC7B,IAAI,CAAC,CAAC,aAAa,CAAC,UAAU,CAAC;4BAAE,OAAO;wBACxC,SAAS,CAAC,iBAAiB,CAAC,IAAI,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC,CAAC;oBAC1D,CAAC;iBACF,CAAC,CAAC;gBAEH,MAAM,MAAM,GAAG,QAAQ,CAAC,OAAO,CAAC,GAAG,EAAE;oBACnC,OAAO,EAAE,KAAK;oBACd,OAAO,EAAE,KAAK;oBACd,WAAW,EAAE,IAAI;iBAClB,CAAC,CAAC;gBAEH,OAAO;oBACL,IAAI,EAAE,MAAM,CAAC,IAAI;oBACjB,GAAG,EAAE,IAAI;iBACV,CAAC;YACJ,CAAC;YAAC,OAAO,KAAK,EAAE,CAAC;gBACf,OAAO,CAAC,KAAK,CAAC,uCAAuC,EAAE,KAAK,CAAC,CAAC;gBAC9D,OAAO;oBACL,IAAI,EAAE,IAAI;oBACV,GAAG,EAAE,IAAI;iBACV,CAAC;YACJ,CAAC;QACH,CAAC;KACQ,CAAC;AACd,CAAC;AAED,uFAAuF;AACvF,qFAAqF;AACrF,8EAA8E;AAC9E,SAAS,eAAe,CAAC,EAAU;IACjC,uEAAuE;IACvE,MAAM,OAAO,GAAG,EAAE,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAE,CAAC,OAAO,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC;IACtD,MAAM,KAAK,GAAG,OAAO,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;IACjC,6EAA6E;IAC7E,qFAAqF;IACrF,MAAM,QAAQ,GAAG,KAAK,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;IAC1C,IAAI,QAAQ,IAAI,CAAC,EAAE,CAAC;QAClB,OAAO,KAAK,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,iEAAiE;IAC3G,CAAC;IACD,0EAA0E;IAC1E,OAAO,KAAK,CAAC,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC;AACvC,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@base44/vite-plugin",
-  "version": "1.0.28",
+  "version": "1.0.31",
   "description": "The Vite plugin for base44 based applications",
   "type": "module",
   "license": "MIT",

package/src/capabilities/inline-edit/controller.ts

@@ -6,7 +6,7 @@ import {
   shouldEnterInlineEditingMode,
   isStaticArrayTextElement,
 } from "./dom-utils.js";
-import { PLUGIN_ELEMENT_ATTR } from "../../injections/utils.js";
+import { PLUGIN_ELEMENT_ATTR, readElementClasses } from "../../injections/utils.js";
 
 const DEBOUNCE_MS = 500;
 
@@ -36,17 +36,13 @@ export function createInlineEditController(
     const originalContent = element.dataset.originalTextContent;
     const newContent = element.textContent;
 
-    const svgElement = element as unknown as SVGElement;
     const rect = element.getBoundingClientRect();
 
     const message: Record<string, unknown> = {
       type: "inline-edit",
       elementInfo: {
         tagName: element.tagName,
-        classes:
-          (svgElement.className as unknown as SVGAnimatedString)?.baseVal ||
-          element.className ||
-          "",
+        classes: readElementClasses(element),
         visualSelectorId: host.getSelectedElementId(),
         content: newContent,
         dataSourceLocation: element.dataset.sourceLocation,

package/src/index.ts

@@ -8,6 +8,19 @@ import { buildStatusPlugin } from "./build-status-plugin.js";
 
 const isRunningInSandbox = !!process.env.MODAL_SANDBOX_ID;
 
+const ENV_UNSET_GUIDANCE = [
+  "[base44] No Base44 backend configured — VITE_BASE44_APP_BASE_URL is not set, so /api requests have nowhere to go.",
+  "[base44] Run the app through the Base44 CLI instead:",
+  "[base44]   base44 dev           app + local backend (throwaway local data)",
+  "[base44]   base44 dev --remote  app + your app's real backend (production data)",
+].join("\n");
+
+const BUILD_WITHOUT_APP_ID_WARNING = [
+  "[base44] Warning: VITE_BASE44_APP_ID is not set — this build",
+  "[base44] will not know its app id and its API calls will fail.",
+  "[base44] Build with:  base44 build   (or base44 deploy --build)",
+].join("\n");
+
 export default function vitePlugin(
   opts: {
     legacySDKImports?: boolean;
@@ -28,9 +41,13 @@ export default function vitePlugin(
   return [
     {
       name: "base44",
-      config: ({ mode, root = process.cwd() }) => {
+      config: ({ mode, root = process.cwd() }, { command }) => {
         const env = loadEnv(mode ?? "development", root, "");
 
+        if (!isRunningInSandbox && command === "build" && !env.VITE_BASE44_APP_ID) {
+          console.log(BUILD_WITHOUT_APP_ID_WARNING);
+        }
+
         return {
           resolve: {
             alias: {
@@ -110,7 +127,9 @@ export default function vitePlugin(
                   };
                 }
                 console.log(
-                  "[base44] Proxy not enabled (VITE_BASE44_APP_BASE_URL not set)"
+                  command === "serve"
+                    ? ENV_UNSET_GUIDANCE
+                    : "[base44] Proxy not enabled (VITE_BASE44_APP_BASE_URL not set)"
                 );
                 return {};
               })()),

package/src/injections/unhandled-errors-handlers.ts

@@ -56,7 +56,7 @@ function onAppError({
 }: {
   title: string;
   details: string;
-  componentName: string;
+  componentName: string | undefined;
   originalError: any;
 }) {
   if (originalError?.response?.status === 402) {
@@ -80,35 +80,52 @@ function onAppError({
   );
 }
 
-function handleUnhandledRejection(event: any) {
-  const stack = event.reason.stack;
-  // extract function name from "at X (eval" where x is the function name
-  const functionName = stack.match(/at\s+(\w+)\s+\(eval/)?.[1];
-  const msg = functionName
-    ? `Error in ${functionName}: ${event.reason.toString()}`
-    : event.reason.toString();
+// extract function name from "at X (eval" where X is the function name
+function extractFunctionName(stack: unknown): string | undefined {
+  if (typeof stack !== "string") return undefined;
+  return stack.match(/at\s+(\w+)\s+\(eval/)?.[1];
+}
+
+// A rejection reason or error can be any value — undefined, a string, a
+// null-prototype object. Throwing here masks the real error entirely.
+function describeErrorValue(value: unknown): string {
+  try {
+    return String(value);
+  } catch {
+    return Object.prototype.toString.call(value);
+  }
+}
+
+export function handleUnhandledRejection(event: any) {
+  const reason = event?.reason;
+  const functionName = extractFunctionName(reason?.stack);
+  const text = describeErrorValue(reason);
+  const msg = functionName ? `Error in ${functionName}: ${text}` : text;
   onAppError({
     title: msg,
-    details: event.reason.toString(),
+    details: text,
     componentName: functionName,
-    originalError: event.reason,
+    originalError: reason,
   });
 }
 
-function handleWindowError(event: any) {
-  const stack = event.error?.stack;
-  let functionName = stack.match(/at\s+(\w+)\s+\(eval/)?.[1];
+export function handleWindowError(event: any) {
+  const error = event?.error;
+  let functionName = extractFunctionName(error?.stack);
   if (functionName === "eval") {
-    functionName = null;
+    functionName = undefined;
   }
 
-  const msg = functionName
-    ? `in ${functionName}: ${event.error.toString()}`
-    : event.error.toString();
+  // window.onerror fires with a null error for cross-origin script failures
+  const text =
+    error == null && typeof event?.message === "string"
+      ? event.message
+      : describeErrorValue(error);
+  const msg = functionName ? `in ${functionName}: ${text}` : text;
   onAppError({
     title: msg,
-    details: event.error.toString(),
+    details: text,
     componentName: functionName,
-    originalError: event.error,
+    originalError: error,
   });
 }

package/src/injections/utils.ts

@@ -98,6 +98,15 @@ export function updateElementAttribute(elements: Element[], attribute: string, v
   });
 }
 
+/**
+ * Read an element's classes as a plain string, safe to postMessage.
+ * `element.className` is an SVGAnimatedString on SVG elements, which is not
+ * structured-cloneable — posting it throws DataCloneError and the preview hangs.
+ */
+export function readElementClasses(element: Element): string {
+  return element.getAttribute("class") ?? "";
+}
+
 /** Collect attribute values from an element for a given allowlist. */
 export function collectAllowedAttributes(element: Element, allowedAttributes: string[]): Record<string, string> {
   const attributes: Record<string, string> = {};

package/src/injections/visual-edit-agent.ts

@@ -1,4 +1,4 @@
-import { findElementsById, updateElementClasses, updateElementAttribute, collectAllowedAttributes, ALLOWED_ATTRIBUTES, getElementSelectorId, stopAnimations, resumeAnimations, findInstrumentedElement, resolveHoverTarget, positionLabel, injectFontFaceCss } from "./utils.js";
+import { findElementsById, updateElementClasses, updateElementAttribute, collectAllowedAttributes, readElementClasses, ALLOWED_ATTRIBUTES, getElementSelectorId, stopAnimations, resumeAnimations, findInstrumentedElement, resolveHoverTarget, positionLabel, injectFontFaceCss } from "./utils.js";
 import { createLayerController } from "./layer-dropdown/controller.js";
 import { LAYER_DROPDOWN_ATTR } from "./layer-dropdown/consts.js";
 import { createInlineEditController } from "../capabilities/inline-edit/index.js";
@@ -137,7 +137,6 @@ export function setupVisualEditAgent() {
   const notifyElementSelected = (element: Element) => {
     const htmlElement = element as HTMLElement;
     const rect = element.getBoundingClientRect();
-    const svgElement = element as SVGElement;
     const isTextElement = TEXT_TAGS.includes(element.tagName?.toLowerCase());
 
     const arrEl = htmlElement.closest("[data-arr-variable-name]") as HTMLElement | null;
@@ -153,10 +152,7 @@ export function setupVisualEditAgent() {
     window.parent.postMessage({
       type: "element-selected",
       tagName: element.tagName,
-      classes:
-        (svgElement.className as unknown as SVGAnimatedString)?.baseVal ||
-        element.className ||
-        "",
+      classes: readElementClasses(element),
       visualSelectorId: getElementSelectorId(element),
       content: isTextElement ? htmlElement.innerText : undefined,
       dataSourceLocation: htmlElement.dataset.sourceLocation,

package/src/processors/collection-item-field-processor.ts

@@ -382,6 +382,18 @@ export class DataItemFieldProcessor {
       }
 
       const fieldToInject = idField ?? "id";
+
+      // Never inject a param whose name is already bound where the JSX
+      // element sits. A function-scope binding (e.g. `const { id } =
+      // useParams()`) makes the output fail to compile — "The symbol 'id'
+      // has already been declared" — an outer-scope binding would be
+      // silently shadowed by an undefined prop, and a block-scope binding
+      // between the element and the function would make the emitted
+      // attribute read the wrong value. Anchoring on the element's scope
+      // chain covers all three; skipping just degrades visual-edit tracing
+      // for this element.
+      if (path.scope.hasBinding(fieldToInject)) return;
+
       const newProp = this.types.objectProperty(
         this.types.identifier(fieldToInject),
         this.types.identifier(fieldToInject),

package/src/visual-edit-plugin.md

@@ -14,7 +14,7 @@ It adds two HTML `data-*` attributes to every JSX element:
 
 // AFTER (served to browser):
 <Button
-  data-source-location="components/Button:42:8"
+  data-source-location="src/components/Button.jsx:42:8"
   data-dynamic-content="false"
   className="px-4"
 >Click me</Button>
@@ -29,7 +29,7 @@ It adds two HTML `data-*` attributes to every JSX element:
 | Condition | Where | Why |
 |-----------|-------|-----|
 | `MODAL_SANDBOX_ID` env var is set | `index.ts:8` | Only runs inside Modal sandbox containers |
-| Vite mode is `"development"` | `apply: (config) => config.mode === "development"` | No overhead in production builds |
+| Dev **server** in `"development"` mode | `apply: (config, env) => env.command === "serve" && config.mode === "development"` | The injected `data-*` markers are only consumed by the visual-edit agent in the live preview, which the dev server serves. Builds never use them — including `vite build --mode development` (the platform's validation build), where instrumenting user code once produced compile errors on code that wasn't on disk |
 | File is `.js`, `.jsx`, `.ts`, or `.tsx` | `id.match(/\.(jsx?\|tsx?)$/)` | Only JSX-capable files |
 | File is NOT in `node_modules` | `id.includes("node_modules")` | Skip third-party code |
 | File is NOT `visual-edit-agent` | `id.includes("visual-edit-agent")` | Don't instrument the agent itself |
@@ -37,7 +37,8 @@ It adds two HTML `data-*` attributes to every JSX element:
 ### Execution Timeline
 
 ```
-1. npm run dev
+1. npm run dev            (dev SERVER only — `vite build` never registers this plugin,
+                           regardless of mode)
 2. Vite starts, loads plugin config
 3. index.ts checks: isRunningInSandbox = !!process.env.MODAL_SANDBOX_ID
 4. If true → registers visualEditPlugin() in the plugin pipeline
@@ -65,19 +66,18 @@ It adds two HTML `data-*` attributes to every JSX element:
 
 ### Step 1: Filename Extraction (lines 123-173)
 
-Builds a human-readable source path from the full file path:
+Builds the canonical real source path (the path the backend and sandbox use) from the full file path:
 
 ```
-/Users/dev/project/src/pages/About/index.tsx  →  "pages/About/index"
-/Users/dev/project/src/components/ui/Button.tsx  →  "components/ui/Button"
-/Users/dev/project/src/Layout.tsx  →  "Layout"
+/Users/dev/project/src/pages/About/index.tsx  →  "src/pages/About/index.tsx"
+/Users/dev/project/src/components/ui/Button.tsx  →  "src/components/ui/Button.tsx"
+/Users/dev/project/src/Layout.tsx  →  "src/Layout.tsx"
 ```
 
 **Rules:**
-- Files under `/pages/` → preserves `pages/...` prefix with nested structure
-- Files under `/components/` → preserves `components/...` prefix with nested structure
-- All other files → just the filename (no directory prefix)
-- File extensions are always stripped
+- Anchors on the last `src/` segment and keeps everything from there, preserving nested structure
+- The file extension is retained (`.jsx`/`.tsx`/`.js`/`.ts`)
+- Files not under `src/` → just the filename (extension kept)
 
 ### Step 2: AST Parsing (lines 177-196)
 
@@ -260,7 +260,7 @@ The parent window (editor UI) and the sandbox iframe can't share a DOM. The `dat
 ```
 Parent Window (Editor UI)                    iframe Sandbox (React App)
 ─────────────────────────                    ──────────────────────────
-"Select element components/Button:42:8"  →   querySelector('[data-source-location="components/Button:42:8"]')
+"Select element src/components/Button.jsx:42:8"  →   querySelector('[data-source-location="src/components/Button.jsx:42:8"]')
                                          ←   "Element found: classes='px-4', isDynamic=false"
 "Update classes to 'px-6 py-3'"          →   element.setAttribute("class", "px-6 py-3")
 ```
@@ -305,7 +305,7 @@ The `transformIndexHtml` hook injects the Tailwind CSS CDN, enabling visual edit
           │  │   React App (DOM)                     │  │
           │  │                                       │  │
           │  │   <div data-source-location=          │  │
-          │  │        "pages/Home:10:4"              │  │
+          │  │        "src/pages/Home.jsx:10:4"      │  │
           │  │        data-dynamic-content="true">   │  │
           │  │     {greeting}                        │  │
           │  │   </div>                              │  │

package/src/visual-edit-plugin.ts

@@ -2,14 +2,21 @@ 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";
-import type { Plugin } from "vite";
+import type { ConfigEnv, Plugin, UserConfig } from "vite";
 import { JSXProcessor } from "./jsx-processor.js";
 import { JSXUtils } from "./jsx-utils.js";
 
 export function visualEditPlugin() {
   return {
     name: "visual-edit-transform",
-    apply: (config) => config.mode === "development",
+    // Dev SERVER only: the injected data-* markers are consumed by the
+    // visual-edit agent in the live preview, which vite serves — never by
+    // build output. Gating on mode alone also caught `vite build --mode
+    // development` (the platform's validation build), where instrumenting
+    // user code is pure risk: an injection bug there fails the build on
+    // code that doesn't exist on disk.
+    apply: (config: UserConfig, env: ConfigEnv) =>
+      env.command === "serve" && config.mode === "development",
     enforce: "pre",
     order: "pre",
     transformIndexHtml(html: any) {
@@ -81,30 +88,19 @@ export function visualEditPlugin() {
   } as Plugin;
 }
 
+// Emit the canonical real path (src/pages/Home.jsx) the backend and sandbox use, NOT a
+// legacy alias (pages/Home). The path is anchored on the last "src" segment with the
+// extension retained, so consumers get the file's true sandbox path directly.
 function extractFilename(id: string): string {
-  const pathParts = id.split("/");
-
-  const segmentIndex = findSegmentIndex(pathParts, ["pages", "components"]);
-  if (segmentIndex >= 0 && segmentIndex < pathParts.length - 1) {
-    const relevantParts = pathParts.slice(segmentIndex);
-    const last = relevantParts[relevantParts.length - 1];
-    relevantParts[relevantParts.length - 1] = stripExtension(last ?? "");
-    return relevantParts.join("/");
+  // Drop any Vite query suffix (e.g. "?v=...") and normalize separators.
+  const cleanId = id.split("?")[0]!.replace(/\\/g, "/");
+  const parts = cleanId.split("/");
+  // Anchor on the LAST "src" segment so a "src" elsewhere in the absolute path
+  // (e.g. a user's home dir) can't mis-anchor. base44 apps keep all source under src/.
+  const srcIndex = parts.lastIndexOf("src");
+  if (srcIndex >= 0) {
+    return parts.slice(srcIndex).join("/"); // src/pages/Home.jsx, src/Layout.jsx, src/components/ui/Card.tsx
   }
-
-  const lastPart = pathParts[pathParts.length - 1] ?? "";
-  return stripExtension(lastPart);
-}
-
-function findSegmentIndex(parts: string[], segments: string[]): number {
-  for (const segment of segments) {
-    const idx = parts.findIndex((part) => part === segment);
-    if (idx >= 0) return idx;
-  }
-  return -1;
-}
-
-function stripExtension(filename: string): string {
-  const dotIndex = filename.indexOf(".");
-  return dotIndex >= 0 ? filename.substring(0, dotIndex) : filename;
+  // Fallback: file not under src/ — use the bare filename (extension kept).
+  return parts[parts.length - 1] ?? "";
 }