@base44/vite-plugin 0.2.26 → 0.2.28

package/dist/capabilities/inline-edit/controller.d.ts

@@ -0,0 +1,3 @@
+import type { InlineEditHost, InlineEditController } from "./types.js";
+export declare function createInlineEditController(host: InlineEditHost): InlineEditController;
+//# sourceMappingURL=controller.d.ts.map

package/dist/capabilities/inline-edit/controller.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"controller.d.ts","sourceRoot":"","sources":["../../../src/capabilities/inline-edit/controller.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,oBAAoB,EAAE,MAAM,YAAY,CAAC;AAWvE,wBAAgB,0BAA0B,CACxC,IAAI,EAAE,cAAc,GACnB,oBAAoB,CA6OtB"}

package/dist/capabilities/inline-edit/controller.js

@@ -0,0 +1,200 @@
+import { injectFocusOutlineCSS, removeFocusOutlineCSS, selectText, shouldEnterInlineEditingMode, isStaticArrayTextElement, } from "./dom-utils.js";
+const DEBOUNCE_MS = 500;
+export function createInlineEditController(host) {
+    let currentEditingElement = null;
+    let debouncedSendTimeout = null;
+    let enabled = false;
+    const listenerAbortControllers = new WeakMap();
+    // --- Private helpers ---
+    const repositionOverlays = () => {
+        const selectedId = host.getSelectedElementId();
+        if (!selectedId)
+            return;
+        const elements = host.findElementsById(selectedId);
+        const overlays = host.getSelectedOverlays();
+        overlays.forEach((overlay, i) => {
+            if (i < elements.length && elements[i]) {
+                host.positionOverlay(overlay, elements[i]);
+            }
+        });
+    };
+    const reportEdit = (element) => {
+        const originalContent = element.dataset.originalTextContent;
+        const newContent = element.textContent;
+        const svgElement = element;
+        const rect = element.getBoundingClientRect();
+        const message = {
+            type: "inline-edit",
+            elementInfo: {
+                tagName: element.tagName,
+                classes: svgElement.className?.baseVal ||
+                    element.className ||
+                    "",
+                visualSelectorId: host.getSelectedElementId(),
+                content: newContent,
+                dataSourceLocation: element.dataset.sourceLocation,
+                isDynamicContent: element.dataset.dynamicContent === "true",
+                linenumber: element.dataset.linenumber,
+                filename: element.dataset.filename,
+                position: {
+                    top: rect.top,
+                    left: rect.left,
+                    right: rect.right,
+                    bottom: rect.bottom,
+                    width: rect.width,
+                    height: rect.height,
+                    centerX: rect.left + rect.width / 2,
+                    centerY: rect.top + rect.height / 2,
+                },
+            },
+            originalContent,
+            newContent,
+        };
+        if (isStaticArrayTextElement(element)) {
+            message.arrIndex = element.dataset.arrIndex;
+            message.arrVariableName = element.dataset.arrVariableName;
+            message.arrField = element.dataset.arrField;
+        }
+        window.parent.postMessage(message, "*");
+        element.dataset.originalTextContent = newContent || "";
+    };
+    const debouncedReport = (element) => {
+        if (debouncedSendTimeout)
+            clearTimeout(debouncedSendTimeout);
+        debouncedSendTimeout = setTimeout(() => reportEdit(element), DEBOUNCE_MS);
+    };
+    const onTextInput = (element) => {
+        repositionOverlays();
+        debouncedReport(element);
+    };
+    const handleInputEvent = function () {
+        onTextInput(this);
+    };
+    const makeEditable = (element) => {
+        injectFocusOutlineCSS();
+        element.dataset.originalTextContent = element.textContent || "";
+        element.dataset.originalCursor = element.style.cursor;
+        element.contentEditable = "true";
+        const abortController = new AbortController();
+        listenerAbortControllers.set(element, abortController);
+        element.addEventListener("input", handleInputEvent, {
+            signal: abortController.signal,
+        });
+        element.style.cursor = "text";
+        selectText(element);
+        setTimeout(() => {
+            if (element.isConnected) {
+                element.focus();
+            }
+        }, 0);
+    };
+    const makeNonEditable = (element) => {
+        const abortController = listenerAbortControllers.get(element);
+        if (abortController) {
+            abortController.abort();
+            listenerAbortControllers.delete(element);
+        }
+        if (!element.isConnected)
+            return;
+        removeFocusOutlineCSS();
+        element.contentEditable = "false";
+        delete element.dataset.originalTextContent;
+        if (element.dataset.originalCursor !== undefined) {
+            element.style.cursor = element.dataset.originalCursor;
+            delete element.dataset.originalCursor;
+        }
+    };
+    // --- Public API ---
+    return {
+        get enabled() {
+            return enabled;
+        },
+        set enabled(value) {
+            enabled = value;
+        },
+        isEditing() {
+            return currentEditingElement !== null;
+        },
+        getCurrentElement() {
+            return currentEditingElement;
+        },
+        canEdit(element) {
+            return shouldEnterInlineEditingMode(element);
+        },
+        startEditing(element) {
+            currentEditingElement = element;
+            host.getSelectedOverlays().forEach((o) => {
+                o.style.display = "none";
+            });
+            makeEditable(element);
+            window.parent.postMessage({
+                type: "content-editing-started",
+                visualSelectorId: host.getSelectedElementId(),
+            }, "*");
+        },
+        stopEditing() {
+            if (!currentEditingElement)
+                return;
+            if (debouncedSendTimeout) {
+                clearTimeout(debouncedSendTimeout);
+                debouncedSendTimeout = null;
+            }
+            const element = currentEditingElement;
+            makeNonEditable(element);
+            host.getSelectedOverlays().forEach((o) => {
+                o.style.display = "";
+            });
+            repositionOverlays();
+            window.parent.postMessage({
+                type: "content-editing-ended",
+                visualSelectorId: host.getSelectedElementId(),
+            }, "*");
+            currentEditingElement = null;
+        },
+        markElementsSelected(elements) {
+            elements.forEach((el) => {
+                if (el instanceof HTMLElement) {
+                    el.dataset.selected = "true";
+                }
+            });
+        },
+        clearSelectedMarks(elementId) {
+            if (!elementId)
+                return;
+            host.findElementsById(elementId).forEach((el) => {
+                if (el instanceof HTMLElement) {
+                    delete el.dataset.selected;
+                }
+            });
+        },
+        handleToggleMessage(data) {
+            if (!enabled)
+                return;
+            const elements = host.findElementsById(data.dataSourceLocation);
+            if (elements.length === 0 || !(elements[0] instanceof HTMLElement))
+                return;
+            const element = elements[0];
+            if (data.inlineEditingMode) {
+                if (!shouldEnterInlineEditingMode(element))
+                    return;
+                // Select the element first if not already selected
+                if (host.getSelectedElementId() !== data.dataSourceLocation) {
+                    this.stopEditing();
+                    host.clearSelection();
+                    this.markElementsSelected(elements);
+                    host.createSelectionOverlays(elements, data.dataSourceLocation);
+                }
+                this.startEditing(element);
+            }
+            else {
+                if (currentEditingElement === element) {
+                    this.stopEditing();
+                }
+            }
+        },
+        cleanup() {
+            this.stopEditing();
+        },
+    };
+}
+//# sourceMappingURL=controller.js.map

