@ohhwells/bridge 0.1.83 → 0.1.85

package/dist/index.js

@@ -183,6 +183,17 @@ var BRAND_VAR_PREFIX = "--ohw-brand-";
 var BRAND_VAR_NAMES = ["primary", "accent", "light", "dark", "surface", "border", "muted"].map(
   (role) => `${BRAND_VAR_PREFIX}${role}`
 );
+var LEGACY_BRAND_VAR_NAMES = [
+  "primary",
+  "accent",
+  "background",
+  "text",
+  "text-muted",
+  "surface",
+  "border",
+  "on-primary",
+  "navbar-background"
+].map((role) => `--brand-${role}`);
 var FONT_VARS = {
   heading: ["--font-heading", "--font-display", "--brand-font-heading"],
   body: ["--font-body", "--brand-font-body"]
@@ -191,14 +202,29 @@ var BRAND_FONT_LINK_ID = "ohw-brand-fonts";
 function brandColorVars(kit) {
   const { dark, primary, accent, light } = kit.palette;
   const mix = (a, aPct, b) => `color-mix(in srgb, ${a} ${aPct}%, ${b})`;
+  const surface = mix(light, 95, dark);
+  const border = mix(light, 85, dark);
+  const muted = mix(dark, 62, light);
   return {
     [`${BRAND_VAR_PREFIX}primary`]: primary,
     [`${BRAND_VAR_PREFIX}accent`]: accent,
     [`${BRAND_VAR_PREFIX}light`]: light,
     [`${BRAND_VAR_PREFIX}dark`]: dark,
-    [`${BRAND_VAR_PREFIX}surface`]: mix(light, 95, dark),
-    [`${BRAND_VAR_PREFIX}border`]: mix(light, 85, dark),
-    [`${BRAND_VAR_PREFIX}muted`]: mix(dark, 62, light)
+    [`${BRAND_VAR_PREFIX}surface`]: surface,
+    [`${BRAND_VAR_PREFIX}border`]: border,
+    [`${BRAND_VAR_PREFIX}muted`]: muted,
+    // The BrandProvider contract every template actually renders from (see LEGACY_BRAND_VAR_NAMES).
+    "--brand-primary": primary,
+    "--brand-accent": accent,
+    "--brand-background": light,
+    "--brand-text": dark,
+    "--brand-text-muted": muted,
+    "--brand-surface": surface,
+    "--brand-border": border,
+    // Buttons/bands painted in the primary colour assume it's dark/saturated enough to need
+    // light text on top — the same assumption LOGO_IMAGE's light-on-dark navbar mark makes.
+    "--brand-on-primary": light,
+    "--brand-navbar-background": dark
   };
 }
 function parseBrandKit(raw) {
@@ -239,7 +265,7 @@ function loadBrandFonts(families) {
 function applyBrandToDom(kit) {
   const root = document.documentElement;
   if (!kit) {
-    for (const name of BRAND_VAR_NAMES) root.style.removeProperty(name);
+    for (const name of [...BRAND_VAR_NAMES, ...LEGACY_BRAND_VAR_NAMES]) root.style.removeProperty(name);
     for (const name of [...FONT_VARS.heading, ...FONT_VARS.body]) root.style.removeProperty(name);
     document.getElementById(BRAND_FONT_LINK_ID)?.remove();
     return;
@@ -7359,6 +7385,9 @@ function applyFieldType(wrapper, type) {
     el.style.removeProperty("min-height");
     el.style.removeProperty("resize");
     el.removeAttribute("rows");
+    if (el.className) {
+      el.className = el.className.split(/\s+/).filter((token) => !/textarea/i.test(token)).join(" ");
+    }
   };
   const applyDefaults = (el) => {
     el.setAttribute("placeholder", defaults.placeholder);
@@ -11609,7 +11638,7 @@ function applySocialsDisplayToRow(row, display) {
     const icon = item.querySelector(ICON_SELECTOR);
     if (label) label.style.display = display.text ? "" : "none";
     if (icon) icon.style.display = display.icon ? "" : "none";
-    layOutIconAndLabel(item, Boolean(display.text && display.icon));
+    layOutIconAndLabel(item, Boolean(display.text));
   });
   allowRowToWrap(row);
 }
@@ -11621,6 +11650,9 @@ function layOutIconAndLabel(item, on) {
     item.style.gap = "";
     item.style.whiteSpace = "";
     item.style.flex = "";
+    item.style.width = "";
+    item.style.height = "";
+    item.style.padding = "";
     return;
   }
   item.style.display = on ? "inline-flex" : "";
@@ -11628,6 +11660,9 @@ function layOutIconAndLabel(item, on) {
   item.style.gap = on ? "8px" : "";
   item.style.whiteSpace = on ? "nowrap" : "";
   item.style.flex = on ? "0 0 auto" : "";
+  item.style.width = on ? "auto" : "";
+  item.style.height = on ? "auto" : "";
+  item.style.padding = on ? "0 12px" : "";
 }
 function allowRowToWrap(row) {
   const display = row.ownerDocument.defaultView?.getComputedStyle(row).display ?? "";
@@ -12583,6 +12618,15 @@ function resolveLogoDisplayText(text) {
 function isFooterLogoRoot(root) {
   return Boolean(root.closest("footer") || root.closest('[data-ohw-section="footer"]'));
 }
+var NAV_IMAGE_KEYS = ["nav-logo-image", "logo-image"];
+var FOOTER_IMAGE_KEYS = ["footer-logo", "footer-logo-image", "footer-logo-img"];
+function firstNonEmptyContentValue(content, keys) {
+  for (const key of keys) {
+    const value = content[key];
+    if (typeof value === "string" && value.trim()) return value.trim();
+  }
+  return null;
+}
 function imageKeyForRoot(root) {
   return isFooterLogoRoot(root) ? "footer-logo" : "nav-logo-image";
 }
@@ -12632,9 +12676,10 @@ function applyLogoIdentity(text, isPlaceholder) {
   });
   return display;
 }
-function applyLogoImage(url, alt) {
+function applyLogoImage(url, alt, placement) {
   const displayAlt = resolveLogoDisplayText(alt);
   document.querySelectorAll('[data-ohw-role="logo"], [data-ohw-logo]').forEach((root) => {
+    if (placement && (isFooterLogoRoot(root) ? "footer" : "navbar") !== placement) return;
     ensureLogoHrefKey(root);
     const imageKey = imageKeyForRoot(root);
     const textKey = textKeyForRoot(root);
@@ -12755,7 +12800,12 @@ function applyLogoFromContent(content) {
   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) {
+  const navImageUrl = firstNonEmptyContentValue(content, NAV_IMAGE_KEYS);
+  const footerImageUrl = firstNonEmptyContentValue(content, FOOTER_IMAGE_KEYS);
+  if (navImageUrl && footerImageUrl && navImageUrl !== footerImageUrl) {
+    applyLogoImage(navImageUrl, logoAlt, "navbar");
+    applyLogoImage(footerImageUrl, logoAlt, "footer");
+  } else if (logoImageUrl) {
     applyLogoImage(logoImageUrl, logoAlt);
   } else {
     if (imageExplicitlyCleared) applyLogoImage(null, logoAlt);
@@ -15962,6 +16012,7 @@ function StateToggle({
   );
 }
 var contentCache = /* @__PURE__ */ new Map();
+var brandingCache = /* @__PURE__ */ new Map();
 var OHW_LOADER_STYLE = {
   position: "fixed",
   inset: 0,
@@ -15999,6 +16050,89 @@ function OhwLoaderSpinner() {
     )
   ] });
 }
+function OhwBrandMark() {
+  return /* @__PURE__ */ jsxs20(
+    "svg",
+    {
+      width: "16",
+      height: "16",
+      viewBox: "0 0 48 48",
+      fill: "none",
+      "aria-hidden": true,
+      style: { display: "block", flexShrink: 0 },
+      xmlns: "http://www.w3.org/2000/svg",
+      children: [
+        /* @__PURE__ */ jsx33(
+          "mask",
+          {
+            id: "ohw-badge-mark",
+            style: { maskType: "luminance" },
+            maskUnits: "userSpaceOnUse",
+            x: "0",
+            y: "0",
+            width: "48",
+            height: "48",
+            children: /* @__PURE__ */ jsx33("path", { d: "M23.8741 48C37.0594 48 47.7481 37.2548 47.7481 24C47.7481 10.7452 37.0594 0 23.8741 0C10.6888 0 0 10.7452 0 24C0 37.2548 10.6888 48 23.8741 48Z", fill: "white" })
+          }
+        ),
+        /* @__PURE__ */ jsxs20("g", { mask: "url(#ohw-badge-mark)", children: [
+          /* @__PURE__ */ jsx33("path", { d: "M23.8731 48.0497C37.0584 48.0497 47.7472 37.3046 47.7472 24.0497C47.7472 10.7949 37.0584 0.0497208 23.8731 0.0497208C10.6878 0.0497208 -0.000976562 10.7949 -0.000976562 24.0497C-0.000976562 37.3046 10.6878 48.0497 23.8731 48.0497Z", fill: "#0078E5" }),
+          /* @__PURE__ */ jsx33("path", { d: "M17.1307 14.7172C13.1687 14.7172 9.38102 18.1154 8.65114 22.34C8.38885 23.8488 8.5598 25.2581 9.06929 26.4451C6.20005 29.1677 1.77216 27.8721 -1.40212 26.1536C-2.73618 25.4317 -3.92695 27.4745 -2.59037 28.1981C1.33389 30.3226 6.86037 31.6621 10.4402 28.4188C11.4718 29.3859 12.867 29.9621 14.4894 29.9621C18.4161 29.9621 22.2038 26.5318 22.9337 22.34C23.6636 18.1162 21.0566 14.7172 17.1298 14.7172H17.1307ZM19.9798 22.34C19.5281 25.0399 17.2689 27.231 14.9754 27.231C12.6466 27.231 11.1877 25.0399 11.6394 22.34C12.1262 19.6401 14.3151 17.4482 16.6438 17.4482C18.9374 17.4482 20.4667 19.6401 19.9798 22.34Z", fill: "white" }),
+          /* @__PURE__ */ jsx33("path", { d: "M40.0017 27.0262C39.1797 27.081 38.2721 26.995 37.4668 26.7415C37.3344 26.6993 37.28 26.5401 37.3529 26.4205C37.5959 26.0212 37.8255 25.6152 38.009 25.1889C38.1071 24.9918 38.2018 24.793 38.2897 24.5908C38.3274 24.5041 38.4163 24.451 38.5101 24.4619C38.63 24.4754 38.7054 24.4821 38.8881 24.4821L39.1529 24.4796L39.8283 24.4543C45.9229 24.0492 50.4765 20.4319 54.8466 16.9014C56.0172 15.9554 57.6932 17.6208 56.5116 18.5752C51.7687 22.4065 47.1966 26.5081 40.9319 26.9689", fill: "white" }),
+          /* @__PURE__ */ jsx33("path", { d: "M37.9687 24.27C38.4472 23.1319 38.7656 21.9045 38.9609 20.6991C39.5927 16.76 38.5058 14.2193 36.1553 14.2193C34.1835 14.2193 33.1469 17.2427 32.9199 18.8694C32.743 19.9872 32.5914 22.1219 33.6028 23.9524C33.7553 24.259 34.15 24.7712 34.471 25.1259C34.5447 25.2067 34.6746 25.2 34.7349 25.1082C34.9528 24.7788 35.1615 24.4039 35.3584 24.0257C35.5444 23.6677 35.5888 23.6138 35.8587 23.0207C35.8838 22.966 35.8813 22.9002 35.8478 22.8505C35.5888 22.4597 35.2168 21.9787 35.1204 21.4614C34.9184 20.4455 34.9436 19.2257 35.2218 18.1078C35.4413 17.3118 35.7195 16.7844 35.9039 16.5106C35.9466 16.4466 36.0279 16.4129 36.0975 16.4449C36.369 16.5671 36.5827 16.8838 36.7385 17.396C37.0167 18.2089 37.0167 19.3782 36.814 20.6999C36.6991 21.5271 36.4771 22.3729 36.1746 23.1673C36.1293 23.308 36.0757 23.4461 36.0187 23.5826C36.0187 23.5868 36.0187 23.591 36.0187 23.5961C35.9911 23.6946 35.9207 23.8067 35.8846 23.901C35.5536 24.5497 35.2344 25.1697 34.8439 25.7838C34.8388 25.7863 34.8346 25.7914 34.8296 25.7931C34.6528 26.0525 34.4718 26.2901 34.2866 26.4965C34.2774 26.5099 34.2682 26.5234 34.2589 26.5369C34.2405 26.5638 34.2179 26.5815 34.1944 26.595C33.5064 27.3212 32.7665 27.6893 32.0123 27.6893C31.8606 27.6893 31.6838 27.664 31.507 27.4349C31.3042 27.1299 30.85 26.0879 31.2539 22.9112C31.4785 21.3949 31.8011 20.0268 31.931 19.5408C31.9579 19.4413 31.8908 19.3419 31.7886 19.3293L30.0062 19.1162C29.9241 19.1061 29.8478 19.1566 29.8252 19.2366C29.2704 21.1615 27.0305 27.6885 24.9599 27.6885C24.328 27.6885 24.1512 26.6211 24.1001 26.2909C23.775 23.6264 25.528 18.5492 29.5302 16.2267C29.6048 16.1838 29.635 16.0928 29.5998 16.0136L28.9042 14.467C28.8632 14.3752 28.7501 14.3389 28.6638 14.3886C25.8079 16.0414 24.1847 18.5231 23.2915 20.3436C22.2046 22.5793 21.6993 25.0189 21.9515 26.8738C22.1795 28.7794 23.1398 29.872 24.6054 29.872C26.0543 29.872 27.4369 28.9066 28.7098 27.0187C28.7953 26.8915 28.9889 26.9311 29.0149 27.0819C29.2646 28.5283 29.9811 29.872 31.6579 29.872C33.5282 29.872 35.3232 28.7288 36.7134 26.6447C36.7712 26.5874 36.7972 26.5411 36.8181 26.4906C36.8232 26.4931 36.8282 26.4948 36.8332 26.4973C37.01 26.2025 37.181 25.9051 37.3444 25.6027C37.4508 25.4005 37.5572 25.1992 37.6586 24.9945C37.7181 24.874 37.7743 24.7527 37.8262 24.6289C37.838 24.6002 37.8547 24.5665 37.8706 24.5337", fill: "white" }),
+          /* @__PURE__ */ jsx33("path", { d: "M30.5839 31.6397C25.7546 34.8577 19.4773 34.7853 14.6907 31.5243C13.5368 30.7384 12.5044 32.6498 13.6474 33.4281C19.034 37.0985 26.3077 37.096 31.7218 33.488C32.8791 32.7172 31.7478 30.8639 30.5839 31.6397Z", fill: "white" })
+        ] })
+      ]
+    }
+  );
+}
+var OHW_BADGE_STYLE = {
+  position: "fixed",
+  left: 20,
+  bottom: 20,
+  zIndex: 2147483e3,
+  boxSizing: "border-box",
+  display: "inline-flex",
+  alignItems: "center",
+  gap: 0,
+  padding: "6px 8px",
+  margin: 0,
+  background: "#ffffff",
+  border: "1px solid #e7e5e4",
+  borderRadius: 9999,
+  boxShadow: "0 1px 3px rgba(0, 0, 0, 0.1)",
+  color: "#0c0a09",
+  textDecoration: "none",
+  fontFamily: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif"
+};
+var OHW_BADGE_LABEL_STYLE = {
+  padding: "0 4px",
+  fontSize: 14,
+  lineHeight: "24px",
+  fontWeight: 500,
+  fontStyle: "normal",
+  letterSpacing: "normal",
+  textTransform: "none",
+  color: "#0c0a09",
+  whiteSpace: "nowrap"
+};
+function MadeWithOhhWells() {
+  return /* @__PURE__ */ jsxs20(
+    "a",
+    {
+      href: "https://ohhwells.com",
+      target: "_blank",
+      rel: "noopener noreferrer",
+      "aria-label": "Made with OhhWells",
+      "data-ohw-badge": "",
+      style: OHW_BADGE_STYLE,
+      children: [
+        /* @__PURE__ */ jsx33(OhwBrandMark, {}),
+        /* @__PURE__ */ jsx33("span", { style: OHW_BADGE_LABEL_STYLE, children: "Made with OhhWells" })
+      ]
+    }
+  );
+}
 var OHW_LOADER_PREHYDRATE_SCRIPT = `(function(){try{var p=location.hostname.split(".");var fromHost=p.length>=3&&p[0]!=="www"?p[0]:"";var fromQuery=new URLSearchParams(location.search).get("subdomain")||"";if(!fromHost&&!fromQuery)return;var e=document.getElementById("ohw-loader");if(e)e.style.display="flex"}catch(e){}})();`;
 function resolveSubdomain(subdomainFromQuery) {
   if (subdomainFromQuery) return subdomainFromQuery;
@@ -16058,6 +16192,7 @@ function OhhwellsBridge() {
     }
   }, []);
   const [fetchState, setFetchState] = useState13("idle");
+  const [showBranding, setShowBranding] = useState13(false);
   const autoSaveTimers = useRef10(/* @__PURE__ */ new Map());
   const activeElRef = useRef10(null);
   const pointerHeldRef = useRef10(false);
@@ -17833,6 +17968,7 @@ function OhhwellsBridge() {
     };
     const cached = contentCache.get(subdomain);
     if (cached) {
+      setShowBranding(brandingCache.get(subdomain) ?? false);
       applyContent(cached).finally(() => setFetchState("done"));
       return;
     }
@@ -17842,7 +17978,10 @@ function OhhwellsBridge() {
     fetch(`${apiUrl}/api/public/sites/${subdomain}/content`, { cache: "no-store" }).then((r2) => r2.ok ? r2.json() : null).then((data) => {
       if (cancelled) return;
       const content = data?.content ?? {};
+      const branding = Boolean(data?.showBranding);
       contentCache.set(subdomain, content);
+      brandingCache.set(subdomain, branding);
+      setShowBranding(branding);
       return applyContent(content);
     }).catch(() => {
     }).finally(() => {
@@ -18138,6 +18277,8 @@ function OhhwellsBridge() {
     };
     const t1 = setTimeout(measure, 50);
     const t2 = setTimeout(measure, 500);
+    const ro = new ResizeObserver(schedule);
+    ro.observe(document.body);
     let lastWidth = window.innerWidth;
     let resizeTimers = [];
     const clearResizeTimers = () => {
@@ -18155,6 +18296,7 @@ function OhhwellsBridge() {
       clearTimeout(t1);
       clearTimeout(t2);
       if (raf != null) cancelAnimationFrame(raf);
+      ro.disconnect();
       clearResizeTimers();
       window.removeEventListener("resize", handleResize);
     };
@@ -21027,7 +21169,7 @@ function OhhwellsBridge() {
       postToParent2({
         type: "ow:ready",
         version: "1",
-        bridgeVersion: "0.1.82",
+        bridgeVersion: "0.1.84",
         path: pathname,
         nodes: collectEditableNodes(editContentRef.current),
         sections
@@ -21490,6 +21632,7 @@ function OhhwellsBridge() {
   return /* @__PURE__ */ jsxs20(Fragment8, { children: [
     /* @__PURE__ */ jsx33("div", { id: "ohw-loader", suppressHydrationWarning: true, style: { ...OHW_LOADER_STYLE, display: "none" }, children: /* @__PURE__ */ jsx33(OhwLoaderSpinner, {}) }),
     /* @__PURE__ */ jsx33("script", { suppressHydrationWarning: true, dangerouslySetInnerHTML: { __html: OHW_LOADER_PREHYDRATE_SCRIPT } }),
+    subdomain && !isEditMode && showBranding && /* @__PURE__ */ jsx33(MadeWithOhhWells, {}),
     bridgeRoot ? createPortal2(
       /* @__PURE__ */ jsxs20(Fragment8, { children: [
         /* @__PURE__ */ jsx33("div", { ref: attachVisibleViewport, "data-ohw-visible-viewport": "", "aria-hidden": true }),