@ohhwells/bridge 0.1.143 → 0.1.145

package/dist/index.cjs

@@ -1522,6 +1522,52 @@ function assignmentFor(el, content, tokens) {
 function labelElement(el) {
   return el.querySelector('[data-ohw-editable="text"], [data-ohw-editable="plain"]') ?? (el.matches('[data-ohw-editable="text"], [data-ohw-editable="plain"]') ? el : null);
 }
+var BRAND_TRACK_PRECEDENCE = {
+  background: ["primary", "accent", "background", "surface", "on-primary", "text", "border", "text-muted"],
+  color: ["on-primary", "text", "primary", "accent", "text-muted", "background", "surface", "border"],
+  borderColor: ["border", "primary", "accent", "text", "on-primary", "background", "surface", "text-muted"]
+};
+var FONT_TRACK_VARS = ["--font-body", "--font-heading", "--font-display", "--brand-font-body", "--brand-font-heading"];
+function readRootVar(doc, name) {
+  const root = doc.documentElement;
+  return root.style.getPropertyValue(name).trim() || getComputedStyle(root).getPropertyValue(name).trim();
+}
+function sameColor(a, b) {
+  return Math.round(a.r) === Math.round(b.r) && Math.round(a.g) === Math.round(b.g) && Math.round(a.b) === Math.round(b.b) && Math.abs(a.a - b.a) < 0.02;
+}
+function brandTrackedColor(doc, color, roles) {
+  if (!color || color.includes("var(")) return color;
+  const parsed = parseColor(color);
+  if (!parsed || isTransparent(parsed)) return color;
+  for (const role of roles) {
+    const name = `--brand-${role}`;
+    const token = parseColor(readRootVar(doc, name));
+    if (token && !isTransparent(token) && sameColor(parsed, token)) return `var(${name}, ${color})`;
+  }
+  return color;
+}
+function brandTrackedChrome(doc, chrome) {
+  return {
+    ...chrome,
+    background: brandTrackedColor(doc, chrome.background, BRAND_TRACK_PRECEDENCE.background),
+    color: brandTrackedColor(doc, chrome.color, BRAND_TRACK_PRECEDENCE.color),
+    borderColor: brandTrackedColor(doc, chrome.borderColor, BRAND_TRACK_PRECEDENCE.borderColor)
+  };
+}
+function firstFamily(stack) {
+  const first = stack.split(",")[0]?.trim() ?? "";
+  return first.replace(/^['"]|['"]$/g, "").toLowerCase();
+}
+function brandTrackedFontFamily(doc, stack) {
+  if (!stack || stack.includes("var(")) return stack;
+  const family = firstFamily(stack);
+  if (!family) return stack;
+  for (const name of FONT_TRACK_VARS) {
+    const raw = readRootVar(doc, name);
+    if (raw && firstFamily(raw) === family) return `var(${name}, ${stack})`;
+  }
+  return stack;
+}
 var paintLockByEl = /* @__PURE__ */ new WeakMap();
 var paintObserverByEl = /* @__PURE__ */ new WeakMap();
 var paintingButton = false;
@@ -1548,7 +1594,7 @@ function paintButtonChrome(el, assignment, tokens) {
   el.style.borderRadius = px(origin.size.borderRadius);
   el.style.gap = geometry.gap;
   el.style.height = px(geometry.height);
-  el.style.fontFamily = typography.fontFamily;
+  el.style.fontFamily = brandTrackedFontFamily(el.ownerDocument, typography.fontFamily);
   el.style.fontWeight = typography.fontWeight;
   el.style.letterSpacing = typography.letterSpacing;
   el.style.textTransform = typography.textTransform;
@@ -1577,9 +1623,18 @@ function paintedTokensOf(el) {
   return paintLockByEl.get(el)?.tokens ?? null;
 }
 function applyButtonStyle(el, assignment, tokens) {
-  paintLockByEl.set(el, { assignment, tokens });
+  const doc = el.ownerDocument;
+  const tracked = {
+    ...tokens,
+    variants: {
+      primary: brandTrackedChrome(doc, tokens.variants.primary),
+      secondary: brandTrackedChrome(doc, tokens.variants.secondary),
+      ghost: brandTrackedChrome(doc, tokens.variants.ghost)
+    }
+  };
+  paintLockByEl.set(el, { assignment, tokens: tracked });
   paintingButton = true;
-  paintButtonChrome(el, assignment, tokens);
+  paintButtonChrome(el, assignment, tracked);
   paintingButton = false;
   guardTemplateHover(el);
 }
@@ -2479,6 +2534,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");
@@ -7060,8 +7158,8 @@ function applyBrandToDom(kit) {
   if (kit.fonts) {
     appliedFonts = applyFonts ? kit.fonts : null;
   }
+  for (const name of BUTTON_VAR_NAMES) root.style.removeProperty(name);
   if (kit.buttons) {
-    for (const name of BUTTON_VAR_NAMES) root.style.removeProperty(name);
     for (const [name, value] of Object.entries(buttonStyleVars({ ...kit, buttons: kit.buttons }))) root.style.setProperty(name, value);
   }
   syncButtonRules(kit.buttons ? kit : null);
@@ -10462,7 +10560,7 @@ function isChromeSection2(el) {
   if (CHROME_SECTION_IDS.has(el.getAttribute("data-ohw-section") ?? "")) return true;
   return el.tagName === "HEADER" || el.tagName === "FOOTER";
 }
-function readRootVar(name) {
+function readRootVar2(name) {
   if (typeof document === "undefined") return "";
   return getComputedStyle(document.documentElement).getPropertyValue(name).trim();
 }
@@ -10502,14 +10600,14 @@ function humanizeFontFamily(name) {
   return name.replace(/^__/, "").replace(/_[0-9a-f]{6}$/i, "").replace(/_/g, " ").replace(/([a-z0-9])([A-Z])/g, "$1 $2").trim().replace(/\s+/g, " ").replace(/(^|\s)([a-z])/g, (_, sep, c) => sep + c.toUpperCase());
 }
 function readFontVar(name) {
-  return humanizeFontFamily(primaryFontFamily(readRootVar(name)));
+  return humanizeFontFamily(primaryFontFamily(readRootVar2(name)));
 }
 function deriveBrandOverride() {
-  const dark = readRootVar("--ohw-brand-dark");
-  const primary = readRootVar("--ohw-brand-primary");
-  const light = readRootVar("--ohw-brand-light");
+  const dark = readRootVar2("--ohw-brand-dark");
+  const primary = readRootVar2("--ohw-brand-primary");
+  const light = readRootVar2("--ohw-brand-light");
   if (!dark || !primary || !light) return null;
-  const accent = readRootVar("--ohw-brand-accent");
+  const accent = readRootVar2("--ohw-brand-accent");
   const heading = readFontVar("--font-heading") || readFontVar("--font-display");
   const body = readFontVar("--font-body");
   return {
@@ -10521,11 +10619,11 @@ function deriveBrandOverride() {
   };
 }
 function deriveTemplateBrandLive() {
-  const primary = readRootVar("--brand-primary") || readRootVar("--color-primary");
-  const dark = readRootVar("--brand-text") || readRootVar("--color-dark");
-  const light = readRootVar("--brand-background") || readRootVar("--color-light");
+  const primary = readRootVar2("--brand-primary") || readRootVar2("--color-primary");
+  const dark = readRootVar2("--brand-text") || readRootVar2("--color-dark");
+  const light = readRootVar2("--brand-background") || readRootVar2("--color-light");
   if (!dark || !primary || !light) return null;
-  const accent = readRootVar("--brand-accent") || readRootVar("--color-accent");
+  const accent = readRootVar2("--brand-accent") || readRootVar2("--color-accent");
   const heading = readFontVar("--brand-font-heading") || readFontVar("--font-heading") || readFontVar("--font-display");
   const body = readFontVar("--brand-font-body") || readFontVar("--font-body");
   return {
@@ -25120,36 +25218,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 ?? "",
@@ -25803,6 +25937,7 @@ function OhhwellsBridge() {
     selectedElRef.current = null;
     selectedHrefKeyRef.current = null;
     selectedFooterColAttrRef.current = null;
+    clearSocialSelectionRef.current();
     setSelectedIsCta(false);
     setSelectedIsSocial(false);
     setSelectedIsSocialsRow(false);
@@ -26704,7 +26839,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;
@@ -27842,8 +27992,11 @@ function OhhwellsBridge() {
         display: none !important;
       }
       /* Body text (no item-action toolbar) \u2014 first click enters text edit \u2192 I-beam.
-         Exclude select-first nav/footer labels so grab/default on [data-ohw-href-key] can win. */
-      [data-ohw-editable]:not([contenteditable]):not([data-ohw-editable="image"]):not([data-ohw-editable="bg-image"]):not([data-ohw-editable="video"]):not([data-ohw-editable="link"]):not(:is([data-ohw-href-key] *)) {
+         Exclude select-first nav/footer labels so grab/default on [data-ohw-href-key] can win.
+         Icons are excluded too: a glyph is replaced by a click, never typed into (OHH-623),
+         so it takes the picker's pointer below, not an I-beam \u2014 this blanket !important used
+         to beat the stylesheet's own non-!important icon rule (OHH-718). */
+      [data-ohw-editable]:not([contenteditable]):not([data-ohw-editable="image"]):not([data-ohw-editable="bg-image"]):not([data-ohw-editable="video"]):not([data-ohw-editable="link"]):not([data-ohw-editable="icon"]):not(:is([data-ohw-href-key] *)) {
         cursor: text !important;
       }
       /* Select-first items: default arrow; grab only when drag-start is allowed (data-ohw-can-drag). */
@@ -27864,6 +28017,7 @@ function OhhwellsBridge() {
       [data-ohw-editable="video"], [data-ohw-editable="video"] *,
       [data-ohw-editable="bg-image"], [data-ohw-editable="bg-image"] * { cursor: pointer !important; }
       [data-ohw-editable="link"], [data-ohw-editable="link"] * { cursor: pointer !important; }
+      [data-ohw-editable="icon"], [data-ohw-editable="icon"] * { cursor: pointer !important; }
       /* A text/plain editable nested inside a media editable (e.g. a placeholder's fallback
          label inside its bg-image box) is its own click target, not the media picker \u2014 the
          blanket media cursor rule above would otherwise show pointer where a click actually
@@ -28015,6 +28169,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) {
@@ -28192,7 +28349,7 @@ function OhhwellsBridge() {
         if (isIconEditable(editable) && !getSocialItem(editable)) {
           e.preventDefault();
           e.stopPropagation();
-          aiSectionApiRef.current?.selectFromElement(editable);
+          selectIconElementRef.current(editable);
           const aiIcon = editable.hasAttribute("data-ai-icon");
           const featureIcon = aiIcon && /\.features\.\d+\.icon$/.test(editable.dataset.ohwKey ?? "");
           postToParentRef.current({
@@ -29816,6 +29973,7 @@ function OhhwellsBridge() {
       deactivateRef.current();
       deselectRef.current();
       clearMediaSelectionRef.current();
+      clearIconSelectionRef.current();
     };
     clearInteractionChromeRef.current = clearInteractionChrome;
     const applyTreeToLocalState = (payload) => {
@@ -30233,6 +30391,7 @@ function OhhwellsBridge() {
       deselectRef.current();
       deactivateRef.current();
       clearMediaSelectionRef.current();
+      clearIconSelectionRef.current();
     };
     window.addEventListener("message", handleDeactivate);
     const handleToastAction = (e) => {
@@ -30322,6 +30481,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);
@@ -31343,7 +31506,7 @@ function OhhwellsBridge() {
       postToParent2({
         type: "ow:ready",
         version: "1",
-        bridgeVersion: "0.1.142",
+        bridgeVersion: "0.1.144",
         path: pathname,
         nodes: collectEditableNodes(editContentRef.current),
         sections