package/dist/capabilities/inline-edit/controller.js.map

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

package/dist/capabilities/inline-edit/dom-utils.d.ts

@@ -0,0 +1,7 @@
+export declare const isStaticArrayTextElement: (element: HTMLElement) => boolean;
+export declare const injectFocusOutlineCSS: () => void;
+export declare const removeFocusOutlineCSS: () => void;
+export declare const selectText: (element: HTMLElement) => void;
+export declare const isEditableTextElement: (element: Element) => boolean;
+export declare const shouldEnterInlineEditingMode: (element: Element) => boolean;
+//# sourceMappingURL=dom-utils.d.ts.map

package/dist/capabilities/inline-edit/dom-utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dom-utils.d.ts","sourceRoot":"","sources":["../../../src/capabilities/inline-edit/dom-utils.ts"],"names":[],"mappings":"AAOA,eAAO,MAAM,wBAAwB,GAAI,SAAS,WAAW,KAAG,OAE/D,CAAC;AAUF,eAAO,MAAM,qBAAqB,YAWjC,CAAC;AAEF,eAAO,MAAM,qBAAqB,YAEjC,CAAC;AAEF,eAAO,MAAM,UAAU,GAAI,SAAS,WAAW,SAM9C,CAAC;AAEF,eAAO,MAAM,qBAAqB,GAAI,SAAS,OAAO,KAAG,OAMxD,CAAC;AAEF,eAAO,MAAM,4BAA4B,GAAI,SAAS,OAAO,KAAG,OAK/D,CAAC"}

