@ohhwells/bridge 0.1.132-next.358 → 0.1.132

package/dist/index.cjs

@@ -2727,7 +2727,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-section-inner`.
+  // pixel-exact fit. Horizontal spacing already comes from `data-ai-container`.
   '[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
@@ -2743,10 +2743,8 @@ 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. 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}",
+  // 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}",
   "[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
@@ -2947,31 +2945,6 @@ 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,
@@ -2992,9 +2965,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 ? {
+  const editAttrs = ctx.keyFor && editPath && !isIcon ? {
     "data-ohw-key": ctx.keyFor(editPath),
-    ...isIcon ? { "data-ohw-editable": "icon" } : genericImageEdit ? { "data-ohw-editable": "image" } : {}
+    ...genericImageEdit ? { "data-ohw-editable": "image" } : {}
   } : {};
   if (isIcon) {
     const Icon = refValue.startsWith("lucide:") ? lucideByName(refValue.slice(7)) : null;
@@ -3002,7 +2975,6 @@ function MediaBox({
       "span",
       {
         "data-ai-icon": refValue,
-        ...editAttrs,
         style: {
           display: "inline-flex",
           width: 48,
@@ -4489,7 +4461,7 @@ function CollectionBlock({ node, ctx, path }) {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     "div",
     {
-      "data-ai-grid": String(itemsPerRow),
+      "data-ai-grid": "",
       "data-ohw-pricing-collection": isPricing ? "" : void 0,
       style: {
         display: "grid",
@@ -4749,7 +4721,7 @@ function renderNode(node, ctx, path, ambientAlign) {
                 },
                 children: [
                   i > 0 && ctx.heroOverlapFullBleed ? (
-                    // The section's `data-ai-section-inner` gave up its max-width/gutter so the base
+                    // The section's `data-ai-container` 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.
@@ -5142,7 +5114,6 @@ function AiTreeRenderer({
       ...fillHeight ? { "data-ai-fill-height": "" } : {},
       ...needsOverlayClearance ? { "data-ai-overlay-clearance": "" } : {},
       ...bgAttrs,
-      "data-ai-responsive": "",
       style: {
         position: "relative",
         padding: `${padCss} 0`,
@@ -5156,13 +5127,12 @@ function AiTreeRenderer({
         ...fillHeight ? { display: "grid" } : {}
       },
       children: [
-        /* @__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)("style", { children: AI_MOBILE_CSS }),
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
           "div",
           {
-            "data-ai-section-inner": "",
+            "data-ai-container": "",
             ...fullBleedMedia ? { "data-ai-full-bleed": "" } : {},
             style: {
               position: "relative",
@@ -5179,7 +5149,7 @@ function AiTreeRenderer({
             children: tree.rows.map((row, r2) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
               "div",
               {
-                "data-ai-columns": "",
+                "data-ai-row": "",
                 style: {
                   display: "grid",
                   gridTemplateColumns: "repeat(12, 1fr)",
@@ -5835,10 +5805,9 @@ 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");
@@ -13406,9 +13375,17 @@ var Button = React7.forwardRef(
 );
 Button.displayName = "Button";
 
-// src/ui/media-skeleton.ts
+// src/ui/MediaOverlay.tsx
+var import_jsx_runtime16 = require("react/jsx-runtime");
 var MEDIA_UPLOAD_FADE_MS = 300;
-var MEDIA_SKELETON_CSS = `
+var VIDEO_SETTINGS_BAR_INSET = 8;
+var OVERLAY_BUTTON_STYLE = {
+  pointerEvents: "auto",
+  fontFamily: "Inter, sans-serif",
+  fontSize: 12,
+  color: "#000"
+};
+var SKELETON_CSS = `
 @keyframes ohw-media-shimmer {
   0%   { transform: translateX(-100%); }
   100% { transform: translateX(100%); }
@@ -13425,16 +13402,6 @@ var MEDIA_SKELETON_CSS = `
   animation: ohw-media-shimmer 1.4s infinite;
 }
 `;
-
-// src/ui/MediaOverlay.tsx
-var import_jsx_runtime16 = require("react/jsx-runtime");
-var VIDEO_SETTINGS_BAR_INSET = 8;
-var OVERLAY_BUTTON_STYLE = {
-  pointerEvents: "auto",
-  fontFamily: "Inter, sans-serif",
-  fontSize: 12,
-  color: "#000"
-};
 var REPLACE_BUTTON_INSET = 12;
 function replaceButtonMode(image, button) {
   if (!button.fullWidth || !button.height) return "none";
@@ -13473,7 +13440,6 @@ 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",
@@ -13503,7 +13469,7 @@ function MediaOverlay({
         "data-ohw-media-skeleton": "",
         "aria-hidden": true,
         style: { ...box, pointerEvents: "none" },
-        children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("style", { children: MEDIA_SKELETON_CSS })
+        children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("style", { children: SKELETON_CSS })
       }
     );
   }
@@ -13572,10 +13538,11 @@ function MediaOverlay({
         className: "flex items-center justify-center cursor-pointer",
         style: {
           ...box,
-          // 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",
+          // 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",
           // 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)",
@@ -13602,17 +13569,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 }),
-                replaceLabel
+                isVideo ? "Replace video" : "Replace image"
               ]
             }
           ),
-          showChrome && replaceMode !== "none" && /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
+          replaceMode === "none" || cueOnly ? null : /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
             Button,
             {
               "data-ohw-media-overlay": "",
               variant: "outline",
               size: "sm",
-              "aria-label": replaceLabel,
+              "aria-label": isVideo ? "Replace video" : "Replace image",
               className: "gap-1.5 cursor-pointer hover:bg-background",
               style: {
                 ...OVERLAY_BUTTON_STYLE,
@@ -13635,7 +13602,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" ? replaceLabel : null
+                replaceMode === "full" ? isVideo ? "Replace video" : hover.elementType === "bg-image" ? "Replace background" : "Replace image" : null
               ]
             }
           )
@@ -15932,17 +15899,6 @@ function setCarouselSlideAsset(tree, index, assetId) {
     return true;
   });
 }
-function carouselAutoplay(tree) {
-  return findCarouselBlock(tree)?.slots?.autoplay === true;
-}
-function setCarouselAutoplay(tree, on) {
-  return withCarousel(tree, (block) => {
-    const slots = { ...block.slots, autoplay: on };
-    if (!on) delete slots.interval;
-    block.slots = slots;
-    return true;
-  });
-}
 
 // src/ui/ai-section/AiFadeCarouselOverlay.tsx
 var import_jsx_runtime22 = require("react/jsx-runtime");
@@ -16056,85 +16012,10 @@ function Pill4({ label, onClick, disabled }) {
     }
   );
 }
-function TogglePill({
-  label,
-  on,
-  onToggle,
-  disabled
-}) {
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
-    "button",
-    {
-      type: "button",
-      role: "switch",
-      "aria-checked": on,
-      onClick: onToggle,
-      disabled,
-      title: on ? `${label} on \u2014 click to turn off` : `${label} off \u2014 click to turn on`,
-      style: {
-        height: 28,
-        padding: "0 8px 0 10px",
-        display: "inline-flex",
-        alignItems: "center",
-        gap: 8,
-        borderRadius: 999,
-        border: "none",
-        cursor: disabled ? "default" : "pointer",
-        background: "#ffffff",
-        color: OHW_BLUE_DARK4,
-        opacity: disabled ? 0.4 : 1,
-        fontSize: 12,
-        lineHeight: "16px",
-        fontFamily: "Figtree, ui-sans-serif, system-ui, sans-serif",
-        whiteSpace: "nowrap",
-        flex: "0 0 auto"
-      },
-      children: [
-        label,
-        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
-          "span",
-          {
-            "aria-hidden": true,
-            style: {
-              position: "relative",
-              width: 26,
-              height: 15,
-              borderRadius: 999,
-              flex: "0 0 auto",
-              // Off is a grey track, not a washed-out blue: the pill's own white background already
-              // carries the brand colour in the text, and a pale blue track next to it read as
-              // "disabled control" rather than "switch that is off".
-              background: on ? OHW_BLUE_DARK4 : "#CBD5E1",
-              transition: "background 120ms ease"
-            },
-            children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
-              "span",
-              {
-                style: {
-                  position: "absolute",
-                  top: 2,
-                  left: on ? 13 : 2,
-                  width: 11,
-                  height: 11,
-                  borderRadius: "50%",
-                  background: "#ffffff",
-                  boxShadow: "0 1px 2px rgba(0,0,0,0.3)",
-                  transition: "left 120ms ease"
-                }
-              }
-            )
-          }
-        )
-      ]
-    }
-  );
-}
 function CarouselSlideToolbar({
   pending,
   error,
-  autoplay,
-  onChangeImage,
-  onToggleAutoplay
+  onChangeImage
 }) {
   return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
     "div",
@@ -16151,18 +16032,11 @@ function CarouselSlideToolbar({
         padding: 8,
         borderRadius: 12,
         boxShadow: "0 8px 24px rgba(0,0,0,0.25)",
-        // Not dimmed while pending, only inert. The toolbar used to drop to 0.6 opacity for the
-        // length of the validate round-trip, which on a local backend is short enough that the
-        // autoplay toggle just flashed — a dim and an un-dim with nothing in between. Progress is
-        // reported where the change is: the switch moves at once (optimistically), and an image
-        // swap raises the skeleton over the slide.
-        pointerEvents: pending ? "none" : "auto"
+        pointerEvents: pending ? "none" : "auto",
+        opacity: pending ? 0.6 : 1
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { style: { display: "flex", gap: 6, alignItems: "center" }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Pill4, { label: "Change Image", onClick: onChangeImage }),
-          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(TogglePill, { label: "Autoplay", on: autoplay, onToggle: onToggleAutoplay })
-        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Pill4, { label: "Change Image", onClick: onChangeImage }),
         error && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { style: { color: "#FCA5A5", fontSize: 11, maxWidth: 220, textAlign: "center" }, children: error })
       ]
     }
@@ -16178,24 +16052,8 @@ function AiFadeCarouselOverlay({
   const [active, setActive] = (0, import_react12.useState)(null);
   const [pending, setPending] = (0, import_react12.useState)(false);
   const [error, setError] = (0, import_react12.useState)(null);
-  const [autoplayOverride, setAutoplayOverride] = (0, import_react12.useState)(null);
-  const [swapping, setSwapping] = (0, import_react12.useState)(null);
-  const skeletonRef = (0, import_react12.useRef)(null);
   const activeRef = (0, import_react12.useRef)(null);
   activeRef.current = active;
-  (0, import_react12.useEffect)(() => {
-    setAutoplayOverride(null);
-  }, [active?.sectionId, active?.index]);
-  (0, import_react12.useEffect)(() => {
-    if (!swapping?.fadingOut || !skeletonRef.current) return;
-    const anim = skeletonRef.current.animate([{ opacity: 1 }, { opacity: 0 }], {
-      duration: MEDIA_UPLOAD_FADE_MS,
-      easing: "ease-out",
-      fill: "forwards"
-    });
-    anim.finished.then(() => setSwapping(null)).catch(() => setSwapping(null));
-    return () => anim.cancel();
-  }, [swapping?.fadingOut]);
   (0, import_react12.useEffect)(() => {
     const onMove = (e) => {
       const t = e.target;
@@ -16336,27 +16194,6 @@ function AiFadeCarouselOverlay({
         children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_lucide_react11.Star, { size: 14, style: { pointerEvents: "none" } })
       }
     ),
-    swapping && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
-      "div",
-      {
-        ref: skeletonRef,
-        "data-ohw-bridge": "",
-        "data-ohw-media-skeleton": "",
-        "aria-hidden": true,
-        style: {
-          position: "fixed",
-          top: swapping.rect.top,
-          left: swapping.rect.left,
-          width: swapping.rect.width,
-          height: swapping.rect.height,
-          // Under the toolbar (2147483647) so its controls stay visible and clickable over the
-          // slide being swapped, and inert so it cannot eat the click that dismisses them.
-          zIndex: 2147483646,
-          pointerEvents: "none"
-        },
-        children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("style", { children: MEDIA_SKELETON_CSS })
-      }
-    ),
     activeItemRect && active && activeEntry && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
       ItemInteractionLayer,
       {
@@ -16367,36 +16204,14 @@ function AiFadeCarouselOverlay({
           {
             pending,
             error,
-            autoplay: autoplayOverride ?? carouselAutoplay(activeEntry.tree),
-            onToggleAutoplay: () => {
-              const next = !(autoplayOverride ?? carouselAutoplay(activeEntry.tree));
-              setAutoplayOverride(next);
-              void runMutation(active.sectionId, (tree) => setCarouselAutoplay(tree, next)).then(
-                (ok) => {
-                  if (!ok) setAutoplayOverride(null);
-                }
-              );
-            },
             onChangeImage: () => {
-              void requestAssetPick2(postToParent2).then(async (picked) => {
+              void requestAssetPick2(postToParent2).then((picked) => {
                 if (!picked) return;
-                const slideRect = readRect5(active);
-                if (slideRect) setSwapping({ rect: slideRect, fadingOut: false });
-                const ok = await runMutation(
+                void runMutation(
                   active.sectionId,
                   (tree) => setCarouselSlideAsset(tree, active.index, picked.assetId),
                   { [picked.assetId]: picked.url }
                 );
-                if (!ok) {
-                  setSwapping(null);
-                  return;
-                }
-                const preload = new Image();
-                const done = () => setSwapping((s) => s ? { ...s, fadingOut: true } : s);
-                preload.onload = done;
-                preload.onerror = done;
-                preload.src = picked.url;
-                if (preload.complete) done();
               });
             }
           }
@@ -19867,7 +19682,6 @@ function readLogoSizeState(content, placement) {
 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");
@@ -23359,7 +23173,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") || el.hasAttribute("data-ohw-footer-col") || el.hasAttribute("data-ohw-footer-column") || isFooterLinksContainer(el) || isInferredFooterGroup2(el)) {
+  if (el.hasAttribute("data-ohw-nav-container") || el.hasAttribute("data-ohw-nav-drawer") || isFooterLinksContainer(el)) {
     return getNavigationRoot(el);
   }
   return null;
@@ -23581,6 +23395,7 @@ 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;
@@ -24560,6 +24375,21 @@ 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);
@@ -24585,21 +24415,6 @@ 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);
@@ -24608,18 +24423,7 @@ 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;
@@ -26298,7 +26102,6 @@ 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);
@@ -26308,12 +26111,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;
         }
@@ -26527,18 +26330,17 @@ 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;
           }
@@ -26794,11 +26596,26 @@ 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)(() => {
@@ -27093,13 +26910,6 @@ 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();
       }
@@ -27120,6 +26930,13 @@ 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}]`);
@@ -27499,9 +27316,6 @@ function OhhwellsBridge() {
         setHoveredItemRect(null);
         hoveredNavContainerRef.current = null;
         setHoveredNavContainerRect(null);
-        siblingHintElRef.current = null;
-        setSiblingHintRect(null);
-        setSiblingHintRects([]);
         return;
       }
       {
@@ -27622,6 +27436,7 @@ function OhhwellsBridge() {
             hoveredNavContainerRef.current = null;
             setHoveredNavContainerRect(null);
             hoveredItemElRef.current = editable;
+            setHoveredItemRect(isSelectedForHoverRef.current(editable) ? null : editable.getBoundingClientRect());
           }
         }
       }
