@ohhwells/bridge 0.1.42-next.92 → 0.1.42-next.94

package/README.md

@@ -318,6 +318,18 @@ npm run build
 npm publish --access public
 ```
 
+### Staging → rebound-template auto-bump
+
+When `staging` publishes successfully, the bridge workflow dispatches a `bridge-published` event to `TheFlowOps-Eng/rebound-template`. That repo’s `bump-bridge.yml` workflow checks out `staging`, runs `npm install @ohhwells/bridge@<version> --save-exact`, and pushes the lockfile bump.
+
+**One-time setup** (in `ohhwells-bridge` GitHub repo → Settings → Secrets):
+
+| Secret | Value |
+|--------|--------|
+| `REBOUND_TEMPLATE_DISPATCH_TOKEN` | Fine-grained or classic PAT with `repo` access to `rebound-template` (needs permission to trigger `repository_dispatch`) |
+
+The published staging version looks like `0.1.31-next.42` and is tagged `next` on npm.
+
 ---
 
 ## Link dialog (Canvas Editor)

package/dist/index.cjs

@@ -115,6 +115,7 @@ var import_react3 = require("react");
 var import_react2 = require("react");
 var import_radix_ui = require("radix-ui");
 var import_jsx_runtime = require("react/jsx-runtime");
+var isValidEmail = (value) => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value);
 function Spinner() {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
     "svg",
@@ -148,12 +149,17 @@ function EmailCaptureModal({ title, subtitle, onSubmit, onClose }) {
   const [error, setError] = (0, import_react2.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.");
@@ -228,7 +234,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,
@@ -285,12 +294,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;
     }
@@ -555,7 +572,7 @@ function ScheduleView({ schedule, dates, selectedIdx, onSelectDate, onOpenModal
                 }
               )
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "sm:hidden flex flex-col gap-px", children: isFull ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "font-body text-sm text-(--color-dark,#200C02) opacity-80", children: "Full" }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
+            cls.showAvailability !== false && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "sm:hidden flex flex-col gap-px", children: isFull ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "font-body text-sm text-(--color-dark,#200C02) opacity-80", children: "Full" }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
               /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { className: "font-body text-sm text-(--color-dark,#200C02) opacity-80", children: [
                 available,
                 "/",
@@ -567,9 +584,17 @@ function ScheduleView({ schedule, dates, selectedIdx, onSelectDate, onOpenModal
           /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex flex-1 flex-col gap-2 min-w-0 sm:contents", children: [
             /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex-1 flex flex-col gap-2 min-w-0", children: [
               /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "font-body text-base font-bold text-(--color-dark,#200C02) block truncate", children: cls.name }),
-              cls.hostName && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "font-body text-base font-normal text-(--color-dark,#200C02) opacity-80 block truncate", children: cls.hostName })
+              cls.hostName && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "font-body text-base font-normal text-(--color-dark,#200C02) opacity-80 block truncate", children: cls.hostName }),
+              cls.description && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                "span",
+                {
+                  className: "font-body text-base font-normal text-(--color-dark,#200C02) opacity-80 block",
+                  style: { wordBreak: "break-word" },
+                  children: cls.description
+                }
+              )
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "hidden sm:flex w-14 shrink-0 flex-col gap-px", children: isFull ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "font-body text-sm text-(--color-dark,#200C02) opacity-80", children: "Full" }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
+            cls.showAvailability !== false && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "hidden sm:flex w-14 shrink-0 flex-col gap-px", children: isFull ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "font-body text-sm text-(--color-dark,#200C02) opacity-80", children: "Full" }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
               /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { className: "font-body text-sm text-(--color-dark,#200C02) opacity-80", children: [
                 available,
                 "/",
@@ -594,7 +619,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)
               }
             )
           ] })
@@ -636,6 +661,17 @@ function SchedulingWidget({ notifyOnConnect = false, initialScheduleId, insertAf
   const [isHovered, setIsHovered] = (0, import_react3.useState)(false);
   const [modalState, setModalState] = (0, import_react3.useState)(null);
   const switchScheduleIdRef = (0, import_react3.useRef)(null);
+  const liveScheduleIdRef = (0, import_react3.useRef)(null);
+  const refetchLiveSchedule = (0, import_react3.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 = (0, import_react3.useMemo)(() => {
     const today = /* @__PURE__ */ new Date();
     today.setHours(0, 0, 0, 0);
@@ -655,6 +691,18 @@ function SchedulingWidget({ notifyOnConnect = false, initialScheduleId, insertAf
       }
     }
   }, [schedule, dates]);
+  (0, import_react3.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]);
   (0, import_react3.useEffect)(() => {
     if (typeof window === "undefined") return;
     const isInEditor = window.self !== window.top;
@@ -716,7 +764,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}`);
@@ -773,18 +821,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}`;
@@ -827,7 +871,19 @@ function SchedulingWidget({ notifyOnConnect = false, initialScheduleId, insertAf
         ),
         /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "max-w-[1280px] mx-auto flex flex-col items-center gap-16", children: [
           /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex flex-col items-center gap-4", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("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__ */ (0, import_jsx_runtime2.jsx)(
+              "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__ */ (0, import_jsx_runtime2.jsx)("p", { className: "font-body text-body text-center m-0 text-(--color-accent,#A89B83)", children: schedule.description })
           ] }),
           /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "w-full flex flex-col items-end gap-3", children: [
@@ -4491,6 +4547,19 @@ var DRAG_SHADOW = "0px 4px 6px -1px rgba(0, 0, 0, 0.1), 0px 2px 4px -2px rgba(0,
 var TOOLBAR_EDGE_MARGIN = 4;
 var SELECTION_CHROME_GAP = 4;
 var TOOLBAR_STROKE_GAP = 4;
+function getChromeZIndex(state) {
+  switch (state) {
+    case "active-top":
+    case "active-bottom":
+    case "dragging":
+      return 2147483644;
+    case "hover":
+    case "sibling-hint":
+      return 2147483643;
+    default:
+      return 2147483642;
+  }
+}
 function getChromeStyle(state) {
   switch (state) {
     case "hover":
@@ -4606,7 +4675,7 @@ function ItemInteractionLayer({
         left: rect.left - chromeGap,
         width: rect.width + chromeGap * 2,
         height: rect.height + chromeGap * 2,
-        zIndex: 2147483646
+        zIndex: getChromeZIndex(state)
       },
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
@@ -8996,6 +9065,16 @@ function OhhwellsBridge() {
       return;
     }
     document.documentElement.setAttribute("data-ohw-link-popover-open", "");
+    hoveredItemElRef.current = null;
+    setHoveredItemRect(null);
+    hoveredNavContainerRef.current = null;
+    setHoveredNavContainerRect(null);
+    siblingHintElRef.current = null;
+    setSiblingHintRect(null);
+    setSiblingHintRects([]);
+    if (selectedElRef.current || toolbarVariantRef.current !== "none") {
+      deselectRef.current();
+    }
     if (hoveredImageRef.current) {
       hoveredImageRef.current = null;
       hoveredImageHasTextOverlapRef.current = false;
@@ -11878,8 +11957,8 @@ function OhhwellsBridge() {
           onVideoSettingsChange: handleVideoSettingsChange
         }
       ),
-      siblingHintRect && !isItemDragging && siblingHintRects.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(ItemInteractionLayer, { rect: siblingHintRect, state: "sibling-hint" }),
-      siblingHintRects.map((rect, i) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(ItemInteractionLayer, { rect, state: "sibling-hint" }, `sibling-hint-${i}`)),
+      siblingHintRect && !linkPopover && !isItemDragging && siblingHintRects.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(ItemInteractionLayer, { rect: siblingHintRect, state: "sibling-hint" }),
+      siblingHintRects.length > 0 && !linkPopover && siblingHintRects.map((rect, i) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(ItemInteractionLayer, { rect, state: "sibling-hint" }, `sibling-hint-${i}`)),
       isItemDragging && draggedItemRect && selectedElRef.current !== footerDragRef.current?.draggedEl && selectedElRef.current !== navDragRef.current?.draggedEl && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(ItemInteractionLayer, { rect: draggedItemRect, state: "dragging" }),
       isItemDragging && footerDropSlots.map((slot, i) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
         "div",
@@ -11924,8 +12003,9 @@ function OhhwellsBridge() {
         `nav-drop-${slot.direction}-${slot.parentId ?? "root"}-${slot.insertIndex}-${i}`
       )),
       hoveredNavContainerRect && toolbarVariant !== "select-frame" && !linkPopover && !isItemDragging && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(ItemInteractionLayer, { rect: hoveredNavContainerRect, state: "hover" }),
+      hoveredItemRect && !linkPopover && !hoveredNavContainerRect && !isItemDragging && hoveredItemElRef.current !== selectedElRef.current && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(ItemInteractionLayer, { rect: hoveredItemRect, state: "hover" }),
       toolbarVariant === "select-frame" && toolbarRect && !linkPopover && !isItemDragging && !isFooterFrameSelection && selectedElRef.current && isNavbarLinksContainer(selectedElRef.current) && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(NavbarContainerChrome, { rect: toolbarRect, onAdd: handleAddTopLevelNavItem }),
-      toolbarRect && (toolbarVariant === "link-action" || toolbarVariant === "select-frame") && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+      toolbarRect && !linkPopover && (toolbarVariant === "link-action" || toolbarVariant === "select-frame") && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
         ItemInteractionLayer,
         {
           rect: isItemDragging && draggedItemRect && (footerDragRef.current?.wasSelected || navDragRef.current?.wasSelected) ? draggedItemRect : toolbarRect,
@@ -11952,8 +12032,7 @@ function OhhwellsBridge() {
           ) : void 0
         }
       ),
-      hoveredItemRect && !linkPopover && !hoveredNavContainerRect && !isItemDragging && hoveredItemElRef.current !== selectedElRef.current && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(ItemInteractionLayer, { rect: hoveredItemRect, state: "hover" }),
-      toolbarRect && toolbarVariant === "rich-text" && /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_jsx_runtime24.Fragment, { children: [
+      toolbarRect && toolbarVariant === "rich-text" && !linkPopover && /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_jsx_runtime24.Fragment, { children: [
         /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
           EditGlowChrome,
           {