package/dist/capabilities/inline-edit/dom-utils.js

@@ -0,0 +1,59 @@
+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 isStaticArrayTextElement = (element) => {
+    return !!element.dataset.arrField;
+};
+const passesStructuralChecks = (element) => {
+    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;
+    return true;
+};
+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) => {
+    const range = document.createRange();
+    range.selectNodeContents(element);
+    const selection = window.getSelection();
+    selection?.removeAllRanges();
+    selection?.addRange(range);
+};
+export const isEditableTextElement = (element) => {
+    if (!(element instanceof HTMLElement))
+        return false;
+    if (!passesStructuralChecks(element))
+        return false;
+    if (isStaticArrayTextElement(element))
+        return true;
+    if (element.dataset.dynamicContent === "true")
+        return false;
+    return true;
+};
+export const shouldEnterInlineEditingMode = (element) => {
+    if (!(element instanceof HTMLElement) || element.dataset.selected !== "true") {
+        return false;
+    }
+    return isEditableTextElement(element);
+};
+//# sourceMappingURL=dom-utils.js.map

package/dist/capabilities/inline-edit/dom-utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dom-utils.js","sourceRoot":"","sources":["../../../src/capabilities/inline-edit/dom-utils.ts"],"names":[],"mappings":"AAAA,MAAM,cAAc,GAAG,0BAA0B,CAAC;AAElD,MAAM,aAAa,GAAG;IACpB,KAAK,EAAE,GAAG,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI;IAC9C,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,GAAG,EAAE,QAAQ,EAAE,OAAO;CAC3C,CAAC;AAEF,MAAM,CAAC,MAAM,wBAAwB,GAAG,CAAC,OAAoB,EAAW,EAAE;IACxE,OAAO,CAAC,CAAC,OAAO,CAAC,OAAO,CAAC,QAAQ,CAAC;AACpC,CAAC,CAAC;AAEF,MAAM,sBAAsB,GAAG,CAAC,OAAoB,EAAW,EAAE;IAC/D,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,OAAO,CAAC,OAAO,CAAC,WAAW,EAAE,CAAC;QAAE,OAAO,KAAK,CAAC;IACzE,IAAI,CAAC,OAAO,CAAC,WAAW,EAAE,IAAI,EAAE;QAAE,OAAO,KAAK,CAAC;IAC/C,IAAI,OAAO,CAAC,aAAa,CAAC,yBAAyB,CAAC;QAAE,OAAO,KAAK,CAAC;IACnE,IAAI,OAAO,CAAC,QAAQ,EAAE,MAAM,GAAG,CAAC;QAAE,OAAO,KAAK,CAAC;IAC/C,OAAO,IAAI,CAAC;AACd,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,qBAAqB,GAAG,GAAG,EAAE;IACxC,IAAI,QAAQ,CAAC,cAAc,CAAC,cAAc,CAAC;QAAE,OAAO;IAEpD,MAAM,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;IAC9C,KAAK,CAAC,EAAE,GAAG,cAAc,CAAC;IAC1B,KAAK,CAAC,WAAW,GAAG;;;;GAInB,CAAC;IACF,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AACnC,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,qBAAqB,GAAG,GAAG,EAAE;IACxC,QAAQ,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,MAAM,EAAE,CAAC;AACpD,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,OAAoB,EAAE,EAAE;IACjD,MAAM,KAAK,GAAG,QAAQ,CAAC,WAAW,EAAE,CAAC;IACrC,KAAK,CAAC,kBAAkB,CAAC,OAAO,CAAC,CAAC;IAClC,MAAM,SAAS,GAAG,MAAM,CAAC,YAAY,EAAE,CAAC;IACxC,SAAS,EAAE,eAAe,EAAE,CAAC;IAC7B,SAAS,EAAE,QAAQ,CAAC,KAAK,CAAC,CAAC;AAC7B,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,qBAAqB,GAAG,CAAC,OAAgB,EAAW,EAAE;IACjE,IAAI,CAAC,CAAC,OAAO,YAAY,WAAW,CAAC;QAAE,OAAO,KAAK,CAAC;IACpD,IAAI,CAAC,sBAAsB,CAAC,OAAO,CAAC;QAAE,OAAO,KAAK,CAAC;IACnD,IAAI,wBAAwB,CAAC,OAAO,CAAC;QAAE,OAAO,IAAI,CAAC;IACnD,IAAI,OAAO,CAAC,OAAO,CAAC,cAAc,KAAK,MAAM;QAAE,OAAO,KAAK,CAAC;IAC5D,OAAO,IAAI,CAAC;AACd,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,4BAA4B,GAAG,CAAC,OAAgB,EAAW,EAAE;IACxE,IAAI,CAAC,CAAC,OAAO,YAAY,WAAW,CAAC,IAAI,OAAO,CAAC,OAAO,CAAC,QAAQ,KAAK,MAAM,EAAE,CAAC;QAC7E,OAAO,KAAK,CAAC;IACf,CAAC;IACD,OAAO,qBAAqB,CAAC,OAAO,CAAC,CAAC;AACxC,CAAC,CAAC"}

