@salesforce/webapp-experimental 1.47.0 → 1.48.1

package/dist/design/interactions/communicationManager.d.ts

@@ -0,0 +1,25 @@
+/**
+ * Copyright (c) 2026, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
+export declare class CommunicationManager {
+    constructor();
+    /**
+     * Notify the extension about a selected component
+     * @param element - The selected element
+     */
+    notifyComponentSelected(element: HTMLElement): void;
+    /**
+     * Notify the extension about a text change
+     * @param element - The element that changed
+     * @param originalText - The original text
+     * @param newText - The new text
+     */
+    notifyTextChange(element: HTMLElement, originalText: string, newText: string): void;
+    /**
+     * Notify the parent window that interactions initialization is complete
+     */
+    notifyInitializationComplete(): void;
+}
+//# sourceMappingURL=communicationManager.d.ts.map

package/dist/design/interactions/communicationManager.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"communicationManager.d.ts","sourceRoot":"","sources":["../../../src/design/interactions/communicationManager.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAkBH,qBAAa,oBAAoB;;IAKhC;;;OAGG;IACH,uBAAuB,CAAC,OAAO,EAAE,WAAW,GAAG,IAAI;IAwDnD;;;;;OAKG;IACH,gBAAgB,CAAC,OAAO,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,GAAG,IAAI;IA2BnF;;OAEG;IACH,4BAA4B,IAAI,IAAI;CAepC"}

package/dist/design/interactions/communicationManager.js

@@ -0,0 +1,112 @@
+/**
+ * Copyright (c) 2026, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
+/**
+ * Communication Manager Module
+ * Handles communication with the parent window (VS Code extension)
+ */
+import { getElementStyles } from "./utils/cssUtils.js";
+import { getLabelFromSource, getSourceFromDataAttributes } from "./utils/sourceUtils.js";
+export class CommunicationManager {
+    constructor() {
+        // CommunicationManager has no required initialization
+    }
+    /**
+     * Notify the extension about a selected component
+     * @param element - The selected element
+     */
+    notifyComponentSelected(element) {
+        const label = getLabelFromSource(element);
+        // Temporarily remove design-mode-selected class to get original styles
+        const wasSelected = element.classList.contains("design-mode-selected");
+        if (wasSelected) {
+            element.classList.remove("design-mode-selected");
+        }
+        const styles = getElementStyles(element);
+        // Restore design-mode-selected class if it was present
+        if (wasSelected) {
+            element.classList.add("design-mode-selected");
+        }
+        // Source location metadata injected at compile time (babel-plugin-enhanced-locator)
+        const debugSource = getSourceFromDataAttributes(element);
+        // Send message to parent window
+        try {
+            if (window.parent !== window) {
+                window.parent.postMessage({
+                    type: "component-selected",
+                    component: {
+                        name: label,
+                        element: {
+                            tagName: element.tagName,
+                            classList: Array.from(element.classList),
+                            id: element.id || "",
+                        },
+                        styles: {
+                            ...styles,
+                        },
+                        debugSource: debugSource,
+                    },
+                }, "*");
+            }
+        }
+        catch (error) {
+            console.log("Could not notify extension:", error);
+        }
+        // Store in global for polling fallback
+        window.selectedComponentInfo =
+            {
+                name: label,
+                element: element,
+                classList: Array.from(element.classList),
+                id: element.id || "no-id",
+                tagName: element.tagName,
+            };
+    }
+    /**
+     * Notify the extension about a text change
+     * @param element - The element that changed
+     * @param originalText - The original text
+     * @param newText - The new text
+     */
+    notifyTextChange(element, originalText, newText) {
+        const label = getLabelFromSource(element);
+        try {
+            if (window.parent !== window) {
+                window.parent.postMessage({
+                    type: "text-changed",
+                    change: {
+                        component: { name: label },
+                        element: {
+                            tagName: element.tagName,
+                            classList: Array.from(element.classList),
+                            id: element.id || "",
+                            originalText: originalText,
+                            newText: newText,
+                        },
+                    },
+                }, "*");
+            }
+        }
+        catch (error) {
+            console.log("Could not notify extension about text change:", error);
+        }
+    }
+    /**
+     * Notify the parent window that interactions initialization is complete
+     */
+    notifyInitializationComplete() {
+        try {
+            if (typeof window !== "undefined" && window.parent && window.parent !== window) {
+                window.parent.postMessage({
+                    type: "interactions-initialized",
+                }, "*");
+            }
+        }
+        catch (error) {
+            const err = error;
+            console.warn("Could not send initialization message to parent:", err.message);
+        }
+    }
+}

