@ohhwells/bridge 0.1.137 → 0.1.139-next.373

package/dist/index.cjs

@@ -5924,6 +5924,7 @@ function applyStylesToDom(store) {
         section.setAttribute("data-ohw-style-bgcolor", "");
       }
       if (override.cardBackgroundColor !== void 0 && !isDrawerMarker) {
+        detectItemGroups(section);
         section.style.setProperty("--ohw-card-bg", override.cardBackgroundColor);
         section.setAttribute("data-ohw-style-cardbg", "");
       }
@@ -7278,7 +7279,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
@@ -7294,8 +7295,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
@@ -7496,6 +7499,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,
@@ -7516,9 +7544,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;
@@ -7526,6 +7554,7 @@ function MediaBox({
       "span",
       {
         "data-ai-icon": refValue,
+        ...editAttrs,
         style: {
           display: "inline-flex",
           width: 48,
@@ -9033,7 +9062,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",
@@ -9293,7 +9322,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.
@@ -9686,6 +9715,7 @@ function AiTreeRenderer({
       ...fillHeight ? { "data-ai-fill-height": "" } : {},
       ...needsOverlayClearance ? { "data-ai-overlay-clearance": "" } : {},
       ...bgAttrs,
+      "data-ai-responsive": "",
       style: {
         position: "relative",
         padding: `${padCss} 0`,
@@ -9699,12 +9729,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",
@@ -9721,7 +9752,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)",
@@ -10377,9 +10408,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");
@@ -16821,6 +16853,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",
@@ -16919,11 +16952,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)",
@@ -16950,17 +16982,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,
@@ -16983,7 +17015,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
               ]
             }
           )
@@ -18289,8 +18321,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;
@@ -18412,7 +18456,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 [];
 }
@@ -21406,6 +21450,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");
@@ -23969,7 +24014,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;
@@ -24191,7 +24236,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;
@@ -25171,21 +25215,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);
@@ -25211,6 +25240,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);
@@ -25219,7 +25263,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;
@@ -26898,6 +26953,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);
@@ -26908,12 +26964,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;
         }
@@ -27128,17 +27184,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;
           }
@@ -27395,26 +27452,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)(() => {
@@ -27709,6 +27751,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();
       }
@@ -27729,13 +27778,6 @@ 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}]`);
@@ -28115,6 +28157,9 @@ function OhhwellsBridge() {
         setHoveredItemRect(null);
         hoveredNavContainerRef.current = null;
         setHoveredNavContainerRect(null);
+        siblingHintElRef.current = null;
+        setSiblingHintRect(null);
+        setSiblingHintRects([]);
         return;
       }
       {
@@ -28235,7 +28280,6 @@ function OhhwellsBridge() {
             hoveredNavContainerRef.current = null;
             setHoveredNavContainerRect(null);
             hoveredItemElRef.current = editable;
-            setHoveredItemRect(isSelectedForHoverRef.current(editable) ? null : editable.getBoundingClientRect());
           }
         }
       }
@@ -28945,7 +28989,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;
@@ -28974,7 +29022,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;
@@ -28986,7 +29039,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);
@@ -29338,6 +29395,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);
@@ -29352,12 +29410,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;
         }
@@ -29894,6 +29952,12 @@ function OhhwellsBridge() {
         closeLinkPopoverRef.current();
         return;
       }
+      if (floatingPanelOpenRef.current) {
+        setFloatingPanelRef.current(null);
+        deselectRef.current();
+        deactivateRef.current();
+        return;
+      }
       deselectRef.current();
       deactivateRef.current();
       clearMediaSelectionRef.current();
@@ -30707,10 +30771,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);
@@ -31004,7 +31068,7 @@ function OhhwellsBridge() {
       postToParent2({
         type: "ow:ready",
         version: "1",
-        bridgeVersion: "0.1.136",
+        bridgeVersion: "0.1.139",
         path: pathname,
         nodes: collectEditableNodes(editContentRef.current),
         sections