@ohhwells/bridge 0.1.54-next.154 → 0.1.54-next.157

package/dist/index.cjs

@@ -192,6 +192,59 @@ function deleteSectionFromState(state, sectionId) {
   return { ...state, v: 1, sections: state.sections, removed: [...removed, sectionId] };
 }
 
+// src/lib/brand-chrome.ts
+var BRAND_NAME_KEY = "__ohw_brand_name";
+var BRAND_TITLE_KEY = "__ohw_site_title";
+var BRAND_FAVICON_LETTER_KEY = "__ohw_favicon_letter";
+var BRAND_CHROME_KEYS = /* @__PURE__ */ new Set([
+  BRAND_NAME_KEY,
+  BRAND_TITLE_KEY,
+  BRAND_FAVICON_LETTER_KEY
+]);
+function upsertMeta(selector, attr, token, value) {
+  let el = document.head.querySelector(selector);
+  if (!el) {
+    el = document.createElement("meta");
+    el.setAttribute(attr, token);
+    document.head.appendChild(el);
+  }
+  if (el.getAttribute("content") !== value) el.setAttribute("content", value);
+}
+function escapeXml(value) {
+  return value.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
+}
+function applyLetterFavicon(letter) {
+  const svg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><rect width="64" height="64" rx="12" fill="#111827"/><text x="32" y="46" font-family="system-ui,-apple-system,Segoe UI,sans-serif" font-size="40" font-weight="700" text-anchor="middle" fill="#ffffff">${escapeXml(letter)}</text></svg>`;
+  const href = `data:image/svg+xml,${encodeURIComponent(svg)}`;
+  let link = document.head.querySelector('link[rel="icon"]');
+  if (!link) {
+    link = document.createElement("link");
+    link.rel = "icon";
+    document.head.appendChild(link);
+  }
+  link.type = "image/svg+xml";
+  if (link.href !== href) link.href = href;
+}
+function applyBrandChrome(content) {
+  const name = content[BRAND_NAME_KEY];
+  if (typeof name === "string" && name.length > 0) {
+    document.querySelectorAll("[data-ohw-wordmark]").forEach((el) => {
+      if (el.textContent !== name) el.textContent = name;
+      if (el.getAttribute("title") !== name) el.setAttribute("title", name);
+    });
+  }
+  const title = content[BRAND_TITLE_KEY];
+  if (typeof title === "string" && title.length > 0) {
+    if (document.title !== title) document.title = title;
+    upsertMeta('meta[property="og:title"]', "property", "og:title", title);
+    upsertMeta('meta[name="twitter:title"]', "name", "twitter:title", title);
+  }
+  const letter = content[BRAND_FAVICON_LETTER_KEY];
+  if (typeof letter === "string" && letter.length > 0) {
+    applyLetterFavicon(letter);
+  }
+}
+
 // src/ui/ai-tree/aiSectionsManager.tsx
 var import_react_dom = require("react-dom");
 var import_client = require("react-dom/client");
@@ -9874,16 +9927,20 @@ function reconcileSocialsFromContent(content, root = document) {
   applySocialsOrder(stored, root);
 }
 var DROP_BAR_THICKNESS = 3;
+var DROP_BAR_GAP = 8;
 function buildSocialDropSlots(row) {
   const items = listSocialItems(row);
   if (!items.length) return [];
-  return items.concat(items[items.length - 1]).map((item, index) => {
-    const rect = item.getBoundingClientRect();
-    const left = (index === items.length ? rect.right : rect.left) - DROP_BAR_THICKNESS / 2;
+  const rects = items.map((item) => item.getBoundingClientRect());
+  return items.concat(items[items.length - 1]).map((_, index) => {
+    const previous = rects[index - 1];
+    const next = rects[index];
+    const centre = previous && next ? (previous.right + next.left) / 2 : next ? next.left - DROP_BAR_GAP : previous.right + DROP_BAR_GAP;
+    const rect = next ?? previous;
     return {
       insertIndex: index,
       columnIndex: -1,
-      left,
+      left: centre - DROP_BAR_THICKNESS / 2,
       top: rect.top,
       width: DROP_BAR_THICKNESS,
       height: rect.height,
@@ -15291,11 +15348,13 @@ function OhhwellsBridge() {
         aiSectionsRef.current = content[AI_SECTIONS_KEY];
         applyAiSectionsToDom(parseAiSectionsState(content[AI_SECTIONS_KEY]));
       }
+      applyBrandChrome(content);
       for (const [key, val] of Object.entries(content)) {
         if (key === "__ohw_sections") continue;
         if (key === AI_SECTIONS_KEY) continue;
         if (key === LOGO_PLACEHOLDER_KEY) continue;
         if (LOGO_IMAGE_KEYS.includes(key)) continue;
+        if (BRAND_CHROME_KEYS.has(key)) continue;
         if (applyVideoSettingNode(key, val)) continue;
         if (applyCarouselNode(key, val)) continue;
         document.querySelectorAll(`[data-ohw-key="${key}"]`).forEach((el) => {
@@ -15376,10 +15435,12 @@ function OhhwellsBridge() {
       retryMissingSchedulingMounts(getPageSchedulingEntries(content["__ohw_sections"]), false);
       observer?.disconnect();
       try {
+        applyBrandChrome(content);
         for (const [key, val] of Object.entries(content)) {
           if (key === "__ohw_sections") continue;
           if (key === LOGO_PLACEHOLDER_KEY) continue;
           if (LOGO_IMAGE_KEYS.includes(key)) continue;
+          if (BRAND_CHROME_KEYS.has(key)) continue;
           if (applyVideoSettingNode(key, val)) continue;
           if (applyCarouselNode(key, val)) continue;
           document.querySelectorAll(`[data-ohw-key="${key}"]`).forEach((el) => {
@@ -15405,7 +15466,6 @@ function OhhwellsBridge() {
         reconcileFooterOrderFromContent(content);
         reconcileSocialsFromContent(content);
         applySocialsDisplayFromContent(content);
-        applySocialsDisplayFromContent(content);
       } finally {
         observer?.observe(document.body, { childList: true, subtree: true });
       }
@@ -15485,7 +15545,6 @@ function OhhwellsBridge() {
         reconcileFooterOrderFromContent(content);
         reconcileSocialsFromContent(content);
         applySocialsDisplayFromContent(content);
-        applySocialsDisplayFromContent(content);
         document.querySelectorAll("footer [data-ohw-href-key]").forEach((el) => {
           if (isFooterHrefKey(el.getAttribute("data-ohw-href-key"))) {
             disableNativeHrefDrag(el);
@@ -16027,7 +16086,7 @@ function OhhwellsBridge() {
       const selected = selectedElRef.current;
       if (selected && (selected === editable || selected.contains(editable))) return;
       if (!isMediaEditable(editable) && !editable.hasAttribute("contenteditable")) {
-        if (isIconEditable(editable)) {
+        if (isIconEditable(editable) && !getSocialItem(editable)) {
           hoveredItemElRef.current = editable;
           setHoveredItemRect(editable.getBoundingClientRect());
           return;
@@ -16097,7 +16156,7 @@ function OhhwellsBridge() {
       const related = e.relatedTarget instanceof Element ? e.relatedTarget : null;
       if (related?.closest("[data-ohw-drag-handle-container], [data-ohw-item-interaction]")) return;
       if (!isMediaEditable(editable)) {
-        if (isIconEditable(editable) && hoveredItemElRef.current === editable) {
+        if (isIconEditable(editable) && !getSocialItem(editable) && hoveredItemElRef.current === editable) {
           if (!related?.closest("[data-ohw-item-interaction]")) {
             hoveredItemElRef.current = null;
             setHoveredItemRect(null);
@@ -16937,6 +16996,7 @@ function OhhwellsBridge() {
         aiSectionsRef.current = content[AI_SECTIONS_KEY];
         applyAiSectionsToDom(parseAiSectionsState(content[AI_SECTIONS_KEY]));
       }
+      applyBrandChrome(content);
       let sectionsJson = null;
       for (const [key, val] of Object.entries(content)) {
         if (key === "__ohw_sections") {
@@ -16946,6 +17006,7 @@ function OhhwellsBridge() {
         if (key === AI_SECTIONS_KEY) continue;
         if (key === LOGO_PLACEHOLDER_KEY) continue;
         if (LOGO_IMAGE_KEYS.includes(key) && !String(val ?? "").trim()) continue;
+        if (BRAND_CHROME_KEYS.has(key)) continue;
         if (applyVideoSettingNode(key, val)) continue;
         if (applyCarouselNode(key, val)) continue;
         document.querySelectorAll(`[data-ohw-key="${key}"]`).forEach((el) => {
@@ -17768,9 +17829,9 @@ function OhhwellsBridge() {
         return;
       }
       if (target.closest("[data-ohw-item-drag-surface]")) return;
-      const anchor = getNavigationItemAnchor(target);
+      const anchor = getNavigationItemAnchor(target) ?? (document.elementsFromPoint(e.clientX, e.clientY).map((el) => el instanceof HTMLElement ? getNavigationItemAnchor(el) : null).find((found) => found !== null) ?? null);
       const hrefKey = anchor?.getAttribute("data-ohw-href-key") ?? null;
-      if (anchor && isFooterHrefKey(hrefKey)) {
+      if (anchor && (isFooterHrefKey(hrefKey) || getSocialItem(anchor))) {
         footerPointerDragRef.current = {
           el: anchor,
           kind: "link",
@@ -17830,7 +17891,7 @@ function OhhwellsBridge() {
         const column = findFooterColumnForLink(pending.el);
         const columns2 = listFooterColumns();
         beginFooterDragRef.current({
-          kind: "link",
+          kind: getSocialItem(pending.el) ? "social" : "link",
           hrefKey: key,
           columnEl: column,
           sourceColumnIndex: column ? columns2.indexOf(column) : 0,