@salesforce/webapp-experimental 1.47.0 → 1.48.1

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

@@ -0,0 +1,38 @@
+/**
+ * Copyright (c) 2026, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
+export declare class InteractionsController {
+    private enabled;
+    private isActive;
+    private componentMatcher;
+    private styleManager;
+    private communicationManager;
+    private editableManager;
+    private eventHandlers;
+    constructor(enabled?: boolean);
+    /**
+     * Initialize the design mode interactions
+     */
+    initialize(): void;
+    /**
+     * Enable the design mode interactions
+     */
+    enable(): void;
+    /**
+     * Disable the design mode interactions
+     */
+    disable(): void;
+    /**
+     * Apply style changes to the selected element
+     * @param property - CSS property name
+     * @param value - CSS property value
+     */
+    applyStyleChange(property: string, value: string): void;
+    /**
+     * Cleanup and remove event listeners
+     */
+    destroy(): void;
+}
+//# sourceMappingURL=interactionsController.d.ts.map

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

@@ -0,0 +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;IAmB1B;;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;IAOvD;;OAEG;IACH,OAAO,IAAI,IAAI;CAOf"}

package/dist/design/interactions/interactionsController.js

@@ -0,0 +1,86 @@
+/**
+ * Copyright (c) 2026, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
+/**
+ * Interactions Controller Module
+ * Main controller that orchestrates all interaction modules
+ */
+import { CommunicationManager } from "./communicationManager.js";
+import { ComponentMatcher } from "./componentMatcher.js";
+import { EditableManager } from "./editableManager.js";
+import { EventHandlers } from "./eventHandlers.js";
+import { StyleManager } from "./styleManager.js";
+export class InteractionsController {
+    enabled;
+    isActive;
+    componentMatcher;
+    styleManager;
+    communicationManager;
+    editableManager;
+    eventHandlers;
+    constructor(enabled = true) {
+        this.enabled = enabled;
+        this.isActive = false;
+        // Initialize modules
+        this.componentMatcher = new ComponentMatcher();
+        this.styleManager = new StyleManager();
+        this.communicationManager = new CommunicationManager();
+        this.editableManager = new EditableManager(this.communicationManager);
+        this.eventHandlers = new EventHandlers(() => this.isActive, this.componentMatcher, this.styleManager, this.editableManager, this.communicationManager);
+    }
+    /**
+     * Initialize the design mode interactions
+     */
+    initialize() {
+        if (!this.enabled) {
+            console.log("Design Mode Interactions disabled");
+            return;
+        }
+        console.log("Initializing Design Mode Interactions...");
+        this.styleManager.addHighlightStyles();
+        document.addEventListener("mouseover", this.eventHandlers.handleMouseOver);
+        document.addEventListener("mouseleave", this.eventHandlers.handleMouseLeave);
+        // Use capture phase so we run before links/buttons/dropdowns and can preventDefault/stopPropagation
+        document.addEventListener("click", this.eventHandlers.handleClick, true);
+        console.log("Design Mode Interactions initialized!");
+        this.communicationManager.notifyInitializationComplete();
+    }
+    /**
+     * Enable the design mode interactions
+     */
+    enable() {
+        this.isActive = true;
+        console.log("Design Mode Interactions enabled");
+    }
+    /**
+     * Disable the design mode interactions
+     */
+    disable() {
+        this.isActive = false;
+        this.eventHandlers.clearAll();
+        console.log("Design Mode Interactions disabled");
+    }
+    /**
+     * Apply style changes to the selected element
+     * @param property - CSS property name
+     * @param value - CSS property value
+     */
+    applyStyleChange(property, value) {
+        const selectedElement = this.eventHandlers.getSelectedElement();
+        if (selectedElement) {
+            selectedElement.style[property] = value;
+        }
+    }
+    /**
+     * Cleanup and remove event listeners
+     */
+    destroy() {
+        document.removeEventListener("mouseover", this.eventHandlers.handleMouseOver);
+        document.removeEventListener("mouseleave", this.eventHandlers.handleMouseLeave);
+        document.removeEventListener("click", this.eventHandlers.handleClick, true);
+        this.styleManager.removeHighlightStyles();
+        this.eventHandlers.clearAll();
+    }
+}

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

