@ohhwells/bridge 0.1.20 → 0.1.21

package/dist/index.js

@@ -3,6 +3,7 @@
 // src/OhhwellsBridge.tsx
 import React3, { useCallback, useEffect as useEffect2, useLayoutEffect, useRef as useRef2, useState as useState3 } from "react";
 import { createRoot } from "react-dom/client";
+import { flushSync } from "react-dom";
 
 // src/ui/SchedulingWidget.tsx
 import { useEffect, useMemo, useRef, useState as useState2 } from "react";
@@ -270,7 +271,19 @@ function LoadingSkeleton() {
       /* @__PURE__ */ jsx2("div", { style: { ...shimmer, width: "40px", height: "40px", borderRadius: "50%" } })
     ] }, i)) }),
     [0, 1, 2].map((i) => /* @__PURE__ */ jsxs2("div", { children: [
-      /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-[60px] py-4", children: [
+      /* @__PURE__ */ jsxs2("div", { className: "flex gap-4 py-4 sm:hidden", children: [
+        /* @__PURE__ */ jsxs2("div", { className: "flex flex-col gap-2 shrink-0", children: [
+          /* @__PURE__ */ jsx2("div", { style: { ...shimmer, width: "100px", height: "16px", borderRadius: "4px" } }),
+          /* @__PURE__ */ jsx2("div", { style: { ...shimmer, width: "52px", height: "20px", borderRadius: "999px" } }),
+          /* @__PURE__ */ jsx2("div", { style: { ...shimmer, width: "60px", height: "14px", borderRadius: "4px" } })
+        ] }),
+        /* @__PURE__ */ jsxs2("div", { className: "flex flex-1 flex-col gap-2", children: [
+          /* @__PURE__ */ jsx2("div", { style: { ...shimmer, width: "75%", height: "16px", borderRadius: "4px" } }),
+          /* @__PURE__ */ jsx2("div", { style: { ...shimmer, width: "50%", height: "14px", borderRadius: "4px" } }),
+          /* @__PURE__ */ jsx2("div", { style: { ...shimmer, width: "100%", height: "44px", borderRadius: "8px" } })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxs2("div", { className: "hidden sm:flex items-center gap-[60px] py-4", children: [
         /* @__PURE__ */ jsx2("div", { style: { ...shimmer, width: "120px", height: "16px", borderRadius: "4px", flexShrink: 0 } }),
         /* @__PURE__ */ jsxs2("div", { className: "flex-1 flex flex-col gap-2", children: [
           /* @__PURE__ */ jsx2("div", { style: { ...shimmer, width: "55%", height: "16px", borderRadius: "4px" } }),
@@ -313,6 +326,28 @@ function ScheduleView({ schedule, dates, selectedIdx, onSelectDate, onOpenModal
   const scroll = (dir) => {
     scrollRef.current?.scrollBy({ left: dir === "left" ? -216 : 216, behavior: "smooth" });
   };
+  const isDragging = useRef(false);
+  const dragStartX = useRef(0);
+  const dragStartScrollLeft = useRef(0);
+  const onDragStart = (e) => {
+    if (!scrollRef.current) return;
+    isDragging.current = true;
+    dragStartX.current = e.clientX;
+    dragStartScrollLeft.current = scrollRef.current.scrollLeft;
+    scrollRef.current.style.cursor = "grabbing";
+    scrollRef.current.style.userSelect = "none";
+  };
+  const onDragMove = (e) => {
+    if (!isDragging.current || !scrollRef.current) return;
+    const delta = e.clientX - dragStartX.current;
+    scrollRef.current.scrollLeft = dragStartScrollLeft.current - delta;
+  };
+  const onDragEnd = () => {
+    if (!scrollRef.current) return;
+    isDragging.current = false;
+    scrollRef.current.style.cursor = "grab";
+    scrollRef.current.style.userSelect = "";
+  };
   const datesWithClasses = useMemo(
     () => new Set(dates.map(
       (d, i) => schedule.classes?.some((c) => classRunsOnDate(c, d, schedule.type)) ? i : -1
@@ -330,7 +365,7 @@ function ScheduleView({ schedule, dates, selectedIdx, onSelectDate, onOpenModal
         "button",
         {
           onClick: () => scroll("left"),
-          className: "absolute left-0 top-1/2 -translate-y-1/2 z-10 w-8 h-8 flex items-center justify-center rounded-full border-none cursor-pointer",
+          className: "hidden sm:flex absolute left-0 top-1/2 -translate-y-1/2 z-10 w-8 h-8 items-center justify-center rounded-full border-none cursor-pointer",
           style: { background: "var(--color-light,#FEFFF0)", boxShadow: "0 1px 4px rgba(0,0,0,0.15)" },
           "aria-label": "Scroll left",
           children: /* @__PURE__ */ jsx2("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "var(--color-dark,#200C02)", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx2("polyline", { points: "15 18 9 12 15 6" }) })
@@ -340,23 +375,36 @@ function ScheduleView({ schedule, dates, selectedIdx, onSelectDate, onOpenModal
         "button",
         {
           onClick: () => scroll("right"),
-          className: "absolute right-0 top-1/2 -translate-y-1/2 z-10 w-8 h-8 flex items-center justify-center rounded-full border-none cursor-pointer",
+          className: "hidden sm:flex absolute right-0 top-1/2 -translate-y-1/2 z-10 w-8 h-8 items-center justify-center rounded-full border-none cursor-pointer",
           style: { background: "var(--color-light,#FEFFF0)", boxShadow: "0 1px 4px rgba(0,0,0,0.15)" },
           "aria-label": "Scroll right",
           children: /* @__PURE__ */ jsx2("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "var(--color-dark,#200C02)", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx2("polyline", { points: "9 18 15 12 9 6" }) })
         }
       ),
+      canScrollLeft && /* @__PURE__ */ jsx2(
+        "div",
+        {
+          className: "sm:hidden absolute left-0 top-0 bottom-0 w-10 z-10 pointer-events-none",
+          style: { background: "linear-gradient(to right, var(--color-light,#FEFFF0), transparent)" }
+        }
+      ),
+      canScrollRight && /* @__PURE__ */ jsx2(
+        "div",
+        {
+          className: "sm:hidden absolute right-0 top-0 bottom-0 w-10 z-10 pointer-events-none",
+          style: { background: "linear-gradient(to left, var(--color-light,#FEFFF0), transparent)" }
+        }
+      ),
       /* @__PURE__ */ jsx2(
         "div",
         {
           ref: scrollRef,
           className: "overflow-x-auto w-full",
-          style: {
-            scrollbarWidth: "none",
-            msOverflowStyle: "none",
-            paddingLeft: canScrollLeft ? "36px" : 0,
-            paddingRight: canScrollRight ? "36px" : 0
-          },
+          style: { scrollbarWidth: "none", msOverflowStyle: "none", touchAction: "pan-x", cursor: "grab" },
+          onMouseDown: onDragStart,
+          onMouseMove: onDragMove,
+          onMouseUp: onDragEnd,
+          onMouseLeave: onDragEnd,
           children: /* @__PURE__ */ jsx2("div", { className: "flex", style: { width: `max(100%, ${dates.length * 60}px)` }, children: dates.map((date, i) => {
             const isToday = date.getTime() === todayMs;
             const isSelected = i === selectedIdx;
@@ -397,40 +445,60 @@ function ScheduleView({ schedule, dates, selectedIdx, onSelectDate, onOpenModal
       const available = cls.maxParticipants - booked;
       const isFull = available <= 0;
       return /* @__PURE__ */ jsxs2("div", { children: [
-        /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-[60px] py-4 box-border", children: [
-          /* @__PURE__ */ jsx2("div", { className: "w-[120px] shrink-0", children: /* @__PURE__ */ jsx2("span", { className: "font-body text-base font-bold text-(--color-dark,#200C02) block", children: formatClassTime(cls) }) }),
-          /* @__PURE__ */ jsxs2("div", { className: "flex-1 flex flex-col gap-3 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 })
+        /* @__PURE__ */ jsxs2("div", { className: "flex gap-4 py-4 sm:items-center sm:gap-[60px] box-border", children: [
+          /* @__PURE__ */ jsxs2("div", { className: "flex flex-col gap-2 shrink-0 sm:contents", children: [
+            /* @__PURE__ */ jsx2("div", { className: "sm:w-[120px] sm:shrink-0", children: /* @__PURE__ */ jsx2("span", { className: "font-body text-base font-bold text-(--color-dark,#200C02) block", children: formatClassTime(cls) }) }),
+            /* @__PURE__ */ jsx2(
+              "span",
+              {
+                className: "inline-flex items-center px-2 py-0.5 rounded-full border text-xs font-medium sm:hidden",
+                style: { borderColor: "#0885FE", color: "#0885FE" },
+                children: "GROUP"
+              }
+            ),
+            /* @__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,
+                "/",
+                cls.maxParticipants
+              ] }),
+              /* @__PURE__ */ jsx2("span", { className: "font-body text-sm text-(--color-dark,#200C02) opacity-80", children: "available" })
+            ] }) })
           ] }),
-          /* @__PURE__ */ jsx2("div", { className: "w-14 shrink-0 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,
-              "/",
-              cls.maxParticipants
+          /* @__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 })
             ] }),
-            /* @__PURE__ */ jsx2("span", { className: "font-body text-sm text-(--color-dark,#200C02) opacity-80", children: "available" })
-          ] }) }),
-          /* @__PURE__ */ jsx2(
-            "button",
-            {
-              className: "shrink-0 w-[200px] px-5 py-[10px] flex items-center justify-center rounded-lg font-body text-base font-bold cursor-pointer box-border",
-              style: isFull ? {
-                background: "transparent",
-                border: "1px solid var(--color-dark, #200C02)",
-                color: "var(--color-dark, #200C02)"
-              } : {
-                background: "var(--color-primary, #3D312B)",
-                border: "none",
-                color: "var(--color-light, #FEFFF0)"
-              },
-              onClick: () => {
-                if (!cls.id) return;
-                onOpenModal?.(isFull ? "waitlist" : "book", cls.id, selectedDate);
-              },
-              children: isFull ? "Join Waitlist" : "Book Now"
-            }
-          )
+            /* @__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,
+                "/",
+                cls.maxParticipants
+              ] }),
+              /* @__PURE__ */ jsx2("span", { className: "font-body text-sm text-(--color-dark,#200C02) opacity-80", children: "available" })
+            ] }) }),
+            /* @__PURE__ */ jsx2(
+              "button",
+              {
+                className: "w-full sm:w-[200px] sm:shrink-0 px-5 py-[10px] flex items-center justify-center rounded-lg font-body text-base font-bold cursor-pointer box-border",
+                style: isFull ? {
+                  background: "transparent",
+                  border: "1px solid var(--color-dark, #200C02)",
+                  color: "var(--color-dark, #200C02)"
+                } : {
+                  background: "var(--color-primary, #3D312B)",
+                  border: "none",
+                  color: "var(--color-light, #FEFFF0)"
+                },
+                onClick: () => {
+                  if (!cls.id) return;
+                  onOpenModal?.(isFull ? "waitlist" : "book", cls.id, selectedDate);
+                },
+                children: isFull ? "Join Waitlist" : "Book Now"
+              }
+            )
+          ] })
         ] }),
         i < selectedClasses.length - 1 && /* @__PURE__ */ jsx2("div", { className: "h-px bg-black/20" })
       ] }, cls.id ?? i);
@@ -460,7 +528,7 @@ function CalendarFoldIcon() {
     }
   );
 }
-function SchedulingWidget({ notifyOnConnect = false, initialScheduleId }) {
+function SchedulingWidget({ notifyOnConnect = false, initialScheduleId, insertAfter }) {
   const [schedule, setSchedule] = useState2(null);
   const [loading, setLoading] = useState2(true);
   const [inEditor, setInEditor] = useState2(false);
@@ -502,18 +570,21 @@ function SchedulingWidget({ notifyOnConnect = false, initialScheduleId }) {
       }, 5e3) : null;
       const handler = (e) => {
         if (e.data?.type === "ow:clear-scheduling-widget") {
+          if (!e.data.insertAfter || e.data.insertAfter !== insertAfter) return;
           setSchedule(null);
           setLoading(false);
           return;
         }
         if (e.data?.type === "ow:switch-schedule") {
+          if (!e.data.insertAfter || e.data.insertAfter !== insertAfter) return;
           switchScheduleIdRef.current = e.data.scheduleId ?? null;
           initialized = false;
           setLoading(true);
-          window.parent.postMessage({ type: "ow:request-user-schedules" }, "*");
+          window.parent.postMessage({ type: "ow:request-user-schedules", insertAfter }, "*");
           return;
         }
         if (e.data?.type !== "ow:user-schedules-response") return;
+        if (e.data.insertAfter && e.data.insertAfter !== insertAfter) return;
         if (initialized && switchScheduleIdRef.current === null) return;
         initialized = true;
         if (timer) clearTimeout(timer);
@@ -524,11 +595,16 @@ function SchedulingWidget({ notifyOnConnect = false, initialScheduleId }) {
         setSchedule(target);
         setLoading(false);
         if (notifyOnConnect && target && !isSwitching) {
-          window.parent.postMessage({ type: "ow:schedule-connected", schedule: { id: target.id, name: target.name } }, "*");
+          window.parent.postMessage({
+            type: "ow:schedule-connected",
+            schedule: { id: target.id, name: target.name },
+            insertAfter
+          }, "*");
+          window.postMessage({ type: "ow:schedule-linked", scheduleId: target.id, insertAfter }, "*");
         }
       };
       window.addEventListener("message", handler);
-      if (!startEmpty) window.parent.postMessage({ type: "ow:request-user-schedules" }, "*");
+      if (!startEmpty) window.parent.postMessage({ type: "ow:request-user-schedules", insertAfter }, "*");
       return () => {
         window.removeEventListener("message", handler);
         if (timer) clearTimeout(timer);
@@ -589,16 +665,22 @@ function SchedulingWidget({ notifyOnConnect = false, initialScheduleId }) {
   const handleReplaceSchedule = () => {
     setIsHovered(false);
     if (schedule) {
-      window.parent.postMessage({ type: "ow:schedule-connected", schedule: { id: schedule.id, name: schedule.name } }, "*");
+      window.parent.postMessage({
+        type: "ow:schedule-connected",
+        schedule: { id: schedule.id, name: schedule.name },
+        insertAfter
+      }, "*");
     } else {
-      window.parent.postMessage({ type: "ow:scheduling-not-connected" }, "*");
+      window.parent.postMessage({ type: "ow:scheduling-not-connected", insertAfter }, "*");
     }
   };
+  const sectionId = `scheduling-${insertAfter}`;
   return /* @__PURE__ */ jsxs2(
     "section",
     {
-      "data-ohw-section": "scheduling",
-      className: "w-full box-border py-20 px-16 font-body bg-(--color-light,#FEFFF0) relative",
+      "data-ohw-section": sectionId,
+      "data-ohw-scheduling-anchor": insertAfter,
+      className: "w-full box-border py-10 px-5 sm:py-20 sm:px-16 font-body bg-(--color-light,#FEFFF0) relative",
       onMouseEnter: () => inEditor && setIsHovered(true),
       onMouseLeave: () => setIsHovered(false),
       children: [
@@ -632,12 +714,12 @@ function SchedulingWidget({ notifyOnConnect = false, initialScheduleId }) {
         ),
         /* @__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-5xl font-bold text-center m-0 text-(--color-dark,#200C02)", 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: [
             timezoneLabel && /* @__PURE__ */ jsx2("span", { className: "font-body text-sm font-normal text-(--color-accent,#A89B83)", children: timezoneLabel }),
-            /* @__PURE__ */ jsx2("div", { className: "w-full p-10 box-border", children: loading ? /* @__PURE__ */ jsx2(LoadingSkeleton, {}) : !schedule ? /* @__PURE__ */ jsx2(EmptyState, { inEditor }) : /* @__PURE__ */ jsx2(
+            /* @__PURE__ */ jsx2("div", { className: "w-full p-0 sm:p-10 box-border", children: loading ? /* @__PURE__ */ jsx2(LoadingSkeleton, {}) : !schedule ? /* @__PURE__ */ jsx2(EmptyState, { inEditor }) : /* @__PURE__ */ jsx2(
               ScheduleView,
               {
                 schedule,
@@ -4177,24 +4259,135 @@ function getSectionsTracker() {
   }
   return el;
 }
-function mountSchedulingWidget(insertAfter, notifyOnConnect = false, scheduleId) {
-  const anchor = document.querySelector(`[data-ohw-section="${insertAfter}"]`);
-  if (!anchor) return false;
-  if (anchor.nextElementSibling?.dataset.ohwSectionContainer) return false;
+function updateSectionScheduleId(insertAfter, scheduleId) {
+  const tracker = getSectionsTracker();
+  let sections = [];
+  try {
+    sections = JSON.parse(tracker.textContent || "[]");
+  } catch {
+  }
+  const currentPath = window.location.pathname;
+  const updated = sections.map((s) => {
+    if (s.type !== "scheduling" || s.insertAfter !== insertAfter) return s;
+    if (s.pagePath && s.pagePath !== currentPath) return s;
+    return { ...s, scheduleId };
+  });
+  tracker.textContent = JSON.stringify(updated);
+  return tracker.textContent ?? "[]";
+}
+function schedulingSectionId(insertAfter) {
+  return `scheduling-${insertAfter}`;
+}
+var INSERT_BEFORE_MARKER = ":before:";
+function parseSchedulingInsertAfter(insertAfter) {
+  const idx = insertAfter.indexOf(INSERT_BEFORE_MARKER);
+  if (idx < 0) return { anchor: insertAfter, insertBefore: null };
+  return {
+    anchor: insertAfter.slice(0, idx),
+    insertBefore: insertAfter.slice(idx + INSERT_BEFORE_MARKER.length)
+  };
+}
+function resolveSchedulingInsert(insertAfter, explicitInsertBefore) {
+  const parsed = parseSchedulingInsertAfter(insertAfter);
+  const insertBefore = explicitInsertBefore ?? parsed.insertBefore;
+  const effectiveInsertAfter = insertBefore && parsed.insertBefore === null ? `${insertAfter}${INSERT_BEFORE_MARKER}${insertBefore}` : insertAfter;
+  return { effectiveInsertAfter, insertBefore };
+}
+function getSchedulingMountPoint(insertAfter) {
+  const { anchor } = parseSchedulingInsertAfter(insertAfter);
+  let anchorEl = document.querySelector(`[data-ohw-section="${anchor}"]`);
+  if (!anchorEl && anchor === "scheduling") {
+    const widgets = Array.from(document.querySelectorAll('[data-ohw-section^="scheduling-"]'));
+    anchorEl = widgets.at(-1) ?? null;
+  }
+  if (!anchorEl) return null;
+  return anchorEl.closest('[data-ohw-section-container="scheduling"]') ?? anchorEl;
+}
+function schedulingMountDepth(insertAfter) {
+  if (!insertAfter.includes(INSERT_BEFORE_MARKER)) return 0;
+  return insertAfter.split(INSERT_BEFORE_MARKER).length - 1;
+}
+function getPageSchedulingEntries(raw) {
+  if (!raw) return [];
+  try {
+    const entries = JSON.parse(raw);
+    const currentPath = window.location.pathname;
+    return entries.filter((e) => e.type === "scheduling" && (!e.pagePath || e.pagePath === currentPath));
+  } catch {
+    return [];
+  }
+}
+function isSchedulingWidgetMissing(entry) {
+  const { effectiveInsertAfter } = resolveSchedulingInsert(entry.insertAfter);
+  return !document.querySelector(`[data-ohw-section="${schedulingSectionId(effectiveInsertAfter)}"]`);
+}
+function hasMissingSchedulingWidgets(entries) {
+  return entries.some(isSchedulingWidgetMissing);
+}
+function retryMissingSchedulingMounts(entries, notifyOnConnect = false) {
+  if (!hasMissingSchedulingWidgets(entries)) return;
+  mountSchedulingEntries(entries, notifyOnConnect);
+}
+function initSectionsFromContent(content, removeExisting = false) {
+  const raw = content["__ohw_sections"];
+  if (!raw) return;
+  try {
+    if (removeExisting) {
+      document.querySelectorAll('[data-ohw-section-container="scheduling"]').forEach((el) => el.remove());
+    }
+    const inEditor = typeof window !== "undefined" && window.self !== window.top;
+    if (inEditor) getSectionsTracker().textContent = raw;
+    const pageEntries = getPageSchedulingEntries(raw);
+    mountSchedulingEntries(pageEntries, false);
+    requestAnimationFrame(() => retryMissingSchedulingMounts(pageEntries, false));
+    setTimeout(() => retryMissingSchedulingMounts(pageEntries, false), 250);
+  } catch {
+  }
+}
+function mountSchedulingWidget(insertAfter, notifyOnConnect = false, scheduleId, explicitInsertBefore) {
+  const { effectiveInsertAfter, insertBefore } = resolveSchedulingInsert(insertAfter, explicitInsertBefore);
+  const sectionId = schedulingSectionId(effectiveInsertAfter);
+  if (document.querySelector(`[data-ohw-section="${sectionId}"]`)) return false;
+  const mountPoint = getSchedulingMountPoint(effectiveInsertAfter);
+  if (!mountPoint) return false;
   const container = document.createElement("div");
   container.dataset.ohwSectionContainer = "scheduling";
-  anchor.insertAdjacentElement("afterend", container);
-  createRoot(container).render(/* @__PURE__ */ jsx6(SchedulingWidget, { notifyOnConnect, initialScheduleId: scheduleId }));
+  if (insertBefore) {
+    const beforeAnchor = document.querySelector(`[data-ohw-section="${insertBefore}"]`);
+    const beforePoint = beforeAnchor?.closest('[data-ohw-section-container="scheduling"]') ?? beforeAnchor;
+    if (!beforePoint) return false;
+    beforePoint.insertAdjacentElement("beforebegin", container);
+  } else {
+    let tail = mountPoint;
+    while (tail.nextElementSibling?.dataset.ohwSectionContainer === "scheduling") {
+      tail = tail.nextElementSibling;
+    }
+    tail.insertAdjacentElement("afterend", container);
+  }
+  const root = createRoot(container);
+  flushSync(() => {
+    root.render(
+      /* @__PURE__ */ jsx6(
+        SchedulingWidget,
+        {
+          notifyOnConnect,
+          initialScheduleId: scheduleId,
+          insertAfter: effectiveInsertAfter
+        }
+      )
+    );
+  });
   const tracker = getSectionsTracker();
   let sections = [];
   try {
     sections = JSON.parse(tracker.textContent || "[]");
   } catch {
   }
-  if (!sections.find((s) => s.type === "scheduling" && s.insertAfter === insertAfter)) {
+  const inEditor = typeof window !== "undefined" && window.self !== window.top;
+  if (inEditor && !sections.find((s) => s.type === "scheduling" && s.insertAfter === effectiveInsertAfter)) {
     sections.push({
       type: "scheduling",
-      insertAfter,
+      insertAfter: effectiveInsertAfter,
       pagePath: window.location.pathname,
       ...scheduleId ? { scheduleId } : {}
     });
@@ -4202,6 +4395,17 @@ function mountSchedulingWidget(insertAfter, notifyOnConnect = false, scheduleId)
   }
   return true;
 }
+function mountSchedulingEntries(entries, notifyOnConnect = false) {
+  const pending = entries.filter((e) => e.type === "scheduling").sort((a, b) => schedulingMountDepth(a.insertAfter) - schedulingMountDepth(b.insertAfter));
+  for (let attempt = 0; attempt < pending.length + 1 && pending.length > 0; attempt++) {
+    for (let i = pending.length - 1; i >= 0; i--) {
+      const { insertAfter, scheduleId } = pending[i];
+      if (mountSchedulingWidget(insertAfter, notifyOnConnect, scheduleId)) {
+        pending.splice(i, 1);
+      }
+    }
+  }
+}
 function collectEditableNodes() {
   return Array.from(document.querySelectorAll("[data-ohw-editable]")).map((el) => {
     if (el.dataset.ohwEditable === "image") {
@@ -4515,6 +4719,23 @@ function StateToggle({
   );
 }
 var contentCache = /* @__PURE__ */ new Map();
+function resolveSubdomain(subdomainFromQuery) {
+  if (subdomainFromQuery) return subdomainFromQuery;
+  if (typeof window !== "undefined") {
+    const parts = window.location.hostname.split(".");
+    if (parts.length >= 3 && parts[0] !== "www") return parts[0];
+  }
+  const siteUrl = process.env.NEXT_PUBLIC_SITE_URL;
+  if (siteUrl) {
+    try {
+      const host = new URL(siteUrl).hostname;
+      const siteParts = host.split(".");
+      if (siteParts.length >= 3 && siteParts[0] !== "www") return siteParts[0];
+    } catch {
+    }
+  }
+  return "";
+}
 function OhhwellsBridge() {
   const pathname = usePathname();
   const router = useRouter();
@@ -4544,11 +4765,7 @@ function OhhwellsBridge() {
     };
   }, []);
   const subdomainFromQuery = searchParams.get("subdomain");
-  const subdomain = subdomainFromQuery ?? (() => {
-    if (typeof window === "undefined") return "";
-    const parts = window.location.hostname.split(".");
-    return parts.length >= 3 && parts[0] !== "www" ? parts[0] : "";
-  })();
+  const subdomain = resolveSubdomain(subdomainFromQuery);
   const postToParent = useCallback((data) => {
     if (typeof window !== "undefined" && window.parent !== window) {
       window.parent.postMessage(data, "*");
@@ -4658,18 +4875,6 @@ function OhhwellsBridge() {
     }
     const applyContent = (content) => {
       const imageLoads = [];
-      document.querySelectorAll("[data-ohw-section-container]").forEach((el) => el.remove());
-      if (content["__ohw_sections"]) {
-        try {
-          const entries = JSON.parse(content["__ohw_sections"]);
-          const currentPath = window.location.pathname;
-          entries.forEach(({ type, insertAfter, scheduleId, pagePath }) => {
-            if (pagePath && pagePath !== currentPath) return;
-            if (type === "scheduling") mountSchedulingWidget(insertAfter, false, scheduleId);
-          });
-        } catch {
-        }
-      }
       for (const [key, val] of Object.entries(content)) {
         if (key === "__ohw_sections") continue;
         document.querySelectorAll(`[data-ohw-key="${key}"]`).forEach((el) => {
@@ -4690,6 +4895,7 @@ function OhhwellsBridge() {
           }
         });
       }
+      initSectionsFromContent(content, true);
       return imageLoads.length > 0 ? Promise.all(imageLoads).then(() => {
       }) : Promise.resolve();
     };
@@ -4716,20 +4922,11 @@ function OhhwellsBridge() {
   }, [subdomain, isEditMode, pathname]);
   useEffect2(() => {
     if (!subdomain || isEditMode) return;
+    let debounceTimer = null;
     const applyFromCache = () => {
       const content = contentCache.get(subdomain);
       if (!content) return;
-      if (content["__ohw_sections"]) {
-        try {
-          const entries = JSON.parse(content["__ohw_sections"]);
-          const currentPath = window.location.pathname;
-          entries.forEach(({ type, insertAfter, scheduleId, pagePath }) => {
-            if (pagePath && pagePath !== currentPath) return;
-            if (type === "scheduling") mountSchedulingWidget(insertAfter, false, scheduleId);
-          });
-        } catch {
-        }
-      }
+      retryMissingSchedulingMounts(getPageSchedulingEntries(content["__ohw_sections"]), false);
       for (const [key, val] of Object.entries(content)) {
         if (key === "__ohw_sections") continue;
         document.querySelectorAll(`[data-ohw-key="${key}"]`).forEach((el) => {
@@ -4745,11 +4942,18 @@ function OhhwellsBridge() {
         });
       }
     };
-    applyFromCache();
-    const observer = new MutationObserver(applyFromCache);
+    const scheduleApply = () => {
+      if (debounceTimer) clearTimeout(debounceTimer);
+      debounceTimer = setTimeout(applyFromCache, 150);
+    };
+    scheduleApply();
+    const observer = new MutationObserver(scheduleApply);
     observer.observe(document.body, { childList: true, subtree: true });
-    return () => observer.disconnect();
-  }, [subdomain, isEditMode]);
+    return () => {
+      observer.disconnect();
+      if (debounceTimer) clearTimeout(debounceTimer);
+    };
+  }, [subdomain, isEditMode, pathname]);
   useLayoutEffect(() => {
     const el = document.getElementById("ohw-loader");
     if (!el) return;
@@ -5322,17 +5526,10 @@ function OhhwellsBridge() {
       if (e.data?.type !== "ow:hydrate") return;
       const content = e.data.content;
       if (!content) return;
+      let sectionsJson = null;
       for (const [key, val] of Object.entries(content)) {
         if (key === "__ohw_sections") {
-          try {
-            const entries = JSON.parse(val);
-            const tracker = getSectionsTracker();
-            tracker.textContent = val;
-            entries.forEach(({ type, insertAfter, scheduleId }) => {
-              if (type === "scheduling") mountSchedulingWidget(insertAfter, false, scheduleId);
-            });
-          } catch {
-          }
+          sectionsJson = val;
           continue;
         }
         document.querySelectorAll(`[data-ohw-key="${key}"]`).forEach((el) => {
@@ -5346,6 +5543,9 @@ function OhhwellsBridge() {
           }
         });
       }
+      if (sectionsJson) {
+        initSectionsFromContent({ __ohw_sections: sectionsJson }, true);
+      }
       postToParentRef.current({ type: "ow:hydrate-done" });
     };
     window.addEventListener("message", handleHydrate);
@@ -5396,9 +5596,9 @@ function OhhwellsBridge() {
     };
     const handleInsertSection = (e) => {
       if (e.data?.type !== "ow:insert-section") return;
-      const { widgetType, insertAfter } = e.data;
+      const { widgetType, insertAfter, insertBefore } = e.data;
       if (widgetType !== "scheduling") return;
-      const inserted = mountSchedulingWidget(insertAfter, true);
+      const inserted = mountSchedulingWidget(insertAfter, true, void 0, insertBefore ?? null);
       if (inserted) {
         const tracker = getSectionsTracker();
         postToParentRef.current({ type: "ow:change", nodes: [{ key: "__ohw_sections", text: tracker.textContent ?? "[]" }] });
@@ -5409,39 +5609,31 @@ function OhhwellsBridge() {
     const handleSwitchSchedule = (e) => {
       if (e.data?.type !== "ow:switch-schedule") return;
       const scheduleId = e.data.scheduleId;
-      if (!scheduleId) return;
-      const tracker = getSectionsTracker();
-      let sections = [];
-      try {
-        sections = JSON.parse(tracker.textContent || "[]");
-      } catch {
-      }
-      const currentPath = window.location.pathname;
-      const updated = sections.map(
-        (s) => s.type === "scheduling" && s.pagePath === currentPath ? { ...s, scheduleId } : s
-      );
-      tracker.textContent = JSON.stringify(updated);
-      postToParentRef.current({ type: "ow:change", nodes: [{ key: "__ohw_sections", text: tracker.textContent }] });
+      const insertAfter = e.data.insertAfter;
+      if (!scheduleId || !insertAfter) return;
+      const text = updateSectionScheduleId(insertAfter, scheduleId);
+      postToParentRef.current({ type: "ow:change", nodes: [{ key: "__ohw_sections", text }] });
+    };
+    const handleScheduleLinked = (e) => {
+      if (e.data?.type !== "ow:schedule-linked") return;
+      const scheduleId = e.data.scheduleId;
+      const insertAfter = e.data.insertAfter;
+      if (!scheduleId || !insertAfter) return;
+      const text = updateSectionScheduleId(insertAfter, scheduleId);
+      postToParentRef.current({ type: "ow:change", nodes: [{ key: "__ohw_sections", text }] });
     };
     const handleClearSchedulingWidget = (e) => {
       if (e.data?.type !== "ow:clear-scheduling-widget") return;
-      const tracker = getSectionsTracker();
-      let sections = [];
-      try {
-        sections = JSON.parse(tracker.textContent || "[]");
-      } catch {
-      }
-      const currentPath = window.location.pathname;
-      const updated = sections.map(
-        (s) => s.type === "scheduling" && s.pagePath === currentPath ? { ...s, scheduleId: null } : s
-      );
-      tracker.textContent = JSON.stringify(updated);
-      postToParentRef.current({ type: "ow:change", nodes: [{ key: "__ohw_sections", text: tracker.textContent }] });
+      const insertAfter = e.data.insertAfter;
+      if (!insertAfter) return;
+      const text = updateSectionScheduleId(insertAfter, null);
+      postToParentRef.current({ type: "ow:change", nodes: [{ key: "__ohw_sections", text }] });
     };
     const handleRemoveSchedulingSection = (e) => {
       if (e.data?.type !== "ow:remove-scheduling-section") return;
-      const els = document.querySelectorAll('[data-ohw-section="scheduling"]');
-      els.forEach((el) => el.parentElement?.removeChild(el));
+      document.querySelectorAll('[data-ohw-section-container="scheduling"]').forEach((el) => {
+        el.remove();
+      });
       const tracker = getSectionsTracker();
       let sections = [];
       try {
@@ -5560,6 +5752,7 @@ function OhhwellsBridge() {
     window.addEventListener("message", handleSave);
     window.addEventListener("message", handleInsertSection);
     window.addEventListener("message", handleSwitchSchedule);
+    window.addEventListener("message", handleScheduleLinked);
     window.addEventListener("message", handleClearSchedulingWidget);
     window.addEventListener("message", handleRemoveSchedulingSection);
     window.addEventListener("message", handleImageUrl);
@@ -5598,6 +5791,7 @@ function OhhwellsBridge() {
       window.removeEventListener("message", handleSave);
       window.removeEventListener("message", handleInsertSection);
       window.removeEventListener("message", handleSwitchSchedule);
+      window.removeEventListener("message", handleScheduleLinked);
       window.removeEventListener("message", handleClearSchedulingWidget);
       window.removeEventListener("message", handleRemoveSchedulingSection);
       window.removeEventListener("message", handleImageUrl);