@salesforce/webapp-experimental 1.68.0 → 1.69.0

package/dist/design/design-mode-interactions.js

@@ -70,6 +70,17 @@
     }
     return parseSourceFileAttribute(source);
   }
+  function findElementsBySourceLocation(location) {
+    const results = [];
+    const elements = document.querySelectorAll("[data-source-file]");
+    for (const el of elements) {
+      const elSource = getSourceFromDataAttributes(el);
+      if (elSource && elSource.fileName === location.fileName && elSource.lineNumber === location.lineNumber && elSource.columnNumber === location.columnNumber) {
+        results.push(el);
+      }
+    }
+    return results;
+  }
   function getLabelFromSource(element) {
     if (!element) {
       return "";
@@ -233,28 +244,6 @@
       }
       return true;
     }
-    /**
-     * Find all same elements that share the same data-source-file value.
-     * These are elements rendered by the same component at the same source location.
-     * @param element - The reference element
-     * @returns Array of same elements (excludes the element itself)
-     */
-    findSameElements(element) {
-      const sourceFile = element.getAttribute("data-source-file");
-      if (!sourceFile) {
-        return [];
-      }
-      const all = document.querySelectorAll(
-        `[data-source-file="${CSS.escape(sourceFile)}"]`
-      );
-      const sameElements = [];
-      for (const el of all) {
-        if (el !== element) {
-          sameElements.push(el);
-        }
-      }
-      return sameElements;
-    }
     /**
      * Find the nearest highlightable element by walking up the DOM tree
      * @param target - The target element
@@ -370,35 +359,24 @@
       __publicField(this, "styleManager");
       __publicField(this, "editableManager");
       __publicField(this, "communicationManager");
-      __publicField(this, "currentHighlighted");
-      __publicField(this, "currentHighlightedSameElements");
+      __publicField(this, "currentHighlightedElements");
       __publicField(this, "selectedElement");
-      __publicField(this, "selectedSameElements");
+      __publicField(this, "selectedElements");
       this.isInteractionsActive = isInteractionsActive;
       this.componentMatcher = componentMatcher;
       this.styleManager = styleManager;
       this.editableManager = editableManager;
       this.communicationManager = communicationManager;
-      this.currentHighlighted = null;
-      this.currentHighlightedSameElements = [];
+      this.currentHighlightedElements = [];
       this.selectedElement = null;
-      this.selectedSameElements = [];
+      this.selectedElements = [];
       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;
@@ -412,41 +390,26 @@
       if (!element) {
         return;
       }
-      if (this.currentHighlighted === element || this.selectedElement && this.selectedElement === element) {
+      if (this.currentHighlightedElements.includes(element) || this.selectedElement && this.selectedElement === element) {
         return;
       }
-      if (this.currentHighlighted && !this.currentHighlighted.classList.contains("design-mode-selected")) {
-        this.styleManager.unhighlightElements([
-          this.currentHighlighted,
-          ...this.currentHighlightedSameElements
-        ]);
-        this.currentHighlightedSameElements = [];
+      if (this.currentHighlightedElements.length > 0 && !this.currentHighlightedElements[0].classList.contains("design-mode-selected")) {
+        this.styleManager.unhighlightElements(this.currentHighlightedElements);
+        this.currentHighlightedElements = [];
       }
-      const sameElements = this.componentMatcher.findSameElements(element);
-      this.styleManager.highlightElements([element, ...sameElements]);
-      this.currentHighlighted = element;
-      this.currentHighlightedSameElements = sameElements;
+      const allElements = findElementsBySourceLocation(getSourceFromDataAttributes(element));
+      this.styleManager.highlightElements(allElements);
+      this.currentHighlightedElements = allElements;
     }
-    /**
-     * Handle mouseleave event
-     */
     handleMouseLeave() {
       if (!this.isInteractionsActive()) {
         return;
       }
-      if (this.currentHighlighted && !this.currentHighlighted.classList.contains("design-mode-selected")) {
-        this.styleManager.unhighlightElements([
-          this.currentHighlighted,
-          ...this.currentHighlightedSameElements
-        ]);
-        this.currentHighlighted = null;
-        this.currentHighlightedSameElements = [];
+      if (this.currentHighlightedElements.length > 0 && !this.currentHighlightedElements[0].classList.contains("design-mode-selected")) {
+        this.styleManager.unhighlightElements(this.currentHighlightedElements);
+        this.currentHighlightedElements = [];
       }
     }
-    /**
-     * Handle click event
-     * @param e - The click event
-     */
     handleClick(e) {
       if (!this.isInteractionsActive()) {
         return;
@@ -465,57 +428,35 @@
         return;
       }
       if (this.selectedElement) {
-        this.styleManager.deselectElements([this.selectedElement, ...this.selectedSameElements]);
+        this.styleManager.deselectElements(this.selectedElements);
         this.editableManager.removeEditable(this.selectedElement);
       }
-      if (this.currentHighlighted) {
-        this.styleManager.unhighlightElements([
-          this.currentHighlighted,
-          ...this.currentHighlightedSameElements
-        ]);
-        this.currentHighlighted = null;
-        this.currentHighlightedSameElements = [];
+      if (this.currentHighlightedElements.length > 0) {
+        this.styleManager.unhighlightElements(this.currentHighlightedElements);
+        this.currentHighlightedElements = [];
       }
       this.selectedElement = element;
-      const sameElements = this.componentMatcher.findSameElements(element);
-      this.selectedSameElements = sameElements;
-      this.styleManager.selectElements([element, ...sameElements]);
+      const allElements = findElementsBySourceLocation(getSourceFromDataAttributes(element));
+      this.selectedElements = allElements;
+      this.styleManager.selectElements(allElements);
       this.editableManager.makeEditableIfText(element);
       this.communicationManager.notifyComponentSelected(element);
     }
-    /**
-     * Clear all highlights and selections
-     */
     clearAll() {
-      if (this.currentHighlighted) {
-        this.styleManager.unhighlightElements([
-          this.currentHighlighted,
-          ...this.currentHighlightedSameElements
-        ]);
-        this.currentHighlighted = null;
-        this.currentHighlightedSameElements = [];
+      if (this.currentHighlightedElements.length > 0) {
+        this.styleManager.unhighlightElements(this.currentHighlightedElements);
+        this.currentHighlightedElements = [];
       }
       if (this.selectedElement) {
-        this.styleManager.deselectElements([this.selectedElement, ...this.selectedSameElements]);
+        this.styleManager.deselectElements(this.selectedElements);
         this.editableManager.removeEditable(this.selectedElement);
         this.selectedElement = null;
-        this.selectedSameElements = [];
+        this.selectedElements = [];
       }
     }
-    /**
-     * Get the currently selected element
-     * @returns The selected element
-     */
     getSelectedElement() {
       return this.selectedElement;
     }
-    /**
-     * Get the same elements of the currently selected element
-     * @returns Array of same elements
-     */
-    getSelectedSameElements() {
-      return this.selectedSameElements;
-    }
   };
 
   // src/design/interactions/styleManager.ts
@@ -700,17 +641,20 @@
       console.log("Design Mode Interactions disabled");
     }
     /**
-     * Apply style changes to the selected element
-     * @param property - CSS property name
-     * @param value - CSS property value
+     * Apply a style change to all elements at the given source location.
+     * When sourceLocation is provided (undo/redo), it is used directly.
+     * Otherwise the source location is read from the currently selected element.
      */
-    applyStyleChange(property, value) {
-      const selectedElement = this.eventHandlers.getSelectedElement();
-      if (selectedElement) {
-        selectedElement.style[property] = value;
-        for (const sameElement of this.eventHandlers.getSelectedSameElements()) {
-          sameElement.style[property] = value;
-        }
+    applyStyleChange(property, value, sourceLocation) {
+      let location = sourceLocation ?? null;
+      if (!location?.fileName) {
+        const selectedElement = this.eventHandlers.getSelectedElement();
+        location = getSourceFromDataAttributes(selectedElement);
+      }
+      if (!location) return;
+      const targets = findElementsBySourceLocation(location);
+      for (const el of targets) {
+        el.style[property] = value;
       }
     }
     /**
@@ -747,7 +691,17 @@
       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 ?? ""));
+        const sl = typed.sourceLocation;
+        const sourceLocation = sl && typeof sl === "object" ? {
+          fileName: String(sl.sourceFile ?? ""),
+          lineNumber: typeof sl.lineNumber === "number" ? sl.lineNumber : null,
+          columnNumber: typeof sl.columnNumber === "number" ? sl.columnNumber : null
+        } : void 0;
+        interactions.applyStyleChange(
+          String(typed.property ?? ""),
+          String(typed.value ?? ""),
+          sourceLocation
+        );
       }
       if (typed && typed.type === "enable-interactions") {
         window.enableInteractions?.();

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

@@ -33,13 +33,6 @@ export declare class ComponentMatcher {
      * @returns True if the element should be highlighted
      */
     isHighlightableElement(element: HTMLElement | null | undefined): boolean;
-    /**
-     * Find all same elements that share the same data-source-file value.
-     * These are elements rendered by the same component at the same source location.
-     * @param element - The reference element
-     * @returns Array of same elements (excludes the element itself)
-     */
-    findSameElements(element: HTMLElement): HTMLElement[];
     /**
      * Find the nearest highlightable element by walking up the DOM tree
      * @param target - The target element

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

@@ -1 +1 @@
-{"version":3,"file":"componentMatcher.d.ts","sourceRoot":"","sources":["../../../src/design/interactions/componentMatcher.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH;;;GAGG;AAEH,MAAM,WAAW,uBAAuB;IAEvC,SAAS,CAAC,EAAE,MAAM,EAAE,CAAC;CACrB;AAED,qBAAa,gBAAgB;IAC5B,OAAO,CAAC,SAAS,CAAW;gBAEhB,OAAO,GAAE,uBAA4B;IAIjD;;;;OAIG;IACH,iBAAiB,CAAC,OAAO,EAAE,WAAW,GAAG,IAAI,GAAG,SAAS,GAAG,OAAO;IAOnE,OAAO,CAAC,WAAW;IAInB;;;;;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;IAgBxE;;;;;OAKG;IACH,gBAAgB,CAAC,OAAO,EAAE,WAAW,GAAG,WAAW,EAAE;IAmBrD;;;;OAIG;IACH,wBAAwB,CAAC,MAAM,EAAE,WAAW,GAAG,IAAI,GAAG,SAAS,GAAG,WAAW,GAAG,IAAI;CA+BpF"}
+{"version":3,"file":"componentMatcher.d.ts","sourceRoot":"","sources":["../../../src/design/interactions/componentMatcher.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH;;;GAGG;AAEH,MAAM,WAAW,uBAAuB;IAEvC,SAAS,CAAC,EAAE,MAAM,EAAE,CAAC;CACrB;AAED,qBAAa,gBAAgB;IAC5B,OAAO,CAAC,SAAS,CAAW;gBAEhB,OAAO,GAAE,uBAA4B;IAIjD;;;;OAIG;IACH,iBAAiB,CAAC,OAAO,EAAE,WAAW,GAAG,IAAI,GAAG,SAAS,GAAG,OAAO;IAOnE,OAAO,CAAC,WAAW;IAInB;;;;;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;IAgBxE;;;;OAIG;IACH,wBAAwB,CAAC,MAAM,EAAE,WAAW,GAAG,IAAI,GAAG,SAAS,GAAG,WAAW,GAAG,IAAI;CA+BpF"}

package/dist/design/interactions/componentMatcher.js

@@ -48,26 +48,6 @@ export class ComponentMatcher {
         }
         return true;
     }
-    /**
-     * Find all same elements that share the same data-source-file value.
-     * These are elements rendered by the same component at the same source location.
-     * @param element - The reference element
-     * @returns Array of same elements (excludes the element itself)
-     */
-    findSameElements(element) {
-        const sourceFile = element.getAttribute("data-source-file");
-        if (!sourceFile) {
-            return [];
-        }
-        const all = document.querySelectorAll(`[data-source-file="${CSS.escape(sourceFile)}"]`);
-        const sameElements = [];
-        for (const el of all) {
-            if (el !== element) {
-                sameElements.push(el);
-            }
-        }
-        return sameElements;
-    }
     /**
      * Find the nearest highlightable element by walking up the DOM tree
      * @param target - The target element

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

@@ -3,13 +3,8 @@
  * 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;
-    findSameElements: (element: HTMLElement) => HTMLElement[];
 }
 interface StyleManagerLike {
     highlightElements: (elements: HTMLElement[]) => void;
@@ -30,45 +25,16 @@ export declare class EventHandlers {
     private styleManager;
     private editableManager;
     private communicationManager;
-    private currentHighlighted;
-    private currentHighlightedSameElements;
+    private currentHighlightedElements;
     private selectedElement;
-    private selectedSameElements;
+    private selectedElements;
     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;
-    /**
-     * Get the same elements of the currently selected element
-     * @returns Array of same elements
-     */
-    getSelectedSameElements(): HTMLElement[];
 }
 export {};
 //# sourceMappingURL=eventHandlers.d.ts.map

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

@@ -1 +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;IACtE,gBAAgB,EAAE,CAAC,OAAO,EAAE,WAAW,KAAK,WAAW,EAAE,CAAC;CAC1D;AAED,UAAU,gBAAgB;IACzB,iBAAiB,EAAE,CAAC,QAAQ,EAAE,WAAW,EAAE,KAAK,IAAI,CAAC;IACrD,mBAAmB,EAAE,CAAC,QAAQ,EAAE,WAAW,EAAE,KAAK,IAAI,CAAC;IACvD,cAAc,EAAE,CAAC,QAAQ,EAAE,WAAW,EAAE,KAAK,IAAI,CAAC;IAClD,gBAAgB,EAAE,CAAC,QAAQ,EAAE,WAAW,EAAE,KAAK,IAAI,CAAC;CACpD;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,8BAA8B,CAAgB;IACtD,OAAO,CAAC,eAAe,CAAqB;IAC5C,OAAO,CAAC,oBAAoB,CAAgB;gBAG3C,oBAAoB,EAAE,MAAM,OAAO,EACnC,gBAAgB,EAAE,oBAAoB,EACtC,YAAY,EAAE,gBAAgB,EAC9B,eAAe,EAAE,mBAAmB,EACpC,oBAAoB,EAAE,wBAAwB;IAmB/C;;;;OAIG;IACH,OAAO,CAAC,yBAAyB;IAIjC;;;OAGG;IACH,eAAe,CAAC,CAAC,EAAE,UAAU,GAAG,IAAI;IAyCpC;;OAEG;IACH,gBAAgB,IAAI,IAAI;IAkBxB;;;OAGG;IACH,WAAW,CAAC,CAAC,EAAE,UAAU,GAAG,IAAI;IAmDhC;;OAEG;IACH,QAAQ,IAAI,IAAI;IAkBhB;;;OAGG;IACH,kBAAkB,IAAI,WAAW,GAAG,IAAI;IAIxC;;;OAGG;IACH,uBAAuB,IAAI,WAAW,EAAE;CAGxC"}
+{"version":3,"file":"eventHandlers.d.ts","sourceRoot":"","sources":["../../../src/design/interactions/eventHandlers.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AASH,UAAU,oBAAoB;IAC7B,wBAAwB,EAAE,CAAC,MAAM,EAAE,WAAW,KAAK,WAAW,GAAG,IAAI,CAAC;CACtE;AAED,UAAU,gBAAgB;IACzB,iBAAiB,EAAE,CAAC,QAAQ,EAAE,WAAW,EAAE,KAAK,IAAI,CAAC;IACrD,mBAAmB,EAAE,CAAC,QAAQ,EAAE,WAAW,EAAE,KAAK,IAAI,CAAC;IACvD,cAAc,EAAE,CAAC,QAAQ,EAAE,WAAW,EAAE,KAAK,IAAI,CAAC;IAClD,gBAAgB,EAAE,CAAC,QAAQ,EAAE,WAAW,EAAE,KAAK,IAAI,CAAC;CACpD;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,0BAA0B,CAAgB;IAClD,OAAO,CAAC,eAAe,CAAqB;IAC5C,OAAO,CAAC,gBAAgB,CAAgB;gBAGvC,oBAAoB,EAAE,MAAM,OAAO,EACnC,gBAAgB,EAAE,oBAAoB,EACtC,YAAY,EAAE,gBAAgB,EAC9B,eAAe,EAAE,mBAAmB,EACpC,oBAAoB,EAAE,wBAAwB;IAkB/C,OAAO,CAAC,yBAAyB;IAIjC,eAAe,CAAC,CAAC,EAAE,UAAU,GAAG,IAAI;IAqCpC,gBAAgB,IAAI,IAAI;IAcxB,WAAW,CAAC,CAAC,EAAE,UAAU,GAAG,IAAI;IA+ChC,QAAQ,IAAI,IAAI;IAchB,kBAAkB,IAAI,WAAW,GAAG,IAAI;CAGxC"}

package/dist/design/interactions/eventHandlers.js

@@ -3,43 +3,37 @@
  * All rights reserved.
  * For full license text, see the LICENSE.txt file
  */
+/**
+ * Event Handlers Module
+ * Handles mouse and click events for highlighting
+ */
+import { findElementsBySourceLocation, getSourceFromDataAttributes } from "./utils/sourceUtils.js";
 export class EventHandlers {
     isInteractionsActive;
     componentMatcher;
     styleManager;
     editableManager;
     communicationManager;
-    currentHighlighted;
-    currentHighlightedSameElements;
+    currentHighlightedElements;
     selectedElement;
-    selectedSameElements;
+    selectedElements;
     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.currentHighlightedSameElements = [];
+        this.currentHighlightedElements = [];
         this.selectedElement = null;
-        this.selectedSameElements = [];
+        this.selectedElements = [];
         // 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;
@@ -53,44 +47,29 @@ export class EventHandlers {
         if (!element) {
             return;
         }
-        if (this.currentHighlighted === element ||
+        if (this.currentHighlightedElements.includes(element) ||
             (this.selectedElement && this.selectedElement === element)) {
             return;
         }
-        if (this.currentHighlighted &&
-            !this.currentHighlighted.classList.contains("design-mode-selected")) {
-            this.styleManager.unhighlightElements([
-                this.currentHighlighted,
-                ...this.currentHighlightedSameElements,
-            ]);
-            this.currentHighlightedSameElements = [];
+        if (this.currentHighlightedElements.length > 0 &&
+            !this.currentHighlightedElements[0].classList.contains("design-mode-selected")) {
+            this.styleManager.unhighlightElements(this.currentHighlightedElements);
+            this.currentHighlightedElements = [];
         }
-        const sameElements = this.componentMatcher.findSameElements(element);
-        this.styleManager.highlightElements([element, ...sameElements]);
-        this.currentHighlighted = element;
-        this.currentHighlightedSameElements = sameElements;
+        const allElements = findElementsBySourceLocation(getSourceFromDataAttributes(element));
+        this.styleManager.highlightElements(allElements);
+        this.currentHighlightedElements = allElements;
     }
-    /**
-     * Handle mouseleave event
-     */
     handleMouseLeave() {
         if (!this.isInteractionsActive()) {
             return;
         }
-        if (this.currentHighlighted &&
-            !this.currentHighlighted.classList.contains("design-mode-selected")) {
-            this.styleManager.unhighlightElements([
-                this.currentHighlighted,
-                ...this.currentHighlightedSameElements,
-            ]);
-            this.currentHighlighted = null;
-            this.currentHighlightedSameElements = [];
+        if (this.currentHighlightedElements.length > 0 &&
+            !this.currentHighlightedElements[0].classList.contains("design-mode-selected")) {
+            this.styleManager.unhighlightElements(this.currentHighlightedElements);
+            this.currentHighlightedElements = [];
         }
     }
-    /**
-     * Handle click event
-     * @param e - The click event
-     */
     handleClick(e) {
         if (!this.isInteractionsActive()) {
             return;
@@ -110,59 +89,37 @@ export class EventHandlers {
         }
         // Deselect previous element and its same elements
         if (this.selectedElement) {
-            this.styleManager.deselectElements([this.selectedElement, ...this.selectedSameElements]);
+            this.styleManager.deselectElements(this.selectedElements);
             this.editableManager.removeEditable(this.selectedElement);
         }
-        // Remove highlight from current highlighted and its same elements
-        if (this.currentHighlighted) {
-            this.styleManager.unhighlightElements([
-                this.currentHighlighted,
-                ...this.currentHighlightedSameElements,
-            ]);
-            this.currentHighlighted = null;
-            this.currentHighlightedSameElements = [];
+        // Remove highlight from current highlighted elements
+        if (this.currentHighlightedElements.length > 0) {
+            this.styleManager.unhighlightElements(this.currentHighlightedElements);
+            this.currentHighlightedElements = [];
         }
-        // Select new element and its same elements
+        // Select new element and all elements at the same source location
         this.selectedElement = element;
-        const sameElements = this.componentMatcher.findSameElements(element);
-        this.selectedSameElements = sameElements;
-        this.styleManager.selectElements([element, ...sameElements]);
+        const allElements = findElementsBySourceLocation(getSourceFromDataAttributes(element));
+        this.selectedElements = allElements;
+        this.styleManager.selectElements(allElements);
         // 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.unhighlightElements([
-                this.currentHighlighted,
-                ...this.currentHighlightedSameElements,
-            ]);
-            this.currentHighlighted = null;
-            this.currentHighlightedSameElements = [];
+        if (this.currentHighlightedElements.length > 0) {
+            this.styleManager.unhighlightElements(this.currentHighlightedElements);
+            this.currentHighlightedElements = [];
         }
         if (this.selectedElement) {
-            this.styleManager.deselectElements([this.selectedElement, ...this.selectedSameElements]);
+            this.styleManager.deselectElements(this.selectedElements);
             this.editableManager.removeEditable(this.selectedElement);
             this.selectedElement = null;
-            this.selectedSameElements = [];
+            this.selectedElements = [];
         }
     }
-    /**
-     * Get the currently selected element
-     * @returns The selected element
-     */
     getSelectedElement() {
         return this.selectedElement;
     }
-    /**
-     * Get the same elements of the currently selected element
-     * @returns Array of same elements
-     */
-    getSelectedSameElements() {
-        return this.selectedSameElements;
-    }
 }

package/dist/design/interactions/index.js

@@ -33,7 +33,19 @@ if (typeof window !== "undefined") {
             ? data
             : null;
         if (typed && typed.type === "style-change") {
-            interactions.applyStyleChange(String(typed.property ?? ""), String(typed.value ?? ""));
+            const sl = typed.sourceLocation;
+            const sourceLocation = sl && typeof sl === "object"
+                ? {
+                    fileName: String(sl.sourceFile ?? ""),
+                    lineNumber: typeof sl.lineNumber === "number"
+                        ? sl.lineNumber
+                        : null,
+                    columnNumber: typeof sl.columnNumber === "number"
+                        ? sl.columnNumber
+                        : null,
+                }
+                : undefined;
+            interactions.applyStyleChange(String(typed.property ?? ""), String(typed.value ?? ""), sourceLocation);
         }
         if (typed && typed.type === "enable-interactions") {
             window.enableInteractions?.();

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

@@ -3,6 +3,7 @@
  * All rights reserved.
  * For full license text, see the LICENSE.txt file
  */
+import { type SourceLocation } from "./utils/sourceUtils.js";
 export declare class InteractionsController {
     private enabled;
     private isActive;
@@ -25,11 +26,11 @@ export declare class InteractionsController {
      */
     disable(): void;
     /**
-     * Apply style changes to the selected element
-     * @param property - CSS property name
-     * @param value - CSS property value
+     * Apply a style change to all elements at the given source location.
+     * When sourceLocation is provided (undo/redo), it is used directly.
+     * Otherwise the source location is read from the currently selected element.
      */
-    applyStyleChange(property: string, value: string): void;
+    applyStyleChange(property: string, value: string, sourceLocation?: SourceLocation): void;
     /**
      * Cleanup and remove event listeners
      */

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

@@ -1 +1 @@
-{"version":3,"file":"interactionsController.d.ts","sourceRoot":"","sources":["../../../src/design/interactions/interactionsController.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAaH,qBAAa,sBAAsB;IAClC,OAAO,CAAC,OAAO,CAAU;IACzB,OAAO,CAAC,QAAQ,CAAU;IAE1B,OAAO,CAAC,gBAAgB,CAAmB;IAC3C,OAAO,CAAC,YAAY,CAAe;IACnC,OAAO,CAAC,oBAAoB,CAAuB;IACnD,OAAO,CAAC,eAAe,CAAkB;IACzC,OAAO,CAAC,aAAa,CAAgB;gBAEzB,OAAO,UAAO;IAwD1B;;OAEG;IACH,UAAU,IAAI,IAAI;IAiBlB;;OAEG;IACH,MAAM,IAAI,IAAI;IAKd;;OAEG;IACH,OAAO,IAAI,IAAI;IAMf;;;;OAIG;IACH,gBAAgB,CAAC,QAAQ,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,IAAI;IAWvD;;OAEG;IACH,OAAO,IAAI,IAAI;CAOf"}
+{"version":3,"file":"interactionsController.d.ts","sourceRoot":"","sources":["../../../src/design/interactions/interactionsController.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAYH,OAAO,EAGN,KAAK,cAAc,EACnB,MAAM,wBAAwB,CAAC;AAEhC,qBAAa,sBAAsB;IAClC,OAAO,CAAC,OAAO,CAAU;IACzB,OAAO,CAAC,QAAQ,CAAU;IAE1B,OAAO,CAAC,gBAAgB,CAAmB;IAC3C,OAAO,CAAC,YAAY,CAAe;IACnC,OAAO,CAAC,oBAAoB,CAAuB;IACnD,OAAO,CAAC,eAAe,CAAkB;IACzC,OAAO,CAAC,aAAa,CAAgB;gBAEzB,OAAO,UAAO;IAwD1B;;OAEG;IACH,UAAU,IAAI,IAAI;IAiBlB;;OAEG;IACH,MAAM,IAAI,IAAI;IAKd;;OAEG;IACH,OAAO,IAAI,IAAI;IAMf;;;;OAIG;IACH,gBAAgB,CAAC,QAAQ,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,EAAE,cAAc,CAAC,EAAE,cAAc,GAAG,IAAI;IAgBxF;;OAEG;IACH,OAAO,IAAI,IAAI;CAOf"}

package/dist/design/interactions/interactionsController.js

@@ -12,6 +12,7 @@ import { ComponentMatcher } from "./componentMatcher.js";
 import { EditableManager } from "./editableManager.js";
 import { EventHandlers } from "./eventHandlers.js";
 import { StyleManager } from "./styleManager.js";
+import { findElementsBySourceLocation, getSourceFromDataAttributes, } from "./utils/sourceUtils.js";
 export class InteractionsController {
     enabled;
     isActive;
@@ -99,17 +100,21 @@ export class InteractionsController {
         console.log("Design Mode Interactions disabled");
     }
     /**
-     * Apply style changes to the selected element
-     * @param property - CSS property name
-     * @param value - CSS property value
+     * Apply a style change to all elements at the given source location.
+     * When sourceLocation is provided (undo/redo), it is used directly.
+     * Otherwise the source location is read from the currently selected element.
      */
-    applyStyleChange(property, value) {
-        const selectedElement = this.eventHandlers.getSelectedElement();
-        if (selectedElement) {
-            selectedElement.style[property] = value;
-            for (const sameElement of this.eventHandlers.getSelectedSameElements()) {
-                sameElement.style[property] = value;
-            }
+    applyStyleChange(property, value, sourceLocation) {
+        let location = sourceLocation ?? null;
+        if (!location?.fileName) {
+            const selectedElement = this.eventHandlers.getSelectedElement();
+            location = getSourceFromDataAttributes(selectedElement);
+        }
+        if (!location)
+            return;
+        const targets = findElementsBySourceLocation(location);
+        for (const el of targets) {
+            el.style[property] = value;
         }
     }
     /**

package/dist/design/interactions/utils/sourceUtils.d.ts

@@ -14,6 +14,12 @@ export interface SourceLocation {
  * @returns Source location information, or null if missing.
  */
 export declare function getSourceFromDataAttributes(element: HTMLElement | null | undefined): SourceLocation | null;
+/**
+ * Find all DOM elements whose `data-source-file` attribute matches the given source location.
+ * @param location - The source location to match against
+ * @returns All matching elements (may be empty)
+ */
+export declare function findElementsBySourceLocation(location: SourceLocation): HTMLElement[];
 /**
  * Derive a human-readable label from the injected source file name, if present.
  * @param element - The DOM element

package/dist/design/interactions/utils/sourceUtils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sourceUtils.d.ts","sourceRoot":"","sources":["../../../../src/design/interactions/utils/sourceUtils.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAkCH,MAAM,WAAW,cAAc;IAC9B,QAAQ,EAAE,MAAM,CAAC;IACjB,UAAU,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,YAAY,EAAE,MAAM,GAAG,IAAI,CAAC;CAC5B;AAED;;;;GAIG;AACH,wBAAgB,2BAA2B,CAC1C,OAAO,EAAE,WAAW,GAAG,IAAI,GAAG,SAAS,GACrC,cAAc,GAAG,IAAI,CAWvB;AAED;;;;GAIG;AACH,wBAAgB,kBAAkB,CAAC,OAAO,EAAE,WAAW,GAAG,IAAI,GAAG,SAAS,GAAG,MAAM,CAiBlF"}
+{"version":3,"file":"sourceUtils.d.ts","sourceRoot":"","sources":["../../../../src/design/interactions/utils/sourceUtils.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAkCH,MAAM,WAAW,cAAc;IAC9B,QAAQ,EAAE,MAAM,CAAC;IACjB,UAAU,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,YAAY,EAAE,MAAM,GAAG,IAAI,CAAC;CAC5B;AAED;;;;GAIG;AACH,wBAAgB,2BAA2B,CAC1C,OAAO,EAAE,WAAW,GAAG,IAAI,GAAG,SAAS,GACrC,cAAc,GAAG,IAAI,CAWvB;AAED;;;;GAIG;AACH,wBAAgB,4BAA4B,CAAC,QAAQ,EAAE,cAAc,GAAG,WAAW,EAAE,CAepF;AAED;;;;GAIG;AACH,wBAAgB,kBAAkB,CAAC,OAAO,EAAE,WAAW,GAAG,IAAI,GAAG,SAAS,GAAG,MAAM,CAiBlF"}

package/dist/design/interactions/utils/sourceUtils.js

@@ -42,6 +42,25 @@ export function getSourceFromDataAttributes(element) {
     }
     return parseSourceFileAttribute(source);
 }
+/**
+ * Find all DOM elements whose `data-source-file` attribute matches the given source location.
+ * @param location - The source location to match against
+ * @returns All matching elements (may be empty)
+ */
+export function findElementsBySourceLocation(location) {
+    const results = [];
+    const elements = document.querySelectorAll("[data-source-file]");
+    for (const el of elements) {
+        const elSource = getSourceFromDataAttributes(el);
+        if (elSource &&
+            elSource.fileName === location.fileName &&
+            elSource.lineNumber === location.lineNumber &&
+            elSource.columnNumber === location.columnNumber) {
+            results.push(el);
+        }
+    }
+    return results;
+}
 /**
  * Derive a human-readable label from the injected source file name, if present.
  * @param element - The DOM element

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@salesforce/webapp-experimental",
   "description": "[experimental] Core package for Salesforce Web Applications",
-  "version": "1.68.0",
+  "version": "1.69.0",
   "license": "SEE LICENSE IN LICENSE.txt",
   "type": "module",
   "main": "./dist/index.js",
@@ -45,7 +45,7 @@
   },
   "dependencies": {
     "@salesforce/core": "^8.23.4",
-    "@salesforce/sdk-data": "^1.68.0",
+    "@salesforce/sdk-data": "^1.69.0",
     "axios": "^1.7.7",
     "micromatch": "^4.0.8",
     "path-to-regexp": "^8.3.0"