package/dist/capabilities/inline-edit/index.d.ts

@@ -0,0 +1,3 @@
+export { createInlineEditController } from "./controller.js";
+export type { InlineEditController, InlineEditHost } from "./types.js";
+//# sourceMappingURL=index.d.ts.map

package/dist/capabilities/inline-edit/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/capabilities/inline-edit/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,0BAA0B,EAAE,MAAM,iBAAiB,CAAC;AAC7D,YAAY,EAAE,oBAAoB,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC"}

package/dist/capabilities/inline-edit/index.js

@@ -0,0 +1,2 @@
+export { createInlineEditController } from "./controller.js";
+//# sourceMappingURL=index.js.map

package/dist/capabilities/inline-edit/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/capabilities/inline-edit/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,0BAA0B,EAAE,MAAM,iBAAiB,CAAC"}

package/dist/capabilities/inline-edit/types.d.ts

@@ -0,0 +1,25 @@
+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;
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/capabilities/inline-edit/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/capabilities/inline-edit/types.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,cAAc;IAC7B,gBAAgB,CAAC,EAAE,EAAE,MAAM,GAAG,IAAI,GAAG,OAAO,EAAE,CAAC;IAC/C,oBAAoB,IAAI,MAAM,GAAG,IAAI,CAAC;IACtC,mBAAmB,IAAI,cAAc,EAAE,CAAC;IACxC,eAAe,CACb,OAAO,EAAE,cAAc,EACvB,OAAO,EAAE,OAAO,EAChB,UAAU,CAAC,EAAE,OAAO,GACnB,IAAI,CAAC;IACR,cAAc,IAAI,IAAI,CAAC;IACvB,uBAAuB,CAAC,QAAQ,EAAE,OAAO,EAAE,EAAE,SAAS,EAAE,MAAM,GAAG,IAAI,CAAC;CACvE;AAED,MAAM,WAAW,oBAAoB;IACnC,kBAAkB,EAAE,MAAM,CAAC;IAC3B,iBAAiB,EAAE,OAAO,CAAC;CAC5B;AAED,MAAM,WAAW,oBAAoB;IACnC,OAAO,EAAE,OAAO,CAAC;IACjB,SAAS,IAAI,OAAO,CAAC;IACrB,iBAAiB,IAAI,WAAW,GAAG,IAAI,CAAC;IACxC,OAAO,CAAC,OAAO,EAAE,OAAO,GAAG,OAAO,CAAC;IACnC,YAAY,CAAC,OAAO,EAAE,WAAW,GAAG,IAAI,CAAC;IACzC,WAAW,IAAI,IAAI,CAAC;IACpB,oBAAoB,CAAC,QAAQ,EAAE,OAAO,EAAE,GAAG,IAAI,CAAC;IAChD,kBAAkB,CAAC,SAAS,EAAE,MAAM,GAAG,IAAI,GAAG,IAAI,CAAC;IACnD,mBAAmB,CAAC,IAAI,EAAE,oBAAoB,GAAG,IAAI,CAAC;IACtD,OAAO,IAAI,IAAI,CAAC;CACjB"}