package/dist/design/interactions/componentMatcher.d.ts

@@ -0,0 +1,37 @@
+/**
+ * Copyright (c) 2026, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
+/**
+ * Component Matcher Module
+ * Handles mapping DOM elements to source-locatable elements (data-source-*).
+ */
+export declare class ComponentMatcher {
+    /**
+     * Check whether an element contains compile-time source metadata attributes.
+     * @param element - The element to check
+     * @returns True if the data-source-file attribute is present
+     */
+    hasSourceMetadata(element: HTMLElement | null | undefined): boolean;
+    /**
+     * Checks if a label represents a component name (not a fallback like tag name, ID, or text content)
+     * @param label - The label to check
+     * @param tagName - The element's tag name (lowercase)
+     * @returns True if the label is a component name
+     */
+    isComponentNameLabel(label: string, tagName: string): boolean;
+    /**
+     * Check if an element is highlightable.
+     * @param element - The element to check
+     * @returns True if the element should be highlighted
+     */
+    isHighlightableElement(element: HTMLElement | null | undefined): boolean;
+    /**
+     * Find the nearest highlightable element by walking up the DOM tree
+     * @param target - The target element
+     * @returns The highlightable element or null
+     */
+    findHighlightableElement(target: HTMLElement | null | undefined): HTMLElement | null;
+}
+//# sourceMappingURL=componentMatcher.d.ts.map

package/dist/design/interactions/componentMatcher.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"componentMatcher.d.ts","sourceRoot":"","sources":["../../../src/design/interactions/componentMatcher.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH;;;GAGG;AAEH,qBAAa,gBAAgB;IAC5B;;;;OAIG;IACH,iBAAiB,CAAC,OAAO,EAAE,WAAW,GAAG,IAAI,GAAG,SAAS,GAAG,OAAO;IAOnE;;;;;OAKG;IACH,oBAAoB,CAAC,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,GAAG,OAAO;IAM7D;;;;OAIG;IACH,sBAAsB,CAAC,OAAO,EAAE,WAAW,GAAG,IAAI,GAAG,SAAS,GAAG,OAAO;IAOxE;;;;OAIG;IACH,wBAAwB,CAAC,MAAM,EAAE,WAAW,GAAG,IAAI,GAAG,SAAS,GAAG,WAAW,GAAG,IAAI;CA0BpF"}

package/dist/design/interactions/componentMatcher.js

@@ -0,0 +1,68 @@
+/**
+ * Copyright (c) 2026, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
+/**
+ * Component Matcher Module
+ * Handles mapping DOM elements to source-locatable elements (data-source-*).
+ */
+export class ComponentMatcher {
+    /**
+     * Check whether an element contains compile-time source metadata attributes.
+     * @param element - The element to check
+     * @returns True if the data-source-file attribute is present
+     */
+    hasSourceMetadata(element) {
+        if (!element) {
+            return false;
+        }
+        return element.hasAttribute("data-source-file");
+    }
+    /**
+     * Checks if a label represents a component name (not a fallback like tag name, ID, or text content)
+     * @param label - The label to check
+     * @param tagName - The element's tag name (lowercase)
+     * @returns True if the label is a component name
+     */
+    isComponentNameLabel(label, tagName) {
+        return (label !== tagName && !label.includes("#") && !label.includes("(") && !label.includes('"'));
+    }
+    /**
+     * Check if an element is highlightable.
+     * @param element - The element to check
+     * @returns True if the element should be highlighted
+     */
+    isHighlightableElement(element) {
+        if (!element || element === document.body || element === document.documentElement) {
+            return false;
+        }
+        return this.hasSourceMetadata(element);
+    }
+    /**
+     * Find the nearest highlightable element by walking up the DOM tree
+     * @param target - The target element
+     * @returns The highlightable element or null
+     */
+    findHighlightableElement(target) {
+        if (!target || target === document.body || target === document.documentElement) {
+            return null;
+        }
+        // Fast path: use closest() if supported.
+        const closest = typeof target.closest === "function"
+            ? target.closest("[data-source-file]")
+            : null;
+        if (closest && closest !== document.body && closest !== document.documentElement) {
+            return closest;
+        }
+        // Fallback: manual walk.
+        let current = target;
+        while (current && current !== document.body && current !== document.documentElement) {
+            if (this.isHighlightableElement(current)) {
+                return current;
+            }
+            current = current.parentElement;
+        }
+        return null;
+    }
+}