@@ -0,0 +1,49 @@
+/**
+ * Copyright (c) 2026, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
+/**
+ * Style Manager Module
+ * Handles CSS injection and style management for highlighting
+ */
+export declare class StyleManager {
+    private styleId;
+    private stylesAdded;
+    constructor();
+    /**
+     * Add CSS styles for highlighting to the document
+     */
+    addHighlightStyles(): void;
+    /**
+     * Remove highlight styles from the document
+     */
+    removeHighlightStyles(): void;
+    /**
+     * Get the CSS styles for highlighting
+     * @private
+     * @returns CSS styles
+     */
+    private _getStyles;
+    /**
+     * Apply highlight class to an element
+     * @param element - The element to highlight
+     */
+    highlightElement(element: HTMLElement): void;
+    /**
+     * Remove highlight class from an element
+     * @param element - The element to unhighlight
+     */
+    unhighlightElement(element: HTMLElement): void;
+    /**
+     * Apply selected class to an element
+     * @param element - The element to select
+     */
+    selectElement(element: HTMLElement): void;
+    /**
+     * Remove selected class from an element
+     * @param element - The element to deselect
+     */
+    deselectElement(element: HTMLElement): void;
+}
+//# sourceMappingURL=styleManager.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"styleManager.d.ts","sourceRoot":"","sources":["../../../src/design/interactions/styleManager.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH;;;GAGG;AAEH,qBAAa,YAAY;IACxB,OAAO,CAAC,OAAO,CAAS;IACxB,OAAO,CAAC,WAAW,CAAU;;IAO7B;;OAEG;IACH,kBAAkB,IAAI,IAAI;IAY1B;;OAEG;IACH,qBAAqB,IAAI,IAAI;IAQ7B;;;;OAIG;IACH,OAAO,CAAC,UAAU;IAiBlB;;;OAGG;IACH,gBAAgB,CAAC,OAAO,EAAE,WAAW,GAAG,IAAI;IAI5C;;;OAGG;IACH,kBAAkB,CAAC,OAAO,EAAE,WAAW,GAAG,IAAI;IAI9C;;;OAGG;IACH,aAAa,CAAC,OAAO,EAAE,WAAW,GAAG,IAAI;IAIzC;;;OAGG;IACH,eAAe,CAAC,OAAO,EAAE,WAAW,GAAG,IAAI;CAG3C"}

package/dist/design/interactions/styleManager.js

@@ -0,0 +1,89 @@
+/**
+ * Copyright (c) 2026, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
+/**
+ * Style Manager Module
+ * Handles CSS injection and style management for highlighting
+ */
+export class StyleManager {
+    styleId;
+    stylesAdded;
+    constructor() {
+        this.styleId = "design-mode-styles";
+        this.stylesAdded = false;
+    }
+    /**
+     * Add CSS styles for highlighting to the document
+     */
+    addHighlightStyles() {
+        if (this.stylesAdded) {
+            return;
+        }
+        const style = document.createElement("style");
+        style.id = this.styleId;
+        style.textContent = this._getStyles();
+        document.head.appendChild(style);
+        this.stylesAdded = true;
+    }
+    /**
+     * Remove highlight styles from the document
+     */
+    removeHighlightStyles() {
+        const style = document.getElementById(this.styleId);
+        if (style) {
+            style.remove();
+            this.stylesAdded = false;
+        }
+    }
+    /**
+     * Get the CSS styles for highlighting
+     * @private
+     * @returns CSS styles
+     */
+    _getStyles() {
+        return `
+      .design-mode-highlight {
+        outline: 4px dashed #007acc !important;
+        outline-offset: -4px !important;
+        transition: all 0.2s ease !important;
+        position: relative !important;
+        cursor: pointer !important;
+      }
+      .design-mode-selected {
+        outline: 5px dashed #ff6b35 !important;
+        outline-offset: -5px !important;
+        position: relative !important;
+      }
+    `;
+    }
+    /**
+     * Apply highlight class to an element
+     * @param element - The element to highlight
+     */
+    highlightElement(element) {
+        element.classList.add("design-mode-highlight");
+    }
+    /**
+     * Remove highlight class from an element
+     * @param element - The element to unhighlight
+     */
+    unhighlightElement(element) {
+        element.classList.remove("design-mode-highlight");
+    }
+    /**
+     * Apply selected class to an element
+     * @param element - The element to select
+     */
+    selectElement(element) {
+        element.classList.add("design-mode-selected");
+    }
+    /**
+     * Remove selected class from an element
+     * @param element - The element to deselect
+     */
+    deselectElement(element) {
+        element.classList.remove("design-mode-selected");
+    }
+}

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

