@ohhwells/bridge 0.1.139-next.383 → 0.1.139-next.386

package/dist/index.cjs

@@ -2479,6 +2479,49 @@ function socialHrefKey(item) {
 function socialIconKey(item) {
   return item.querySelector(ICON_SELECTOR)?.dataset.ohwKey ?? null;
 }
+var SOCIAL_PLATFORM_LABELS = {
+  instagram: "Instagram",
+  facebook: "Facebook",
+  x: "X",
+  twitter: "X",
+  tiktok: "TikTok",
+  youtube: "YouTube",
+  linkedin: "LinkedIn",
+  pinterest: "Pinterest",
+  whatsapp: "WhatsApp",
+  telegram: "Telegram",
+  spotify: "Spotify",
+  threads: "Threads",
+  vimeo: "Vimeo",
+  discord: "Discord",
+  medium: "Medium",
+  website: "Website"
+};
+function socialPlatformLabel(item, content) {
+  const iconKey = socialIconKey(item);
+  const chosen = iconKey ? (content[socialPlatformKey(iconKey)] ?? "").trim().toLowerCase() : "";
+  if (chosen) return SOCIAL_PLATFORM_LABELS[chosen] ?? chosen.charAt(0).toUpperCase() + chosen.slice(1);
+  const label = socialLabelElement(item);
+  const words = label && !label.hasAttribute(SOCIALS_EMPTY_LABEL_ATTR) ? (label.textContent ?? "").replace(/\s+/g, " ").trim() : "";
+  if (words) return words;
+  const link = item.matches("a") ? item : item.querySelector("a");
+  const aria = (link?.getAttribute("aria-label") ?? item.getAttribute("aria-label") ?? "").trim();
+  if (aria) return aria;
+  const href = (link?.getAttribute("href") ?? "").trim();
+  if (/^https?:\/\//i.test(href)) {
+    let host = "";
+    try {
+      host = new URL(href).hostname.replace(/^www\./i, "").toLowerCase();
+    } catch {
+      host = "";
+    }
+    if (host.includes("x.com") || host.includes("twitter.com")) return "X";
+    for (const [id, name] of Object.entries(SOCIAL_PLATFORM_LABELS)) {
+      if (host.includes(id)) return name;
+    }
+  }
+  return "Social";
+}
 var SOCIALS_ORDER_KEY = "__ohw_socials_order";
 function fromMarkup(markup) {
   const holder = document.createElement("div");
@@ -6558,6 +6601,13 @@ function applyIconNameToTree(tree, path, icon) {
   if (feature) {
     return setPricingCardFeatureIcon(tree, Number(feature[1]), Number(feature[2]), icon);
   }
+  return rewriteIconSlot(tree, path, `lucide:${icon}`);
+}
+function applyIconUploadToTree(tree, path, mediaRef) {
+  if (FEATURE_ICON_PATH.test(path)) return null;
+  return rewriteIconSlot(tree, path, `icon:${mediaRef}`);
+}
+function rewriteIconSlot(tree, path, ref) {
   const segments = path.split(".");
   const slot = segments.pop();
   if (!slot || NODE_SEGMENT.test(slot)) return null;
@@ -6565,8 +6615,8 @@ function applyIconNameToTree(tree, path, icon) {
   const node = nodeAtPath(next, segments);
   if (!node) return null;
   const current = node.slots?.[slot];
-  if (typeof current !== "string" || !/^(lucide|simple):/.test(current)) return null;
-  node.slots = { ...node.slots, [slot]: `lucide:${icon}` };
+  if (typeof current !== "string" || !/^(lucide|simple|icon):/.test(current)) return null;
+  node.slots = { ...node.slots, [slot]: ref };
   return next;
 }
 
@@ -7953,7 +8003,7 @@ function MediaBox({
   onError
 }) {
   const url = refValue ? ctx.resolveMedia(refValue) : null;
-  const isIcon = /^(lucide|simple):/.test(refValue);
+  const isIcon = /^(lucide|simple|icon):/.test(refValue);
   const aspectRatio = aspect && /^\d+:\d+$/.test(aspect) ? aspect.replace(":", " / ") : void 0;
   const editAttrs = ctx.keyFor && editPath && !isIcon ? {
     "data-ohw-key": ctx.keyFor(editPath),
@@ -7961,6 +8011,7 @@ function MediaBox({
   } : {};
   if (isIcon) {
     const Icon = refValue.startsWith("lucide:") ? lucideByName(refValue.slice(7)) : null;
+    const uploadedIconUrl = refValue.startsWith("icon:") ? ctx.resolveMedia(refValue.slice(5)) : null;
     const iconEditAttrs = ctx.keyFor && editPath && genericImageEdit ? { "data-ohw-key": ctx.keyFor(editPath), "data-ohw-editable": "icon" } : {};
     return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
       "span",
@@ -7975,7 +8026,7 @@ function MediaBox({
           justifyContent: "center",
           color: ctx.brand.palette.dark
         },
-        children: Icon ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Icon, { size: 48, color: ctx.brand.palette.dark, strokeWidth: 1.5 }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { fontSize: 24 }, children: "\u25C6" })
+        children: uploadedIconUrl ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("img", { src: uploadedIconUrl, alt: "", style: { width: 48, height: 48, objectFit: "contain" } }) : Icon ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Icon, { size: 48, color: ctx.brand.palette.dark, strokeWidth: 1.5 }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { fontSize: 24 }, children: "\u25C6" })
       }
     );
   }
@@ -25164,36 +25215,72 @@ function OhhwellsBridge() {
   const [selectedMedia, setSelectedMedia] = (0, import_react21.useState)(null);
   const selectedMediaElRef = (0, import_react21.useRef)(null);
   const mediaKeyDropTokenRef = (0, import_react21.useRef)(0);
+  const selectedIconElRef = (0, import_react21.useRef)(null);
+  const selectedSocialElRef = (0, import_react21.useRef)(null);
+  const queueSectionKeyDrop = (0, import_react21.useCallback)((prev) => {
+    const sectionEl = prev?.closest("[data-ohw-section]") ?? null;
+    if (!sectionEl) return;
+    const sectionInstanceId = instanceIdOf(movableUnit(sectionEl)) || null;
+    if (!sectionInstanceId) return;
+    const token = ++mediaKeyDropTokenRef.current;
+    const onQueueDrained = (e) => {
+      if (e.source !== window || e.data?.type !== "ow:media-key-drop" || e.data.token !== token) return;
+      window.removeEventListener("message", onQueueDrained);
+      if (aiSectionApiRef.current?.getSelectedId() !== sectionInstanceId) return;
+      if (selectedMediaElRef.current || selectedIconElRef.current || selectedSocialElRef.current) return;
+      postToParentRef.current({
+        type: "ow:section-selected",
+        sectionId: sectionEl.dataset.ohwSection ?? null,
+        sectionLabel: sectionEl.dataset.ohwSectionLabel ?? titleCaseSectionId(sectionEl.dataset.ohwSection ?? ""),
+        key: null
+      });
+    };
+    window.addEventListener("message", onQueueDrained);
+    window.postMessage({ type: "ow:media-key-drop", token }, "*");
+  }, []);
   const clearMediaSelection = (0, import_react21.useCallback)(() => {
     const prev = selectedMediaElRef.current;
     selectedMediaElRef.current = null;
     setSelectedMedia(null);
-    const sectionEl = prev?.closest("[data-ohw-section]") ?? null;
-    if (sectionEl) {
-      const sectionInstanceId = instanceIdOf(movableUnit(sectionEl)) || null;
-      if (!sectionInstanceId) return;
-      const token = ++mediaKeyDropTokenRef.current;
-      const onQueueDrained = (e) => {
-        if (e.source !== window || e.data?.type !== "ow:media-key-drop" || e.data.token !== token) return;
-        window.removeEventListener("message", onQueueDrained);
-        if (aiSectionApiRef.current?.getSelectedId() !== sectionInstanceId) return;
-        if (selectedMediaElRef.current) return;
-        postToParentRef.current({
-          type: "ow:section-selected",
-          sectionId: sectionEl.dataset.ohwSection ?? null,
-          sectionLabel: sectionEl.dataset.ohwSectionLabel ?? titleCaseSectionId(sectionEl.dataset.ohwSection ?? ""),
-          key: null
-        });
-      };
-      window.addEventListener("message", onQueueDrained);
-      window.postMessage({ type: "ow:media-key-drop", token }, "*");
-    }
-  }, []);
+    queueSectionKeyDrop(prev);
+  }, [queueSectionKeyDrop]);
   const clearMediaSelectionRef = (0, import_react21.useRef)(clearMediaSelection);
   clearMediaSelectionRef.current = clearMediaSelection;
