npm - @ohhwells/bridge - Versions diffs - 0.1.29 → 0.1.31 - Mend

@ohhwells/bridge 0.1.29 → 0.1.31

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (9) hide show

package/dist/index.js CHANGED Viewed

@@ -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,40 +4711,10 @@ 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";
+import { jsx as jsx12, jsxs as jsxs7 } from "react/jsx-runtime";
 function FieldChevron({ onClick }) {
-  return /* @__PURE__ */ jsx10(
+  return /* @__PURE__ */ jsx12(
     "button",
     {
       type: "button",
@@ -3929,7 +4722,7 @@ function FieldChevron({ onClick }) {
       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();
 }
@@ -4623,7 +5623,7 @@ var TOOLBAR_GROUPS = [
 ];
 function GlowFrame({ rect, elRef }) {
   const GAP = 6;
-  return /* @__PURE__ */ jsx13(
+  return /* @__PURE__ */ jsx16(
     "div",
     {
       ref: elRef,
@@ -4642,41 +5642,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 = 330) {
   const GAP = 8;
   const APPROX_H = 36;
-  const APPROX_W = 330;
+  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" ? 120 : 330;
+  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: 4,
+          gap: 6,
+          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,
@@ -4701,11 +5851,11 @@ function FloatingToolbar({
       },
       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 +5881,7 @@ function FloatingToolbar({
                   flexShrink: 0,
                   padding: 6
                 },
-                children: /* @__PURE__ */ jsx13(
+                children: /* @__PURE__ */ jsx16(
                   "svg",
                   {
                     width: "16",
@@ -4751,7 +5901,7 @@ function FloatingToolbar({
             );
           })
         ] }, gi)),
-        showEditLink ? /* @__PURE__ */ jsx13(
+        showEditLink ? /* @__PURE__ */ jsx16(
           "button",
           {
             type: "button",
@@ -4783,10 +5933,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 +5950,7 @@ function StateToggle({
   states,
   onStateChange
 }) {
-  return /* @__PURE__ */ jsx13(
+  return /* @__PURE__ */ jsx16(
     ToggleGroup,
     {
       "data-ohw-state-toggle": "",
@@ -4817,18 +5964,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 +6015,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 +6097,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 +6157,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 +6191,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 +6234,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 +6281,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 +6291,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 +6313,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 +6340,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 +6365,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 +6416,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 +6432,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 +6502,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 +6517,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 +6556,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 +6707,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 +6760,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 +6834,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 +6872,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 +7030,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 +7050,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 +7065,7 @@ function OhhwellsBridge() {
         setLinkPopoverRef.current(null);
         return;
       }
+      deselectRef.current();
       deactivateRef.current();
     };
     window.addEventListener("message", handleDeactivate);
@@ -5719,6 +7074,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 +7087,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 +7115,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 +7221,9 @@ function OhhwellsBridge() {
     };
     const applyToolbarPos = (rect) => {
       const ps = parentScrollRef.current;
+      const approxW = toolbarVariantRef.current === "link-action" ? 120 : 330;
       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 +7238,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 +7281,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 +7326,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 +7346,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 +7391,7 @@ function OhhwellsBridge() {
       clearTimeout(timer);
     };
   }, [pathname, isEditMode, refreshStateRules, postToParent]);
-  useEffect2(() => {
+  useEffect3(() => {
     scrollToHashSectionWhenReady();
     const onHashChange = () => scrollToHashSectionWhenReady();
     window.addEventListener("hashchange", onHashChange);
@@ -5967,10 +7423,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 +7453,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 +7469,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 +7509,7 @@ function OhhwellsBridge() {
           ]
         }
       ),
-      toggleState && /* @__PURE__ */ jsx13(
+      toggleState && /* @__PURE__ */ jsx16(
         StateToggle,
         {
           rect: toggleState.rect,
@@ -6036,12 +7518,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,7 +7556,8 @@ function OhhwellsBridge() {
           initialTarget: linkPopover.target,
           onClose: closeLinkPopover,
           onSubmit: handleLinkPopoverSubmit
-        }
+        },
+        `${linkPopover.key}-${pathname}`
       ) : null
     ] }),
     bridgeRoot
@@ -6060,6 +7567,7 @@ export {
   LinkEditorPanel,
   LinkPopover,
   OhhwellsBridge,
+  SchedulingWidget,
   Toggle,
   ToggleGroup,
   ToggleGroupItem,