@@ -0,0 +1,22 @@
+/**
+ * Copyright (c) 2026, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
+/**
+ * CSS Utility Functions
+ * Helper functions for CSS value parsing and conversion
+ */
+/**
+ * Parse pixel value from CSS string (e.g., "10px" -> 10)
+ * @param value - CSS value string
+ * @returns Numeric value in pixels
+ */
+export declare function parsePixelValue(value: string): number;
+/**
+ * Get all style values relevant to UI controls for an element
+ * @param element - The element
+ * @returns Object with style values (plain values safe for postMessage)
+ */
+export declare function getElementStyles(element: HTMLElement | null | undefined): Record<string, number | string>;
+//# sourceMappingURL=cssUtils.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"cssUtils.d.ts","sourceRoot":"","sources":["../../../../src/design/interactions/utils/cssUtils.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH;;;GAGG;AAEH;;;;GAIG;AACH,wBAAgB,eAAe,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,CAOrD;AAED;;;;GAIG;AACH,wBAAgB,gBAAgB,CAC/B,OAAO,EAAE,WAAW,GAAG,IAAI,GAAG,SAAS,GACrC,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC,CA+BjC"}

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

@@ -0,0 +1,46 @@
+/**
+ * Copyright (c) 2026, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
+/**
+ * CSS Utility Functions
+ * Helper functions for CSS value parsing and conversion
+ */
+/**
+ * Parse pixel value from CSS string (e.g., "10px" -> 10)
+ * @param value - CSS value string
+ * @returns Numeric value in pixels
+ */
+export function parsePixelValue(value) {
+    if (!value || typeof value !== "string") {
+        return 0;
+    }
+    const match = value.match(/^(\d+(?:\.\d+)?)px$/);
+    const numberPart = match?.[1];
+    return numberPart ? Number.parseFloat(numberPart) : 0;
+}
+/**
+ * Get all style values relevant to UI controls for an element
+ * @param element - The element
+ * @returns Object with style values (plain values safe for postMessage)
+ */
+export function getElementStyles(element) {
+    if (!element) {
+        return {};
+    }
+    const computed = window.getComputedStyle(element);
+    const px = (prop) => parsePixelValue(computed[prop] || "");
+    return {
+        paddingTop: px("paddingTop"),
+        paddingRight: px("paddingRight"),
+        paddingBottom: px("paddingBottom"),
+        paddingLeft: px("paddingLeft"),
+        marginTop: px("marginTop"),
+        marginRight: px("marginRight"),
+        marginBottom: px("marginBottom"),
+        marginLeft: px("marginLeft"),
+        backgroundColor: computed.backgroundColor,
+        fontFamily: computed.fontFamily,
+    };
+}

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

@@ -0,0 +1,23 @@
+/**
+ * Copyright (c) 2026, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
+export interface SourceLocation {
+    fileName: string;
+    lineNumber: number | null;
+    columnNumber: number | null;
+}
+/**
+ * Extract source location information from data attributes.
+ * @param element - The DOM element
+ * @returns Source location information, or null if missing.
+ */
+export declare function getSourceFromDataAttributes(element: HTMLElement | null | undefined): SourceLocation | null;
+/**
+ * Derive a human-readable label from the injected source file name, if present.
+ * @param element - The DOM element
+ * @returns A label suitable for UI display
+ */
+export declare function getLabelFromSource(element: HTMLElement | null | undefined): string;
+//# sourceMappingURL=sourceUtils.d.ts.map

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

@@ -0,0 +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"}

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

