@ohhwells/bridge 0.1.138 → 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)})))`,
@@ -7279,7 +7337,7 @@ var AI_MOBILE_CSS = [
   // page's first section. Top only (bottom needs no nav clearance); ~96px approximates the
   // template nav's own height (measured ~94px) — there's no shared `--ohw-header-h` var to read
   // an exact figure from (no live measurement exists), so this is a safe approximation, not a
-  // pixel-exact fit. Horizontal spacing already comes from `data-ai-container`.
+  // pixel-exact fit. Horizontal spacing already comes from `data-ai-section-inner`.
   '[data-ai-overlay-clearance] [data-ai-overlap-layer="overlay"]{padding-top:96px}',
   // A full-bleed carousel's height is pure arithmetic: it spans the whole window, so 16/9 turns
   // window width straight into height. Measured at 16/9 it came out ~90% of the viewport at EVERY
@@ -7295,8 +7353,10 @@ var AI_MOBILE_CSS = [
   "[data-ai-section]{overflow-x:hidden}",
   // `:not([data-ai-full-bleed])`: this `!important` gutter beat the inline `padding: 0` that a
   // full-bleed section's container sets, so a carousel/media hero that is edge-to-edge on desktop
-  // still got a 20px band of section background down both sides on a phone.
-  "[data-ai-container]:not([data-ai-full-bleed]){padding:0 20px !important}",
+  // still got a 20px band of section background down both sides on a phone. The footer's own
+  // container keeps the unguarded rule below — `data-ai-full-bleed` can never appear on it.
+  "[data-ai-section-inner]:not([data-ai-full-bleed]){padding:0 20px !important}",
+  "[data-ai-container]{padding:0 20px !important}",
   "[data-ai-row]{display:flex !important;flex-direction:column !important;align-items:stretch !important}",
   "[data-ai-cell]{width:100%;min-width:0}",
   // The rule above turns every row into a COLUMN flex container on phones, which silently breaks
@@ -7425,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) {
@@ -7449,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);
@@ -7497,6 +7561,31 @@ function pricingCardEmphasis(featured, ctx, hasBg) {
 function textAttrs(ctx, path) {
   return ctx.keyFor ? { "data-ohw-key": ctx.keyFor(path), "data-ohw-editable": "text" } : {};
 }
+var AI_RESPONSIVE_CSS = [
+  "@media (max-width: 960px) {",
+  "  [data-ai-responsive] [data-ai-grid] { grid-template-columns: repeat(2, 1fr) !important; }",
+  '  [data-ai-responsive] [data-ai-grid="1"] { grid-template-columns: 1fr !important; }',
+  "}",
+  "@media (max-width: 640px) {",
+  "  [data-ai-responsive] [data-ai-grid] { grid-template-columns: 1fr !important; }",
+  "  [data-ai-responsive] [data-ai-columns] > * { grid-column: 1 / -1 !important; }",
+  // Group containers flatten to a column on phones; span placements come along for free.
+  // `:not([data-ai-group="overlap"])` for the same reason as the twin pair in AI_MOBILE_CSS — see
+  // the comment there. This sheet's copy is the narrower selector, so without the exemption it
+  // flattens an `overlap` hero below 640px even though the other rule stands down: measured a 390px
+  // viewport with the heading/CTA in flow *under* the image, 219px of section background where the
+  // layered text used to be.
+  '  [data-ai-responsive] [data-ai-group]:not([data-ai-group="overlap"]) { display: flex !important; flex-direction: column !important; }',
+  '  [data-ai-responsive] [data-ai-group]:not([data-ai-group="overlap"]) > * { grid-column: auto !important; }',
+  // `:not([data-ai-full-bleed])` for the same reason as the twin rule in AI_MOBILE_CSS: this one
+  // is narrower (0,2,0 vs 0,1,0) and also `!important`, so without the guard it wins outright and
+  // a full-bleed hero gets its 20px side band back below 640px only — the one width where the
+  // other rule had already been taught to stand down.
+  "  [data-ai-responsive] [data-ai-section-inner]:not([data-ai-full-bleed]) { padding-left: 20px !important; padding-right: 20px !important; }",
+  "  [data-ai-responsive] { overflow-x: hidden; }",
+  "  [data-ai-responsive] img { max-width: 100%; }",
+  "}"
+].join("\n");
 var TRANSPARENT_PX = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7";
 function MediaBox({
   refValue,
@@ -7517,9 +7606,9 @@ function MediaBox({
   const url = refValue ? ctx.resolveMedia(refValue) : null;
   const isIcon = /^(lucide|simple):/.test(refValue);
   const aspectRatio = aspect && /^\d+:\d+$/.test(aspect) ? aspect.replace(":", " / ") : void 0;
-  const editAttrs = ctx.keyFor && editPath && !isIcon ? {
+  const editAttrs = ctx.keyFor && editPath ? {
     "data-ohw-key": ctx.keyFor(editPath),
-    ...genericImageEdit ? { "data-ohw-editable": "image" } : {}
+    ...isIcon ? { "data-ohw-editable": "icon" } : genericImageEdit ? { "data-ohw-editable": "image" } : {}
   } : {};
   if (isIcon) {
     const Icon = refValue.startsWith("lucide:") ? lucideByName(refValue.slice(7)) : null;
@@ -7527,6 +7616,7 @@ function MediaBox({
       "span",
       {
         "data-ai-icon": refValue,
+        ...editAttrs,
         style: {
           display: "inline-flex",
           width: 48,
@@ -7722,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) })
     }
@@ -9034,7 +9122,7 @@ function CollectionBlock({ node, ctx, path }) {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     "div",
     {
-      "data-ai-grid": "",
+      "data-ai-grid": String(itemsPerRow),
       "data-ohw-pricing-collection": isPricing ? "" : void 0,
       style: {
         display: "grid",
@@ -9294,7 +9382,7 @@ function renderNode(node, ctx, path, ambientAlign) {
                 },
                 children: [
                   i > 0 && ctx.heroOverlapFullBleed ? (
-                    // The section's `data-ai-container` gave up its max-width/gutter so the base
+                    // The section's `data-ai-section-inner` gave up its max-width/gutter so the base
                     // layer (this group's i===0 sibling) can span edge-to-edge — reintroduced here,
                     // scoped to just the overlay text, so a heading/copy/CTA stack doesn't stretch
                     // the full section width instead of reading at the usual content width.
@@ -9572,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) })
                   },
@@ -9619,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")
@@ -9635,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,
@@ -9652,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})`;
@@ -9687,6 +9775,7 @@ function AiTreeRenderer({
       ...fillHeight ? { "data-ai-fill-height": "" } : {},
       ...needsOverlayClearance ? { "data-ai-overlay-clearance": "" } : {},
       ...bgAttrs,
+      "data-ai-responsive": "",
       style: {
         position: "relative",
         padding: `${padCss} 0`,
@@ -9700,12 +9789,13 @@ function AiTreeRenderer({
         ...fillHeight ? { display: "grid" } : {}
       },
       children: [
-        isOverlay && backgroundUrl && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { position: "absolute", inset: 0, background: `rgba(255,255,255,${overlayAlpha})` } }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("style", { children: AI_RESPONSIVE_CSS }),
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)("style", { children: AI_MOBILE_CSS }),
+        isOverlay && backgroundUrl && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { position: "absolute", inset: 0, background: `rgba(255,255,255,${overlayAlpha})` } }),
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
           "div",
           {
-            "data-ai-container": "",
+            "data-ai-section-inner": "",
             ...fullBleedMedia ? { "data-ai-full-bleed": "" } : {},
             style: {
               position: "relative",
@@ -9722,7 +9812,7 @@ function AiTreeRenderer({
             children: tree.rows.map((row, r2) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
               "div",
               {
-                "data-ai-row": "",
+                "data-ai-columns": "",
                 style: {
                   display: "grid",
                   gridTemplateColumns: "repeat(12, 1fr)",
@@ -9773,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
@@ -10356,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));
@@ -10378,9 +10468,10 @@ function applyAiSectionsToDom(state, options) {
     if (existing && existing.serialized === serialized && existing.container.isConnected) {
       continue;
     }
-    const isNewMount = !existing || !existing.container.isConnected;
     let container = existing?.container;
+    let isNewMount = false;
     if (!container || !container.isConnected) {
+      isNewMount = true;
       existing?.root.unmount();
       container?.remove();
       container = document.createElement("div");
@@ -10402,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}`
@@ -10568,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) {
@@ -16822,6 +16913,7 @@ function MediaOverlay({
       (prev) => prev && prev.fullWidth === width && prev.height === height ? prev : { fullWidth: width, height }
     );
   }, [isVideo]);
+  const replaceLabel = isVideo ? "Replace video" : hover.elementType === "bg-image" ? "Replace background" : "Replace image";
   const replaceMode = buttonSize ? replaceButtonMode({ width: rect.width, height: rect.height }, buttonSize) : "none";
   const box = {
     position: "fixed",
@@ -16920,11 +17012,10 @@ function MediaOverlay({
         className: "flex items-center justify-center cursor-pointer",
         style: {
           ...box,
-          // When text overlays this media, let clicks fall THROUGH to the text underneath. In the
-          // parent this needed a whole `ow:click-at` round-trip to re-hit-test inside the iframe;
-          // in-document, pointer-events does it natively. The button below opts back in, so
-          // Replace still works.
-          pointerEvents: hover.hasTextOverlap || cueOnly ? "none" : "auto",
+          // Visual only. `pointer-events: auto` on this full-bleed rect covered the navbar
+          // (hero bg includes the absolute TopNav) and swallowed CTA press-drag. Text overlay
+          // and cueOnly also need clicks to fall through — Replace / video controls opt back in.
+          pointerEvents: "none",
           // Selected: a firm component ring with no wash, so the image reads as chosen rather
           // than hovered. Hover keeps the existing tinted preview.
           boxShadow: selected ? "inset 0 0 0 2px var(--color-bridge-primary)" : "inset 0 0 0 1.5px var(--color-bridge-primary)",
@@ -16951,17 +17042,17 @@ function MediaOverlay({
               },
               children: [
                 isVideo ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_lucide_react5.Film, { size: 14 }) : /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_lucide_react5.ImageIcon, { size: 14 }),
-                isVideo ? "Replace video" : "Replace image"
+                replaceLabel
               ]
             }
           ),
-          replaceMode === "none" || cueOnly ? null : /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
+          showChrome && replaceMode !== "none" && /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
             Button,
             {
               "data-ohw-media-overlay": "",
               variant: "outline",
               size: "sm",
-              "aria-label": isVideo ? "Replace video" : "Replace image",
+              "aria-label": replaceLabel,
               className: "gap-1.5 cursor-pointer hover:bg-background",
               style: {
                 ...OVERLAY_BUTTON_STYLE,
@@ -16984,7 +17075,7 @@ function MediaOverlay({
               },
               children: [
                 isVideo ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_lucide_react5.Film, { size: 14 }) : /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_lucide_react5.ImageIcon, { size: 14 }),
-                replaceMode === "full" ? isVideo ? "Replace video" : hover.elementType === "bg-image" ? "Replace background" : "Replace image" : null
+                replaceMode === "full" ? replaceLabel : null
               ]
             }
           )
@@ -18290,8 +18381,20 @@ function withPricingCollection(tree, mutate) {
   const next = JSON.parse(JSON.stringify(tree));
   const collection = findPricingCollection(next);
   if (!collection || !collection.children) return null;
+  for (const card of collection.children) {
+    if (isPricingCard(card)) upgradeLegacyPricingSlots(card);
+  }
   return mutate(collection) ? next : null;
 }
+function upgradeLegacyPricingSlots(card) {
+  const slots = card.slots = card.slots ?? {};
+  if (typeof slots.features === "string") {
+    const rows = pricingFeatureList(card);
+    if (rows.length > 0) slots.features = rows.slice(0, PRICING_FEATURES_MAX);
+  }
+  if (slots.featured === true) slots.featured = { enabled: true };
+  else if (slots.featured === false) delete slots.featured;
+}
 function addPricingTier(tree) {
   return withPricingCollection(tree, (collection) => {
     const children = collection.children;
@@ -18413,7 +18516,7 @@ function pricingFeatureList(target) {
     }));
   }
   if (typeof raw === "string") {
-    return raw.split("\n").map((line) => line.replace(/^[-*•]\s*/, "").trim()).filter(Boolean).map((text) => ({ text }));
+    return raw.split(/\n|<br\s*\/?>/i).map((line) => line.replace(/<[^>]+>/g, "").replace(/^[-*•]\s*/, "").trim().slice(0, 120)).filter(Boolean).map((text) => ({ text }));
   }
   return [];
 }
@@ -21407,6 +21510,7 @@ function shouldUseDevFixtures() {
 function getLogoElement(el) {
   const marked = el.closest('[data-ohw-role="logo"], [data-ohw-logo]');
   if (marked) return marked;
+  if (el.closest('[data-ohw-editable="icon"]')) return null;
   const root = el.closest("nav, [data-ohw-nav-root], footer");
   if (!root) return null;
   const anchor = el.closest("a");
@@ -23970,7 +24074,7 @@ function getNavigationSelectionParent(el) {
   if (!isFooterLinksContainer(el) && (el.hasAttribute("data-ohw-footer-col") || el.hasAttribute("data-ohw-footer-column") || isInferredFooterGroup2(el))) {
     return resolveFooterLinksContainerFrom(el);
   }
-  if (el.hasAttribute("data-ohw-nav-container") || el.hasAttribute("data-ohw-nav-drawer") || isFooterLinksContainer(el)) {
+  if (el.hasAttribute("data-ohw-nav-container") || el.hasAttribute("data-ohw-nav-drawer") || el.hasAttribute("data-ohw-footer-col") || el.hasAttribute("data-ohw-footer-column") || isFooterLinksContainer(el) || isInferredFooterGroup2(el)) {
     return getNavigationRoot(el);
   }
   return null;
@@ -24192,7 +24296,6 @@ var ICONS = {
   insertUnorderedList: '<line x1="8" y1="6" x2="21" y2="6"/><line x1="8" y1="12" x2="21" y2="12"/><line x1="8" y1="18" x2="21" y2="18"/><line x1="3" y1="6" x2="3.01" y2="6"/><line x1="3" y1="12" x2="3.01" y2="12"/><line x1="3" y1="18" x2="3.01" y2="18"/>',
   insertOrderedList: '<line x1="10" y1="6" x2="21" y2="6"/><line x1="10" y1="12" x2="21" y2="12"/><line x1="10" y1="18" x2="21" y2="18"/><path d="M4 6h1v4"/><path d="M4 10h2"/><path d="M6 18H4c0-1 2-2 2-3s-1-1.5-2-1"/>'
 };
-var HEIGHT_SETTLE_DELAYS = [150, 400, 800];
 var SELECTION_CHROME_GAP2 = 4;
 var TOOLBAR_STROKE_GAP2 = 4;
 var TOOLBAR_OFFSET_FROM_ELEMENT = SELECTION_CHROME_GAP2 + TOOLBAR_STROKE_GAP2;
@@ -25172,21 +25275,6 @@ function OhhwellsBridge() {
   const [isItemDragging, setIsItemDragging] = (0, import_react21.useState)(false);
   const [isFooterFrameSelection, setIsFooterFrameSelection] = (0, import_react21.useState)(false);
   isFooterFrameSelectionRef.current = isFooterFrameSelection;
-  const [floatingPanel, setFloatingPanel] = (0, import_react21.useState)(null);
-  const floatingPanelOpenRef = (0, import_react21.useRef)(false);
-  floatingPanelOpenRef.current = floatingPanel !== null;
-  const floatingPanelRef = (0, import_react21.useRef)(null);
-  floatingPanelRef.current = floatingPanel;
-  const [floatingPanelPos, setFloatingPanelPos] = (0, import_react21.useState)(null);
-  const buttonCollectionDragRef = (0, import_react21.useRef)(null);
-  const buttonDropInsertIndexRef = (0, import_react21.useRef)(null);
-  const [buttonDropSlots, setButtonDropSlots] = (0, import_react21.useState)([]);
-  const [activeButtonDropIndex, setActiveButtonDropIndex] = (0, import_react21.useState)(null);
-  const buttonPointerDragRef = (0, import_react21.useRef)(null);
-  const [buttonStyleTick, setButtonStyleTick] = (0, import_react21.useState)(0);
-  const [logoSizeDraft, setLogoSizeDraft] = (0, import_react21.useState)(null);
-  const [editorViewport, setEditorViewport] = (0, import_react21.useState)("desktop");
-  const [parentScrollSnap, setParentScrollSnap] = (0, import_react21.useState)(null);
   const [navDropdownPreviewOpen, setNavDropdownPreviewOpen] = (0, import_react21.useState)(null);
   const [footerHeadingVisible, setFooterHeadingVisible] = (0, import_react21.useState)(null);
   const footerDragRef = (0, import_react21.useRef)(null);
@@ -25212,6 +25300,21 @@ function OhhwellsBridge() {
   const stylesRef = (0, import_react21.useRef)("");
   const appliedDrawerRef = (0, import_react21.useRef)(null);
   const pendingDeleteUndoRef = (0, import_react21.useRef)(null);
+  const [floatingPanel, setFloatingPanel] = (0, import_react21.useState)(null);
+  const floatingPanelOpenRef = (0, import_react21.useRef)(false);
+  const floatingPanelRef = (0, import_react21.useRef)(null);
+  floatingPanelRef.current = floatingPanel;
+  const setFloatingPanelRef = (0, import_react21.useRef)(setFloatingPanel);
+  const [floatingPanelPos, setFloatingPanelPos] = (0, import_react21.useState)(null);
+  const buttonCollectionDragRef = (0, import_react21.useRef)(null);
+  const buttonDropInsertIndexRef = (0, import_react21.useRef)(null);
+  const [buttonDropSlots, setButtonDropSlots] = (0, import_react21.useState)([]);
+  const [activeButtonDropIndex, setActiveButtonDropIndex] = (0, import_react21.useState)(null);
+  const buttonPointerDragRef = (0, import_react21.useRef)(null);
+  const [buttonStyleTick, setButtonStyleTick] = (0, import_react21.useState)(0);
+  const [logoSizeDraft, setLogoSizeDraft] = (0, import_react21.useState)(null);
+  const [editorViewport, setEditorViewport] = (0, import_react21.useState)("desktop");
+  const [parentScrollSnap, setParentScrollSnap] = (0, import_react21.useState)(null);
   const [sitePages, setSitePages] = (0, import_react21.useState)([]);
   const [sectionsByPath, setSectionsByPath] = (0, import_react21.useState)({});
   const sectionsPrefetchGenRef = (0, import_react21.useRef)(0);
@@ -25220,7 +25323,18 @@ function OhhwellsBridge() {
   const linkPopoverOpenRef = (0, import_react21.useRef)(false);
   const linkPopoverGraceUntilRef = (0, import_react21.useRef)(0);
   setLinkPopoverRef.current = setLinkPopover;
+  setFloatingPanelRef.current = setFloatingPanel;
   linkPopoverSessionRef.current = linkPopover;
+  floatingPanelOpenRef.current = Boolean(floatingPanel);
+  (0, import_react21.useEffect)(() => {
+    const syncViewport = () => {
+      const next = window.innerWidth <= 480 ? "mobile" : "desktop";
+      setEditorViewport((prev) => prev === next ? prev : next);
+    };
+    syncViewport();
+    window.addEventListener("resize", syncViewport);
+    return () => window.removeEventListener("resize", syncViewport);
+  }, []);
   (0, import_react21.useEffect)(() => {
     setSectionOrderPersistHandler((entries) => {
       const currentPath = window.location.pathname;
@@ -26899,6 +27013,7 @@ function OhhwellsBridge() {
       applyAiFooterFromContent(content);
       if (typeof content[STYLE_STORE_KEY] === "string") {
         stylesRef.current = content[STYLE_STORE_KEY];
+        document.querySelectorAll('[data-ohw-editable="form"]').forEach((f) => markFormFields(f));
         applyStylesToDom(parseStyleStore(content[STYLE_STORE_KEY]));
       }
       applyBrandChrome(content);
@@ -26909,12 +27024,12 @@ function OhhwellsBridge() {
         if (key === "__ohw_sections") continue;
         if (key === AI_SECTIONS_KEY) continue;
         if (key === AI_FOOTER_KEY) continue;
+        if (key === LOGO_PLACEHOLDER_KEY) continue;
+        if (LOGO_IMAGE_KEYS.includes(key)) continue;
         if (key === BRAND_KIT_KEY) continue;
         if (key === STYLE_STORE_KEY) continue;
         if (BRAND_CHROME_KEYS.has(key)) continue;
-        if (key === LOGO_PLACEHOLDER_KEY) continue;
         if (key === CUSTOM_CODE_AFTER_HEAD_KEY || key === CUSTOM_CODE_BEFORE_HEAD_KEY) continue;
-        if (LOGO_IMAGE_KEYS.includes(key)) continue;
         if (typeof content[AI_FOOTER_KEY] === "string" && content[AI_FOOTER_KEY] && isAiFooterOwnedContentKey(key)) {
           continue;
         }
@@ -27129,17 +27244,18 @@ function OhhwellsBridge() {
         }
         applyAiFooterFromContent(content);
         if (typeof content[STYLE_STORE_KEY] === "string") {
+          document.querySelectorAll('[data-ohw-editable="form"]').forEach((f) => markFormFields(f));
           applyStylesToDom(parseStyleStore(content[STYLE_STORE_KEY]));
         }
         for (const [key, val] of Object.entries(content)) {
           if (key === "__ohw_sections") continue;
           if (key === AI_SECTIONS_KEY) continue;
           if (key === AI_FOOTER_KEY) continue;
+          if (key === LOGO_PLACEHOLDER_KEY) continue;
+          if (LOGO_IMAGE_KEYS.includes(key)) continue;
           if (key === BRAND_KIT_KEY) continue;
           if (key === STYLE_STORE_KEY) continue;
           if (BRAND_CHROME_KEYS.has(key)) continue;
-          if (key === LOGO_PLACEHOLDER_KEY) continue;
-          if (LOGO_IMAGE_KEYS.includes(key)) continue;
           if (typeof content[AI_FOOTER_KEY] === "string" && content[AI_FOOTER_KEY] && isAiFooterOwnedContentKey(key)) {
             continue;
           }
@@ -27269,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();
@@ -27396,26 +27512,11 @@ function OhhwellsBridge() {
     const t2 = setTimeout(measure, 500);
     const ro = new ResizeObserver(schedule);
     ro.observe(document.body);
-    let lastWidth = window.innerWidth;
-    let resizeTimers = [];
-    const clearResizeTimers = () => {
-      resizeTimers.forEach(clearTimeout);
-      resizeTimers = [];
-    };
-    const handleResize = () => {
-      if (window.innerWidth === lastWidth) return;
-      lastWidth = window.innerWidth;
-      clearResizeTimers();
-      resizeTimers = HEIGHT_SETTLE_DELAYS.map((delay) => setTimeout(measure, delay));
-    };
-    window.addEventListener("resize", handleResize);
     return () => {
       clearTimeout(t1);
       clearTimeout(t2);
       if (raf != null) cancelAnimationFrame(raf);
       ro.disconnect();
-      clearResizeTimers();
-      window.removeEventListener("resize", handleResize);
     };
   }, [pathname, isEditMode, postToParent2]);
   (0, import_react21.useEffect)(() => {
@@ -27710,6 +27811,13 @@ function OhhwellsBridge() {
       if (target.closest("[data-ohw-state-toggle]")) return;
       if (target.closest("[data-ohw-max-badge]")) return;
       if (isInsideLinkEditor(target)) return;
+      if (isInsideFloatingPanel(target)) return;
+      if (target.closest("[data-ohw-form-toolbar]")) return;
+      if (target.closest(
+        '[data-ohw-field-toolbar], [data-ohw-field-type-picker], [data-radix-popper-content-wrapper], [role="menu"], [data-slot="dropdown-menu-content"]'
+      )) {
+        return;
+      }
       if (selectedMediaElRef.current && !selectedMediaElRef.current.contains(target) && !target.closest("[data-ohw-media-overlay], [data-ohw-edit-chrome], [data-ohw-item-interaction]")) {
         clearMediaSelectionRef.current();
       }
@@ -27730,17 +27838,10 @@ function OhhwellsBridge() {
           return;
         }
       }
-      if (isInsideFloatingPanel(target)) return;
-      if (target.closest("[data-ohw-form-toolbar]")) return;
-      if (target.closest(
-        '[data-ohw-field-toolbar], [data-ohw-field-type-picker], [data-radix-popper-content-wrapper], [role="menu"], [data-slot="dropdown-menu-content"]'
-      )) {
-        return;
-      }
       {
         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");
@@ -28116,6 +28217,9 @@ function OhhwellsBridge() {
         setHoveredItemRect(null);
         hoveredNavContainerRef.current = null;
         setHoveredNavContainerRect(null);
+        siblingHintElRef.current = null;
+        setSiblingHintRect(null);
+        setSiblingHintRects([]);
         return;
       }
       {
@@ -28236,7 +28340,6 @@ function OhhwellsBridge() {
             hoveredNavContainerRef.current = null;
             setHoveredNavContainerRect(null);
             hoveredItemElRef.current = editable;
-            setHoveredItemRect(isSelectedForHoverRef.current(editable) ? null : editable.getBoundingClientRect());
           }
         }
       }
@@ -28946,7 +29049,11 @@ function OhhwellsBridge() {
     };
     const handleMouseMove = (e) => {
       const { clientX, clientY } = e;
-      if (pointOwnedByFloatingPanel(clientX, clientY)) return;
+      if (pointOwnedByFloatingPanel(clientX, clientY)) {
+        dismissImageHover();
+        clearImageHover();
+        return;
+      }
       if (isNavDrawerOpen() && isPointOutsideOpenDrawer(clientX, clientY)) {
         document.querySelectorAll("[data-ohw-hovered]").forEach((el) => el.removeAttribute("data-ohw-hovered"));
         formHoverElRef.current = null;
@@ -28975,7 +29082,12 @@ function OhhwellsBridge() {
         setHoveredItemRect(null);
         hoveredNavContainerRef.current = null;
         setHoveredNavContainerRect(null);
+        siblingHintElRef.current = null;
+        setSiblingHintRect(null);
+        setSiblingHintRects([]);
         dismissImageHover();
+        clearImageHover();
+        setSectionGap(null);
         return;
       }
       if (probeSocialsRowAt(clientX, clientY)) return;
@@ -28987,7 +29099,11 @@ function OhhwellsBridge() {
       if (e.data?.type !== "ow:pointer-sync") return;
       const { clientX, clientY } = e.data;
       if (typeof clientX !== "number" || typeof clientY !== "number") return;
-      if (pointOwnedByFloatingPanel(clientX, clientY)) return;
+      if (pointOwnedByFloatingPanel(clientX, clientY)) {
+        dismissImageHover();
+        clearImageHover();
+        return;
+      }
       if (isNavDrawerOpen() && isPointOutsideOpenDrawer(clientX, clientY)) return;
       if (probeSocialsRowAt(clientX, clientY)) return;
       probeSectionGapAt(clientX, clientY);
@@ -29339,6 +29455,7 @@ function OhhwellsBridge() {
       applyAiFooterFromContent(content);
       if (typeof content[STYLE_STORE_KEY] === "string") {
         stylesRef.current = content[STYLE_STORE_KEY];
+        document.querySelectorAll('[data-ohw-editable="form"]').forEach((f) => markFormFields(f));
         applyStylesToDom(parseStyleStore(content[STYLE_STORE_KEY]));
       }
       applyBrandChrome(content);
@@ -29353,12 +29470,12 @@ function OhhwellsBridge() {
         }
         if (key === AI_SECTIONS_KEY) continue;
         if (key === AI_FOOTER_KEY) continue;
+        if (key === LOGO_PLACEHOLDER_KEY) continue;
+        if (LOGO_IMAGE_KEYS.includes(key) && !String(val ?? "").trim()) continue;
         if (key === BRAND_KIT_KEY) continue;
         if (key === STYLE_STORE_KEY) continue;
         if (BRAND_CHROME_KEYS.has(key)) continue;
-        if (key === LOGO_PLACEHOLDER_KEY) continue;
         if (key === CUSTOM_CODE_AFTER_HEAD_KEY || key === CUSTOM_CODE_BEFORE_HEAD_KEY) continue;
-        if (LOGO_IMAGE_KEYS.includes(key) && !String(val ?? "").trim()) continue;
         if (typeof content[AI_FOOTER_KEY] === "string" && content[AI_FOOTER_KEY] && isAiFooterOwnedContentKey(key)) {
           continue;
         }
@@ -29633,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 });
@@ -29895,6 +30013,12 @@ function OhhwellsBridge() {
         closeLinkPopoverRef.current();
         return;
       }
+      if (floatingPanelOpenRef.current) {
+        setFloatingPanelRef.current(null);
+        deselectRef.current();
+        deactivateRef.current();
+        return;
+      }
       deselectRef.current();
       deactivateRef.current();
       clearMediaSelectionRef.current();
@@ -30708,10 +30832,10 @@ function OhhwellsBridge() {
       window.removeEventListener("message", handleDeleteSection);
       window.removeEventListener("message", handleDuplicateSection);
       window.removeEventListener("message", handleDeactivate);
-      document.documentElement.removeAttribute("data-ohw-panel-dragging");
       window.removeEventListener("message", handleToastAction);
       window.removeEventListener("message", handleFormCount);
       window.removeEventListener("message", handleUiEscape);
+      document.documentElement.removeAttribute("data-ohw-panel-dragging");
       autoSaveTimers.current.forEach(clearTimeout);
       autoSaveTimers.current.clear();
       if (imageUnhoverTimerRef.current) clearTimeout(imageUnhoverTimerRef.current);
@@ -31005,7 +31129,7 @@ function OhhwellsBridge() {
       postToParent2({
         type: "ow:ready",
         version: "1",
-        bridgeVersion: "0.1.137",
+        bridgeVersion: "0.1.139",
         path: pathname,
         nodes: collectEditableNodes(editContentRef.current),
         sections