@base44-preview/vite-plugin 0.2.26-pr.43.e9195be → 0.2.27-pr.43.93e5e43

package/src/capabilities/inline-edit/dom-utils.ts

@@ -0,0 +1,48 @@
+const FOCUS_STYLE_ID = "visual-edit-focus-styles";
+
+const EDITABLE_TAGS = [
+  "div", "p", "h1", "h2", "h3", "h4", "h5", "h6",
+  "span", "li", "td", "a", "button", "label",
+];
+
+export const injectFocusOutlineCSS = () => {
+  if (document.getElementById(FOCUS_STYLE_ID)) return;
+
+  const style = document.createElement("style");
+  style.id = FOCUS_STYLE_ID;
+  style.textContent = `
+    [data-selected="true"][contenteditable="true"]:focus {
+      outline: none !important;
+    }
+  `;
+  document.head.appendChild(style);
+};
+
+export const removeFocusOutlineCSS = () => {
+  document.getElementById(FOCUS_STYLE_ID)?.remove();
+};
+
+export const selectText = (element: HTMLElement) => {
+  const range = document.createRange();
+  range.selectNodeContents(element);
+  const selection = window.getSelection();
+  selection?.removeAllRanges();
+  selection?.addRange(range);
+};
+
+export const isEditableTextElement = (element: Element): boolean => {
+  if (!(element instanceof HTMLElement)) return false;
+  if (!EDITABLE_TAGS.includes(element.tagName.toLowerCase())) return false;
+  if (!element.textContent?.trim()) return false;
+  if (element.querySelector("img, video, canvas, svg")) return false;
+  if (element.children?.length > 0) return false;
+  if (element.dataset.dynamicContent === "true") return false;
+  return true;
+};
+
+export const shouldEnterInlineEditingMode = (element: Element): boolean => {
+  if (!(element instanceof HTMLElement) || element.dataset.selected !== "true") {
+    return false;
+  }
+  return isEditableTextElement(element);
+};

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

@@ -0,0 +1,2 @@
+export { createInlineEditController } from "./controller.js";
+export type { InlineEditController, InlineEditHost } from "./types.js";

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

@@ -0,0 +1,30 @@
+export interface InlineEditHost {
+  findElementsById(id: string | null): Element[];
+  getSelectedElementId(): string | null;
+  getSelectedOverlays(): HTMLDivElement[];
+  positionOverlay(
+    overlay: HTMLDivElement,
+    element: Element,
+    isSelected?: boolean
+  ): void;
+  clearSelection(): void;
+  createSelectionOverlays(elements: Element[], elementId: string): void;
+}
+
+export interface ToggleInlineEditData {
+  dataSourceLocation: string;
+  inlineEditingMode: boolean;
+}
+
+export interface InlineEditController {
+  enabled: boolean;
+  isEditing(): boolean;
+  getCurrentElement(): HTMLElement | null;
+  canEdit(element: Element): boolean;
+  startEditing(element: HTMLElement): void;
+  stopEditing(): void;
+  markElementsSelected(elements: Element[]): void;
+  clearSelectedMarks(elementId: string | null): void;
+  handleToggleMessage(data: ToggleInlineEditData): void;
+  cleanup(): void;
+}

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

