@ohhwells/bridge 0.1.132 → 0.1.134-next.362

package/dist/index.cjs

@@ -2656,6 +2656,19 @@ function quotedFont(font) {
   const cleaned = font.replace(/["']/g, "").trim();
   return cleaned ? `"${cleaned}"` : "sans-serif";
 }
+function themeFont(role, fallback) {
+  const quoted = quotedFont(fallback);
+  return role === "heading" ? `var(--brand-font-heading, var(--font-heading, var(--font-display, ${quoted})))` : `var(--brand-font-body, var(--font-body, ${quoted}))`;
+}
+function withThemeFonts(brand) {
+  return {
+    ...brand,
+    fonts: {
+      heading: themeFont("heading", brand.fonts.heading),
+      body: themeFont("body", brand.fonts.body)
+    }
+  };
+}
 function footerLogoStyle(fallbackFont, fallbackColor) {
   return {
     fontFamily: `var(--brand-font-heading, var(--font-heading, var(--font-display, ${quotedFont(fallbackFont)})))`,
@@ -2727,7 +2740,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
@@ -2743,8 +2756,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
@@ -2945,6 +2960,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,
@@ -2965,9 +3005,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;
@@ -2975,6 +3015,7 @@ function MediaBox({
       "span",
       {
         "data-ai-icon": refValue,
+        ...editAttrs,
         style: {
           display: "inline-flex",
           width: 48,
@@ -4159,18 +4200,25 @@ function FadeSlideshow({ node, ctx, path }) {
     (dir) => onInteract(stepViableSlide(index, failed, count, dir, loop)),
     [count, failed, index, loop, onInteract]
   );
+  const prefetchRef = import_react.default.useRef(prefetch);
+  import_react.default.useEffect(() => {
+    prefetchRef.current = prefetch;
+  });
+  import_react.default.useEffect(() => {
+    if (autoplay) hasInteractedRef.current = false;
+  }, [autoplay]);
   import_react.default.useEffect(() => {
     if (!autoplay) return;
     const id = window.setInterval(() => {
       if (hasInteractedRef.current || hoveredRef.current) return;
       setIndex((i) => loop ? (i + 1) % count : Math.min(count - 1, i + 1));
     }, intervalMs);
-    const warmId = window.setTimeout(() => prefetch(1 % count), Math.min(1500, intervalMs / 2));
+    const warmId = window.setTimeout(() => prefetchRef.current(1 % count), Math.min(1500, intervalMs / 2));
     return () => {
       window.clearInterval(id);
       window.clearTimeout(warmId);
     };
-  }, [autoplay, count, intervalMs, loop, prefetch]);
+  }, [autoplay, count, intervalMs, loop]);
   const hasMovedRef = import_react.default.useRef(false);
   import_react.default.useEffect(() => {
     if (!hasMovedRef.current) {
@@ -4461,7 +4509,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",
@@ -4721,7 +4769,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.
@@ -5044,7 +5092,7 @@ function AiTreeRenderer({
   if (!isRenderableTree(tree)) {
     return null;
   }
-  const resolvedBrand = brand ?? AI_DEFAULT_BRAND;
+  const resolvedBrand = withThemeFonts(brand ?? AI_DEFAULT_BRAND);
   const band = (tree.settings ?? {}).sectionBackground === "accent" ? accentBandContext(resolvedBrand) : null;
   const blockBrand = band?.brand ?? resolvedBrand;
   const placeholderMap = buildPlaceholderMap(tree);
@@ -5114,6 +5162,7 @@ function AiTreeRenderer({
       ...fillHeight ? { "data-ai-fill-height": "" } : {},
       ...needsOverlayClearance ? { "data-ai-overlay-clearance": "" } : {},
       ...bgAttrs,
+      "data-ai-responsive": "",
       style: {
         position: "relative",
         padding: `${padCss} 0`,
@@ -5127,12 +5176,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",
@@ -5149,7 +5199,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)",
@@ -5200,7 +5250,7 @@ function AiFooterRenderer({
   if (!isRenderableFooterTree(tree)) {
     return null;
   }
-  const resolvedBrand = brand ?? AI_DEFAULT_BRAND;
+  const resolvedBrand = withThemeFonts(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;
@@ -5805,9 +5855,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");
@@ -9023,7 +9074,7 @@ var isLabelWeight = (label) => label === "number" || label === "weight";
 var isLabelShadow = (label) => label === "shadow";
 var getDefaultConfig = () => {
   const themeColor = fromTheme("color");
-  const themeFont = fromTheme("font");
+  const themeFont2 = fromTheme("font");
   const themeText = fromTheme("text");
   const themeFontWeight = fromTheme("font-weight");
   const themeTracking = fromTheme("tracking");
@@ -9945,7 +9996,7 @@ var getDefaultConfig = () => {
        * @see https://tailwindcss.com/docs/font-family
        */
       "font-family": [{
-        font: [isArbitraryVariableFamilyName, isArbitraryFamilyName, themeFont]
+        font: [isArbitraryVariableFamilyName, isArbitraryFamilyName, themeFont2]
       }],
       /**
        * Font Feature Settings
@@ -13375,17 +13426,9 @@ var Button = React7.forwardRef(
 );
 Button.displayName = "Button";
 
-// src/ui/MediaOverlay.tsx
-var import_jsx_runtime16 = require("react/jsx-runtime");
+// src/ui/media-skeleton.ts
 var MEDIA_UPLOAD_FADE_MS = 300;
-var VIDEO_SETTINGS_BAR_INSET = 8;
-var OVERLAY_BUTTON_STYLE = {
-  pointerEvents: "auto",
-  fontFamily: "Inter, sans-serif",
-  fontSize: 12,
-  color: "#000"
-};
-var SKELETON_CSS = `
+var MEDIA_SKELETON_CSS = `
 @keyframes ohw-media-shimmer {
   0%   { transform: translateX(-100%); }
   100% { transform: translateX(100%); }
@@ -13402,6 +13445,16 @@ var 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";
@@ -13440,6 +13493,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",
@@ -13469,7 +13523,7 @@ function MediaOverlay({
         "data-ohw-media-skeleton": "",
         "aria-hidden": true,
         style: { ...box, pointerEvents: "none" },
-        children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("style", { children: SKELETON_CSS })
+        children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("style", { children: MEDIA_SKELETON_CSS })
       }
     );
   }
@@ -13538,11 +13592,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)",
@@ -13569,17 +13622,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,
@@ -13602,7 +13655,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
               ]
             }
           )
@@ -15899,6 +15952,17 @@ 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");
@@ -16012,10 +16076,85 @@ 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,
-  onChangeImage
+  autoplay,
+  onChangeImage,
+  onToggleAutoplay
 }) {
   return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
     "div",
@@ -16032,11 +16171,18 @@ function CarouselSlideToolbar({
         padding: 8,
         borderRadius: 12,
         boxShadow: "0 8px 24px rgba(0,0,0,0.25)",
-        pointerEvents: pending ? "none" : "auto",
-        opacity: pending ? 0.6 : 1
+        // 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"
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Pill4, { label: "Change Image", onClick: onChangeImage }),
+        /* @__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 })
+        ] }),
         error && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { style: { color: "#FCA5A5", fontSize: 11, maxWidth: 220, textAlign: "center" }, children: error })
       ]
     }
@@ -16052,8 +16198,24 @@ 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;
@@ -16194,6 +16356,27 @@ 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,
       {
@@ -16204,14 +16387,36 @@ 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((picked) => {
+              void requestAssetPick2(postToParent2).then(async (picked) => {
                 if (!picked) return;
-                void runMutation(
+                const slideRect = readRect5(active);
+                if (slideRect) setSwapping({ rect: slideRect, fadingOut: false });
+                const ok = await 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();
               });
             }
           }
@@ -19682,6 +19887,7 @@ 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");
@@ -23173,7 +23379,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;
@@ -23395,7 +23601,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;
@@ -24375,21 +24580,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);
@@ -24415,6 +24605,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);
@@ -24423,7 +24628,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;
@@ -26102,6 +26318,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);
@@ -26111,12 +26328,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;
         }
@@ -26330,17 +26547,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;
           }
@@ -26596,26 +26814,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)(() => {
@@ -26910,6 +27113,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();
       }
@@ -26930,13 +27140,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}]`);
@@ -27316,6 +27519,9 @@ function OhhwellsBridge() {
         setHoveredItemRect(null);
         hoveredNavContainerRef.current = null;
         setHoveredNavContainerRect(null);
+        siblingHintElRef.current = null;
+        setSiblingHintRect(null);
+        setSiblingHintRects([]);
         return;
       }
       {
@@ -27436,7 +27642,6 @@ function OhhwellsBridge() {
             hoveredNavContainerRef.current = null;
             setHoveredNavContainerRect(null);
             hoveredItemElRef.current = editable;
-            setHoveredItemRect(isSelectedForHoverRef.current(editable) ? null : editable.getBoundingClientRect());
           }
         }
       }
@@ -28146,7 +28351,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;
@@ -28175,7 +28384,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;
@@ -28187,7 +28401,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);
@@ -28539,6 +28757,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);
@@ -28552,12 +28771,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;
         }
@@ -29094,6 +29313,12 @@ function OhhwellsBridge() {
         closeLinkPopoverRef.current();
         return;
       }
+      if (floatingPanelOpenRef.current) {
+        setFloatingPanelRef.current(null);
+        deselectRef.current();
+        deactivateRef.current();
+        return;
+      }
       deselectRef.current();
       deactivateRef.current();
       clearMediaSelectionRef.current();
@@ -29856,10 +30081,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);
@@ -30153,7 +30378,7 @@ function OhhwellsBridge() {
       postToParent2({
         type: "ow:ready",
         version: "1",
-        bridgeVersion: "0.1.130",
+        bridgeVersion: "0.1.134",
         path: pathname,
         nodes: collectEditableNodes(editContentRef.current),
         sections