package/dist/capabilities/inline-edit/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/dist/capabilities/inline-edit/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/capabilities/inline-edit/types.ts"],"names":[],"mappings":""}

package/dist/injections/visual-edit-agent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"visual-edit-agent.d.ts","sourceRoot":"","sources":["../../src/injections/visual-edit-agent.ts"],"names":[],"mappings":"AAIA,wBAAgB,oBAAoB,SA4mBnC"}
+{"version":3,"file":"visual-edit-agent.d.ts","sourceRoot":"","sources":["../../src/injections/visual-edit-agent.ts"],"names":[],"mappings":"AAKA,wBAAgB,oBAAoB,SAosBnC"}

package/dist/injections/visual-edit-agent.js

@@ -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)
     let isVisualEditMode = false;
@@ -10,6 +11,7 @@ export function setupVisualEditAgent() {
     let selectedOverlays = [];
     let currentHighlightedElements = [];
     let selectedElementId = null;
+    const REPOSITION_DELAY_MS = 50;
     // Create overlay element
     const createOverlay = (isSelected = false) => {
         const overlay = document.createElement("div");
@@ -57,6 +59,32 @@ export function setupVisualEditAgent() {
             overlay.appendChild(label);
         }
     };
+    // --- 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) => {
@@ -81,6 +109,11 @@ export function setupVisualEditAgent() {
         const rect = element.getBoundingClientRect();
         const svgElement = element;
         const isTextElement = TEXT_TAGS.includes(element.tagName?.toLowerCase());
+        const arrEl = htmlElement.closest("[data-arr-variable-name]");
+        const staticArrayName = arrEl?.dataset?.arrVariableName || null;
+        const rawIdx = arrEl?.dataset?.arrIndex;
+        const staticArrayIndex = rawIdx != null ? parseInt(rawIdx, 10) : null;
+        const staticArrayField = htmlElement.dataset?.arrField || null;
         window.parent.postMessage({
             type: "element-selected",
             tagName: element.tagName,
@@ -105,6 +138,9 @@ export function setupVisualEditAgent() {
             },
             attributes: collectAllowedAttributes(element, ALLOWED_ATTRIBUTES),
             isTextElement,
+            staticArrayName,
+            staticArrayIndex,
+            staticArrayField,
         }, "*");
     };
     // Select an element: create overlays, update state, notify parent
@@ -129,7 +165,7 @@ export function setupVisualEditAgent() {
     };
     // Handle mouse over event
     const handleMouseOver = (e) => {
-        if (!isVisualEditMode || isPopoverDragging)
+        if (!isVisualEditMode || isPopoverDragging || inlineEdit.isEditing())
             return;
         const target = e.target;
         // Prevent hover effects when a dropdown is open
@@ -184,6 +220,19 @@ 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();
@@ -205,13 +254,24 @@ export function setupVisualEditAgent() {
         if (!element) {
             return;
         }
+        const htmlElement = element;
+        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, classes) => {
         const elements = findElementsById(visualSelectorId);
@@ -240,7 +300,7 @@ export function setupVisualEditAgent() {
                     });
                 }
             }