@@ -1,6 +1,7 @@
 import { findElementsById, updateElementClasses, updateElementAttribute, collectAllowedAttributes, ALLOWED_ATTRIBUTES, getElementSelectorId } 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";
 
 export function setupVisualEditAgent() {
   // State variables (replacing React useState/useRef)
@@ -12,6 +13,8 @@ export function setupVisualEditAgent() {
   let currentHighlightedElements: Element[] = [];
   let selectedElementId: string | null = null;
 
+  const REPOSITION_DELAY_MS = 50;
+
   // Create overlay element
   const createOverlay = (isSelected = false): HTMLDivElement => {
     const overlay = document.createElement("div");
@@ -69,6 +72,34 @@ export function setupVisualEditAgent() {
     }
   };
 
+  // --- Inline edit controller ---
+  const inlineEdit = createInlineEditController({
+    findElementsById,
+    getSelectedElementId: () => selectedElementId,
+    getSelectedOverlays: () => selectedOverlays,
+    positionOverlay,
+    clearSelection: () => {
+      inlineEdit.clearSelectedMarks(selectedElementId);
+      clearSelectedOverlays();
+      selectedElementId = null;
+    },
+    createSelectionOverlays: (elements, elementId) => {
+      elements.forEach((el) => {
+        const overlay = createOverlay(true);
+        document.body.appendChild(overlay);
+        selectedOverlays.push(overlay);
+        positionOverlay(overlay, el, true);
+      });
+      selectedElementId = elementId;
+    },
+  });
+
+  const clearSelection = () => {
+    inlineEdit.clearSelectedMarks(selectedElementId);
+    clearSelectedOverlays();
+    selectedElementId = null;
+  };
+
   // Clear hover overlays
   const clearHoverOverlays = () => {
     hoverOverlays.forEach((overlay) => {
@@ -152,7 +183,8 @@ export function setupVisualEditAgent() {
 
   // Handle mouse over event
   const handleMouseOver = (e: MouseEvent) => {
-    if (!isVisualEditMode || isPopoverDragging) return;
+    if (!isVisualEditMode || isPopoverDragging || inlineEdit.isEditing()) return;
+
 
     const target = e.target as Element;
 
@@ -221,6 +253,21 @@ export function setupVisualEditAgent() {
     // Let layer dropdown clicks pass through without interference
     if (target.closest(`[${LAYER_DROPDOWN_ATTR}]`)) return;
 
+    // Let clicks inside the editable element pass through to the browser
+    // so the user can reposition the cursor and select text naturally.
+    if (inlineEdit.enabled && target instanceof HTMLElement && target.contentEditable === "true") {
+      return;
+    }
+
+    // Clicking outside the editable element exits inline editing mode.
+    if (inlineEdit.isEditing()) {
+      e.preventDefault();
+      e.stopPropagation();
+      e.stopImmediatePropagation();
+      inlineEdit.stopEditing();
+      return;
+    }
+
     // Close dropdowns when clicking anywhere in iframe if a dropdown is open
     if (isDropdownOpen) {
       e.preventDefault();
@@ -249,14 +296,31 @@ export function setupVisualEditAgent() {
       return;
     }
 
+    const htmlElement = element as HTMLElement;
+    const visualSelectorId = getElementSelectorId(element);
+
+    const isAlreadySelected =
+      selectedElementId === visualSelectorId &&
+      htmlElement.dataset.selected === "true";
+
+    if (isAlreadySelected && inlineEdit.enabled && inlineEdit.canEdit(htmlElement)) {
+      inlineEdit.startEditing(htmlElement);
+      return;
+    }
+
+    inlineEdit.stopEditing();
+
+    if (inlineEdit.enabled) {
+      inlineEdit.markElementsSelected(findElementsById(visualSelectorId));
+    }
+
     const selectedOverlay = selectElement(element);
     layerController.attachToOverlay(selectedOverlay, element);
   };
 
-  // Clear the current selection
-  const clearSelection = () => {
-    clearSelectedOverlays();
-    selectedElementId = null;
+  const unselectElement = () => {
+    inlineEdit.stopEditing();
+    clearSelection();
   };
 
   const updateElementClassesAndReposition = (visualSelectorId: string, classes: string) => {
@@ -288,7 +352,7 @@ export function setupVisualEditAgent() {
           });
         }
       }
-    }, 50);
+    }, REPOSITION_DELAY_MS);
   };
 
   // Update element attribute by visual selector ID
@@ -311,7 +375,7 @@ export function setupVisualEditAgent() {
           }
         });
       }
-    }, 50);
+    }, REPOSITION_DELAY_MS);
   };
 
   // Update element content by visual selector ID
@@ -334,7 +398,7 @@ export function setupVisualEditAgent() {
           }
         });
       }
-    }, 50);
+    }, REPOSITION_DELAY_MS);
   };
 
   // --- Layer dropdown controller ---
