@salesforce/ui-bundle 10.0.0 → 10.2.0

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

@@ -1,830 +0,0 @@
-/**
- * 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/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 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 parseSourceLocation(sl) {
-    if (!sl || typeof sl !== "object") return void 0;
-    const obj = sl;
-    return {
-      fileName: String(obj.sourceFile ?? ""),
-      lineNumber: typeof obj.lineNumber === "number" ? obj.lineNumber : null,
-      columnNumber: typeof obj.columnNumber === "number" ? obj.columnNumber : null
-    };
-  }
-  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/editableManager.ts
-  var TEXT_TAGS = ["H1", "H2", "H3", "H4", "H5", "H6", "P", "SPAN", "A", "BUTTON", "LABEL"];
-  var EditableManager = class {
-    constructor(communicationManager) {
-      __publicField(this, "communicationManager");
-      __publicField(this, "boundHandleBlur");
-      __publicField(this, "boundHandleKeydown");
-      __publicField(this, "boundHandleInput");
-      __publicField(this, "editableGroup");
-      this.communicationManager = communicationManager;
-      this.boundHandleBlur = this._handleBlur.bind(this);
-      this.boundHandleKeydown = this._handleKeydown.bind(this);
-      this.boundHandleInput = this._handleInput.bind(this);
-      this.editableGroup = [];
-    }
-    makeEditableIfText(element) {
-      if (!this._isTextElement(element)) {
-        return;
-      }
-      const source = getSourceFromDataAttributes(element);
-      const siblings = source ? findElementsBySourceLocation(source) : [];
-      const others = siblings.filter((el) => el !== element);
-      this.editableGroup = [element, ...others];
-      for (const el of this.editableGroup) {
-        el.dataset.originalText = el.textContent ?? "";
-      }
-      element.contentEditable = "true";
-      element.addEventListener("blur", this.boundHandleBlur);
-      element.addEventListener("keydown", this.boundHandleKeydown);
-      element.addEventListener("input", this.boundHandleInput);
-    }
-    removeEditable(element) {
-      if (element.contentEditable === "true") {
-        element.contentEditable = "false";
-      }
-      element.removeEventListener("blur", this.boundHandleBlur);
-      element.removeEventListener("keydown", this.boundHandleKeydown);
-      element.removeEventListener("input", this.boundHandleInput);
-      for (const el of this.editableGroup) {
-        delete el.dataset.originalText;
-      }
-      this.editableGroup = [];
-    }
-    _isTextElement(element) {
-      return TEXT_TAGS.includes(element.tagName) && (element.textContent ?? "").trim().length > 0 && element.dataset.textType === "static";
-    }
-    _handleInput(e) {
-      const primary = e.target;
-      const text = primary.textContent ?? "";
-      for (let i = 1; i < this.editableGroup.length; i++) {
-        this.editableGroup[i].textContent = text;
-      }
-    }
-    _handleBlur(e) {
-      const element = e.target;
-      const newText = element.textContent ?? "";
-      const originalText = element.dataset.originalText ?? "";
-      if (newText !== originalText) {
-        for (const el of this.editableGroup) {
-          el.dataset.originalText = newText;
-        }
-        if (this.communicationManager) {
-          this.communicationManager.notifyTextChange(element, originalText, newText);
-        }
-      }
-      this.removeEditable(element);
-    }
-    _handleKeydown(e) {
-      const element = e.target;
-      if (e.key === "Enter" && !e.shiftKey) {
-        e.preventDefault();
-        element.blur();
-      }
-      if (e.key === "Escape") {
-        for (const el of this.editableGroup) {
-          if (el.dataset.originalText) {
-            el.textContent = el.dataset.originalText;
-          }
-        }
-        element.blur();
-      }
-    }
-  };
-
-  // src/design/interactions/utils/cssUtils.ts
-  function getElementStyles(element) {
-    if (!element) return {};
-    const computed = window.getComputedStyle(element);
-    const inlineStyle = element.style;
-    const prop = (name, fallback) => ({
-      inline: inlineStyle[name] || (fallback ? inlineStyle[fallback] : "") || "",
-      computed: (fallback ? computed[fallback] : computed[name]) || ""
-    });
-    const box = (shorthand, top, right, bottom, left) => {
-      let inlineValue = inlineStyle[shorthand] || "";
-      if (!inlineValue) {
-        const iT = inlineStyle[top] || "", iR = inlineStyle[right] || "", iB = inlineStyle[bottom] || "", iL = inlineStyle[left] || "";
-        if (iT || iR || iB || iL) {
-          inlineValue = `${iT || "0px"} ${iR || "0px"} ${iB || "0px"} ${iL || "0px"}`;
-        }
-      }
-      return {
-        inline: inlineValue,
-        computed: `${computed[top] || ""} ${computed[right] || ""} ${computed[bottom] || ""} ${computed[left] || ""}`
-      };
-    };
-    return {
-      width: prop("width"),
-      minWidth: prop("minWidth"),
-      maxWidth: prop("maxWidth"),
-      height: prop("height"),
-      minHeight: prop("minHeight"),
-      maxHeight: prop("maxHeight"),
-      overflow: prop("overflow"),
-      padding: box("padding", "paddingTop", "paddingRight", "paddingBottom", "paddingLeft"),
-      margin: box("margin", "marginTop", "marginRight", "marginBottom", "marginLeft"),
-      backgroundColor: prop("backgroundColor"),
-      borderWidth: box(
-        "borderWidth",
-        "borderTopWidth",
-        "borderRightWidth",
-        "borderBottomWidth",
-        "borderLeftWidth"
-      ),
-      borderStyle: prop("borderStyle", "borderTopStyle"),
-      borderColor: prop("borderColor", "borderTopColor"),
-      borderRadius: box(
-        "borderRadius",
-        "borderTopLeftRadius",
-        "borderTopRightRadius",
-        "borderBottomRightRadius",
-        "borderBottomLeftRadius"
-      ),
-      color: prop("color"),
-      fontFamily: prop("fontFamily"),
-      fontSize: prop("fontSize"),
-      fontWeight: prop("fontWeight"),
-      fontStyle: prop("fontStyle"),
-      lineHeight: prop("lineHeight"),
-      letterSpacing: prop("letterSpacing"),
-      textAlign: prop("textAlign"),
-      textDecoration: prop("textDecoration", "textDecorationLine"),
-      textTransform: prop("textTransform")
-    };
-  }
-
-  // src/design/interactions/communicationManager.ts
-  function getMediaInfo(element) {
-    switch (element.tagName) {
-      case "IMG": {
-        const img = element;
-        return {
-          tag: "img",
-          src: img.getAttribute("src") ?? "",
-          alt: img.getAttribute("alt") ?? "",
-          width: img.getAttribute("width") ?? "",
-          height: img.getAttribute("height") ?? ""
-        };
-      }
-      default:
-        return void 0;
-    }
-  }
-  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);
-      const textType = element.dataset?.textType ?? "none";
-      const hasNonEditableText = TEXT_TAGS.includes(element.tagName) && (textType === "dynamic" || textType === "mixed");
-      const media = getMediaInfo(element);
-      try {
-        if (window.parent !== window) {
-          window.parent.postMessage(
-            {
-              type: "component-selected",
-              component: {
-                name: label,
-                tagName: element.tagName,
-                styles: {
-                  ...styles
-                },
-                debugSource,
-                hasNonEditableText,
-                ...media ? { media } : {}
-              }
-            },
-            "*"
-          );
-        }
-      } catch (error) {
-        console.log("Could not notify extension:", error);
-      }
-      window.selectedComponentInfo = {
-        name: label,
-        element,
-        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);
-      const debugSource = getSourceFromDataAttributes(element);
-      try {
-        if (window.parent !== window) {
-          window.parent.postMessage(
-            {
-              type: "text-changed",
-              change: {
-                componentName: label,
-                tagName: element.tagName,
-                originalText,
-                newText,
-                debugSource
-              }
-            },
-            "*"
-          );
-        }
-      } 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 {
-    constructor(options = {}) {
-      __publicField(this, "allowlist");
-      this.allowlist = options.allowlist ?? [];
-    }
-    /**
-     * 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");
-    }
-    matchesList(element, selectors) {
-      return selectors.some((selector) => element.matches(selector));
-    }
-    /**
-     * 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;
-      }
-      if (!this.hasSourceMetadata(element)) {
-        return false;
-      }
-      if (this.allowlist.length > 0) {
-        return this.matchesList(element, this.allowlist);
-      }
-      return true;
-    }
-    /**
-     * 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 && this.isHighlightableElement(closest)) {
-        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/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, "currentHighlightedElements");
-      __publicField(this, "selectedElement");
-      __publicField(this, "selectedElements");
-      this.isInteractionsActive = isInteractionsActive;
-      this.componentMatcher = componentMatcher;
-      this.styleManager = styleManager;
-      this.editableManager = editableManager;
-      this.communicationManager = communicationManager;
-      this.currentHighlightedElements = [];
-      this.selectedElement = null;
-      this.selectedElements = [];
-      this.handleMouseOver = this.handleMouseOver.bind(this);
-      this.handleMouseLeave = this.handleMouseLeave.bind(this);
-      this.handleClick = this.handleClick.bind(this);
-    }
-    _findHighlightableElement(target) {
-      return this.componentMatcher.findHighlightableElement(target);
-    }
-    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.currentHighlightedElements.includes(element) || this.selectedElement && this.selectedElement === element) {
-        return;
-      }
-      if (this.currentHighlightedElements.length > 0 && !this.currentHighlightedElements[0].classList.contains("design-mode-selected")) {
-        this.styleManager.unhighlightElements(this.currentHighlightedElements);
-        this.currentHighlightedElements = [];
-      }
-      const allElements = findElementsBySourceLocation(getSourceFromDataAttributes(element));
-      this.styleManager.highlightElements(allElements);
-      this.currentHighlightedElements = allElements;
-    }
-    handleMouseLeave() {
-      if (!this.isInteractionsActive()) {
-        return;
-      }
-      if (this.currentHighlightedElements.length > 0 && !this.currentHighlightedElements[0].classList.contains("design-mode-selected")) {
-        this.styleManager.unhighlightElements(this.currentHighlightedElements);
-        this.currentHighlightedElements = [];
-      }
-    }
-    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.deselectElements(this.selectedElements);
-        this.editableManager.removeEditable(this.selectedElement);
-      }
-      if (this.currentHighlightedElements.length > 0) {
-        this.styleManager.unhighlightElements(this.currentHighlightedElements);
-        this.currentHighlightedElements = [];
-      }
-      this.selectedElement = element;
-      const allElements = findElementsBySourceLocation(getSourceFromDataAttributes(element));
-      this.selectedElements = allElements;
-      this.styleManager.selectElements(allElements);
-      this.editableManager.makeEditableIfText(element);
-      this.communicationManager.notifyComponentSelected(element);
-    }
-    clearAll() {
-      if (this.currentHighlightedElements.length > 0) {
-        this.styleManager.unhighlightElements(this.currentHighlightedElements);
-        this.currentHighlightedElements = [];
-      }
-      if (this.selectedElement) {
-        this.styleManager.deselectElements(this.selectedElements);
-        this.editableManager.removeEditable(this.selectedElement);
-        this.selectedElement = null;
-        this.selectedElements = [];
-      }
-    }
-    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 one or more elements
-     * @param elements - The elements to highlight
-     */
-    highlightElements(elements) {
-      for (const el of elements) {
-        el.classList.add("design-mode-highlight");
-      }
-    }
-    /**
-     * Remove highlight class from one or more elements
-     * @param elements - The elements to unhighlight
-     */
-    unhighlightElements(elements) {
-      for (const el of elements) {
-        el.classList.remove("design-mode-highlight");
-      }
-    }
-    /**
-     * Apply selected class to one or more elements
-     * @param elements - The elements to select
-     */
-    selectElements(elements) {
-      for (const el of elements) {
-        el.classList.add("design-mode-selected");
-      }
-    }
-    /**
-     * Remove selected class from one or more elements
-     * @param elements - The elements to deselect
-     */
-    deselectElements(elements) {
-      for (const el of elements) {
-        el.classList.remove("design-mode-selected");
-      }
-    }
-  };
-
-  // src/design/interactions/interactionsController.ts
-  var mediaAppliers = {
-    img: (el, attrs) => {
-      const img = el;
-      if (attrs.src !== void 0) img.setAttribute("src", attrs.src);
-      if (attrs.alt !== void 0) img.setAttribute("alt", attrs.alt);
-      if (attrs.width !== void 0) {
-        if (attrs.width === "") img.removeAttribute("width");
-        else img.setAttribute("width", attrs.width);
-      }
-      if (attrs.height !== void 0) {
-        if (attrs.height === "") img.removeAttribute("height");
-        else img.setAttribute("height", attrs.height);
-      }
-    }
-  };
-  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({
-        allowlist: [
-          "div",
-          "p",
-          "span",
-          "h1",
-          "h2",
-          "h3",
-          "h4",
-          "h5",
-          "h6",
-          "a",
-          "button",
-          "input",
-          "select",
-          "textarea",
-          "label",
-          "section",
-          "article",
-          "main",
-          "aside",
-          "header",
-          "footer",
-          "nav",
-          "figure",
-          "figcaption",
-          "ul",
-          "ol",
-          "li",
-          "table",
-          "tr",
-          "td",
-          "th",
-          "blockquote",
-          "img"
-        ]
-      });
-      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");
-    }
-    resolveTargets(sourceLocation) {
-      let location = sourceLocation ?? null;
-      if (!location?.fileName) {
-        const selectedElement = this.eventHandlers.getSelectedElement();
-        location = getSourceFromDataAttributes(selectedElement);
-      }
-      return location ? findElementsBySourceLocation(location) : [];
-    }
-    /**
-     * 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, sourceLocation) {
-      for (const el of this.resolveTargets(sourceLocation)) {
-        el.style[property] = value;
-      }
-    }
-    applyTextChange(text, sourceLocation) {
-      for (const el of this.resolveTargets(sourceLocation)) {
-        el.textContent = text;
-      }
-    }
-    /**
-     * Apply attribute changes to all elements at the given source location whose
-     * `tagName` matches `tag` (case-insensitive). Per-tag appliers declare which
-     * attributes are valid and how empty-string values are handled (e.g. for
-     * `img`, an empty `width`/`height` clears the attribute).
-     *
-     * No-op if the tag has no registered applier. When `sourceLocation` is
-     * omitted (live edit), the source is read from the currently selected
-     * element; when provided (undo/redo replay), it is used directly.
-     *
-     * To support a new tag, add an entry to {@link mediaAppliers}.
-     *
-     * @param tag - The HTML tag the change targets (e.g. `"img"`).
-     * @param attributes - Sparse map of attribute names to their new string values; `undefined` values are skipped.
-     * @param sourceLocation - Explicit source location for undo/redo; falls back to the selected element when omitted.
-     */
-    applyMediaChange(tag, attributes, sourceLocation) {
-      const applier = mediaAppliers[tag.toLowerCase()];
-      if (!applier) return;
-      const tagNameUpper = tag.toUpperCase();
-      for (const el of this.resolveTargets(sourceLocation)) {
-        if (el.tagName !== tagNameUpper) continue;
-        applier(el, attributes);
-      }
-    }
-    /**
-     * 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 ?? ""),
-          parseSourceLocation(typed.sourceLocation)
-        );
-      }
-      if (typed && typed.type === "text-change") {
-        interactions.applyTextChange(
-          String(typed.text ?? ""),
-          parseSourceLocation(typed.sourceLocation)
-        );
-      }
-      if (typed && typed.type === "media-change") {
-        const tag = typeof typed.tag === "string" ? typed.tag : "";
-        const rawAttributes = typed.attributes && typeof typed.attributes === "object" ? typed.attributes : {};
-        const attributes = {};
-        for (const [key, raw] of Object.entries(rawAttributes)) {
-          attributes[key] = raw === void 0 ? void 0 : String(raw);
-        }
-        if (tag) {
-          interactions.applyMediaChange(tag, attributes, parseSourceLocation(typed.sourceLocation));
-        }
-      }
-      if (typed && typed.type === "enable-interactions") {
-        window.enableInteractions?.();
-      }
-      if (typed && typed.type === "disable-interactions") {
-        window.disableInteractions?.();
-      }
-    });
-  }
-})();
-
-})();
-