@@ -0,0 +1,64 @@
+/**
+ * Copyright (c) 2026, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
+/**
+ * Source/Label Utility Functions
+ * Helper functions for extracting source metadata injected into DOM elements.
+ */
+function parseOptionalInt(value) {
+    if (value === null || value === undefined || value === "") {
+        return null;
+    }
+    const parsed = Number.parseInt(String(value), 10);
+    return Number.isFinite(parsed) ? parsed : null;
+}
+function parseSourceFileAttribute(value) {
+    // Current injection format: "<file>:<line>:<col>".
+    // Use a greedy file capture so Windows paths like "C:\foo\bar.tsx:12:34" work.
+    const match = /^(.*):(\d+):(\d+)$/.exec(value);
+    if (!match) {
+        return { fileName: value, lineNumber: null, columnNumber: null };
+    }
+    return {
+        fileName: match[1] ?? value,
+        lineNumber: parseOptionalInt(match[2]),
+        columnNumber: parseOptionalInt(match[3]),
+    };
+}
+/**
+ * Extract source location information from data attributes.
+ * @param element - The DOM element
+ * @returns Source location information, or null if missing.
+ */
+export function getSourceFromDataAttributes(element) {
+    if (!element) {
+        return null;
+    }
+    const source = element.getAttribute("data-source-file") || null;
+    if (!source) {
+        return null;
+    }
+    return parseSourceFileAttribute(source);
+}
+/**
+ * Derive a human-readable label from the injected source file name, if present.
+ * @param element - The DOM element
+ * @returns A label suitable for UI display
+ */
+export function getLabelFromSource(element) {
+    if (!element) {
+        return "";
+    }
+    const source = element.getAttribute("data-source-file");
+    if (!source) {
+        return element.tagName ? element.tagName.toLowerCase() : "";
+    }
+    const { fileName } = parseSourceFileAttribute(source);
+    // Support both POSIX and Windows-style separators.
+    const parts = fileName.split(/[/\\]/);
+    const baseName = parts[parts.length - 1] || fileName;
+    console.log("baseName", baseName);
+    return baseName;
+}

package/dist/index.d.ts

@@ -6,4 +6,5 @@
 export * from "./api/index.js";
 export * from "./app/index.js";
 export * from "./proxy/index.js";
+export * from "./design/index.js";
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAGH,cAAc,gBAAgB,CAAC;AAC/B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,kBAAkB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAGH,cAAc,gBAAgB,CAAC;AAC/B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,kBAAkB,CAAC;AACjC,cAAc,mBAAmB,CAAC"}

package/dist/index.js

@@ -7,3 +7,4 @@
 export * from "./api/index.js";
 export * from "./app/index.js";
 export * from "./proxy/index.js";
+export * from "./design/index.js";

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@salesforce/webapp-experimental",
   "description": "[experimental] Core package for Salesforce Web Applications",
-  "version": "1.47.0",
+  "version": "1.48.1",
   "license": "SEE LICENSE IN LICENSE.txt",
   "type": "module",
   "main": "./dist/index.js",
@@ -24,13 +24,18 @@
       "types": "./dist/proxy/index.d.ts",
       "import": "./dist/proxy/index.js"
     },
+    "./design": {
+      "types": "./dist/design/index.d.ts",
+      "import": "./dist/design/index.js"
+    },
     "./package.json": "./package.json"
   },
   "files": [
     "dist"
   ],
   "scripts": {
-    "build": "tsc --build",
+    "build": "npm run build:design && tsc --build",
+    "build:design": "node src/design/bundle-interactions.mjs",
     "postbuild": "node scripts/copy-templates.cjs",
     "clean": "rm -rf dist tsconfig.tsbuildinfo",
     "dev": "tsc --build --watch",
@@ -40,13 +45,14 @@
   },
   "dependencies": {
     "@salesforce/core": "^8.23.4",
-    "@salesforce/sdk-data": "^1.47.0",
+    "@salesforce/sdk-data": "^1.48.1",
     "axios": "^1.7.7",
     "micromatch": "^4.0.8",
     "path-to-regexp": "^8.3.0"
   },
   "devDependencies": {
     "@types/micromatch": "^4.0.10",
+    "esbuild": "^0.24.0",
     "vitest": "^4.0.6"
   },
   "engines": {
@@ -55,5 +61,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "664bfe805c8d96ec2c7b8d3ce403295f420bf42c"
+  "gitHead": "3a6ed78f0171a5106e8716c8154ef20e2962bf59"
 }