@ohhwells/bridge 0.1.52-next.134 → 0.1.52-next.138

package/dist/index.cjs

@@ -9047,12 +9047,29 @@ function deleteFooterColumn(column) {
 // src/lib/logo-identity.ts
 var LOGO_TEXT_KEYS = ["nav-logo-text", "footer-logo-text", "logo-text"];
 var LOGO_IMAGE_KEYS = ["nav-logo-image", "footer-logo", "footer-logo-image"];
+var LOGO_HREF_KEYS = ["nav-logo-href", "footer-logo-href", "logo-href"];
 var LOGO_PLACEHOLDER_KEY = "logo-is-placeholder";
+var LOGO_ALT_KEY = "logo-alt";
+var LOGO_IMAGE_URL_KEY = "nav-logo-image";
 var PLACEHOLDER_BUSINESS_NAME = "Business name";
 function resolveLogoDisplayText(text) {
   const trimmed = (text ?? "").trim();
   return trimmed || PLACEHOLDER_BUSINESS_NAME;
 }
+function isFooterLogoRoot(root) {
+  return Boolean(root.closest("footer") || root.closest('[data-ohw-section="footer"]'));
+}
+function imageKeyForRoot(root) {
+  return isFooterLogoRoot(root) ? "footer-logo" : "nav-logo-image";
+}
+function textKeyForRoot(root) {
+  return isFooterLogoRoot(root) ? "footer-logo-text" : "nav-logo-text";
+}
+function ensureLogoHrefKey(root) {
+  if (!(root instanceof HTMLAnchorElement)) return;
+  if (root.hasAttribute("data-ohw-href-key")) return;
+  root.setAttribute("data-ohw-href-key", isFooterLogoRoot(root) ? "footer-logo-href" : "nav-logo-href");
+}
 function applyLogoIdentity(text, isPlaceholder) {
   const display = resolveLogoDisplayText(text);
   const placeholder = isPlaceholder || !text.trim() || display === PLACEHOLDER_BUSINESS_NAME;
@@ -9073,26 +9090,106 @@ function applyLogoIdentity(text, isPlaceholder) {
   });
   return display;
 }