-        }, 50);
+        }, REPOSITION_DELAY_MS);
     };
     // Update element attribute by visual selector ID
     const updateElementAttributeAndReposition = (visualSelectorId, attribute, value) => {
@@ -257,14 +317,16 @@ export function setupVisualEditAgent() {
                     }
                 });
             }
-        }, 50);
+        }, REPOSITION_DELAY_MS);
     };
-    // Update element content by visual selector ID
-    const updateElementContent = (visualSelectorId, content) => {
-        const elements = findElementsById(visualSelectorId);
+    const updateElementContent = (visualSelectorId, content, arrIndex) => {
+        let elements = findElementsById(visualSelectorId);
         if (elements.length === 0) {
             return;
         }
+        if (arrIndex != null) {
+            elements = elements.filter((el) => el.dataset.arrIndex === String(arrIndex));
+        }
         elements.forEach((element) => {
             element.innerText = content;
         });
@@ -276,7 +338,7 @@ export function setupVisualEditAgent() {
                     }
                 });
             }
-        }, 50);
+        }, REPOSITION_DELAY_MS);
     };
     // --- Layer dropdown controller ---
     const layerController = createLayerController({
@@ -295,11 +357,11 @@ export function setupVisualEditAgent() {
     const toggleVisualEditMode = (isEnabled) => {
         isVisualEditMode = isEnabled;
         if (!isEnabled) {
+            inlineEdit.stopEditing();
+            clearSelection();
             layerController.cleanup();
             clearHoverOverlays();
-            clearSelectedOverlays();
             currentHighlightedElements = [];
-            selectedElementId = null;
             document.body.style.cursor = "default";
             document.removeEventListener("mouseover", handleMouseOver);
             document.removeEventListener("mouseout", handleMouseOut);
@@ -350,6 +412,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":
                 if (message.data && message.data.classes !== undefined) {
@@ -371,14 +436,14 @@ export function setupVisualEditAgent() {
                 }
                 break;
             case "unselect-element":
-                clearSelection();
+                unselectElement();
                 break;
             case "refresh-page":
                 window.location.reload();
                 break;
             case "update-content":
                 if (message.data && message.data.content !== undefined) {
-                    updateElementContent(message.data.visualSelectorId, message.data.content);
+                    updateElementContent(message.data.visualSelectorId, message.data.content, message.data.arrIndex);
                 }
                 else {
                     console.warn("[VisualEditAgent] Invalid update-content message:", message);
@@ -431,6 +496,11 @@ export function setupVisualEditAgent() {
                     }
                 }
                 break;
+            case "toggle-inline-edit-mode":
+                if (message.data) {
+                    inlineEdit.handleToggleMessage(message.data);
+                }
+                break;
             default:
                 break;
         }
@@ -485,7 +555,7 @@ export function setupVisualEditAgent() {
             return isLayoutChange && hasVisualId(mutation.target);
         });
         if (needsUpdate) {
-            setTimeout(handleResize, 50);
+            setTimeout(handleResize, REPOSITION_DELAY_MS);
         }
     });
     // Set up event listeners