@salesforce/webapp-experimental 1.47.0 → 1.48.0

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

@@ -0,0 +1,649 @@
+/**
+ * Design Mode Interactions (Bundled)
+ *
+ * This file is auto-generated by esbuild from the modular design mode interactions files.
+ * Do not edit this file directly - edit the modules in src/design/interactions/
+ */
+(function () {
+
+"use strict";
+(() => {
+  var __defProp = Object.defineProperty;
+  var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+  var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+
+  // src/design/interactions/utils/cssUtils.ts
+  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;
+  }
+  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
+    };
+  }
+
+  // src/design/interactions/utils/sourceUtils.ts
+  function parseOptionalInt(value) {
+    if (value === null || value === void 0 || value === "") {
+      return null;
+    }
+    const parsed = Number.parseInt(String(value), 10);
+    return Number.isFinite(parsed) ? parsed : null;
+  }
+  function parseSourceFileAttribute(value) {
+    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])
+    };
+  }
+  function getSourceFromDataAttributes(element) {
+    if (!element) {
+      return null;
+    }
+    const source = element.getAttribute("data-source-file") || null;
+    if (!source) {
+      return null;
+    }
+    return parseSourceFileAttribute(source);
+  }
+  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);
+    const parts = fileName.split(/[/\\]/);
+    const baseName = parts[parts.length - 1] || fileName;
+    console.log("baseName", baseName);
+    return baseName;
+  }
+
+  // src/design/interactions/communicationManager.ts
+  var CommunicationManager = class {
+    constructor() {
+    }
+    /**
+     * Notify the extension about a selected component
+     * @param element - The selected element
+     */
+    notifyComponentSelected(element) {
+      const label = getLabelFromSource(element);
+      const wasSelected = element.classList.contains("design-mode-selected");
+      if (wasSelected) {
+        element.classList.remove("design-mode-selected");
+      }
+      const styles = getElementStyles(element);
+      if (wasSelected) {
+        element.classList.add("design-mode-selected");
+      }
+      const debugSource = getSourceFromDataAttributes(element);
+      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
+              }
+            },
+            "*"
+          );
+        }
+      } catch (error) {
+        console.log("Could not notify extension:", error);
+      }
+      window.selectedComponentInfo = {
+        name: label,
+        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,
+                  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);
+      }
+    }
+  };
+
+  // src/design/interactions/componentMatcher.ts
+  var ComponentMatcher = class {
+    /**
+     * 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;
+      }
+      const closest = typeof target.closest === "function" ? target.closest("[data-source-file]") : null;
+      if (closest && closest !== document.body && closest !== document.documentElement) {
+        return closest;
+      }
+      let current = target;
+      while (current && current !== document.body && current !== document.documentElement) {
+        if (this.isHighlightableElement(current)) {
+          return current;
+        }
+        current = current.parentElement;
+      }
+      return null;
+    }
+  };
+
+  // src/design/interactions/editableManager.ts
+  var EditableManager = class {
+    constructor(communicationManager) {
+      __publicField(this, "communicationManager");
+      __publicField(this, "textTags");
+      __publicField(this, "boundHandleBlur");
+      __publicField(this, "boundHandleKeydown");
+      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) {
+        element.dataset.originalText = newText;
+        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();
+      }
+    }
+  };
+
+  // src/design/interactions/eventHandlers.ts
+  var EventHandlers = class {
+    constructor(isInteractionsActive, componentMatcher, styleManager, editableManager, communicationManager) {
+      __publicField(this, "isInteractionsActive");
+      __publicField(this, "componentMatcher");
+      __publicField(this, "styleManager");
+      __publicField(this, "editableManager");
+      __publicField(this, "communicationManager");
+      __publicField(this, "currentHighlighted");
+      __publicField(this, "selectedElement");
+      this.isInteractionsActive = isInteractionsActive;
+      this.componentMatcher = componentMatcher;
+      this.styleManager = styleManager;
+      this.editableManager = editableManager;
+      this.communicationManager = communicationManager;
+      this.currentHighlighted = null;
+      this.selectedElement = null;
+      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;
+      }
+      if (this.selectedElement) {
+        this.styleManager.deselectElement(this.selectedElement);
+        this.editableManager.removeEditable(this.selectedElement);
+      }
+      if (this.currentHighlighted) {
+        this.styleManager.unhighlightElement(this.currentHighlighted);
+        this.currentHighlighted = null;
+      }
+      this.selectedElement = element;
+      this.styleManager.selectElement(element);
+      this.editableManager.makeEditableIfText(element);
+      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;
+    }
+  };
+
+  // src/design/interactions/styleManager.ts
+  var StyleManager = class {
+    constructor() {
+      __publicField(this, "styleId");
+      __publicField(this, "stylesAdded");
+      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");
+    }
+  };
+
+  // src/design/interactions/interactionsController.ts
+  var InteractionsController = class {
+    constructor(enabled = true) {
+      __publicField(this, "enabled");
+      __publicField(this, "isActive");
+      __publicField(this, "componentMatcher");
+      __publicField(this, "styleManager");
+      __publicField(this, "communicationManager");
+      __publicField(this, "editableManager");
+      __publicField(this, "eventHandlers");
+      this.enabled = enabled;
+      this.isActive = false;
+      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);
+      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();
+    }
+  };
+
+  // src/design/interactions/index.ts
+  var interactions = new InteractionsController(true);
+  if (typeof document !== "undefined") {
+    if (document.readyState === "loading") {
+      document.addEventListener("DOMContentLoaded", () => {
+        interactions.initialize();
+      });
+    } else {
+      interactions.initialize();
+    }
+  }
+  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?.();
+      }
+    });
+  }
+})();
+
+})();
+

package/dist/design/index.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Copyright (c) 2026, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
+/**
+ * Read the bundled design mode interactions script content.
+ * @returns The script content, or null if the file does not exist (e.g. build:design not run)
+ * @throws Error if the file exists but cannot be read
+ */
+export declare function getDesignModeScriptContent(): string | null;
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/design/index.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAUH;;;;GAIG;AACH,wBAAgB,0BAA0B,IAAI,MAAM,GAAG,IAAI,CAK1D"}

package/dist/design/index.js

@@ -0,0 +1,21 @@
+/**
+ * Copyright (c) 2026, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
+import { readFileSync, existsSync } from "node:fs";
+import { join, dirname } from "node:path";
+import { fileURLToPath } from "node:url";
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const DESIGN_MODE_SCRIPT_PATH = join(__dirname, "../../dist/design/design-mode-interactions.js");
+/**
+ * Read the bundled design mode interactions script content.
+ * @returns The script content, or null if the file does not exist (e.g. build:design not run)
+ * @throws Error if the file exists but cannot be read
+ */
+export function getDesignModeScriptContent() {
+    if (!existsSync(DESIGN_MODE_SCRIPT_PATH)) {
+        return null;
+    }
+    return readFileSync(DESIGN_MODE_SCRIPT_PATH, "utf-8");
+}