+  const clearIconSelection = (0, import_react21.useCallback)(() => {
+    const prev = selectedIconElRef.current;
+    if (!prev) return;
+    selectedIconElRef.current = null;
+    queueSectionKeyDrop(prev);
+  }, [queueSectionKeyDrop]);
+  const clearIconSelectionRef = (0, import_react21.useRef)(clearIconSelection);
+  clearIconSelectionRef.current = clearIconSelection;
+  const clearSocialSelection = (0, import_react21.useCallback)(() => {
+    const prev = selectedSocialElRef.current;
+    if (!prev) return;
+    selectedSocialElRef.current = null;
+    queueSectionKeyDrop(prev);
+  }, [queueSectionKeyDrop]);
+  const clearSocialSelectionRef = (0, import_react21.useRef)(clearSocialSelection);
+  clearSocialSelectionRef.current = clearSocialSelection;
+  const selectIconElement = (0, import_react21.useCallback)((el) => {
+    if (selectedMediaElRef.current) clearMediaSelectionRef.current();
+    selectedIconElRef.current = el;
+    const sectionEl = el.closest("[data-ohw-section]");
+    aiSectionApiRef.current?.selectFromElement(el, { report: false });
+    postToParentRef.current({
+      type: "ow:section-selected",
+      sectionId: sectionEl?.dataset.ohwSection ?? null,
+      sectionLabel: sectionEl ? sectionEl.dataset.ohwSectionLabel ?? titleCaseSectionId(sectionEl.dataset.ohwSection ?? "") : null,
+      key: el.dataset.ohwKey ?? null,
+      keyLabel: "Icon"
+    });
+  }, []);
+  const selectIconElementRef = (0, import_react21.useRef)(selectIconElement);
+  selectIconElementRef.current = selectIconElement;
   const selectMediaElement = (0, import_react21.useCallback)((el) => {
     const r2 = el.getBoundingClientRect();
     const video = el.dataset.ohwEditable === "video" ? el.querySelector("video") : null;
+    selectedIconElRef.current = null;
     selectedMediaElRef.current = el;
     setSelectedMedia({
       key: el.dataset.ohwKey ?? "",
@@ -25858,6 +25945,7 @@ function OhhwellsBridge() {
     selectedElRef.current = null;
     selectedHrefKeyRef.current = null;
     selectedFooterColAttrRef.current = null;
+    clearSocialSelectionRef.current();
     setSelectedIsCta(false);
     setSelectedIsSocial(false);
     setSelectedIsSocialsRow(false);
@@ -26759,7 +26847,22 @@ function OhhwellsBridge() {
   const select = (0, import_react21.useCallback)((anchor) => {
     if (!isNavigationItem2(anchor)) return;
     if (activeElRef.current) deactivate();
-    aiSectionApiRef.current?.selectFromElement(anchor);
+    clearSocialSelectionRef.current();
+    const socialItem = getSocialItem(anchor);
+    if (socialItem) {
+      selectedSocialElRef.current = socialItem;
+      const sectionEl = socialItem.closest("[data-ohw-section]");
+      aiSectionApiRef.current?.selectFromElement(anchor, { report: false });
+      postToParentRef.current({
+        type: "ow:section-selected",
+        sectionId: sectionEl?.dataset.ohwSection ?? null,
+        sectionLabel: sectionEl ? sectionEl.dataset.ohwSectionLabel ?? titleCaseSectionId(sectionEl.dataset.ohwSection ?? "") : null,
+        key: socialIconKey(socialItem) ?? socialItem.getAttribute("data-ohw-href-key"),
+        keyLabel: socialPlatformLabel(socialItem, editContentRef.current)
+      });
+    } else {
+      aiSectionApiRef.current?.selectFromElement(anchor);
+    }
     selectedElRef.current = anchor;
     selectedHrefKeyRef.current = anchor.getAttribute("data-ohw-href-key");
     selectedFooterColAttrRef.current = null;
@@ -28068,6 +28171,9 @@ function OhhwellsBridge() {
       if (selectedMediaElRef.current && !selectedMediaElRef.current.contains(target) && !target.closest("[data-ohw-media-overlay], [data-ohw-edit-chrome], [data-ohw-item-interaction]")) {
         clearMediaSelectionRef.current();
       }
+      if (selectedIconElRef.current && !selectedIconElRef.current.contains(target)) {
+        clearIconSelectionRef.current();
+      }
       if (selectedMediaElRef.current && target.closest("[data-ohw-media-overlay]") && !findClosestButtonLike(target)) {
         const hit = findImageAtPoint(e.clientX, e.clientY, false);
         if (hit && hit !== selectedMediaElRef.current) {
@@ -28238,9 +28344,13 @@ function OhhwellsBridge() {
         if (isIconEditable(editable) && !getSocialItem(editable)) {
           e.preventDefault();
           e.stopPropagation();
-          aiSectionApiRef.current?.selectFromElement(editable);
           const aiIcon = editable.hasAttribute("data-ai-icon");
           const featureIcon = aiIcon && /\.features\.\d+\.icon$/.test(editable.dataset.ohwKey ?? "");
+          if (aiIcon) {
+            aiSectionApiRef.current?.selectFromElement(editable);
+          } else {
+            selectIconElementRef.current(editable);
+          }
           postToParentRef.current({
             type: "ow:icon-pick",
             key: editable.dataset.ohwKey ?? "",
@@ -29519,12 +29629,16 @@ function OhhwellsBridge() {
     };
     const handleIconName = (e) => {
       if (e.data?.type !== "ow:icon-name") return;
-      const { key, icon } = e.data;
-      if (!key || typeof icon !== "string" || !/^[a-z0-9-]+$/.test(icon)) return;
+      const { key, icon, url } = e.data;
+      const isName = typeof icon === "string" && /^[a-z0-9-]+$/.test(icon);
+      const isUpload = !isName && typeof url === "string" && /^https?:\/\/\S+$/i.test(url);
+      if (!key || !isName && !isUpload) return;
       const state = parseAiSectionsState(aiSectionsRef.current);
       const entry = state.sections.find((s) => key.startsWith(aiSlotKeyPrefixFor(s.id)));
       if (!entry) return;
-      const nextTree = applyIconNameToTree(entry.tree, key.slice(aiSlotKeyPrefixFor(entry.id).length), icon);
+      const path = key.slice(aiSlotKeyPrefixFor(entry.id).length);
+      const uploadRef = isUpload ? `icon-${Date.now().toString(36)}${Math.random().toString(36).slice(2, 8)}` : null;
+      const nextTree = uploadRef ? applyIconUploadToTree(entry.tree, path, uploadRef) : applyIconNameToTree(entry.tree, path, icon);
       if (!nextTree) return;
       void requestValidateTree5(postToParentRef.current, nextTree).then(({ ok }) => {
         if (!ok) return;
@@ -29534,7 +29648,7 @@ function OhhwellsBridge() {
           targetSectionId: entry.id,
           tree: nextTree,
           label: entry.label,
-          media: entry.media,
+          media: uploadRef ? { ...entry.media, [uploadRef]: url } : entry.media,
           ...entry.brand ? { brand: entry.brand } : {},
           // The user is looking at the icon they just changed — no need to recenter on it.
           skipScrollIntoView: true
@@ -29874,6 +29988,7 @@ function OhhwellsBridge() {
       deactivateRef.current();
       deselectRef.current();
       clearMediaSelectionRef.current();
+      clearIconSelectionRef.current();
     };
     clearInteractionChromeRef.current = clearInteractionChrome;
     const applyTreeToLocalState = (payload) => {
@@ -30297,6 +30412,7 @@ function OhhwellsBridge() {
       deselectRef.current();
       deactivateRef.current();
       clearMediaSelectionRef.current();
+      clearIconSelectionRef.current();
     };
     window.addEventListener("message", handleDeactivate);
     const handleToastAction = (e) => {
@@ -30386,6 +30502,10 @@ function OhhwellsBridge() {
         clearMediaSelectionRef.current();
         return;
       }
+      if (e.key === "Escape" && selectedIconElRef.current) {
+        clearIconSelectionRef.current();
+        return;
+      }
       if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === "a" && activeElRef.current) {
         e.preventDefault();
         selectAllTextInEditable(activeElRef.current);