@ohhwells/bridge 0.1.49 → 0.1.50

package/dist/index.js

@@ -1,7 +1,7 @@
 "use client";
 
 // src/OhhwellsBridge.tsx
-import React11, { useCallback as useCallback4, useEffect as useEffect9, useLayoutEffect as useLayoutEffect3, useRef as useRef7, useState as useState8 } from "react";
+import React11, { useCallback as useCallback5, useEffect as useEffect9, useLayoutEffect as useLayoutEffect3, useRef as useRef7, useState as useState8 } from "react";
 import { createRoot } from "react-dom/client";
 import { flushSync } from "react-dom";
 
@@ -48,12 +48,13 @@ function useLinkHrefGuardian(...deps) {
 }
 
 // src/ui/SchedulingWidget.tsx
-import { useEffect, useId, useMemo, useRef, useState as useState2 } from "react";
+import { useCallback, useEffect, useId, useMemo, useRef, useState as useState2 } from "react";
 
 // src/ui/EmailCaptureModal.tsx
 import { useState } from "react";
 import { Dialog } from "radix-ui";
 import { jsx, jsxs } from "react/jsx-runtime";
+var isValidEmail = (value) => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value);
 function Spinner() {
   return /* @__PURE__ */ jsxs(
     "svg",
@@ -87,12 +88,17 @@ function EmailCaptureModal({ title, subtitle, onSubmit, onClose }) {
   const [error, setError] = useState(null);
   const isBook = title === "Confirm your spot";
   const handleSubmit = async () => {
-    if (!email.trim()) return;
+    const trimmed = email.trim();
+    if (!trimmed) return;
+    if (!isValidEmail(trimmed)) {
+      setError("Please enter a valid email address.");
+      return;
+    }
     setLoading(true);
     setError(null);
     try {
-      await onSubmit(email.trim());
-      setSubmittedEmail(email.trim());
+      await onSubmit(trimmed);
+      setSubmittedEmail(trimmed);
       setSuccess(true);
     } catch (e) {
       setError(e instanceof Error ? e.message : "Something went wrong. Please try again.");
@@ -167,7 +173,10 @@ function EmailCaptureModal({ title, subtitle, onSubmit, onClose }) {
                   {
                     type: "email",
                     value: email,
-                    onChange: (e) => setEmail(e.target.value),
+                    onChange: (e) => {
+                      setEmail(e.target.value);
+                      if (error) setError(null);
+                    },
                     onKeyDown: handleKeyDown,
                     placeholder: "hello@gmail.com",
                     autoFocus: true,
@@ -224,12 +233,20 @@ function formatClassTime(cls) {
   const em = endTotal % 60;
   return `${h}:${cls.startTime.minutes}-${eh}:${String(em).padStart(2, "0")}`;
 }
+function formatBookingLabel(cls) {
+  const price = cls.price;
+  const isFree = price === null || price === void 0 || `${price}` === "" || `${price}` === "0";
+  return isFree ? "Book for free" : `Book for ${cls.currency ?? ""} ${price}`.trim();
+}
 function getBookingsOnDate(cls, date) {
   if (!cls.bookings?.length) return 0;
-  const ds = date.toISOString().split("T")[0];
+  const target = new Date(date);
+  target.setHours(0, 0, 0, 0);
   return cls.bookings.filter((b) => {
     try {
-      return new Date(b.classDate).toISOString().split("T")[0] === ds;
+      const bookingDate = new Date(b.classDate);
+      bookingDate.setHours(0, 0, 0, 0);
+      return bookingDate.getTime() === target.getTime();
     } catch {
       return false;
     }
@@ -494,7 +511,7 @@ function ScheduleView({ schedule, dates, selectedIdx, onSelectDate, onOpenModal
                 }
               )
             ] }),
-            /* @__PURE__ */ jsx2("div", { className: "sm:hidden flex flex-col gap-px", children: isFull ? /* @__PURE__ */ jsx2("span", { className: "font-body text-sm text-(--color-dark,#200C02) opacity-80", children: "Full" }) : /* @__PURE__ */ jsxs2(Fragment, { children: [
+            cls.showAvailability !== false && /* @__PURE__ */ jsx2("div", { className: "sm:hidden flex flex-col gap-px", children: isFull ? /* @__PURE__ */ jsx2("span", { className: "font-body text-sm text-(--color-dark,#200C02) opacity-80", children: "Full" }) : /* @__PURE__ */ jsxs2(Fragment, { children: [
               /* @__PURE__ */ jsxs2("span", { className: "font-body text-sm text-(--color-dark,#200C02) opacity-80", children: [
                 available,
                 "/",
@@ -506,9 +523,17 @@ function ScheduleView({ schedule, dates, selectedIdx, onSelectDate, onOpenModal
           /* @__PURE__ */ jsxs2("div", { className: "flex flex-1 flex-col gap-2 min-w-0 sm:contents", children: [
             /* @__PURE__ */ jsxs2("div", { className: "flex-1 flex flex-col gap-2 min-w-0", children: [
               /* @__PURE__ */ jsx2("span", { className: "font-body text-base font-bold text-(--color-dark,#200C02) block truncate", children: cls.name }),
-              cls.hostName && /* @__PURE__ */ jsx2("span", { className: "font-body text-base font-normal text-(--color-dark,#200C02) opacity-80 block truncate", children: cls.hostName })
+              cls.hostName && /* @__PURE__ */ jsx2("span", { className: "font-body text-base font-normal text-(--color-dark,#200C02) opacity-80 block truncate", children: cls.hostName }),
+              cls.description && /* @__PURE__ */ jsx2(
+                "span",
+                {
+                  className: "font-body text-base font-normal text-(--color-dark,#200C02) opacity-80 block",
+                  style: { wordBreak: "break-word" },
+                  children: cls.description
+                }
+              )
             ] }),
-            /* @__PURE__ */ jsx2("div", { className: "hidden sm:flex w-14 shrink-0 flex-col gap-px", children: isFull ? /* @__PURE__ */ jsx2("span", { className: "font-body text-sm text-(--color-dark,#200C02) opacity-80", children: "Full" }) : /* @__PURE__ */ jsxs2(Fragment, { children: [
+            cls.showAvailability !== false && /* @__PURE__ */ jsx2("div", { className: "hidden sm:flex w-14 shrink-0 flex-col gap-px", children: isFull ? /* @__PURE__ */ jsx2("span", { className: "font-body text-sm text-(--color-dark,#200C02) opacity-80", children: "Full" }) : /* @__PURE__ */ jsxs2(Fragment, { children: [
               /* @__PURE__ */ jsxs2("span", { className: "font-body text-sm text-(--color-dark,#200C02) opacity-80", children: [
                 available,
                 "/",
@@ -533,7 +558,7 @@ function ScheduleView({ schedule, dates, selectedIdx, onSelectDate, onOpenModal
                   if (!cls.id) return;
                   onOpenModal?.(isFull ? "waitlist" : "book", cls.id, selectedDate);
                 },
-                children: isFull ? "Join Waitlist" : "Book Now"
+                children: isFull ? "Join Waitlist" : formatBookingLabel(cls)
               }
             )
           ] })
@@ -575,6 +600,17 @@ function SchedulingWidget({ notifyOnConnect = false, initialScheduleId, insertAf
   const [isHovered, setIsHovered] = useState2(false);
   const [modalState, setModalState] = useState2(null);
   const switchScheduleIdRef = useRef(null);
+  const liveScheduleIdRef = useRef(null);
+  const refetchLiveSchedule = useCallback(async () => {
+    const id = liveScheduleIdRef.current;
+    if (!id) return;
+    try {
+      const res = await fetch(`${API_URL}/api/schedule/id/${id}`);
+      const data = await res.json();
+      if (data?.id) setSchedule(data);
+    } catch {
+    }
+  }, []);
   const dates = useMemo(() => {
     const today = /* @__PURE__ */ new Date();
     today.setHours(0, 0, 0, 0);
@@ -594,6 +630,18 @@ function SchedulingWidget({ notifyOnConnect = false, initialScheduleId, insertAf
       }
     }
   }, [schedule, dates]);
+  useEffect(() => {
+    if (typeof window === "undefined") return;
+    const onVisible = () => {
+      if (!document.hidden) void refetchLiveSchedule();
+    };
+    window.addEventListener("focus", refetchLiveSchedule);
+    document.addEventListener("visibilitychange", onVisible);
+    return () => {
+      window.removeEventListener("focus", refetchLiveSchedule);
+      document.removeEventListener("visibilitychange", onVisible);
+    };
+  }, [refetchLiveSchedule]);
   useEffect(() => {
     if (typeof window === "undefined") return;
     const isInEditor = window.self !== window.top;
@@ -655,7 +703,7 @@ function SchedulingWidget({ notifyOnConnect = false, initialScheduleId, insertAf
         setLoading(false);
         return;
       }
-      ;
+      liveScheduleIdRef.current = effectiveId;
       (async () => {
         try {
           const res = await fetch(`${API_URL}/api/schedule/id/${effectiveId}`);
@@ -712,18 +760,14 @@ function SchedulingWidget({ notifyOnConnect = false, initialScheduleId, insertAf
       const data = await res.json().catch(() => ({}));
       throw new Error(data?.message ?? "Something went wrong. Please try again.");
     }
+    await refetchLiveSchedule();
   };
   const handleReplaceSchedule = () => {
     setIsHovered(false);
-    if (schedule) {
-      window.parent.postMessage({
-        type: "ow:schedule-connected",
-        schedule: { id: schedule.id, name: schedule.name },
-        insertAfter
-      }, "*");
-    } else {
-      window.parent.postMessage({ type: "ow:scheduling-not-connected", insertAfter }, "*");
-    }
+    window.parent.postMessage(
+      { type: "ow:scheduling-not-connected", insertAfter, currentScheduleId: schedule?.id },
+      "*"
+    );
   };
   if (!inEditor && !loading && !schedule) return null;
   const sectionId = `scheduling-${insertAfter}`;
@@ -766,7 +810,19 @@ function SchedulingWidget({ notifyOnConnect = false, initialScheduleId, insertAf
         ),
         /* @__PURE__ */ jsxs2("div", { className: "max-w-[1280px] mx-auto flex flex-col items-center gap-16", children: [
           /* @__PURE__ */ jsxs2("div", { className: "flex flex-col items-center gap-4", children: [
-            /* @__PURE__ */ jsx2("h2", { className: "font-display text-4xl sm:text-5xl font-bold text-center m-0 text-(--color-dark,#200C02)", children: schedule?.name ?? "Book an appointment" }),
+            /* @__PURE__ */ jsx2(
+              "h2",
+              {
+                className: "font-display text-center m-0 text-(--color-dark,#200C02)",
+                style: {
+                  fontSize: "var(--fs-section-h2, clamp(40px, 4.4vw, 64px))",
+                  fontWeight: "var(--font-weight-heading, 400)",
+                  lineHeight: 1.05,
+                  letterSpacing: "-0.02em"
+                },
+                children: schedule?.name ?? "Book an appointment"
+              }
+            ),
             schedule?.description && /* @__PURE__ */ jsx2("p", { className: "font-body text-body text-center m-0 text-(--color-accent,#A89B83)", children: schedule.description })
           ] }),
           /* @__PURE__ */ jsxs2("div", { className: "w-full flex flex-col items-end gap-3", children: [
@@ -5658,7 +5714,7 @@ function LinkEditorPanel({ state, onClose }) {
 }
 
 // src/ui/link-modal/SectionPickerOverlay.tsx
-import { useCallback, useEffect as useEffect4, useMemo as useMemo2, useRef as useRef5, useState as useState4 } from "react";
+import { useCallback as useCallback2, useEffect as useEffect4, useMemo as useMemo2, useRef as useRef5, useState as useState4 } from "react";
 import { createPortal } from "react-dom";
 import { ArrowLeft, Check } from "lucide-react";
 import { usePathname, useRouter } from "next/navigation";
@@ -5789,7 +5845,7 @@ function SectionPickerOverlay({
   );
   sectionIdsRef.current = sectionIds;
   const rects = useSectionRects(sectionIdsKey, isOnTargetPage);
-  const applyHoverAt = useCallback(
+  const applyHoverAt = useCallback2(
     (x, y, liveRects) => {
       const ids = sectionIdsRef.current;
       const map = liveRects ?? readSectionRects(ids);
@@ -5869,7 +5925,7 @@ function SectionPickerOverlay({
       window.removeEventListener("message", onPointerSync);
     };
   }, [rects, applyHoverAt]);
-  const handleSelect = useCallback(
+  const handleSelect = useCallback2(
     (section) => {
       if (selectedId) return;
       setSelectedId(section.id);
@@ -6000,7 +6056,7 @@ function SectionPickerOverlay({
 }
 
 // src/ui/link-modal/useLinkModalState.ts
-import { useCallback as useCallback2, useEffect as useEffect5, useMemo as useMemo3, useState as useState5 } from "react";
+import { useCallback as useCallback3, useEffect as useEffect5, useMemo as useMemo3, useState as useState5 } from "react";
 function useLinkModalState({
   open,
   mode,
@@ -6019,7 +6075,7 @@ function useLinkModalState({
   const [step, setStep] = useState5("input");
   const [dropdownOpen, setDropdownOpen] = useState5(false);
   const [urlError, setUrlError] = useState5("");
-  const reset = useCallback2(() => {
+  const reset = useCallback3(() => {
     setSearchValue("");
     setSelectedPage(null);
     setSelectedSection(null);
@@ -7367,7 +7423,7 @@ function hitTestNavDropSlot(clientX, clientY, draggedHrefKey) {
 }
 
 // src/useNavItemDrag.ts
-import { useCallback as useCallback3, useEffect as useEffect7, useRef as useRef6, useState as useState6 } from "react";
+import { useCallback as useCallback4, useEffect as useEffect7, useRef as useRef6, useState as useState6 } from "react";
 function useNavItemDrag({
   isEditMode,
   editContentRef,
@@ -7396,7 +7452,7 @@ function useNavItemDrag({
   const [navDropSlots, setNavDropSlots] = useState6([]);
   const [activeNavDropIndex, setActiveNavDropIndex] = useState6(null);
   const navPointerDragRef = useRef6(null);
-  const clearNavDragVisuals = useCallback3(() => {
+  const clearNavDragVisuals = useCallback4(() => {
     navDragRef.current = null;
     setNavDropSlots([]);
     setActiveNavDropIndex(null);
@@ -7405,7 +7461,7 @@ function useNavItemDrag({
     setIsItemDragging(false);
     unlockItemDragInteraction();
   }, [setDraggedItemRect, setIsItemDragging, setSiblingHintRects]);
-  const refreshNavDragVisuals = useCallback3(
+  const refreshNavDragVisuals = useCallback4(
     (session, activeSlot, clientX, clientY) => {
       setDraggedItemRect(session.draggedEl.getBoundingClientRect());
       if (typeof clientX === "number" && typeof clientY === "number") {
@@ -7429,7 +7485,7 @@ function useNavItemDrag({
   });
   const beginNavDragRef = useRef6(() => {
   });
-  const beginNavDrag = useCallback3(
+  const beginNavDrag = useCallback4(
     (session) => {
       const rect = session.draggedEl.getBoundingClientRect();
       session.lastClientX = session.lastClientX || rect.left + rect.width / 2;
@@ -7456,7 +7512,7 @@ function useNavItemDrag({
     ]
   );
   beginNavDragRef.current = beginNavDrag;
-  const commitNavDrag = useCallback3(
+  const commitNavDrag = useCallback4(
     (clientX, clientY) => {
       const session = navDragRef.current;
       if (!session) {
@@ -7517,7 +7573,7 @@ function useNavItemDrag({
     [clearNavDragVisuals, deselectRef, editContentRef, postToParentRef, selectRef]
   );
   commitNavDragRef.current = commitNavDrag;
-  const startNavLinkDrag = useCallback3(
+  const startNavLinkDrag = useCallback4(
     (anchor, clientX, clientY, wasSelected) => {
       if (footerDragRef.current) return false;
       const hrefKey = anchor.getAttribute("data-ohw-href-key");
@@ -7535,7 +7591,7 @@ function useNavItemDrag({
     },
     [beginNavDrag, footerDragRef, isDragHandleDisabled2, isNavbarButton3]
   );
-  const onNavDragOver = useCallback3(
+  const onNavDragOver = useCallback4(
     (e) => {
       const session = navDragRef.current;
       if (!session) return false;
@@ -7672,7 +7728,7 @@ function useNavItemDrag({
     setLinkPopover,
     suppressNextClickRef
   ]);
-  const armNavPressFromChrome = useCallback3(
+  const armNavPressFromChrome = useCallback4(
     (selected, clientX, clientY, pointerId) => {
       const hrefKey = selected.getAttribute("data-ohw-href-key");
       if (!hrefKey || !isNavbarHrefKey(hrefKey)) return false;
@@ -9062,7 +9118,7 @@ function OhhwellsBridge() {
   const subdomainFromQuery = searchParams.get("subdomain");
   const subdomain = resolveSubdomain(subdomainFromQuery);
   useLinkHrefGuardian(pathname, subdomain, isEditMode);
-  const postToParent2 = useCallback4((data) => {
+  const postToParent2 = useCallback5((data) => {
     if (typeof window !== "undefined" && window.parent !== window) {
       window.parent.postMessage(data, "*");
     }
@@ -9079,7 +9135,7 @@ function OhhwellsBridge() {
   const parentScrollRef = useRef7(null);
   const visibleViewportRef = useRef7(null);
   const [dialogPortalContainer, setDialogPortalContainer] = useState8(null);
-  const attachVisibleViewport = useCallback4((node) => {
+  const attachVisibleViewport = useCallback5((node) => {
     visibleViewportRef.current = node;
     setDialogPortalContainer(node);
     if (node) applyVisibleViewport(node, parentScrollRef.current);
@@ -9193,7 +9249,7 @@ function OhhwellsBridge() {
   const bumpLinkPopoverGrace = () => {
     linkPopoverGraceUntilRef.current = Date.now() + 350;
   };
-  const runSectionsPrefetch = useCallback4((pages) => {
+  const runSectionsPrefetch = useCallback5((pages) => {
     if (!isEditMode || shouldUseDevFixtures() || pages.length === 0) return;
     const gen = ++sectionsPrefetchGenRef.current;
     const paths = pages.map((p) => p.path);
@@ -9319,10 +9375,10 @@ function OhhwellsBridge() {
       vvp.removeEventListener("resize", update);
     };
   }, []);
-  const refreshStateRules = useCallback4(() => {
+  const refreshStateRules = useCallback5(() => {
     editStylesRef.current?.forceHover && (editStylesRef.current.forceHover.textContent = collectStateRules());
   }, []);
-  const processConfigRequest = useCallback4((insertAfterVal) => {
+  const processConfigRequest = useCallback5((insertAfterVal) => {
     const tracker = getSectionsTracker();
     let entries = [];
     try {
@@ -9345,7 +9401,7 @@ function OhhwellsBridge() {
     }
     window.postMessage({ type: "ow:schedule-config", insertAfter: insertAfterVal, scheduleId: null }, "*");
   }, [isEditMode]);
-  const deactivate = useCallback4(() => {
+  const deactivate = useCallback5(() => {
     const el = activeElRef.current;
     if (!el) return;
     const key = el.dataset.ohwKey;
@@ -9377,12 +9433,12 @@ function OhhwellsBridge() {
     setToolbarShowEditLink(false);
     postToParent2({ type: "ow:exit-edit" });
   }, [postToParent2]);
-  const clearSelectedAttr = useCallback4(() => {
+  const clearSelectedAttr = useCallback5(() => {
     document.querySelectorAll("[data-ohw-selected]").forEach((el) => {
       el.removeAttribute("data-ohw-selected");
     });
   }, []);
-  const deselect = useCallback4(() => {
+  const deselect = useCallback5(() => {
     clearSelectedAttr();
     selectedElRef.current = null;
     selectedHrefKeyRef.current = null;
@@ -9402,11 +9458,11 @@ function OhhwellsBridge() {
       setToolbarVariant("none");
     }
   }, [clearSelectedAttr]);
-  const markSelected = useCallback4((el) => {
+  const markSelected = useCallback5((el) => {
     clearSelectedAttr();
     el.setAttribute("data-ohw-selected", "");
   }, [clearSelectedAttr]);
-  const resolveHrefKeyElement = useCallback4((hrefKey) => {
+  const resolveHrefKeyElement = useCallback5((hrefKey) => {
     if (isFooterHrefKey(hrefKey)) {
       return document.querySelector(
         `footer [data-ohw-href-key="${CSS.escape(hrefKey)}"]`
@@ -9421,7 +9477,7 @@ function OhhwellsBridge() {
       `[data-ohw-href-key="${CSS.escape(hrefKey)}"]`
     );
   }, []);
-  const resyncSelectedNavigationItem = useCallback4(() => {
+  const resyncSelectedNavigationItem = useCallback5(() => {
     const hrefKey = selectedHrefKeyRef.current;
     if (hrefKey) {
       const link = resolveHrefKeyElement(hrefKey);
@@ -9449,7 +9505,7 @@ function OhhwellsBridge() {
       );
     }
   }, [resolveHrefKeyElement]);
-  const reselectNavigationItem = useCallback4((navAnchor) => {
+  const reselectNavigationItem = useCallback5((navAnchor) => {
     selectedElRef.current = navAnchor;
     selectedHrefKeyRef.current = navAnchor.getAttribute("data-ohw-href-key");
     selectedFooterColAttrRef.current = null;
@@ -9464,7 +9520,7 @@ function OhhwellsBridge() {
     setToolbarShowEditLink(false);
     setActiveCommands(/* @__PURE__ */ new Set());
   }, [markSelected]);
-  const commitNavigationTextEdit = useCallback4((navAnchor) => {
+  const commitNavigationTextEdit = useCallback5((navAnchor) => {
     const el = activeElRef.current;
     if (!el) return;
     const key = el.dataset.ohwKey;
@@ -9491,7 +9547,7 @@ function OhhwellsBridge() {
     postToParent2({ type: "ow:exit-edit" });
     reselectNavigationItem(navAnchor);
   }, [postToParent2, reselectNavigationItem]);
-  const handleAddTopLevelNavItem = useCallback4(() => {
+  const handleAddTopLevelNavItem = useCallback5(() => {
     const items = listNavbarItems();
     addNavAfterAnchorRef.current = items[items.length - 1] ?? null;
     deselectRef.current();
@@ -9503,7 +9559,7 @@ function OhhwellsBridge() {
       intent: "add-nav"
     });
   }, []);
-  const clearFooterDragVisuals = useCallback4(() => {
+  const clearFooterDragVisuals = useCallback5(() => {
     footerDragRef.current = null;
     setSiblingHintRects([]);
     setFooterDropSlots([]);
@@ -9512,7 +9568,7 @@ function OhhwellsBridge() {
     setIsItemDragging(false);
     unlockFooterDragInteraction();
   }, []);
-  const refreshFooterDragVisuals = useCallback4((session, activeSlot, clientX, clientY) => {
+  const refreshFooterDragVisuals = useCallback5((session, activeSlot, clientX, clientY) => {
     const dragged = session.draggedEl;
     setDraggedItemRect(dragged.getBoundingClientRect());
     if (typeof clientX === "number" && typeof clientY === "number") {
@@ -9543,7 +9599,7 @@ function OhhwellsBridge() {
   });
   const beginFooterDragRef = useRef7(() => {
   });
-  const beginFooterDrag = useCallback4(
+  const beginFooterDrag = useCallback5(
     (session) => {
       const rect = session.draggedEl.getBoundingClientRect();
       session.lastClientX = session.lastClientX || rect.left + rect.width / 2;
@@ -9563,7 +9619,7 @@ function OhhwellsBridge() {
     [refreshFooterDragVisuals]
   );
   beginFooterDragRef.current = beginFooterDrag;
-  const commitFooterDrag = useCallback4(
+  const commitFooterDrag = useCallback5(
     (clientX, clientY) => {
       const session = footerDragRef.current;
       if (!session) {
@@ -9667,7 +9723,7 @@ function OhhwellsBridge() {
     [clearFooterDragVisuals, resolveHrefKeyElement, resyncSelectedNavigationItem]
   );
   commitFooterDragRef.current = commitFooterDrag;
-  const startFooterLinkDrag = useCallback4(
+  const startFooterLinkDrag = useCallback5(
     (anchor, clientX, clientY, wasSelected) => {
       const hrefKey = anchor.getAttribute("data-ohw-href-key");
       if (!hrefKey || !isFooterHrefKey(hrefKey)) return false;
@@ -9688,7 +9744,7 @@ function OhhwellsBridge() {
     },
     [beginFooterDrag]
   );
-  const startFooterColumnDrag = useCallback4(
+  const startFooterColumnDrag = useCallback5(
     (columnEl, clientX, clientY, wasSelected) => {
       const columns = listFooterColumns();
       const idx = columns.indexOf(columnEl);
@@ -9708,7 +9764,7 @@ function OhhwellsBridge() {
     },
     [beginFooterDrag]
   );
-  const handleItemDragStart = useCallback4(
+  const handleItemDragStart = useCallback5(
     (e) => {
       const selected = selectedElRef.current;
       if (!selected) {
@@ -9728,7 +9784,7 @@ function OhhwellsBridge() {
     },
     [startFooterColumnDrag, startFooterLinkDrag, startNavLinkDrag]
   );
-  const handleItemDragEnd = useCallback4(
+  const handleItemDragEnd = useCallback5(
     (e) => {
       if (footerDragRef.current) {
         const x = e?.clientX;
@@ -9754,7 +9810,7 @@ function OhhwellsBridge() {
     },
     [commitFooterDrag, commitNavDrag, navDragRef]
   );
-  const handleItemChromePointerDown = useCallback4((e) => {
+  const handleItemChromePointerDown = useCallback5((e) => {
     if (e.button !== 0) return;
     const selected = selectedElRef.current;
     if (!selected) return;
@@ -9785,7 +9841,7 @@ function OhhwellsBridge() {
     }
     if (armNavPressFromChrome(selected, e.clientX, e.clientY, e.pointerId)) return;
   }, [armNavPressFromChrome]);
-  const handleItemChromeClick = useCallback4((clientX, clientY) => {
+  const handleItemChromeClick = useCallback5((clientX, clientY) => {
     if (suppressNextClickRef.current || Date.now() < suppressClickUntilRef.current) {
       suppressNextClickRef.current = false;
       return;
@@ -9798,7 +9854,7 @@ function OhhwellsBridge() {
   }, []);
   reselectNavigationItemRef.current = reselectNavigationItem;
   commitNavigationTextEditRef.current = commitNavigationTextEdit;
-  const select = useCallback4((anchor) => {
+  const select = useCallback5((anchor) => {
     if (!isNavigationItem(anchor)) return;
     if (activeElRef.current) deactivate();
     selectedElRef.current = anchor;
@@ -9824,7 +9880,7 @@ function OhhwellsBridge() {
     setToolbarShowEditLink(false);
     setActiveCommands(/* @__PURE__ */ new Set());
   }, [deactivate, markSelected]);
-  const selectFrame = useCallback4((el) => {
+  const selectFrame = useCallback5((el) => {
     if (!isNavigationContainer(el)) return;
     if (activeElRef.current) deactivate();
     const isFooterColumn = el.hasAttribute("data-ohw-footer-col") || Boolean(el.closest("footer") && isInferredFooterGroup(el));
@@ -9852,7 +9908,7 @@ function OhhwellsBridge() {
     setToolbarShowEditLink(false);
     setActiveCommands(/* @__PURE__ */ new Set());
   }, [deactivate, markSelected]);
-  const activate = useCallback4((el, options) => {
+  const activate = useCallback5((el, options) => {
     if (activeElRef.current === el) return;
     clearSelectedAttr();
     selectedElRef.current = null;
@@ -11995,7 +12051,7 @@ function OhhwellsBridge() {
     window.addEventListener("hashchange", onHashChange);
     return () => window.removeEventListener("hashchange", onHashChange);
   }, [pathname]);
-  const handleCommand = useCallback4((cmd) => {
+  const handleCommand = useCallback5((cmd) => {
     const el = activeElRef.current;
     const selBefore = window.getSelection();
     let savedOffsets = null;
@@ -12031,7 +12087,7 @@ function OhhwellsBridge() {
     if (el) setToolbarRect(getEditMeasureEl(el).getBoundingClientRect());
     refreshActiveCommandsRef.current();
   }, []);
-  const handleStateChange = useCallback4((state) => {
+  const handleStateChange = useCallback5((state) => {
     if (!activeStateElRef.current) return;
     const el = activeStateElRef.current;
     if (state === "Default") {
@@ -12044,11 +12100,11 @@ function OhhwellsBridge() {
     }
     setToggleState((prev) => prev ? { ...prev, activeState: state } : null);
   }, [deactivate]);
-  const closeLinkPopover = useCallback4(() => {
+  const closeLinkPopover = useCallback5(() => {
     addNavAfterAnchorRef.current = null;
     setLinkPopover(null);
   }, []);
-  const openLinkPopoverForActive = useCallback4(() => {
+  const openLinkPopoverForActive = useCallback5(() => {
     const hrefCtx = getHrefKeyFromElement(activeElRef.current);
     if (!hrefCtx) return;
     bumpLinkPopoverGrace();
@@ -12059,7 +12115,7 @@ function OhhwellsBridge() {
     });
     deactivate();
   }, [deactivate]);
-  const openLinkPopoverForSelected = useCallback4(() => {
+  const openLinkPopoverForSelected = useCallback5(() => {
     const anchor = selectedElRef.current;
     if (!anchor) return;
     const key = anchor.getAttribute("data-ohw-href-key");
@@ -12072,7 +12128,7 @@ function OhhwellsBridge() {
     });
     deselect();
   }, [deselect]);
-  const handleLinkPopoverSubmit = useCallback4(
+  const handleLinkPopoverSubmit = useCallback5(
     (target) => {
       const session = linkPopoverSessionRef.current;
       if (!session) return;
@@ -12131,19 +12187,19 @@ function OhhwellsBridge() {
   const showEditLink = toolbarShowEditLink;
   const currentSections = sectionsByPath[pathname] ?? [];
   linkPopoverOpenRef.current = linkPopover !== null;
-  const handleMediaReplace = useCallback4(
+  const handleMediaReplace = useCallback5(
     (key) => {
       postToParent2({ type: "ow:image-pick", key, elementType: mediaHover?.elementType ?? "image" });
     },
     [postToParent2, mediaHover?.elementType]
   );
-  const handleEditCarousel = useCallback4(
+  const handleEditCarousel = useCallback5(
     (key) => {
       postToParent2({ type: "ow:carousel-open", key, images: readCarouselValue(key) });
     },
     [postToParent2]
   );
-  const handleMediaFadeOutComplete = useCallback4((key) => {
+  const handleMediaFadeOutComplete = useCallback5((key) => {
     setUploadingRects((prev) => {
       if (!(key in prev)) return prev;
       const next = { ...prev };
@@ -12151,7 +12207,7 @@ function OhhwellsBridge() {
       return next;
     });
   }, []);
-  const handleVideoSettingsChange = useCallback4(
+  const handleVideoSettingsChange = useCallback5(
     (key, settings) => {
       document.querySelectorAll(`[data-ohw-key="${key}"]`).forEach((el) => {
         const video = getVideoEl(el);