@@ -28331,11 +28146,7 @@ function OhhwellsBridge() {
     };
     const handleMouseMove = (e) => {
       const { clientX, clientY } = e;
-      if (pointOwnedByFloatingPanel(clientX, clientY)) {
-        dismissImageHover();
-        clearImageHover();
-        return;
-      }
+      if (pointOwnedByFloatingPanel(clientX, clientY)) return;
       if (isNavDrawerOpen() && isPointOutsideOpenDrawer(clientX, clientY)) {
         document.querySelectorAll("[data-ohw-hovered]").forEach((el) => el.removeAttribute("data-ohw-hovered"));
         formHoverElRef.current = null;
@@ -28364,12 +28175,7 @@ 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;
@@ -28381,11 +28187,7 @@ 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)) {
-        dismissImageHover();
-        clearImageHover();
-        return;
-      }
+      if (pointOwnedByFloatingPanel(clientX, clientY)) return;
       if (isNavDrawerOpen() && isPointOutsideOpenDrawer(clientX, clientY)) return;
       if (probeSocialsRowAt(clientX, clientY)) return;
       probeSectionGapAt(clientX, clientY);
@@ -28737,7 +28539,6 @@ 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);
@@ -28751,12 +28552,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;
         }
@@ -29293,12 +29094,6 @@ function OhhwellsBridge() {
         closeLinkPopoverRef.current();
         return;
       }
-      if (floatingPanelOpenRef.current) {
-        setFloatingPanelRef.current(null);
-        deselectRef.current();
-        deactivateRef.current();
-        return;
-      }
       deselectRef.current();
       deactivateRef.current();
       clearMediaSelectionRef.current();
@@ -30061,10 +29856,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);
@@ -30358,7 +30153,7 @@ function OhhwellsBridge() {
       postToParent2({
         type: "ow:ready",
         version: "1",
-        bridgeVersion: "0.1.132",
+        bridgeVersion: "0.1.130",
         path: pathname,
         nodes: collectEditableNodes(editContentRef.current),
         sections