@ohhwells/bridge 0.1.34-next.44 → 0.1.35

package/dist/index.d.cts

@@ -109,7 +109,7 @@ type ItemInteractionLayerProps = {
     rect: DOMRect;
     state: ItemInteractionState;
     elRef?: React.Ref<HTMLDivElement>;
-    /** Slotted Custom/Toolbar instance (item-action or other fill).  */
+    /** Slotted Custom/Toolbar instance (item-action or other fill). */
     toolbar?: React.ReactNode;
     showHandle?: boolean;
     dragDisabled?: boolean;

package/dist/index.d.ts

@@ -109,7 +109,7 @@ type ItemInteractionLayerProps = {
     rect: DOMRect;
     state: ItemInteractionState;
     elRef?: React.Ref<HTMLDivElement>;
-    /** Slotted Custom/Toolbar instance (item-action or other fill).  */
+    /** Slotted Custom/Toolbar instance (item-action or other fill). */
     toolbar?: React.ReactNode;
     showHandle?: boolean;
     dragDisabled?: boolean;

package/dist/index.js

@@ -1,7 +1,7 @@
 "use client";
 
 // src/OhhwellsBridge.tsx
-import React8, { useCallback as useCallback3, useEffect as useEffect3, useLayoutEffect as useLayoutEffect2, useRef as useRef3, useState as useState5 } from "react";
+import React8, { useCallback as useCallback2, useEffect as useEffect3, useLayoutEffect as useLayoutEffect2, useRef as useRef3, useState as useState5 } from "react";
 import { createRoot } from "react-dom/client";
 import { flushSync } from "react-dom";
 
@@ -45,13 +45,12 @@ function useLinkHrefGuardian(...deps) {
 }
 
 // src/ui/SchedulingWidget.tsx
-import { useCallback, useEffect, useId, useMemo, useRef, useState as useState2 } from "react";
+import { 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",
@@ -85,17 +84,12 @@ function EmailCaptureModal({ title, subtitle, onSubmit, onClose }) {
   const [error, setError] = useState(null);
   const isBook = title === "Confirm your spot";
   const handleSubmit = async () => {
-    const trimmed = email.trim();
-    if (!trimmed) return;
-    if (!isValidEmail(trimmed)) {
-      setError("Please enter a valid email address.");
-      return;
-    }
+    if (!email.trim()) return;
     setLoading(true);
     setError(null);
     try {
-      await onSubmit(trimmed);
-      setSubmittedEmail(trimmed);
+      await onSubmit(email.trim());
+      setSubmittedEmail(email.trim());
       setSuccess(true);
     } catch (e) {
       setError(e instanceof Error ? e.message : "Something went wrong. Please try again.");
@@ -170,10 +164,7 @@ function EmailCaptureModal({ title, subtitle, onSubmit, onClose }) {
                   {
                     type: "email",
                     value: email,
-                    onChange: (e) => {
-                      setEmail(e.target.value);
-                      if (error) setError(null);
-                    },
+                    onChange: (e) => setEmail(e.target.value),
                     onKeyDown: handleKeyDown,
                     placeholder: "hello@gmail.com",
                     autoFocus: true,
@@ -230,20 +221,12 @@ 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 target = new Date(date);
-  target.setHours(0, 0, 0, 0);
+  const ds = date.toISOString().split("T")[0];
   return cls.bookings.filter((b) => {
     try {
-      const bookingDate = new Date(b.classDate);
-      bookingDate.setHours(0, 0, 0, 0);
-      return bookingDate.getTime() === target.getTime();
+      return new Date(b.classDate).toISOString().split("T")[0] === ds;
     } catch {
       return false;
     }
@@ -547,7 +530,7 @@ function ScheduleView({ schedule, dates, selectedIdx, onSelectDate, onOpenModal
                   if (!cls.id) return;
                   onOpenModal?.(isFull ? "waitlist" : "book", cls.id, selectedDate);
                 },
-                children: isFull ? "Join Waitlist" : formatBookingLabel(cls)
+                children: isFull ? "Join Waitlist" : "Book Now"
               }
             )
           ] })
@@ -589,17 +572,6 @@ 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);
@@ -619,18 +591,6 @@ 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;
@@ -692,7 +652,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}`);
@@ -749,14 +709,18 @@ 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);
-    window.parent.postMessage(
-      { type: "ow:scheduling-not-connected", insertAfter, currentScheduleId: schedule?.id },
-      "*"
-    );
+    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 }, "*");
+    }
   };
   if (!inEditor && !loading && !schedule) return null;
   const sectionId = `scheduling-${insertAfter}`;
@@ -799,19 +763,7 @@ 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-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"
-              }
-            ),
+            /* @__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" }),
             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: [
@@ -5242,7 +5194,7 @@ function UrlOrPageInput({
 }
 
 // src/ui/link-modal/useLinkModalState.ts
-import { useCallback as useCallback2, useEffect as useEffect2, useMemo as useMemo2, useState as useState4 } from "react";
+import { useCallback, useEffect as useEffect2, useMemo as useMemo2, useState as useState4 } from "react";
 function useLinkModalState({
   open,
   mode,
@@ -5264,7 +5216,7 @@ function useLinkModalState({
   const [step, setStep] = useState4("input");
   const [dropdownOpen, setDropdownOpen] = useState4(false);
   const [urlError, setUrlError] = useState4("");
-  const reset = useCallback2(() => {
+  const reset = useCallback(() => {
     setSearchValue("");
     setSelectedPage(null);
     setSelectedSection(null);
@@ -6074,8 +6026,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 TOOLBAR_PILL_PADDING = 2;
-var TOOLBAR_TOGGLE_GAP = 4;
 var TOOLBAR_GROUPS = [
   [
     { cmd: "bold", title: "Bold" },
@@ -6194,9 +6144,9 @@ function clampToolbarToClip(top, transform, rect, clip, approxH, gap) {
   const pinnedTop = Math.min(maxBottom - approxH, Math.max(minTop, clip.top + gap));
   return { top: pinnedTop + approxH, transform: "translateX(-50%) translateY(-100%)" };
 }
-function calcToolbarPos(rect, parentScroll, approxW = 306) {
+function calcToolbarPos(rect, parentScroll, approxW = 330) {
   const GAP = 8;
-  const APPROX_H = 32;
+  const APPROX_H = 36;
   const APPROX_W = approxW;
   const clip = getIframeVisibleClip(parentScroll);
   const clipTop = clip?.top ?? 0;
@@ -6254,15 +6204,6 @@ function FloatingToolbar({
         left,
         transform,
         zIndex: 2147483647,
-        background: "#fff",
-        border: "1px solid #E7E5E4",
-        borderRadius: 6,
-        boxShadow: "0px 2px 4px -2px rgba(0,0,0,.1),0px 4px 6px -1px rgba(0,0,0,.1)",
-        display: "flex",
-        alignItems: "center",
-        padding: TOOLBAR_PILL_PADDING,
-        gap: TOOLBAR_TOGGLE_GAP,
-        fontFamily: "sans-serif",
         pointerEvents: "auto"
       },
       children: /* @__PURE__ */ jsxs11(CustomToolbar, { children: [
@@ -6398,7 +6339,7 @@ function OhhwellsBridge() {
   const subdomainFromQuery = searchParams.get("subdomain");
   const subdomain = resolveSubdomain(subdomainFromQuery);
   useLinkHrefGuardian(pathname, subdomain, isEditMode);
-  const postToParent = useCallback3((data) => {
+  const postToParent = useCallback2((data) => {
     if (typeof window !== "undefined" && window.parent !== window) {
       window.parent.postMessage(data, "*");
     }
@@ -6412,7 +6353,7 @@ function OhhwellsBridge() {
   const parentScrollRef = useRef3(null);
   const visibleViewportRef = useRef3(null);
   const [dialogPortalContainer, setDialogPortalContainer] = useState5(null);
-  const attachVisibleViewport = useCallback3((node) => {
+  const attachVisibleViewport = useCallback2((node) => {
     visibleViewportRef.current = node;
     setDialogPortalContainer(node);
     if (node) applyVisibleViewport(node, parentScrollRef.current);
@@ -6471,7 +6412,7 @@ function OhhwellsBridge() {
   const bumpLinkPopoverGrace = () => {
     linkPopoverGraceUntilRef.current = Date.now() + 350;
   };
-  const runSectionsPrefetch = useCallback3((pages) => {
+  const runSectionsPrefetch = useCallback2((pages) => {
     if (!isEditMode || shouldUseDevFixtures() || pages.length === 0) return;
     const gen = ++sectionsPrefetchGenRef.current;
     const paths = pages.map((p) => p.path);
@@ -6581,10 +6522,10 @@ function OhhwellsBridge() {
       vvp.removeEventListener("resize", update);
     };
   }, []);
-  const refreshStateRules = useCallback3(() => {
+  const refreshStateRules = useCallback2(() => {
     editStylesRef.current?.forceHover && (editStylesRef.current.forceHover.textContent = collectStateRules());
   }, []);
-  const processConfigRequest = useCallback3((insertAfterVal) => {
+  const processConfigRequest = useCallback2((insertAfterVal) => {
     const tracker = getSectionsTracker();
     let entries = [];
     try {
@@ -6607,7 +6548,7 @@ function OhhwellsBridge() {
     }
     window.postMessage({ type: "ow:schedule-config", insertAfter: insertAfterVal, scheduleId: null }, "*");
   }, [isEditMode]);
-  const deactivate = useCallback3(() => {
+  const deactivate = useCallback2(() => {
     const el = activeElRef.current;
     if (!el) return;
     const key = el.dataset.ohwKey;
@@ -6638,7 +6579,7 @@ function OhhwellsBridge() {
     setToolbarShowEditLink(false);
     postToParent({ type: "ow:exit-edit" });
   }, [postToParent]);
-  const deselect = useCallback3(() => {
+  const deselect = useCallback2(() => {
     selectedElRef.current = null;
     setReorderHrefKey(null);
     setReorderDragDisabled(false);
@@ -6650,7 +6591,7 @@ function OhhwellsBridge() {
       setToolbarVariant("none");
     }
   }, []);
-  const reselectNavigationItem = useCallback3((navAnchor) => {
+  const reselectNavigationItem = useCallback2((navAnchor) => {
     selectedElRef.current = navAnchor;
     const { key, disabled } = getNavigationItemReorderState(navAnchor);
     setReorderHrefKey(key);
@@ -6660,7 +6601,7 @@ function OhhwellsBridge() {
     setToolbarShowEditLink(false);
     setActiveCommands(/* @__PURE__ */ new Set());
   }, []);
-  const commitNavigationTextEdit = useCallback3((navAnchor) => {
+  const commitNavigationTextEdit = useCallback2((navAnchor) => {
     const el = activeElRef.current;
     if (!el) return;
     const key = el.dataset.ohwKey;
@@ -6686,24 +6627,24 @@ function OhhwellsBridge() {
     postToParent({ type: "ow:exit-edit" });
     reselectNavigationItem(navAnchor);
   }, [postToParent, reselectNavigationItem]);
-  const handleAddNavigationItem = useCallback3(() => {
+  const handleAddNavigationItem = useCallback2(() => {
     const selected = selectedElRef.current;
     if (!selected) return;
     const target = getNavigationItemAddHintTarget(selected);
     siblingHintElRef.current = target;
     setSiblingHintRect(target.getBoundingClientRect());
   }, []);
-  const handleItemDragStart = useCallback3(() => {
+  const handleItemDragStart = useCallback2(() => {
     siblingHintElRef.current = null;
     setSiblingHintRect(null);
     setIsItemDragging(true);
   }, []);
-  const handleItemDragEnd = useCallback3(() => {
+  const handleItemDragEnd = useCallback2(() => {
     setIsItemDragging(false);
   }, []);
   reselectNavigationItemRef.current = reselectNavigationItem;
   commitNavigationTextEditRef.current = commitNavigationTextEdit;
-  const select = useCallback3((anchor) => {
+  const select = useCallback2((anchor) => {
     if (!isNavigationItem(anchor)) return;
     if (activeElRef.current) deactivate();
     selectedElRef.current = anchor;
@@ -6721,7 +6662,7 @@ function OhhwellsBridge() {
     setToolbarShowEditLink(false);
     setActiveCommands(/* @__PURE__ */ new Set());
   }, [deactivate]);
-  const activate = useCallback3((el) => {
+  const activate = useCallback2((el) => {
     if (activeElRef.current === el) return;
     selectedElRef.current = null;
     deactivate();
@@ -8000,13 +7941,13 @@ function OhhwellsBridge() {
     window.addEventListener("hashchange", onHashChange);
     return () => window.removeEventListener("hashchange", onHashChange);
   }, [pathname]);
-  const handleCommand = useCallback3((cmd) => {
+  const handleCommand = useCallback2((cmd) => {
     document.execCommand(cmd, false);
     activeElRef.current?.focus();
     if (activeElRef.current) setToolbarRect(getEditMeasureEl(activeElRef.current).getBoundingClientRect());
     refreshActiveCommandsRef.current();
   }, []);
-  const handleStateChange = useCallback3((state) => {
+  const handleStateChange = useCallback2((state) => {
     if (!activeStateElRef.current) return;
     const el = activeStateElRef.current;
     if (state === "Default") {
@@ -8019,8 +7960,8 @@ function OhhwellsBridge() {
     }
     setToggleState((prev) => prev ? { ...prev, activeState: state } : null);
   }, [deactivate]);
-  const closeLinkPopover = useCallback3(() => setLinkPopover(null), []);
-  const openLinkPopoverForActive = useCallback3(() => {
+  const closeLinkPopover = useCallback2(() => setLinkPopover(null), []);
+  const openLinkPopoverForActive = useCallback2(() => {
     const hrefCtx = getHrefKeyFromElement(activeElRef.current);
     if (!hrefCtx) return;
     bumpLinkPopoverGrace();
@@ -8030,7 +7971,7 @@ function OhhwellsBridge() {
     });
     deactivate();
   }, [deactivate]);
-  const openLinkPopoverForSelected = useCallback3(() => {
+  const openLinkPopoverForSelected = useCallback2(() => {
     const anchor = selectedElRef.current;
     if (!anchor) return;
     const key = anchor.getAttribute("data-ohw-href-key");
@@ -8042,7 +7983,7 @@ function OhhwellsBridge() {
     });
     deselect();
   }, [deselect]);
-  const handleLinkPopoverSubmit = useCallback3(
+  const handleLinkPopoverSubmit = useCallback2(
     (target) => {
       if (!linkPopover) return;
       const { key } = linkPopover;
@@ -8179,32 +8120,7 @@ function OhhwellsBridge() {
           onSubmit: handleLinkPopoverSubmit
         },
         `${linkPopover.key}-${pathname}`
-      ) : null,
-      sectionGap && /* @__PURE__ */ jsxs11(
-        "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__ */ jsx21("div", { className: "flex-1 bg-primary", style: { height: 3 } }),
-            /* @__PURE__ */ jsx21(
-              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__ */ jsx21("div", { className: "flex-1 bg-primary", style: { height: 3 } })
-          ]
-        }
-      )
+      ) : null
     ] }),
     bridgeRoot
   ) : null;