package/dist/design/interactions/editableManager.d.ts

@@ -0,0 +1,51 @@
+/**
+ * Copyright (c) 2026, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
+/**
+ * Editable Manager Module
+ * Handles making elements editable and notifying the extension of text changes.
+ * History/undo for style changes is owned by the design property panel (host); this module does not use history.
+ */
+interface CommunicationManagerLike {
+    notifyTextChange: (element: HTMLElement, originalText: string, newText: string) => void;
+}
+export declare class EditableManager {
+    private communicationManager?;
+    private textTags;
+    private boundHandleBlur;
+    private boundHandleKeydown;
+    constructor(communicationManager?: CommunicationManagerLike);
+    /**
+     * Make an element editable if it's a text element
+     * @param element - The element to make editable
+     */
+    makeEditableIfText(element: HTMLElement): void;
+    /**
+     * Remove editable state from an element
+     * @param element - The element to make non-editable
+     */
+    removeEditable(element: HTMLElement): void;
+    /**
+     * Check if an element is a text element that can be made editable
+     * @private
+     * @param element - The element to check
+     * @returns True if the element can be made editable
+     */
+    private _isTextElement;
+    /**
+     * Handle blur event on editable element
+     * @private
+     * @param e - The blur event
+     */
+    private _handleBlur;
+    /**
+     * Handle keydown event on editable element
+     * @private
+     * @param e - The keydown event
+     */
+    private _handleKeydown;
+}
+export {};
+//# sourceMappingURL=editableManager.d.ts.map

package/dist/design/interactions/editableManager.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"editableManager.d.ts","sourceRoot":"","sources":["../../../src/design/interactions/editableManager.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH;;;;GAIG;AAEH,UAAU,wBAAwB;IACjC,gBAAgB,EAAE,CAAC,OAAO,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;CACxF;AAED,qBAAa,eAAe;IAC3B,OAAO,CAAC,oBAAoB,CAAC,CAA2B;IACxD,OAAO,CAAC,QAAQ,CAAW;IAC3B,OAAO,CAAC,eAAe,CAAqB;IAC5C,OAAO,CAAC,kBAAkB,CAA6B;gBAE3C,oBAAoB,CAAC,EAAE,wBAAwB;IAO3D;;;OAGG;IACH,kBAAkB,CAAC,OAAO,EAAE,WAAW,GAAG,IAAI;IAY9C;;;OAGG;IACH,cAAc,CAAC,OAAO,EAAE,WAAW,GAAG,IAAI;IAS1C;;;;;OAKG;IACH,OAAO,CAAC,cAAc;IAQtB;;;;OAIG;IACH,OAAO,CAAC,WAAW;IAkBnB;;;;OAIG;IACH,OAAO,CAAC,cAAc;CAetB"}

package/dist/design/interactions/editableManager.js

