@ohhwells/bridge 0.1.14 → 0.1.16-next.8

package/dist/index.cjs

@@ -3435,7 +3435,9 @@ function ToggleGroupItem({
     Toggle,
     {
       pressed: groupValue === value,
-      onPressedChange: () => onValueChange(value),
+      onPressedChange: (pressed) => {
+        if (pressed) onValueChange(value);
+      },
       className: cn(
         "text-foreground cursor-pointer hover:bg-transparent hover:text-foreground",
         "data-[state=on]:bg-background data-[state=on]:shadow-sm",
@@ -3470,8 +3472,30 @@ function isEditSessionActive() {
   return new URLSearchParams(q).get("mode") === "edit";
 }
 
-// src/OhhwellsBridge.tsx
+// src/ui/badge.tsx
 var import_jsx_runtime3 = require("react/jsx-runtime");
+var badgeVariants = cva(
+  "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  {
+    variants: {
+      variant: {
+        default: "border-transparent bg-primary text-primary-foreground",
+        secondary: "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        destructive: "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
+        outline: "text-foreground"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+function Badge({ className, variant, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: cn(badgeVariants({ variant }), className), ...props });
+}
+
+// src/OhhwellsBridge.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
 var PRIMARY = "#0885FE";
 var IMAGE_FADE_MS = 300;
 function runOpacityFade(el, onDone) {
@@ -3679,7 +3703,7 @@ var TOOLBAR_GROUPS = [
 ];
 function GlowFrame({ rect, elRef }) {
   const GAP = 6;
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
     "div",
     {
       ref: elRef,
@@ -3730,7 +3754,7 @@ function FloatingToolbar({
   activeCommands
 }) {
   const { top, left, transform } = calcToolbarPos(rect, parentScroll);
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
     "div",
     {
       ref: elRef,
@@ -3753,11 +3777,11 @@ function FloatingToolbar({
         pointerEvents: "auto",
         whiteSpace: "nowrap"
       },
-      children: TOOLBAR_GROUPS.map((btns, gi) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_react.default.Fragment, { children: [
-        gi > 0 && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { style: { display: "block", width: 1, height: 24, background: "#E7E5E4", flexShrink: 0 } }),
+      children: TOOLBAR_GROUPS.map((btns, gi) => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_react.default.Fragment, { children: [
+        gi > 0 && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { style: { display: "block", width: 1, height: 24, background: "#E7E5E4", flexShrink: 0 } }),
         btns.map((btn) => {
           const isActive = activeCommands.has(btn.cmd);
-          return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
             "button",
             {
               title: btn.title,
@@ -3783,7 +3807,7 @@ function FloatingToolbar({
                 flexShrink: 0,
                 padding: 6
               },
-              children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+              children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
                 "svg",
                 {
                   width: "16",
@@ -3816,7 +3840,7 @@ function StateToggle({
   states,
   onStateChange
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
     ToggleGroup,
     {
       "data-ohw-state-toggle": "",
@@ -3830,7 +3854,7 @@ function StateToggle({
         left: rect.right - 8,
         transform: "translateX(-100%)"
       },
-      children: states.map((state) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ToggleGroupItem, { value: state, children: state }, state))
+      children: states.map((state) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ToggleGroupItem, { value: state, size: "sm", children: state }, state))
     }
   );
 }
@@ -3840,20 +3864,19 @@ function OhhwellsBridge() {
   const router = (0, import_navigation.useRouter)();
   const searchParams = (0, import_navigation.useSearchParams)();
   const isEditMode = isEditSessionActive();
-  (0, import_react.useEffect)(() => {
-    if (!isEditMode) return;
-    const preconnect1 = Object.assign(document.createElement("link"), { rel: "preconnect", href: "https://fonts.googleapis.com" });
-    const preconnect2 = Object.assign(document.createElement("link"), { rel: "preconnect", href: "https://fonts.gstatic.com", crossOrigin: "" });
-    const stylesheet = Object.assign(document.createElement("link"), { rel: "stylesheet", href: "https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&display=swap" });
-    document.head.append(preconnect1, preconnect2, stylesheet);
-    return () => {
-      preconnect1.remove();
-      preconnect2.remove();
-      stylesheet.remove();
-    };
-  }, [isEditMode]);
   const [bridgeRoot, setBridgeRoot] = (0, import_react.useState)(null);
   (0, import_react.useEffect)(() => {
+    const figtreeFontId = "ohw-figtree-font";
+    if (!document.getElementById(figtreeFontId)) {
+      const preconnect1 = Object.assign(document.createElement("link"), { rel: "preconnect", href: "https://fonts.googleapis.com" });
+      const preconnect2 = Object.assign(document.createElement("link"), { rel: "preconnect", href: "https://fonts.gstatic.com", crossOrigin: "" });
+      const stylesheet = Object.assign(document.createElement("link"), {
+        id: figtreeFontId,
+        rel: "stylesheet",
+        href: "https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&display=swap"
+      });
+      document.head.append(preconnect1, preconnect2, stylesheet);
+    }
     const el = document.createElement("div");
     el.setAttribute("data-ohw-bridge-root", "");
     el.setAttribute("data-ohw-bridge", "");
@@ -3884,6 +3907,10 @@ function OhhwellsBridge() {
   const toolbarElRef = (0, import_react.useRef)(null);
   const glowElRef = (0, import_react.useRef)(null);
   const hoveredImageRef = (0, import_react.useRef)(null);
+  const hoveredImageHasTextOverlapRef = (0, import_react.useRef)(false);
+  const hoveredGapRef = (0, import_react.useRef)(null);
+  const imageUnhoverTimerRef = (0, import_react.useRef)(null);
+  const imageShowTimerRef = (0, import_react.useRef)(null);
   const editStylesRef = (0, import_react.useRef)(null);
   const activateRef = (0, import_react.useRef)(() => {
   });
@@ -3897,6 +3924,7 @@ function OhhwellsBridge() {
   const [toggleState, setToggleState] = (0, import_react.useState)(null);
   const [maxBadge, setMaxBadge] = (0, import_react.useState)(null);
   const [activeCommands, setActiveCommands] = (0, import_react.useState)(/* @__PURE__ */ new Set());
+  const [sectionGap, setSectionGap] = (0, import_react.useState)(null);
   (0, import_react.useEffect)(() => {
     const update = () => {
       const el = activeElRef.current;
@@ -3905,6 +3933,12 @@ function OhhwellsBridge() {
         if (!prev || !activeStateElRef.current) return prev;
         return { ...prev, rect: activeStateElRef.current.getBoundingClientRect() };
       });
+      setSectionGap((prev) => {
+        if (!prev) return prev;
+        const anchor = document.querySelector(`[data-ohw-section="${prev.insertAfter}"]`);
+        if (!anchor) return prev;
+        return { ...prev, y: anchor.getBoundingClientRect().bottom };
+      });
     };
     const vvp = window.visualViewport;
     if (!vvp) return;
@@ -3946,6 +3980,10 @@ function OhhwellsBridge() {
   const activate = (0, import_react.useCallback)((el) => {
     if (activeElRef.current === el) return;
     deactivate();
+    if (hoveredImageRef.current) {
+      hoveredImageRef.current = null;
+      postToParentRef.current({ type: "ow:image-unhover" });
+    }
     el.setAttribute("contenteditable", "true");
     el.removeAttribute("data-ohw-hovered");
     activeElRef.current = el;
@@ -3993,7 +4031,7 @@ function OhhwellsBridge() {
     }
     let cancelled = false;
     setFetchState("loading");
-    const apiUrl = globalThis.process?.env?.NEXT_PUBLIC_FLOWOPS_API_URL ?? "http://localhost:4005";
+    const apiUrl = process.env.NEXT_PUBLIC_FLOWOPS_API_URL ?? "https://flowops-backend-staging-2yfdh7pwpq-as.a.run.app";
     fetch(`${apiUrl}/api/public/sites/${subdomain}/content`, { cache: "no-store" }).then((r2) => r2.ok ? r2.json() : null).then((data) => {
       if (cancelled) return;
       const content = data?.content ?? {};
@@ -4120,6 +4158,7 @@ function OhhwellsBridge() {
       [data-ohw-editable][contenteditable] *::selection { background: ${PRIMARY}59 !important; }
       [data-ohw-editable-state], [data-ohw-editable-state] * { pointer-events: none !important; }
       [data-ohw-editable-state][data-ohw-active-state] [data-ohw-editable] { pointer-events: auto !important; }
+      [data-ohw-editable-state][data-ohw-active-state][data-ohw-editable] { pointer-events: auto !important; }
     `;
       const forceHover = document.createElement("style");
       forceHover.setAttribute("data-ohw-active-state-style", "");
@@ -4146,10 +4185,12 @@ function OhhwellsBridge() {
       if (editable) {
         if (editable.dataset.ohwEditable === "image" || editable.dataset.ohwEditable === "bg-image") {
           e.preventDefault();
+          e.stopPropagation();
           postToParentRef.current({ type: "ow:image-pick", key: editable.dataset.ohwKey ?? "" });
           return;
         }
         e.preventDefault();
+        e.stopPropagation();
         activateRef.current(editable);
         return;
       }
@@ -4212,12 +4253,15 @@ function OhhwellsBridge() {
       }
       return { top, left, width: Math.max(0, right - left), height: Math.max(0, bottom - top) };
     };
-    const postImageHover = (imgEl, isDragOver = false) => {
+    const postImageHover = (imgEl, isDragOver = false, forceTextOverlap) => {
       const r2 = getVisibleRect(imgEl);
+      const hasTextOverlap = forceTextOverlap ?? false;
+      hoveredImageHasTextOverlapRef.current = hasTextOverlap;
       postToParentRef.current({
         type: "ow:image-hover",
         key: imgEl.dataset.ohwKey ?? "",
         rect: { top: r2.top, left: r2.left, width: r2.width, height: r2.height },
+        hasTextOverlap,
         ...isDragOver ? { isDragOver: true } : {}
       });
       const track = imgEl.closest("[data-ohw-hover-pause]");
@@ -4264,7 +4308,7 @@ function OhhwellsBridge() {
       }
       return smallest;
     };
-    const probeImageAt = (clientX, clientY, isDragOver = false, fromParentViewport = false, fromOverlay = false) => {
+    const probeImageAt = (clientX, clientY, isDragOver = false, fromParentViewport = false) => {
       const toggleEl = document.querySelector("[data-ohw-state-toggle]");
       if (toggleEl) {
         const { x, y } = toProbeCoords(clientX, clientY, fromParentViewport);
@@ -4290,33 +4334,52 @@ function OhhwellsBridge() {
           }
           return;
         }
-        const topEditable = topEl?.closest("[data-ohw-editable]");
-        if (topEditable && topEditable.dataset.ohwEditable !== "image" && topEditable.dataset.ohwEditable !== "bg-image") {
-          if (topEditable.hasAttribute("contenteditable") && fromOverlay) return;
-          if (hoveredImageRef.current) {
-            hoveredImageRef.current = null;
-            resumeAnimTracks();
-            postToParentRef.current({ type: "ow:image-unhover" });
-          }
-          document.querySelectorAll("[data-ohw-hovered]").forEach((el) => el.removeAttribute("data-ohw-hovered"));
-          topEditable.setAttribute("data-ohw-hovered", "");
-          return;
+        const isStateCardImage = !!imgEl.closest("[data-ohw-editable-state]");
+        const textEditable = Array.from(
+          document.querySelectorAll('[data-ohw-editable]:not([data-ohw-editable="image"]):not([data-ohw-editable="bg-image"])')
+        ).find((el) => {
+          const er = el.getBoundingClientRect();
+          return x >= er.left && x <= er.right && y >= er.top && y <= er.bottom;
+        });
+        if (imageUnhoverTimerRef.current) {
+          clearTimeout(imageUnhoverTimerRef.current);
+          imageUnhoverTimerRef.current = null;
+        }
+        if (imageShowTimerRef.current) {
+          clearTimeout(imageShowTimerRef.current);
+          imageShowTimerRef.current = null;
         }
-        const activeHovered = document.querySelector("[data-ohw-hovered]");
-        if (activeHovered) {
-          const outlinePad = 8;
-          const hr = activeHovered.getBoundingClientRect();
-          if (x >= hr.left - outlinePad && x <= hr.right + outlinePad && y >= hr.top - outlinePad && y <= hr.bottom + outlinePad) {
+        if (textEditable) {
+          if (textEditable.hasAttribute("contenteditable")) {
             if (hoveredImageRef.current) {
               hoveredImageRef.current = null;
+              hoveredImageHasTextOverlapRef.current = false;
               resumeAnimTracks();
               postToParentRef.current({ type: "ow:image-unhover" });
             }
             return;
           }
+          if (isStateCardImage) {
+            if (imgEl !== hoveredImageRef.current || !hoveredImageHasTextOverlapRef.current) {
+              hoveredImageRef.current = imgEl;
+              postImageHover(imgEl, isDragOver, true);
+            }
+            document.querySelectorAll("[data-ohw-hovered]").forEach((el) => el.removeAttribute("data-ohw-hovered"));
+            textEditable.setAttribute("data-ohw-hovered", "");
+            return;
+          }
+          if (hoveredImageRef.current) {
+            hoveredImageRef.current = null;
+            hoveredImageHasTextOverlapRef.current = false;
+            resumeAnimTracks();
+            postToParentRef.current({ type: "ow:image-unhover" });
+          }
+          document.querySelectorAll("[data-ohw-hovered]").forEach((el) => el.removeAttribute("data-ohw-hovered"));
+          textEditable.setAttribute("data-ohw-hovered", "");
+          return;
         }
         document.querySelectorAll("[data-ohw-hovered]").forEach((el) => el.removeAttribute("data-ohw-hovered"));
-        if (imgEl !== hoveredImageRef.current) {
+        if (imgEl !== hoveredImageRef.current || hoveredImageHasTextOverlapRef.current) {
           hoveredImageRef.current = imgEl;
           postImageHover(imgEl, isDragOver);
         } else if (isDragOver) {
@@ -4325,9 +4388,29 @@ function OhhwellsBridge() {
       } else {
         const inIframeView = clientX >= 0 && clientY >= 0 && clientX <= window.innerWidth && clientY <= window.innerHeight;
         if (!inIframeView) return;
-        hoveredImageRef.current = null;
-        resumeAnimTracks();
-        postToParentRef.current({ type: "ow:image-unhover" });
+        if (imageUnhoverTimerRef.current) {
+          clearTimeout(imageUnhoverTimerRef.current);
+          imageUnhoverTimerRef.current = null;
+        }
+        if (imageShowTimerRef.current) {
+          clearTimeout(imageShowTimerRef.current);
+          imageShowTimerRef.current = null;
+        }
+        if (hoveredImageRef.current) {
+          hoveredImageRef.current = null;
+          hoveredImageHasTextOverlapRef.current = false;
+          resumeAnimTracks();
+          postToParentRef.current({ type: "ow:image-unhover" });
+        }
+        const { x, y } = toProbeCoords(clientX, clientY, fromParentViewport);
+        const textEl = Array.from(
+          document.querySelectorAll('[data-ohw-editable]:not([data-ohw-editable="image"]):not([data-ohw-editable="bg-image"])')
+        ).find((el) => {
+          const er = el.getBoundingClientRect();
+          return x >= er.left && x <= er.right && y >= er.top && y <= er.bottom;
+        });
+        document.querySelectorAll("[data-ohw-hovered]").forEach((el) => el.removeAttribute("data-ohw-hovered"));
+        if (textEl && !textEl.hasAttribute("contenteditable")) textEl.setAttribute("data-ohw-hovered", "");
       }
     };
     const probeHoverCardsAt = (clientX, clientY, fromParentViewport = false) => {
@@ -4346,28 +4429,54 @@ function OhhwellsBridge() {
       }) ?? null;
       const currentLocked = activeStateElRef.current?.hasAttribute("data-ohw-active-state") ? activeStateElRef.current : null;
       const active = found ?? currentLocked;
+      const prev = activeStateElRef.current;
       activeStateElRef.current = active;
-      document.querySelectorAll("[data-ohw-state-hovered]").forEach((el) => el.removeAttribute("data-ohw-state-hovered"));
-      if (active) {
-        if (active.querySelector("[data-ohw-state-view]")) active.setAttribute("data-ohw-state-hovered", "");
-        const states = deriveStates(active.dataset.ohwEditableState ?? "");
-        const activeState = active.hasAttribute("data-ohw-active-state") ? (active.getAttribute("data-ohw-active-state") ?? "Default").charAt(0).toUpperCase() + (active.getAttribute("data-ohw-active-state") ?? "").slice(1) : "Default";
-        setToggleState({ rect: active.getBoundingClientRect(), activeState, states });
-      } else {
-        setToggleState(null);
+      if (active !== prev) {
+        if (prev) prev.removeAttribute("data-ohw-state-hovered");
+        if (active) {
+          if (active.querySelector("[data-ohw-state-view]")) active.setAttribute("data-ohw-state-hovered", "");
+          const states = deriveStates(active.dataset.ohwEditableState ?? "");
+          const activeState = active.hasAttribute("data-ohw-active-state") ? (active.getAttribute("data-ohw-active-state") ?? "Default").charAt(0).toUpperCase() + (active.getAttribute("data-ohw-active-state") ?? "").slice(1) : "Default";
+          setToggleState({ rect: active.getBoundingClientRect(), activeState, states });
+        } else {
+          setToggleState(null);
+        }
+      }
+    };
+    const probeSectionGapAt = (clientX, clientY, fromParentViewport = false) => {
+      const { y } = toProbeCoords(clientX, clientY, fromParentViewport);
+      const sections = Array.from(document.querySelectorAll("[data-ohw-section]")).sort((a, b) => a.getBoundingClientRect().top - b.getBoundingClientRect().top);
+      const ZONE = 20;
+      for (let i = 0; i < sections.length; i++) {
+        const a = sections[i];
+        const b = sections[i + 1] ?? null;
+        const boundaryY = a.getBoundingClientRect().bottom;
+        if (Math.abs(y - boundaryY) <= ZONE) {
+          const insertAfter = a.dataset.ohwSection ?? "";
+          const insertBefore = b?.dataset.ohwSection ?? null;
+          hoveredGapRef.current = { insertAfter, insertBefore };
+          setSectionGap({ insertAfter, insertBefore, y: boundaryY });
+          return;
+        }
+      }
+      if (hoveredGapRef.current) {
+        hoveredGapRef.current = null;
+        setSectionGap(null);
       }
     };
     const handleMouseMove = (e) => {
       const { clientX, clientY } = e;
       probeImageAt(clientX, clientY);
       probeHoverCardsAt(clientX, clientY);
+      probeSectionGapAt(clientX, clientY);
     };
     const handlePointerSync = (e) => {
       if (e.data?.type !== "ow:pointer-sync") return;
-      const { clientX, clientY, fromOverlay } = e.data;
+      const { clientX, clientY } = e.data;
       if (typeof clientX !== "number" || typeof clientY !== "number") return;
-      probeImageAt(clientX, clientY, false, false, fromOverlay ?? false);
+      probeImageAt(clientX, clientY);
       probeHoverCardsAt(clientX, clientY);
+      probeSectionGapAt(clientX, clientY);
     };
     const handleDragOver = (e) => {
       e.preventDefault();
@@ -4379,7 +4488,8 @@ function OhhwellsBridge() {
       e.dataTransfer.dropEffect = "copy";
       if (hoveredImageRef.current !== el) {
         hoveredImageRef.current = el;
-        postImageHover(el, true);
+        const isStateCard = !!el.closest("[data-ohw-editable-state]");
+        postImageHover(el, true, isStateCard ? true : void 0);
       }
     };
     const handleDragLeave = (e) => {
@@ -4565,11 +4675,13 @@ function OhhwellsBridge() {
         setToggleState((prev) => prev ? { ...prev, rect } : null);
       }
       if (hoveredImageRef.current) {
-        const r2 = hoveredImageRef.current.getBoundingClientRect();
+        const el = hoveredImageRef.current;
+        const r2 = el.getBoundingClientRect();
         postToParentRef.current({
           type: "ow:image-hover",
-          key: hoveredImageRef.current.dataset.ohwKey ?? "",
-          rect: { top: r2.top, left: r2.left, width: r2.width, height: r2.height }
+          key: el.dataset.ohwKey ?? "",
+          rect: { top: r2.top, left: r2.left, width: r2.width, height: r2.height },
+          hasTextOverlap: hoveredImageHasTextOverlapRef.current
         });
       }
     };
@@ -4643,12 +4755,49 @@ function OhhwellsBridge() {
       parentScrollRef.current = { iframeOffsetTop, headerH, canvasH };
       if (activeElRef.current) applyToolbarPos(activeElRef.current.getBoundingClientRect());
     };
+    const handleClickAt = (e) => {
+      if (e.data?.type !== "ow:click-at") return;
+      const { clientX, clientY } = e.data;
+      const allImages = Array.from(
+        document.querySelectorAll('[data-ohw-editable="image"], [data-ohw-editable="bg-image"]')
+      ).filter((el) => !!el.closest("[data-ohw-editable-state]"));
+      const stateCardImage = allImages.find((el) => {
+        const ownerCard = el.closest("[data-ohw-editable-state]");
+        if (ownerCard) {
+          const inHoverState = ownerCard.getAttribute("data-ohw-active-state") === "hover";
+          const elState = el.dataset.ohwState;
+          if (el === ownerCard && inHoverState) return false;
+          if (elState === "default" && inHoverState) return false;
+          if (elState === "hover" && !inHoverState) return false;
+        }
+        const r2 = el.getBoundingClientRect();
+        return clientX >= r2.left && clientX <= r2.right && clientY >= r2.top && clientY <= r2.bottom;
+      });
+      if (stateCardImage) {
+        postToParentRef.current({ type: "ow:image-pick", key: stateCardImage.dataset.ohwKey ?? "" });
+        return;
+      }
+      const textEditable = Array.from(
+        document.querySelectorAll(
+          '[data-ohw-editable]:not([data-ohw-editable="image"]):not([data-ohw-editable="bg-image"])'
+        )
+      ).find((el) => {
+        const r2 = el.getBoundingClientRect();
+        return clientX >= r2.left && clientX <= r2.right && clientY >= r2.top && clientY <= r2.bottom;
+      });
+      if (textEditable) {
+        activateRef.current(textEditable);
+        return;
+      }
+      deactivateRef.current();
+    };
     window.addEventListener("message", handleSave);
     window.addEventListener("message", handleImageUrl);
     window.addEventListener("message", handleAnimLock);
     window.addEventListener("message", handleCanvasHeight);
     window.addEventListener("message", handleParentScroll);
     window.addEventListener("message", handlePointerSync);
+    window.addEventListener("message", handleClickAt);
     document.addEventListener("click", handleClick, true);
     document.addEventListener("paste", handlePaste, true);
     document.addEventListener("input", handleInput, true);
@@ -4682,10 +4831,13 @@ function OhhwellsBridge() {
       window.removeEventListener("message", handleCanvasHeight);
       window.removeEventListener("message", handleParentScroll);
       window.removeEventListener("message", handlePointerSync);
+      window.removeEventListener("message", handleClickAt);
       window.removeEventListener("message", handleHydrate);
       window.removeEventListener("message", handleDeactivate);
       autoSaveTimers.current.forEach(clearTimeout);
       autoSaveTimers.current.clear();
+      if (imageUnhoverTimerRef.current) clearTimeout(imageUnhoverTimerRef.current);
+      if (imageShowTimerRef.current) clearTimeout(imageShowTimerRef.current);
     };
   }, [isEditMode, refreshStateRules]);
   (0, import_react.useEffect)(() => {
@@ -4730,12 +4882,12 @@ function OhhwellsBridge() {
     setToggleState((prev) => prev ? { ...prev, activeState: state } : null);
   }, [deactivate]);
   return bridgeRoot ? (0, import_react_dom.createPortal)(
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
-      toolbarRect && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(GlowFrame, { rect: toolbarRect, elRef: glowElRef }),
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(FloatingToolbar, { rect: toolbarRect, parentScroll: parentScrollRef.current, elRef: toolbarElRef, onCommand: handleCommand, activeCommands })
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
+      toolbarRect && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(GlowFrame, { rect: toolbarRect, elRef: glowElRef }),
+        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(FloatingToolbar, { rect: toolbarRect, parentScroll: parentScrollRef.current, elRef: toolbarElRef, onCommand: handleCommand, activeCommands })
       ] }),
-      maxBadge && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+      maxBadge && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
         "div",
         {
           "data-ohw-max-badge": "",
@@ -4761,7 +4913,7 @@ function OhhwellsBridge() {
           ]
         }
       ),
-      toggleState && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      toggleState && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
         StateToggle,
         {
           rect: toggleState.rect,
@@ -4769,6 +4921,31 @@ function OhhwellsBridge() {
           states: toggleState.states,
           onStateChange: handleStateChange
         }
+      ),
+      sectionGap && /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+        "div",
+        {
+          "data-ohw-section-insert-line": "",
+          className: "fixed left-0 w-full z-2147483646 flex items-center pointer-events-none",
+          style: { top: sectionGap.y, transform: "translateY(-50%)" },
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "flex-1 bg-primary", style: { height: 3 } }),
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+              Badge,
+              {
+                className: "px-8 py-1 bg-primary hover:bg-primary text-primary-foreground text-xs font-medium shrink-0 rounded-full cursor-pointer pointer-events-auto",
+                onClick: () => {
+                  window.parent.postMessage(
+                    { type: "ow:add-section", insertAfter: sectionGap.insertAfter, insertBefore: sectionGap.insertBefore },
+                    "*"
+                  );
+                },
+                children: "Add Section"
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "flex-1 bg-primary", style: { height: 3 } })
+          ]
+        }
       )
     ] }),
     bridgeRoot