ngx-xtroedge-cms 1.3.17 → 1.4.0

package/dist/index.js

@@ -304,6 +304,16 @@ var CMS_STYLES = `
 }
 .lcms-login-input:focus { border-color: var(--lcms-primary, #00C853); }
 .lcms-login-input::placeholder { color: rgba(255,255,255,0.25); }
+.lcms-password-wrapper { position: relative; display: flex; align-items: center; }
+.lcms-password-wrapper .lcms-login-input { padding-right: 40px; width: 100%; }
+.lcms-password-toggle {
+  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
+  background: none; border: none !important; outline: none !important; cursor: pointer; padding: 4px;
+  color: rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center;
+  transition: color 0.2s; line-height: 0; z-index: 1;
+}
+.lcms-password-toggle:hover { color: rgba(0,0,0,0.8); }
+.lcms-password-toggle svg { display: block; }
 .lcms-login-btn {
   width: 100%; padding: 11px; margin-top: 6px; border: none; border-radius: 8px; cursor: pointer;
   background: linear-gradient(135deg, var(--lcms-primary, #00C853), var(--lcms-primary-dark, #2E7D32));
@@ -319,8 +329,100 @@ var CMS_STYLES = `
 }
 .lcms-login-error.visible { display: block; }
 
+/* LICENSE OVERLAY */
+.lcms-license-overlay {
+  position: fixed; inset: 0; z-index: 10020;
+  display: flex; align-items: center; justify-content: center;
+  background: rgba(8, 8, 15, 0.85);
+  backdrop-filter: blur(20px) saturate(1.4);
+  -webkit-backdrop-filter: blur(20px) saturate(1.4);
+  font-family: system-ui, -apple-system, sans-serif;
+}
+.lcms-license-box {
+  background: #13151a; border: 1px solid rgba(255,255,255,0.1);
+  border-radius: 20px; padding: 40px 36px; width: 380px; text-align: center;
+  box-shadow: 0 24px 60px rgba(0,0,0,0.6);
+}
+.lcms-license-icon {
+  width: 56px; height: 56px; border-radius: 16px; margin: 0 auto 20px;
+  background: linear-gradient(135deg, rgba(239,68,68,0.2), rgba(239,68,68,0.1));
+  border: 1px solid rgba(239,68,68,0.3);
+  display: flex; align-items: center; justify-content: center;
+}
+.lcms-license-icon.trial {
+  background: linear-gradient(135deg, rgba(251,191,36,0.2), rgba(251,191,36,0.1));
+  border-color: rgba(251,191,36,0.3);
+}
+.lcms-license-title {
+  color: white; font-size: 20px; font-weight: 700; margin-bottom: 8px;
+}
+.lcms-license-msg {
+  color: rgba(255,255,255,0.5); font-size: 13px; line-height: 1.6; margin-bottom: 24px;
+}
+.lcms-license-btn {
+  display: inline-block; padding: 11px 28px; border: none; border-radius: 8px; cursor: pointer;
+  background: linear-gradient(135deg, var(--lcms-primary, #00C853), var(--lcms-primary-dark, #2E7D32));
+  color: white; font-size: 13px; font-weight: 700; font-family: inherit;
+  letter-spacing: 0.3px; transition: filter 0.2s; text-decoration: none;
+}
+.lcms-license-btn:hover { filter: brightness(1.1); }
+.lcms-license-sub {
+  color: rgba(255,255,255,0.3); font-size: 11px; margin-top: 16px;
+}
+.lcms-license-sub a { color: rgba(var(--lcms-primary-rgb, 0,200,83),0.7); text-decoration: none; }
+.lcms-license-sub a:hover { text-decoration: underline; }
+
+/* TRIAL BANNER */
+.lcms-trial-banner {
+  display: flex; align-items: center; gap: 6px;
+  background: rgba(251,191,36,0.12); border: 1px solid rgba(251,191,36,0.3);
+  border-radius: 8px; padding: 6px 10px; margin-bottom: 10px;
+  font-size: 11px; font-weight: 600; color: #fbbf24;
+}
+.lcms-trial-banner-icon { font-size: 14px; }
+.lcms-trial-banner-text { flex: 1; }
+.lcms-trial-banner-dismiss {
+  background: none; border: none; color: rgba(251,191,36,0.5); cursor: pointer;
+  padding: 0; font-size: 14px; line-height: 1; transition: color 0.2s;
+}
+.lcms-trial-banner-dismiss:hover { color: #fbbf24; }
+
+/* RICH TEXT TOOLBAR */
+.lcms-rich-toolbar {
+  position: fixed; z-index: 10010;
+  display: flex; align-items: center; gap: 2px;
+  padding: 4px 6px;
+  background: rgba(30, 15, 60, 0.92);
+  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
+  border: 1px solid rgba(var(--lcms-primary-rgb, 0,200,83), 0.3);
+  border-radius: 8px;
+  box-shadow: 0 4px 20px rgba(0,0,0,0.3);
+  opacity: 0; transform: translateY(8px);
+  transition: opacity 0.15s, transform 0.15s;
+  pointer-events: none;
+  font-family: system-ui, -apple-system, sans-serif;
+}
+.lcms-rich-toolbar.visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
+.lcms-rich-toolbar button {
+  width: 28px; height: 28px; border: none; border-radius: 4px;
+  background: transparent; color: #d0d0d0; cursor: pointer;
+  display: flex; align-items: center; justify-content: center;
+  font-size: 13px; font-weight: 700; padding: 0;
+  transition: background 0.15s, color 0.15s;
+}
+.lcms-rich-toolbar button:hover { background: rgba(var(--lcms-primary-rgb, 0,200,83), 0.3); color: #fff; }
+.lcms-rich-toolbar button.active { background: rgba(var(--lcms-primary-rgb, 0,200,83), 0.5); color: #fff; }
+.lcms-rich-toolbar .lcms-tb-sep { width: 1px; height: 18px; background: rgba(255,255,255,0.12); margin: 0 3px; flex-shrink: 0; }
+
 /* HIDDEN ELEMENTS */
 .lcms-hidden { display: none !important; }
+
+/* EDIT MODE \u2014 keep animations running, just make CMS elements editable */
+body.lcms-editing [data-cms] {
+  user-select: text !important;
+  -webkit-user-select: text !important;
+  cursor: text !important;
+}
 `;
 
 // src/xtroedge-cms.ts
@@ -364,7 +466,7 @@ var DEFAULT_EDITABLE_TAGS = [
   "header",
   "footer"
 ];
-var XtroedgeCMS = class _XtroedgeCMS {
+var _XtroedgeCMS = class _XtroedgeCMS {
   constructor(config) {
     this.brandingEl = null;
     this.siteIdentifier = "";
@@ -399,6 +501,7 @@ var XtroedgeCMS = class _XtroedgeCMS {
     this.dirtyImageKeys = /* @__PURE__ */ new Set();
     this.registeredKeys = /* @__PURE__ */ new Set();
     // ===== DOM =====
+    this.domOriginals = {};
     this.managedElements = /* @__PURE__ */ new Map();
     this.managedImages = /* @__PURE__ */ new Map();
     this.autoDetectedElements = /* @__PURE__ */ new Set();
@@ -406,6 +509,11 @@ var XtroedgeCMS = class _XtroedgeCMS {
     this.scanTimeout = null;
     this.activeImageEl = null;
     this.imageCtxMenu = null;
+    // ===== Rich Text Toolbar =====
+    this.richToolbarEl = null;
+    this.activeEditableEl = null;
+    this.toolbarHideTimeout = null;
+    this.selectionChangeHandler = null;
     // ===== Navigation =====
     this.currentSlug = "";
     this.currentTitle = "";
@@ -435,6 +543,9 @@ var XtroedgeCMS = class _XtroedgeCMS {
     this.editModeContent = null;
     this.fileInput = null;
     this.imgOverlay = null;
+    // ===== Edit-mode visibility tracking =====
+    this.editScrollHandler = null;
+    this.editScrollRAF = null;
     // ===== FAB Drag =====
     this.posX = 20;
     this.posY = 20;
@@ -446,11 +557,19 @@ var XtroedgeCMS = class _XtroedgeCMS {
     this.hasMoved = false;
     // ===== Timers =====
     this.toastTimer = null;
+    // ===== License =====
+    this.licenseValid = false;
+    this.licenseStatus = null;
+    this.licenseOverlayEl = null;
+    this.trialBannerDismissed = false;
     // ===== IndexedDB =====
     this.db = null;
     // ===== i18n cache =====
     this.translationCache = /* @__PURE__ */ new Map();
+    /** Set of positioned ancestors we added pointer-events:none to (for cleanup) */
+    this.modifiedAncestors = /* @__PURE__ */ new Set();
     this.config = config || {};
+    if (!this.config.apiBase) this.config.apiBase = "https://backend-xi-lime-d90e4p1ysf.vercel.app/api";
     this.containerSelector = this.config.containerSelector || "";
     this.editableTags = (this.config.editableTags || DEFAULT_EDITABLE_TAGS).map((t) => t.toLowerCase());
     this.languages = this.config.languages || ["en"];
@@ -459,6 +578,8 @@ var XtroedgeCMS = class _XtroedgeCMS {
     this.historyRetentionMs = (this.config.historyRetentionDays || 7) * 24 * 60 * 60 * 1e3;
     this.currentLang = this.detectCurrentLanguage();
     this.siteIdentifier = this.resolveSiteIdentifier();
+    const savedClientApi = _XtroedgeCMS.secureGet("xtroedge_client_api");
+    if (savedClientApi) this.config.clientApi = savedClientApi;
     const savedColor = localStorage.getItem("xtroedge_theme_color");
     if (savedColor) this.highlightColor = savedColor;
     this.boundMouseMove = (e) => this.onDragMove(e);
@@ -468,13 +589,69 @@ var XtroedgeCMS = class _XtroedgeCMS {
     this.boundPopState = () => this.handleNavigation();
     this.boundHashChange = () => this.handleNavigation();
   }
+  static _enc(value) {
+    const k = _XtroedgeCMS._SK;
+    let result = "";
+    for (let i = 0; i < value.length; i++) {
+      result += String.fromCharCode(value.charCodeAt(i) ^ k.charCodeAt(i % k.length));
+    }
+    return btoa(result);
+  }
+  static _dec(encoded) {
+    try {
+      const k = _XtroedgeCMS._SK;
+      const decoded = atob(encoded);
+      let result = "";
+      for (let i = 0; i < decoded.length; i++) {
+        result += String.fromCharCode(decoded.charCodeAt(i) ^ k.charCodeAt(i % k.length));
+      }
+      return result;
+    } catch {
+      return "";
+    }
+  }
+  static _readVault() {
+    try {
+      const raw = localStorage.getItem(_XtroedgeCMS._VAULT_KEY);
+      if (!raw) return {};
+      return JSON.parse(_XtroedgeCMS._dec(raw));
+    } catch {
+      return {};
+    }
+  }
+  static _writeVault(vault) {
+    try {
+      localStorage.setItem(_XtroedgeCMS._VAULT_KEY, _XtroedgeCMS._enc(JSON.stringify(vault)));
+    } catch {
+    }
+  }
+  static secureSet(key, value) {
+    const v = _XtroedgeCMS._readVault();
+    v[key] = value;
+    _XtroedgeCMS._writeVault(v);
+  }
+  static secureGet(key) {
+    return _XtroedgeCMS._readVault()[key] || "";
+  }
+  static secureRemove(key) {
+    const v = _XtroedgeCMS._readVault();
+    delete v[key];
+    _XtroedgeCMS._writeVault(v);
+  }
+  static secureClear() {
+    try {
+      localStorage.removeItem(_XtroedgeCMS._VAULT_KEY);
+    } catch {
+    }
+  }
   // ===============================================
   // PUBLIC API
   // ===============================================
-  init() {
-    this.posY = window.innerHeight - 72;
+  async init() {
     this.injectStyles();
     this.applyThemeColor(this.highlightColor);
+    await this.validateLicense();
+    this.posY = window.innerHeight - 72;
     this.buildUI();
     this.interceptNavigation();
     this.observer = new MutationObserver(() => {
@@ -485,7 +662,12 @@ var XtroedgeCMS = class _XtroedgeCMS {
         document.head.appendChild(this.styleEl);
       }
       if (this.scanTimeout) clearTimeout(this.scanTimeout);
-      this.scanTimeout = setTimeout(() => this.autoDetectAndScan(), 150);
+      this.scanTimeout = setTimeout(() => {
+        this.autoDetectAndScan();
+        if (Object.keys(this.pageTexts).length > 0) {
+          this.updateElementTexts();
+        }
+      }, 150);
     });
     this.observer.observe(document.body, { childList: true, subtree: true });
     window.addEventListener("popstate", this.boundPopState);
@@ -496,6 +678,7 @@ var XtroedgeCMS = class _XtroedgeCMS {
     this.cleanupManagedElements();
     this.styleEl?.remove();
     this.rootEl?.remove();
+    this.licenseOverlayEl?.remove();
     window.removeEventListener("popstate", this.boundPopState);
     window.removeEventListener("hashchange", this.boundHashChange);
     document.removeEventListener("mousemove", this.boundMouseMove);
@@ -509,6 +692,113 @@ var XtroedgeCMS = class _XtroedgeCMS {
     if (this.toastTimer) clearTimeout(this.toastTimer);
     this.db?.close();
   }
+  // 24 hours
+  async validateLicense() {
+    const licenseKey = this.config.licenseKey || _XtroedgeCMS.secureGet("builder_token") || "";
+    if (!licenseKey) {
+      this.licenseStatus = { valid: false, plan: "invalid", message: "No license key provided." };
+      this.licenseValid = false;
+      return;
+    }
+    const cached = this.getLicenseCache();
+    if (cached) {
+      this.licenseStatus = cached;
+      this.licenseValid = cached.valid;
+      return;
+    }
+    const validateUrl = this.config.licenseValidateUrl || (this.config.apiBase ? `${this.config.apiBase}/license/validate` : "");
+    if (!validateUrl) {
+      this.licenseValid = true;
+      this.licenseStatus = { valid: true, plan: "trial", message: "No license API configured." };
+      return;
+    }
+    try {
+      const builderToken = _XtroedgeCMS.secureGet("builder_token") || "";
+      const headers = { "Content-Type": "application/json" };
+      if (builderToken) headers["Authorization"] = `Bearer ${builderToken}`;
+      const res = await fetch(validateUrl, {
+        method: "POST",
+        headers,
+        body: JSON.stringify({
+          licenseKey,
+          domain: window.location.hostname
+        })
+      });
+      let data;
+      try {
+        data = await res.json();
+      } catch {
+        throw new Error("Invalid response from license server");
+      }
+      this.licenseStatus = data;
+      this.setLicenseCache(data);
+      this.licenseValid = data.valid;
+    } catch {
+      const fallback = this.getLicenseCache(true);
+      if (fallback && fallback.valid) {
+        this.licenseValid = true;
+        this.licenseStatus = fallback;
+      } else {
+        this.licenseStatus = { valid: false, plan: "invalid", message: "Unable to verify license. Please check your internet connection." };
+        this.licenseValid = false;
+      }
+    }
+  }
+  getLicenseCache(ignoreTTL = false) {
+    try {
+      const raw = _XtroedgeCMS.secureGet(_XtroedgeCMS.LICENSE_CACHE_KEY);
+      if (!raw) return null;
+      const { status, timestamp, key } = JSON.parse(raw);
+      const currentKey = this.config.licenseKey || _XtroedgeCMS.secureGet("builder_token") || "";
+      if (key !== currentKey) return null;
+      if (!ignoreTTL && Date.now() - timestamp > _XtroedgeCMS.LICENSE_CACHE_TTL) return null;
+      return status;
+    } catch {
+      return null;
+    }
+  }
+  setLicenseCache(status) {
+    try {
+      const currentKey = this.config.licenseKey || _XtroedgeCMS.secureGet("builder_token") || "";
+      _XtroedgeCMS.secureSet(_XtroedgeCMS.LICENSE_CACHE_KEY, JSON.stringify({
+        status,
+        timestamp: Date.now(),
+        key: currentKey
+      }));
+    } catch {
+    }
+  }
+  /** Shows toast when user tries to edit with expired/invalid license */
+  showLicenseExpiredToast() {
+    const isExpired = this.licenseStatus?.plan === "expired";
+    const msg = isExpired ? "Your free trial has expired. Subscribe to enable editing." : this.licenseStatus?.message || "License validation failed. Editing is disabled.";
+    this.showToast(msg, "error");
+  }
+  /** Returns trial/expired banner HTML if applicable, or empty string */
+  getTrialBannerHTML() {
+    if (this.trialBannerDismissed || !this.licenseStatus) return "";
+    if (!this.licenseValid) {
+      const msg = this.licenseStatus.plan === "expired" ? "Trial expired \u2014 editing disabled. Subscribe to continue." : "License invalid \u2014 editing disabled.";
+      return `
+        <div class="lcms-trial-banner" id="lcms-trial-banner" style="background:rgba(239,68,68,0.12);border-color:rgba(239,68,68,0.3);color:#f87171;">
+          <span class="lcms-trial-banner-icon">\u{1F512}</span>
+          <span class="lcms-trial-banner-text">${msg}</span>
+          <button class="lcms-trial-banner-dismiss" id="lcms-trial-dismiss" title="Dismiss" style="color:rgba(239,68,68,0.5);">\u2715</button>
+        </div>
+      `;
+    }
+    if (this.licenseStatus.plan === "trial") {
+      const days = this.licenseStatus.daysLeft ?? 0;
+      return `
+        <div class="lcms-trial-banner" id="lcms-trial-banner">
+          <span class="lcms-trial-banner-icon">\u23F3</span>
+          <span class="lcms-trial-banner-text">Free Trial: ${days} day${days !== 1 ? "s" : ""} remaining</span>
+          <button class="lcms-trial-banner-dismiss" id="lcms-trial-dismiss" title="Dismiss">\u2715</button>
+        </div>
+      `;
+    }
+    return "";
+  }
   // ===============================================
   // STYLES INJECTION
   // ===============================================
@@ -564,7 +854,7 @@ var XtroedgeCMS = class _XtroedgeCMS {
     const editFromSession = sessionStorage.getItem("builder_edit_mode") === "true";
     const wantsEdit = editViaParam || editFromSession;
     if (wantsEdit) {
-      const token = localStorage.getItem("builder_token");
+      const token = _XtroedgeCMS.secureGet("builder_token");
       if (!token) {
         if (!this.pendingEditMode) {
           this.pendingEditMode = true;
@@ -577,7 +867,12 @@ var XtroedgeCMS = class _XtroedgeCMS {
         }
         return;
       }
-      this.editMode = true;
+      if (!this.licenseValid) {
+        this.showLicenseExpiredToast();
+        this.editMode = false;
+      } else {
+        this.editMode = true;
+      }
     }
     if (!slugChanged && this.initialized) {
       this.updateUI();
@@ -670,6 +965,21 @@ var XtroedgeCMS = class _XtroedgeCMS {
     const isDomain = this.siteIdentifier.includes(".");
     this.siteIdEl.innerHTML = `<span class="lcms-site-id-icon">${isDomain ? "\u{1F310}" : "\u{1F511}"}</span><span class="lcms-site-id-text">${isDomain ? this.siteIdentifier : this.siteIdentifier.substring(0, 8)}</span>`;
     this.panelEl.appendChild(this.siteIdEl);
+    const trialHTML = this.getTrialBannerHTML();
+    if (trialHTML) {
+      const trialWrap = this.createElement("div", "");
+      trialWrap.innerHTML = trialHTML;
+      this.panelEl.appendChild(trialWrap);
+      setTimeout(() => {
+        const dismissBtn = document.getElementById("lcms-trial-dismiss");
+        dismissBtn?.addEventListener("click", (e) => {
+          e.stopPropagation();
+          this.trialBannerDismissed = true;
+          const banner = document.getElementById("lcms-trial-banner");
+          banner?.remove();
+        });
+      }, 0);
+    }
     this.editModeContent = this.createElement("div", "lcms-hidden");
     this.changesInfoEl = this.createElement("div", "lcms-changes-info lcms-hidden");
     this.editModeContent.appendChild(this.changesInfoEl);
@@ -874,8 +1184,8 @@ var XtroedgeCMS = class _XtroedgeCMS {
       let parent = el.parentElement;
       while (parent && parent !== document.body) {
         const tag = parent.tagName.toLowerCase();
-        if (tag === "header" || tag.endsWith("-header")) return "/header";
-        if (tag === "footer" || tag.endsWith("-footer")) return "/footer";
+        if (tag.endsWith("-header")) return "/header";
+        if (tag.endsWith("-footer")) return "/footer";
         parent = parent.parentElement;
       }
       return this.currentSlug;
@@ -893,11 +1203,13 @@ var XtroedgeCMS = class _XtroedgeCMS {
       el.setAttribute("data-cms-section", sectionSlug);
       this.autoDetectedElements.add(el);
     };
+    const RICH_TEXT_INLINE = /* @__PURE__ */ new Set(["B", "STRONG", "I", "EM", "U", "S", "STRIKE", "DEL", "SUB", "SUP", "MARK"]);
     const selector = this.editableTags.join(",");
     const elements = container.querySelectorAll(selector);
     elements.forEach((el) => {
       if (el.hasAttribute("data-cms")) return;
-      if (el.closest("#xtroedge-cms-root, script, style, noscript")) return;
+      if (el.closest("#xtroedge-cms-root, #lcms-login-modal, script, style, noscript")) return;
+      if (RICH_TEXT_INLINE.has(el.tagName) && el.parentElement?.closest("[data-cms]")) return;
       if (el.children.length > 3) return;
       const text = this.getDirectTextContent(el).trim();
       if (text.length < 2) return;
@@ -906,14 +1218,14 @@ var XtroedgeCMS = class _XtroedgeCMS {
     const dataEditables = container.querySelectorAll("[data-editable]");
     dataEditables.forEach((el) => {
       if (el.hasAttribute("data-cms")) return;
-      if (el.closest("#xtroedge-cms-root, script, style, noscript")) return;
+      if (el.closest("#xtroedge-cms-root, #lcms-login-modal, script, style, noscript")) return;
       assignKey(el, getSectionSlug(el));
     });
   }
   scanDOM() {
     const elements = document.querySelectorAll("[data-cms]");
     elements.forEach((el) => {
-      if (el.closest("#xtroedge-cms-root")) return;
+      if (el.closest("#xtroedge-cms-root, #lcms-login-modal")) return;
       const key = el.getAttribute("data-cms");
       this.registeredKeys.add(key);
       if (!this.managedElements.has(el)) {
@@ -961,7 +1273,13 @@ var XtroedgeCMS = class _XtroedgeCMS {
   hasEditableChildren(el) {
     return !!el.querySelector("[data-cms]");
   }
-  setDirectTextContent(el, val) {
+  getElementContent(el) {
+    if (this.hasEditableChildren(el)) {
+      return this.getDirectTextContent(el).trim();
+    }
+    return this.richTextEnabled ? el.innerHTML?.trim() || "" : el.textContent?.trim() || "";
+  }
+  setElementContent(el, val) {
     if (this.hasEditableChildren(el)) {
       const textNodes = [];
       for (let i = 0; i < el.childNodes.length; i++) {
@@ -969,28 +1287,38 @@ var XtroedgeCMS = class _XtroedgeCMS {
       }
       if (textNodes.length > 0) textNodes[0].textContent = val;
       else el.prepend(document.createTextNode(val));
+    } else if (this.richTextEnabled) {
+      el.innerHTML = this.sanitizeHTML(val);
     } else {
       el.textContent = val;
     }
   }
+  // Legacy alias for backward compat with internal calls
+  setDirectTextContent(el, val) {
+    this.setElementContent(el, val);
+  }
   // ===============================================
   // ELEMENT EDITING
   // ===============================================
   attachElement(el, key) {
-    const getText = () => this.hasEditableChildren(el) ? this.getDirectTextContent(el).trim() : el.textContent?.trim() || "";
+    const getContent = () => this.getElementContent(el);
     const blurHandler = () => {
-      const text = getText();
+      const text = getContent();
       const currentVal = this.getPageText(key);
       if (text !== currentVal) this.onTextChanged(key, text);
+      this.hideRichToolbar();
     };
     const keydownHandler = (e) => {
       if (e.key === "Enter") {
+        if (this.richTextEnabled && !_XtroedgeCMS.SINGLE_LINE_TAGS.has(el.tagName)) {
+          return;
+        }
         e.preventDefault();
         el.blur();
       }
     };
     const inputHandler = () => {
-      const text = getText();
+      const text = getContent();
       const currentVal = this.getPageText(key);
       if (text !== currentVal) this.onTextChanged(key, text);
     };
@@ -1017,12 +1345,16 @@ var XtroedgeCMS = class _XtroedgeCMS {
       this.managedElements.delete(el);
     }
   }
+  /** Stop propagation so parent carousels (Swiper, Owl, etc.) don't hijack the event */
+  static stopProp(e) {
+    e.stopPropagation();
+  }
   enableElementEdit(el, _key, blurH, keyH, inputH, clickH) {
     const val = this.getPageText(_key);
-    if (val) this.setDirectTextContent(el, val);
+    if (val) this.setElementContent(el, val);
     el.setAttribute("contenteditable", "true");
-    el.style.outline = `2px dashed ${this.highlightColor}`;
-    el.style.outlineOffset = "-2px";
+    el.style.setProperty("outline", `2px dashed ${this.highlightColor}`, "important");
+    el.style.setProperty("outline-offset", "-2px", "important");
     el.style.cursor = "text";
     el.style.transition = "background 0.2s";
     el.style.minWidth = "20px";
@@ -1030,37 +1362,199 @@ var XtroedgeCMS = class _XtroedgeCMS {
     el.addEventListener("keydown", keyH);
     el.addEventListener("input", inputH);
     el.addEventListener("click", clickH, true);
+    el.addEventListener("mousedown", _XtroedgeCMS.stopProp, true);
+    el.addEventListener("touchstart", _XtroedgeCMS.stopProp, true);
+    el.addEventListener("focus", () => this.showRichToolbar(el));
   }
   disableElementEdit(el, _key, blurH, keyH, inputH, clickH) {
     el.removeAttribute("contenteditable");
-    el.style.outline = "";
-    el.style.outline = "";
-    el.style.outlineOffset = "";
+    el.style.removeProperty("outline");
+    el.style.removeProperty("outline-offset");
     el.style.cursor = "";
     el.style.transition = "";
     el.style.minWidth = "";
     const val = this.getPageText(_key);
-    if (val) this.setDirectTextContent(el, val);
+    if (val) this.setElementContent(el, val);
     el.removeEventListener("blur", blurH);
     el.removeEventListener("keydown", keyH);
     el.removeEventListener("input", inputH);
     el.removeEventListener("click", clickH, true);
+    el.removeEventListener("mousedown", _XtroedgeCMS.stopProp, true);
+    el.removeEventListener("touchstart", _XtroedgeCMS.stopProp, true);
   }
   applyEditMode(editMode) {
+    document.body.classList.toggle("lcms-editing", editMode);
+    if (editMode) {
+      this.editScrollHandler = () => {
+        if (this.editScrollRAF) return;
+        this.editScrollRAF = requestAnimationFrame(() => {
+          this.syncEditablePointerEvents();
+          this.editScrollRAF = null;
+        });
+      };
+      window.addEventListener("scroll", this.editScrollHandler, { passive: true });
+      this.syncEditablePointerEvents();
+    } else {
+      if (this.editScrollHandler) {
+        window.removeEventListener("scroll", this.editScrollHandler);
+        this.editScrollHandler = null;
+      }
+      if (this.editScrollRAF) {
+        cancelAnimationFrame(this.editScrollRAF);
+        this.editScrollRAF = null;
+      }
+      for (const [el] of this.managedElements) el.style.pointerEvents = "";
+      this.modifiedAncestors.forEach((a) => {
+        a.style.pointerEvents = "";
+      });
+      this.modifiedAncestors.clear();
+    }
     for (const [el, info] of this.managedElements) {
       if (editMode) this.enableElementEdit(el, info.key, info.blurHandler, info.keydownHandler, info.inputHandler, info.clickHandler);
       else this.disableElementEdit(el, info.key, info.blurHandler, info.keydownHandler, info.inputHandler, info.clickHandler);
     }
     this.applyImageEditMode(editMode);
+    if (editMode) this.createRichToolbar();
+    else this.destroyRichToolbar();
+  }
+  /**
+   * For each managed element, find the nearest position:absolute/fixed ancestor.
+   * If that ancestor is invisible (opacity ≈ 0), set pointer-events:none on it
+   * so clicks pass through to the visible element behind it.
+   */
+  syncEditablePointerEvents() {
+    const checked = /* @__PURE__ */ new Map();
+    for (const [el] of this.managedElements) {
+      const ancestor = this.findPositionedAncestor(el);
+      if (!ancestor) continue;
+      if (!checked.has(ancestor)) {
+        const cs = window.getComputedStyle(ancestor);
+        const visible = parseFloat(cs.opacity) >= 0.15 && cs.visibility !== "hidden" && cs.display !== "none";
+        checked.set(ancestor, visible);
+        if (!visible) {
+          ancestor.style.pointerEvents = "none";
+          this.modifiedAncestors.add(ancestor);
+        } else {
+          if (this.modifiedAncestors.has(ancestor)) {
+            ancestor.style.pointerEvents = "";
+            this.modifiedAncestors.delete(ancestor);
+          }
+        }
+      }
+    }
+  }
+  /** Walk up from el to find the nearest position:absolute or position:fixed ancestor */
+  findPositionedAncestor(el) {
+    let cur = el.parentElement;
+    while (cur && cur !== document.body) {
+      if (cur.closest("#xtroedge-cms-root")) return null;
+      const pos = window.getComputedStyle(cur).position;
+      if (pos === "absolute" || pos === "fixed") return cur;
+      cur = cur.parentElement;
+    }
+    return null;
+  }
+  killAnimations() {
+    const win = window;
+    if (win.ScrollTrigger) {
+      try {
+        win.ScrollTrigger.getAll().forEach((t) => t.kill(true));
+      } catch {
+      }
+    }
+    if (win.gsap) {
+      try {
+        win.gsap.globalTimeline.clear();
+        win.gsap.killTweensOf("*");
+      } catch {
+      }
+    }
+    if (win.AOS) {
+      try {
+        win.AOS.refreshHard?.();
+      } catch {
+      }
+    }
+    this.removePinSpacers();
+    this.clearAnimationInlineStyles();
+    setTimeout(() => {
+      this.removePinSpacers();
+      this.clearAnimationInlineStyles();
+    }, 500);
+    setTimeout(() => {
+      this.removePinSpacers();
+      this.clearAnimationInlineStyles();
+    }, 1500);
+  }
+  /** Remove GSAP ScrollTrigger pin-spacer wrapper divs and restore original elements */
+  removePinSpacers() {
+    document.querySelectorAll(".pin-spacer").forEach((spacer) => {
+      const child = spacer.firstElementChild;
+      if (child) {
+        spacer.parentNode?.insertBefore(child, spacer);
+        child.style.cssText = "";
+      }
+      spacer.remove();
+    });
+  }
+  /** Clear only animation-related inline styles (set by GSAP/ScrollTrigger) without breaking layout */
+  clearAnimationInlineStyles() {
+    const container = this.containerSelector ? document.querySelector(this.containerSelector) || document.body : document.body;
+    container.querySelectorAll("*").forEach((el) => {
+      if (el.closest("#xtroedge-cms-root")) return;
+      const s = el.style;
+      if (s.pointerEvents === "none") s.pointerEvents = "";
+      if (s.userSelect === "none") s.userSelect = "";
+      if (s.visibility === "hidden") s.visibility = "";
+      if (s.clipPath && s.clipPath !== "none") s.clipPath = "";
+    });
+  }
+  /** Capture each element's current DOM text before CMS applies saved edits */
+  captureDomOriginals() {
+    this.domOriginals = {};
+    for (const [el, info] of this.managedElements) {
+      this.domOriginals[info.key] = this.getElementContent(el);
+    }
+  }
+  /** Ensure every entry in pageTexts has _orig for current language (from domOriginals) */
+  ensureOriginals() {
+    const origKey = `_orig_${this.currentLang}`;
+    for (const key of Object.keys(this.pageTexts)) {
+      if (!this.pageTexts[key][origKey] && this.domOriginals[key]) {
+        this.pageTexts[key][origKey] = this.domOriginals[key];
+      }
+    }
+  }
+  /** Find a managed element whose current text matches the given original text */
+  findElementByOriginal(originalText, tagName) {
+    for (const [el] of this.managedElements) {
+      if (el.tagName !== tagName) continue;
+      const current = this.getElementContent(el);
+      if (current === originalText) return el;
+    }
+    return null;
   }
   updateElementTexts() {
     this.observer?.disconnect();
+    let orphanedCount = 0;
     for (const [el, info] of this.managedElements) {
       if (document.activeElement === el) continue;
-      const val = this.getPageText(info.key);
+      const entry = this.pageTexts[info.key];
+      if (!entry) continue;
+      const val = entry[this.currentLang];
       if (!val) continue;
-      const current = this.hasEditableChildren(el) ? this.getDirectTextContent(el).trim() : el.textContent?.trim() || "";
-      if (val !== current) this.setDirectTextContent(el, val);
+      const orig = entry[`_orig_${this.currentLang}`];
+      if (!orig) {
+        const current = this.getElementContent(el);
+        if (val !== current) this.setElementContent(el, val);
+        continue;
+      }
+      const domText = this.domOriginals[info.key] || this.getElementContent(el);
+      if (domText === orig) {
+        if (val !== this.getElementContent(el)) this.setElementContent(el, val);
+      } else {
+        orphanedCount++;
+      }
     }
     this.observer?.observe(document.body, { childList: true, subtree: true });
   }
@@ -1069,6 +1563,7 @@ var XtroedgeCMS = class _XtroedgeCMS {
     this.managedElements.clear();
     for (const el of this.autoDetectedElements) el.removeAttribute("data-cms");
     this.autoDetectedElements.clear();
+    this.domOriginals = {};
     this.cleanupManagedImages();
   }
   // ===============================================
@@ -1088,7 +1583,7 @@ var XtroedgeCMS = class _XtroedgeCMS {
     const info = this.managedImages.get(img);
     if (info) {
       img.removeEventListener("contextmenu", info.ctxHandler);
-      img.style.outline = "";
+      img.style.removeProperty("outline");
       img.style.cursor = "";
       this.managedImages.delete(img);
     }
@@ -1108,14 +1603,14 @@ var XtroedgeCMS = class _XtroedgeCMS {
   enableImageEdit(img, ctxHandler) {
     if (!img.dataset.origTitle) img.dataset.origTitle = img.title || "";
     img.title = "Right-click to change image";
-    img.style.outline = `2px dashed ${this.highlightColor}`;
+    img.style.setProperty("outline", `2px dashed ${this.highlightColor}`, "important");
     img.style.cursor = "context-menu";
     img.addEventListener("contextmenu", ctxHandler);
   }
   disableImageEdit(img, ctxHandler) {
     img.title = img.dataset.origTitle || "";
     delete img.dataset.origTitle;
-    img.style.outline = "";
+    img.style.removeProperty("outline");
     img.style.cursor = "";
     img.removeEventListener("contextmenu", ctxHandler);
   }
@@ -1164,7 +1659,7 @@ var XtroedgeCMS = class _XtroedgeCMS {
       this.dismissImageCtxMenu();
     });
     menu.appendChild(btn);
-    document.body.appendChild(menu);
+    (this.rootEl || document.body).appendChild(menu);
     this.imageCtxMenu = menu;
     const closeHandler = (e) => {
       if (!menu.contains(e.target)) {
@@ -1195,14 +1690,18 @@ var XtroedgeCMS = class _XtroedgeCMS {
   }
   async uploadImageToApi(dataUrl) {
     try {
-      const res = await this.apiFetch(`${this.config.apiBase}/web/upload-image`, {
+      const storedImageUrl = _XtroedgeCMS.secureGet("xtroedge_image_url");
+      const clientBase = this.config.clientApi || this.config.apiBase;
+      const uploadUrl = storedImageUrl ? this.resolveClientUrl(storedImageUrl) : `${clientBase}/web/upload-image`;
+      const res = await this.apiFetch(uploadUrl, {
         method: "POST",
         headers: { "Content-Type": "application/json" },
         body: JSON.stringify({ url: dataUrl })
       });
       if (!res.ok) throw new Error(`HTTP ${res.status}`);
       const data = await res.json();
-      const baseUrl = this.config.imageBaseUrl || (this.config.apiBase ? new URL(this.config.apiBase).origin : "");
+      const imgOriginBase = this.config.clientApi || this.config.apiBase || "";
+      const baseUrl = this.config.imageBaseUrl || (imgOriginBase ? new URL(imgOriginBase).origin : "");
       const fullUrl = baseUrl + data.path;
       if (this.activeImageEl) {
         const key = this.managedImages.get(this.activeImageEl)?.key || "";
@@ -1239,6 +1738,10 @@ var XtroedgeCMS = class _XtroedgeCMS {
     this.canUndo = true;
     this.canRedo = false;
     if (!this.pageTexts[key]) this.pageTexts[key] = {};
+    const origKey = `_orig_${this.currentLang}`;
+    if (!this.pageTexts[key][origKey]) {
+      this.pageTexts[key][origKey] = this.domOriginals[key] || "";
+    }
     this.pageTexts[key] = { ...this.pageTexts[key], [this.currentLang]: newValue };
     this.dirtyKeys.add(key);
     this.unsavedChanges = this.dirtyKeys.size + this.dirtyImageKeys.size;
@@ -1269,6 +1772,162 @@ var XtroedgeCMS = class _XtroedgeCMS {
     }
   }
   // ===============================================
+  // RICH TEXT TOOLBAR
+  // ===============================================
+  get richTextEnabled() {
+    return this.config.richText !== false;
+  }
+  sanitizeHTML(html) {
+    const doc = new DOMParser().parseFromString(html, "text/html");
+    const clean = (node) => {
+      const children = Array.from(node.childNodes);
+      for (const child of children) {
+        if (child.nodeType === Node.TEXT_NODE) continue;
+        if (child.nodeType === Node.ELEMENT_NODE) {
+          const el = child;
+          if (!_XtroedgeCMS.ALLOWED_TAGS.has(el.tagName)) {
+            while (el.firstChild) el.parentNode?.insertBefore(el.firstChild, el);
+            el.remove();
+          } else {
+            const allowedAttrs = _XtroedgeCMS.ALLOWED_ATTRS[el.tagName] || /* @__PURE__ */ new Set();
+            for (const attr of Array.from(el.attributes)) {
+              if (!allowedAttrs.has(attr.name)) el.removeAttribute(attr.name);
+            }
+            if (el.tagName === "A") {
+              const href = el.getAttribute("href") || "";
+              if (href.trim().toLowerCase().startsWith("javascript:")) {
+                el.setAttribute("href", "#");
+              }
+            }
+            clean(el);
+          }
+        } else {
+          child.remove();
+        }
+      }
+    };
+    clean(doc.body);
+    return doc.body.innerHTML;
+  }
+  createRichToolbar() {
+    if (!this.richTextEnabled || this.richToolbarEl) return;
+    const toolbar = document.createElement("div");
+    toolbar.className = "lcms-rich-toolbar";
+    const buttons = [
+      { cmd: "bold", label: "B", title: "Bold" },
+      { cmd: "italic", label: "<i>I</i>", title: "Italic" },
+      { cmd: "underline", label: "<u>U</u>", title: "Underline" },
+      { cmd: "strikeThrough", label: "<s>S</s>", title: "Strikethrough" }
+    ];
+    const linkButtons = [
+      { cmd: "createLink", label: "\u{1F517}", title: "Insert Link" },
+      { cmd: "unlink", label: "\u2298", title: "Remove Link" }
+    ];
+    const utilButtons = [
+      { cmd: "removeFormat", label: "\u2715", title: "Clear Formatting" }
+    ];
+    const makeBtn = (item) => {
+      const btn = document.createElement("button");
+      btn.innerHTML = item.label;
+      btn.title = item.title;
+      btn.dataset.cmd = item.cmd;
+      btn.addEventListener("mousedown", (e) => {
+        e.preventDefault();
+        this.execToolbarCommand(item.cmd);
+      });
+      return btn;
+    };
+    const addSep = () => {
+      const sep = document.createElement("div");
+      sep.className = "lcms-tb-sep";
+      toolbar.appendChild(sep);
+    };
+    buttons.forEach((b) => toolbar.appendChild(makeBtn(b)));
+    addSep();
+    linkButtons.forEach((b) => toolbar.appendChild(makeBtn(b)));
+    addSep();
+    utilButtons.forEach((b) => toolbar.appendChild(makeBtn(b)));
+    this.rootEl?.appendChild(toolbar);
+    this.richToolbarEl = toolbar;
+    this.selectionChangeHandler = () => this.updateToolbarState();
+    document.addEventListener("selectionchange", this.selectionChangeHandler);
+  }
+  destroyRichToolbar() {
+    if (this.richToolbarEl) {
+      this.richToolbarEl.remove();
+      this.richToolbarEl = null;
+    }
+    if (this.selectionChangeHandler) {
+      document.removeEventListener("selectionchange", this.selectionChangeHandler);
+      this.selectionChangeHandler = null;
+    }
+    this.activeEditableEl = null;
+  }
+  execToolbarCommand(cmd) {
+    this.observer?.disconnect();
+    if (this.scanTimeout) {
+      clearTimeout(this.scanTimeout);
+      this.scanTimeout = null;
+    }
+    if (cmd === "createLink") {
+      const url = prompt("Enter URL:", "https://");
+      if (url) document.execCommand("createLink", false, url);
+    } else {
+      document.execCommand(cmd, false);
+    }
+    this.updateToolbarState();
+    if (this.activeEditableEl) {
+      this.activeEditableEl.dispatchEvent(new Event("input", { bubbles: true }));
+    }
+    setTimeout(() => {
+      this.observer?.observe(document.body, { childList: true, subtree: true });
+    }, 50);
+  }
+  showRichToolbar(el) {
+    if (!this.richTextEnabled || !this.richToolbarEl) return;
+    if (this.toolbarHideTimeout) {
+      clearTimeout(this.toolbarHideTimeout);
+      this.toolbarHideTimeout = null;
+    }
+    this.activeEditableEl = el;
+    this.positionToolbar(el);
+    this.richToolbarEl.classList.add("visible");
+    this.updateToolbarState();
+  }
+  positionToolbar(el) {
+    if (!this.richToolbarEl) return;
+    const rect = el.getBoundingClientRect();
+    const tbRect = this.richToolbarEl.getBoundingClientRect();
+    let top = rect.top - tbRect.height - 8;
+    let left = rect.left + rect.width / 2 - tbRect.width / 2;
+    if (top < 4) top = rect.bottom + 8;
+    if (left < 4) left = 4;
+    if (left + tbRect.width > window.innerWidth - 4) left = window.innerWidth - tbRect.width - 4;
+    this.richToolbarEl.style.top = `${top}px`;
+    this.richToolbarEl.style.left = `${left}px`;
+  }
+  hideRichToolbar() {
+    if (!this.richToolbarEl) return;
+    this.toolbarHideTimeout = setTimeout(() => {
+      this.richToolbarEl?.classList.remove("visible");
+      this.activeEditableEl = null;
+      this.toolbarHideTimeout = null;
+    }, 150);
+  }
+  updateToolbarState() {
+    if (!this.richToolbarEl) return;
+    const cmds = ["bold", "italic", "underline", "strikeThrough"];
+    for (const btn of Array.from(this.richToolbarEl.querySelectorAll("button"))) {
+      const cmd = btn.dataset.cmd;
+      if (cmd && cmds.includes(cmd)) {
+        try {
+          btn.classList.toggle("active", document.queryCommandState(cmd));
+        } catch {
+        }
+      }
+    }
+  }
+  // ===============================================
   // UNDO / REDO
   // ===============================================
   onUndo() {
@@ -1330,7 +1989,7 @@ var XtroedgeCMS = class _XtroedgeCMS {
     this.updateUI();
   }
   logout() {
-    localStorage.removeItem("builder_token");
+    _XtroedgeCMS.secureClear();
     sessionStorage.removeItem("builder_edit_mode");
     this.editMode = false;
     this.isEditAllowed = false;
@@ -1356,6 +2015,7 @@ var XtroedgeCMS = class _XtroedgeCMS {
       }
     }
     this.autoDetectAndScan();
+    this.captureDomOriginals();
     if (this.editMode) this.applyEditMode(true);
     if (this.config.apiBase) {
       if (loadDraft) this.loadPageContent("draft");
@@ -1387,17 +2047,40 @@ var XtroedgeCMS = class _XtroedgeCMS {
   getPageSection() {
     return this.currentSlug.replace(/^\//, "").replace(/-/g, "_").toUpperCase();
   }
-  // Authenticated fetch — adds Authorization header from builder_token
+  /** Resolve a stored URL against our server (apiBase) */
+  resolveServerUrl(storedUrl) {
+    if (storedUrl.startsWith("/")) return `${this.config.apiBase}${storedUrl}`;
+    return storedUrl;
+  }
+  /** Resolve a stored URL against client's server (clientApi, falls back to apiBase) */
+  resolveClientUrl(storedUrl) {
+    const base = this.config.clientApi || this.config.apiBase;
+    if (storedUrl.startsWith("/")) return `${base}${storedUrl}`;
+    return storedUrl;
+  }
   apiFetch(url, opts) {
-    const token = localStorage.getItem("builder_token") || "";
+    const token = _XtroedgeCMS.secureGet("builder_token") || "";
+    const licenseKey = this.config.licenseKey || "";
     const headers = { ...opts?.headers || {} };
     if (token) headers["Authorization"] = `Bearer ${token}`;
+    if (licenseKey) headers["X-License-Key"] = licenseKey;
+    const isOurServer = this.config.apiBase && url.startsWith(this.config.apiBase);
+    if (!isOurServer && this.config.clientHeaders) {
+      for (const [k, v] of Object.entries(this.config.clientHeaders)) {
+        if (!headers[k]) headers[k] = v;
+      }
+    }
     return fetch(url, { ...opts, headers });
   }
-  // Fetch texts for a single slug and merge into pageTexts
+  // Fetch page by slug — if get_url exists in localStorage, call it directly (bypass our server)
   async fetchSection(slug, status) {
     try {
-      const res = await this.apiFetch(`${this.config.apiBase}/web-page/get?slug=${encodeURIComponent(slug)}&status=${status}&site_identifier=${encodeURIComponent(this.siteIdentifier)}`);
+      const storedGetUrl = _XtroedgeCMS.secureGet("xtroedge_get_url");
+      const clientBase = this.config.clientApi || this.config.apiBase;
+      const getBase = storedGetUrl ? this.resolveClientUrl(storedGetUrl) : `${clientBase}/web-page/get`;
+      let getUrl = `${getBase}?slug=${encodeURIComponent(slug)}`;
+      if (status) getUrl += `&status=${encodeURIComponent(status)}`;
+      const res = await this.apiFetch(getUrl);
       if (!res.ok) return null;
       return await res.json();
     } catch {
@@ -1484,7 +2167,8 @@ var XtroedgeCMS = class _XtroedgeCMS {
     for (const key of this.registeredKeys) {
       const el = document.querySelector(`[data-cms="${key}"]`);
       const val = el?.textContent?.trim() || "";
-      texts[key] = { [this.currentLang]: val };
+      const entry = { [this.defaultLanguage]: val };
+      texts[key] = entry;
     }
     this.pageTexts = texts;
     if (this.config.i18nBasePath) {
@@ -1523,12 +2207,22 @@ var XtroedgeCMS = class _XtroedgeCMS {
     return sections;
   }
   async saveChanges() {
+    if (!this.licenseValid) {
+      this.showLicenseExpiredToast();
+      return;
+    }
     if (!this.config.apiBase) {
       this.showToast("No API configured. Set apiBase to enable save.", "error");
       return;
     }
     this.isSaving = true;
     this.updateUI();
+    const origKey = `_orig_${this.currentLang}`;
+    for (const key of Object.keys(this.pageTexts)) {
+      if (!this.pageTexts[key][origKey] && this.domOriginals[key]) {
+        this.pageTexts[key][origKey] = this.domOriginals[key];
+      }
+    }
     try {
       const sections = this.groupTextsBySection();
       const requests = Object.entries(sections).map(
@@ -1538,13 +2232,18 @@ var XtroedgeCMS = class _XtroedgeCMS {
           body: JSON.stringify({
             slug,
             title: slug === this.currentSlug ? this.currentTitle : slug.replace("/", ""),
-            site_identifier: this.siteIdentifier,
             content: { texts, ...slug === this.currentSlug ? { images: this.pageImages } : {} }
           })
         })
       );
-      const results = await Promise.all(requests);
-      if (results.some((r) => !r.ok)) throw new Error("One or more sections failed to save");
+      const responses = await Promise.all(requests);
+      const saveResults = [];
+      for (const res of responses) {
+        const data = await res.json();
+        saveResults.push({ ok: res.ok, status: res.status, data });
+      }
+      if (saveResults.some((r) => !r.ok)) throw new Error("One or more sections failed to save");
+      console.info("[XtroEdge] Save responses:", saveResults.map((r) => r.data));
       this.isSaving = false;
       this.resetAfterSave();
       this.updateUI();
@@ -1558,12 +2257,22 @@ var XtroedgeCMS = class _XtroedgeCMS {
     }
   }
   async publishChanges() {
+    if (!this.licenseValid) {
+      this.showLicenseExpiredToast();
+      return;
+    }
     if (!this.config.apiBase) {
       this.showToast("No API configured. Set apiBase to enable publish.", "error");
       return;
     }
     this.isPublishing = true;
     this.updateUI();
+    const origKey = `_orig_${this.currentLang}`;
+    for (const key of Object.keys(this.pageTexts)) {
+      if (!this.pageTexts[key][origKey] && this.domOriginals[key]) {
+        this.pageTexts[key][origKey] = this.domOriginals[key];
+      }
+    }
     try {
       const sections = this.groupTextsBySection();
       const requests = Object.entries(sections).map(
@@ -1573,13 +2282,18 @@ var XtroedgeCMS = class _XtroedgeCMS {
           body: JSON.stringify({
             slug,
             title: slug === this.currentSlug ? this.currentTitle : slug.replace("/", ""),
-            site_identifier: this.siteIdentifier,
             published_content: { texts, ...slug === this.currentSlug ? { images: this.pageImages } : {} }
           })
         })
       );
       const results = await Promise.all(requests);
-      if (results.some((r) => !r.ok)) throw new Error("One or more sections failed to publish");
+      const publishResults = [];
+      for (const res of results) {
+        const data = await res.json();
+        publishResults.push({ ok: res.ok, status: res.status, data });
+      }
+      if (publishResults.some((r) => !r.ok)) throw new Error("One or more sections failed to publish");
+      console.info("[XtroEdge] Publish responses:", publishResults.map((r) => r.data));
       this.isPublishing = false;
       this.resetAfterSave();
       this.updateUI();
@@ -1741,6 +2455,11 @@ var XtroedgeCMS = class _XtroedgeCMS {
   toggleEditMode(e) {
     e.stopPropagation();
     const checked = e.target.checked;
+    if (checked && !this.licenseValid) {
+      e.target.checked = false;
+      this.showLicenseExpiredToast();
+      return;
+    }
     if (checked) {
       sessionStorage.setItem("builder_edit_mode", "true");
       this.editMode = true;
@@ -1872,13 +2591,19 @@ var XtroedgeCMS = class _XtroedgeCMS {
         </div>
         <div class="lcms-login-field">
           <label class="lcms-login-label">Password</label>
-          <input class="lcms-login-input" id="lcms-login-password" type="password" placeholder="Enter your password" autocomplete="current-password" />
+          <div class="lcms-password-wrapper">
+            <input class="lcms-login-input" id="lcms-login-password" type="password" placeholder="Enter your password" autocomplete="current-password" />
+            <button type="button" class="lcms-password-toggle" id="lcms-password-toggle" tabindex="-1">
+              <svg class="lcms-eye-open" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg>
+              <svg class="lcms-eye-closed lcms-hidden" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24"/><line x1="1" y1="1" x2="23" y2="23"/></svg>
+            </button>
+          </div>
         </div>
         <button class="lcms-login-btn" id="lcms-login-btn">Sign In</button>
         <div class="lcms-login-error" id="lcms-login-error"></div>
       </div>
     `;
-    document.body.appendChild(overlay);
+    (this.rootEl || document.body).appendChild(overlay);
     this.loginModalEl = overlay;
     const btn = overlay.querySelector("#lcms-login-btn");
     const emailInput = overlay.querySelector("#lcms-login-email");
@@ -1888,6 +2613,16 @@ var XtroedgeCMS = class _XtroedgeCMS {
     passInput.addEventListener("keydown", (e) => {
       if (e.key === "Enter") doLogin();
     });
+    const toggleBtn = overlay.querySelector("#lcms-password-toggle");
+    if (toggleBtn) {
+      toggleBtn.addEventListener("click", () => {
+        const isPassword = passInput.type === "password";
+        passInput.type = isPassword ? "text" : "password";
+        toggleBtn.querySelector(".lcms-eye-open").classList.toggle("lcms-hidden", !isPassword);
+        toggleBtn.querySelector(".lcms-eye-closed").classList.toggle("lcms-hidden", isPassword);
+        passInput.focus();
+      });
+    }
     setTimeout(() => emailInput.focus(), 50);
   }
   hideLoginModal() {
@@ -1923,7 +2658,21 @@ var XtroedgeCMS = class _XtroedgeCMS {
       }
       const token = data?.token || data?.authToken || data?.auth_token || data?.data?.token;
       if (!token) throw new Error("Login successful but no token returned.");
-      localStorage.setItem("builder_token", token);
+      _XtroedgeCMS.secureSet("builder_token", token);
+      if (data?.get_url) _XtroedgeCMS.secureSet("xtroedge_get_url", data.get_url);
+      else _XtroedgeCMS.secureRemove("xtroedge_get_url");
+      if (data?.published_url) _XtroedgeCMS.secureSet("xtroedge_published_url", data.published_url);
+      else _XtroedgeCMS.secureRemove("xtroedge_published_url");
+      if (data?.image_url) _XtroedgeCMS.secureSet("xtroedge_image_url", data.image_url);
+      else _XtroedgeCMS.secureRemove("xtroedge_image_url");
+      if (data?.client_api) {
+        _XtroedgeCMS.secureSet("xtroedge_client_api", data.client_api);
+        this.config.clientApi = data.client_api;
+      } else {
+        _XtroedgeCMS.secureRemove("xtroedge_client_api");
+      }
+      if (data?.save_url) _XtroedgeCMS.secureSet("xtroedge_save_url", data.save_url);
+      else _XtroedgeCMS.secureRemove("xtroedge_save_url");
       this.hideLoginModal();
       this.editMode = true;
       this.pendingEditMode = false;
@@ -1979,10 +2728,10 @@ var XtroedgeCMS = class _XtroedgeCMS {
     document.documentElement.style.setProperty("--lcms-primary-dark", this.getDarkerColor(color));
     if (this.editMode) {
       for (const [el] of this.managedElements) {
-        el.style.outline = `2px dashed ${color}`;
+        el.style.setProperty("outline", `2px dashed ${color}`, "important");
       }
       for (const [img] of this.managedImages) {
-        img.style.outline = `2px dashed ${color}`;
+        img.style.setProperty("outline", `2px dashed ${color}`, "important");
       }
     }
     const swatches = this.panelEl?.querySelectorAll(".lcms-theme-swatch");
@@ -1995,23 +2744,71 @@ var XtroedgeCMS = class _XtroedgeCMS {
   // STATIC CONVENIENCE
   // ===============================================
   /** Quick init - create and start CMS in one call */
-  static create(config) {
+  static async create(config) {
     const cms = new _XtroedgeCMS(config);
-    cms.init();
+    await cms.init();
     return cms;
   }
   /** Auto-init: called automatically when package is loaded. No user code needed. */
-  static autoInit() {
+  static async autoInit() {
     if (window.__xtroedge_cms_instance__) return;
     const userConfig = window.__XTROEDGE_CMS_CONFIG__ || {};
-    const cms = _XtroedgeCMS.create(userConfig);
+    const cms = await _XtroedgeCMS.create(userConfig);
     window.__xtroedge_cms_instance__ = cms;
   }
 };
+// ===== Encrypted vault (single key stores all sensitive data) =====
+_XtroedgeCMS._SK = "xTr0EdG3_s3cUr3_k3y!@#2024";
+_XtroedgeCMS._VAULT_KEY = "_xtd";
+// ===============================================
+// LICENSE VALIDATION
+// ===============================================
+_XtroedgeCMS.LICENSE_CACHE_KEY = "xtroedge_license_cache";
+_XtroedgeCMS.LICENSE_CACHE_TTL = 24 * 60 * 60 * 1e3;
+// Tags where Enter should be blocked (single-line elements)
+_XtroedgeCMS.SINGLE_LINE_TAGS = /* @__PURE__ */ new Set([
+  "H1",
+  "H2",
+  "H3",
+  "H4",
+  "H5",
+  "H6",
+  "BUTTON",
+  "LABEL",
+  "SPAN",
+  "A",
+  "SMALL",
+  "B",
+  "STRONG",
+  "I",
+  "EM"
+]);
+// Allowed HTML tags for sanitization
+_XtroedgeCMS.ALLOWED_TAGS = /* @__PURE__ */ new Set([
+  "B",
+  "STRONG",
+  "I",
+  "EM",
+  "U",
+  "S",
+  "STRIKE",
+  "A",
+  "BR",
+  "UL",
+  "OL",
+  "LI",
+  "SUB",
+  "SUP"
+]);
+// Allowed attributes per tag
+_XtroedgeCMS.ALLOWED_ATTRS = {
+  A: /* @__PURE__ */ new Set(["href", "target", "rel"])
+};
+var XtroedgeCMS = _XtroedgeCMS;
 
 // src/index.ts
-function boot() {
-  XtroedgeCMS.autoInit();
+async function boot() {
+  await XtroedgeCMS.autoInit();
 }
 if (typeof window !== "undefined") {
   if (document.readyState === "loading") {