@ohhwells/bridge 0.1.17 → 0.1.19

package/dist/index.cjs

@@ -32,6 +32,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 var index_exports = {};
 __export(index_exports, {
   OhhwellsBridge: () => OhhwellsBridge,
+  SchedulingWidget: () => SchedulingWidget,
   Toggle: () => Toggle,
   ToggleGroup: () => ToggleGroup,
   ToggleGroupItem: () => ToggleGroupItem,
@@ -40,10 +41,428 @@ __export(index_exports, {
 module.exports = __toCommonJS(index_exports);
 
 // src/OhhwellsBridge.tsx
+var import_react2 = __toESM(require("react"), 1);
+var import_client = require("react-dom/client");
+
+// src/ui/SchedulingWidget.tsx
 var import_react = __toESM(require("react"), 1);
+var import_jsx_runtime = require("react/jsx-runtime");
+var API_URL = process.env.NEXT_PUBLIC_FLOWOPS_API_URL ?? "https://flowops-backend-staging-2yfdh7pwpq-as.a.run.app";
+var DAY_ABBR = ["SUN", "MON", "TUE", "WED", "THU", "FRI", "SAT"];
+function getApiDomain() {
+  const h = window.location.hostname;
+  for (const base of ["ohhwells.site", "theflowops-staging.com", "theflowops.com"]) {
+    if (h.endsWith(`.${base}`)) return h.slice(0, -(base.length + 1));
+  }
+  return h;
+}
+function classRunsOnDate(cls, date, type) {
+  if (type === "FIXED") {
+    const d = String(date.getDate()).padStart(2, "0");
+    const m = String(date.getMonth() + 1).padStart(2, "0");
+    return cls.fixedDates?.some((fd) => fd.date === `${d}-${m}-${date.getFullYear()}`) ?? false;
+  }
+  return cls.weekdays?.some((w) => w.weekday === date.getDay()) ?? false;
+}
+function formatClassTime(cls) {
+  let h = parseInt(cls.startTime.hour, 10);
+  const m = parseInt(cls.startTime.minutes, 10);
+  if (cls.startTime.time === "PM" && h !== 12) h += 12;
+  if (cls.startTime.time === "AM" && h === 12) h = 0;
+  const endTotal = h * 60 + m + cls.duration;
+  const eh = Math.floor(endTotal / 60) % 24;
+  const em = endTotal % 60;
+  return `${h}:${cls.startTime.minutes}-${eh}:${String(em).padStart(2, "0")}`;
+}
+function getBookingsOnDate(cls, date) {
+  if (!cls.bookings?.length) return 0;
+  const ds = date.toISOString().split("T")[0];
+  return cls.bookings.filter((b) => {
+    try {
+      return new Date(b.classDate).toISOString().split("T")[0] === ds;
+    } catch {
+      return false;
+    }
+  }).length;
+}
+function buildTimezoneLabel(tz) {
+  try {
+    const now = /* @__PURE__ */ new Date();
+    const timeStr = new Intl.DateTimeFormat("en-US", {
+      hour: "2-digit",
+      minute: "2-digit",
+      hour12: false,
+      timeZone: tz
+    }).format(now);
+    const offsetPart = new Intl.DateTimeFormat("en-US", { timeZoneName: "short", timeZone: tz }).formatToParts(now).find((p) => p.type === "timeZoneName")?.value ?? "";
+    const city = tz.split("/").pop()?.replace(/_/g, " ") ?? tz;
+    return `${timeStr} (${offsetPart}) ${city} time`;
+  } catch {
+    return tz;
+  }
+}
+function EmptyState({ inEditor }) {
+  const handleAddSchedule = () => {
+    if (inEditor) {
+      window.parent.postMessage({ type: "ow:scheduling-not-connected" }, "*");
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-col items-center justify-center gap-6 p-12 bg-[#FAFAF9] border-2 border-dashed border-[#E7E5E4] rounded-[10px] h-[264px] w-full box-border", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "w-10 h-10 bg-[#F5F5F4] rounded-[10px] flex items-center justify-center shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      "svg",
+      {
+        width: "20",
+        height: "20",
+        viewBox: "0 0 24 24",
+        fill: "none",
+        stroke: "var(--color-accent, #A89B83)",
+        strokeWidth: "1.5",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("rect", { x: "3", y: "4", width: "18", height: "18", rx: "2" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: "16", y1: "2", x2: "16", y2: "6" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: "8", y1: "2", x2: "8", y2: "6" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: "3", y1: "10", x2: "21", y2: "10" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: "12", y1: "14", x2: "12", y2: "18" }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("line", { x1: "10", y1: "16", x2: "14", y2: "16" })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-col items-center gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "font-body text-lg font-medium text-center text-[#0A0A0A] m-0", children: "No schedule yet" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "font-body text-base font-normal text-center text-(--color-accent,#A89B83) m-0", children: "Add a scheduling widget to get instant bookings." })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "button",
+      {
+        onClick: handleAddSchedule,
+        className: "h-9 px-2 py-1.5 flex items-center justify-center bg-white border border-[#E7E5E4] rounded-md font-body text-sm font-medium text-(--color-dark,#200C02) cursor-pointer",
+        children: "Add Schedule"
+      }
+    )
+  ] });
+}
+function LoadingSkeleton() {
+  const shimmer = {
+    background: "linear-gradient(90deg,#f0f0f0 25%,#e8e8e8 50%,#f0f0f0 75%)",
+    backgroundSize: "200% 100%",
+    animation: "ohw-shimmer 1.5s infinite"
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "w-full flex flex-col gap-10", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("style", { children: `@keyframes ohw-shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}` }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex h-[70px] items-stretch", children: Array.from({ length: 7 }).map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex-1 flex flex-col justify-between items-center px-1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { ...shimmer, width: "32px", height: "14px", borderRadius: "4px" } }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { ...shimmer, width: "40px", height: "40px", borderRadius: "50%" } })
+    ] }, i)) }),
+    [0, 1, 2].map((i) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center gap-[60px] py-4", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { ...shimmer, width: "120px", height: "16px", borderRadius: "4px", flexShrink: 0 } }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex-1 flex flex-col gap-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { ...shimmer, width: "55%", height: "16px", borderRadius: "4px" } }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { ...shimmer, width: "38%", height: "14px", borderRadius: "4px" } })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { ...shimmer, width: "56px", height: "32px", borderRadius: "4px", flexShrink: 0 } }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { ...shimmer, width: "200px", height: "44px", borderRadius: "8px", flexShrink: 0 } })
+      ] }),
+      i < 2 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "h-px bg-black/20" })
+    ] }, i))
+  ] });
+}
+function ScheduleView({ schedule, dates, selectedIdx, onSelectDate }) {
+  const todayMs = (0, import_react.useMemo)(() => {
+    const d = /* @__PURE__ */ new Date();
+    d.setHours(0, 0, 0, 0);
+    return d.getTime();
+  }, []);
+  const datesWithClasses = (0, import_react.useMemo)(
+    () => new Set(dates.map(
+      (d, i) => schedule.classes?.some((c) => classRunsOnDate(c, d, schedule.type)) ? i : -1
+    ).filter((i) => i >= 0)),
+    [dates, schedule]
+  );
+  const selectedDate = dates[selectedIdx];
+  const selectedClasses = (0, import_react.useMemo)(
+    () => (schedule.classes ?? []).filter((c) => selectedDate && classRunsOnDate(c, selectedDate, schedule.type)),
+    [schedule, selectedDate]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "w-full flex flex-col gap-10", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "overflow-x-auto w-full", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex min-w-max", children: dates.map((date, i) => {
+      const isToday = date.getTime() === todayMs;
+      const isSelected = i === selectedIdx;
+      const clickable = datesWithClasses.has(i);
+      const label = isToday ? "TODAY" : DAY_ABBR[date.getDay()];
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+        "div",
+        {
+          onClick: () => clickable && onSelectDate(i),
+          className: `flex-none w-[72px] h-[70px] flex flex-col justify-between items-center ${clickable ? "cursor-pointer opacity-100" : "cursor-default opacity-50"}`,
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "font-body text-base font-normal text-center text-(--color-dark,#200C02)", children: label }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "div",
+              {
+                className: "w-10 h-10 rounded-full flex items-center justify-center",
+                style: { background: isSelected ? "var(--color-primary, #3D312B)" : "transparent" },
+                children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                  "span",
+                  {
+                    className: "font-body text-xl font-bold text-center tracking-display-tight",
+                    style: { color: isSelected ? "var(--color-light, #FEFFF0)" : "var(--color-dark, #200C02)" },
+                    children: date.getDate()
+                  }
+                )
+              }
+            )
+          ]
+        },
+        i
+      );
+    }) }) }),
+    selectedClasses.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "font-body text-base text-(--color-accent,#A89B83) text-center py-8 m-0", children: "No classes scheduled for this day." }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex flex-col", children: selectedClasses.map((cls, i) => {
+      const booked = getBookingsOnDate(cls, selectedDate);
+      const available = cls.maxParticipants - booked;
+      const isFull = available <= 0;
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center gap-[60px] py-4 box-border", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "w-[120px] shrink-0", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "font-body text-base font-bold text-(--color-dark,#200C02) block", children: formatClassTime(cls) }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex-1 flex flex-col gap-3 min-w-0", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "font-body text-base font-bold text-(--color-dark,#200C02) block truncate", children: cls.name }),
+            cls.hostName && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "font-body text-base font-normal text-(--color-dark,#200C02) opacity-80 block truncate", children: cls.hostName })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "w-14 shrink-0 flex flex-col gap-px", children: isFull ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "font-body text-sm text-(--color-dark,#200C02) opacity-80", children: "Full" }) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className: "font-body text-sm text-(--color-dark,#200C02) opacity-80", children: [
+              available,
+              "/",
+              cls.maxParticipants
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "font-body text-sm text-(--color-dark,#200C02) opacity-80", children: "available" })
+          ] }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "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)"
+              },
+              children: isFull ? "Join Waitlist" : "Book Now"
+            }
+          )
+        ] }),
+        i < selectedClasses.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "h-px bg-black/20" })
+      ] }, cls.id ?? i);
+    }) })
+  ] });
+}
+function CalendarFoldIcon() {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "svg",
+    {
+      width: "16",
+      height: "16",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      style: { flexShrink: 0 },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M8 2v4" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M16 2v4" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M21 17V6a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h11Z" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M3 10h18" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M15 22v-4a2 2 0 0 1 2-2h4" })
+      ]
+    }
+  );
+}
+function SchedulingWidget({ notifyOnConnect = false, initialScheduleId }) {
+  const [schedule, setSchedule] = (0, import_react.useState)(null);
+  const [loading, setLoading] = (0, import_react.useState)(true);
+  const [inEditor, setInEditor] = (0, import_react.useState)(false);
+  const [isHovered, setIsHovered] = (0, import_react.useState)(false);
+  const switchScheduleIdRef = import_react.default.useRef(null);
+  const dates = (0, import_react.useMemo)(() => {
+    const today = /* @__PURE__ */ new Date();
+    today.setHours(0, 0, 0, 0);
+    return Array.from({ length: 14 }, (_, i) => {
+      const d = new Date(today);
+      d.setDate(today.getDate() + i);
+      return d;
+    });
+  }, []);
+  const [selectedIdx, setSelectedIdx] = (0, import_react.useState)(0);
+  (0, import_react.useEffect)(() => {
+    if (!schedule?.classes) return;
+    for (let i = 0; i < dates.length; i++) {
+      if (schedule.classes.some((c) => classRunsOnDate(c, dates[i], schedule.type))) {
+        setSelectedIdx(i);
+        return;
+      }
+    }
+  }, [schedule, dates]);
+  (0, import_react.useEffect)(() => {
+    if (typeof window === "undefined") return;
+    const isInEditor = window.self !== window.top;
+    setInEditor(isInEditor);
+    if (isInEditor) {
+      const startEmpty = initialScheduleId === null;
+      if (startEmpty) setLoading(false);
+      let initialized = startEmpty;
+      const timer = !startEmpty ? setTimeout(() => {
+        if (!initialized) {
+          initialized = true;
+          setLoading(false);
+        }
+      }, 5e3) : null;
+      const handler = (e) => {
+        if (e.data?.type === "ow:clear-scheduling-widget") {
+          setSchedule(null);
+          setLoading(false);
+          return;
+        }
+        if (e.data?.type === "ow:switch-schedule") {
+          switchScheduleIdRef.current = e.data.scheduleId ?? null;
+          initialized = false;
+          setLoading(true);
+          window.parent.postMessage({ type: "ow:request-user-schedules" }, "*");
+          return;
+        }
+        if (e.data?.type !== "ow:user-schedules-response") return;
+        if (initialized && switchScheduleIdRef.current === null) return;
+        initialized = true;
+        if (timer) clearTimeout(timer);
+        const schedules = e.data.schedules ?? [];
+        const isSwitching = switchScheduleIdRef.current !== null;
+        const target = isSwitching ? schedules.find((s) => s.id === switchScheduleIdRef.current) ?? schedules[0] ?? null : initialScheduleId ? schedules.find((s) => s.id === initialScheduleId) ?? schedules[0] ?? null : schedules[0] ?? null;
+        switchScheduleIdRef.current = null;
+        setSchedule(target);
+        setLoading(false);
+        if (notifyOnConnect && target && !isSwitching) {
+          window.parent.postMessage({ type: "ow:schedule-connected", schedule: { id: target.id, name: target.name } }, "*");
+        }
+      };
+      window.addEventListener("message", handler);
+      if (!startEmpty) window.parent.postMessage({ type: "ow:request-user-schedules" }, "*");
+      return () => {
+        window.removeEventListener("message", handler);
+        if (timer) clearTimeout(timer);
+      };
+    }
+    if (initialScheduleId === null) {
+      setLoading(false);
+      return;
+    }
+    ;
+    (async () => {
+      try {
+        if (initialScheduleId) {
+          const res = await fetch(`${API_URL}/api/schedule/id/${initialScheduleId}`);
+          const data = await res.json();
+          setSchedule(data?.id ? data : null);
+        } else {
+          const domain = getApiDomain();
+          const sitemapRes = await fetch(`${API_URL}/api/schedule/sitemap/${domain}`);
+          const slugs = await sitemapRes.json();
+          if (!Array.isArray(slugs) || !slugs.length) {
+            setLoading(false);
+            return;
+          }
+          const { slug } = [...slugs].sort(
+            (a, b) => new Date(b.updated_at).getTime() - new Date(a.updated_at).getTime()
+          )[0];
+          const res = await fetch(`${API_URL}/api/schedule/${domain}/${slug}`);
+          const data = await res.json();
+          setSchedule(data?.id ? data : null);
+        }
+      } catch {
+      }
+      setLoading(false);
+    })();
+  }, []);
+  const timezoneLabel = schedule?.timezone ? (() => {
+    try {
+      return buildTimezoneLabel(schedule.timezone);
+    } catch {
+      return void 0;
+    }
+  })() : void 0;
+  const handleReplaceSchedule = () => {
+    setIsHovered(false);
+    if (schedule) {
+      window.parent.postMessage({ type: "ow:schedule-connected", schedule: { id: schedule.id, name: schedule.name } }, "*");
+    } else {
+      window.parent.postMessage({ type: "ow:scheduling-not-connected" }, "*");
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "section",
+    {
+      "data-ohw-section": "scheduling",
+      className: "w-full box-border py-20 px-16 font-body bg-(--color-light,#FEFFF0) relative",
+      onMouseEnter: () => inEditor && setIsHovered(true),
+      onMouseLeave: () => setIsHovered(false),
+      children: [
+        inEditor && isHovered && !!schedule && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+          "div",
+          {
+            className: "absolute inset-0 z-10 pointer-events-auto cursor-pointer",
+            onClick: handleReplaceSchedule,
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "absolute inset-0", style: { background: "#0885FE", opacity: 0.18 } }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "absolute inset-0", style: { boxShadow: "inset 0 0 0 1.5px #0885FE" } }),
+              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "absolute inset-0 flex items-center justify-center pointer-events-none", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                "div",
+                {
+                  className: "bg-white border border-[#E7E5E4] rounded-md px-3 py-1.5 flex items-center gap-1.5",
+                  style: {
+                    fontSize: 14,
+                    lineHeight: "24px",
+                    fontFamily: "'Figtree', system-ui, sans-serif",
+                    fontWeight: 500,
+                    color: "#0C0A09"
+                  },
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CalendarFoldIcon, {}),
+                    "Replace schedule"
+                  ]
+                }
+              ) })
+            ]
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "max-w-[1280px] mx-auto flex flex-col items-center gap-16", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex flex-col items-center gap-4", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h2", { className: "font-display text-5xl font-bold text-center m-0 text-(--color-dark,#200C02)", children: schedule?.name ?? "Book an appointment" }),
+            schedule?.description && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "font-body text-body text-center m-0 text-(--color-accent,#A89B83)", children: schedule.description })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "w-full flex flex-col items-end gap-3", children: [
+            timezoneLabel && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "font-body text-sm font-normal text-(--color-accent,#A89B83)", children: timezoneLabel }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "w-full p-10 box-border", children: loading ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(LoadingSkeleton, {}) : !schedule ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(EmptyState, { inEditor }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              ScheduleView,
+              {
+                schedule,
+                dates,
+                selectedIdx,
+                onSelectDate: setSelectedIdx
+              }
+            ) })
+          ] })
+        ] })
+      ]
+    }
+  );
+}
 
 // src/ui/toggle-group.tsx