+function applyLogoImage(url, alt) {
+  const displayAlt = resolveLogoDisplayText(alt);
+  document.querySelectorAll('[data-ohw-role="logo"], [data-ohw-logo]').forEach((root) => {
+    ensureLogoHrefKey(root);
+    const imageKey = imageKeyForRoot(root);
+    const textKey = textKeyForRoot(root);
+    let img = root.querySelector(`img[data-ohw-key="${imageKey}"]`) ?? (root.querySelector(`[data-ohw-key="${imageKey}"]`) instanceof HTMLImageElement ? root.querySelector(`[data-ohw-key="${imageKey}"]`) : null) ?? root.querySelector("img");
+    let textEl = root.querySelector(`[data-ohw-key="${textKey}"]`) ?? root.querySelector('[data-ohw-key="logo-text"]');
+    if (url) {
+      if (!img) {
+        img = document.createElement("img");
+        img.setAttribute("data-ohw-editable", "image");
+        img.setAttribute("data-ohw-key", imageKey);
+        img.alt = displayAlt;
+        img.style.maxHeight = "40px";
+        img.style.width = "auto";
+        img.style.display = "block";
+        img.style.objectFit = "contain";
+        root.insertBefore(img, root.firstChild);
+      } else {
+        img.setAttribute("data-ohw-editable", "image");
+        img.setAttribute("data-ohw-key", imageKey);
+      }
+      img.removeAttribute("srcset");
+      img.removeAttribute("sizes");
+      img.src = url;
+      img.alt = displayAlt;
+      img.style.display = "block";
+      if (textEl) textEl.style.display = "none";
+      root.removeAttribute("data-ohw-placeholder");
+      return;
+    }
+    if (img) {
+      img.removeAttribute("src");
+      img.removeAttribute("srcset");
+      img.removeAttribute("sizes");
+      img.alt = displayAlt;
+      img.style.display = "none";
+    }
+    if (!textEl) {
+      textEl = document.createElement("span");
+      textEl.setAttribute("data-ohw-editable", "plain");
+      textEl.setAttribute("data-ohw-key", textKey);
+      root.appendChild(textEl);
+    }
+    textEl.style.display = "";
+    if (textEl.textContent !== displayAlt) textEl.textContent = displayAlt;
+    if (!displayAlt.trim() || displayAlt === PLACEHOLDER_BUSINESS_NAME) {
+      root.setAttribute("data-ohw-placeholder", "");
+    } else {
+      root.removeAttribute("data-ohw-placeholder");
+    }
+  });
+}
+function applyLogoHref(href) {
+  const target = href.trim() || "/";
+  document.querySelectorAll('[data-ohw-role="logo"], [data-ohw-logo]').forEach((root) => {
+    ensureLogoHrefKey(root);
+    if (root instanceof HTMLAnchorElement) {
+      root.setAttribute("href", target);
+    }
+  });
+}
 function readLogoIdentityFromDom() {
+  let imageUrl = null;
+  for (const key of LOGO_IMAGE_KEYS) {
+    const el = document.querySelector(`[data-ohw-key="${key}"]`);
+    const img = el instanceof HTMLImageElement ? el : el?.querySelector("img");
+    const attrSrc = img?.getAttribute("src")?.trim() ?? "";
+    if (attrSrc && !attrSrc.startsWith("data:") && img && img.style.display !== "none") {
+      imageUrl = img.currentSrc || img.src;
+      break;
+    }
+  }
+  let text = PLACEHOLDER_BUSINESS_NAME;
+  let isPlaceholder = true;
   for (const key of LOGO_TEXT_KEYS) {
     const el = document.querySelector(`[data-ohw-key="${key}"]`);
     if (el?.textContent?.trim()) {
-      const text = el.textContent.trim();
-      const logoRoot = el.closest('[data-ohw-role="logo"], [data-ohw-logo]');
-      const isPlaceholder = logoRoot?.hasAttribute("data-ohw-placeholder") === true || text === PLACEHOLDER_BUSINESS_NAME;
-      return { text, isPlaceholder };
+      text = el.textContent.trim();
+      const logoRoot2 = el.closest('[data-ohw-role="logo"], [data-ohw-logo]');
+      isPlaceholder = logoRoot2?.hasAttribute("data-ohw-placeholder") === true || text === PLACEHOLDER_BUSINESS_NAME;
+      break;
     }
   }
-  const logoImg = document.querySelector(
-    '[data-ohw-key="nav-logo-image"], [data-ohw-key="footer-logo"]'
-  );
-  if (logoImg?.alt?.trim()) {
-    const text = logoImg.alt.trim();
-    const logoRoot = logoImg.closest('[data-ohw-role="logo"], [data-ohw-logo]');
-    const isPlaceholder = logoRoot?.hasAttribute("data-ohw-placeholder") === true || text === PLACEHOLDER_BUSINESS_NAME;
-    return { text, isPlaceholder };
+  if (imageUrl) {
+    const logoImg = document.querySelector(
+      '[data-ohw-key="nav-logo-image"], [data-ohw-key="footer-logo"]'
+    );
+    const alt = logoImg?.alt?.trim() || text;
+    isPlaceholder = false;
+    const hrefEl = document.querySelector(
+      'a[data-ohw-role="logo"], a[data-ohw-logo], [data-ohw-role="logo"]'
+    );
+    const href2 = (hrefEl instanceof HTMLAnchorElement ? hrefEl.getAttribute("href") : null) || hrefEl?.closest("a")?.getAttribute("href") || "/";
+    return { text, isPlaceholder, imageUrl, href: href2, alt };
   }
-  return { text: PLACEHOLDER_BUSINESS_NAME, isPlaceholder: true };
+  const logoRoot = document.querySelector('[data-ohw-role="logo"], [data-ohw-logo]');
+  const href = (logoRoot instanceof HTMLAnchorElement ? logoRoot.getAttribute("href") : null) || logoRoot?.closest("a")?.getAttribute("href") || "/";
+  return { text, isPlaceholder, imageUrl: null, href, alt: text };
 }
 
 // src/lib/site-wide-scope.ts
@@ -14075,6 +14172,7 @@ function OhhwellsBridge() {
           continue;
         }
         if (key === LOGO_PLACEHOLDER_KEY) continue;
+        if (LOGO_IMAGE_KEYS.includes(key) && !String(val ?? "").trim()) continue;
         if (applyVideoSettingNode(key, val)) continue;
         if (applyCarouselNode(key, val)) continue;
         document.querySelectorAll(`[data-ohw-key="${key}"]`).forEach((el) => {
@@ -14094,11 +14192,27 @@ function OhhwellsBridge() {
         });
         applyLinkByKey(key, val);
       }
-      const hasLogoIdentity = LOGO_PLACEHOLDER_KEY in content || LOGO_TEXT_KEYS.some((key) => key in content);
+      const hasLogoIdentity = LOGO_PLACEHOLDER_KEY in content || LOGO_TEXT_KEYS.some((key) => key in content) || LOGO_IMAGE_KEYS.some((key) => key in content) || LOGO_ALT_KEY in content || LOGO_HREF_KEYS.some((key) => key in content);
       if (hasLogoIdentity) {
         const logoText = content[LOGO_TEXT_KEYS[0]] ?? content[LOGO_TEXT_KEYS[1]] ?? readLogoIdentityFromDom().text;
-        const logoIsPlaceholder = LOGO_PLACEHOLDER_KEY in content ? content[LOGO_PLACEHOLDER_KEY] !== "false" : !logoText.trim() || logoText === PLACEHOLDER_BUSINESS_NAME;
-        applyLogoIdentity(logoText, logoIsPlaceholder);
+        const logoAlt = content[LOGO_ALT_KEY] ?? logoText;
+        const rawLogoImage = content[LOGO_IMAGE_URL_KEY] ?? content["footer-logo"] ?? content["footer-logo-image"] ?? null;
+        const logoImageUrl = typeof rawLogoImage === "string" && rawLogoImage.trim() ? rawLogoImage.trim() : null;
+        const imageExplicitlyCleared = LOGO_IMAGE_KEYS.some((key) => key in content) && !logoImageUrl;
+        const logoIsPlaceholder = LOGO_PLACEHOLDER_KEY in content ? content[LOGO_PLACEHOLDER_KEY] !== "false" : !logoImageUrl && (!logoText.trim() || logoText === PLACEHOLDER_BUSINESS_NAME);
+        if (logoImageUrl) {
+          applyLogoImage(logoImageUrl, logoAlt);
+        } else {
+          if (imageExplicitlyCleared) applyLogoImage(null, logoAlt);
+          applyLogoIdentity(logoText, logoIsPlaceholder);
+        }
+        const logoHref = content["nav-logo-href"] ?? content["footer-logo-href"] ?? content["logo-href"];
+        if (typeof logoHref === "string" && logoHref.trim()) {
+          applyLogoHref(logoHref);
+          applyLinkByKey("nav-logo-href", logoHref);
+          applyLinkByKey("footer-logo-href", logoHref);
+          applyLinkByKey("logo-href", logoHref);
+        }
       }
       if (sectionsJson) {
         initSectionsFromContent({ __ohw_sections: sectionsJson }, true);
@@ -14115,12 +14229,48 @@ function OhhwellsBridge() {
     const handleUpdateLogoIdentity = (e) => {
       if (e.data?.type !== "ow:update-logo-identity") return;
       const rawText = typeof e.data.text === "string" ? e.data.text : "";
-      const isPlaceholder = e.data.isPlaceholder !== false;
+      const alt = typeof e.data.alt === "string" ? e.data.alt : rawText;
+      const href = typeof e.data.href === "string" ? e.data.href : void 0;
+      const imageProvided = "image" in e.data;
+      const imageUrl = imageProvided && typeof e.data.image === "string" && e.data.image.trim() ? e.data.image.trim() : imageProvided ? null : void 0;
+      let isPlaceholder = e.data.isPlaceholder !== false;
+      if (imageUrl) isPlaceholder = false;
+      else if (imageProvided && imageUrl === null) {
+        isPlaceholder = e.data.isPlaceholder === true || !rawText.trim() || resolveLogoDisplayText(rawText) === PLACEHOLDER_BUSINESS_NAME;
+      }
       const display = applyLogoIdentity(rawText, isPlaceholder);
+      const displayAlt = resolveLogoDisplayText(alt || display);
+      if (imageUrl !== void 0) {
+        applyLogoImage(imageUrl, displayAlt);
+      } else {
+        for (const key of LOGO_IMAGE_KEYS) {
+          document.querySelectorAll(`[data-ohw-key="${key}"]`).forEach((el) => {
+            const img = el instanceof HTMLImageElement ? el : el.querySelector("img");
+            if (img) img.alt = displayAlt;
+          });
+        }
+      }
+      if (href !== void 0) {
+        applyLogoHref(href);
+        applyLinkByKey("nav-logo-href", href);
+        applyLinkByKey("footer-logo-href", href);
+        applyLinkByKey("logo-href", href);
+      }
       const nodes = [
         ...LOGO_TEXT_KEYS.map((key) => ({ key, text: display })),
-        { key: LOGO_PLACEHOLDER_KEY, text: isPlaceholder || !rawText.trim() ? "true" : "false" }
+        { key: LOGO_PLACEHOLDER_KEY, text: isPlaceholder ? "true" : "false" },
+        { key: LOGO_ALT_KEY, text: displayAlt }
       ];
+      if (imageUrl !== void 0) {
+        if (imageUrl) {
+          for (const key of LOGO_IMAGE_KEYS) nodes.push({ key, text: imageUrl });
+        } else {
+          for (const key of LOGO_IMAGE_KEYS) nodes.push({ key, text: "" });
+        }
+      }
+      if (href !== void 0) {
+        for (const key of LOGO_HREF_KEYS) nodes.push({ key, text: href.trim() || "/" });
+      }
       editContentRef.current = {
         ...editContentRef.current,
         ...Object.fromEntries(nodes.map(({ key, text }) => [key, text]))