document.addEventListener("DOMContentLoaded", function () {
  // pagesguru-core-marketing.js  v1.3
  // Changes in v1.3 (email-editor hardening, informed by
  // grapesjs-preset-newsletter's architecture):
  //   - Communication editor no longer loads webpage plugins
  //     (preset-webpage, bootstrap-5, lory-slider, style-bg/gradient/filter,
  //     custom-code, blocks-basic); keeps parser-postcss + tui-image-editor
  //   - Communication editor gets a minimal email canvas shell (grey
  //     background, 600px white container, email table/td resets) instead of
  //     the iMIS page skeleton; website editor frameContent unchanged
  //   - Communication editor gets a reduced, email-safe Style Manager
  //     (typography / background-color / spacing / borders / dimensions)
  //   - Inliner exposed as command "pg-get-inlined-html"; save path runs it
  //     through the command and aborts loudly (no stale persist) on failure
  //   - Communication save now emits a complete email document
  //     (buildEmailDocument): doctype + MSO namespaces + head <style> with
  //     resets, ExternalClass/MessageViewBody fixes, and mobile media
  //     queries — hybrid on top of the inlined table layout. Verified safe:
  //     RadEditor's filters persist head <style>, mso-* props, and MSO
  //     namespaces (proven with a known-good transactional template)
  //   - loadFromRadIntoGjs drops #pg-email-head-styles before fallback CSS
  //     extraction to avoid re-ingesting document chrome as project CSS
  //   - Communication editor gets an "Insert field" dropdown in the GrapesJS
  //     options panel (24 party.* merge tokens from the Telerik RTE config)
  //   - pgLinkPopover gains three Communication-only buttons that open the
  //     native iMIS link dialogs (CommunicationLinkEdit.aspx for
  //     communication preferences; ContentLinkDialog.aspx for Donate and
  //     Pay invoice) and write the returned href into the URL field
  //   - Unified embed support: config accepts websitePluginUrls /
  //     communicationPluginUrls (scripts loaded per editor context) and
  //     pluginLoaderFns.website / .communication (loader fns merged per
  //     editor context); loadLdJsonBlocks auto-invoke fallback is disabled
  //     for the communication editor. Flat legacy configs still work.
  // Changes in v1.2:
  //   - Supports delayed init when Telerik "Body" tab is clicked
  //   - Supports Communication Creator editor as well as standard ContentHtml editor
  //   - Prevents duplicate bootstrap per editor instance
  //   - Merged from pagesguru-core.js v1.1:
  //       - pgLinkPopover link editor (URL popover, iMIS + uploaded-files browsers)
  //       - html-edit code editor modal in addSaveCommand
  //       - text component allowInnerHTML override + link toolbar button wiring
  //       - drop-placeholder add/restore logic
  //       - paginated IQA image loading (500/page) with sorting
  //       - cleanProjectData &nbsp; stripping on load, &nbsp; cleanup on save
  //       - folder-asset-manager + beyond-form-component initializers

  const STANDARD_EDITOR_ID = "ctl00_TemplateBody_ContentEditorChildControl_BodyInput";
  const COMMUNICATION_EDITOR_ID =
    "ctl01_TemplateBody_WebPartManager1_gwpciNewCommunicationCreatorCommon_ciNewCommunicationCreatorCommon_CommunicationCreatorComposer_ContentHtmlEditor";

  const COMMUNICATION_BODY_VIEW_ID =
    "ctl01_TemplateBody_WebPartManager1_gwpciNewCommunicationCreatorCommon_ciNewCommunicationCreatorCommon_BodyPageView";

  const COMMUNICATION_TABSTRIP_ID =
    "ctl01_TemplateBody_WebPartManager1_gwpciNewCommunicationCreatorCommon_ciNewCommunicationCreatorCommon_RadTabStrip";

  const bootstrappedEditors = {};

  function isElementVisible(el) {
    return !!(
      el &&
      el.offsetParent !== null &&
      getComputedStyle(el).display !== "none"
    );
  }

  function getEditorTextarea(editorId) {
    if (editorId === STANDARD_EDITOR_ID) {
      return document.getElementById(editorId);
    }

    if (editorId === COMMUNICATION_EDITOR_ID) {
      return document.getElementById(editorId + "ContentHiddenTextarea");
    }

    return document.getElementById(editorId);
  }

  function getEditorWrapper(editorId) {
    return document.getElementById(editorId);
  }

  function isCommunicationBodyActive() {
    const bodyView = document.getElementById(COMMUNICATION_BODY_VIEW_ID);
    if (!bodyView) return false;

    return (
      !bodyView.classList.contains("rmpHidden") &&
      isElementVisible(bodyView)
    );
  }

  function getCommunicationBodyTabLink() {
    const tabStrip = document.getElementById(COMMUNICATION_TABSTRIP_ID);
    if (!tabStrip) return null;

    const links = tabStrip.querySelectorAll(".rtsLink");
    for (let i = 0; i < links.length; i++) {
      const text = (links[i].textContent || links[i].innerText || "")
        .replace(/\s+/g, " ")
        .trim();
      if (text === "Body") return links[i];
    }

    return null;
  }

  function waitForRadEditor(editorId, callback) {
    const MAX_WAIT = 8000;
    const INTERVAL = 200;
    const start = Date.now();

    const timer = setInterval(() => {
      const editor = typeof $find === "function" ? $find(editorId) : null;

      if (
        editor &&
        (
          typeof editor.get_html === "function" ||
          typeof editor.set_mode === "function"
        )
      ) {
        clearInterval(timer);
        callback(editor);
        return;
      }

      if (Date.now() - start > MAX_WAIT) {
        clearInterval(timer);
        console.warn("PageGuru: RadEditor not detected for", editorId);
      }
    }, INTERVAL);
  }

  function tryBootstrapEditor(editorId) {
    if (bootstrappedEditors[editorId]) return;

    const bodyInput = getEditorTextarea(editorId);
    const editorWrapper = getEditorWrapper(editorId);

    if (!bodyInput && !editorWrapper) {
      console.debug("ZENTSO", "Editor not found yet:", editorId);
      return;
    }

    if (editorId === COMMUNICATION_EDITOR_ID) {
      if (!isCommunicationBodyActive()) {
        console.debug("ZENTSO", "Communication Body tab not active yet.");
        return;
      }
    } else {
      const visibleCheckTarget = bodyInput || editorWrapper;
      if (!isElementVisible(visibleCheckTarget)) {
        console.debug("ZENTSO", "Standard body input not visible yet.", editorId);
        return;
      }
    }

    console.debug("ZENTSO", "Preparing bootstrap for editor:", editorId);

    waitForRadEditor(editorId, (editor) => {
      if (bootstrappedEditors[editorId]) return;
      bootstrappedEditors[editorId] = true;
      RadEditorReadyAndContinue(editor, editorId);
    });
  }

  function wireCommunicationBodyTab() {
    const bodyTabLink = getCommunicationBodyTabLink();
    if (!bodyTabLink) return;

    if (bodyTabLink.dataset.pagesguruWired === "true") return;
    bodyTabLink.dataset.pagesguruWired = "true";

    bodyTabLink.addEventListener("click", function () {
      setTimeout(function () {
        tryBootstrapEditor(COMMUNICATION_EDITOR_ID);
      }, 200);
    });
  }

  function wireCommunicationBodyObserver() {
    const bodyView = document.getElementById(COMMUNICATION_BODY_VIEW_ID);
    if (!bodyView || !window.MutationObserver) return;

    if (bodyView.dataset.pagesguruObserved === "true") return;
    bodyView.dataset.pagesguruObserved = "true";

    const observer = new MutationObserver(function () {
      if (isCommunicationBodyActive()) {
        tryBootstrapEditor(COMMUNICATION_EDITOR_ID);
      }
    });

    observer.observe(bodyView, {
      attributes: true,
      attributeFilter: ["class", "style"],
    });
  }

  // initial attempt for standard editor
  tryBootstrapEditor(STANDARD_EDITOR_ID);

  // initial attempt for communication editor in case Body is already open
  tryBootstrapEditor(COMMUNICATION_EDITOR_ID);

  // wire delayed activation for communication editor
  wireCommunicationBodyTab();
  wireCommunicationBodyObserver();

  // if partial postbacks re-render the tabstrip/body view, re-wire
  if (window.Sys && Sys.WebForms && Sys.WebForms.PageRequestManager) {
    const prm = Sys.WebForms.PageRequestManager.getInstance();
    prm.add_endRequest(function () {
      wireCommunicationBodyTab();
      wireCommunicationBodyObserver();
      tryBootstrapEditor(STANDARD_EDITOR_ID);
      tryBootstrapEditor(COMMUNICATION_EDITOR_ID);
    });
  }

  function RadEditorReadyAndContinue(editor, editorId) {
    const bodyInput = getEditorTextarea(editorId);
    const editorWrapper = getEditorWrapper(editorId);

    const radEditorContainer =
      editorWrapper ||
      document.getElementById(editorId) ||
      (bodyInput ? bodyInput.closest(".RadEditor") : null);

    if (!bodyInput) {
      console.warn("ZENTSO", "Body textarea not found for editor:", editorId);
      return;
    }

    const defaultConfig = {
      defaultPluginUrls: [],
      // Context-scoped plugin scripts: loaded only when the matching editor
      // (website ContentHtml vs Communication Creator) bootstraps on the
      // page. Lets one embed code serve the whole site.
      websitePluginUrls: [],
      communicationPluginUrls: [],
      canvasStyleUrls: [],
      pluginCssUrls: {
        tokens: [],
        blocks: [],
        other: [],
      },
      pluginJsUrls: {
        blocks: [],
        loaders: [],
        other: [],
      },
      pluginLoaderFns: {
        blocks: [],
        tokens: [],
        other: [],
        // Context-scoped loader fns, merged in only for the matching editor.
        website: [],
        communication: [],
      },
      assetManager: {
        iqaImagesApiUrl:
          "/api/iqa?queryname=$/ZENTSO/PageGuru/AssetManager/Images",
      },
      ai: {
        // CloudToolz AI endpoint. Overridden via window.PagesGuruConfig.ai.apiUrl.
        apiUrl: "",
      },
      ui: {
        colors: {
          primary: "#f3f4f6",
          secondary: "#000000",
          tertiary: "#4b5563",
          quaternary: "#555",
        },
        classPrefix: "gjs-",
        uiScale: "100%",
      },
    };

    function mergeObjects(base, override) {
      const out = { ...base };
      Object.keys(override || {}).forEach((key) => {
        const baseVal = base ? base[key] : undefined;
        const overrideVal = override[key];

        if (
          baseVal &&
          overrideVal &&
          typeof baseVal === "object" &&
          typeof overrideVal === "object" &&
          !Array.isArray(baseVal) &&
          !Array.isArray(overrideVal)
        ) {
          out[key] = mergeObjects(baseVal, overrideVal);
        } else {
          out[key] = overrideVal;
        }
      });
      return out;
    }

    function getRadEditor(editorId) {
      if (typeof $find !== "function") return null;
      const editor = $find(editorId);
      return editor ? editor : null;
    }

    function asArray(value) {
      if (Array.isArray(value)) return value.filter(Boolean);
      if (value == null) return [];
      return [value].filter(Boolean);
    }

    const rawConfig = window.PagesGuruConfig || {};
    const pageGuruConfig = mergeObjects(defaultConfig, rawConfig);

    const resolvedConfig = {
      defaultPluginUrls: asArray(pageGuruConfig.defaultPluginUrls),
      websitePluginUrls: asArray(pageGuruConfig.websitePluginUrls),
      communicationPluginUrls: asArray(pageGuruConfig.communicationPluginUrls),
      canvasStyleUrls: asArray(pageGuruConfig.canvasStyleUrls),
      pluginCssUrls: {
        tokens: asArray(pageGuruConfig.pluginCssUrls.tokens),
        blocks: asArray(pageGuruConfig.pluginCssUrls.blocks),
        other: asArray(pageGuruConfig.pluginCssUrls.other),
      },
      pluginJsUrls: {
        blocks: asArray(pageGuruConfig.pluginJsUrls.blocks),
        loaders: asArray(pageGuruConfig.pluginJsUrls.loaders),
        other: asArray(pageGuruConfig.pluginJsUrls.other),
      },
      pluginLoaderFns: {
        blocks: asArray(pageGuruConfig.pluginLoaderFns.blocks),
        tokens: asArray(pageGuruConfig.pluginLoaderFns.tokens),
        other: asArray(pageGuruConfig.pluginLoaderFns.other),
        website: asArray(pageGuruConfig.pluginLoaderFns.website),
        communication: asArray(pageGuruConfig.pluginLoaderFns.communication),
      },
      assetManager: pageGuruConfig.assetManager,
      ai: pageGuruConfig.ai || {},
      ui: pageGuruConfig.ui,
    };

    console.log("ZENTSO", "PageGuru initialised", editorId, resolvedConfig);

    bodyInput.style.display = "none";

    let hostNode = null;
    let insertBeforeNode = bodyInput;

    if (editorId === COMMUNICATION_EDITOR_ID) {
      hostNode = document.getElementById(
        "ctl01_TemplateBody_WebPartManager1_gwpciNewCommunicationCreatorCommon_ciNewCommunicationCreatorCommon_CommunicationCreatorComposer_iPartContainer"
      );
      insertBeforeNode = document.getElementById(
        "ctl01_TemplateBody_WebPartManager1_gwpciNewCommunicationCreatorCommon_ciNewCommunicationCreatorCommon_CommunicationCreatorComposer_ContentHtmlEditor"
      );
    } else {
      hostNode =
        (radEditorContainer && radEditorContainer.parentNode) ||
        bodyInput.parentNode ||
        (editorWrapper ? editorWrapper.parentNode : null);
      insertBeforeNode = radEditorContainer || bodyInput;
    }

    if (!hostNode) {
      console.warn("ZENTSO", "No host node found for editor:", editorId);
      return;
    }

    const toggleBtn = document.createElement("button");
    toggleBtn.type = "button";
    toggleBtn.className = "TextButton PrimaryButton";
    toggleBtn.textContent = "Show iMIS editor";

    const gjsDiv = document.createElement("div");
    gjsDiv.id = "gjs-" + editorId.replace(/[^a-zA-Z0-9\-_]/g, "_");
    gjsDiv.style.minHeight = "600px";
    gjsDiv.style.border = "1px solid #ced4da";
    gjsDiv.style.marginTop = "2rem";

    hostNode.insertBefore(toggleBtn, insertBeforeNode || hostNode.firstChild);
    hostNode.insertBefore(gjsDiv, insertBeforeNode || null);

    const contentPanel =
      document.getElementById("ctl00_ContentPanel") ||
      document.getElementById("ContentPanel");

    const MIN_H = 400;
    const BOTTOM_PAD = 16;

    let grapesBootstrapped = false;
    let gjsEditor = null;

    function isVisible(el) {
      return !!(
        el &&
        el.offsetParent !== null &&
        getComputedStyle(el).display !== "none"
      );
    }

    function applyLayout() {
      if (contentPanel) {
        const top = contentPanel.getBoundingClientRect().top;
        const panelH = Math.max(window.innerHeight - top - BOTTOM_PAD, MIN_H);
        contentPanel.style.height = panelH + "px";
        contentPanel.style.maxHeight = panelH + "px";
        contentPanel.style.overflow = "auto";
      }

      if (isVisible(gjsDiv)) {
        const top = gjsDiv.getBoundingClientRect().top;
        const h = Math.max(window.innerHeight - top - BOTTOM_PAD - 75, MIN_H);
        gjsDiv.style.height = h + "px";
        gjsDiv.style.minHeight = MIN_H + "px";

        if (
          window.gjsEditor &&
          typeof window.gjsEditor.refresh === "function"
        ) {
          window.gjsEditor.refresh();
          if (typeof window.gjsEditor.trigger === "function") {
            window.gjsEditor.trigger("canvas:frame:resize");
          }
        }
      } else {
        const reContent = radEditorContainer
          ? radEditorContainer.querySelector(".reContent")
          : document.querySelector(".reContent");

        if (reContent && isVisible(radEditorContainer)) {
          const top = reContent.getBoundingClientRect().top;
          const h = Math.max(window.innerHeight - top - BOTTOM_PAD - 75, MIN_H);
          reContent.style.height = h + "px";
        }
      }
    }

    window.addEventListener("resize", applyLayout);
    requestAnimationFrame(applyLayout);
    setTimeout(applyLayout, 250);

    toggleBtn.addEventListener("click", () => {
      const radVisible =
        radEditorContainer &&
        getComputedStyle(radEditorContainer).display !== "none";

      if (radVisible) {
        if (radEditorContainer) radEditorContainer.style.display = "none";
        gjsDiv.style.display = "";
        toggleBtn.textContent = "Show iMIS editor";
      } else {
        if (radEditorContainer) radEditorContainer.style.display = "";
        gjsDiv.style.display = "none";
        toggleBtn.textContent = "Show PagesGuru";
      }

      requestAnimationFrame(applyLayout);
    });

    function switchToHtmlAndHide() {
      const editor = typeof $find === "function" ? $find(editorId) : null;
      if (!editor || !window.Telerik || !Telerik.Web || !Telerik.Web.UI) return;

      if (Telerik.Web.UI.EditModes && typeof editor.set_mode === "function") {
        editor.set_mode(Telerik.Web.UI.EditModes.Html);
      }

      if (radEditorContainer) {
        radEditorContainer.style.display = "none";
      }

      gjsDiv.style.display = "";
      toggleBtn.textContent = "Show iMIS editor";
    }

    function injectStylesheetOnce(href) {
      return new Promise((resolve, reject) => {
        if (!href) {
          resolve();
          return;
        }

        const existing = document.querySelector(
          `link[data-pageguru-asset="${href}"]`
        );
        if (existing) {
          resolve(href);
          return;
        }

        const link = document.createElement("link");
        link.rel = "stylesheet";
        link.href = href;
        link.dataset.pageguruAsset = href;
        link.onload = () => resolve(href);
        link.onerror = () =>
          reject(new Error(`Failed to load stylesheet ${href}`));
        document.head.appendChild(link);
      });
    }

    function injectScriptOnce(src) {
      return new Promise((resolve, reject) => {
        if (!src) {
          resolve();
          return;
        }

        const existing = document.querySelector(
          `script[data-pageguru-asset="${src}"]`
        );
        if (existing) {
          resolve(src);
          return;
        }

        const s = document.createElement("script");
        s.src = src;
        s.async = false;
        s.dataset.pageguruAsset = src;
        s.onload = () => resolve(src);
        s.onerror = () => reject(new Error(`Failed to load script ${src}`));
        document.body.appendChild(s);
      });
    }

    function loadSequentially(items, loader) {
      return items.reduce(
        (chain, item) => chain.then(() => loader(item)),
        Promise.resolve()
      );
    }

    function loadConfiguredAssets() {
      const cssUrls = [
        ...resolvedConfig.pluginCssUrls.tokens,
        ...resolvedConfig.pluginCssUrls.blocks,
        ...resolvedConfig.pluginCssUrls.other,
      ];

      const jsUrls = [
        ...resolvedConfig.pluginJsUrls.blocks,
        ...resolvedConfig.pluginJsUrls.loaders,
        ...resolvedConfig.pluginJsUrls.other,
      ];

      return loadSequentially(cssUrls, injectStylesheetOnce).then(() =>
        loadSequentially(jsUrls, injectScriptOnce)
      );
    }

    function decodeHtmlEntities(html) {
      if (!html) return "";
      const txt = document.createElement("textarea");
      txt.innerHTML = html;
      return txt.value;
    }

    function getInitialHtml() {
      const raw =
        bodyInput && typeof bodyInput.value === "string" ? bodyInput.value : "";

      if (!raw) return "";

      if (/[<][a-z!/?]/i.test(raw)) {
        return raw;
      }

      if (/&lt;|&gt;|&amp;|&#/i.test(raw)) {
        return decodeHtmlEntities(raw);
      }

      return raw;
    }

    // Component-library toggle: the Communication (email) editor loads
    // foundation-marketing-components.js and must NOT load
    // foundation-components.js (and vice versa for the website editor).
    // isCommunicationBodyActive() has already gated the communication
    // bootstrap by the time this runs, so editorId is the discriminator.
    const WEBSITE_COMPONENTS_LOADER = "loadFoundationComponents";
    const MARKETING_COMPONENTS_LOADER = "loadFoundationMarketingComponents";

    function applyComponentLibraryToggle(fnNames) {
      const isCommunication = editorId === COMMUNICATION_EDITOR_ID;
      const excluded = isCommunication
        ? WEBSITE_COMPONENTS_LOADER
        : MARKETING_COMPONENTS_LOADER;
      const required = isCommunication
        ? MARKETING_COMPONENTS_LOADER
        : WEBSITE_COMPONENTS_LOADER;

      const filtered = fnNames.filter(function (name) {
        if (name === excluded) {
          console.debug(
            "ZENTSO",
            "Component loader excluded for this editor:",
            name,
            "(editor:", editorId + ")"
          );
          return false;
        }
        return true;
      });

      // If the embed config forgot the right loader but its script is
      // already on the page, register it anyway. Missing entirely is a
      // visible warning, not a silent no-op.
      if (!filtered.includes(required)) {
        if (typeof window[required] === "function") {
          filtered.push(required);
        } else {
          console.warn(
            "ZENTSO",
            "Expected component loader not configured/loaded:",
            required
          );
        }
      }

      return filtered;
    }

    function resolveConfiguredPluginFns() {
      const scopedLoaderFns =
        editorId === COMMUNICATION_EDITOR_ID
          ? resolvedConfig.pluginLoaderFns.communication
          : resolvedConfig.pluginLoaderFns.website;

      const fnNames = applyComponentLibraryToggle([
        ...resolvedConfig.pluginLoaderFns.blocks,
        ...resolvedConfig.pluginLoaderFns.tokens,
        ...resolvedConfig.pluginLoaderFns.other,
        ...scopedLoaderFns,
      ]);

      return fnNames
        .map((fnName) => {
          const fn = window[fnName];
          if (typeof fn !== "function") {
            console.warn(`PageGuru plugin loader not found: ${fnName}`);
            return null;
          }
          return fn;
        })
        .filter(Boolean);
    }

    function applyCustomUiTheme() {
      const colors = resolvedConfig.ui.colors || {};
      const prefix = resolvedConfig.ui.classPrefix || "gjs-";
      const uiScale = resolvedConfig.ui.uiScale || "100%";

      const primaryColor = colors.primary || "#003a4c";
      const secondaryColor = colors.secondary || "#ffffff";
      const tertiaryColor = colors.tertiary || "#222222";
      const quaternaryColor = colors.quaternary || "#ffffff";

      let cssString = "";

      [
        ["one", primaryColor],
        ["two", secondaryColor],
        ["three", tertiaryColor],
        ["four", quaternaryColor],
      ].forEach(([cnum, ccol]) => {
        cssString += `
          .${prefix}${cnum}-bg { background-color: ${ccol}; }
          .${prefix}${cnum}-color { color: ${ccol}; }
          .${prefix}${cnum}-color-h:hover { color: ${ccol}; }
        `;
      });

      cssString += `.gjs-btn-prim {
        background-color: ${secondaryColor};
        border-color: ${primaryColor};
        color: ${primaryColor};
      }`;

      cssString += `
        :root { --gjs-ui-scale: ${uiScale}; }

        .gjs-one-bg,
        .gjs-two-color,
        .gjs-three-bg,
        .gjs-four-color,
        .gjs-title,
        .gjs-sm-sector-title,
        .gjs-sm-label,
        .gjs-sm-property,
        .gjs-block-label,
        .gjs-layer-title,
        .gjs-toolbar-item,
        .gjs-mdl-title,
        .gjs-mdl-dialog,
        .gjs-trt-trait,
        .gjs-field {
          font-size: var(--gjs-ui-scale);
        }

        .gjs-field input,
        .gjs-field select,
        .gjs-field textarea,
        .gjs-sm-field input,
        .gjs-sm-field select,
        .gjs-sm-field textarea {
          font-size: var(--gjs-ui-scale);
        }

        .gjs-block-label { font-size: 1rem; }
        .gjs-sm-properties { font-size: calc(var(--gjs-ui-scale) * .75); }
      `;

      cssString += `
          .gjs-am-file-uploader {
              display: none;
          }

          .gjs-am-assets-cont {
              width: 100%;
          }
          `;

      // ── Link popover styles ────────────────────────────────────────────────
      cssString += `
        :root {
          --pg-pop-bg:           ${primaryColor}08;
          --pg-pop-bg-raised:    ${primaryColor}14;
          --pg-pop-border:       ${tertiaryColor}30;
          --pg-pop-border-soft:  ${tertiaryColor}20;
          --pg-pop-accent:       ${secondaryColor};
          --pg-pop-text:         ${tertiaryColor};
          --pg-pop-text-muted:   ${tertiaryColor}99;
        }

        .pg-link-popover {
          position: fixed;
          z-index: 999;
          width: 300px;
          font-family: system-ui, sans-serif;
        }
        .pg-link-popover__arrow {
          width: 0;
          height: 0;
          border-left: 7px solid transparent;
          border-right: 7px solid transparent;
          border-bottom: 7px solid var(--pg-pop-border);
          position: absolute;
          top: -7px;
          left: 24px;
        }
        .pg-link-popover__inner {
          background: #ffffff;
          border: 1px solid var(--pg-pop-border);
          border-radius: 6px;
          padding: 10px;
          display: flex;
          flex-direction: column;
          gap: 8px;
          box-shadow: 0 2px 8px rgba(0,0,0,0.10);
        }
        .pg-link-popover__label {
          font-size: 11px;
          color: var(--pg-pop-text-muted);
          font-weight: 500;
          letter-spacing: .04em;
          text-transform: uppercase;
          margin: 0 0 2px;
        }
        .pg-link-popover__url-row {
          display: flex;
          gap: 6px;
          align-items: stretch;
        }
        .pg-link-popover__input {
          background: var(--pg-pop-bg-raised);
          border: 1px solid var(--pg-pop-border-soft);
          border-radius: 4px;
          color: var(--pg-pop-text);
          font-size: 13px;
          padding: 6px 8px;
          flex: 1;
          min-width: 0;
          box-sizing: border-box;
          outline: none;
        }
        .pg-link-popover__input:focus {
          border-color: var(--pg-pop-border);
          box-shadow: 0 0 0 2px var(--pg-pop-bg-raised);
        }
        .pg-link-popover__browse {
          flex-shrink: 0;
          display: flex;
          align-items: center;
          gap: 4px;
          padding: 5px 8px;
          background: var(--pg-pop-bg-raised);
          border: 1px solid var(--pg-pop-border-soft);
          border-radius: 4px;
          color: var(--pg-pop-text-muted);
          font-size: 11px;
          font-weight: 500;
          cursor: pointer;
          white-space: nowrap;
          transition: background .15s, border-color .15s;
        }
        .pg-link-popover__browse:hover {
          background: var(--pg-pop-bg);
          border-color: var(--pg-pop-border);
          color: var(--pg-pop-text);
        }
        .pg-link-popover__newtab-row {
          display: flex;
          align-items: center;
          gap: 7px;
          color: var(--pg-pop-text-muted);
          font-size: 12px;
          cursor: pointer;
          user-select: none;
        }
        .pg-link-popover__newtab-row input[type=checkbox] {
          accent-color: var(--pg-pop-text);
          cursor: pointer;
        }
        .pg-link-popover__actions {
          display: flex;
          gap: 6px;
          margin-top: 2px;
        }
        .pg-link-popover__actions button, .pg-link-popover__comm-row button {
          flex: 1;
          padding: 6px 0;
          border-radius: 4px;
          border: 1px solid var(--pg-pop-border-soft);
          font-size: 12px;
          font-weight: 500;
          cursor: pointer;
          transition: background .15s, border-color .15s;
        }
        .pg-link-popover__save {
          background: ${secondaryColor};
          border-color: ${secondaryColor};
          color: ${primaryColor};
        }
        .pg-link-popover__save:hover {
          opacity: 0.88;
        }
        .pg-link-popover__remove {
          background: #fef2f2;
          border-color: #fca5a5;
          color: #b91c1c;
        }
        .pg-link-popover__remove:hover {
          background: #fee2e2;
          border-color: #f87171;
        }
        .pg-link-popover__cancel {
          background: transparent;
          color: var(--pg-pop-text-muted);
        }
        .pg-link-popover__cancel:hover {
          background: var(--pg-pop-bg-raised);
          border-color: var(--pg-pop-border);
        }
      `;
      // ── end link popover styles ────────────────────────────────────────────

      let style = document.getElementById("pageguru-ui-theme");
      if (!style) {
        style = document.createElement("style");
        style.id = "pageguru-ui-theme";
        document.head.appendChild(style);
      }
      style.innerHTML = cssString;
    }
    // ── Link popover helper ────────────────────────────────────────────────
    // Defined once at RadEditorReadyAndContinue scope so both the RTE toolbar
    // button and the canvas dblclick listener share the same singleton.
    //
    // Usage:
    //   pgLinkPopover.open({ x, y, currentHref, currentTarget, onSave, onRemove })
    //   pgLinkPopover.dismiss()
    // ─────────────────────────────────────────────────────────────────────
    const pgLinkPopover = (function () {
      let _el = null;
      // While an iMIS RadWindow dialog spawned from the popover is open,
      // clicks land outside the popover; suspend outside-click dismissal.
      let _suspendDismiss = false;

      // Build the URL for one of the Communication Creator link dialogs.
      // ParentPageInstanceKey comes from the page's PageInstanceKey hidden
      // input; DialogCacheParam is a cache-buster, same as iMIS uses.
      function commDialogUrl(kind) {
        const keyEl = document.getElementById("PageInstanceKey");
        const key = keyEl ? keyEl.value : "";
        const common =
          "TemplateType=E&PreserveStatefulBusinessContainer=true" +
          "&ParentPageInstanceKey=" +
          encodeURIComponent(key) +
          "&DialogCacheParam=" +
          Math.random() +
          "&IsPopup=true";
        if (kind === "pref") {
          return (
            "/iParts/Communications/CommunicationCreator/CommunicationLinkEdit.aspx?" +
            common
          );
        }
        const flags =
          kind === "donate"
            ? "DonationDialog=true&FileUploadAllowed=false"
            : "DonationDialog=false&FileUploadAllowed=false&InvoiceDialog=true";
        return (
          "/AsiCommon/controls/ContentManagement/ContentDesigner/ContentLinkDialog.aspx?" +
          "LinksAreRelative=false&" +
          flags +
          "&" +
          common.replace(
            "TemplateType=E&",
            "TemplateType=E&CloseWindowOnCommit=true&",
          )
        );
      }

      // The dialogs return their value via the RadWindow callback's
      // dialogWindow.result (string URL, link markup, or array). Reduce
      // whatever comes back to an href string.
      function extractHref(result) {
        if (result == null) return "";
        if (Array.isArray(result)) result = result[0];
        result = String(result);
        if (result.indexOf("<") !== -1) {
          try {
            const doc = new DOMParser().parseFromString(result, "text/html");
            const a = doc.querySelector("a[href]");
            if (a) return a.getAttribute("href") || "";
          } catch (e) {
            /* fall through */
          }
        }
        return result;
      }

      function openCommDialog(kind, input) {
        const url = commDialogUrl(kind);
        _suspendDismiss = true;
        function done(dialogWindow) {
          _suspendDismiss = false;
          if (!dialogWindow) return;
          const href = extractHref(dialogWindow.result);
          if (href && input && input.isConnected) {
            input.value = href;
            input.focus();
          }
        }
        if (typeof window.ShowDialog === "function") {
          try {
            window.ShowDialog(url, done, "760px", "560px");
            return;
          } catch (e) {
            console.error("[PagesGuru] ShowDialog failed:", e);
          }
        }
        _suspendDismiss = false;
        console.error(
          "[PagesGuru] iMIS ShowDialog unavailable; cannot open " +
            kind +
            " link dialog",
        );
      }

      // ── Popover ────────────────────────────────────────────────────────────
      function dismiss() {
        if (_el) {
          _el.remove();
          _el = null;
        }
      }

      function open({
        x,
        y,
        currentHref,
        currentTarget,
        onSave,
        onRemove,
        commLinks,
      }) {
        dismiss();

        const hasLink = !!currentHref;
        const hasBrowse =
          typeof window.BusinessDocumentBrowserControl_Select === "function";

        _el = document.createElement("div");
        _el.className = "pg-link-popover";
        _el.innerHTML = `
          <div class="pg-link-popover__arrow"></div>
          <div class="pg-link-popover__inner">
            <div class="pg-link-popover__label">URL</div>
            <div class="pg-link-popover__url-row">
              <input
                id="pg-link-popover-url"
                type="text"
                class="pg-link-popover__input"
                placeholder="https://example.com"
                value="${hasLink ? currentHref.replace(/"/g, "&quot;") : ""}"
                spellcheck="false"
                autocomplete="off"
              />${
                hasBrowse
                  ? `
              <button class="pg-link-popover__browse pg-link-popover__browse_content_pages" title="Browse iMIS pages">
                <svg viewBox="0 0 24 24" style="width:14px;height:14px;vertical-align:middle">
                  <rect x="2" y="3" width="20" height="18" rx="2" fill="none" stroke="currentColor" stroke-width="1.5"/>
                  <path d="M2 7h20" stroke="currentColor" stroke-width="1.5" fill="none"/>
                  <circle cx="5.5" cy="5" r="1" fill="currentColor"/>
                  <circle cx="8.5" cy="5" r="1" fill="currentColor"/>
                  <circle cx="11.5" cy="5" r="1" fill="currentColor"/>
                  <rect x="5" y="10" width="6" height="4" rx="1" fill="currentColor" opacity="0.25"/>
                  <rect x="5" y="10" width="6" height="4" rx="1" fill="none" stroke="currentColor" stroke-width="1" opacity="0.6"/>
                  <rect x="13" y="10" width="6" height="4" rx="1" fill="currentColor" opacity="0.25"/>
                  <rect x="13" y="10" width="6" height="4" rx="1" fill="none" stroke="currentColor" stroke-width="1" opacity="0.6"/>
                  <rect x="5" y="16" width="14" height="1.5" rx="0.75" fill="currentColor" opacity="0.3"/>
                </svg>

              </button>

              <button class="pg-link-popover__browse pg-link-popover__browse_uploaded_files" title="Browse uploaded files">
                <svg viewBox="0 0 24 24" style="width:14px;height:14px;vertical-align:middle">
                  <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/>
                  <polyline points="14 2 14 8 20 8" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"/>
                  <rect x="8" y="12" width="3" height="4" rx="0.5" fill="currentColor" opacity="0.7"/>
                  <path d="M13 12h3M13 14.5h2M13 17h3" stroke="currentColor" stroke-width="1.2" stroke-linecap="round" fill="none" opacity="0.5"/>
                </svg>

              </button>`
                  : ""
              }
            </div>
            <label class="pg-link-popover__newtab-row">
              <input type="checkbox" class="pg-link-popover__newtab"
                ${currentTarget !== "_self" ? "checked" : ""} />
              Open in new tab
            </label>${
              commLinks
                ? `
            <div class="pg-link-popover__comm-row" style="margin:6px 0 2px;display:flex;gap:4px;flex-wrap:wrap;">
              <button type="button" class="pg-link-popover__comm" data-pg-comm="pref" title="Communication preferences link">Comm. prefs</button>
              <button type="button" class="pg-link-popover__comm" data-pg-comm="donate" title="Donate link">Donate</button>
              <button type="button" class="pg-link-popover__comm" data-pg-comm="invoice" title="Pay invoice link">Pay invoice</button>
            </div>`
                : ""
            }
            <div class="pg-link-popover__actions">
              <button class="pg-link-popover__save">Apply</button>
              ${hasLink ? '<button class="pg-link-popover__remove">Remove</button>' : ""}
              <button class="pg-link-popover__cancel">Cancel</button>
            </div>
          </div>
        `;

        Object.assign(_el.style, {
          left: Math.max(4, x - 150) + "px",
          top: y + 10 + "px",
        });

        document.body.appendChild(_el);

        const input = _el.querySelector(".pg-link-popover__input");
        const saveBtn = _el.querySelector(".pg-link-popover__save");
        const remBtn = _el.querySelector(".pg-link-popover__remove");
        const cancelBtn = _el.querySelector(".pg-link-popover__cancel");
        const browseImisContentPagesBtn = _el.querySelector(
          ".pg-link-popover__browse_content_pages",
        );
        const browseUploadedFilesBtn = _el.querySelector(
          ".pg-link-popover__browse_uploaded_files",
        );

        input.focus();
        input.select();

        input.addEventListener("keydown", function (e) {
          if (e.key === "Enter") {
            e.preventDefault();
            saveBtn.click();
          }
          if (e.key === "Escape") {
            dismiss();
          }
        });

        saveBtn.addEventListener("click", function () {
          const url = input.value.trim();
          const newTab = _el.querySelector(".pg-link-popover__newtab").checked;
          dismiss();
          onSave(url, newTab);
        });

        if (remBtn) {
          remBtn.addEventListener("click", function () {
            dismiss();
            onRemove();
          });
        }

        cancelBtn.addEventListener("click", dismiss);

        // Communication link dialogs (Communication editor only)
        _el.querySelectorAll(".pg-link-popover__comm").forEach(function (b) {
          b.addEventListener("click", function (e) {
            e.stopPropagation();
            openCommDialog(b.getAttribute("data-pg-comm"), input);
          });
        });

        if (browseImisContentPagesBtn) {
          browseImisContentPagesBtn.addEventListener("click", function (e) {
            e.stopPropagation();

            var props = new BusinessDocumentBrowserProperties();
            props.TypeFilter = "CON";
            props.DocumentHierarchyKey = "1cf36d67-5eeb-4914-b2ce-7a7611513db4";
            props.AllowUpwardNavigation = false;
            props.ShowAddress = true;
            props.AutoPostBack = false;
            props.ValueControlID = "pg-link-popover-url";
            props.DocumentVersionKeyValueControlID = "";
            props.ShowMenu = false;
            BusinessDocumentBrowserControl_Select(props);
          });
        }

        if (browseUploadedFilesBtn) {
          browseUploadedFilesBtn.addEventListener("click", function (e) {
            e.stopPropagation();

            var props = new BusinessDocumentBrowserProperties();
            props.DocumentHierarchyKey = "7a569bb1-8673-4564-bad2-bcce059f7bd8";
            props.RootFolder = "%24%2fCommon%2fUploaded+files";
            props.AllowUpwardNavigation = false;
            props.ShowAddress = true;
            props.AutoPostBack = false;
            props.ValueControlID = "pg-link-popover-url";
            props.DocumentVersionKeyValueControlID = "";
            props.ShowMenu = false;
            BusinessDocumentBrowserControl_Select(props);
          });
        }

        // Dismiss on click outside — but not while the iMIS RadWindow is open
        setTimeout(function () {
          function outsideHandler(e) {
            if (!_el) {
              document.removeEventListener("mousedown", outsideHandler, true);
              return;
            }
            // Ignore clicks inside the popover or inside the RadWindow
            //const radWin = document.getElementById(IMIS_RAD_WINDOW_ID);
            if (_suspendDismiss) return;
            if (_el.contains(e.target)) return;
            //if (radWin && radWin.contains(e.target)) return;
            dismiss();
            document.removeEventListener("mousedown", outsideHandler, true);
          }
          document.addEventListener("mousedown", outsideHandler, true);
        }, 120);
      }

      return { open, dismiss };
    })();
    // ── end pgLinkPopover ──────────────────────────────────────────────────


    function applyDesignerFrameEnhancements(editor) {
      if (!editor || !editor.Canvas) return;

      const doc = editor.Canvas.getDocument();
      if (!doc) return;

      doc.documentElement.setAttribute("data-gjs", "true");
      doc.documentElement.id = "MainHtml";
      doc.documentElement.lang = "en";
      doc.documentElement.classList.add("html-main", "t-chrome", "t-chrome145");

      doc.body.id = "MainBody";
      doc.body.classList.add("Wrapper-FullWidth");
      doc.body.setAttribute("data-aos-easing", "ease");
      doc.body.setAttribute("data-aos-duration", "500");
      doc.body.setAttribute("data-aos-delay", "100");

      let form = doc.getElementById("aspnetForm");
      if (!form) {
        form = doc.createElement("form");
        form.id = "aspnetForm";
        form.className = "form-main";
        form.setAttribute("novalidate", "");
        form.setAttribute("method", "post");

        const nodes = Array.from(doc.body.childNodes);
        nodes.forEach((n) => form.appendChild(n));
        doc.body.appendChild(form);
      } else {
        form.classList.add("form-main");
      }

      function ensureDiv(parent, id, className) {
        let el = id ? parent.querySelector("#" + CSS.escape(id)) : null;

        if (!el) {
          el = doc.createElement("div");
          if (id) el.id = id;
          if (className) el.className = className;
          parent.appendChild(el);
        } else if (className) {
          className
            .split(/\s+/)
            .filter(Boolean)
            .forEach((c) => el.classList.add(c));
        }

        return el;
      }

      const wrapper = ensureDiv(form, "ctl01_masterWrapper", "wrapper");
      const container = ensureDiv(wrapper, null, "container main-container ClearFix");
      const main = ensureDiv(container, "ContentPanel", "body-container");
      const colPrimary = ensureDiv(main, null, "col-primary");
      const mainContentWrapper = ensureDiv(colPrimary, "mainContentWrapper", "ContentPanel");

      const gjsRoot =
        doc.getElementById("gjs-root") ||
        (() => {
          const el = doc.createElement("div");
          el.id = "gjs-root";
          mainContentWrapper.appendChild(el);
          return el;
        })();

      const gjsWrapperEl =
        editor.getWrapper() && editor.getWrapper().getEl
          ? editor.getWrapper().getEl()
          : null;

      if (gjsWrapperEl && gjsWrapperEl.parentNode !== gjsRoot) {
        gjsRoot.appendChild(gjsWrapperEl);
      }

      if (!doc.getElementById("gjs-aos-fix")) {
        const style = doc.createElement("style");
        style.id = "gjs-aos-fix";
        style.textContent = `
          html[data-gjs="true"] [data-aos]{
            opacity: 1 !important;
            transform: none !important;
            transition: none !important;
            filter: none !important;
          }
          html[data-gjs="true"] .aos-init,
          html[data-gjs="true"] .aos-animate{
            opacity: 1 !important;
            transform: none !important;
          }
        `;
        doc.head.appendChild(style);
      }

      setTimeout(applyLayout, 0);
    }

    function loadIQAimages(editor) {
      const tokenEl = document.querySelector(
        'input[name="__RequestVerificationToken"]',
      );
      const token = tokenEl ? tokenEl.value : null;
      const apiUrl = resolvedConfig.assetManager.iqaImagesApiUrl;

      const PAGE_SIZE = 500;

      function buildPageUrl(offset) {
        const separator = apiUrl.includes("?") ? "&" : "?";
        return `${apiUrl}${separator}Offset=${offset}&Limit=${PAGE_SIZE}`;
      }

      function fetchPage(offset) {
        return fetch(buildPageUrl(offset), {
          method: "GET",
          mode: "cors",
          credentials: "include",
          headers: {
            "Content-Type": "application/json",
            ...(token && { RequestVerificationToken: token }),
          },
        }).then((res) => {
          if (res.status === 404) {
            console.warn("IQA Images endpoint not found (404)");
            return Promise.reject(new Error("IQA Images endpoint not found"));
          }
          return res.json();
        });
      }

      function mapItems(data) {
        const items = Array.isArray(data.Items?.$values)
          ? data.Items.$values
          : data.Items || [];

        return items.map((item) => {
          const props = item.Properties?.$values || [];
          const docProp = props.find((p) => p.Name === "DocumentPath");
          let rawPath = "";

          if (docProp) {
            rawPath =
              typeof docProp.Value === "object" &&
              docProp.Value.$value !== undefined
                ? docProp.Value.$value
                : docProp.Value;
          }

          const path = String(rawPath || "").replace(/^\$/, "");
          return {
            src: path,
            thumb: path,
            type: "image",
            name: path.split("/").pop(),
          };
        });
      }

      async function fetchAllPages() {
        // Fetch first page to learn the total
        const firstPage = await fetchPage(0);

        if (!firstPage || firstPage.Count === 0) {
          console.warn("No images returned from IQA");
          return;
        }

        const totalCount = firstPage.TotalCount ?? firstPage.Count;
        const allAssets = mapItems(firstPage);

        for (let offset = PAGE_SIZE; offset < totalCount; offset += PAGE_SIZE) {
          const page = await fetchPage(offset);
          allAssets.push(...mapItems(page));
        }

        allAssets.sort((a, b) =>
          a.name.localeCompare(b.name, undefined, {
            sensitivity: "base",
            numeric: true,
          }),
        );
        editor.AssetManager.add(allAssets);
        console.log(`IQA images loaded: ${allAssets.length} of ${totalCount}`);
      }

      fetchAllPages().catch((err) =>
        console.error("Failed to load IQA images:", err),
      );
    }


    // ── Email document wrapper ─────────────────────────────────────────────
    // Static head styles for the exported communication document. Modeled on
    // a transactional-email template verified to persist unchanged through
    // this RadEditor instance (ConvertToXhtml/ConvertFontToSpan/
    // MakeUrlsAbsolute filters): head <style>, mso-* properties, and MSO
    // namespace attributes all survive. Layout-critical styling is NOT here —
    // it is inlined by PagesGuruEmailInliner. This block only carries:
    //   1. resets that style-supporting clients (incl. Outlook desktop,
    //      which reads <style> but not media queries) apply as defaults,
    //   2. Outlook.com/Apple Mail rendering fixes (ExternalClass etc.),
    //   3. mobile media queries — progressive enhancement on top of the
    //      fluid/hybrid inline layout, ignored harmlessly where unsupported.
    const EMAIL_HEAD_STYLES = `
      body {
        font-family: Helvetica, sans-serif;
        font-size: 16px;
        line-height: 1.3;
        margin: 0;
        padding: 0;
        background-color: #f4f5f6;
        -webkit-font-smoothing: antialiased;
        -ms-text-size-adjust: 100%;
        -webkit-text-size-adjust: 100%;
      }
      table {
        border-collapse: separate;
        mso-table-lspace: 0pt;
        mso-table-rspace: 0pt;
      }
      table td {
        font-family: Helvetica, sans-serif;
        font-size: 16px;
        vertical-align: top;
      }
      p {
        font-family: Helvetica, sans-serif;
        font-size: 16px;
        margin: 0 0 16px 0;
      }
      @media only screen and (max-width: 640px) {
        .pg-email-outer {
          padding: 8px 0 !important;
        }
      }
      @media only screen and (max-width: 480px) {
        .pg-col {
          display: block !important;
          width: 100% !important;
          max-width: 100% !important;
        }
      }
      @media all {
        .ExternalClass {
          width: 100%;
        }
        .ExternalClass,
        .ExternalClass p,
        .ExternalClass span,
        .ExternalClass font,
        .ExternalClass td,
        .ExternalClass div {
          line-height: 100%;
        }
        .apple-link a {
          color: inherit !important;
          font-family: inherit !important;
          font-size: inherit !important;
          font-weight: inherit !important;
          line-height: inherit !important;
          text-decoration: none !important;
        }
        #MessageViewBody a {
          color: inherit;
          text-decoration: none;
          font-size: inherit;
          font-family: inherit;
          font-weight: inherit;
          line-height: inherit;
        }
      }
    `;

    /**
     * Wrap inlined body HTML in a complete email document.
     * The inliner output already contains its own centered, fluid 600px
     * container table, so this wrapper only supplies the document shell,
     * the background canvas, and the head styles above.
     * @param {string} inner       inlined body HTML from pg-get-inlined-html
     * @param {string} metaScript  gjs-metadata <script> tag (kept in <body>
     *                             so loadFromRadIntoGjs finds it on reopen)
     * @returns {string}
     */
    function buildEmailDocument(inner, metaScript) {
      return (
        "<!doctype html>" +
        '<html lang="en" xmlns="https://www.w3.org/1999/xhtml" ' +
        'xmlns:v="urn:schemas-microsoft-com:vml" ' +
        'xmlns:o="urn:schemas-microsoft-com:office:office">' +
        "<head>" +
        '<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />' +
        '<meta name="viewport" content="width=device-width, initial-scale=1.0" />' +
        '<style id="pg-email-head-styles" media="all" type="text/css">' +
        EMAIL_HEAD_STYLES +
        "</style>" +
        "</head>" +
        "<body>" +
        '<table role="presentation" border="0" cellpadding="0" ' +
        'cellspacing="0" width="100%" ' +
        'style="width:100%;background-color:#f4f5f6;">' +
        '<tr><td class="pg-email-outer" align="center" ' +
        'style="padding:24px 8px;">' +
        inner +
        "</td></tr></table>" +
        (metaScript || "") +
        "</body></html>"
      );
    }

    // ── Communication Creator: "Insert field" / "Insert link" dropdowns ────
    // Mirrors the two dropdowns iMIS puts on the Telerik RTE toolbar
    // (CommunicationCreator tool group) so authors don't have to switch back
    // to the RadEditor to insert merge fields or resolved links.
    // Active only for the Communication editor; wired in initGrapes.
    //
    // "Insert field" inserts the plain-text merge token (e.g.
    // {#party.FirstName}) at the current selection — identical to what the
    // Telerik dropdown produces.
    //
    // "Insert link" inserts a placeholder anchor carrying the token in
    // data-imis-link for downstream resolution. NOTE: the attribute name is
    // PagesGuru's own convention; confirm what iMIS actually expects before
    // relying on send-time resolution.

    const PG_FIELD_TOKENS = [
      ["party.Address1", "{#party.Address1}"],
      ["party.Address2", "{#party.Address2}"],
      ["party.Address3", "{#party.Address3}"],
      ["party.BirthDate", "{#party.BirthDate}"],
      ["party.City", "{#party.City}"],
      ["party.Company", "{#party.Company}"],
      ["party.Country", "{#party.Country}"],
      ["party.County", "{#party.County}"],
      ["party.Email", "{#party.Email}"],
      ["party.FirstName", "{#party.FirstName}"],
      ["party.FullAddress", "{#party.FullAddress}"],
      ["party.Informal", "{#party.Informal}"],
      ["party.LastName", "{#party.LastName}"],
      ["party.MajorKey", "{#party.MajorKey}"],
      ["party.MiddleName", "{#party.MiddleName}"],
      ["party.Mobile", "{#party.Mobile}"],
      ["party.Name", "{#party.Name}"],
      ["party.PartyId", "{#party.PartyId}"],
      ["party.Phone", "{#party.Phone}"],
      ["party.Prefix", "{#party.Prefix}"],
      ["party.State", "{#party.State}"],
      ["party.Suffix", "{#party.Suffix}"],
      ["party.UniformId", "{#party.UniformId}"],
      ["party.Zip", "{#party.Zip}"],
    ];

    // Insert a merge-field token as text at the current selection, or append
    // to the wrapper when nothing is selected.
    function pgInsertFieldToken(editor, token) {
      if (!editor || !token) return;
      const sel = editor.getSelected && editor.getSelected();
      if (sel && typeof sel.append === "function") {
        sel.append(token);
      } else {
        editor.addComponents(token);
      }
    }

    // Render the "Insert field" dropdown into this editor's options panel.
    // Scoped to gjsDiv so a page hosting both editors never targets the
    // wrong panel. Link insertion lives in pgLinkPopover (iMIS link dialogs).
    function pgAddCommunicationDropdowns(editor) {
      if (!editor || editor.__pgCommDropdowns) return;

      const optionsEl = gjsDiv.querySelector(".gjs-pn-options");
      if (!optionsEl || optionsEl.querySelector(".pg-comm-dropdown")) return;

      editor.__pgCommDropdowns = true;

      function buildSelect(placeholder, items, onPick) {
        const sel = document.createElement("select");
        sel.className = "pg-comm-dropdown";
        sel.style.cssText =
          "margin:2px 4px;font-size:12px;max-width:150px;vertical-align:middle;";
        const ph = document.createElement("option");
        ph.value = "";
        ph.textContent = placeholder;
        ph.selected = true;
        ph.disabled = true;
        sel.appendChild(ph);
        items.forEach(function (pair) {
          const opt = document.createElement("option");
          opt.value = pair[0];
          opt.textContent = pair[1];
          sel.appendChild(opt);
        });
        sel.addEventListener("change", function () {
          const v = sel.value;
          if (v) {
            const pair = items.find(function (p) {
              return p[0] === v;
            });
            onPick(v, pair ? pair[1] : v);
          }
          sel.selectedIndex = 0;
        });
        return sel;
      }

      const fieldSel = buildSelect(
        "Insert field",
        PG_FIELD_TOKENS,
        function (key) {
          const pair = PG_FIELD_TOKENS.find(function (p) {
            return p[0] === key;
          });
          pgInsertFieldToken(editor, pair ? pair[1] : "{#" + key + "}");
        },
      );

      optionsEl.appendChild(fieldSel);
    }
    // ── end Communication dropdowns ─────────────────────────────────────────

    function saveGjsIntoRadEditor(editor) {
      if (!editor || !bodyInput) return;

      // Rebuild guard. loadProjectData rebuilds the canvas asynchronously and
      // fires "update" events — autosave's 250ms debounce would then save
      // while the new frame's theme CSS may still be loading, inlining
      // against a half-loaded cascade and baking wrong widths/colors into
      // RadEditor. Contract v1 removed loadProjectData from the AI edit path
      // (edits apply via component.replaceWith, no rebuild), so nothing sets
      // this flag today. It stays as the safety seam for any FUTURE caller of
      // loadProjectData on a live comm editor: set it before the call, clear
      // it once window.pgEmailCanvasReady(editor) is true (with a timeout).
      if (editor.__pgRebuilding) {
        console.warn(
          "ZENTSO",
          "Save skipped: canvas rebuilding."
        );
        return;
      }

      let html = editor.getHtml();
      // Strip &nbsp; artifacts introduced by RTE editing
      html = html.replace(/&amp;nbsp;/g, " ");
      html = html.replace(/&nbsp;/g, " ");
      //html = html.replace(/[ \t]+(<br\s*\/?>|<\/)/g, "$1");
      html = html.replace(/[ \t]+(<br\s*\/?>)/g, "$1");
      //console.log("RAW HTML:", html);

      const css = editor.getCss();
      const js = typeof editor.getJs === "function" ? editor.getJs() : "";
      const data = editor.getProjectData();

      if (data && data.assets) {
        delete data.assets;
      }

      const metaScript = `<script type="application/json" id="gjs-metadata">${JSON.stringify(data)}</script>`;

      // Communication (email) editor: emit a complete email document.
      // The inliner resolves theme CSS into inline styles and converts the
      // grid to real tables (Outlook-safe on its own). On top of that,
      // buildEmailDocument() adds a head <style> block with resets, Outlook
      // ExternalClass fixes, and mobile media queries — the hybrid pattern.
      // This is safe because RadEditor's content filters demonstrably
      // persist head <style> blocks, MSO namespace attributes, and mso-*
      // properties (verified against a known-good transactional template
      // round-tripped through this exact editor). Outlook desktop ignores
      // the media queries but honors the inline styles; mobile clients get
      // the responsive rules. Authored JS still has no place in an email.
      // The gjs-metadata JSON is kept inside <body> so loadFromRadIntoGjs
      // can restore the editable project on reopen.
      let combined;
      if (editorId === COMMUNICATION_EDITOR_ID) {
        try {
          html = editor.runCommand("pg-get-inlined-html");
        } catch (err) {
          // Never persist stale/non-inlined content silently. Surface the
          // failure once to the user, always to the console, and abort the
          // write so RadEditor keeps its last known-good content.
          console.error("ZENTSO", "Email inlining failed; save aborted.", err);
          if (!window.__pgInlinerFailureAlerted) {
            window.__pgInlinerFailureAlerted = true;
            alert(
              "PagesGuru: email content could not be prepared for saving. " +
                "The last saved version is unchanged. See console for details.",
            );
          }
          return;
        }
        combined = buildEmailDocument(html || "", metaScript);
      } else {
        combined = `
                <style>${css || ""}</style>
                ${html || ""}
                <script>${(js || "").replace(/<\/script>/gi, "<\\/script>")}</script>
                ${metaScript}
                `.trim();
      }

      const rad = typeof $find === "function" ? $find(editorId) : null;
      if (rad && typeof rad.set_html === "function") {
        rad.set_html(combined);
      }
    }

    const FC_CONTAINER_TYPE = "zentso-fc-container";
    const FC_SLIDE_TYPE = "zentso-fc-slide";
    let _fcSyncing = 0;

    function _withFcGuard(fn) {
      _fcSyncing++;
      try {
        return fn();
      } finally {
        setTimeout(function () {
          _fcSyncing = Math.max(0, _fcSyncing - 1);
        }, 50);
      }
    }

    function _patchFcSlide(slideComp) {
      if (!slideComp || slideComp.__pgSlidePatched) return;
      if (typeof slideComp._syncDOM !== "function") return;

      slideComp.__pgSlidePatched = true;

      const orig = slideComp._syncDOM.bind(slideComp);
      slideComp._syncDOM = function () {
        return _withFcGuard(function () {
          return orig.apply(slideComp, arguments);
        });
      };
    }

    function _patchFcContainer(containerComp) {
      if (!containerComp || containerComp.__pgContainerPatched) return;

      containerComp.__pgContainerPatched = true;

      ["_syncSlides", "_refreshIndicators", "addSlide"].forEach(function (method) {
        if (typeof containerComp[method] !== "function") return;

        const orig = containerComp[method].bind(containerComp);
        containerComp[method] = function () {
          const args = arguments;
          return _withFcGuard(function () {
            return orig.apply(containerComp, args);
          });
        };
      });

      function walkSlides(comps) {
        if (!comps || typeof comps.each !== "function") return;

        comps.each(function (c) {
          if (c.attributes && c.attributes.type === FC_SLIDE_TYPE) {
            _patchFcSlide(c);
          }
          if (c.components) {
            walkSlides(c.components());
          }
        });
      }

      if (containerComp.components) {
        walkSlides(containerComp.components());
      }

      containerComp.on("component:add", function (child) {
        if (child && child.attributes && child.attributes.type === FC_SLIDE_TYPE) {
          _patchFcSlide(child);
        }
      });
    }

    function wireAutosave(editor) {
      let autosaveTimer = null;

      editor.on("update", function () {
        if (_fcSyncing > 0 || (editor.__fcSyncing || 0) > 0) return;

        clearTimeout(autosaveTimer);
        autosaveTimer = setTimeout(function () {
          saveGjsIntoRadEditor(editor);
          console.log("GrapesJS autosaved at", new Date().toLocaleTimeString());
        }, 250);
      });

      const form = bodyInput.closest("form");
      if (form) {
        form.addEventListener("submit", function () {
          saveGjsIntoRadEditor(editor);
        });
      }

      setInterval(function () {
        if (_fcSyncing > 0 || (editor.__fcSyncing || 0) > 0) return;

        saveGjsIntoRadEditor(editor);
        console.log(
          "GrapesJS periodic autosave at",
          new Date().toLocaleTimeString()
        );
      }, 60000);
    }

    function addSaveCommand(editor) {
      const pfx = editor.getConfig().stylePrefix;
      const modal = editor.Modal;
      const cmdm = editor.Commands;
      const pnm = editor.Panels;

      // ── HTML Edit command ──────────────────────────────────────────────────
      const codeViewer = editor.CodeManager.getViewer("CodeMirror").clone();

      codeViewer.set({
        codeName: "htmlmixed",
        readOnly: 0,
        theme: "hopscotch",
        autoBeautify: true,
        autoCloseTags: true,
        autoCloseBrackets: true,
        lineWrapping: true,
        styleActiveLine: true,
        smartIndent: true,
        indentWithTabs: true,
      });

      const codeContainer = document.createElement("div");

      const btnWrapper = document.createElement("div");
      btnWrapper.style.cssText =
        "display:flex; justify-content:flex-end; margin-top:8px;";

      const btnEdit = document.createElement("button");
      btnEdit.type = "button";
      btnEdit.innerHTML = "Update and Close";
      btnEdit.className = pfx + "btn-prim " + pfx + "btn-import";
      btnEdit.onclick = function () {
        const code = codeViewer.editor.getValue();
        editor.DomComponents.getWrapper().set("content", "");
        editor.setComponents(code.trim());
        modal.close();
      };

      btnWrapper.appendChild(btnEdit);

      cmdm.add("html-edit", {
        run: function (editor, sender) {
          sender && sender.set("active", 0);
          let viewer = codeViewer.editor;
          modal.setTitle("Edit HTML code");
          if (!viewer) {
            const txtarea = document.createElement("textarea");
            codeContainer.appendChild(txtarea);
            codeContainer.appendChild(btnWrapper);
            codeViewer.init(txtarea);
            viewer = codeViewer.editor;
          }
          const innerHtml = editor.getHtml();
          const css = editor.getCss();
          modal.setContent("");
          modal.setContent(codeContainer);
          codeViewer.setContent(innerHtml + "<style>" + css + "</style>");
          modal.open();
          viewer.refresh();
        },
      });

      // ── AI edit command (Communication editor) ─────────────────────────────
      // Opens an AI assistant popup that mirrors the "Edit this card" UI:
      // a free-text prompt plus preset writing/image actions. Requests are
      // POSTed to a CloudToolz endpoint (dummy for now) configured via
      // window.PagesGuruConfig.ai.apiUrl. Nothing is applied to the canvas
      // until the endpoint returns; on error the failure is surfaced, never
      // swallowed.
      cmdm.add("pg-ai-edit", {
        run: function (editor, sender) {
          sender && sender.set && sender.set("active", 0);

          const aiApiUrl =
            (resolvedConfig.ai && resolvedConfig.ai.apiUrl) || "";

          // ── Theme (black/white, hover-highlighted buttons) ──────────────
          // Injected once into <head>; scoped to .pg-ai-modal-dialog so it
          // never bleeds into other modals (e.g. html-edit) that reuse the
          // same editor.Modal instance.
          if (!document.getElementById("pg-ai-modal-style")) {
            const styleTag = document.createElement("style");
            styleTag.id = "pg-ai-modal-style";
            styleTag.textContent =
              ".pg-ai-modal-dialog .gjs-mdl-content{background:#000 !important;color:#fff !important;}" +
              ".pg-ai-modal-dialog .gjs-mdl-header{background:#000 !important;border-bottom:1px solid #262626 !important;}" +
              ".pg-ai-modal-dialog .gjs-mdl-title{color:#fff !important;}" +
              ".pg-ai-modal-dialog .gjs-mdl-btn-close{color:#fff !important;}" +
              ".pg-ai-modal-dialog .gjs-mdl-btn-close:hover{color:#999 !important;}" +
              ".pg-ai-textarea::placeholder{color:rgba(255,255,255,.5);}" +
              ".pg-ai-send-btn{align-self:center;white-space:nowrap;background:#000;color:#fff;" +
              "border:1px solid #fff;border-radius:8px;padding:8px 16px;font:inherit;cursor:pointer;" +
              "transition:background .15s ease,color .15s ease;}" +
              ".pg-ai-send-btn:hover:not(:disabled){background:#fff;color:#000;}" +
              ".pg-ai-send-btn:disabled{opacity:.5;cursor:default;}" +
              ".pg-ai-chip{border:1px solid #555;background:#000;border-radius:9999px;padding:6px 12px;" +
              "font:inherit;cursor:pointer;color:#fff;" +
              "transition:background .15s ease,color .15s ease,border-color .15s ease;}" +
              ".pg-ai-chip:hover:not(:disabled){background:#fff;color:#000;border-color:#fff;}" +
              ".pg-ai-chip:disabled{opacity:.5;cursor:default;}";
            document.head.appendChild(styleTag);
          }

          const wrap = document.createElement("div");
          wrap.style.cssText = "font-size:14px; background:#000; color:#fff;";

          const label = document.createElement("div");
          label.textContent = "Edit this communication";
          label.style.cssText =
            "font-weight:600; margin-bottom:8px; color:#fff;";

          const inputRow = document.createElement("div");
          inputRow.style.cssText =
            "display:flex; gap:8px; align-items:flex-end; border:1px solid #333;" +
            "background:#0d0d0d; border-radius:12px; padding:10px 12px; margin-bottom:12px;";

          const textarea = document.createElement("textarea");
          textarea.rows = 2;
          textarea.className = "pg-ai-textarea";
          textarea.placeholder = "How would you like to edit this email?";
          textarea.style.cssText =
            "flex:1; border:0; outline:0; resize:vertical; font:inherit;" +
            "background:transparent; color:#fff; min-height:44px;";

          const sendBtn = document.createElement("button");
          sendBtn.type = "button";
          sendBtn.textContent = "Send";
          sendBtn.className = "pg-ai-send-btn";

          inputRow.appendChild(textarea);
          inputRow.appendChild(sendBtn);

          const status = document.createElement("div");
          status.style.cssText =
            "min-height:18px; font-size:12px; color:#aaa; margin-bottom:8px;";

          function makeGroup(title, actions) {
            const g = document.createElement("div");
            g.style.cssText = "margin-bottom:10px;";
            const h = document.createElement("div");
            h.textContent = title;
            h.style.cssText =
              "font-size:12px; color:#aaa; margin-bottom:6px;";
            const row = document.createElement("div");
            row.style.cssText = "display:flex; flex-wrap:wrap; gap:8px;";
            actions.forEach(function (a) {
              const chip = document.createElement("button");
              chip.type = "button";
              chip.textContent = a.label;
              chip.dataset.action = a.action;
              chip.className = "pg-ai-chip";
              chip.onclick = function () {
                runAi(a.action, textarea.value.trim());
              };
              row.appendChild(chip);
            });
            g.appendChild(h);
            g.appendChild(row);
            return g;
          }

          const writingGroup = makeGroup("Writing", [
            { label: "Improve writing", action: "improve_writing" },
            { label: "Fix spelling & grammar", action: "fix_grammar" },
            { label: "Translate", action: "translate" },
            { label: "Make longer", action: "make_longer" },
            { label: "Make shorter", action: "make_shorter" },
            { label: "Simplify language", action: "simplify" },
            { label: "Be more specific", action: "be_specific" },
          ]);

          const stylingGroup = makeGroup("Styling", [
            { label: "Make this more visual", action: "more_visual" },
            /*
            { label: "Add an image", action: "add_image" },
            { label: "Add a chart", action: "add_chart" },*/
          ]);

          wrap.appendChild(label);
          wrap.appendChild(inputRow);
          wrap.appendChild(status);
          wrap.appendChild(writingGroup);
          wrap.appendChild(stylingGroup);

          let inFlight = false;

          function setBusy(busy, msg) {
            inFlight = busy;
            sendBtn.disabled = busy;
            wrap.querySelectorAll("button[data-action]").forEach(function (b) {
              b.disabled = busy;
              b.style.opacity = busy ? "0.5" : "1";
              b.style.pointerEvents = busy ? "none" : "auto";
            });
            status.style.color = "#aaa";
            status.textContent = msg || "";
          }

          // ── Contract v1 helpers ────────────────────────────────────────
          // Every element component must carry attributes.id so the patch
          // contract can anchor edits to it: the AI returns fragments keyed
          // by id, and the client resolves them via wrapper.find('#id').
          // Components dropped from blocks often ship WITHOUT attributes.id
          // (only styled ones get it) — annotate the whole tree before
          // serializing. getId() returns attributes.id when present, so this
          // never changes an existing id. Persisted ids are harmless: the
          // email inliner strips id attributes from the exported document.
          function ensureComponentIds(comp) {
            const type = comp.get && comp.get("type");
            if (type !== "textnode" && type !== "comment") {
              const attrs = comp.getAttributes ? comp.getAttributes() : {};
              if (!attrs.id && comp.addAttributes) {
                comp.addAttributes({ id: comp.getId() });
              }
            }
            if (comp.components) {
              comp.components().each(ensureComponentIds);
            }
          }

          // Client-side validation of a single {id, html} edit. The server
          // validates too (contract §2); this is belt-and-braces so a
          // misbehaving endpoint can never inject script or clobber the
          // wrong component. Returns null if valid, else a reason string.
          function validateEdit(edit, wrapper) {
            if (
              !edit ||
              typeof edit.id !== "string" ||
              typeof edit.html !== "string" ||
              !edit.html.trim()
            ) {
              return "malformed edit";
            }
            if (!/^[A-Za-z][A-Za-z0-9_-]*$/.test(edit.id)) {
              return "invalid id";
            }
            if (
              /<\s*(script|style|iframe|object|embed|form|video|link|meta)\b/i.test(
                edit.html
              )
            ) {
              return "forbidden element";
            }
            if (/\son\w+\s*=/i.test(edit.html)) {
              return "event handler attribute";
            }
            if (/javascript\s*:/i.test(edit.html)) {
              return "javascript: URL";
            }
            // Exactly one root element whose id matches. (DOMParser via
            // text/html: fine for the div/p/hN/a fragments the email editor
            // holds; table fragments would be re-rooted, but tables only
            // exist post-inline, never in editor content.)
            let parsed;
            try {
              parsed = new DOMParser().parseFromString(
                edit.html,
                "text/html"
              );
            } catch (e) {
              return "unparseable html";
            }
            const roots = parsed && parsed.body ? parsed.body.children : [];
            if (roots.length !== 1) {
              return "must have exactly one root element";
            }
            if (roots[0].id !== edit.id) {
              return "root id mismatch";
            }
            if (!wrapper.find("#" + edit.id)[0]) {
              return "unknown component id";
            }
            return null;
          }

          function runAi(action, prompt) {
            if (inFlight) return;

            if (!aiApiUrl) {
              status.style.color = "#ff6b6b";
              status.textContent =
                "AI endpoint not configured (PagesGuruConfig.ai.apiUrl).";
              return;
            }
            if (action === "custom_prompt" && !prompt) {
              status.style.color = "#ff6b6b";
              status.textContent = "Enter a prompt first.";
              return;
            }

            setBusy(true, "Generating...");

            // Scope: a selected component narrows the edit to that subtree;
            // otherwise the whole document is offered. Both go through the
            // SAME response contract (a patch list) — scope only changes how
            // much HTML the endpoint sees. GrapesJS keeps the last-clicked
            // component selected, so document-wide edits require
            // deliberately deselecting first; log what this request actually
            // targets so a mis-scoped run identifies itself.
            const selected = editor.getSelected();
            const scope = selected ? "selection" : "document";
            console.debug(
              "ZENTSO",
              "AI edit request:",
              action,
              "scope=" + scope,
              selected ? "selectedId=" + selected.getId() : ""
            );

            // Contract v1: the endpoint edits id-anchored HTML fragments.
            // projectData is no longer sent — the server neither needs nor
            // may return it. Annotate ids across the whole tree first so
            // every element in the serialized HTML is addressable.
            try {
              ensureComponentIds(editor.getWrapper());
            } catch (e) {
              console.warn("ZENTSO", "Component id annotation failed:", e);
            }

            const requestBody = {
              contractVersion: 1,
              action: action,
              prompt: prompt || "",
              context: "communication",
              scope: scope,
              editorId: editorId,
              css: editor.getCss(),
            };

            if (selected) {
              requestBody.selectedId = selected.getId();
              requestBody.html = selected.toHTML();
            } else {
              requestBody.html = editor.getHtml();
            }

            fetch(aiApiUrl, {
              method: "POST",
              headers: { "Content-Type": "application/json" },
              body: JSON.stringify(requestBody),
            })
              .then(function (res) {
                // Try to read the structured error body even on non-2xx.
                return res.json().then(
                  function (data) {
                    if (!res.ok) {
                      throw new Error(
                        (data && data.message) ||
                          "AI request failed: " + res.status
                      );
                    }
                    return data;
                  },
                  function () {
                    throw new Error("AI request failed: " + res.status);
                  }
                );
              })
              .then(function (data) {
                if (!data || data.status === "error") {
                  throw new Error(
                    (data && data.message) || "AI request failed."
                  );
                }

                // ── Contract v1: unified patch application ──────────
                // Both scopes answer with {status:"ok", edits:[{id, html}]}.
                // Each edit replaces exactly one component, resolved by id;
                // untouched components are never re-parsed, so their types,
                // traits, and style bindings survive by construction. There
                // is NO loadProjectData here — no canvas rebuild, no
                // rebuild-window flag, no readiness settle loop. The canvas
                // frame and its injected styles are untouched throughout.
                if (!Array.isArray(data.edits)) {
                  console.error(
                    "ZENTSO",
                    "AI response contract mismatch. Expected " +
                      "{status:'ok', edits:[{id, html}]}. Received keys:",
                    Object.keys(data),
                    data.projectData
                      ? "Response carries projectData — endpoint is " +
                          "answering the RETIRED pre-v1 document contract."
                      : "",
                    "Full response:",
                    data
                  );
                  throw new Error("AI response missing edits array.");
                }

                if (data.edits.length === 0) {
                  setBusy(false, "");
                  status.textContent = "No changes suggested.";
                  return;
                }

                const wrapper = editor.getWrapper();

                // Validate every edit and resolve its target BEFORE applying
                // any: a partial apply after a mid-batch failure would leave
                // the document in a state neither the user nor the endpoint
                // produced.
                const resolved = [];
                const rejected = [];
                data.edits.forEach(function (edit) {
                  const reason = validateEdit(edit, wrapper);
                  if (reason) {
                    rejected.push({
                      id: edit && edit.id,
                      reason: reason,
                    });
                    return;
                  }
                  resolved.push({
                    edit: edit,
                    target: wrapper.find("#" + edit.id)[0],
                  });
                });

                // Contract §2.6: no nested edits. Applying an outer edit
                // destroys inner targets, so keep the outermost only.
                const targets = resolved.map(function (r) {
                  return r.target;
                });
                const flat = resolved.filter(function (r) {
                  let p = r.target.parent && r.target.parent();
                  while (p) {
                    if (targets.indexOf(p) !== -1) {
                      rejected.push({
                        id: r.edit.id,
                        reason: "nested inside another edit",
                      });
                      return false;
                    }
                    p = p.parent && p.parent();
                  }
                  return true;
                });

                if (rejected.length) {
                  console.error(
                    "ZENTSO",
                    "AI edits rejected by client validation:",
                    rejected
                  );
                }
                if (!flat.length) {
                  throw new Error(
                    "AI response contained no valid edits (" +
                      rejected.length +
                      " rejected — see console)."
                  );
                }

                // Disjoint targets: application order is irrelevant.
                flat.forEach(function (r) {
                  r.target.replaceWith(r.edit.html);
                });

                console.debug(
                  "ZENTSO",
                  "AI edit applied:",
                  flat.length + " component(s)",
                  rejected.length ? rejected.length + " rejected" : ""
                );

                // One explicit persist for the whole batch. replaceWith also
                // fires update events, so the debounced autosave would catch
                // it anyway — this just makes the save deterministic.
                saveGjsIntoRadEditor(editor);

                setBusy(false, "");
                modal.close();
              })
              .catch(function (err) {
                console.error("ZENTSO", "AI edit failed:", err);
                setBusy(false, "");
                status.style.color = "#ff6b6b";
                status.textContent =
                  (err && err.message) || "AI request failed.";
              });
          }

          sendBtn.onclick = function () {
            runAi("custom_prompt", textarea.value.trim());
          };
          textarea.addEventListener("keydown", function (e) {
            if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) {
              e.preventDefault();
              runAi("custom_prompt", textarea.value.trim());
            }
          });

          modal.setTitle("AI assistant");
          modal.setContent("");
          modal.setContent(wrap);
          modal.open();

          // Scope the black theme to this modal only: html-edit reuses the
          // same editor.Modal instance and must keep its own default styling.
          const dialogEl =
            modal.getContentEl && modal.getContentEl()
              ? modal.getContentEl().closest(".gjs-mdl-dialog")
              : null;
          if (dialogEl) {
            dialogEl.classList.add("pg-ai-modal-dialog");
            editor.once("modal:close", function () {
              dialogEl.classList.remove("pg-ai-modal-dialog");
            });
          }

          setTimeout(function () {
            textarea.focus();
          }, 0);
        },
      });

      // ── Save command ───────────────────────────────────────────────────────
      cmdm.add("save-content", {
        run() {
          saveGjsIntoRadEditor(editor);
        },
      });

      // ── Panel buttons ──────────────────────────────────────────────────────
      pnm.addButton("options", [
        {
          id: "edit",
          label: `<svg style="display:block;max-width:22px" viewBox="0 0 24 24">
            <path fill="currentColor" d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04a1 1 0 0 0 0-1.41l-2.34-2.34a1 1 0 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"/>
          </svg>`,
          attributes: { title: "Edit code" },
          command: "html-edit",
        },
        {
          id: "save-button",
          label: `<svg style="display:block;max-width:22px" viewBox="0 0 24 24">
            <path fill="currentColor" d="M15,9H5V5H15M12,19A3,3 0 0,1 9,16A3,3 0 0,1 12,13A3,3 0 0,1 15,16A3,3 0 0,1 12,19M17,3H5A2,2 0 0,0 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V7L17,3Z"/>
          </svg>`,
          attributes: { title: "Save" },
          command: "save-content",
        },
      ]);
    }

    function cleanProjectData(data) {
      if (!data || !data.pages) return data;

      function cleanComponents(components) {
        if (!Array.isArray(components)) return components;
        return components.map((comp) => {
          // Clean all &nbsp; from textnode content
          if (comp.type === "textnode" && comp.content) {
            comp.content = comp.content
              .replace(/&nbsp;/g, " ") // regular &nbsp;
              .replace(/&amp;nbsp;/g, " ") // double encoded &amp;nbsp;
              .replace(/\u00a0/g, " "); // unicode non-breaking space
          }
          // Recurse into children
          if (comp.components) {
            comp.components = cleanComponents(comp.components);
          }
          return comp;
        });
      }

      data.pages = data.pages.map((page) => {
        if (page.frames) {
          page.frames = page.frames.map((frame) => {
            if (frame.component) {
              frame.component = cleanComponents([frame.component])[0];
            }
            return frame;
          });
        }
        return page;
      });

      return data;
    }

    function loadFromRadIntoGjs(editor) {
      const rad = typeof $find === "function" ? $find(editorId) : null;
      const sourceHtml =
        rad && typeof rad.get_html === "function"
          ? rad.get_html()
          : bodyInput.value || "";

      //console.log("SOURCE HTML ON LOAD:", sourceHtml);

      if (!sourceHtml || !sourceHtml.trim()) {
        editor.setComponents("");
        editor.setStyle("");
        return;
      }

      const temp = document.createElement("div");
      temp.innerHTML = sourceHtml;

      const metaTag = temp.querySelector(
        'script#gjs-metadata[type="application/json"]',
      );
      if (metaTag) {
        try {
          let projectData = JSON.parse(metaTag.textContent);
          projectData = cleanProjectData(projectData);
          editor.loadProjectData(projectData);
          return;
        } catch (e) {
          console.warn(
            "Could not parse GJS metadata, falling back to HTML/CSS parsing.",
            e,
          );
        }
      }

      // The exported email document carries static head styles
      // (#pg-email-head-styles). They are document chrome, not authored
      // styles — feeding them back into the editor as project CSS would
      // duplicate them on every save/load cycle. Drop before extraction.
      const persistedHeadStyles = temp.querySelector(
        "style#pg-email-head-styles",
      );
      if (persistedHeadStyles) persistedHeadStyles.remove();

      const styleTags = Array.from(temp.querySelectorAll("style"));
      const scriptTags = Array.from(temp.querySelectorAll("script"));

      const css = styleTags.map((x) => x.innerHTML || "").join("\n");

      styleTags.forEach((x) => x.remove());
      scriptTags.forEach((x) => {
        if (x.id === "gjs-metadata" && x.type === "application/json") return;
        x.remove();
      });

      const html = temp.innerHTML;

      editor.setComponents(html || "");
      editor.setStyle(css || "");
    }

    function pgNeutralizeModalSubmitButtons(editor) {
      const fix = (root) => {
        root.querySelectorAll("button:not([type])").forEach((b) => {
          b.setAttribute("type", "button");
        });
      };

      editor.on("modal:open", () => {
        const contentEl = editor.Modal.getContentEl();
        if (!contentEl) return;
        const dialog = contentEl.closest(".gjs-mdl-dialog") || contentEl;

        fix(dialog);
        const mo = new MutationObserver(() => fix(dialog));
        mo.observe(dialog, { childList: true, subtree: true });
        editor.once("modal:close", () => mo.disconnect());
      });
    }

    function initGrapes() {
      if (grapesBootstrapped) return;
      if (!window.grapesjs) return;

      grapesBootstrapped = true;

      const externalPlugins = resolveConfiguredPluginFns();
      const isCommEditor = editorId === COMMUNICATION_EDITOR_ID;

      // ── Editor-type plugin sets ─────────────────────────────────────────
      // The communication (email) editor deliberately loads NO webpage
      // plugins (preset-webpage, bootstrap-5, sliders, bg/gradient/filter,
      // custom-code): they register blocks and style properties that either
      // don't render in email clients or produce markup the inliner would
      // have to strip again. This mirrors grapesjs-preset-newsletter's
      // approach of treating the email editor as a different editor, not a
      // webpage editor with extra blocks.
      const websitePlugins = [
        ...externalPlugins,
        "grapesjs-preset-webpage",
        "grapesjs-bootstrap-5",
        "grapesjs-parser-postcss",
        "grapesjs-tui-image-editor",
        "grapesjs-custom-code",
        "gjs-blocks-basic",
        "grapesjs-style-bg",
        "grapesjs-style-gradient",
        "grapesjs-style-filter",
        "grapesjs-lory-slider",
      ];

      const emailPlugins = [
        ...externalPlugins,
        "grapesjs-parser-postcss",
        "grapesjs-tui-image-editor",
      ];

      // ── Email-safe Style Manager ────────────────────────────────────────
      // Reduced property set for the communication editor (equivalent of
      // preset-newsletter's updateStyleManager). Everything here survives
      // computed-style inlining AND renders in Outlook's Word engine.
      // Deliberately absent: flex/position/transform/filter/gradient/shadow.
      const emailStyleManager = {
        sectors: [
          {
            name: "Typography",
            open: true,
            buildProps: [
              "font-family",
              "font-size",
              "font-weight",
              "letter-spacing",
              "color",
              "line-height",
              "text-align",
              "text-decoration",
            ],
          },
          {
            name: "Background",
            open: false,
            buildProps: ["background-color"],
          },
          {
            name: "Spacing",
            open: false,
            buildProps: ["padding", "margin"],
          },
          {
            name: "Borders",
            open: false,
            buildProps: ["border", "border-radius"],
          },
          {
            name: "Dimensions",
            open: false,
            buildProps: ["width", "max-width", "height"],
          },
        ],
      };

      // ── Email canvas shell ──────────────────────────────────────────────
      // Minimal email-context frame for the communication editor. The
      // #pg-email-canvas-base resets mirror buildEmailDocument()'s head
      // styles so the canvas is WYSIWYG against the exported document, and
      // the table/td resets (vertical-align:top, mso-table-*space) get
      // picked up by the computed-style inliner exactly like
      // preset-newsletter's cellStyle/tableStyle defaults. Canvas-only;
      // never persisted.
      //
      // The base CSS lives in a shared constant because it is the PRIMARY
      // 600px constraint: it caps the wrapper itself, and the inliner
      // freezes every child's computed width against that cap. frameContent
      // is only guaranteed on the first frame build — loadProjectData (AI
      // edits) can rebuild the frame from projectData's own frame records
      // and skip frameContent entirely, silently dropping this <style>.
      // pgInjectEmailCanvasPreview therefore re-injects it from this same
      // constant, and pgEmailCanvasReady requires it, so canvas rebuilds
      // can never leave the wrapper uncapped at raw iframe width.
      const PG_EMAIL_CANVAS_BASE_CSS = `
                body {
                  font-family: Helvetica, sans-serif;
                  font-size: 16px;
                  line-height: 1.3;
                  background-color: #f4f5f6;
                  margin: 0;
                  padding: 24px 0;
                  -webkit-text-size-adjust: 100%;
                }
                table {
                  border-collapse: separate;
                  mso-table-lspace: 0pt;
                  mso-table-rspace: 0pt;
                }
                table td {
                  font-family: Helvetica, sans-serif;
                  font-size: 16px;
                  vertical-align: top;
                }
                p { margin: 0 0 16px 0; }
                #gjs-root,
                body > [data-gjs-type="wrapper"] {
                  background: #ffffff;
                  border: 1px solid #eaebed;
                  box-sizing: border-box;
                  margin: 0 auto;
                  max-width: 600px;
                  min-height: 200px;
                  padding: 24px;
                  width: 100%;
                }`;

      const emailFrameContent = `
            <!doctype html>
            <html lang="en">
            <head>
              <meta charset="UTF-8" />
              <meta name="viewport" content="width=device-width, initial-scale=1.0" />
              <style id="pg-email-canvas-base">${PG_EMAIL_CANVAS_BASE_CSS}
              </style>
            </head>
            <body>
              <div id="gjs-root"></div>
            </body>
            </html>`;

      const websiteFrameContent = `
            <!doctype html>
            <html id="MainHtml" lang="en" class="html-main t-chrome t-chrome145">
            <head id="ctl01_Head1">
              <meta charset="UTF-8" />
              <meta name="viewport" content="width=device-width, initial-scale=1.0" />
            </head>
            <body id="MainBody" class="Wrapper-FullWidth" data-aos-easing="ease" data-aos-duration="500" data-aos-delay="100">
              <a href="#mainContentWrapper" class="screen-reader-text show-on-focus">Skip to main content</a>
              <form id="aspnetForm" class="form-main" novalidate>
                <div id="ctl01_masterWrapper" class="wrapper">
                  <a id="PageTop" class="sr-only">Top of the Page</a>
                  <header id="hd" class="header ClearFix"></header>
                  <div class="container main-container ClearFix">
                    <main class="body-container" id="ContentPanel">
                      <div class="col-primary" data-label="Main Content">
                        <div id="mainContentWrapper" class="ContentPanel">
                          <div id="gjs-root"></div>
                        </div>
                      </div>
                    </main>
                  </div>
                  <footer id="ft" class="footer ClearFix"></footer>
                </div>
              </form>
            </body>
            </html>`;

      const initConfig = {
        container: "#" + gjsDiv.id,
        allowScripts: true,
        height: "100%",
        jsInHtml: true,
        showOffsets: true,
        fromElement: false,
        components: "",
        noticeOnUnload: false,
        storageManager: false,

        assetManager: {
          embedAsBase64: false,
          assets: [],
        },

        plugins: isCommEditor ? emailPlugins : websitePlugins,

        colorPicker: {
          appendTo: "parent",
          offset: { top: 26, left: -166 },
        },

        canvas: {
          styles: resolvedConfig.canvasStyleUrls,
          frameContent: isCommEditor ? emailFrameContent : websiteFrameContent,
        },

        pluginsOpts: isCommEditor
          ? {}
          : {
              "grapesjs-bootstrap-5": {},
              "gjs-blocks-basic": {
                blocks: ["map"],
                category: "Extra",
              },
              "grapesjs-preset-webpage": {
                blocks: [],
                useCustomTheme: true,
              },
            },

        // The website editor gets its right-hand panel system (views buttons
        // + views-container) from grapesjs-preset-webpage. The communication
        // editor excludes that preset, so it must define the panels itself:
        // without a "views-container" panel the BlockManager registers its
        // blocks but has no element to render into (empty right sidebar).
        panels: {
          defaults: isCommEditor
            ? [
                {
                  id: "devices-c",
                  buttons: [
                    {
                      id: "device-desktop",
                      command: "pg-set-device-desktop",
                      active: true,
                      togglable: false,
                      attributes: { title: "Desktop" },
                      label: `<svg style="display:block;max-width:22px" viewBox="0 0 24 24">
                        <path fill="currentColor" d="M21,16H3V4H21M21,2H3C1.89,2 1,2.89 1,4V16A2,2 0 0,0 3,18H10V20H8V22H16V20H14V18H21A2,2 0 0,0 23,16V4C23,2.89 22.1,2 21,2Z"/>
                      </svg>`,
                    },
                    {
                      id: "device-tablet",
                      command: "pg-set-device-tablet",
                      togglable: false,
                      attributes: { title: "Tablet" },
                      label: `<svg style="display:block;max-width:22px" viewBox="0 0 24 24">
                        <path fill="currentColor" d="M19,18H5V6H19M21,4H3C1.89,4 1,4.89 1,6V18A2,2 0 0,0 3,20H21A2,2 0 0,0 23,18V6C23,4.89 22.1,4 21,4Z"/>
                      </svg>`,
                    },
                    {
                      id: "device-mobile",
                      command: "pg-set-device-mobile",
                      togglable: false,
                      attributes: { title: "Mobile" },
                      label: `<svg style="display:block;max-width:22px" viewBox="0 0 24 24">
                        <path fill="currentColor" d="M17,19H7V5H17M17,1H7C5.89,1 5,1.89 5,3V21A2,2 0 0,0 7,23H17A2,2 0 0,0 19,21V3C19,1.89 18.1,1 17,1Z"/>
                      </svg>`,
                    },
                  ],
                },
                {
                  id: "options",
                  buttons: [
                                        {
                      id: "pg-ai",
                      command: "pg-ai-edit",
                      togglable: false,
                      attributes: { title: "AI" },
                      label: `<svg style="display:block;max-width:22px" viewBox="0 0 24 24">
                        <path fill="currentColor" d="M12 2l1.9 5.6a2 2 0 0 0 1.25 1.25L20.8 10.7l-5.65 1.9a2 2 0 0 0-1.25 1.25L12 19.4l-1.9-5.55a2 2 0 0 0-1.25-1.25L3.2 10.7l5.65-1.85A2 2 0 0 0 10.1 7.6L12 2zM19 15l.7 2.1a1 1 0 0 0 .63.63L22.4 18.4l-2.07.67a1 1 0 0 0-.63.63L19 21.8l-.7-2.1a1 1 0 0 0-.63-.63L15.6 18.4l2.07-.67a1 1 0 0 0 .63-.63L19 15z"/>
                      </svg>`,
                    },
                                        {
                      id: "undo",
                      command: "core:undo",
                      togglable: false,
                      attributes: { title: "Undo" },
                      label: `<svg style="display:block;max-width:22px" viewBox="0 0 24 24">
                        <path fill="currentColor" d="M12.5,8C9.85,8 7.45,9 5.6,10.6L2,7V16H11L7.38,12.38C8.77,11.22 10.54,10.5 12.5,10.5C16.04,10.5 19.05,12.81 20.1,16L22.47,15.22C21.08,11.03 17.15,8 12.5,8Z"/>
                      </svg>`,
                    },
                    {
                      id: "redo",
                      command: "core:redo",
                      togglable: false,
                      attributes: { title: "Redo" },
                      label: `<svg style="display:block;max-width:22px" viewBox="0 0 24 24">
                        <path fill="currentColor" d="M18.4,10.6C16.55,9 14.15,8 11.5,8C6.85,8 2.92,11.03 1.53,15.22L3.9,16C4.95,12.81 7.96,10.5 11.5,10.5C13.46,10.5 15.23,11.22 16.62,12.38L13,16H22V7L18.4,10.6Z"/>
                      </svg>`,
                    },
                    {
                      id: "preview",
                      command: "core:preview",
                      togglable: false,
                      attributes: { title: "Preview" },
                      label: `<svg style="display:block;max-width:22px" viewBox="0 0 24 24">
                        <path fill="currentColor" d="M12,9A3,3 0 0,0 9,12A3,3 0 0,0 12,15A3,3 0 0,0 15,12A3,3 0 0,0 12,9M12,17A5,5 0 0,1 7,12A5,5 0 0,1 12,7A5,5 0 0,1 17,12A5,5 0 0,1 12,17M12,4.5C7,4.5 2.73,7.61 1,12C2.73,16.39 7,19.5 12,19.5C17,19.5 21.27,16.39 23,12C21.27,7.61 17,4.5 12,4.5Z"/>
                      </svg>`,
                    },
                    {
                      id: "swv",
                      className: "fa fa-square-o",
                      command: "core:component-outline",
                      active: true,
                      togglable: true,
                      attributes: { title: "View components" },
                    },
                  ],
                },
                {
                  id: "views",
                  buttons: [
                    {
                      id: "open-sm",
                      command: "core:open-styles",
                      togglable: false,
                      attributes: { title: "Styles" },
                      label: `<svg style="display:block;max-width:22px" viewBox="0 0 24 24">
                        <path fill="currentColor" d="M20.71,4.63L19.37,3.29C19,2.9 18.35,2.9 17.96,3.29L9,12.25L11.75,15L20.71,6.04C21.1,5.65 21.1,5 20.71,4.63M7,14A3,3 0 0,0 4,17C4,18.31 2.84,19 2,19C2.92,20.22 4.5,21 6,21A4,4 0 0,0 10,17A3,3 0 0,0 7,14Z"/>
                      </svg>`,
                    },
                    {
                      id: "open-tm",
                      command: "core:open-traits",
                      togglable: false,
                      attributes: { title: "Settings" },
                      label: `<svg style="display:block;max-width:22px" viewBox="0 0 24 24">
                        <path fill="currentColor" d="M12,15.5A3.5,3.5 0 0,1 8.5,12A3.5,3.5 0 0,1 12,8.5A3.5,3.5 0 0,1 15.5,12A3.5,3.5 0 0,1 12,15.5M19.43,12.97C19.47,12.65 19.5,12.33 19.5,12C19.5,11.67 19.47,11.34 19.43,11L21.54,9.37C21.73,9.22 21.78,8.95 21.66,8.73L19.66,5.27C19.54,5.05 19.27,4.96 19.05,5.05L16.56,6.05C16.04,5.66 15.5,5.32 14.87,5.07L14.5,2.42C14.46,2.18 14.25,2 14,2H10C9.75,2 9.54,2.18 9.5,2.42L9.13,5.07C8.5,5.32 7.96,5.66 7.44,6.05L4.95,5.05C4.73,4.96 4.46,5.05 4.34,5.27L2.34,8.73C2.21,8.95 2.27,9.22 2.46,9.37L4.57,11C4.53,11.34 4.5,11.67 4.5,12C4.5,12.33 4.53,12.65 4.57,12.97L2.46,14.63C2.27,14.78 2.21,15.05 2.34,15.27L4.34,18.73C4.46,18.95 4.73,19.03 4.95,18.95L7.44,17.94C7.96,18.34 8.5,18.68 9.13,18.93L9.5,21.58C9.54,21.82 9.75,22 10,22H14C14.25,22 14.46,21.82 14.5,21.58L14.87,18.93C15.5,18.67 16.04,18.34 16.56,17.94L19.05,18.95C19.27,19.03 19.54,18.95 19.66,18.73L21.66,15.27C21.78,15.05 21.73,14.78 21.54,14.63L19.43,12.97Z"/>
                      </svg>`,
                    },
                    {
                      id: "open-layers",
                      command: "core:open-layers",
                      togglable: false,
                      attributes: { title: "Layers" },
                      label: `<svg style="display:block;max-width:22px" viewBox="0 0 24 24">
                        <path fill="currentColor" d="M12,16L19.36,10.27L21,9L12,2L3,9L4.63,10.27M12,18.54L4.62,12.81L3,14.07L12,21.07L21,14.07L19.37,12.8L12,18.54Z"/>
                      </svg>`,
                    },
                    {
                      id: "open-blocks",
                      command: "core:open-blocks",
                      togglable: false,
                      active: true,
                      attributes: { title: "Blocks" },
                      label: `<svg style="display:block;max-width:22px" viewBox="0 0 24 24">
                        <path fill="currentColor" d="M3,3H11V11H3V3M13,3H21V11H13V3M3,13H11V21H3V13M13,13H21V21H13V13Z"/>
                      </svg>`,
                    },
                  ],
                },
                { id: "views-container" },
              ]
            : [
                {
                  id: "options",
                  buttons: [
                    {
                      id: "swv",
                      className: "fa fa-square-o",
                      command: "core:component-outline",
                      active: true,
                      togglable: true,
                      attributes: { title: "View components" },
                    },
                  ],
                },
              ],
        },
      };

      if (isCommEditor) {
        initConfig.styleManager = emailStyleManager;
        // Explicit device set: don't rely on GrapesJS defaults. Desktop is
        // unconstrained (the email canvas preview style already caps the
        // content at 600px); tablet/mobile emulate common client widths.
        initConfig.deviceManager = {
          devices: [
            { id: "desktop", name: "Desktop", width: "" },
            { id: "tablet", name: "Tablet", width: "770px", widthMedia: "992px" },
            { id: "mobile", name: "Mobile", width: "375px", widthMedia: "480px" },
          ],
        };
      }

      gjsEditor = grapesjs.init(initConfig);

      // ── Device-switch commands (communication editor only) ──────────────
      // The website editor gets set-device-* commands from
      // grapesjs-preset-webpage; the email editor registers its own so the
      // devices-c panel buttons resolve. Prefixed pg- to avoid clashing if
      // the preset is ever present on the same page.
      if (isCommEditor) {
        gjsEditor.Commands.add("pg-set-device-desktop", {
          run: (ed) => ed.setDevice("Desktop"),
        });
        gjsEditor.Commands.add("pg-set-device-tablet", {
          run: (ed) => ed.setDevice("Tablet"),
        });
        gjsEditor.Commands.add("pg-set-device-mobile", {
          run: (ed) => ed.setDevice("Mobile"),
        });
      }

      // ── Inlined-HTML export command (communication editor only) ─────────
      // Same seam as preset-newsletter's gjs-get-inlined-html: the inliner
      // is exposed as a command so it is runnable from the console and from
      // saveGjsIntoRadEditor via one code path. Fails loudly, not silently:
      // a missing inliner in the email editor means broken Outlook output.
      if (isCommEditor) {
        gjsEditor.Commands.add("pg-get-inlined-html", {
          run(ed) {
            if (
              !window.PagesGuruEmailInliner ||
              typeof window.PagesGuruEmailInliner.inline !== "function"
            ) {
              throw new Error(
                "ZENTSO: PagesGuruEmailInliner missing. " +
                  "foundation-marketing-components.js not loaded?"
              );
            }
            
            // Guard at the point of consumption: the inliner reads computed
            // styles from the live canvas, so the 600px caps (base wrapper
            // cap + preview pin) MUST be in the CURRENT frame document.
            // loadProjectData (AI edits) rebuilds the frame asynchronously
            // and can discard the injected <style>s; any event-based
            // re-injection can lose that race. Ensuring both here makes the
            // inline pass correct regardless of what rebuilt the canvas or
            // when. Injection failure (no frame doc / head mid-rebuild) is
            // loud: proceeding unpinned means frozen raw-iframe widths.
            if (typeof window.pgInjectEmailCanvasPreview === "function") {
              if (!window.pgInjectEmailCanvasPreview(ed)) {
                console.warn(
                  "ZENTSO",
                  "pg-get-inlined-html: canvas style injection failed; " +
                    "inlined widths may be wrong.",
                  typeof window.pgEmailCanvasReadyReport === "function"
                    ? window.pgEmailCanvasReadyReport(ed)
                    : null
                );
              }
            }
            // Flush style/layout so computed reads reflect the cap even if it
            // was appended this tick.
            try {
              const d = ed.Canvas.getDocument();
              if (d && d.body) void d.body.offsetHeight;
            } catch (e) {
              /* non-fatal */
            }

            return window.PagesGuruEmailInliner.inline(ed);
          },
        });
      }

      // ── Prevent text components from parsing inline edits into child components ──
      gjsEditor.Components.addType("text", {
        model: {
          defaults: {
            allowInnerHTML: true,
          },
        },
      });

      // Add unordered list (bullet list) button
      gjsEditor.RichTextEditor.add("ul", {
        icon: "<span>&bull;</span>", // button icon
        attributes: { title: "Unordered List" }, // tooltip
        result: (rte) => rte.exec("insertUnorderedList"), // command executed
      });

      // Add ordered list (numbered list) button
      gjsEditor.RichTextEditor.add("ol", {
        icon: "<span>1.</span>",
        attributes: { title: "Ordered List" },
        result: (rte) => rte.exec("insertOrderedList"),
      });

      // ── Link toolbar button (component toolbar, not RTE) ───────────────────
      gjsEditor.Commands.add("tlb-edit-link", {
        run(editor) {
          const comp = editor.getSelected();
          if (!comp) return;

          const attrs = comp.getAttributes();
          const currentHref = attrs.href || "";
          const currentTarget = attrs.target || "_blank";

          // Position the popover near the selected component's DOM element
          const el = comp.getEl();
          let x = window.innerWidth / 2;
          let y = window.innerHeight / 2;

          if (el) {
            const canvasFrames = editor.Canvas.getFrames();
            let iframeOffset = { left: 0, top: 0 };
            canvasFrames.forEach(function (frame) {
              const iframeEl =
                frame.view && frame.view.getEl ? frame.view.getEl() : null;
              if (iframeEl) {
                const ir = iframeEl.getBoundingClientRect();
                iframeOffset = { left: ir.left, top: ir.top };
              }
            });

            const rect = el.getBoundingClientRect();
            x = iframeOffset.left + rect.left + rect.width / 2;
            y = iframeOffset.top + rect.bottom;
          }

          pgLinkPopover.open({
            x,
            y,
            currentHref,
            currentTarget,
            commLinks: isCommEditor,
            onSave(url, newTab) {
              if (!url) return;
              let href = url.startsWith("@") ? url.slice(1) : url;
              if (href && href.startsWith("Uploaded files")) {
                href = "/Common/" + href;
              }
              comp.addAttributes({ href, target: newTab ? "_blank" : "_self" });
              if (newTab) comp.addAttributes({ rel: "noopener noreferrer" });
              else comp.removeAttributes(["rel"]);
            },
            onRemove() {
              comp.removeAttributes(["href", "target", "rel"]);
            },
          });
        },
      });

      // Inject the toolbar button whenever a link component is selected
      gjsEditor.on("component:selected", function (comp) {
        if (comp.get("tagName") !== "a" && comp.get("type") !== "link") return;

        const toolbar = comp.get("toolbar");
        if (toolbar.some((t) => t.command === "tlb-edit-link")) return;

        comp.set("toolbar", [
          ...toolbar,
          {
            attributes: {
              class: "fa fa-link",
              title: "Edit link",
            },
            command: "tlb-edit-link",
          },
        ]);
      });

      // ── Global placeholder removal + restore ──────────────────────────────
      // Canonical placeholder attribute across the stack:
      //   data-zentso-placeholder="true"
      // data-grapesjs-drop-placeholder is a legacy producer name that may
      // survive in content saved before the rename; it is matched (never
      // emitted) so old placeholders are still cleaned up.
      function isPlaceholderAttrs(attrs) {
        if (!attrs) return false;
        return (
          !!attrs["data-zentso-placeholder"] ||
          !!attrs["data-grapesjs-drop-placeholder"]
        );
      }

      // Removes drop-placeholder <p> elements from any parent the moment a
      // real component is dropped alongside them.
      // Restores the placeholder if the parent becomes empty again.
      gjsEditor.on("component:add", function (addedComponent) {
        const parent = addedComponent.parent();
        if (!parent) return;

        const addedAttrs = addedComponent.getAttributes
          ? addedComponent.getAttributes()
          : {};

        // Don't trigger if the thing being added IS a placeholder.
        // Canonical marker: data-zentso-placeholder. The old
        // data-grapesjs-drop-placeholder is still matched so placeholders
        // leaked into previously saved content are reconciled too.
        if (isPlaceholderAttrs(addedAttrs)) return;

        parent.components().each(function (sibling) {
          const sibAttrs = sibling.getAttributes ? sibling.getAttributes() : {};
          if (isPlaceholderAttrs(sibAttrs)) {
            setTimeout(function () {
              sibling.remove();
            }, 0);
          }
        });
      });

      gjsEditor.on("component:remove", function (removedComponent) {
        // Don't react to placeholder removals themselves
        const removedAttrs = removedComponent.getAttributes
          ? removedComponent.getAttributes()
          : {};
        if (isPlaceholderAttrs(removedAttrs)) return;

        // Wait for GrapesJS to finish the remove operation
        setTimeout(function () {
          const parent = removedComponent.parent();
          if (!parent) return;

          // Check if the parent is a droppable column/container
          // and has no real (non-placeholder) children left
          const droppableTypes = ["layout-row-wrapper"];
          const droppableClasses = [
            "col-sm-12",
            "col-sm-6",
            "col-sm-4",
            "col-sm-8",
            "col-sm-3",
          ];

          const parentEl = parent.getEl ? parent.getEl() : null;
          const parentType = parent.get("type") || "";
          const parentClasses = parent.getClasses ? parent.getClasses() : [];

          const isDropTarget =
            droppableTypes.includes(parentType) ||
            droppableClasses.some((c) => parentClasses.includes(c)) ||
            (parentEl && parentEl.hasAttribute("data-gjs-droppable"));

          if (!isDropTarget) return;

          const realChildren = parent.components().filter(function (c) {
            const attrs = c.getAttributes ? c.getAttributes() : {};
            return !isPlaceholderAttrs(attrs);
          });

          if (realChildren.length === 0) {
            parent.components().add({
              tagName: "p",
              droppable: false,
              draggable: false,
              editable: false,
              selectable: false,
              hoverable: false,
              highlightable: false,
              attributes: {
                "data-zentso-placeholder": "true",
                style: [
                  "min-height:80px",
                  "border:2px dashed #ccc",
                  "border-radius:8px",
                  "display:flex",
                  "align-items:center",
                  "justify-content:center",
                  "color:#999",
                  "font-style:italic",
                  "padding:20px",
                  "margin:0",
                ].join(";"),
              },
              content: "Drop content blocks here",
            });
          }
        }, 0);
      });
      // ── end global placeholder removal + restore ──────────────────────────

      window.gjsEditor = gjsEditor;

      applyCustomUiTheme();
      loadIQAimages(gjsEditor);
      addSaveCommand(gjsEditor);
      pgNeutralizeModalSubmitButtons(gjsEditor);

      // ── Folder asset manager ──────────────────────────────────────────────
      if (typeof window.initFolderAssetManager === "function") {
        window.initFolderAssetManager(gjsEditor);
      } else {
        console.warn("PageGuru: folder-asset-manager.js not loaded.");
      }
      // ─────────────────────────────────────────────────────────────────────

      // ── Beyond Formz ──────────────────────────────────────────────
      if (typeof window.initBeyondFormComponent === "function") {
        window.initBeyondFormComponent(gjsEditor);
      } else {
        console.warn("PageGuru: beyond-form-component.js not loaded.");
      }
      // ─────────────────────────────────────────────────────────────────────

      // LD-JSON structured-data blocks are web-only: never auto-inject
      // them into the communication (email) editor, even if the script is
      // present on the page (unified site embeds load shared scripts).
      if (
        editorId !== COMMUNICATION_EDITOR_ID &&
        typeof window.loadLdJsonBlocks === "function" &&
        !gjsEditor.__ldJsonLoaded
      ) {
        const loaderNames = [
          ...resolvedConfig.pluginLoaderFns.blocks,
          ...resolvedConfig.pluginLoaderFns.tokens,
          ...resolvedConfig.pluginLoaderFns.other,
          ...resolvedConfig.pluginLoaderFns.website,
          ...resolvedConfig.pluginLoaderFns.communication,
        ];
        if (!loaderNames.includes("loadLdJsonBlocks")) {
          window.loadLdJsonBlocks(gjsEditor);
        }
        gjsEditor.__ldJsonLoaded = true;
      }

      // ── Email canvas preview override (communication editor only) ────────
      // Two canvas-only <style> elements must be present in the frame head
      // whenever the inliner reads computed styles:
      //
      //   #pg-email-canvas-base    — PRIMARY cap: constrains the wrapper
      //                              itself to 600px (plus email resets).
      //                              Shipped via frameContent on first build,
      //                              but loadProjectData can rebuild the
      //                              frame WITHOUT frameContent, dropping it.
      //   #pg-email-canvas-preview — secondary: FullWidthArea sections, grid
      //                              columns, and a transition/animation
      //                              kill (see below).
      //
      // Neither is persisted. If either is missing when the inliner runs, it
      // freezes raw iframe widths (e.g. 1531px) inline — the exact corruption
      // seen after AI edits. This injector restores BOTH idempotently; the
      // GrapesJS "load" event does not reliably re-fire on loadProjectData,
      // so it must be callable on demand.
      window.pgInjectEmailCanvasPreview = function (ed) {
        try {
          const frameDoc =
            ed.Canvas && ed.Canvas.getDocument ? ed.Canvas.getDocument() : null;
          if (!frameDoc || !frameDoc.head) return false;

          // Restore the base wrapper cap if the rebuild dropped frameContent.
          if (!frameDoc.getElementById("pg-email-canvas-base")) {
            const baseEl = frameDoc.createElement("style");
            baseEl.id = "pg-email-canvas-base";
            baseEl.textContent = PG_EMAIL_CANVAS_BASE_CSS;
            // Prepend so theme <link>s keep cascade priority over the base
            // resets, matching the original frameContent head order.
            frameDoc.head.insertBefore(baseEl, frameDoc.head.firstChild);
          }

          // Already pinned for this frame document: nothing more to do.
          if (frameDoc.getElementById("pg-email-canvas-preview")) return true;

            // Grid percentages mirror PagesGuruEmailInliner.rowToTable():
            // width = span / 12, so the canvas matches the exported tables.
            let gridCss = "";
            for (let span = 1; span <= 12; span++) {
              const pct = Math.round((span / 12) * 10000) / 100;
              const sel = ["xs", "sm", "md", "lg"]
                .map(function (bp) { return ".col-" + bp + "-" + span; })
                .join(",");
              gridCss +=
                sel +
                "{flex:0 0 " + pct + "% !important;" +
                "max-width:" + pct + "% !important;width:" + pct + "% !important;}";
            }

            const styleEl = frameDoc.createElement("style");
            styleEl.id = "pg-email-canvas-preview";
            styleEl.textContent =
              "/* PagesGuru email preview: breakpoint-free, mirrors the" +
              " inliner's table output. Canvas-only; never persisted. */" +
              // Attribute selector so every StyleBg variant is capped — the
              // theme defines StyleBg1–5 and may grow; enumerating 1–4
              // missed StyleBg5 sections (uncapped => raw iframe width).
              "[class*='FullWidthArea-StyleBg']" +
              "{max-width:600px !important;margin-left:auto !important;" +
              "margin-right:auto !important;}" +
              ".row{display:flex !important;flex-flow:row wrap !important;" +
              "margin-left:0 !important;margin-right:0 !important;}" +
              "[class*='col-']{float:none !important;position:static !important;}" +
              gridCss +
              // Kill transitions/animations inside the canvas. The theme
              // (zy-99-Flat_White.css) declares 250+ transitions incl. the
              // full AOS block; a rebuilt frame's stylesheets snapping onto
              // already-rendered elements STARTS those transitions, and a
              // save fired at readiness reads interpolated mid-transition
              // computed values (e.g. rgba(28,28,46,0.976), stale widths).
              // Output-invisible: the inliner's SAFE_PROPS whitelist carries
              // neither transition nor animation, so this only makes
              // computed reads deterministic.
              "*,*::before,*::after{transition:none !important;" +
              "animation:none !important;}";
            frameDoc.head.appendChild(styleEl);
          return true;
        } catch (err) {
          console.warn("ZENTSO", "Email canvas preview injection failed:", err);
          return false;
        }
      };
      
      // Readiness = BOTH canvas styles (base wrapper cap + preview pin) are
      // present AND every <link rel=stylesheet> in the frame head has been
      // fetched and parsed (link.sheet non-null). The inliner reads computed
      // styles, so an unparsed theme stylesheet yields a wrong cascade — the
      // source of intermittent width/color corruption after loadProjectData:
      // cache-hot CSS worked, cold didn't.
      // NOTE: a permanently failed link never gets .sheet; callers must pair
      // this with a timeout, never busy-wait on it unconditionally.
      window.pgEmailCanvasReady = function (ed) {
        try {
          const doc =
            ed.Canvas && ed.Canvas.getDocument ? ed.Canvas.getDocument() : null;
          if (!doc || !doc.head) return false;
          if (!doc.getElementById("pg-email-canvas-base")) return false;
          if (!doc.getElementById("pg-email-canvas-preview")) return false;
          const links = doc.querySelectorAll('link[rel="stylesheet"]');
          for (let i = 0; i < links.length; i++) {
            if (!links[i].sheet) return false;
          }
          return true;
        } catch (e) {
          return false;
        }
      };

      // Diagnostic companion to pgEmailCanvasReady: names WHY the canvas is
      // not ready (missing style ids / unloaded stylesheet hrefs) so a
      // readiness timeout identifies its cause in one console line instead
      // of requiring live inspection of the frame head.
      window.pgEmailCanvasReadyReport = function (ed) {
        const report = { missingStyles: [], pendingLinks: [] };
        try {
          const doc =
            ed.Canvas && ed.Canvas.getDocument ? ed.Canvas.getDocument() : null;
          if (!doc || !doc.head) {
            report.missingStyles.push("(no frame document)");
            return report;
          }
          if (!doc.getElementById("pg-email-canvas-base")) {
            report.missingStyles.push("pg-email-canvas-base");
          }
          if (!doc.getElementById("pg-email-canvas-preview")) {
            report.missingStyles.push("pg-email-canvas-preview");
          }
          const links = doc.querySelectorAll('link[rel="stylesheet"]');
          for (let i = 0; i < links.length; i++) {
            if (!links[i].sheet) report.pendingLinks.push(links[i].href);
          }
        } catch (e) {
          report.missingStyles.push("(error: " + e.message + ")");
        }
        return report;
      };

      if (editorId === COMMUNICATION_EDITOR_ID) {
        gjsEditor.on("load", function () {
          window.pgInjectEmailCanvasPreview(gjsEditor);
        });
        // loadProjectData rebuilds the canvas; re-pin whenever a new frame
        // document loads so the cap is never absent when the inliner runs.
        gjsEditor.on("canvas:frame:load", function () {
          window.pgInjectEmailCanvasPreview(gjsEditor);
        });
      }
      // ─────────────────────────────────────────────────────────────────────

      loadFromRadIntoGjs(gjsEditor);

      gjsEditor.on("load", function () {
        function walkAll(comps) {
          comps.each(function (c) {
            if (c.attributes && c.attributes.type === FC_CONTAINER_TYPE) _patchFcContainer(c);
            if (c.components) walkAll(c.components());
          });
        }
        walkAll(gjsEditor.Components.getComponents());
      });

      gjsEditor.on("component:add", function (comp) {
        if (comp.attributes && comp.attributes.type === FC_CONTAINER_TYPE) {
          _patchFcContainer(comp);
        }
      });

      // JT - 8/7/2026 -- Rules created while a non-Desktop device is active get scoped to
      // that device's @media block, so placeholder styling (from inline style="")
      // disappears when switching devices. The fix is to drop mediaText from the rules.
      // Note: I suspect that this might also affect non-placeholder components. 
      //       Might need to open up this function to all components instead of only placeholders
      gjsEditor.on("component:add", function (comp) {
        var attrs = comp.getAttributes ? comp.getAttributes() : {};
        if (attrs["data-zentso-placeholder"] !== "true") return;

        var selector = "#" + comp.getId();
        var allRules = gjsEditor.CssComposer.getAll();
        var rule = allRules.filter(function (r) {
          return r.getSelectorsString() === selector;
        })[0];

        if (rule && rule.get("mediaText")) {
          var style = rule.getStyle();
          gjsEditor.CssComposer.remove(rule);
          gjsEditor.CssComposer.setRule(selector, style, { mediaText: "" });
        }
      });

      wireAutosave(gjsEditor);

      // ── Communication dropdowns (Insert field / Insert link) ─────────────
      if (isCommEditor) {
        gjsEditor.on("load", function () {
          pgAddCommunicationDropdowns(gjsEditor);
        });
      }
      // ─────────────────────────────────────────────────────────────────────

      gjsEditor.on("load", function () {
        applyDesignerFrameEnhancements(gjsEditor);
        requestAnimationFrame(applyLayout);
        setTimeout(applyLayout, 100);
      });
    }

    function loadGrapesAssets(cb) {
      const coreCss =
        "https://cdn.zentsocloud.com/PagesGuru/assets/css/core.min.css";
      const coreJs =
        "https://cdn.zentsocloud.com/PagesGuru/assets/js/core.min.js";

      const internalPluginJs =
        "https://cdn.zentsocloud.com/PagesGuru/assets/js/folder-asset-manager.js";

      // Shared scripts plus the set for this editor context only: one
      // embed config can serve both the website and communication editors.
      const scopedPluginJs =
        editorId === COMMUNICATION_EDITOR_ID
          ? resolvedConfig.communicationPluginUrls
          : resolvedConfig.websitePluginUrls;

      const standardPluginJs = [
        ...resolvedConfig.defaultPluginUrls,
        ...scopedPluginJs,
      ];

      if (window.grapesjs) {
        // grapesjs already present (e.g. loaded by an earlier bootstrap or
        // another script). The scoped plugin scripts must STILL be loaded:
        // skipping standardPluginJs here silently drops the component
        // library (foundation-marketing-components.js) for this editor.
        loadSequentially(standardPluginJs, injectScriptOnce)
          .then(() => loadConfiguredAssets())
          .then(() => injectScriptOnce(internalPluginJs))
          .then(() => cb && cb())
          .catch((err) => console.error(err));
        return;
      }

      injectStylesheetOnce(coreCss)
        .then(() => injectScriptOnce(coreJs))
        .then(() => loadSequentially(standardPluginJs, injectScriptOnce))
        .then(() => loadConfiguredAssets())
        .then(() => injectScriptOnce(internalPluginJs))
        .then(() => cb && cb())
        .catch((err) => console.error(err));
    }

    function ensureGrapes() {
      if (grapesBootstrapped || !bodyInput) return;
      // Always go through loadGrapesAssets: it handles the
      // grapesjs-already-present case itself and, unlike the old direct
      // loadConfiguredAssets() shortcut, still loads the scoped plugin
      // scripts (component libraries) for this editor.
      loadGrapesAssets(initGrapes);
    }

    if (window.Sys && Sys.WebForms && Sys.WebForms.PageRequestManager) {
      const prm = Sys.WebForms.PageRequestManager.getInstance();
      prm.add_endRequest(() => switchToHtmlAndHide());
      prm.add_endRequest(() => ensureGrapes());
      prm.add_endRequest(() => setTimeout(applyLayout, 0));
    } else {
      ensureGrapes();
    }

    const convertBtn = document.getElementById(
      "ctl00_TemplateBody_ContentEditorChildControl_ConvertButton"
    );
    if (convertBtn) convertBtn.click();

    const initInterval = setInterval(() => {
      const editor = typeof $find === "function" ? $find(editorId) : null;
      if (editor) {
        clearInterval(initInterval);
        switchToHtmlAndHide();
        ensureGrapes();
      }
    }, 300);
  }
});