@@ -0,0 +1,90 @@
+/**
+ * Copyright (c) 2026, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
+export class EditableManager {
+    communicationManager;
+    textTags;
+    boundHandleBlur;
+    boundHandleKeydown;
+    constructor(communicationManager) {
+        this.communicationManager = communicationManager;
+        this.textTags = ["H1", "H2", "H3", "H4", "H5", "H6", "P", "SPAN", "A", "BUTTON", "LABEL"];
+        this.boundHandleBlur = this._handleBlur.bind(this);
+        this.boundHandleKeydown = this._handleKeydown.bind(this);
+    }
+    /**
+     * Make an element editable if it's a text element
+     * @param element - The element to make editable
+     */
+    makeEditableIfText(element) {
+        if (!this._isTextElement(element)) {
+            return;
+        }
+        element.contentEditable = "true";
+        element.dataset.originalText = element.textContent ?? "";
+        element.addEventListener("blur", this.boundHandleBlur);
+        element.addEventListener("keydown", this.boundHandleKeydown);
+    }
+    /**
+     * Remove editable state from an element
+     * @param element - The element to make non-editable
+     */
+    removeEditable(element) {
+        if (element.contentEditable === "true") {
+            element.contentEditable = "false";
+        }
+        delete element.dataset.originalText;
+        element.removeEventListener("blur", this.boundHandleBlur);
+        element.removeEventListener("keydown", this.boundHandleKeydown);
+    }
+    /**
+     * Check if an element is a text element that can be made editable
+     * @private
+     * @param element - The element to check
+     * @returns True if the element can be made editable
+     */
+    _isTextElement(element) {
+        return (this.textTags.includes(element.tagName) &&
+            (element.textContent ?? "").trim().length > 0 &&
+            element.dataset.textType === "static");
+    }
+    /**
+     * Handle blur event on editable element
+     * @private
+     * @param e - The blur event
+     */
+    _handleBlur(e) {
+        const element = e.target;
+        const newText = element.textContent ?? "";
+        const originalText = element.dataset.originalText ?? "";
+        if (newText !== originalText) {
+            // Mirror JS behavior: update stored originalText after a commit
+            element.dataset.originalText = newText;
+            // Notify extension about text change (if available)
+            if (this.communicationManager) {
+                this.communicationManager.notifyTextChange(element, originalText, newText);
+            }
+        }
+        this.removeEditable(element);
+    }
+    /**
+     * Handle keydown event on editable element
+     * @private
+     * @param e - The keydown event
+     */
+    _handleKeydown(e) {
+        const element = e.target;
+        if (e.key === "Enter" && !e.shiftKey) {
+            e.preventDefault();
+            element.blur();
+        }
+        if (e.key === "Escape") {
+            if (element.dataset.originalText) {
+                element.textContent = element.dataset.originalText;
+            }
+            element.blur();
+        }
+    }
+}

package/dist/design/interactions/eventHandlers.d.ts

@@ -0,0 +1,66 @@
+/**
+ * Copyright (c) 2026, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
+/**
+ * Event Handlers Module
+ * Handles mouse and click events for highlighting
+ */
+interface ComponentMatcherLike {
+    findHighlightableElement: (target: HTMLElement) => HTMLElement | null;
+}
+interface StyleManagerLike {
+    highlightElement: (element: HTMLElement) => void;
+    unhighlightElement: (element: HTMLElement) => void;
+    selectElement: (element: HTMLElement) => void;
+    deselectElement: (element: HTMLElement) => void;
+}
+interface EditableManagerLike {
+    makeEditableIfText: (element: HTMLElement) => void;
+    removeEditable: (element: HTMLElement) => void;
+}
+interface CommunicationManagerLike {
+    notifyComponentSelected: (element: HTMLElement) => void;
+}
+export declare class EventHandlers {
+    private isInteractionsActive;
+    private componentMatcher;
+    private styleManager;
+    private editableManager;
+    private communicationManager;
+    private currentHighlighted;
+    private selectedElement;
+    constructor(isInteractionsActive: () => boolean, componentMatcher: ComponentMatcherLike, styleManager: StyleManagerLike, editableManager: EditableManagerLike, communicationManager: CommunicationManagerLike);
+    /**
+     * Find the nearest highlightable element by walking up the DOM tree
+     * @param target - The target element
+     * @returns The highlightable element or null
+     */
+    private _findHighlightableElement;
+    /**
+     * Handle mouseover event
+     * @param e - The mouseover event
+     */
+    handleMouseOver(e: MouseEvent): void;
+    /**
+     * Handle mouseleave event
+     */
+    handleMouseLeave(): void;
+    /**
+     * Handle click event
+     * @param e - The click event
+     */
+    handleClick(e: MouseEvent): void;
+    /**
+     * Clear all highlights and selections
+     */
+    clearAll(): void;
+    /**
+     * Get the currently selected element
+     * @returns The selected element
+     */
+    getSelectedElement(): HTMLElement | null;
+}
+export {};
+//# sourceMappingURL=eventHandlers.d.ts.map

