@ohhwells/bridge 0.1.139-next.373 → 0.1.139-next.374

package/dist/index.cjs

@@ -2919,14 +2919,22 @@ function isInactiveFooterChrome(el) {
   if (footer && footer.style.display === "none") return true;
   return false;
 }
+function isIncidentalFooter(el) {
+  return Boolean(el.closest("blockquote, article, figure"));
+}
 function getFooterRoot() {
   const ai = document.querySelector("footer[data-ai-footer]");
   if (ai) return ai;
   for (const el of Array.from(
-    document.querySelectorAll('footer[data-ohw-section="footer"], footer')
+    document.querySelectorAll('footer[data-ohw-section="footer"]')
   )) {
+    if (isInactiveFooterChrome(el)) continue;
+    return el;
+  }
+  for (const el of Array.from(document.querySelectorAll("footer"))) {
     if (el.hasAttribute("data-ai-footer")) continue;
     if (isInactiveFooterChrome(el)) continue;
+    if (isIncidentalFooter(el)) continue;
     return el;
   }
   return null;
@@ -3337,8 +3345,8 @@ function buildFooterLink(colIndex, itemIndex, href, label, template) {
   return anchor;
 }
 function footerColumnExistsInDom(colIndex) {
-  const root = getFooterRoot() ?? document;
-  return root.querySelector(`[data-ohw-footer-col="${colIndex}"]`) !== null || root.querySelector(`[data-ohw-href-key^="footer-${colIndex}-"]`) !== null || root.querySelector(`[data-ohw-key="footer-${colIndex}-heading"]`) !== null;
+  const scope = getFooterLinksContainer() ?? getFooterRoot() ?? document;
+  return scope.querySelector(`[data-ohw-footer-col="${colIndex}"]`) !== null || scope.querySelector(`[data-ohw-href-key^="footer-${colIndex}-"]`) !== null || scope.querySelector(`[data-ohw-key="footer-${colIndex}-heading"]`) !== null;
 }
 function getFooterLinkTemplate() {
   for (const col of listFooterColumns()) {
@@ -6355,6 +6363,20 @@ function applyBrandChrome(content) {
 
 // src/lib/brand-kit.ts
 var BRAND_KIT_KEY = "__ohw_brand";
+var appliedPalette = null;
+var appliedFonts = null;
+function getAppliedBrand() {
+  if (!appliedPalette) return null;
+  return appliedFonts ? { palette: appliedPalette, fonts: appliedFonts } : { palette: appliedPalette };
+}
+function brandForGenerated(fallback) {
+  const applied = getAppliedBrand();
+  if (!applied) return fallback ?? void 0;
+  return {
+    palette: applied.palette,
+    fonts: applied.fonts ?? fallback?.fonts ?? AI_DEFAULT_BRAND.fonts
+  };
+}
 var BRAND_VAR_PREFIX = "--ohw-brand-";
 var BRAND_VAR_NAMES = ["primary", "accent", "light", "dark", "surface", "border", "muted"].map(
   (role) => `${BRAND_VAR_PREFIX}${role}`
@@ -6658,6 +6680,8 @@ function loadCustomFonts(fonts) {
 function applyBrandToDom(kit) {
   const root = document.documentElement;
   if (!kit) {
+    appliedPalette = null;
+    appliedFonts = null;
     for (const name of [...BRAND_VAR_NAMES, ...LEGACY_BRAND_VAR_NAMES, ...BUTTON_VAR_NAMES]) {
       root.style.removeProperty(name);
     }
@@ -6671,11 +6695,16 @@ function applyBrandToDom(kit) {
   const applyFonts = kit.touched ? kit.touched.fonts === true : true;
   if (kit.palette) {
     if (applyPalette) {
+      appliedPalette = kit.palette;
       for (const [name, value] of Object.entries(brandColorVars(kit.palette))) root.style.setProperty(name, value);
     } else {
+      appliedPalette = null;
       for (const name of [...BRAND_VAR_NAMES, ...LEGACY_BRAND_VAR_NAMES]) root.style.removeProperty(name);
     }
   }
+  if (kit.fonts) {
+    appliedFonts = applyFonts ? kit.fonts : null;
+  }
   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);
@@ -7208,6 +7237,35 @@ function withThemeFonts(brand) {
     }
   };
 }
+function liveBrandColor(role, fallback) {
+  if (role === "dark") {
+    return `var(--brand-text, var(--ohw-brand-dark, var(--color-dark, ${fallback})))`;
+  }
+  if (role === "light") {
+    return `var(--brand-background, var(--ohw-brand-light, var(--color-light, ${fallback})))`;
+  }
+  return `var(--brand-${role}, var(--ohw-brand-${role}, var(--color-${role}, ${fallback})))`;
+}
+function withLivePalette(brand, source) {
+  const sourceOf = (color) => {
+    const value = color.trim().toLowerCase();
+    const entries = Object.entries(source.palette);
+    return entries.find(([, hex]) => hex.trim().toLowerCase() === value)?.[0] ?? null;
+  };
+  const map = (color) => {
+    const role = sourceOf(color);
+    return role ? liveBrandColor(role, source.palette[role]) : color;
+  };
+  return {
+    ...brand,
+    palette: {
+      dark: map(brand.palette.dark),
+      primary: map(brand.palette.primary),
+      accent: map(brand.palette.accent),
+      light: map(brand.palette.light)
+    }
+  };
+}
 function footerLogoStyle(fallbackFont, fallbackColor) {
   return {
     fontFamily: `var(--brand-font-heading, var(--font-heading, var(--font-display, ${quotedFont(fallbackFont)})))`,
@@ -7427,7 +7485,7 @@ function hexContrast(a, b) {
 function primaryButtonLabel(brand) {
   const darkC = hexContrast(brand.palette.primary, brand.palette.dark);
   const lightC = hexContrast(brand.palette.primary, AI_TREE_TOKENS.textPrimaryForeground);
-  if (darkC === null || lightC === null) return AI_TREE_TOKENS.textPrimaryForeground;
+  if (darkC === null || lightC === null) return `var(--brand-on-primary, ${AI_TREE_TOKENS.textPrimaryForeground})`;
   return darkC > lightC ? brand.palette.dark : AI_TREE_TOKENS.textPrimaryForeground;
 }
 function accentBandContext(brand) {
@@ -7451,7 +7509,11 @@ function readableForeground(bg, brand) {
   return darkC > lightC ? brand.palette.dark : AI_TREE_TOKENS.textPrimaryForeground;
 }
 function hexWithAlpha(hex, alpha) {
-  const m = /^#([0-9a-f]{6})$/i.exec(hex.trim());
+  const value = hex.trim();
+  if (value.startsWith("var(") || value.startsWith("color-mix(")) {
+    return `color-mix(in srgb, ${value} ${Math.round(alpha * 100)}%, transparent)`;
+  }
+  const m = /^#([0-9a-f]{6})$/i.exec(value);
   if (!m) return hex;
   const r2 = parseInt(m[1].slice(0, 2), 16);
   const g = parseInt(m[1].slice(2, 4), 16);
@@ -7750,12 +7812,10 @@ function ButtonEl({
         cursor: "pointer",
         whiteSpace: "nowrap",
         ...buttonShellStyle(ctx, variant, fullWidth),
-        ...tokenColorStyle ?? (secondary ? { border: `1px solid ${secondaryColor ?? ctx.brand.palette.dark}`, color: secondaryColor ?? ctx.brand.palette.dark } : (
-          // Off-band, prefer the template button's measured fill/label pair — a template may
-          // fill its CTAs with any token (hvac: accent bg, primary text). On an accent band
-          // the flipped palette keeps contrast, so the brand-driven colours stay.
-          !ctx.buttonLabel && ctx.buttonStyle?.background ? { background: ctx.buttonStyle.background, color: ctx.buttonStyle.color } : { background: ctx.brand.palette.primary, color: ctx.buttonLabel ?? primaryButtonLabel(ctx.brand) }
-        ))
+        ...tokenColorStyle ?? (secondary ? { border: `1px solid ${secondaryColor ?? ctx.brand.palette.dark}`, color: secondaryColor ?? ctx.brand.palette.dark } : {
+          background: ctx.brand.palette.primary,
+          color: ctx.buttonLabel ?? primaryButtonLabel(ctx.brand)
+        })
       },
       children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { ...path ? textAttrs(ctx, `${path}.label`) : {}, children: str(slots.label) })
     }
@@ -9600,10 +9660,10 @@ function renderNode(node, ctx, path, ambientAlign) {
                       ...buttonShellStyle(ctx, "primary"),
                       // Brand-styled: the template button's measured fill/label pair off-band, else
                       // primary fill with a brand-derived label so it reads on custom palettes.
-                      ...buttonColorStyle(ctx, "primary") ?? (!ctx.buttonLabel && ctx.buttonStyle?.background ? { background: ctx.buttonStyle.background, color: ctx.buttonStyle.color } : {
+                      ...buttonColorStyle(ctx, "primary") ?? {
                         background: ctx.brand.palette.primary,
                         color: ctx.buttonLabel ?? primaryButtonLabel(ctx.brand)
-                      })
+                      }
                     },
                     children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { ...textAttrs(ctx, `${path}.c${i}.label`), children: str(cs.label) })
                   },
@@ -9647,7 +9707,7 @@ function AiTreeRenderer({
   }
   const resolvedBrand = withThemeFonts(brand ?? AI_DEFAULT_BRAND);
   const band = (tree.settings ?? {}).sectionBackground === "accent" ? accentBandContext(resolvedBrand) : null;
-  const blockBrand = band?.brand ?? resolvedBrand;
+  const blockBrand = withLivePalette(band?.brand ?? resolvedBrand, resolvedBrand);
   const placeholderMap = buildPlaceholderMap(tree);
   const hasOverlapBackground = tree.scaffold === "overlay" && tree.rows.some(
     (row) => (row.blocks ?? []).some((b) => b.type === "group" && str(b.slots?.layout) === "overlap")
@@ -9663,7 +9723,7 @@ function AiTreeRenderer({
     // standalone resolve), so generated galleries, image rows, and overlay backgrounds arrive with
     // photos instead of grey boxes.
     resolveMedia: (ref) => resolveMedia?.(ref) ?? placeholderMap[ref] ?? resolvePlaceholderRef(ref),
-    cardSurface: blockBrand.palette.light.toUpperCase() === AI_DEFAULT_BRAND.palette.light.toUpperCase() ? "#ECECEB" : `color-mix(in srgb, ${blockBrand.palette.light} 90%, ${blockBrand.palette.dark})`,
+    cardSurface: resolvedBrand.palette.light.toUpperCase() === AI_DEFAULT_BRAND.palette.light.toUpperCase() ? "#ECECEB" : `color-mix(in srgb, ${blockBrand.palette.light} 90%, ${blockBrand.palette.dark})`,
     keyFor: editKeyPrefix ? (path) => `${editKeyPrefix}.${path}` : null,
     sectionAlignment: (tree.settings ?? {}).alignment === "center" ? "center" : "left",
     buttonStyle,
@@ -9680,7 +9740,7 @@ function AiTreeRenderer({
   const backgroundUrl = isOverlay && settings.backgroundMedia ? ctx.resolveMedia(settings.backgroundMedia) : null;
   const bgAttrs = ctx.keyFor && isOverlay && settings.backgroundMedia ? { "data-ohw-key": ctx.keyFor("settings.backgroundMedia"), "data-ohw-editable": "bg-image" } : {};
   const toneBackground = (() => {
-    const { dark, primary, light } = resolvedBrand.palette;
+    const { dark, primary, light } = blockBrand.palette;
     switch (settings.sectionBackground) {
       case "surface":
         return `color-mix(in srgb, ${light} 94%, ${dark})`;
@@ -9803,14 +9863,15 @@ function AiFooterRenderer({
   if (!isRenderableFooterTree(tree)) {
     return null;
   }
-  const resolvedBrand = withThemeFonts(brand ?? AI_DEFAULT_BRAND);
+  const hexBrand = withThemeFonts(brand ?? AI_DEFAULT_BRAND);
+  const resolvedBrand = withLivePalette(hexBrand, brand ?? AI_DEFAULT_BRAND);
   const bandBg = surface?.background ?? resolvedBrand.palette.dark;
   const bandText = surface?.text ?? resolvedBrand.palette.light;
   const onDark = surface ? isDarkColor(surface.background) : true;
   const ctx = {
     brand: resolvedBrand,
     resolveMedia: (ref) => resolveMedia?.(ref) ?? resolvePlaceholderRef(ref),
-    cardSurface: resolvedBrand.palette.light.toUpperCase() === AI_DEFAULT_BRAND.palette.light.toUpperCase() ? "#ECECEB" : `color-mix(in srgb, ${resolvedBrand.palette.light} 90%, ${resolvedBrand.palette.dark})`,
+    cardSurface: hexBrand.palette.light.toUpperCase() === AI_DEFAULT_BRAND.palette.light.toUpperCase() ? "#ECECEB" : `color-mix(in srgb, ${resolvedBrand.palette.light} 90%, ${resolvedBrand.palette.dark})`,
     keyFor: editKeyPrefix ? (path) => `${editKeyPrefix}.${path}` : null,
     logoUrl: logoUrl ?? null,
     resolvePageHref
@@ -10386,10 +10447,9 @@ function syncSoftRemovedGenerated() {
 }
 function applyAiSectionsToDom(state, options) {
   if (typeof document === "undefined") return;
-  const brandOverride = deriveBrandOverride();
   const templateBrand = deriveTemplateBrand();
   const templateButtonStyle = deriveTemplateButtonStyle();
-  const brandKey = brandOverride ? JSON.stringify(brandOverride) : "";
+  const brandKey = JSON.stringify(getAppliedBrand() ?? deriveBrandOverride() ?? null);
   const pagePath = window.location.pathname;
   const pageSections = state.sections.filter((entry) => (entry.path ?? "/") === pagePath);
   const activeIds = new Set(pageSections.map((entry) => entry.id));
@@ -10433,7 +10493,7 @@ function applyAiSectionsToDom(state, options) {
           AiTreeRenderer,
           {
             tree: entry.tree,
-            brand: brandOverride ?? entry.brand ?? options?.brand ?? templateBrand ?? void 0,
+            brand: brandForGenerated(deriveBrandOverride() ?? entry.brand ?? options?.brand ?? templateBrand),
             buttonStyle: templateButtonStyle,
             resolveMedia,
             editKeyPrefix: `ai.${entry.id}`
@@ -10599,7 +10659,7 @@ function applyAiFooterToDom(state, content) {
   const templateFooter = findTemplateFooter();
   captureTemplateFooterSurface(templateFooter);
   const surface = capturedSurface ?? null;
-  const brand = mountOptions.brand ?? deriveTemplateBrand();
+  const brand = brandForGenerated(mountOptions.brand ?? deriveTemplateBrand());
   const logoUrl = resolveLogoFromContent(content, templateFooter);
   const serialized = JSON.stringify(state) + JSON.stringify(brand ?? null) + (logoUrl ?? "") + JSON.stringify(surface) + JSON.stringify(defaultLegal());
   if (mounted2 && mounted2.serialized === serialized && mounted2.container.isConnected) {
@@ -27325,7 +27385,7 @@ function OhhwellsBridge() {
       if (!subdomain) return {};
       return contentCache.get(subdomain) ?? {};
     };
-    const observeRoots = () => [document.querySelector("nav"), document.querySelector("footer")].filter(
+    const observeRoots = () => [document.querySelector("nav"), getFooterRoot()].filter(
       (el) => Boolean(el)
     );
     const roots = observeRoots();
@@ -27781,7 +27841,7 @@ function OhhwellsBridge() {
       {
         const formEl = getFormElement(target);
         const onSuccessText = target.closest(`[${SUCCESS_TEXT_ATTR}]`);
-        if (formEl && formKeyOf(formEl) && !onSuccessText) {
+        if (formEl && formKeyOf(formEl) && !onSuccessText && !isCtaButton(target)) {
           const fieldEl = getFieldWrapper(target);
           if (fieldEl) {
             const label = target.closest("label");
@@ -29690,6 +29750,7 @@ function OhhwellsBridge() {
       brandKitRef.current = value;
       applyBrandToDom(parseBrandKit(value));
       if (aiSectionsRef.current) applyAiSectionsToDom(parseAiSectionsState(aiSectionsRef.current));
+      applyAiFooterFromContent(editContentRef.current);
       applyStylesToDom(parseStyleStore(stylesRef.current));
       postToParentRef.current({ type: "ow:change", nodes: [{ key: BRAND_KIT_KEY, text: value }] });
       postToParentRef.current({ type: "ow:ai-brand-applied", previous, value });