@base44/vite-plugin 1.0.35 → 1.0.36

package/package.json

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

package/src/injections/layer-dropdown/controller.ts

@@ -1,6 +1,6 @@
 /** Controller that encapsulates layer-dropdown integration logic */
 
-import { getElementSelectorId } from "../utils.js";
+import { readVisualEditTagName, getElementSelectorId } from "../utils.js";
 import { buildLayerChain } from "./utils.js";
 import {
   enhanceLabelWithChevron,
@@ -62,7 +62,7 @@ export function createLayerController(config: LayerControllerConfig): LayerContr
     } else {
       dropdownSourceLayer = {
         element,
-        tagName: element.tagName.toLowerCase(),
+        tagName: readVisualEditTagName(element).toLowerCase(),
         selectorId: currentId,
       };
       config.onDeselect();

package/src/injections/layer-dropdown/utils.ts

@@ -1,6 +1,6 @@
 /** DOM utilities for the layer-dropdown module */
 
-import { isInstrumentedElement, getElementSelectorId } from "../utils.js";
+import { readVisualEditTagName, isInstrumentedElement, getElementSelectorId } from "../utils.js";
 import { MAX_PARENT_DEPTH, MAX_CHILD_DEPTH } from "./consts.js";
 
 import type { LayerInfo } from "./types.js";
@@ -23,7 +23,7 @@ export function getLayerDisplayName(layer: LayerInfo): string {
 function toLayerInfo(element: Element, depth?: number): LayerInfo {
   const info: LayerInfo = {
     element,
-    tagName: element.tagName.toLowerCase(),
+    tagName: readVisualEditTagName(element).toLowerCase(),
     selectorId: getElementSelectorId(element),
   };
   if (depth !== undefined) info.depth = depth;
@@ -50,7 +50,7 @@ export function getInstrumentedDescendants(
       if (isInstrumentedElement(child)) {
         const info: LayerInfo = {
           element: child,
-          tagName: child.tagName.toLowerCase(),
+          tagName: readVisualEditTagName(child).toLowerCase(),
           selectorId: getElementSelectorId(child),
         };
         if (startDepth !== undefined) {

package/src/injections/utils.ts

@@ -53,6 +53,14 @@ export function getElementSelectorId(element: Element): string | null {
   );
 }
 
+export function isImageComponent(element: Element): boolean {
+  return element.hasAttribute("data-base44-image");
+}
+
+export function readVisualEditTagName(element: Element): string {
+  return isImageComponent(element) ? "IMG" : element.tagName;
+}
+
 export const ALLOWED_ATTRIBUTES: string[] = ["src"];
 
 export const PLUGIN_ELEMENT_ATTR = "data-vite-plugin-element";
@@ -93,7 +101,11 @@ export function updateElementAttribute(elements: Element[], attribute: string, v
       targetArrIndex === null ||
       (element as HTMLElement).dataset.arrIndex === targetArrIndex
     ) {
-      element.setAttribute(attribute, value);
+      if (attribute === "src" && isImageComponent(element)) {
+        element.dispatchEvent(new CustomEvent("base44:image-replace", { detail: { src: value } }));
+      } else {
+        element.setAttribute(attribute, value);
+      }
     }
   });
 }
@@ -111,7 +123,9 @@ export function readElementClasses(element: Element): string {
 export function collectAllowedAttributes(element: Element, allowedAttributes: string[]): Record<string, string> {
   const attributes: Record<string, string> = {};
   for (const attr of allowedAttributes) {
-    const val = element.getAttribute(attr);
+    const val = attr === "src" && isImageComponent(element)
+      ? element.getAttribute("data-base44-image-src")
+      : element.getAttribute(attr);
     if (val !== null) {
       attributes[attr] = val;
     }

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

@@ -1,4 +1,4 @@
-import { findElementsById, updateElementClasses, updateElementAttribute, collectAllowedAttributes, readElementClasses, ALLOWED_ATTRIBUTES, getElementSelectorId, stopAnimations, resumeAnimations, findInstrumentedElement, resolveHoverTarget, positionLabel, injectFontFaceCss } from "./utils.js";
+import { readVisualEditTagName, 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";
@@ -65,7 +65,7 @@ export function setupVisualEditAgent() {
 
     if (!label) {
       label = document.createElement("div");
-      label.textContent = element.tagName.toLowerCase();
+      label.textContent = readVisualEditTagName(element).toLowerCase();
       label.style.position = "absolute";
       label.style.left = "-2px";
       label.style.padding = "2px 8px";
@@ -137,7 +137,7 @@ export function setupVisualEditAgent() {
   const notifyElementSelected = (element: Element) => {
     const htmlElement = element as HTMLElement;
     const rect = element.getBoundingClientRect();
-    const isTextElement = TEXT_TAGS.includes(element.tagName?.toLowerCase());
+    const isTextElement = TEXT_TAGS.includes(readVisualEditTagName(element).toLowerCase());
 
     const arrEl = htmlElement.closest("[data-arr-variable-name]") as HTMLElement | null;
     const staticArrayName = arrEl?.dataset?.arrVariableName || null;
@@ -151,7 +151,7 @@ export function setupVisualEditAgent() {
 
     window.parent.postMessage({
       type: "element-selected",
-      tagName: element.tagName,
+      tagName: readVisualEditTagName(element),
       classes: readElementClasses(element),
       visualSelectorId: getElementSelectorId(element),
       content: isTextElement ? htmlElement.innerText : undefined,
@@ -181,7 +181,7 @@ export function setupVisualEditAgent() {
   };
 
   // Select an element: create overlays, update state, notify parent
-  const selectElement = (element: Element): HTMLDivElement | undefined => {
+  const selectElement = (element: Element, notifyParent = true): HTMLDivElement | undefined => {
     const visualSelectorId = getElementSelectorId(element);
 
     clearSelectedOverlays();
@@ -197,7 +197,7 @@ export function setupVisualEditAgent() {
     selectedElementId = visualSelectorId || null;
     selectedElement = element;
     clearHoverOverlays();
-    notifyElementSelected(element);
+    if (notifyParent) notifyElementSelected(element);
 
     return selectedOverlays[0];
   };
@@ -381,9 +381,20 @@ export function setupVisualEditAgent() {
     // Reposition overlays after attribute change (e.g. image src swap can affect layout)
     setTimeout(() => {
       if (selectedElementId === visualSelectorId) {
+        const currentElements = findElementsById(visualSelectorId);
+        if (selectedElement && !selectedElement.isConnected) {
+          const selectedIndex = (selectedElement as HTMLElement).dataset.arrIndex;
+          const replacement = currentElements.find(
+            (element) => (element as HTMLElement).dataset.arrIndex === selectedIndex
+          );
+          if (replacement) {
+            const overlay = selectElement(replacement, false);
+            layerController.attachToOverlay(overlay, replacement);
+          }
+        }
         selectedOverlays.forEach((overlay, index) => {
-          if (index < elements.length) {
-            positionOverlay(overlay, elements[index]!);
+          if (index < currentElements.length) {
+            positionOverlay(overlay, currentElements[index]!);
           }
         });
       }

package/src/visual-edit-plugin.md

@@ -356,3 +356,18 @@ The `transformIndexHtml` hook injects the Tailwind CSS CDN, enabling visual edit
 | `src/injections/sandbox-mount-observer.ts` | Detects when instrumented elements mount in DOM |
 | `src/injections/utils.ts` | `findElementsById()`, `updateElementClasses()` utilities |
 | `tests/visual-edit-agent.test.ts` | Unit tests for element finding and class updates |
+
+### Seeded Image components
+
+A `data-base44-image` wrapper is one logical image edit target. Its classes and
+source location refer to the app's `<Image>` call site; report its tag as `IMG`
+for the image toolbar and layer labels. Read `src` from `data-base44-image-src`,
+which preserves the original prop rather than the inner image's transformed CDN
+URL. The template keeps all instrumentation on the wrapper and suppresses source
+locations on the placeholder and main image.
+
+For `src` edits, dispatch `base44:image-replace` with `detail: { src }` on the
+wrapper, retaining the selected-array-index filter. The template updates React
+state so the replacement survives responsive resizes. Native images continue to
+use direct attribute updates. Publish this support before seeding a template
+that uses the wrapper contract.