package/dist/design/interactions/eventHandlers.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"eventHandlers.d.ts","sourceRoot":"","sources":["../../../src/design/interactions/eventHandlers.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH;;;GAGG;AAEH,UAAU,oBAAoB;IAC7B,wBAAwB,EAAE,CAAC,MAAM,EAAE,WAAW,KAAK,WAAW,GAAG,IAAI,CAAC;CACtE;AAED,UAAU,gBAAgB;IACzB,gBAAgB,EAAE,CAAC,OAAO,EAAE,WAAW,KAAK,IAAI,CAAC;IACjD,kBAAkB,EAAE,CAAC,OAAO,EAAE,WAAW,KAAK,IAAI,CAAC;IACnD,aAAa,EAAE,CAAC,OAAO,EAAE,WAAW,KAAK,IAAI,CAAC;IAC9C,eAAe,EAAE,CAAC,OAAO,EAAE,WAAW,KAAK,IAAI,CAAC;CAChD;AAED,UAAU,mBAAmB;IAC5B,kBAAkB,EAAE,CAAC,OAAO,EAAE,WAAW,KAAK,IAAI,CAAC;IACnD,cAAc,EAAE,CAAC,OAAO,EAAE,WAAW,KAAK,IAAI,CAAC;CAC/C;AAED,UAAU,wBAAwB;IACjC,uBAAuB,EAAE,CAAC,OAAO,EAAE,WAAW,KAAK,IAAI,CAAC;CACxD;AAED,qBAAa,aAAa;IACzB,OAAO,CAAC,oBAAoB,CAAgB;IAC5C,OAAO,CAAC,gBAAgB,CAAuB;IAC/C,OAAO,CAAC,YAAY,CAAmB;IACvC,OAAO,CAAC,eAAe,CAAsB;IAC7C,OAAO,CAAC,oBAAoB,CAA2B;IAEvD,OAAO,CAAC,kBAAkB,CAAqB;IAC/C,OAAO,CAAC,eAAe,CAAqB;gBAG3C,oBAAoB,EAAE,MAAM,OAAO,EACnC,gBAAgB,EAAE,oBAAoB,EACtC,YAAY,EAAE,gBAAgB,EAC9B,eAAe,EAAE,mBAAmB,EACpC,oBAAoB,EAAE,wBAAwB;IAiB/C;;;;OAIG;IACH,OAAO,CAAC,yBAAyB;IAIjC;;;OAGG;IACH,eAAe,CAAC,CAAC,EAAE,UAAU,GAAG,IAAI;IAmCpC;;OAEG;IACH,gBAAgB,IAAI,IAAI;IAcxB;;;OAGG;IACH,WAAW,CAAC,CAAC,EAAE,UAAU,GAAG,IAAI;IA6ChC;;OAEG;IACH,QAAQ,IAAI,IAAI;IAahB;;;OAGG;IACH,kBAAkB,IAAI,WAAW,GAAG,IAAI;CAGxC"}

package/dist/design/interactions/eventHandlers.js