@@ -356,12 +420,12 @@ export function setupVisualEditAgent() {
     isVisualEditMode = isEnabled;
 
     if (!isEnabled) {
+      inlineEdit.stopEditing();
+      clearSelection();
       layerController.cleanup();
       clearHoverOverlays();
-      clearSelectedOverlays();
 
       currentHighlightedElements = [];
-      selectedElementId = null;
       document.body.style.cursor = "default";
 
       document.removeEventListener("mouseover", handleMouseOver);
@@ -422,6 +486,9 @@ export function setupVisualEditAgent() {
     switch (message.type) {
       case "toggle-visual-edit-mode":
         toggleVisualEditMode(message.data.enabled);
+        if (message.data.specs?.newInlineEditEnabled !== undefined) {
+          inlineEdit.enabled = message.data.specs.newInlineEditEnabled;
+        }
         break;
 
       case "update-classes":
@@ -459,7 +526,7 @@ export function setupVisualEditAgent() {
         break;
 
       case "unselect-element":
-        clearSelection();
+        unselectElement();
         break;
 
       case "refresh-page":
@@ -537,6 +604,12 @@ export function setupVisualEditAgent() {
         }
         break;
 
+      case "toggle-inline-edit-mode":
+        if (message.data) {
+          inlineEdit.handleToggleMessage(message.data);
+        }
+        break;
+
       default:
         break;
     }
@@ -601,7 +674,7 @@ export function setupVisualEditAgent() {
     });
 
     if (needsUpdate) {
-      setTimeout(handleResize, 50);
+      setTimeout(handleResize, REPOSITION_DELAY_MS);
     }
   });
 

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

@@ -229,21 +229,12 @@ export class DataItemFieldProcessor {
 
     const idField = this.resolveIdFieldName(path);
 
-    // Simple identifier: {name} from ({ name, price }) => ...
-    // rootIdentifier IS the field value (a string), not an object with ._id/.id.
-    // We need to find the id field from sibling destructured params instead.
     if (rootIdentifier.name === fieldPath) {
       this.tryAddItemIdFromDestructuredParams(path, idField);
       return;
     }
 
-    // Member expression: {product.name} → product?.id or product?._id
-    const idExpr = this.types.optionalMemberExpression(
-      this.types.identifier(rootIdentifier.name),
-      this.types.identifier(idField),
-      false,
-      true
-    );
+    const idExpr = this.buildIdExpression(rootIdentifier.name, idField);
 
     const binding = path.scope.getBinding(rootIdentifier.name);
     if (!binding) {
@@ -264,12 +255,47 @@ export class DataItemFieldProcessor {
   }
 
   /**
-   * Walk up the JSX tree to find a key attribute that accesses .id or ._id,
-   * returning the actual field name used. Falls back to "_id".
+   * Build the ID expression for a given root object name.
+   * If a specific idField was resolved from a key attribute, generates root?.id (or root?._id).
+   * If unknown (cross-file component), generates root?.id || root?._id to cover both conventions.
+   */
+  private buildIdExpression(
+    rootName: string,
+    idField: string | null
+  ): t.Expression {
+    if (idField) {
+      return this.types.optionalMemberExpression(
+        this.types.identifier(rootName),
+        this.types.identifier(idField),
+        false,
+        true
+      );
+    }
+
+    return this.types.logicalExpression(
+      "||",
+      this.types.optionalMemberExpression(
+        this.types.identifier(rootName),
+        this.types.identifier("id"),
+        false,
+        true
+      ),
+      this.types.optionalMemberExpression(
+        this.types.identifier(rootName),
+        this.types.identifier("_id"),
+        false,
+        true
+      )
+    );
+  }
+
+  /**
+   * Walk up the JSX tree to find a key attribute that accesses .id or ._id.
+   * Returns null when no key is found (e.g. cross-file component receiving props).
    */
   private resolveIdFieldName(
     path: NodePath<t.JSXOpeningElement>
-  ): string {
+  ): string | null {
     let current: NodePath | null = path.parentPath;
     while (current) {
       if (current.isJSXElement()) {
@@ -279,7 +305,7 @@ export class DataItemFieldProcessor {
       }
       current = current.parentPath;
     }
-    return "_id";
+    return null;
   }
 
   private extractIdFieldFromKey(
@@ -312,7 +338,7 @@ export class DataItemFieldProcessor {
    */
   private tryAddItemIdFromDestructuredParams(
     path: NodePath<t.JSXOpeningElement>,
-    idField: string
+    idField: string | null
   ): void {
     const fn = path.getFunctionParent();
     if (!fn) return;
@@ -321,7 +347,6 @@ export class DataItemFieldProcessor {
     for (const param of Array.isArray(params) ? params : [params]) {
       if (!param.isObjectPattern()) continue;
 
-      // Check if the id field is already destructured
       for (const prop of param.get("properties")) {
         if (
           prop.isObjectProperty() &&
@@ -338,11 +363,11 @@ export class DataItemFieldProcessor {
         }
       }
 
-      // id field not destructured yet — inject it into the pattern
+      const fieldToInject = idField ?? "id";
       param.node.properties.push(
         this.types.objectProperty(
-          this.types.identifier(idField),
-          this.types.identifier(idField),
+          this.types.identifier(fieldToInject),
+          this.types.identifier(fieldToInject),
           false,
           true
         )
@@ -350,7 +375,7 @@ export class DataItemFieldProcessor {
       this.attributeUtils.addExpressionAttribute(
         path,
         DATA_COLLECTION_ITEM_ID,
-        this.types.identifier(idField)
+        this.types.identifier(fieldToInject)
       );
       return;
     }
@@ -359,7 +384,7 @@ export class DataItemFieldProcessor {
   private tryAddItemIdFromParentComponent(
     path: NodePath<t.JSXOpeningElement>,
     rootIdentifier: t.Identifier,
-    idField: string
+    idField: string | null
   ): void {
     let current: NodePath | null = path.parentPath;
     while (current) {
@@ -369,11 +394,9 @@ export class DataItemFieldProcessor {
         if (name && JSXUtils.isCustomComponent(name)) {
           const keyAttr = this.findKeyWithId(opening);
           if (keyAttr) {
-            const idExpr = this.types.optionalMemberExpression(
-              this.types.identifier(rootIdentifier.name),
-              this.types.identifier(idField),
-              false,
-              true
+            const idExpr = this.buildIdExpression(
+              rootIdentifier.name,
+              idField
             );
             this.attributeUtils.addExpressionAttribute(
               path,

package/src/processors/collection-tracing-utils.ts

@@ -189,6 +189,9 @@ export class CollectionTracingUtils {
     const directResult = this.checkDirectServiceCall(path);
     if (directResult) return directResult;
 
+    const useQueryResult = this.traceUseQueryCall(path);
+    if (useQueryResult) return useQueryResult;
+
     if (this.callUtils.isChainedArrayMethod(path.node)) {
       const callee = path.get("callee");
       if (callee.isMemberExpression()) {
@@ -200,6 +203,51 @@ export class CollectionTracingUtils {
     return null;
   }
 
+  /**
+   * Trace useQuery({ queryFn: () => base44.entities.X.list() }) patterns.
+   * Extracts the collection from the queryFn return expression.
+   */
+  private traceUseQueryCall(
+    path: NodePath<t.CallExpression>
+  ): CollectionInfo | null {
+    const callee = path.get("callee");
+    if (!callee.isIdentifier() || callee.node.name !== "useQuery") return null;
+
+    const args = path.get("arguments");
+    const configArg = args[0];
+    if (!configArg?.isObjectExpression()) return null;
+
+    for (const prop of configArg.get("properties")) {
+      if (!prop.isObjectProperty()) continue;
+      const key = prop.get("key");
+      if (!key.isIdentifier() || key.node.name !== "queryFn") continue;
+
+      const value = prop.get("value");
+
+      if (value.isArrowFunctionExpression() || value.isFunctionExpression()) {
+        const fnBody = value.get("body") as NodePath<t.Node>;
+        if (fnBody.isCallExpression()) {
+          return this.checkDirectServiceCall(fnBody as NodePath<t.CallExpression>);
+        }
+        if (fnBody.isBlockStatement()) {
+          let result: CollectionInfo | null = null;
+          fnBody.traverse({
+            ReturnStatement: (retPath: NodePath<t.ReturnStatement>) => {
+              if (result) return;
+              const arg = retPath.get("argument");
+              if (arg.isCallExpression()) {
+                result = this.checkDirectServiceCall(arg);
+              }
+            },
+          });
+          if (result) return result;
+        }
+      }
+    }
+
+    return null;
+  }
+
   private checkDirectServiceCall(
     path: NodePath<t.CallExpression>
   ): CollectionInfo | null {
@@ -219,6 +267,16 @@ export class CollectionTracingUtils {
       };
     }
 
+    const base44List = this.callUtils.isBase44EntityListCall(path.node);
+    if (base44List) {
+      return { id: base44List.collectionName, references: [] };
+    }
+
+    const base44Get = this.callUtils.isBase44EntityGetCall(path.node);
+    if (base44Get) {
+      return { id: base44Get.collectionName, references: [] };
+    }
+
     return null;
   }
 
@@ -261,8 +319,12 @@ export class CollectionTracingUtils {
     const prop = pattern.node.properties.find(
       (p) =>
         this.types.isObjectProperty(p) &&
-        this.types.isIdentifier(p.value) &&
-        p.value.name === variableName
+        (
+          (this.types.isIdentifier(p.value) && p.value.name === variableName) ||
+          (this.types.isAssignmentPattern(p.value) &&
+            this.types.isIdentifier(p.value.left) &&
+            p.value.left.name === variableName)
+        )
     );
 
     if (!prop || !this.types.isObjectProperty(prop)) return null;
@@ -365,6 +427,10 @@ export class CollectionTracingUtils {
       },
     });
 
+    if (!result) {
+      return { id: paramName, references: [] };
+    }
+
     return result;
   }
 
@@ -427,6 +493,11 @@ export class CollectionTracingUtils {
             id: info.collectionName,
             references: info.multiRefFields,
           };
+          return;
+        }
+        const base44Get = this.callUtils.isBase44EntityGetCall(callPath.node);
+        if (base44Get) {
+          result = { id: base44Get.collectionName, references: [] };
         }
       },
     });

package/src/processors/shared-utils.ts

@@ -530,6 +530,81 @@ export class CallExpressionUtils {
     return chainMethods.some((m) => this.isArrayMethod(node, m));
   }
 
+  /**
+   * Detect base44.entities.EntityName.list() or .getAll() patterns.
+   * Returns the entity name as the collection name.
+   */
+  isBase44EntityListCall(
+    node: t.CallExpression
+  ): { collectionName: string } | null {
+    const callee = node.callee;
+    if (!this.types.isMemberExpression(callee)) return null;
+
+    const method = callee.property;
+    if (
+      !this.types.isIdentifier(method) ||
+      (method.name !== "list" && method.name !== "getAll")
+    ) {
+      return null;
+    }
+
+    const entityAccess = callee.object;
+    if (!this.types.isMemberExpression(entityAccess)) return null;
+
+    const entityName = entityAccess.property;
+    if (!this.types.isIdentifier(entityName)) return null;
+
+    const entitiesAccess = entityAccess.object;
+    if (!this.types.isMemberExpression(entitiesAccess)) return null;
+
+    const entitiesProp = entitiesAccess.property;
+    if (
+      !this.types.isIdentifier(entitiesProp) ||
+      entitiesProp.name !== "entities"
+    ) {
+      return null;
+    }
+
+    return { collectionName: entityName.name };
+  }
+
+  /**
+   * Detect base44.entities.EntityName.getById() or .get() patterns.
+   */
+  isBase44EntityGetCall(
+    node: t.CallExpression
+  ): { collectionName: string } | null {
+    const callee = node.callee;
+    if (!this.types.isMemberExpression(callee)) return null;
+
+    const method = callee.property;
+    if (
+      !this.types.isIdentifier(method) ||
+      (method.name !== "get" && method.name !== "getById")
+    ) {
+      return null;
+    }
+
+    const entityAccess = callee.object;
+    if (!this.types.isMemberExpression(entityAccess)) return null;
+
+    const entityName = entityAccess.property;
+    if (!this.types.isIdentifier(entityName)) return null;
+
+    const entitiesAccess = entityAccess.object;
+    if (!this.types.isMemberExpression(entitiesAccess)) return null;
+
+    const entitiesProp = entitiesAccess.property;
+    if (
+      !this.types.isIdentifier(entitiesProp) ||
+      entitiesProp.name !== "entities"
+    ) {
+      return null;
+    }
+
+    return { collectionName: entityName.name };
+  }
+
   getCallbackArgument(
     callExpr: t.CallExpression
   ): t.ArrowFunctionExpression | t.FunctionExpression | null {