@ohhwells/bridge 0.1.82 → 0.1.84

package/dist/index.cjs

@@ -256,6 +256,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"]
@@ -264,14 +275,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) {
@@ -312,7 +338,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;
@@ -409,7 +435,9 @@ var NODE_WROTE_ATTR = "data-ohw-style-node";
 var NODE_PROPS = ["color", "font-family", "font-size", "background"];
 function saveInline(el, prop) {
   const attr = `data-ohw-style-prev-${prop}`;
-  if (!el.hasAttribute(attr)) el.setAttribute(attr, el.style.getPropertyValue(prop));
+  if (el.hasAttribute(attr)) return;
+  const value = el.style.getPropertyValue(prop) || (prop === "background" ? el.style.getPropertyValue("background-color") : "");
+  el.setAttribute(attr, value);
 }
 function restoreInline(el, prop) {
   const attr = `data-ohw-style-prev-${prop}`;
@@ -460,7 +488,8 @@ function applyStylesToDom(store) {
     const sections = document.querySelectorAll(
       `[data-ohw-section="${CSS.escape(sectionId)}"]`
     );
-    for (const section of Array.from(sections)) {
+    for (const marker of Array.from(sections)) {
+      const section = marker.querySelector(":scope > [data-ai-section]") ?? marker;
       for (const [prop, attr] of Object.entries(SECTION_ATTRS)) {
         const value = override[prop];
         if (value === void 0) continue;
@@ -7429,6 +7458,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);
@@ -11679,7 +11711,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);
 }
@@ -11691,6 +11723,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" : "";
@@ -11698,6 +11733,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 ?? "";
@@ -12653,6 +12691,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";
 }
@@ -12702,9 +12749,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);
@@ -12825,7 +12873,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);
@@ -18202,6 +18255,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 = () => {
@@ -18219,6 +18274,7 @@ function OhhwellsBridge() {
       clearTimeout(t1);
       clearTimeout(t2);
       if (raf != null) cancelAnimationFrame(raf);
+      ro.disconnect();
       clearResizeTimers();
       window.removeEventListener("resize", handleResize);
     };
@@ -21091,7 +21147,7 @@ function OhhwellsBridge() {
       postToParent2({
         type: "ow:ready",
         version: "1",
-        bridgeVersion: "0.1.81",
+        bridgeVersion: "0.1.83",
         path: pathname,
         nodes: collectEditableNodes(editContentRef.current),
         sections