@ohhwells/bridge 0.1.29 → 0.1.31-next.29

package/dist/index.js

@@ -1,10 +1,762 @@
 "use client";
 
 // src/OhhwellsBridge.tsx
-import React4, { useCallback as useCallback2, useEffect as useEffect2, useLayoutEffect, useRef as useRef2, useState as useState3 } from "react";
+import React6, { useCallback as useCallback2, useEffect as useEffect3, useLayoutEffect, useRef as useRef3, useState as useState5 } from "react";
+import { createRoot } from "react-dom/client";
+import { flushSync } from "react-dom";
+
+// src/ui/SchedulingWidget.tsx
+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";
+function Spinner() {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      width: "32",
+      height: "32",
+      viewBox: "0 0 32 32",
+      fill: "none",
+      style: { animation: "ohw-spin 0.75s linear infinite" },
+      children: [
+        /* @__PURE__ */ jsx("style", { children: `@keyframes ohw-spin { to { transform: rotate(360deg); } }` }),
+        /* @__PURE__ */ jsx("circle", { cx: "16", cy: "16", r: "12", stroke: "#e5e7eb", strokeWidth: "3" }),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M16 4a12 12 0 0 1 12 12",
+            stroke: "#3b82f6",
+            strokeWidth: "3",
+            strokeLinecap: "round"
+          }
+        )
+      ]
+    }
+  );
+}
+function EmailCaptureModal({ title, subtitle, onSubmit, onClose }) {
+  const [email, setEmail] = useState("");
+  const [submittedEmail, setSubmittedEmail] = useState("");
+  const [loading, setLoading] = useState(false);
+  const [success, setSuccess] = useState(false);
+  const [error, setError] = useState(null);
+  const isBook = title === "Confirm your spot";
+  const handleSubmit = async () => {
+    if (!email.trim()) return;
+    setLoading(true);
+    setError(null);
+    try {
+      await onSubmit(email.trim());
+      setSubmittedEmail(email.trim());
+      setSuccess(true);
+    } catch (e) {
+      setError(e instanceof Error ? e.message : "Something went wrong. Please try again.");
+    } finally {
+      setLoading(false);
+    }
+  };
+  const handleKeyDown = (e) => {
+    if (e.key === "Enter" && !loading) handleSubmit();
+  };
+  return /* @__PURE__ */ jsx(Dialog.Root, { open: true, onOpenChange: (open) => {
+    if (!open) onClose();
+  }, children: /* @__PURE__ */ jsxs(Dialog.Portal, { children: [
+    /* @__PURE__ */ jsx(
+      Dialog.Overlay,
+      {
+        className: "fixed inset-0 z-50",
+        style: { background: "rgba(0,0,0,0.45)" }
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      Dialog.Content,
+      {
+        className: "fixed left-1/2 top-1/2 z-50 w-full -translate-x-1/2 -translate-y-1/2 bg-white rounded-xl shadow-xl outline-none font-body box-border overflow-hidden",
+        style: { maxWidth: 400 },
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-start justify-between gap-3 p-6", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
+              /* @__PURE__ */ jsx(
+                Dialog.Title,
+                {
+                  className: "font-body text-xl font-bold m-0 leading-tight",
+                  style: { color: "var(--color-dark,#200C02)" },
+                  children: success ? isBook ? "Reservation confirmed!" : "You're on the waitlist!" : title
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Dialog.Description,
+                {
+                  className: "font-body text-sm m-0",
+                  style: { color: "#6B7280" },
+                  children: success ? isBook ? `A confirmation email has been sent to ${submittedEmail}.` : "We'll let you know via email if someone cancels." : subtitle
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsx(
+              Dialog.Close,
+              {
+                className: "shrink-0 w-7 h-7 flex items-center justify-center rounded-full bg-transparent border-none cursor-pointer mt-0.5 absolute top-2.5 right-1.5",
+                style: { color: "#6B7280" },
+                "aria-label": "Close",
+                children: /* @__PURE__ */ jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+                  /* @__PURE__ */ jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+                  /* @__PURE__ */ jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+                ] })
+              }
+            )
+          ] }),
+          !success && (loading ? (
+            /* Loading state — full body replaced */
+            /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center justify-center gap-3 px-7 py-12", children: [
+              /* @__PURE__ */ jsx(Spinner, {}),
+              /* @__PURE__ */ jsx("p", { className: "font-body text-sm m-0", style: { color: "#6B7280" }, children: "Please wait" })
+            ] })
+          ) : (
+            /* Email form */
+            /* @__PURE__ */ jsxs("div", { className: "px-7 pt-2 pb-6", children: [
+              /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1.5 mb-8", children: [
+                /* @__PURE__ */ jsx("label", { className: "font-body text-sm font-medium", style: { color: "var(--color-dark,#200C02)" }, children: "Email" }),
+                /* @__PURE__ */ jsx(
+                  "input",
+                  {
+                    type: "email",
+                    value: email,
+                    onChange: (e) => setEmail(e.target.value),
+                    onKeyDown: handleKeyDown,
+                    placeholder: "hello@gmail.com",
+                    autoFocus: true,
+                    className: "w-full h-10 px-3 rounded-lg border font-body text-sm outline-none box-border",
+                    style: {
+                      borderColor: "#E7E5E4",
+                      background: "#fff",
+                      color: "var(--color-dark,#200C02)"
+                    }
+                  }
+                ),
+                error && /* @__PURE__ */ jsx("p", { className: "font-body text-xs text-red-500 m-0", children: error })
+              ] }),
+              /* @__PURE__ */ jsx("div", { className: "flex justify-end", children: /* @__PURE__ */ jsx(
+                "button",
+                {
+                  onClick: handleSubmit,
+                  disabled: !email.trim(),
+                  className: "h-9 px-5 rounded-lg font-body text-sm font-semibold cursor-pointer border-none disabled:opacity-50 disabled:cursor-not-allowed",
+                  style: {
+                    background: "var(--color-primary,#3D312B)",
+                    color: "var(--color-light,#FEFFF0)"
+                  },
+                  children: "Send"
+                }
+              ) })
+            ] })
+          ))
+        ]
+      }
+    )
+  ] }) });
+}
+
+// src/ui/SchedulingWidget.tsx
+import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "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 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, insertAfter }) {
+  const handleAddSchedule = () => {
+    if (inEditor) {
+      window.parent.postMessage({ type: "ow:scheduling-not-connected", insertAfter }, "*");
+    }
+  };
+  return /* @__PURE__ */ jsxs2("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__ */ jsx2("div", { className: "w-10 h-10 bg-[#F5F5F4] rounded-[10px] flex items-center justify-center shrink-0", children: /* @__PURE__ */ jsxs2(
+      "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__ */ jsx2("rect", { x: "3", y: "4", width: "18", height: "18", rx: "2" }),
+          /* @__PURE__ */ jsx2("line", { x1: "16", y1: "2", x2: "16", y2: "6" }),
+          /* @__PURE__ */ jsx2("line", { x1: "8", y1: "2", x2: "8", y2: "6" }),
+          /* @__PURE__ */ jsx2("line", { x1: "3", y1: "10", x2: "21", y2: "10" }),
+          /* @__PURE__ */ jsx2("line", { x1: "12", y1: "14", x2: "12", y2: "18" }),
+          /* @__PURE__ */ jsx2("line", { x1: "10", y1: "16", x2: "14", y2: "16" })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsxs2("div", { className: "flex flex-col items-center gap-2", children: [
+      /* @__PURE__ */ jsx2("p", { className: "font-body text-lg font-medium text-center text-[#0A0A0A] m-0", children: "No schedule yet" }),
+      /* @__PURE__ */ jsx2("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__ */ jsx2(
+      "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__ */ jsxs2("div", { className: "w-full flex flex-col gap-10", children: [
+    /* @__PURE__ */ jsx2("style", { children: `@keyframes ohw-shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}` }),
+    /* @__PURE__ */ jsx2("div", { className: "flex h-[70px] items-stretch", children: Array.from({ length: 7 }).map((_, i) => /* @__PURE__ */ jsxs2("div", { className: "flex-1 flex flex-col justify-between items-center px-1", children: [
+      /* @__PURE__ */ jsx2("div", { style: { ...shimmer, width: "32px", height: "14px", borderRadius: "4px" } }),
+      /* @__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 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" } }),
+          /* @__PURE__ */ jsx2("div", { style: { ...shimmer, width: "38%", height: "14px", borderRadius: "4px" } })
+        ] }),
+        /* @__PURE__ */ jsx2("div", { style: { ...shimmer, width: "56px", height: "32px", borderRadius: "4px", flexShrink: 0 } }),
+        /* @__PURE__ */ jsx2("div", { style: { ...shimmer, width: "200px", height: "44px", borderRadius: "8px", flexShrink: 0 } })
+      ] }),
+      i < 2 && /* @__PURE__ */ jsx2("div", { className: "h-px bg-black/20" })
+    ] }, i))
+  ] });
+}
+function ScheduleView({ schedule, dates, selectedIdx, onSelectDate, onOpenModal }) {
+  const todayMs = useMemo(() => {
+    const d = /* @__PURE__ */ new Date();
+    d.setHours(0, 0, 0, 0);
+    return d.getTime();
+  }, []);
+  const scrollRef = useRef(null);
+  const [canScrollLeft, setCanScrollLeft] = useState2(false);
+  const [canScrollRight, setCanScrollRight] = useState2(false);
+  const updateScrollState = () => {
+    const el = scrollRef.current;
+    if (!el) return;
+    setCanScrollLeft(el.scrollLeft > 0);
+    setCanScrollRight(el.scrollLeft + el.clientWidth < el.scrollWidth - 1);
+  };
+  useEffect(() => {
+    const el = scrollRef.current;
+    if (!el) return;
+    updateScrollState();
+    el.addEventListener("scroll", updateScrollState);
+    const ro = new ResizeObserver(updateScrollState);
+    ro.observe(el);
+    return () => {
+      el.removeEventListener("scroll", updateScrollState);
+      ro.disconnect();
+    };
+  }, [dates]);
+  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
+    ).filter((i) => i >= 0)),
+    [dates, schedule]
+  );
+  const selectedDate = dates[selectedIdx];
+  const selectedClasses = useMemo(
+    () => (schedule.classes ?? []).filter((c) => selectedDate && classRunsOnDate(c, selectedDate, schedule.type)),
+    [schedule, selectedDate]
+  );
+  return /* @__PURE__ */ jsxs2("div", { className: "w-full flex flex-col gap-10", children: [
+    /* @__PURE__ */ jsxs2("div", { className: "relative w-full", children: [
+      canScrollLeft && /* @__PURE__ */ jsx2(
+        "button",
+        {
+          onClick: () => scroll("left"),
+          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" }) })
+        }
+      ),
+      canScrollRight && /* @__PURE__ */ jsx2(
+        "button",
+        {
+          onClick: () => scroll("right"),
+          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", 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;
+            const clickable = datesWithClasses.has(i);
+            const label = isToday ? "TODAY" : DAY_ABBR[date.getDay()];
+            return /* @__PURE__ */ jsxs2(
+              "div",
+              {
+                onClick: () => clickable && onSelectDate(i),
+                className: `flex-1 h-[70px] flex flex-col justify-between items-center ${clickable ? "cursor-pointer opacity-100" : "cursor-default opacity-50"}`,
+                children: [
+                  /* @__PURE__ */ jsx2("span", { className: "font-body text-base font-normal text-center text-(--color-dark,#200C02)", children: label }),
+                  /* @__PURE__ */ jsx2(
+                    "div",
+                    {
+                      className: "w-10 h-10 rounded-full flex items-center justify-center",
+                      style: { background: isSelected ? "var(--color-primary, #3D312B)" : "transparent" },
+                      children: /* @__PURE__ */ jsx2(
+                        "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__ */ jsx2("p", { className: "font-body text-base text-(--color-accent,#A89B83) text-center py-8 m-0", children: "No classes scheduled for this day." }) : /* @__PURE__ */ jsx2("div", { className: "flex flex-col", children: selectedClasses.map((cls, i) => {
+      const booked = getBookingsOnDate(cls, selectedDate);
+      const available = cls.maxParticipants - booked;
+      const isFull = available <= 0;
+      const isPrivate = cls.maxParticipants === 1;
+      return /* @__PURE__ */ jsxs2("div", { children: [
+        /* @__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__ */ jsxs2("div", { className: "flex flex-col gap-2 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 text-xs font-medium w-fit",
+                  style: isPrivate ? { background: "#DDFBE3", color: "#199130", border: "1px solid #199130", fontWeight: 500 } : { background: "#EEEDFF", color: "#5953FF", border: "1px solid #5953FF", fontWeight: 500 },
+                  children: isPrivate ? "PRIVATE" : "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__ */ 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("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);
+    }) })
+  ] });
+}
+function CalendarFoldIcon() {
+  return /* @__PURE__ */ jsxs2(
+    "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__ */ jsx2("path", { d: "M8 2v4" }),
+        /* @__PURE__ */ jsx2("path", { d: "M16 2v4" }),
+        /* @__PURE__ */ jsx2("path", { d: "M21 17V6a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h11Z" }),
+        /* @__PURE__ */ jsx2("path", { d: "M3 10h18" }),
+        /* @__PURE__ */ jsx2("path", { d: "M15 22v-4a2 2 0 0 1 2-2h4" })
+      ]
+    }
+  );
+}
+function SchedulingWidget({ notifyOnConnect = false, initialScheduleId, insertAfter: insertAfterProp }) {
+  const autoId = useId();
+  const insertAfter = insertAfterProp ?? autoId;
+  const [schedule, setSchedule] = useState2(null);
+  const [loading, setLoading] = useState2(true);
+  const [inEditor, setInEditor] = useState2(false);
+  const [isHovered, setIsHovered] = useState2(false);
+  const [modalState, setModalState] = useState2(null);
+  const switchScheduleIdRef = useRef(null);
+  const dates = 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] = useState2(0);
+  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]);
+  useEffect(() => {
+    if (typeof window === "undefined") return;
+    const isInEditor = window.self !== window.top;
+    setInEditor(isInEditor);
+    function loadWithId(effectiveId) {
+      if (isInEditor) {
+        const startEmpty = effectiveId === 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") {
+            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", 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);
+          const schedules = e.data.schedules ?? [];
+          const isSwitching = switchScheduleIdRef.current !== null;
+          const target = isSwitching ? schedules.find((s) => s.id === switchScheduleIdRef.current) ?? schedules[0] ?? null : effectiveId ? schedules.find((s) => s.id === effectiveId) ?? 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 },
+              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", insertAfter }, "*");
+        return () => {
+          window.removeEventListener("message", handler);
+          if (timer) clearTimeout(timer);
+        };
+      }
+      if (!effectiveId) {
+        setLoading(false);
+        return;
+      }
+      ;
+      (async () => {
+        try {
+          const res = await fetch(`${API_URL}/api/schedule/id/${effectiveId}`);
+          const data = await res.json();
+          setSchedule(data?.id ? data : null);
+        } catch {
+        }
+        setLoading(false);
+      })();
+    }
+    if (initialScheduleId === void 0) {
+      let done = false;
+      let innerCleanup;
+      const timer = setTimeout(() => {
+        if (!done) {
+          done = true;
+          setLoading(false);
+        }
+      }, 2e3);
+      const configHandler = (e) => {
+        if (e.data?.type !== "ow:schedule-config" || e.data.insertAfter !== insertAfter || done) return;
+        done = true;
+        clearTimeout(timer);
+        window.removeEventListener("message", configHandler);
+        innerCleanup = loadWithId(e.data.scheduleId ?? null);
+      };
+      window.addEventListener("message", configHandler);
+      window.postMessage({ type: "ow:request-schedule-config", insertAfter }, "*");
+      return () => {
+        window.removeEventListener("message", configHandler);
+        clearTimeout(timer);
+        innerCleanup?.();
+      };
+    }
+    return loadWithId(initialScheduleId) ?? void 0;
+  }, []);
+  const timezoneLabel = schedule?.timezone ? (() => {
+    try {
+      return buildTimezoneLabel(schedule.timezone);
+    } catch {
+      return void 0;
+    }
+  })() : void 0;
+  const handleModalSubmit = async (email) => {
+    if (!modalState) return;
+    const { mode, classId, classDate } = modalState;
+    const endpoint = mode === "book" ? `${API_URL}/api/schedule/class/${classId}/booking` : `${API_URL}/api/schedule/class/${classId}/waitlist`;
+    const res = await fetch(endpoint, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({ classDate: classDate.toISOString(), email })
+    });
+    if (!res.ok) {
+      const data = await res.json().catch(() => ({}));
+      throw new Error(data?.message ?? "Something went wrong. Please try again.");
+    }
+  };
+  const handleReplaceSchedule = () => {
+    setIsHovered(false);
+    if (schedule) {
+      window.parent.postMessage({
+        type: "ow:schedule-connected",
+        schedule: { id: schedule.id, name: schedule.name },
+        insertAfter
+      }, "*");
+    } else {
+      window.parent.postMessage({ type: "ow:scheduling-not-connected", insertAfter }, "*");
+    }
+  };
+  if (!inEditor && !loading && !schedule) return null;
+  const sectionId = `scheduling-${insertAfter}`;
+  return /* @__PURE__ */ jsxs2(
+    "section",
+    {
+      "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: [
+        inEditor && isHovered && !!schedule && /* @__PURE__ */ jsxs2(
+          "div",
+          {
+            className: "absolute inset-0 z-10 pointer-events-auto cursor-pointer",
+            onClick: handleReplaceSchedule,
+            children: [
+              /* @__PURE__ */ jsx2("div", { className: "absolute inset-0", style: { background: "#0885FE", opacity: 0.18 } }),
+              /* @__PURE__ */ jsx2("div", { className: "absolute inset-0", style: { boxShadow: "inset 0 0 0 1.5px #0885FE" } }),
+              /* @__PURE__ */ jsx2("div", { className: "absolute inset-0 flex items-center justify-center pointer-events-none", children: /* @__PURE__ */ jsxs2(
+                "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__ */ jsx2(CalendarFoldIcon, {}),
+                    "Replace schedule"
+                  ]
+                }
+              ) })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs2("div", { className: "max-w-[1280px] mx-auto flex flex-col items-center gap-16", children: [
+          /* @__PURE__ */ jsxs2("div", { className: "flex flex-col items-center gap-4", children: [
+            /* @__PURE__ */ jsx2("h2", { className: "font-display text-4xl sm:text-5xl font-bold text-center m-0 text-(--color-dark,#200C02)", children: schedule?.name ?? "Book an appointment" }),
+            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-0 sm:p-10 box-border", children: loading ? /* @__PURE__ */ jsx2(LoadingSkeleton, {}) : !schedule ? /* @__PURE__ */ jsx2(EmptyState, { inEditor, insertAfter }) : /* @__PURE__ */ jsx2(
+              ScheduleView,
+              {
+                schedule,
+                dates,
+                selectedIdx,
+                onSelectDate: setSelectedIdx,
+                onOpenModal: inEditor ? void 0 : (mode, classId, classDate) => setModalState({ mode, classId, classDate })
+              }
+            ) })
+          ] })
+        ] }),
+        modalState && /* @__PURE__ */ jsx2(
+          EmailCaptureModal,
+          {
+            title: modalState.mode === "book" ? "Confirm your spot" : "Leave your email",
+            subtitle: modalState.mode === "book" ? "We'll send your booking confirmation here." : "We'll let you know when spots open up!",
+            onSubmit: handleModalSubmit,
+            onClose: () => setModalState(null)
+          }
+        )
+      ]
+    }
+  );
+}
 
 // src/ui/toggle-group.tsx
-import * as React from "react";
+import * as React2 from "react";
 
 // node_modules/clsx/dist/clsx.mjs
 function r(e) {
@@ -3324,7 +4076,7 @@ var cva = (base, config) => (props) => {
 
 // src/ui/toggle.tsx
 import { Toggle as TogglePrimitive } from "radix-ui";
-import { jsx } from "react/jsx-runtime";
+import { jsx as jsx3 } from "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",
   {
@@ -3351,7 +4103,7 @@ function Toggle({
   size,
   ...props
 }) {
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx3(
     TogglePrimitive.Root,
     {
       "data-slot": "toggle",
@@ -3362,8 +4114,8 @@ function Toggle({
 }
 
 // src/ui/toggle-group.tsx
-import { jsx as jsx2 } from "react/jsx-runtime";
-var ToggleGroupContext = React.createContext({
+import { jsx as jsx4 } from "react/jsx-runtime";
+var ToggleGroupContext = React2.createContext({
   value: "",
   onValueChange: () => {
   }
@@ -3375,13 +4127,13 @@ function ToggleGroup({
   children,
   ...props
 }) {
-  return /* @__PURE__ */ jsx2(
+  return /* @__PURE__ */ jsx4(
     "div",
     {
       role: "group",
       className: cn("flex items-center gap-1 p-1 bg-muted rounded-md", className),
       ...props,
-      children: /* @__PURE__ */ jsx2(ToggleGroupContext.Provider, { value: { value, onValueChange }, children })
+      children: /* @__PURE__ */ jsx4(ToggleGroupContext.Provider, { value: { value, onValueChange }, children })
     }
   );
 }
@@ -3391,8 +4143,8 @@ function ToggleGroupItem({
   children,
   ...props
 }) {
-  const { value: groupValue, onValueChange } = React.useContext(ToggleGroupContext);
-  return /* @__PURE__ */ jsx2(
+  const { value: groupValue, onValueChange } = React2.useContext(ToggleGroupContext);
+  return /* @__PURE__ */ jsx4(
     Toggle,
     {
       pressed: groupValue === value,
@@ -3689,26 +4441,135 @@ function scrollToHashSectionWhenReady(behavior = "smooth") {
   tick();
 }
 
-// src/ui/link-modal/calcPopoverPos.ts
-function calcPopoverPos(rect, parentScroll, approxW = 483, approxH = 320) {
-  const GAP = 8;
-  const canvasTopInIframe = parentScroll != null ? parentScroll.headerH - parentScroll.iframeOffsetTop : 0;
-  const visibleTop = rect.top - canvasTopInIframe;
-  let top = rect.top - GAP;
-  let transform = "translateX(-50%) translateY(-100%)";
-  if (visibleTop < approxH + GAP) {
-    top = rect.bottom + GAP;
-    transform = "translateX(-50%)";
-  }
-  const rawLeft = rect.left + rect.width / 2;
-  const left = Math.max(GAP + approxW / 2, Math.min(rawLeft, window.innerWidth - GAP - approxW / 2));
-  return { top, left, transform };
+// src/ui/dialog.tsx
+import * as React3 from "react";
+import { Dialog as DialogPrimitive } from "radix-ui";
+
+// src/ui/icons.tsx
+import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+function IconX({ className, ...props }) {
+  return /* @__PURE__ */ jsxs3("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className, ...props, children: [
+    /* @__PURE__ */ jsx5("path", { d: "M18 6 6 18" }),
+    /* @__PURE__ */ jsx5("path", { d: "m6 6 12 12" })
+  ] });
+}
+function IconChevronDown({ className, ...props }) {
+  return /* @__PURE__ */ jsx5("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className, ...props, children: /* @__PURE__ */ jsx5("path", { d: "m6 9 6 6 6-6" }) });
+}
+function IconFile({ className, ...props }) {
+  return /* @__PURE__ */ jsxs3("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className, ...props, children: [
+    /* @__PURE__ */ jsx5("path", { d: "M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z" }),
+    /* @__PURE__ */ jsx5("path", { d: "M14 2v4a2 2 0 0 0 2 2h4" })
+  ] });
+}
+function IconInfo({ className, ...props }) {
+  return /* @__PURE__ */ jsxs3("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className, ...props, children: [
+    /* @__PURE__ */ jsx5("circle", { cx: "12", cy: "12", r: "10" }),
+    /* @__PURE__ */ jsx5("path", { d: "M12 16v-4" }),
+    /* @__PURE__ */ jsx5("path", { d: "M12 8h.01" })
+  ] });
+}
+function IconArrowRight({ className, ...props }) {
+  return /* @__PURE__ */ jsxs3("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className, ...props, children: [
+    /* @__PURE__ */ jsx5("path", { d: "M5 12h14" }),
+    /* @__PURE__ */ jsx5("path", { d: "m12 5 7 7-7 7" })
+  ] });
+}
+function IconSection({ className, ...props }) {
+  return /* @__PURE__ */ jsxs3("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className, ...props, children: [
+    /* @__PURE__ */ jsx5("rect", { width: "18", height: "7", x: "3", y: "3", rx: "1" }),
+    /* @__PURE__ */ jsx5("rect", { width: "9", height: "7", x: "3", y: "14", rx: "1" }),
+    /* @__PURE__ */ jsx5("rect", { width: "5", height: "7", x: "16", y: "14", rx: "1" })
+  ] });
+}
+
+// src/ui/dialog.tsx
+import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
+function Dialog2({ ...props }) {
+  return /* @__PURE__ */ jsx6(DialogPrimitive.Root, { "data-slot": "dialog", ...props });
 }
+function DialogPortal({ ...props }) {
+  return /* @__PURE__ */ jsx6(DialogPrimitive.Portal, { ...props });
+}
+function DialogOverlay({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx6(
+    DialogPrimitive.Overlay,
+    {
+      "data-slot": "dialog-overlay",
+      "data-ohw-link-modal-root": "",
+      className: cn("fixed inset-0 z-[2147483646] bg-black/50", className),
+      ...props
+    }
+  );
+}
+var DialogContent = React3.forwardRef(({ className, children, showCloseButton = true, container, ...props }, ref) => {
+  const positionMode = container ? "absolute" : "fixed";
+  return /* @__PURE__ */ jsxs4(DialogPortal, { container: container ?? void 0, children: [
+    /* @__PURE__ */ jsx6(DialogOverlay, { className: cn(positionMode, "inset-0") }),
+    /* @__PURE__ */ jsxs4(
+      DialogPrimitive.Content,
+      {
+        ref,
+        "data-slot": "dialog-content",
+        className: cn(
+          positionMode,
+          "left-1/2 top-1/2 z-[2147483647] flex w-full max-w-[483px] -translate-x-1/2 -translate-y-1/2 flex-col overflow-hidden",
+          "rounded-xl border border-border bg-background font-sans shadow-lg outline-none",
+          container ? "max-h-[calc(100%-32px)] max-w-[calc(100%-16px)]" : "max-h-[calc(100vh-32px)] max-w-[calc(100vw-16px)]",
+          className
+        ),
+        onMouseDown: (e) => e.stopPropagation(),
+        ...props,
+        children: [
+          children,
+          showCloseButton ? /* @__PURE__ */ jsx6(
+            DialogPrimitive.Close,
+            {
+              type: "button",
+              className: "absolute right-[9px] top-[9px] rounded-sm p-1.5 text-foreground hover:bg-muted/50",
+              "aria-label": "Close",
+              children: /* @__PURE__ */ jsx6(IconX, { "aria-hidden": true })
+            }
+          ) : null
+        ]
+      }
+    )
+  ] });
+});
+DialogContent.displayName = DialogPrimitive.Content.displayName;
+function DialogHeader({ className, ...props }) {
+  return /* @__PURE__ */ jsx6("div", { className: cn("flex flex-col gap-1.5", className), ...props });
+}
+function DialogFooter({ className, ...props }) {
+  return /* @__PURE__ */ jsx6("div", { className: cn("flex items-center justify-end gap-2", className), ...props });
+}
+var DialogTitle = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx6(
+  DialogPrimitive.Title,
+  {
+    ref,
+    className: cn("text-lg font-semibold leading-none tracking-tight text-card-foreground", className),
+    ...props
+  }
+));
+DialogTitle.displayName = DialogPrimitive.Title.displayName;
+var DialogDescription = React3.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx6(
+  DialogPrimitive.Description,
+  {
+    ref,
+    className: cn("text-sm text-muted-foreground", className),
+    ...props
+  }
+));
+DialogDescription.displayName = DialogPrimitive.Description.displayName;
+var DialogClose = DialogPrimitive.Close;
 
 // src/ui/button.tsx
-import * as React2 from "react";
+import * as React4 from "react";
 import { Slot } from "radix-ui";
-import { jsx as jsx3 } from "react/jsx-runtime";
+import { jsx as jsx7 } from "react/jsx-runtime";
 var buttonVariants = cva(
   "inline-flex items-center justify-center gap-1 whitespace-nowrap rounded-md text-sm font-medium transition-colors outline-none disabled:pointer-events-none disabled:opacity-50 min-w-[80px] px-3 py-2",
   {
@@ -3729,10 +4590,10 @@ var buttonVariants = cva(
     }
   }
 );
-var Button = React2.forwardRef(
+var Button = React4.forwardRef(
   ({ className, variant, size, asChild = false, ...props }, ref) => {
     const Comp = asChild ? Slot.Root : "button";
-    return /* @__PURE__ */ jsx3(
+    return /* @__PURE__ */ jsx7(
       Comp,
       {
         ref,
@@ -3745,76 +4606,38 @@ var Button = React2.forwardRef(
 );
 Button.displayName = "Button";
 
-// src/ui/icons.tsx
-import { jsx as jsx4, jsxs } from "react/jsx-runtime";
-function IconX({ className, ...props }) {
-  return /* @__PURE__ */ jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className, ...props, children: [
-    /* @__PURE__ */ jsx4("path", { d: "M18 6 6 18" }),
-    /* @__PURE__ */ jsx4("path", { d: "m6 6 12 12" })
-  ] });
-}
-function IconChevronDown({ className, ...props }) {
-  return /* @__PURE__ */ jsx4("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className, ...props, children: /* @__PURE__ */ jsx4("path", { d: "m6 9 6 6 6-6" }) });
-}
-function IconFile({ className, ...props }) {
-  return /* @__PURE__ */ jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className, ...props, children: [
-    /* @__PURE__ */ jsx4("path", { d: "M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z" }),
-    /* @__PURE__ */ jsx4("path", { d: "M14 2v4a2 2 0 0 0 2 2h4" })
-  ] });
-}
-function IconInfo({ className, ...props }) {
-  return /* @__PURE__ */ jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className, ...props, children: [
-    /* @__PURE__ */ jsx4("circle", { cx: "12", cy: "12", r: "10" }),
-    /* @__PURE__ */ jsx4("path", { d: "M12 16v-4" }),
-    /* @__PURE__ */ jsx4("path", { d: "M12 8h.01" })
-  ] });
-}
-function IconArrowRight({ className, ...props }) {
-  return /* @__PURE__ */ jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className, ...props, children: [
-    /* @__PURE__ */ jsx4("path", { d: "M5 12h14" }),
-    /* @__PURE__ */ jsx4("path", { d: "m12 5 7 7-7 7" })
-  ] });
-}
-function IconSection({ className, ...props }) {
-  return /* @__PURE__ */ jsxs("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className, ...props, children: [
-    /* @__PURE__ */ jsx4("rect", { width: "18", height: "7", x: "3", y: "3", rx: "1" }),
-    /* @__PURE__ */ jsx4("rect", { width: "9", height: "7", x: "3", y: "14", rx: "1" }),
-    /* @__PURE__ */ jsx4("rect", { width: "5", height: "7", x: "16", y: "14", rx: "1" })
-  ] });
-}
-
 // src/ui/link-modal/DestinationBreadcrumb.tsx
-import { jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
 function DestinationBreadcrumb({ pageTitle, sectionLabel }) {
-  return /* @__PURE__ */ jsxs2("div", { className: "flex w-full flex-col gap-2", children: [
-    /* @__PURE__ */ jsx5("p", { className: "text-sm font-medium text-foreground", children: "Destination" }),
-    /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-3", children: [
-      /* @__PURE__ */ jsxs2("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ jsx5(IconFile, { className: "shrink-0 text-foreground", "aria-hidden": true }),
-        /* @__PURE__ */ jsx5("span", { className: "text-sm font-medium leading-none text-foreground", children: pageTitle })
+  return /* @__PURE__ */ jsxs5("div", { className: "flex w-full flex-col gap-2", children: [
+    /* @__PURE__ */ jsx8("p", { className: "text-sm font-medium text-foreground", children: "Destination" }),
+    /* @__PURE__ */ jsxs5("div", { className: "flex items-center gap-3", children: [
+      /* @__PURE__ */ jsxs5("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx8(IconFile, { className: "shrink-0 text-foreground", "aria-hidden": true }),
+        /* @__PURE__ */ jsx8("span", { className: "text-sm font-medium leading-none text-foreground", children: pageTitle })
       ] }),
-      /* @__PURE__ */ jsx5(IconArrowRight, { className: "shrink-0 text-muted-foreground", "aria-hidden": true }),
-      /* @__PURE__ */ jsxs2("div", { className: "flex min-w-0 flex-1 items-center gap-2", children: [
-        /* @__PURE__ */ jsx5(IconSection, { className: "shrink-0 text-foreground", "aria-hidden": true }),
-        /* @__PURE__ */ jsx5("span", { className: "truncate text-sm font-medium leading-none text-foreground", children: sectionLabel })
+      /* @__PURE__ */ jsx8(IconArrowRight, { className: "shrink-0 text-muted-foreground", "aria-hidden": true }),
+      /* @__PURE__ */ jsxs5("div", { className: "flex min-w-0 flex-1 items-center gap-2", children: [
+        /* @__PURE__ */ jsx8(IconSection, { className: "shrink-0 text-foreground", "aria-hidden": true }),
+        /* @__PURE__ */ jsx8("span", { className: "truncate text-sm font-medium leading-none text-foreground", children: sectionLabel })
       ] })
     ] })
   ] });
 }
 
 // src/ui/link-modal/SectionTreeItem.tsx
-import { jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
 function SectionTreeItem({ section, onSelect, selected }) {
   const interactive = Boolean(onSelect);
-  return /* @__PURE__ */ jsxs3("div", { className: "flex h-9 w-full items-end pl-3", children: [
-    /* @__PURE__ */ jsx6(
+  return /* @__PURE__ */ jsxs6("div", { className: "flex h-9 w-full items-end pl-3", children: [
+    /* @__PURE__ */ jsx9(
       "div",
       {
         className: "mr-[-1px] h-9 w-2 shrink-0 rounded-bl-sm border-b border-l border-border mb-4",
         "aria-hidden": true
       }
     ),
-    /* @__PURE__ */ jsxs3(
+    /* @__PURE__ */ jsxs6(
       "div",
       {
         role: interactive ? "button" : void 0,
@@ -3832,8 +4655,8 @@ function SectionTreeItem({ section, onSelect, selected }) {
           interactive && selected && "border-primary"
         ),
         children: [
-          /* @__PURE__ */ jsx6(IconSection, { className: "shrink-0 text-foreground", "aria-hidden": true }),
-          /* @__PURE__ */ jsx6("span", { className: "truncate text-sm font-normal leading-5 text-foreground", children: section.label })
+          /* @__PURE__ */ jsx9(IconSection, { className: "shrink-0 text-foreground", "aria-hidden": true }),
+          /* @__PURE__ */ jsx9("span", { className: "truncate text-sm font-normal leading-5 text-foreground", children: section.label })
         ]
       }
     )
@@ -3841,23 +4664,23 @@ function SectionTreeItem({ section, onSelect, selected }) {
 }
 function SectionPickerList({ sections, onSelect }) {
   if (sections.length === 0) {
-    return /* @__PURE__ */ jsx6("p", { className: "text-sm text-muted-foreground", children: "No sections found on this page." });
+    return /* @__PURE__ */ jsx9("p", { className: "text-sm text-muted-foreground", children: "No sections found on this page." });
   }
-  return /* @__PURE__ */ jsxs3("div", { className: "flex flex-col gap-1", children: [
-    /* @__PURE__ */ jsx6("p", { className: "text-sm text-muted-foreground", children: "Pick a section this link should scroll to." }),
-    sections.map((section) => /* @__PURE__ */ jsx6(SectionTreeItem, { section, onSelect }, section.id))
+  return /* @__PURE__ */ jsxs6("div", { className: "flex flex-col gap-1", children: [
+    /* @__PURE__ */ jsx9("p", { className: "text-sm text-muted-foreground", children: "Pick a section this link should scroll to." }),
+    sections.map((section) => /* @__PURE__ */ jsx9(SectionTreeItem, { section, onSelect }, section.id))
   ] });
 }
 
 // src/ui/link-modal/UrlOrPageInput.tsx
-import { useId, useRef, useState } from "react";
+import { useId as useId2, useRef as useRef2, useState as useState3 } from "react";
 
 // src/ui/input.tsx
-import * as React3 from "react";
-import { jsx as jsx7 } from "react/jsx-runtime";
-var Input = React3.forwardRef(
+import * as React5 from "react";
+import { jsx as jsx10 } from "react/jsx-runtime";
+var Input = React5.forwardRef(
   ({ className, type, ...props }, ref) => {
-    return /* @__PURE__ */ jsx7(
+    return /* @__PURE__ */ jsx10(
       "input",
       {
         type,
@@ -3876,9 +4699,9 @@ Input.displayName = "Input";
 
 // src/ui/label.tsx
 import { Label as LabelPrimitive } from "radix-ui";
-import { jsx as jsx8 } from "react/jsx-runtime";
+import { jsx as jsx11 } from "react/jsx-runtime";
 function Label({ className, ...props }) {
-  return /* @__PURE__ */ jsx8(
+  return /* @__PURE__ */ jsx11(
     LabelPrimitive.Root,
     {
       "data-slot": "label",
@@ -3888,48 +4711,18 @@ function Label({ className, ...props }) {
   );
 }
 
-// src/ui/popover.tsx
-import { Popover as PopoverPrimitive } from "radix-ui";
-import { jsx as jsx9 } from "react/jsx-runtime";
-function Popover({ ...props }) {
-  return /* @__PURE__ */ jsx9(PopoverPrimitive.Root, { "data-slot": "popover", ...props });
-}
-function PopoverTrigger({ ...props }) {
-  return /* @__PURE__ */ jsx9(PopoverPrimitive.Trigger, { "data-slot": "popover-trigger", ...props });
-}
-function PopoverContent({
-  className,
-  align = "start",
-  sideOffset = 6,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx9(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx9(
-    PopoverPrimitive.Content,
-    {
-      "data-slot": "popover-content",
-      align,
-      sideOffset,
-      className: cn(
-        "z-[2147483647] w-[var(--radix-popover-trigger-width)] overflow-auto rounded-lg border border-border bg-popover py-1 shadow-lg outline-none",
-        className
-      ),
-      ...props
-    }
-  ) });
-}
-
-// src/ui/link-modal/UrlOrPageInput.tsx
-import { jsx as jsx10, jsxs as jsxs4 } from "react/jsx-runtime";
-function FieldChevron({ onClick }) {
-  return /* @__PURE__ */ jsx10(
-    "button",
+// src/ui/link-modal/UrlOrPageInput.tsx
+import { jsx as jsx12, jsxs as jsxs7 } from "react/jsx-runtime";
+function FieldChevron({ onClick }) {
+  return /* @__PURE__ */ jsx12(
+    "button",
     {
       type: "button",
       className: "flex shrink-0 items-center justify-end border-0 bg-transparent p-0 pl-4 text-muted-foreground outline-none",
       onClick,
       "aria-label": "Open page list",
       tabIndex: -1,
-      children: /* @__PURE__ */ jsx10(IconChevronDown, {})
+      children: /* @__PURE__ */ jsx12(IconChevronDown, {})
     }
   );
 }
@@ -3945,9 +4738,9 @@ function UrlOrPageInput({
   readOnly = false,
   urlError
 }) {
-  const inputId = useId();
-  const inputRef = useRef(null);
-  const [isFocused, setIsFocused] = useState(false);
+  const inputId = useId2();
+  const inputRef = useRef2(null);
+  const [isFocused, setIsFocused] = useState3(false);
   const openDropdown = () => {
     if (readOnly || filteredPages.length === 0) return;
     onDropdownOpenChange(true);
@@ -3968,12 +4761,12 @@ function UrlOrPageInput({
     "data-ohw-link-field flex h-10 w-full items-center overflow-hidden rounded-md border bg-background pl-3 pr-3 py-2 outline-none transition-[border-color,box-shadow]",
     urlError ? "border-destructive shadow-[0_0_0_1px_var(--ohw-destructive)]" : isFocused ? "border-primary shadow-[0_0_0_1px_var(--ohw-primary)]" : "border-input"
   );
-  return /* @__PURE__ */ jsxs4("div", { className: "flex w-full flex-col gap-2 p-0", children: [
-    /* @__PURE__ */ jsx10(Label, { htmlFor: inputId, className: cn(urlError && "text-destructive"), children: "Destination" }),
-    /* @__PURE__ */ jsxs4(Popover, { open: dropdownOpen && !readOnly, onOpenChange: onDropdownOpenChange, children: [
-      /* @__PURE__ */ jsx10(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs4("div", { "data-ohw-link-field": true, className: fieldClassName, children: [
-        selectedPage ? /* @__PURE__ */ jsx10("div", { className: "flex shrink-0 items-center pr-2", children: /* @__PURE__ */ jsx10(IconFile, { className: "text-foreground", "aria-hidden": true }) }) : null,
-        readOnly ? /* @__PURE__ */ jsx10("span", { className: "min-w-0 flex-1 truncate text-sm leading-5 text-foreground", children: selectedPage?.title ?? value }) : /* @__PURE__ */ jsx10(
+  return /* @__PURE__ */ jsxs7("div", { className: "flex w-full flex-col gap-2 p-0", children: [
+    /* @__PURE__ */ jsx12(Label, { htmlFor: inputId, className: cn(urlError && "text-destructive"), children: "Destination" }),
+    /* @__PURE__ */ jsxs7("div", { className: "relative w-full", children: [
+      /* @__PURE__ */ jsxs7("div", { "data-ohw-link-field": true, className: fieldClassName, children: [
+        selectedPage ? /* @__PURE__ */ jsx12("div", { className: "flex shrink-0 items-center pr-2", children: /* @__PURE__ */ jsx12(IconFile, { className: "text-foreground", "aria-hidden": true }) }) : null,
+        readOnly ? /* @__PURE__ */ jsx12("span", { className: "min-w-0 flex-1 truncate text-sm leading-5 text-foreground", children: selectedPage?.title ?? value }) : /* @__PURE__ */ jsx12(
           Input,
           {
             ref: inputRef,
@@ -3992,7 +4785,7 @@ function UrlOrPageInput({
             )
           }
         ),
-        selectedPage && !readOnly ? /* @__PURE__ */ jsx10(
+        selectedPage && !readOnly ? /* @__PURE__ */ jsx12(
           "button",
           {
             type: "button",
@@ -4000,31 +4793,39 @@ function UrlOrPageInput({
             onMouseDown: clearSelection,
             "aria-label": "Clear selected page",
             tabIndex: -1,
-            children: /* @__PURE__ */ jsx10(IconX, { "aria-hidden": true })
+            children: /* @__PURE__ */ jsx12(IconX, { "aria-hidden": true })
           }
         ) : null,
-        !readOnly ? /* @__PURE__ */ jsx10(FieldChevron, { onClick: toggleDropdown }) : null
-      ] }) }),
-      filteredPages.length > 0 && /* @__PURE__ */ jsx10(PopoverContent, { "data-ohw-link-popover-root": "", onOpenAutoFocus: (e) => e.preventDefault(), children: filteredPages.map((page) => /* @__PURE__ */ jsxs4(
-        "button",
+        !readOnly ? /* @__PURE__ */ jsx12(FieldChevron, { onClick: toggleDropdown }) : null
+      ] }),
+      dropdownOpen && !readOnly && filteredPages.length > 0 ? /* @__PURE__ */ jsx12(
+        "div",
         {
-          type: "button",
-          className: "flex h-9 w-full items-center gap-2 border-0 bg-transparent px-3 text-left text-sm leading-5 text-foreground outline-none hover:bg-muted",
-          onClick: () => onPageSelect(page),
-          children: [
-            /* @__PURE__ */ jsx10(IconFile, { className: "shrink-0", "aria-hidden": true }),
-            /* @__PURE__ */ jsx10("span", { className: "truncate", children: page.title })
-          ]
-        },
-        page.path
-      )) })
+          "data-ohw-link-page-dropdown": "",
+          className: "absolute left-0 right-0 h-20 top-[calc(100%+4px)] z-10 max-h-48 overflow-auto rounded-lg border border-border bg-popover py-1 shadow-lg",
+          onMouseDown: (e) => e.preventDefault(),
+          children: filteredPages.map((page) => /* @__PURE__ */ jsxs7(
+            "button",
+            {
+              type: "button",
+              className: "flex h-9 w-full items-center gap-2 border-0 bg-transparent px-3 text-left text-sm leading-5 text-foreground outline-none hover:bg-muted",
+              onClick: () => onPageSelect(page),
+              children: [
+                /* @__PURE__ */ jsx12(IconFile, { className: "shrink-0", "aria-hidden": true }),
+                /* @__PURE__ */ jsx12("span", { className: "truncate", children: page.title })
+              ]
+            },
+            page.path
+          ))
+        }
+      ) : null
     ] }),
-    urlError ? /* @__PURE__ */ jsx10("p", { className: "text-sm font-medium text-destructive", children: urlError }) : null
+    urlError ? /* @__PURE__ */ jsx12("p", { className: "text-sm font-medium text-destructive", children: urlError }) : null
   ] });
 }
 
 // src/ui/link-modal/useLinkModalState.ts
-import { useCallback, useEffect, useMemo, useState as useState2 } from "react";
+import { useCallback, useEffect as useEffect2, useMemo as useMemo2, useState as useState4 } from "react";
 function useLinkModalState({
   open,
   mode,
@@ -4036,16 +4837,16 @@ function useLinkModalState({
   onClose,
   onSubmit
 }) {
-  const availablePages = useMemo(
+  const availablePages = useMemo2(
     () => mode === "create" ? filterAvailablePages(pages, existingTargets) : pages,
     [mode, pages, existingTargets]
   );
-  const [searchValue, setSearchValue] = useState2("");
-  const [selectedPage, setSelectedPage] = useState2(null);
-  const [selectedSection, setSelectedSection] = useState2(null);
-  const [step, setStep] = useState2("input");
-  const [dropdownOpen, setDropdownOpen] = useState2(false);
-  const [urlError, setUrlError] = useState2("");
+  const [searchValue, setSearchValue] = useState4("");
+  const [selectedPage, setSelectedPage] = useState4(null);
+  const [selectedSection, setSelectedSection] = useState4(null);
+  const [step, setStep] = useState4("input");
+  const [dropdownOpen, setDropdownOpen] = useState4(false);
+  const [urlError, setUrlError] = useState4("");
   const reset = useCallback(() => {
     setSearchValue("");
     setSelectedPage(null);
@@ -4054,7 +4855,7 @@ function useLinkModalState({
     setDropdownOpen(false);
     setUrlError("");
   }, []);
-  useEffect(() => {
+  useEffect2(() => {
     if (!open) return;
     if (mode === "edit" && initialTarget) {
       const { pageRoute } = parseTarget(initialTarget);
@@ -4070,11 +4871,11 @@ function useLinkModalState({
     setDropdownOpen(false);
     setUrlError("");
   }, [open, mode, initialTarget, pages, sectionsByPath, reset]);
-  const filteredPages = useMemo(() => {
+  const filteredPages = useMemo2(() => {
     if (!searchValue.trim()) return availablePages;
     return availablePages.filter((p) => p.title.toLowerCase().startsWith(searchValue.toLowerCase()));
   }, [availablePages, searchValue]);
-  const activeSections = useMemo(() => {
+  const activeSections = useMemo2(() => {
     if (!selectedPage) return [];
     return getSectionsForPath(sectionsByPath, selectedPage.path);
   }, [selectedPage, sectionsByPath]);
@@ -4120,7 +4921,7 @@ function useLinkModalState({
     reset();
     onClose();
   };
-  const isValid = useMemo(() => {
+  const isValid = useMemo2(() => {
     if (urlError) return false;
     if (showBreadcrumb) return true;
     if (selectedPage) return true;
@@ -4187,7 +4988,7 @@ function useLinkModalState({
 }
 
 // src/ui/link-modal/LinkEditorPanel.tsx
-import { Fragment, jsx as jsx11, jsxs as jsxs5 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx13, jsxs as jsxs8 } from "react/jsx-runtime";
 function LinkEditorPanel({
   open = true,
   mode = "create",
@@ -4211,26 +5012,25 @@ function LinkEditorPanel({
     onSubmit
   });
   const isCancel = state.secondaryLabel === "Cancel";
-  return /* @__PURE__ */ jsxs5(Fragment, { children: [
-    /* @__PURE__ */ jsx11(
+  return /* @__PURE__ */ jsxs8(Fragment2, { children: [
+    /* @__PURE__ */ jsx13(DialogClose, { asChild: true, children: /* @__PURE__ */ jsx13(
       "button",
       {
         type: "button",
         className: "absolute right-[9px] top-[9px] rounded-sm p-1.5 text-foreground hover:bg-muted/50",
-        onClick: state.handleClose,
         "aria-label": "Close",
-        children: /* @__PURE__ */ jsx11(IconX, { "aria-hidden": true })
+        children: /* @__PURE__ */ jsx13(IconX, { "aria-hidden": true })
       }
-    ),
-    /* @__PURE__ */ jsx11("header", { className: "flex w-full flex-col gap-1.5 p-6 pr-12", children: /* @__PURE__ */ jsx11("h2", { className: "m-0 w-full break-words text-lg font-semibold leading-none tracking-tight text-card-foreground", children: state.title }) }),
-    /* @__PURE__ */ jsxs5("div", { className: "flex w-full flex-col gap-3 px-6 pb-8 pt-1", children: [
-      state.showBreadcrumb && state.selectedPage && state.selectedSection ? /* @__PURE__ */ jsx11(
+    ) }),
+    /* @__PURE__ */ jsx13(DialogHeader, { className: "w-full gap-1.5 p-6 pr-12", children: /* @__PURE__ */ jsx13(DialogTitle, { className: "m-0 w-full break-words", children: state.title }) }),
+    /* @__PURE__ */ jsxs8("div", { className: "flex w-full flex-col gap-3 px-6 pb-8 pt-1", children: [
+      state.showBreadcrumb && state.selectedPage && state.selectedSection ? /* @__PURE__ */ jsx13(
         DestinationBreadcrumb,
         {
           pageTitle: state.selectedPage.title,
           sectionLabel: state.selectedSection.label
         }
-      ) : /* @__PURE__ */ jsx11(
+      ) : /* @__PURE__ */ jsx13(
         UrlOrPageInput,
         {
           value: state.searchValue,
@@ -4243,18 +5043,18 @@ function LinkEditorPanel({
           urlError: state.urlError
         }
       ),
-      state.showChooseSection ? /* @__PURE__ */ jsxs5("div", { className: "flex flex-col justify-center gap-2", children: [
-        /* @__PURE__ */ jsx11(Button, { type: "button", variant: "outline", className: "w-fit cursor-pointer", size: "sm", onClick: state.handleChooseSection, children: "Choose a section" }),
-        /* @__PURE__ */ jsxs5("div", { className: "flex items-center gap-1 text-sm text-muted-foreground", children: [
-          /* @__PURE__ */ jsx11(IconInfo, { className: "shrink-0", "aria-hidden": true }),
-          /* @__PURE__ */ jsx11("span", { children: "Pick a section this link should scroll to." })
+      state.showChooseSection ? /* @__PURE__ */ jsxs8("div", { className: "flex flex-col justify-center gap-2", children: [
+        /* @__PURE__ */ jsx13(Button, { type: "button", variant: "outline", className: "w-fit cursor-pointer", size: "sm", onClick: state.handleChooseSection, children: "Choose a section" }),
+        /* @__PURE__ */ jsxs8("div", { className: "flex items-center gap-1 text-sm text-muted-foreground", children: [
+          /* @__PURE__ */ jsx13(IconInfo, { className: "shrink-0", "aria-hidden": true }),
+          /* @__PURE__ */ jsx13("span", { children: "Pick a section this link should scroll to." })
         ] })
       ] }) : null,
-      state.showSectionPicker ? /* @__PURE__ */ jsx11(SectionPickerList, { sections: state.activeSections, onSelect: state.handleSectionSelect }) : null,
-      state.showSectionRow && state.selectedSection ? /* @__PURE__ */ jsx11(SectionTreeItem, { section: state.selectedSection, selected: true }) : null
+      state.showSectionPicker ? /* @__PURE__ */ jsx13(SectionPickerList, { sections: state.activeSections, onSelect: state.handleSectionSelect }) : null,
+      state.showSectionRow && state.selectedSection ? /* @__PURE__ */ jsx13(SectionTreeItem, { section: state.selectedSection, selected: true }) : null
     ] }),
-    /* @__PURE__ */ jsxs5("footer", { className: "flex w-full items-center justify-end gap-2 px-6 pb-6", children: [
-      /* @__PURE__ */ jsx11(
+    /* @__PURE__ */ jsxs8(DialogFooter, { className: "w-full px-6 pb-6", children: [
+      /* @__PURE__ */ jsx13(
         Button,
         {
           type: "button",
@@ -4269,7 +5069,7 @@ function LinkEditorPanel({
           children: state.secondaryLabel
         }
       ),
-      /* @__PURE__ */ jsx11(
+      /* @__PURE__ */ jsx13(
         Button,
         {
           type: "button",
@@ -4288,28 +5088,34 @@ function LinkEditorPanel({
 }
 
 // src/ui/link-modal/LinkPopover.tsx
-import { jsx as jsx12 } from "react/jsx-runtime";
+import { jsx as jsx14 } from "react/jsx-runtime";
 function LinkPopover({
-  rect,
-  parentScroll,
+  open = true,
   panelRef,
+  portalContainer,
+  onClose,
   ...editorProps
 }) {
-  const { top, left, transform } = calcPopoverPos(rect, parentScroll);
-  return /* @__PURE__ */ jsx12(
-    "div",
+  return /* @__PURE__ */ jsx14(
+    Dialog2,
     {
-      ref: panelRef,
-      "data-ohw-link-popover-root": "",
-      "data-ohw-link-modal-root": "",
-      "data-ohw-bridge": "",
-      className: cn(
-        "pointer-events-auto fixed z-[2147483647] flex w-[483px] max-w-[calc(100vw-16px)] flex-col overflow-hidden",
-        "rounded-xl border border-border bg-background font-sans shadow-lg outline-none"
-      ),
-      style: { top, left, transform },
-      onMouseDown: (e) => e.stopPropagation(),
-      children: /* @__PURE__ */ jsx12(LinkEditorPanel, { ...editorProps, open: true })
+      open,
+      onOpenChange: (next) => {
+        if (!next) onClose?.();
+      },
+      children: /* @__PURE__ */ jsx14(
+        DialogContent,
+        {
+          ref: panelRef,
+          container: portalContainer,
+          "data-ohw-link-popover-root": "",
+          "data-ohw-link-modal-root": "",
+          "data-ohw-bridge": "",
+          showCloseButton: false,
+          className: "gap-0 p-0 w-full md:w-md pointer-events-auto",
+          children: /* @__PURE__ */ jsx14(LinkEditorPanel, { ...editorProps, open, onClose })
+        }
+      )
     }
   );
 }
@@ -4372,8 +5178,30 @@ function shouldUseDevFixtures() {
   return new URLSearchParams(q).get("ohw-fixtures") === "1";
 }
 
+// src/ui/badge.tsx
+import { jsx as jsx15 } from "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__ */ jsx15("div", { className: cn(badgeVariants({ variant }), className), ...props });
+}
+
 // src/OhhwellsBridge.tsx
-import { Fragment as Fragment2, jsx as jsx13, jsxs as jsxs6 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx16, jsxs as jsxs9 } from "react/jsx-runtime";
 var PRIMARY = "#0885FE";
 var IMAGE_FADE_MS = 300;
 function runOpacityFade(el, onDone) {
@@ -4424,6 +5252,169 @@ 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 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);
+    const preExisting = pageEntries.filter((e) => !isSchedulingWidgetMissing(e));
+    const notifyForEntry = inEditor ? (e) => !e.scheduleId : false;
+    mountSchedulingEntries(pageEntries, notifyForEntry);
+    requestAnimationFrame(() => retryMissingSchedulingMounts(pageEntries, notifyForEntry));
+    setTimeout(() => retryMissingSchedulingMounts(pageEntries, notifyForEntry), 250);
+    for (const entry of preExisting) {
+      window.postMessage({ type: "ow:schedule-config", insertAfter: entry.insertAfter, scheduleId: entry.scheduleId ?? null }, "*");
+    }
+  } 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";
+  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__ */ jsx16(
+        SchedulingWidget,
+        {
+          notifyOnConnect,
+          initialScheduleId: scheduleId,
+          insertAfter: effectiveInsertAfter
+        }
+      )
+    );
+  });
+  const tracker = getSectionsTracker();
+  let sections = [];
+  try {
+    sections = JSON.parse(tracker.textContent || "[]");
+  } catch {
+  }
+  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: effectiveInsertAfter,
+      pagePath: window.location.pathname,
+      ...scheduleId ? { scheduleId } : {}
+    });
+    tracker.textContent = JSON.stringify(sections);
+  }
+  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 entry = pending[i];
+      const shouldNotify = typeof notifyOnConnect === "function" ? notifyOnConnect(entry) : notifyOnConnect;
+      if (mountSchedulingWidget(entry.insertAfter, shouldNotify, entry.scheduleId)) {
+        pending.splice(i, 1);
+      }
+    }
+  }
+}
 function getLinkHref(el) {
   const anchor = el instanceof HTMLAnchorElement ? el : el.querySelector("a");
   return anchor?.getAttribute("href") ?? "";
@@ -4470,7 +5461,7 @@ function applyLinkByKey(key, val) {
 }
 function isInsideLinkEditor(target) {
   return Boolean(
-    target.closest("[data-ohw-link-popover-root]") || target.closest("[data-ohw-link-modal-root]") || target.closest('[data-slot="popover-content"]')
+    target.closest("[data-ohw-link-popover-root]") || target.closest("[data-ohw-link-modal-root]") || target.closest("[data-ohw-link-page-dropdown]") || target.closest('[data-slot="popover-content"]') || target.closest('[data-slot="dialog-content"]') || target.closest('[data-slot="dialog-overlay"]')
   );
 }
 function getHrefKeyFromElement(el) {
@@ -4481,6 +5472,15 @@ function getHrefKeyFromElement(el) {
   if (!key) return null;
   return { anchor, key };
 }
+function isNavbarButton(el) {
+  return Boolean(el.closest('[data-ohw-role="navbar-button"]'));
+}
+function clearHrefKeyHover(anchor) {
+  anchor.removeAttribute("data-ohw-hovered");
+  anchor.querySelectorAll("[data-ohw-hovered]").forEach((el) => {
+    el.removeAttribute("data-ohw-hovered");
+  });
+}
 function collectSections() {
   return collectSectionsFromDom();
 }
@@ -4604,6 +5604,8 @@ 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" },
@@ -4623,7 +5625,7 @@ var TOOLBAR_GROUPS = [
 ];
 function GlowFrame({ rect, elRef }) {
   const GAP = 6;
-  return /* @__PURE__ */ jsx13(
+  return /* @__PURE__ */ jsx16(
     "div",
     {
       ref: elRef,
@@ -4642,41 +5644,191 @@ function GlowFrame({ rect, elRef }) {
     }
   );
 }
-function calcToolbarPos(rect, parentScroll) {
+function getIframeVisibleClip(parentScroll) {
+  if (!parentScroll) return null;
+  const { iframeOffsetTop, headerH: visibleCanvasTop, canvasH } = parentScroll;
+  const clipTop = Math.max(0, visibleCanvasTop - iframeOffsetTop);
+  const clipBottom = Math.min(
+    window.innerHeight,
+    visibleCanvasTop + canvasH - iframeOffsetTop
+  );
+  return { top: clipTop, bottom: Math.max(clipTop, clipBottom) };
+}
+function applyVisibleViewport(el, parentScroll) {
+  const clip = getIframeVisibleClip(parentScroll);
+  const top = clip?.top ?? 0;
+  const height = clip ? clip.bottom - clip.top : window.innerHeight;
+  el.style.top = `${top}px`;
+  el.style.height = `${height}px`;
+}
+function clampToolbarToClip(top, transform, rect, clip, approxH, gap) {
+  const isAbove = transform.includes("translateY(-100%)");
+  let visualTop = isAbove ? top - approxH : top;
+  let visualBottom = isAbove ? top : top + approxH;
+  const minTop = clip.top + gap;
+  const maxBottom = clip.bottom - gap;
+  if (visualTop >= minTop && visualBottom <= maxBottom) {
+    return { top, transform };
+  }
+  const belowTop = rect.bottom + gap;
+  if (belowTop + approxH <= maxBottom && belowTop >= minTop) {
+    return { top: belowTop, transform: "translateX(-50%)" };
+  }
+  const aboveTop = rect.top - gap;
+  if (aboveTop - approxH >= minTop && aboveTop <= maxBottom) {
+    return { top: aboveTop, transform: "translateX(-50%) translateY(-100%)" };
+  }
+  if (belowTop + approxH <= maxBottom) {
+    return { top: belowTop, transform: "translateX(-50%)" };
+  }
+  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) {
   const GAP = 8;
-  const APPROX_H = 36;
-  const APPROX_W = 330;
+  const APPROX_H = 32;
+  const APPROX_W = approxW;
+  const clip = getIframeVisibleClip(parentScroll);
+  const clipTop = clip?.top ?? 0;
   const canvasTopInIframe = parentScroll != null ? parentScroll.headerH - parentScroll.iframeOffsetTop : 0;
   const visibleTop = rect.top - canvasTopInIframe;
   const visibleBottom = rect.bottom - canvasTopInIframe;
   const isTall = rect.height > APPROX_H + GAP;
+  const spaceAbove = rect.top - (clipTop + GAP);
+  const fitsAbove = spaceAbove >= APPROX_H + GAP;
   let top;
   let transform;
-  if (visibleTop > 0 || !isTall) {
+  if ((visibleTop > 0 || !isTall) && fitsAbove) {
     top = rect.top - GAP;
     transform = "translateX(-50%) translateY(-100%)";
+  } else if (visibleTop > 0 || !isTall) {
+    top = rect.bottom + GAP;
+    transform = "translateX(-50%)";
   } else if (visibleBottom > APPROX_H + GAP) {
-    top = canvasTopInIframe + GAP;
+    top = clipTop + GAP;
     transform = "translateX(-50%)";
   } else {
     top = rect.bottom + GAP;
     transform = "translateX(-50%)";
   }
+  if (clip) {
+    const clamped = clampToolbarToClip(top, transform, rect, clip, APPROX_H, GAP);
+    top = clamped.top;
+    transform = clamped.transform;
+  }
   const rawLeft = rect.left + rect.width / 2;
   const left = Math.max(GAP + APPROX_W / 2, Math.min(rawLeft, window.innerWidth - GAP - APPROX_W / 2));
   return { top, left, transform };
 }
+var EDIT_LINK_ICON = /* @__PURE__ */ jsxs9("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": true, children: [
+  /* @__PURE__ */ jsx16("path", { d: "M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71" }),
+  /* @__PURE__ */ jsx16("path", { d: "M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71" })
+] });
 function FloatingToolbar({
   rect,
   parentScroll,
   elRef,
+  variant = "rich-text",
   onCommand,
   activeCommands,
   showEditLink,
   onEditLink
 }) {
-  const { top, left, transform } = calcToolbarPos(rect, parentScroll);
-  return /* @__PURE__ */ jsxs6(
+  const approxW = variant === "link-action" ? 112 : 306;
+  const { top, left, transform } = calcToolbarPos(rect, parentScroll, approxW);
+  if (variant === "link-action") {
+    return /* @__PURE__ */ jsxs9(
+      "div",
+      {
+        ref: elRef,
+        "data-ohw-toolbar": "",
+        style: {
+          position: "fixed",
+          top,
+          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",
+          whiteSpace: "nowrap"
+        },
+        onMouseDown: (e) => e.stopPropagation(),
+        children: [
+          /* @__PURE__ */ jsx16(
+            "button",
+            {
+              type: "button",
+              title: "Edit link",
+              onMouseDown: (e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                onEditLink?.();
+              },
+              onClick: (e) => {
+                e.preventDefault();
+                e.stopPropagation();
+              },
+              onMouseEnter: (e) => {
+                e.currentTarget.style.background = "#F5F5F4";
+              },
+              onMouseLeave: (e) => {
+                e.currentTarget.style.background = "transparent";
+              },
+              style: {
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                border: "none",
+                background: "transparent",
+                borderRadius: 4,
+                cursor: "pointer",
+                color: "#1C1917",
+                flexShrink: 0,
+                padding: 6
+              },
+              children: EDIT_LINK_ICON
+            }
+          ),
+          /* @__PURE__ */ jsx16("span", { style: { display: "block", width: 1, height: 24, background: "#E7E5E4", flexShrink: 0 } }),
+          /* @__PURE__ */ jsx16(
+            "button",
+            {
+              type: "button",
+              title: "Coming soon",
+              disabled: true,
+              style: {
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                border: "none",
+                background: "transparent",
+                borderRadius: 4,
+                cursor: "not-allowed",
+                color: "#A8A29E",
+                flexShrink: 0,
+                padding: 6,
+                opacity: 0.6
+              },
+              children: /* @__PURE__ */ jsxs9("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "currentColor", "aria-hidden": true, children: [
+                /* @__PURE__ */ jsx16("circle", { cx: "5", cy: "12", r: "1.5" }),
+                /* @__PURE__ */ jsx16("circle", { cx: "12", cy: "12", r: "1.5" }),
+                /* @__PURE__ */ jsx16("circle", { cx: "19", cy: "12", r: "1.5" })
+              ] })
+            }
+          )
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs9(
     "div",
     {
       ref: elRef,
@@ -4693,19 +5845,19 @@ function FloatingToolbar({
         boxShadow: "0px 2px 4px -2px rgba(0,0,0,.1),0px 4px 6px -1px rgba(0,0,0,.1)",
         display: "flex",
         alignItems: "center",
-        padding: 4,
-        gap: 6,
+        padding: TOOLBAR_PILL_PADDING,
+        gap: TOOLBAR_TOGGLE_GAP,
         fontFamily: "sans-serif",
         pointerEvents: "auto",
         whiteSpace: "nowrap"
       },
       onMouseDown: (e) => e.stopPropagation(),
       children: [
-        TOOLBAR_GROUPS.map((btns, gi) => /* @__PURE__ */ jsxs6(React4.Fragment, { children: [
-          gi > 0 && /* @__PURE__ */ jsx13("span", { style: { display: "block", width: 1, height: 24, background: "#E7E5E4", flexShrink: 0 } }),
+        TOOLBAR_GROUPS.map((btns, gi) => /* @__PURE__ */ jsxs9(React6.Fragment, { children: [
+          gi > 0 && /* @__PURE__ */ jsx16("span", { style: { display: "block", width: 1, height: 24, background: "#E7E5E4", flexShrink: 0 } }),
           btns.map((btn) => {
             const isActive = activeCommands.has(btn.cmd);
-            return /* @__PURE__ */ jsx13(
+            return /* @__PURE__ */ jsx16(
               "button",
               {
                 title: btn.title,
@@ -4731,7 +5883,7 @@ function FloatingToolbar({
                   flexShrink: 0,
                   padding: 6
                 },
-                children: /* @__PURE__ */ jsx13(
+                children: /* @__PURE__ */ jsx16(
                   "svg",
                   {
                     width: "16",
@@ -4751,7 +5903,7 @@ function FloatingToolbar({
             );
           })
         ] }, gi)),
-        showEditLink ? /* @__PURE__ */ jsx13(
+        showEditLink ? /* @__PURE__ */ jsx16(
           "button",
           {
             type: "button",
@@ -4783,10 +5935,7 @@ function FloatingToolbar({
               flexShrink: 0,
               padding: 6
             },
-            children: /* @__PURE__ */ jsxs6("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": true, children: [
-              /* @__PURE__ */ jsx13("path", { d: "M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71" }),
-              /* @__PURE__ */ jsx13("path", { d: "M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71" })
-            ] })
+            children: EDIT_LINK_ICON
           }
         ) : null
       ]
@@ -4803,7 +5952,7 @@ function StateToggle({
   states,
   onStateChange
 }) {
-  return /* @__PURE__ */ jsx13(
+  return /* @__PURE__ */ jsx16(
     ToggleGroup,
     {
       "data-ohw-state-toggle": "",
@@ -4817,18 +5966,35 @@ function StateToggle({
         left: rect.right - 8,
         transform: "translateX(-100%)"
       },
-      children: states.map((state) => /* @__PURE__ */ jsx13(ToggleGroupItem, { value: state, size: "sm", children: state }, state))
+      children: states.map((state) => /* @__PURE__ */ jsx16(ToggleGroupItem, { value: state, size: "sm", children: state }, state))
     }
   );
 }
 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();
   const searchParams = useSearchParams();
   const isEditMode = isEditSessionActive();
-  const [bridgeRoot, setBridgeRoot] = useState3(null);
-  useEffect2(() => {
+  const [bridgeRoot, setBridgeRoot] = useState5(null);
+  useEffect3(() => {
     const figtreeFontId = "ohw-figtree-font";
     if (!document.getElementById(figtreeFontId)) {
       const preconnect1 = Object.assign(document.createElement("link"), { rel: "preconnect", href: "https://fonts.googleapis.com" });
@@ -4851,50 +6017,65 @@ 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 = useCallback2((data) => {
     if (typeof window !== "undefined" && window.parent !== window) {
       window.parent.postMessage(data, "*");
     }
   }, []);
-  const [fetchState, setFetchState] = useState3("idle");
-  const autoSaveTimers = useRef2(/* @__PURE__ */ new Map());
-  const activeElRef = useRef2(null);
-  const originalContentRef = useRef2(null);
-  const activeStateElRef = useRef2(null);
-  const parentScrollRef = useRef2(null);
-  const toolbarElRef = useRef2(null);
-  const glowElRef = useRef2(null);
-  const hoveredImageRef = useRef2(null);
-  const hoveredImageHasTextOverlapRef = useRef2(false);
-  const imageUnhoverTimerRef = useRef2(null);
-  const imageShowTimerRef = useRef2(null);
-  const editStylesRef = useRef2(null);
-  const activateRef = useRef2(() => {
+  const [fetchState, setFetchState] = useState5("idle");
+  const autoSaveTimers = useRef3(/* @__PURE__ */ new Map());
+  const activeElRef = useRef3(null);
+  const selectedElRef = useRef3(null);
+  const originalContentRef = useRef3(null);
+  const activeStateElRef = useRef3(null);
+  const parentScrollRef = useRef3(null);
+  const visibleViewportRef = useRef3(null);
+  const [dialogPortalContainer, setDialogPortalContainer] = useState5(null);
+  const attachVisibleViewport = useCallback2((node) => {
+    visibleViewportRef.current = node;
+    setDialogPortalContainer(node);
+    if (node) applyVisibleViewport(node, parentScrollRef.current);
+  }, []);
+  const toolbarElRef = useRef3(null);
+  const glowElRef = useRef3(null);
+  const hoveredImageRef = useRef3(null);
+  const hoveredImageHasTextOverlapRef = useRef3(false);
+  const hoveredGapRef = useRef3(null);
+  const imageUnhoverTimerRef = useRef3(null);
+  const imageShowTimerRef = useRef3(null);
+  const editStylesRef = useRef3(null);
+  const activateRef = useRef3(() => {
+  });
+  const deactivateRef = useRef3(() => {
   });
-  const deactivateRef = useRef2(() => {
+  const selectRef = useRef3(() => {
   });
-  const refreshActiveCommandsRef = useRef2(() => {
+  const deselectRef = useRef3(() => {
   });
-  const postToParentRef = useRef2(postToParent);
+  const refreshActiveCommandsRef = useRef3(() => {
+  });
+  const postToParentRef = useRef3(postToParent);
   postToParentRef.current = postToParent;
-  const [toolbarRect, setToolbarRect] = useState3(null);
-  const [toggleState, setToggleState] = useState3(null);
-  const [maxBadge, setMaxBadge] = useState3(null);
-  const [activeCommands, setActiveCommands] = useState3(/* @__PURE__ */ new Set());
-  const [toolbarShowEditLink, setToolbarShowEditLink] = useState3(false);
-  const [linkPopover, setLinkPopover] = useState3(null);
-  const [sitePages, setSitePages] = useState3([]);
-  const [sectionsByPath, setSectionsByPath] = useState3({});
-  const sectionsPrefetchGenRef = useRef2(0);
-  const setLinkPopoverRef = useRef2(setLinkPopover);
-  const linkPopoverPanelRef = useRef2(null);
-  const linkPopoverOpenRef = useRef2(false);
-  const linkPopoverGraceUntilRef = useRef2(0);
+  const sectionsLoadedRef = useRef3(false);
+  const pendingScheduleConfigRequests = useRef3([]);
+  const [toolbarRect, setToolbarRect] = useState5(null);
+  const [toolbarVariant, setToolbarVariant] = useState5("none");
+  const toolbarVariantRef = useRef3("none");
+  toolbarVariantRef.current = toolbarVariant;
+  const [toggleState, setToggleState] = useState5(null);
+  const [maxBadge, setMaxBadge] = useState5(null);
+  const [activeCommands, setActiveCommands] = useState5(/* @__PURE__ */ new Set());
+  const [sectionGap, setSectionGap] = useState5(null);
+  const [toolbarShowEditLink, setToolbarShowEditLink] = useState5(false);
+  const [linkPopover, setLinkPopover] = useState5(null);
+  const [sitePages, setSitePages] = useState5([]);
+  const [sectionsByPath, setSectionsByPath] = useState5({});
+  const sectionsPrefetchGenRef = useRef3(0);
+  const setLinkPopoverRef = useRef3(setLinkPopover);
+  const linkPopoverPanelRef = useRef3(null);
+  const linkPopoverOpenRef = useRef3(false);
+  const linkPopoverGraceUntilRef = useRef3(0);
   setLinkPopoverRef.current = setLinkPopover;
   const bumpLinkPopoverGrace = () => {
     linkPopoverGraceUntilRef.current = Date.now() + 350;
@@ -4918,17 +6099,43 @@ function OhhwellsBridge() {
       );
     });
   }, [isEditMode, pathname]);
-  const runSectionsPrefetchRef = useRef2(runSectionsPrefetch);
+  const runSectionsPrefetchRef = useRef3(runSectionsPrefetch);
   runSectionsPrefetchRef.current = runSectionsPrefetch;
-  useEffect2(() => {
+  useEffect3(() => {
     if (!linkPopover) return;
     if (hoveredImageRef.current) {
       hoveredImageRef.current = null;
       hoveredImageHasTextOverlapRef.current = false;
     }
+    hoveredGapRef.current = null;
+    setSectionGap(null);
     postToParent({ type: "ow:image-unhover" });
+    postToParent({ type: "ow:link-modal-lock", locked: true });
+    const html = document.documentElement;
+    const body = document.body;
+    const prevHtmlOverflow = html.style.overflow;
+    const prevBodyOverflow = body.style.overflow;
+    html.style.overflow = "hidden";
+    body.style.overflow = "hidden";
+    const preventBackgroundScroll = (e) => {
+      const target = e.target;
+      if (target instanceof Element && target.closest('[data-ohw-link-modal-root], [data-slot="dialog-overlay"]')) {
+        return;
+      }
+      e.preventDefault();
+    };
+    const scrollOpts = { passive: false, capture: true };
+    document.addEventListener("wheel", preventBackgroundScroll, scrollOpts);
+    document.addEventListener("touchmove", preventBackgroundScroll, scrollOpts);
+    return () => {
+      postToParent({ type: "ow:link-modal-lock", locked: false });
+      html.style.overflow = prevHtmlOverflow;
+      body.style.overflow = prevBodyOverflow;
+      document.removeEventListener("wheel", preventBackgroundScroll, scrollOpts);
+      document.removeEventListener("touchmove", preventBackgroundScroll, scrollOpts);
+    };
   }, [linkPopover, postToParent]);
-  useEffect2(() => {
+  useEffect3(() => {
     if (!isEditMode) return;
     const useFixtures = shouldUseDevFixtures();
     if (useFixtures) {
@@ -4952,21 +6159,27 @@ function OhhwellsBridge() {
     if (!useFixtures) postToParent({ type: "ow:request-site-pages" });
     return () => window.removeEventListener("message", onSitePages);
   }, [isEditMode, postToParent]);
-  useEffect2(() => {
+  useEffect3(() => {
     if (!isEditMode || shouldUseDevFixtures()) return;
     void loadAllSectionsManifest().then((manifest) => {
       if (Object.keys(manifest).length === 0) return;
       setSectionsByPath((prev) => ({ ...manifest, ...prev }));
     });
   }, [isEditMode]);
-  useEffect2(() => {
+  useEffect3(() => {
     const update = () => {
-      const el = activeElRef.current;
+      const el = activeElRef.current ?? selectedElRef.current;
       if (el) setToolbarRect(el.getBoundingClientRect());
       setToggleState((prev) => {
         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;
@@ -4980,6 +6193,29 @@ function OhhwellsBridge() {
   const refreshStateRules = useCallback2(() => {
     editStylesRef.current?.forceHover && (editStylesRef.current.forceHover.textContent = collectStateRules());
   }, []);
+  const processConfigRequest = useCallback2((insertAfterVal) => {
+    const tracker = getSectionsTracker();
+    let entries = [];
+    try {
+      entries = JSON.parse(tracker.textContent || "[]");
+    } catch {
+    }
+    const path = window.location.pathname;
+    const entry = entries.find(
+      (e) => e.type === "scheduling" && e.insertAfter === insertAfterVal && (!e.pagePath || e.pagePath === path)
+    );
+    if (entry) {
+      window.postMessage({ type: "ow:schedule-config", insertAfter: insertAfterVal, scheduleId: entry.scheduleId ?? null }, "*");
+      return;
+    }
+    const newEntry = { type: "scheduling", insertAfter: insertAfterVal, pagePath: path };
+    entries.push(newEntry);
+    tracker.textContent = JSON.stringify(entries);
+    if (isEditMode) {
+      postToParentRef.current({ type: "ow:change", nodes: [{ key: "__ohw_sections", text: tracker.textContent }] });
+    }
+    window.postMessage({ type: "ow:schedule-config", insertAfter: insertAfterVal, scheduleId: null }, "*");
+  }, [isEditMode]);
   const deactivate = useCallback2(() => {
     const el = activeElRef.current;
     if (!el) return;
@@ -5000,19 +6236,41 @@ function OhhwellsBridge() {
     }
     el.removeAttribute("contenteditable");
     activeElRef.current = null;
-    setToolbarRect(null);
+    if (!selectedElRef.current) {
+      setToolbarRect(null);
+      setToolbarVariant("none");
+    }
     setMaxBadge(null);
     setActiveCommands(/* @__PURE__ */ new Set());
     setToolbarShowEditLink(false);
     postToParent({ type: "ow:exit-edit" });
   }, [postToParent]);
+  const deselect = useCallback2(() => {
+    selectedElRef.current = null;
+    if (!activeElRef.current) {
+      setToolbarRect(null);
+      setToolbarVariant("none");
+    }
+  }, []);
+  const select = useCallback2((anchor) => {
+    if (!isNavbarButton(anchor)) return;
+    if (activeElRef.current) deactivate();
+    selectedElRef.current = anchor;
+    clearHrefKeyHover(anchor);
+    setToolbarVariant("link-action");
+    setToolbarRect(anchor.getBoundingClientRect());
+    setToolbarShowEditLink(false);
+    setActiveCommands(/* @__PURE__ */ new Set());
+  }, [deactivate]);
   const activate = useCallback2((el) => {
     if (activeElRef.current === el) return;
+    selectedElRef.current = null;
     deactivate();
     if (hoveredImageRef.current) {
       hoveredImageRef.current = null;
       postToParentRef.current({ type: "ow:image-unhover" });
     }
+    setToolbarVariant("rich-text");
     el.setAttribute("contenteditable", "true");
     el.removeAttribute("data-ohw-hovered");
     activeElRef.current = el;
@@ -5025,6 +6283,8 @@ function OhhwellsBridge() {
   }, [deactivate, postToParent]);
   activateRef.current = activate;
   deactivateRef.current = deactivate;
+  selectRef.current = select;
+  deselectRef.current = deselect;
   useLayoutEffect(() => {
     if (!subdomain || isEditMode) {
       setFetchState("done");
@@ -5033,6 +6293,7 @@ function OhhwellsBridge() {
     const applyContent = (content) => {
       const imageLoads = [];
       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");
@@ -5054,6 +6315,9 @@ function OhhwellsBridge() {
         });
         applyLinkByKey(key, val);
       }
+      initSectionsFromContent(content, true);
+      sectionsLoadedRef.current = true;
+      pendingScheduleConfigRequests.current.splice(0).forEach(processConfigRequest);
       return imageLoads.length > 0 ? Promise.all(imageLoads).then(() => {
       }) : Promise.resolve();
     };
@@ -5078,12 +6342,15 @@ function OhhwellsBridge() {
       cancelled = true;
     };
   }, [subdomain, isEditMode, pathname]);
-  useEffect2(() => {
+  useEffect3(() => {
     if (!subdomain || isEditMode) return;
+    let debounceTimer = null;
     const applyFromCache = () => {
       const content = contentCache.get(subdomain);
       if (!content) return;
+      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) => {
           if (el.dataset.ohwEditable === "image") {
             const img = el instanceof HTMLImageElement ? el : el.querySelector("img");
@@ -5100,21 +6367,34 @@ function OhhwellsBridge() {
         applyLinkByKey(key, val);
       }
     };
-    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;
     const visible = Boolean(subdomain) && fetchState !== "done";
     el.style.display = visible ? "flex" : "none";
   }, [subdomain, fetchState]);
-  useEffect2(() => {
+  useEffect3(() => {
     postToParent({ type: "ow:navigation", path: pathname });
   }, [pathname, postToParent]);
-  useEffect2(() => {
+  useEffect3(() => {
+    if (!isEditMode) return;
+    setLinkPopover(null);
+    deselectRef.current();
+    deactivateRef.current();
+  }, [pathname, isEditMode]);
+  useEffect3(() => {
     if (!isEditMode) return;
     const measure = () => {
       const h = document.body.scrollHeight;
@@ -5138,7 +6418,7 @@ function OhhwellsBridge() {
       window.removeEventListener("resize", handleResize);
     };
   }, [pathname, isEditMode, postToParent]);
-  useEffect2(() => {
+  useEffect3(() => {
     if (!subdomainFromQuery || isEditMode) return;
     const handleClick = (e) => {
       const anchor = e.target.closest("a");
@@ -5154,7 +6434,7 @@ function OhhwellsBridge() {
     document.addEventListener("click", handleClick, true);
     return () => document.removeEventListener("click", handleClick, true);
   }, [subdomainFromQuery, isEditMode, router]);
-  useEffect2(() => {
+  useEffect3(() => {
     if (!isEditMode) {
       editStylesRef.current?.base.remove();
       editStylesRef.current?.forceHover.remove();
@@ -5224,12 +6504,12 @@ function OhhwellsBridge() {
         if (editable.dataset.ohwEditable === "link") {
           e.preventDefault();
           e.stopPropagation();
+          deselectRef.current();
           deactivateRef.current();
           bumpLinkPopoverGrace();
           setLinkPopoverRef.current({
             key: editable.dataset.ohwKey ?? "",
-            target: getLinkHref(editable),
-            rect: editable.getBoundingClientRect()
+            target: getLinkHref(editable)
           });
           return;
         }
@@ -5239,11 +6519,31 @@ function OhhwellsBridge() {
           postToParentRef.current({ type: "ow:image-pick", key: editable.dataset.ohwKey ?? "" });
           return;
         }
+        const hrefCtx = getHrefKeyFromElement(editable);
+        if (hrefCtx && isNavbarButton(hrefCtx.anchor)) {
+          e.preventDefault();
+          e.stopPropagation();
+          const { anchor: anchor2 } = hrefCtx;
+          if (selectedElRef.current === anchor2) {
+            activateRef.current(editable);
+            return;
+          }
+          selectRef.current(anchor2);
+          return;
+        }
         e.preventDefault();
         e.stopPropagation();
         activateRef.current(editable);
         return;
       }
+      const hrefAnchor = target.closest("[data-ohw-href-key]");
+      if (hrefAnchor && isNavbarButton(hrefAnchor)) {
+        e.preventDefault();
+        e.stopPropagation();
+        if (selectedElRef.current === hrefAnchor) return;
+        selectRef.current(hrefAnchor);
+        return;
+      }
       if (activeElRef.current) {
         const sel = window.getSelection();
         if (sel && !sel.isCollapsed) {
@@ -5258,15 +6558,22 @@ function OhhwellsBridge() {
         const hrefCtx = getHrefKeyFromElement(activeElRef.current);
         if (hrefCtx && (hrefCtx.anchor === target || hrefCtx.anchor.contains(target))) return;
       }
+      if (linkPopoverOpenRef.current && selectedElRef.current) {
+        const selected = selectedElRef.current;
+        if (selected === target || selected.contains(target)) return;
+      }
       if (linkPopoverOpenRef.current) {
         setLinkPopoverRef.current(null);
         return;
       }
+      deselectRef.current();
       deactivateRef.current();
     };
     const handleMouseOver = (e) => {
       const editable = e.target.closest("[data-ohw-editable]");
       if (!editable) return;
+      const selected = selectedElRef.current;
+      if (selected && (selected === editable || selected.contains(editable))) return;
       if (editable.dataset.ohwEditable !== "image" && editable.dataset.ohwEditable !== "bg-image" && !editable.hasAttribute("contenteditable")) {
         editable.setAttribute("data-ohw-hovered", "");
       }
@@ -5402,7 +6709,7 @@ function OhhwellsBridge() {
           }
           return;
         }
-        if (topEl?.closest("[data-ohw-link-popover-root]") || topEl?.closest("[data-ohw-link-modal-root]")) {
+        if (topEl?.closest("[data-ohw-link-popover-root]") || topEl?.closest("[data-ohw-link-modal-root]") || topEl?.closest("[data-ohw-link-page-dropdown]")) {
           if (hoveredImageRef.current) {
             hoveredImageRef.current = null;
             hoveredImageHasTextOverlapRef.current = false;
@@ -5455,6 +6762,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;
@@ -5520,8 +6836,37 @@ function OhhwellsBridge() {
         }
       }
     };
+    const probeSectionGapAt = (clientX, clientY, fromParentViewport = false) => {
+      if (linkPopoverOpenRef.current) {
+        if (hoveredGapRef.current) {
+          hoveredGapRef.current = null;
+          setSectionGap(null);
+        }
+        return;
+      }
+      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);
     };
@@ -5529,6 +6874,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);
     };
@@ -5686,7 +7032,12 @@ 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") {
+          sectionsJson = val;
+          continue;
+        }
         document.querySelectorAll(`[data-ohw-key="${key}"]`).forEach((el) => {
           if (el.dataset.ohwEditable === "image") {
             const img = el instanceof HTMLImageElement ? el : el.querySelector("img");
@@ -5701,6 +7052,11 @@ function OhhwellsBridge() {
         });
         applyLinkByKey(key, val);
       }
+      if (sectionsJson) {
+        initSectionsFromContent({ __ohw_sections: sectionsJson }, true);
+        sectionsLoadedRef.current = true;
+        pendingScheduleConfigRequests.current.splice(0).forEach(processConfigRequest);
+      }
       postToParentRef.current({ type: "ow:hydrate-done" });
     };
     window.addEventListener("message", handleHydrate);
@@ -5711,6 +7067,7 @@ function OhhwellsBridge() {
         setLinkPopoverRef.current(null);
         return;
       }
+      deselectRef.current();
       deactivateRef.current();
     };
     window.addEventListener("message", handleDeactivate);
@@ -5719,6 +7076,10 @@ function OhhwellsBridge() {
         setLinkPopoverRef.current(null);
         return;
       }
+      if (e.key === "Escape" && selectedElRef.current && !activeElRef.current) {
+        deselectRef.current();
+        return;
+      }
       if (e.key !== "Escape") return;
       const el = activeElRef.current;
       if (el && originalContentRef.current !== null) {
@@ -5728,13 +7089,16 @@ function OhhwellsBridge() {
           postToParentRef.current({ type: "ow:change", nodes: [{ key, text: originalContentRef.current }] });
         }
       }
+      deselectRef.current();
       deactivateRef.current();
     };
     const handleScroll = () => {
-      if (activeElRef.current) {
-        const r2 = activeElRef.current.getBoundingClientRect();
+      const focusEl = activeElRef.current ?? selectedElRef.current;
+      if (focusEl) {
+        const r2 = focusEl.getBoundingClientRect();
         applyToolbarPos(r2);
-        setMaxBadge((prev) => prev ? { ...prev, rect: r2 } : null);
+        setToolbarRect(r2);
+        setMaxBadge((prev) => prev && activeElRef.current ? { ...prev, rect: r2 } : prev);
       }
       if (activeStateElRef.current) {
         const rect = activeStateElRef.current.getBoundingClientRect();
@@ -5753,7 +7117,63 @@ 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, insertBefore } = e.data;
+      if (widgetType !== "scheduling") return;
+      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 ?? "[]" }] });
+        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;
+      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 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;
+      document.querySelectorAll('[data-ohw-section-container="scheduling"]').forEach((el) => {
+        el.remove();
+      });
+      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;
@@ -5803,8 +7223,9 @@ function OhhwellsBridge() {
     };
     const applyToolbarPos = (rect) => {
       const ps = parentScrollRef.current;
+      const approxW = toolbarVariantRef.current === "link-action" ? 112 : 306;
       if (toolbarElRef.current) {
-        const { top, left, transform } = calcToolbarPos(rect, ps);
+        const { top, left, transform } = calcToolbarPos(rect, ps, approxW);
         toolbarElRef.current.style.top = `${top}px`;
         toolbarElRef.current.style.left = `${left}px`;
         toolbarElRef.current.style.transform = transform;
@@ -5819,7 +7240,11 @@ function OhhwellsBridge() {
       if (e.data?.type !== "ow:parent-scroll") return;
       const { iframeOffsetTop, headerH, canvasH } = e.data;
       parentScrollRef.current = { iframeOffsetTop, headerH, canvasH };
-      if (activeElRef.current) applyToolbarPos(activeElRef.current.getBoundingClientRect());
+      if (visibleViewportRef.current) {
+        applyVisibleViewport(visibleViewportRef.current, parentScrollRef.current);
+      }
+      const focusEl = activeElRef.current ?? selectedElRef.current;
+      if (focusEl) applyToolbarPos(focusEl.getBoundingClientRect());
     };
     const handleClickAt = (e) => {
       if (e.data?.type !== "ow:click-at") return;
@@ -5858,12 +7283,23 @@ function OhhwellsBridge() {
       deactivateRef.current();
     };
     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);
     window.addEventListener("message", handleAnimLock);
     window.addEventListener("message", handleCanvasHeight);
     window.addEventListener("message", handleParentScroll);
     window.addEventListener("message", handlePointerSync);
     window.addEventListener("message", handleClickAt);
+    const handleViewportResize = () => {
+      if (visibleViewportRef.current) {
+        applyVisibleViewport(visibleViewportRef.current, parentScrollRef.current);
+      }
+    };
+    window.addEventListener("resize", handleViewportResize, { passive: true });
     document.addEventListener("click", handleClick, true);
     document.addEventListener("paste", handlePaste, true);
     document.addEventListener("input", handleInput, true);
@@ -5892,10 +7328,16 @@ 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", handleScheduleLinked);
+      window.removeEventListener("message", handleClearSchedulingWidget);
+      window.removeEventListener("message", handleRemoveSchedulingSection);
       window.removeEventListener("message", handleImageUrl);
       window.removeEventListener("message", handleAnimLock);
       window.removeEventListener("message", handleCanvasHeight);
       window.removeEventListener("message", handleParentScroll);
+      window.removeEventListener("resize", handleViewportResize);
       window.removeEventListener("message", handlePointerSync);
       window.removeEventListener("message", handleClickAt);
       window.removeEventListener("message", handleHydrate);
@@ -5906,7 +7348,23 @@ function OhhwellsBridge() {
       if (imageShowTimerRef.current) clearTimeout(imageShowTimerRef.current);
     };
   }, [isEditMode, refreshStateRules]);
-  useEffect2(() => {
+  useEffect3(() => {
+    const handler = (e) => {
+      if (e.data?.type !== "ow:request-schedule-config") return;
+      const insertAfterVal = e.data.insertAfter;
+      if (!insertAfterVal) return;
+      if (!sectionsLoadedRef.current) {
+        if (!pendingScheduleConfigRequests.current.includes(insertAfterVal)) {
+          pendingScheduleConfigRequests.current.push(insertAfterVal);
+        }
+        return;
+      }
+      processConfigRequest(insertAfterVal);
+    };
+    window.addEventListener("message", handler);
+    return () => window.removeEventListener("message", handler);
+  }, [processConfigRequest]);
+  useEffect3(() => {
     if (!isEditMode) return;
     document.querySelectorAll("[data-ohw-active-state]").forEach((el) => {
       el.removeAttribute("data-ohw-active-state");
@@ -5935,7 +7393,7 @@ function OhhwellsBridge() {
       clearTimeout(timer);
     };
   }, [pathname, isEditMode, refreshStateRules, postToParent]);
-  useEffect2(() => {
+  useEffect3(() => {
     scrollToHashSectionWhenReady();
     const onHashChange = () => scrollToHashSectionWhenReady();
     window.addEventListener("hashchange", onHashChange);
@@ -5967,10 +7425,22 @@ function OhhwellsBridge() {
     bumpLinkPopoverGrace();
     setLinkPopover({
       key: hrefCtx.key,
-      target: getLinkHref(hrefCtx.anchor),
-      rect: hrefCtx.anchor.getBoundingClientRect()
+      target: getLinkHref(hrefCtx.anchor)
     });
-  }, []);
+    deactivate();
+  }, [deactivate]);
+  const openLinkPopoverForSelected = useCallback2(() => {
+    const anchor = selectedElRef.current;
+    if (!anchor) return;
+    const key = anchor.getAttribute("data-ohw-href-key");
+    if (!key) return;
+    bumpLinkPopoverGrace();
+    setLinkPopover({
+      key,
+      target: getLinkHref(anchor)
+    });
+    deselect();
+  }, [deselect]);
   const handleLinkPopoverSubmit = useCallback2(
     (target) => {
       if (!linkPopover) return;
@@ -5985,12 +7455,14 @@ function OhhwellsBridge() {
   const currentSections = sectionsByPath[pathname] ?? [];
   linkPopoverOpenRef.current = linkPopover !== null;
   return bridgeRoot ? createPortal(
-    /* @__PURE__ */ jsxs6(Fragment2, { children: [
-      toolbarRect && /* @__PURE__ */ jsxs6(Fragment2, { children: [
-        /* @__PURE__ */ jsx13(GlowFrame, { rect: toolbarRect, elRef: glowElRef }),
-        /* @__PURE__ */ jsx13(
+    /* @__PURE__ */ jsxs9(Fragment3, { children: [
+      /* @__PURE__ */ jsx16("div", { ref: attachVisibleViewport, "data-ohw-visible-viewport": "", "aria-hidden": true }),
+      toolbarRect && /* @__PURE__ */ jsxs9(Fragment3, { children: [
+        /* @__PURE__ */ jsx16(GlowFrame, { rect: toolbarRect, elRef: glowElRef }),
+        toolbarVariant === "rich-text" && /* @__PURE__ */ jsx16(
           FloatingToolbar,
           {
+            variant: "rich-text",
             rect: toolbarRect,
             parentScroll: parentScrollRef.current,
             elRef: toolbarElRef,
@@ -5999,9 +7471,21 @@ function OhhwellsBridge() {
             showEditLink,
             onEditLink: openLinkPopoverForActive
           }
+        ),
+        toolbarVariant === "link-action" && /* @__PURE__ */ jsx16(
+          FloatingToolbar,
+          {
+            variant: "link-action",
+            rect: toolbarRect,
+            parentScroll: parentScrollRef.current,
+            elRef: toolbarElRef,
+            onCommand: handleCommand,
+            activeCommands,
+            onEditLink: openLinkPopoverForSelected
+          }
         )
       ] }),
-      maxBadge && /* @__PURE__ */ jsxs6(
+      maxBadge && /* @__PURE__ */ jsxs9(
         "div",
         {
           "data-ohw-max-badge": "",
@@ -6027,7 +7511,7 @@ function OhhwellsBridge() {
           ]
         }
       ),
-      toggleState && /* @__PURE__ */ jsx13(
+      toggleState && /* @__PURE__ */ jsx16(
         StateToggle,
         {
           rect: toggleState.rect,
@@ -6036,12 +7520,36 @@ function OhhwellsBridge() {
           onStateChange: handleStateChange
         }
       ),
-      linkPopover ? /* @__PURE__ */ jsx13(
+      sectionGap && /* @__PURE__ */ jsxs9(
+        "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__ */ jsx16("div", { className: "flex-1 bg-primary", style: { height: 3 } }),
+            /* @__PURE__ */ jsx16(
+              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__ */ jsx16("div", { className: "flex-1 bg-primary", style: { height: 3 } })
+          ]
+        }
+      ),
+      linkPopover && dialogPortalContainer ? /* @__PURE__ */ jsx16(
         LinkPopover,
         {
-          rect: linkPopover.rect,
-          parentScroll: parentScrollRef.current,
           panelRef: linkPopoverPanelRef,
+          portalContainer: dialogPortalContainer,
           open: true,
           mode: "edit",
           pages: sitePages,
@@ -6050,8 +7558,34 @@ function OhhwellsBridge() {
           initialTarget: linkPopover.target,
           onClose: closeLinkPopover,
           onSubmit: handleLinkPopoverSubmit
+        },
+        `${linkPopover.key}-${pathname}`
+      ) : null,
+      sectionGap && /* @__PURE__ */ jsxs9(
+        "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__ */ jsx16("div", { className: "flex-1 bg-primary", style: { height: 3 } }),
+            /* @__PURE__ */ jsx16(
+              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__ */ jsx16("div", { className: "flex-1 bg-primary", style: { height: 3 } })
+          ]
         }
-      ) : null
+      )
     ] }),
     bridgeRoot
   ) : null;
@@ -6060,6 +7594,7 @@ export {
   LinkEditorPanel,
   LinkPopover,
   OhhwellsBridge,
+  SchedulingWidget,
   Toggle,
   ToggleGroup,
   ToggleGroupItem,