-var React = __toESM(require("react"), 1);
+var React2 = __toESM(require("react"), 1);
 
 // node_modules/clsx/dist/clsx.mjs
 function r(e) {
@@ -3363,7 +3782,7 @@ var cva = (base, config) => (props) => {
 
 // src/ui/toggle.tsx
 var import_radix_ui = require("radix-ui");
-var import_jsx_runtime = require("react/jsx-runtime");
+var import_jsx_runtime2 = require("react/jsx-runtime");
 var toggleVariants = cva(
   "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-[color,box-shadow] outline-none hover:bg-muted hover:text-muted-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
   {
@@ -3390,7 +3809,7 @@ function Toggle({
   size,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
     import_radix_ui.Toggle.Root,
     {
       "data-slot": "toggle",
@@ -3401,8 +3820,8 @@ function Toggle({
 }
 
 // src/ui/toggle-group.tsx
-var import_jsx_runtime2 = require("react/jsx-runtime");
-var ToggleGroupContext = React.createContext({
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var ToggleGroupContext = React2.createContext({
   value: "",
   onValueChange: () => {
   }
@@ -3414,13 +3833,13 @@ function ToggleGroup({
   children,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
     "div",
     {
       role: "group",
       className: cn("flex items-center gap-1 p-1 bg-muted rounded-md", className),
       ...props,
-      children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ToggleGroupContext.Provider, { value: { value, onValueChange }, children })
+      children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ToggleGroupContext.Provider, { value: { value, onValueChange }, children })
     }
   );
 }
@@ -3430,8 +3849,8 @@ function ToggleGroupItem({
   children,
   ...props
 }) {
-  const { value: groupValue, onValueChange } = React.useContext(ToggleGroupContext);
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+  const { value: groupValue, onValueChange } = React2.useContext(ToggleGroupContext);
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
     Toggle,
     {
       pressed: groupValue === value,
@@ -3472,8 +3891,30 @@ function isEditSessionActive() {
   return new URLSearchParams(q).get("mode") === "edit";
 }
 
+// src/ui/badge.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var badgeVariants = cva(
+  "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  {
+    variants: {
+      variant: {
+        default: "border-transparent bg-primary text-primary-foreground",
+        secondary: "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        destructive: "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
+        outline: "text-foreground"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+function Badge({ className, variant, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: cn(badgeVariants({ variant }), className), ...props });
+}
+
 // src/OhhwellsBridge.tsx
-var import_jsx_runtime3 = require("react/jsx-runtime");
+var import_jsx_runtime5 = require("react/jsx-runtime");
 var PRIMARY = "#0885FE";
 var IMAGE_FADE_MS = 300;
 function runOpacityFade(el, onDone) {
@@ -3524,6 +3965,41 @@ function fadeInBgImage(el, url, onReady) {
     if (!prevPos || prevPos === "static") el.style.position = prevPos;
   });
 }
+function getSectionsTracker() {
+  let el = document.querySelector("[data-ohw-sections-tracker]");
+  if (!el) {
+    el = document.createElement("div");
+    el.setAttribute("data-ohw-sections-tracker", "");
+    el.style.display = "none";
+    document.body.appendChild(el);
+  }
+  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;
+  const container = document.createElement("div");
+  container.dataset.ohwSectionContainer = "scheduling";
+  anchor.insertAdjacentElement("afterend", container);
+  (0, import_client.createRoot)(container).render(/* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SchedulingWidget, { notifyOnConnect, initialScheduleId: scheduleId }));
+  const tracker = getSectionsTracker();
+  let sections = [];
+  try {
+    sections = JSON.parse(tracker.textContent || "[]");
+  } catch {
+  }
+  if (!sections.find((s) => s.type === "scheduling" && s.insertAfter === insertAfter)) {
+    sections.push({
+      type: "scheduling",
+      insertAfter,
+      pagePath: window.location.pathname,
+      ...scheduleId ? { scheduleId } : {}
+    });
+    tracker.textContent = JSON.stringify(sections);
+  }
+  return true;
+}
 function collectEditableNodes() {
   return Array.from(document.querySelectorAll("[data-ohw-editable]")).map((el) => {
     if (el.dataset.ohwEditable === "image") {
@@ -3681,7 +4157,7 @@ var TOOLBAR_GROUPS = [
 ];
 function GlowFrame({ rect, elRef }) {
   const GAP = 6;
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
     "div",
     {
       ref: elRef,
@@ -3732,7 +4208,7 @@ function FloatingToolbar({
   activeCommands
 }) {
   const { top, left, transform } = calcToolbarPos(rect, parentScroll);
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
     "div",
     {
       ref: elRef,
@@ -3755,11 +4231,11 @@ function FloatingToolbar({
         pointerEvents: "auto",
         whiteSpace: "nowrap"
       },
-      children: TOOLBAR_GROUPS.map((btns, gi) => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_react.default.Fragment, { children: [
-        gi > 0 && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { style: { display: "block", width: 1, height: 24, background: "#E7E5E4", flexShrink: 0 } }),
+      children: TOOLBAR_GROUPS.map((btns, gi) => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_react2.default.Fragment, { children: [
+        gi > 0 && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { style: { display: "block", width: 1, height: 24, background: "#E7E5E4", flexShrink: 0 } }),
         btns.map((btn) => {
           const isActive = activeCommands.has(btn.cmd);
-          return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+          return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
             "button",
             {
               title: btn.title,
@@ -3785,7 +4261,7 @@ function FloatingToolbar({
                 flexShrink: 0,
                 padding: 6
               },
-              children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+              children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
                 "svg",
                 {
                   width: "16",
@@ -3818,7 +4294,7 @@ function StateToggle({
   states,
   onStateChange
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
     ToggleGroup,
     {
       "data-ohw-state-toggle": "",
@@ -3832,7 +4308,7 @@ function StateToggle({
         left: rect.right - 8,
         transform: "translateX(-100%)"
       },
-      children: states.map((state) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ToggleGroupItem, { value: state, size: "sm", children: state }, state))
+      children: states.map((state) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ToggleGroupItem, { value: state, size: "sm", children: state }, state))
     }
   );
 }
@@ -3842,8 +4318,8 @@ function OhhwellsBridge() {
   const router = (0, import_navigation.useRouter)();
   const searchParams = (0, import_navigation.useSearchParams)();
   const isEditMode = isEditSessionActive();
-  const [bridgeRoot, setBridgeRoot] = (0, import_react.useState)(null);
-  (0, import_react.useEffect)(() => {
+  const [bridgeRoot, setBridgeRoot] = (0, import_react2.useState)(null);
+  (0, import_react2.useEffect)(() => {
     const figtreeFontId = "ohw-figtree-font";
     if (!document.getElementById(figtreeFontId)) {
       const preconnect1 = Object.assign(document.createElement("link"), { rel: "preconnect", href: "https://fonts.googleapis.com" });
@@ -3871,37 +4347,39 @@ function OhhwellsBridge() {
     const parts = window.location.hostname.split(".");
     return parts.length >= 3 && parts[0] !== "www" ? parts[0] : "";
   })();
-  const postToParent = (0, import_react.useCallback)((data) => {
+  const postToParent = (0, import_react2.useCallback)((data) => {
     if (typeof window !== "undefined" && window.parent !== window) {
       window.parent.postMessage(data, "*");
     }
   }, []);
-  const [fetchState, setFetchState] = (0, import_react.useState)("idle");
-  const autoSaveTimers = (0, import_react.useRef)(/* @__PURE__ */ new Map());
-  const activeElRef = (0, import_react.useRef)(null);
-  const originalContentRef = (0, import_react.useRef)(null);
-  const activeStateElRef = (0, import_react.useRef)(null);
-  const parentScrollRef = (0, import_react.useRef)(null);
-  const toolbarElRef = (0, import_react.useRef)(null);
-  const glowElRef = (0, import_react.useRef)(null);
-  const hoveredImageRef = (0, import_react.useRef)(null);
-  const hoveredImageHasTextOverlapRef = (0, import_react.useRef)(false);
-  const imageUnhoverTimerRef = (0, import_react.useRef)(null);
-  const imageShowTimerRef = (0, import_react.useRef)(null);
-  const editStylesRef = (0, import_react.useRef)(null);
-  const activateRef = (0, import_react.useRef)(() => {
+  const [fetchState, setFetchState] = (0, import_react2.useState)("idle");
+  const autoSaveTimers = (0, import_react2.useRef)(/* @__PURE__ */ new Map());
+  const activeElRef = (0, import_react2.useRef)(null);
+  const originalContentRef = (0, import_react2.useRef)(null);
+  const activeStateElRef = (0, import_react2.useRef)(null);
+  const parentScrollRef = (0, import_react2.useRef)(null);
+  const toolbarElRef = (0, import_react2.useRef)(null);
+  const glowElRef = (0, import_react2.useRef)(null);
+  const hoveredImageRef = (0, import_react2.useRef)(null);
+  const hoveredImageHasTextOverlapRef = (0, import_react2.useRef)(false);
+  const hoveredGapRef = (0, import_react2.useRef)(null);
+  const imageUnhoverTimerRef = (0, import_react2.useRef)(null);
+  const imageShowTimerRef = (0, import_react2.useRef)(null);
+  const editStylesRef = (0, import_react2.useRef)(null);
+  const activateRef = (0, import_react2.useRef)(() => {
   });
-  const deactivateRef = (0, import_react.useRef)(() => {
+  const deactivateRef = (0, import_react2.useRef)(() => {
   });
-  const refreshActiveCommandsRef = (0, import_react.useRef)(() => {
+  const refreshActiveCommandsRef = (0, import_react2.useRef)(() => {
   });
-  const postToParentRef = (0, import_react.useRef)(postToParent);
+  const postToParentRef = (0, import_react2.useRef)(postToParent);
   postToParentRef.current = postToParent;
-  const [toolbarRect, setToolbarRect] = (0, import_react.useState)(null);
-  const [toggleState, setToggleState] = (0, import_react.useState)(null);
-  const [maxBadge, setMaxBadge] = (0, import_react.useState)(null);
-  const [activeCommands, setActiveCommands] = (0, import_react.useState)(/* @__PURE__ */ new Set());
-  (0, import_react.useEffect)(() => {
+  const [toolbarRect, setToolbarRect] = (0, import_react2.useState)(null);
+  const [toggleState, setToggleState] = (0, import_react2.useState)(null);
+  const [maxBadge, setMaxBadge] = (0, import_react2.useState)(null);
+  const [activeCommands, setActiveCommands] = (0, import_react2.useState)(/* @__PURE__ */ new Set());
+  const [sectionGap, setSectionGap] = (0, import_react2.useState)(null);
+  (0, import_react2.useEffect)(() => {
     const update = () => {
       const el = activeElRef.current;
       if (el) setToolbarRect(el.getBoundingClientRect());
@@ -3909,6 +4387,12 @@ function OhhwellsBridge() {
         if (!prev || !activeStateElRef.current) return prev;
         return { ...prev, rect: activeStateElRef.current.getBoundingClientRect() };
       });
+      setSectionGap((prev) => {
+        if (!prev) return prev;
+        const anchor = document.querySelector(`[data-ohw-section="${prev.insertAfter}"]`);
+        if (!anchor) return prev;
+        return { ...prev, y: anchor.getBoundingClientRect().bottom };
+      });
     };
     const vvp = window.visualViewport;
     if (!vvp) return;
@@ -3919,10 +4403,10 @@ function OhhwellsBridge() {
       vvp.removeEventListener("resize", update);
     };
   }, []);
-  const refreshStateRules = (0, import_react.useCallback)(() => {
+  const refreshStateRules = (0, import_react2.useCallback)(() => {
     editStylesRef.current?.forceHover && (editStylesRef.current.forceHover.textContent = collectStateRules());
   }, []);
-  const deactivate = (0, import_react.useCallback)(() => {
+  const deactivate = (0, import_react2.useCallback)(() => {
     const el = activeElRef.current;
     if (!el) return;
     const key = el.dataset.ohwKey;
@@ -3947,7 +4431,7 @@ function OhhwellsBridge() {
     setActiveCommands(/* @__PURE__ */ new Set());
     postToParent({ type: "ow:exit-edit" });
   }, [postToParent]);
-  const activate = (0, import_react.useCallback)((el) => {
+  const activate = (0, import_react2.useCallback)((el) => {
     if (activeElRef.current === el) return;
     deactivate();
     if (hoveredImageRef.current) {
@@ -3965,14 +4449,27 @@ function OhhwellsBridge() {
   }, [deactivate, postToParent]);
   activateRef.current = activate;
   deactivateRef.current = deactivate;
-  (0, import_react.useLayoutEffect)(() => {
+  (0, import_react2.useLayoutEffect)(() => {
     if (!subdomain || isEditMode) {
       setFetchState("done");
       return;
     }
     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) => {
           if (el.dataset.ohwEditable === "image") {
             const img = el instanceof HTMLImageElement ? el : el.querySelector("img");
@@ -4015,12 +4512,24 @@ function OhhwellsBridge() {
       cancelled = true;
     };
   }, [subdomain, isEditMode, pathname]);
-  (0, import_react.useEffect)(() => {
+  (0, import_react2.useEffect)(() => {
     if (!subdomain || isEditMode) return;
     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 {
+        }
+      }
       for (const [key, val] of Object.entries(content)) {
+        if (key === "__ohw_sections") continue;
         document.querySelectorAll(`[data-ohw-key="${key}"]`).forEach((el) => {
           if (el.dataset.ohwEditable === "image") {
             const img = el instanceof HTMLImageElement ? el : el.querySelector("img");
@@ -4039,16 +4548,16 @@ function OhhwellsBridge() {
     observer.observe(document.body, { childList: true, subtree: true });
     return () => observer.disconnect();
   }, [subdomain, isEditMode]);
-  (0, import_react.useLayoutEffect)(() => {
+  (0, import_react2.useLayoutEffect)(() => {
     const el = document.getElementById("ohw-loader");
     if (!el) return;
     const visible = Boolean(subdomain) && fetchState !== "done";
     el.style.display = visible ? "flex" : "none";
   }, [subdomain, fetchState]);
-  (0, import_react.useEffect)(() => {
+  (0, import_react2.useEffect)(() => {
     postToParent({ type: "ow:navigation", path: pathname });
   }, [pathname, postToParent]);
-  (0, import_react.useEffect)(() => {
+  (0, import_react2.useEffect)(() => {
     if (!isEditMode) return;
     const measure = () => {
       const h = document.body.scrollHeight;
@@ -4072,7 +4581,7 @@ function OhhwellsBridge() {
       window.removeEventListener("resize", handleResize);
     };
   }, [pathname, isEditMode, postToParent]);
-  (0, import_react.useEffect)(() => {
+  (0, import_react2.useEffect)(() => {
     if (!subdomainFromQuery || isEditMode) return;
     const handleClick = (e) => {
       const anchor = e.target.closest("a");
@@ -4088,7 +4597,7 @@ function OhhwellsBridge() {
     document.addEventListener("click", handleClick, true);
     return () => document.removeEventListener("click", handleClick, true);
   }, [subdomainFromQuery, isEditMode, router]);
-  (0, import_react.useEffect)(() => {
+  (0, import_react2.useEffect)(() => {
     if (!isEditMode) {
       editStylesRef.current?.base.remove();
       editStylesRef.current?.forceHover.remove();
@@ -4348,6 +4857,15 @@ function OhhwellsBridge() {
           textEditable.setAttribute("data-ohw-hovered", "");
           return;
         }
+        if (hoveredGapRef.current) {
+          if (hoveredImageRef.current) {
+            hoveredImageRef.current = null;
+            resumeAnimTracks();
+            postToParentRef.current({ type: "ow:image-unhover" });
+          }
+          document.querySelectorAll("[data-ohw-hovered]").forEach((el) => el.removeAttribute("data-ohw-hovered"));
+          return;
+        }
         document.querySelectorAll("[data-ohw-hovered]").forEach((el) => el.removeAttribute("data-ohw-hovered"));
         if (imgEl !== hoveredImageRef.current || hoveredImageHasTextOverlapRef.current) {
           hoveredImageRef.current = imgEl;
@@ -4413,8 +4931,30 @@ function OhhwellsBridge() {
         }
       }
     };
+    const probeSectionGapAt = (clientX, clientY, fromParentViewport = false) => {
+      const { y } = toProbeCoords(clientX, clientY, fromParentViewport);
+      const sections = Array.from(document.querySelectorAll("[data-ohw-section]")).sort((a, b) => a.getBoundingClientRect().top - b.getBoundingClientRect().top);
+      const ZONE = 20;
+      for (let i = 0; i < sections.length; i++) {
+        const a = sections[i];
+        const b = sections[i + 1] ?? null;
+        const boundaryY = a.getBoundingClientRect().bottom;
+        if (Math.abs(y - boundaryY) <= ZONE) {
+          const insertAfter = a.dataset.ohwSection ?? "";
+          const insertBefore = b?.dataset.ohwSection ?? null;
+          hoveredGapRef.current = { insertAfter, insertBefore };
+          setSectionGap({ insertAfter, insertBefore, y: boundaryY });
+          return;
+        }
+      }
+      if (hoveredGapRef.current) {
+        hoveredGapRef.current = null;
+        setSectionGap(null);
+      }
+    };
     const handleMouseMove = (e) => {
       const { clientX, clientY } = e;
+      probeSectionGapAt(clientX, clientY);
       probeImageAt(clientX, clientY);
       probeHoverCardsAt(clientX, clientY);
     };
@@ -4422,6 +4962,7 @@ function OhhwellsBridge() {
       if (e.data?.type !== "ow:pointer-sync") return;
       const { clientX, clientY } = e.data;
       if (typeof clientX !== "number" || typeof clientY !== "number") return;
+      probeSectionGapAt(clientX, clientY);
       probeImageAt(clientX, clientY);
       probeHoverCardsAt(clientX, clientY);
     };
@@ -4580,6 +5121,18 @@ function OhhwellsBridge() {
       const content = e.data.content;
       if (!content) return;
       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 {
+          }
+          continue;
+        }
         document.querySelectorAll(`[data-ohw-key="${key}"]`).forEach((el) => {
           if (el.dataset.ohwEditable === "image") {
             const img = el instanceof HTMLImageElement ? el : el.querySelector("img");
@@ -4634,7 +5187,71 @@ function OhhwellsBridge() {
     };
     const handleSave = (e) => {
       if (e.data?.type !== "ow:save") return;
-      postToParentRef.current({ type: "ow:save-result", nodes: collectEditableNodes() });
+      const nodes = collectEditableNodes();
+      const tracker = document.querySelector("[data-ohw-sections-tracker]");
+      if (tracker?.textContent) nodes.push({ key: "__ohw_sections", type: "sections", text: tracker.textContent });
+      postToParentRef.current({ type: "ow:save-result", nodes });
+    };
+    const handleInsertSection = (e) => {
+      if (e.data?.type !== "ow:insert-section") return;
+      const { widgetType, insertAfter } = e.data;
+      if (widgetType !== "scheduling") return;
+      const inserted = mountSchedulingWidget(insertAfter, true);
+      if (inserted) {
+        const tracker = getSectionsTracker();
+        postToParentRef.current({ type: "ow:change", nodes: [{ key: "__ohw_sections", text: tracker.textContent ?? "[]" }] });
+        const h = document.documentElement.scrollHeight;
+        if (h > 50) postToParentRef.current({ type: "ow:height", height: h });
+      }
+    };
+    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 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 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));
+      const tracker = getSectionsTracker();
+      let sections = [];
+      try {
+        sections = JSON.parse(tracker.textContent || "[]");
+      } catch {
+      }
+      const currentPath = window.location.pathname;
+      const updated = sections.filter((s) => !(s.type === "scheduling" && s.pagePath === currentPath));
+      tracker.textContent = JSON.stringify(updated);
+      postToParentRef.current({ type: "ow:change", nodes: [{ key: "__ohw_sections", text: tracker.textContent }] });
+      const h = document.documentElement.scrollHeight;
+      if (h > 50) postToParentRef.current({ type: "ow:height", height: h });
     };
     const handleSelectionChange = () => {
       if (!activeElRef.current) return;
@@ -4739,6 +5356,10 @@ function OhhwellsBridge() {
       deactivateRef.current();
     };
     window.addEventListener("message", handleSave);
+    window.addEventListener("message", handleInsertSection);
+    window.addEventListener("message", handleSwitchSchedule);
+    window.addEventListener("message", handleClearSchedulingWidget);
+    window.addEventListener("message", handleRemoveSchedulingSection);
     window.addEventListener("message", handleImageUrl);
     window.addEventListener("message", handleAnimLock);
     window.addEventListener("message", handleCanvasHeight);
@@ -4773,6 +5394,10 @@ function OhhwellsBridge() {
       document.removeEventListener("selectionchange", handleSelectionChange);
       window.removeEventListener("scroll", handleScroll, true);
       window.removeEventListener("message", handleSave);
+      window.removeEventListener("message", handleInsertSection);
+      window.removeEventListener("message", handleSwitchSchedule);
+      window.removeEventListener("message", handleClearSchedulingWidget);
+      window.removeEventListener("message", handleRemoveSchedulingSection);
       window.removeEventListener("message", handleImageUrl);
       window.removeEventListener("message", handleAnimLock);
       window.removeEventListener("message", handleCanvasHeight);
@@ -4787,7 +5412,7 @@ function OhhwellsBridge() {
       if (imageShowTimerRef.current) clearTimeout(imageShowTimerRef.current);
     };
   }, [isEditMode, refreshStateRules]);
-  (0, import_react.useEffect)(() => {
+  (0, import_react2.useEffect)(() => {
     if (!isEditMode) return;
     document.querySelectorAll("[data-ohw-active-state]").forEach((el) => {
       el.removeAttribute("data-ohw-active-state");
@@ -4809,13 +5434,13 @@ function OhhwellsBridge() {
       clearTimeout(timer);
     };
   }, [pathname, isEditMode, refreshStateRules, postToParent]);
-  const handleCommand = (0, import_react.useCallback)((cmd) => {
+  const handleCommand = (0, import_react2.useCallback)((cmd) => {
     document.execCommand(cmd, false);
     activeElRef.current?.focus();
     if (activeElRef.current) setToolbarRect(activeElRef.current.getBoundingClientRect());
     refreshActiveCommandsRef.current();
   }, []);
-  const handleStateChange = (0, import_react.useCallback)((state) => {
+  const handleStateChange = (0, import_react2.useCallback)((state) => {
     if (!activeStateElRef.current) return;
     const el = activeStateElRef.current;
     if (state === "Default") {
@@ -4829,12 +5454,12 @@ function OhhwellsBridge() {
     setToggleState((prev) => prev ? { ...prev, activeState: state } : null);
   }, [deactivate]);
   return bridgeRoot ? (0, import_react_dom.createPortal)(
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
-      toolbarRect && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(GlowFrame, { rect: toolbarRect, elRef: glowElRef }),
-        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(FloatingToolbar, { rect: toolbarRect, parentScroll: parentScrollRef.current, elRef: toolbarElRef, onCommand: handleCommand, activeCommands })
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
+      toolbarRect && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(GlowFrame, { rect: toolbarRect, elRef: glowElRef }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(FloatingToolbar, { rect: toolbarRect, parentScroll: parentScrollRef.current, elRef: toolbarElRef, onCommand: handleCommand, activeCommands })
       ] }),
-      maxBadge && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+      maxBadge && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
         "div",
         {
           "data-ohw-max-badge": "",
@@ -4860,7 +5485,7 @@ function OhhwellsBridge() {
           ]
         }
       ),
-      toggleState && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      toggleState && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
         StateToggle,
         {
           rect: toggleState.rect,
@@ -4868,6 +5493,31 @@ function OhhwellsBridge() {
           states: toggleState.states,
           onStateChange: handleStateChange
         }
+      ),
+      sectionGap && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+        "div",
+        {
+          "data-ohw-section-insert-line": "",
+          className: "fixed left-0 w-full z-2147483646 flex items-center pointer-events-none",
+          style: { top: sectionGap.y, transform: "translateY(-50%)" },
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "flex-1 bg-primary", style: { height: 3 } }),
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+              Badge,
+              {
+                className: "px-8 py-1 bg-primary hover:bg-primary text-primary-foreground text-xs font-medium shrink-0 rounded-full cursor-pointer pointer-events-auto",
+                onClick: () => {
+                  window.parent.postMessage(
+                    { type: "ow:add-section", insertAfter: sectionGap.insertAfter, insertBefore: sectionGap.insertBefore },
+                    "*"
+                  );
+                },
+                children: "Add Section"
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "flex-1 bg-primary", style: { height: 3 } })
+          ]
+        }
       )
     ] }),
     bridgeRoot
@@ -4876,6 +5526,7 @@ function OhhwellsBridge() {
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   OhhwellsBridge,
+  SchedulingWidget,
   Toggle,
   ToggleGroup,
   ToggleGroupItem,