@@ -0,0 +1,136 @@
+/**
+ * Copyright (c) 2026, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
+export class EventHandlers {
+    isInteractionsActive;
+    componentMatcher;
+    styleManager;
+    editableManager;
+    communicationManager;
+    currentHighlighted;
+    selectedElement;
+    constructor(isInteractionsActive, componentMatcher, styleManager, editableManager, communicationManager) {
+        this.isInteractionsActive = isInteractionsActive;
+        this.componentMatcher = componentMatcher;
+        this.styleManager = styleManager;
+        this.editableManager = editableManager;
+        this.communicationManager = communicationManager;
+        this.currentHighlighted = null;
+        this.selectedElement = null;
+        // Bind methods to preserve 'this' context
+        this.handleMouseOver = this.handleMouseOver.bind(this);
+        this.handleMouseLeave = this.handleMouseLeave.bind(this);
+        this.handleClick = this.handleClick.bind(this);
+    }
+    /**
+     * Find the nearest highlightable element by walking up the DOM tree
+     * @param target - The target element
+     * @returns The highlightable element or null
+     */
+    _findHighlightableElement(target) {
+        return this.componentMatcher.findHighlightableElement(target);
+    }
+    /**
+     * Handle mouseover event
+     * @param e - The mouseover event
+     */
+    handleMouseOver(e) {
+        if (!this.isInteractionsActive()) {
+            return;
+        }
+        e.stopPropagation();
+        const target = e.target;
+        if (target.nodeType !== 1 || target.tagName === "HTML" || target.tagName === "BODY") {
+            return;
+        }
+        const element = this._findHighlightableElement(target);
+        if (!element) {
+            return;
+        }
+        if (this.currentHighlighted === element ||
+            (this.selectedElement && this.selectedElement === element)) {
+            return;
+        }
+        if (this.currentHighlighted &&
+            !this.currentHighlighted.classList.contains("design-mode-selected")) {
+            this.styleManager.unhighlightElement(this.currentHighlighted);
+        }
+        this.styleManager.highlightElement(element);
+        this.currentHighlighted = element;
+    }
+    /**
+     * Handle mouseleave event
+     */
+    handleMouseLeave() {
+        if (!this.isInteractionsActive()) {
+            return;
+        }
+        if (this.currentHighlighted &&
+            !this.currentHighlighted.classList.contains("design-mode-selected")) {
+            this.styleManager.unhighlightElement(this.currentHighlighted);
+            this.currentHighlighted = null;
+        }
+    }
+    /**
+     * Handle click event
+     * @param e - The click event
+     */
+    handleClick(e) {
+        if (!this.isInteractionsActive()) {
+            return;
+        }
+        e.preventDefault();
+        e.stopPropagation();
+        const target = e.target;
+        if (target.nodeType !== 1 || target.tagName === "HTML" || target.tagName === "BODY") {
+            return;
+        }
+        const element = this._findHighlightableElement(target);
+        if (!element) {
+            return;
+        }
+        if (this.selectedElement && this.selectedElement === element) {
+            return;
+        }
+        // Deselect previous element
+        if (this.selectedElement) {
+            this.styleManager.deselectElement(this.selectedElement);
+            this.editableManager.removeEditable(this.selectedElement);
+        }
+        // Remove highlight from current highlighted
+        if (this.currentHighlighted) {
+            this.styleManager.unhighlightElement(this.currentHighlighted);
+            this.currentHighlighted = null;
+        }
+        // Select new element
+        this.selectedElement = element;
+        this.styleManager.selectElement(element);
+        // Make text elements editable
+        this.editableManager.makeEditableIfText(element);
+        // Notify extension
+        this.communicationManager.notifyComponentSelected(element);
+    }
+    /**
+     * Clear all highlights and selections
+     */
+    clearAll() {
+        if (this.currentHighlighted) {
+            this.styleManager.unhighlightElement(this.currentHighlighted);
+            this.currentHighlighted = null;
+        }
+        if (this.selectedElement) {
+            this.styleManager.deselectElement(this.selectedElement);
+            this.editableManager.removeEditable(this.selectedElement);
+            this.selectedElement = null;
+        }
+    }
+    /**
+     * Get the currently selected element
+     * @returns The selected element
+     */
+    getSelectedElement() {
+        return this.selectedElement;
+    }
+}

package/dist/design/interactions/index.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) 2026, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
+export {};
+//# sourceMappingURL=index.d.ts.map

package/dist/design/interactions/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/design/interactions/index.ts"],"names":[],"mappings":"AAAA;;;;GAIG"}

package/dist/design/interactions/index.js

@@ -0,0 +1,45 @@
+/**
+ * Copyright (c) 2026, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
+/**
+ * Entry point for bundling the design mode interactions
+ * This file is used by esbuild to create the bundled version
+ */
+import { InteractionsController } from "./interactionsController.js";
+const interactions = new InteractionsController(true);
+if (typeof document !== "undefined") {
+    if (document.readyState === "loading") {
+        document.addEventListener("DOMContentLoaded", () => {
+            interactions.initialize();
+        });
+    }
+    else {
+        interactions.initialize();
+    }
+}
+// Expose global functions
+if (typeof window !== "undefined") {
+    window.enableInteractions = function () {
+        interactions.enable();
+    };
+    window.disableInteractions = function () {
+        interactions.disable();
+    };
+    window.addEventListener("message", function (event) {
+        const data = event.data;
+        const typed = data && typeof data === "object"
+            ? data
+            : null;
+        if (typed && typed.type === "style-change") {
+            interactions.applyStyleChange(String(typed.property ?? ""), String(typed.value ?? ""));
+        }
+        if (typed && typed.type === "enable-interactions") {
+            window.enableInteractions?.();
+        }
+        if (typed && typed.type === "disable-interactions") {
+            window.disableInteractions?.();
+        }
+    });
+}