@ohhwells/bridge 0.1.36-next.48 → 0.1.36-next.50

package/dist/index.cjs

@@ -4639,6 +4639,220 @@ function ItemInteractionLayer({
   );
 }
 
+// src/ui/MediaOverlay.tsx
+var React6 = __toESM(require("react"), 1);
+var import_lucide_react3 = require("lucide-react");
+
+// src/ui/button.tsx
+var React5 = __toESM(require("react"), 1);
+var import_radix_ui4 = require("radix-ui");
+var import_jsx_runtime10 = require("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",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:opacity-90",
+        outline: "border border-border bg-background text-foreground shadow-sm hover:bg-muted/80",
+        ghost: "min-w-0 px-3 py-2 text-foreground hover:bg-muted/50"
+      },
+      size: {
+        default: "h-9",
+        sm: "h-8 min-w-[64px] px-2 py-1.5 text-sm"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+var Button = React5.forwardRef(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? import_radix_ui4.Slot.Root : "button";
+    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+      Comp,
+      {
+        ref,
+        "data-slot": "button",
+        className: cn(buttonVariants({ variant, size, className })),
+        ...props
+      }
+    );
+  }
+);
+Button.displayName = "Button";
+
+// src/ui/MediaOverlay.tsx
+var import_jsx_runtime11 = require("react/jsx-runtime");
+var MEDIA_UPLOAD_FADE_MS = 300;
+var VIDEO_SETTINGS_BAR_INSET = 8;
+var OVERLAY_BUTTON_STYLE = {
+  pointerEvents: "auto",
+  fontFamily: "Inter, sans-serif",
+  fontSize: 12,
+  color: "#000"
+};
+var SKELETON_CSS = `
+@keyframes ohw-media-shimmer {
+  0%   { transform: translateX(-100%); }
+  100% { transform: translateX(100%); }
+}
+[data-ohw-media-skeleton] {
+  overflow: hidden;
+  background-color: #d1d5db; /* tailwind gray-300 */
+}
+[data-ohw-media-skeleton]::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent);
+  animation: ohw-media-shimmer 1.4s infinite;
+}
+`;
+function MediaOverlay({
+  hover,
+  isUploading,
+  fadingOut = false,
+  onFadeOutComplete,
+  onReplace,
+  onVideoSettingsChange
+}) {
+  const { rect } = hover;
+  const skeletonRef = React6.useRef(null);
+  const isVideo = hover.elementType === "video";
+  const autoplay = hover.videoAutoplay ?? true;
+  const muted = hover.videoMuted ?? true;
+  const box = {
+    position: "fixed",
+    top: rect.top,
+    left: rect.left,
+    width: rect.width,
+    height: rect.height,
+    zIndex: 2147483646
+  };
+  React6.useEffect(() => {
+    if (!isUploading || !fadingOut || !skeletonRef.current) return;
+    const anim = skeletonRef.current.animate([{ opacity: 1 }, { opacity: 0 }], {
+      duration: MEDIA_UPLOAD_FADE_MS,
+      easing: "ease-out",
+      fill: "forwards"
+    });
+    anim.finished.then(() => onFadeOutComplete?.(hover.key)).catch(() => onFadeOutComplete?.(hover.key));
+    return () => anim.cancel();
+  }, [isUploading, fadingOut, onFadeOutComplete, hover.key]);
+  if (isUploading) {
+    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+      "div",
+      {
+        ref: skeletonRef,
+        "data-ohw-bridge": "",
+        "data-ohw-media-overlay": "",
+        "data-ohw-media-skeleton": "",
+        "aria-hidden": true,
+        style: { ...box, pointerEvents: "none" },
+        children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("style", { children: SKELETON_CSS })
+      }
+    );
+  }
+  const settingsBar = isVideo && !hover.isDragOver ? /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+    "div",
+    {
+      "data-ohw-bridge": "",
+      "data-ohw-media-overlay": "",
+      className: "flex items-center justify-center gap-1.5",
+      style: {
+        position: "fixed",
+        top: rect.top + VIDEO_SETTINGS_BAR_INSET,
+        left: rect.left,
+        width: rect.width,
+        zIndex: 2147483647,
+        pointerEvents: "auto"
+      },
+      onClick: (e) => e.stopPropagation(),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+          Button,
+          {
+            "data-ohw-media-overlay": "",
+            variant: "outline",
+            size: "sm",
+            className: "cursor-pointer hover:bg-background",
+            style: { ...OVERLAY_BUTTON_STYLE, minWidth: 0, padding: "0 8px" },
+            "aria-label": autoplay ? "Disable autoplay" : "Enable autoplay",
+            title: autoplay ? "Autoplay on \u2014 click to disable" : "Autoplay off \u2014 click to enable",
+            onMouseDown: (e) => e.preventDefault(),
+            onClick: (e) => {
+              e.stopPropagation();
+              onVideoSettingsChange?.(hover.key, { autoplay: !autoplay });
+            },
+            children: autoplay ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_lucide_react3.Pause, { size: 14 }) : /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_lucide_react3.Play, { size: 14 })
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+          Button,
+          {
+            "data-ohw-media-overlay": "",
+            variant: "outline",
+            size: "sm",
+            className: "cursor-pointer hover:bg-background",
+            style: { ...OVERLAY_BUTTON_STYLE, minWidth: 0, padding: "0 8px" },
+            "aria-label": muted ? "Unmute video" : "Mute video",
+            title: muted ? "Muted \u2014 click to unmute" : "Sound on \u2014 click to mute",
+            onMouseDown: (e) => e.preventDefault(),
+            onClick: (e) => {
+              e.stopPropagation();
+              onVideoSettingsChange?.(hover.key, { muted: !muted });
+            },
+            children: muted ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_lucide_react3.VolumeX, { size: 14 }) : /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_lucide_react3.Volume2, { size: 14 })
+          }
+        )
+      ]
+    }
+  ) : null;
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
+    settingsBar,
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+      "div",
+      {
+        "data-ohw-bridge": "",
+        "data-ohw-media-overlay": "",
+        className: "flex items-center justify-center cursor-pointer",
+        style: {
+          ...box,
+          // When text overlays this media, let clicks fall THROUGH to the text underneath. In the
+          // parent this needed a whole `ow:click-at` round-trip to re-hit-test inside the iframe;
+          // in-document, pointer-events does it natively. The button below opts back in, so
+          // Replace still works.
+          pointerEvents: hover.hasTextOverlap ? "none" : "auto",
+          boxShadow: "inset 0 0 0 1.5px var(--color-primary)",
+          background: "color-mix(in srgb, var(--color-primary) 20%, transparent)"
+        },
+        onClick: () => onReplace(hover.key),
+        children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+          Button,
+          {
+            "data-ohw-media-overlay": "",
+            variant: "outline",
+            size: "sm",
+            className: "gap-1.5 cursor-pointer hover:bg-background",
+            style: OVERLAY_BUTTON_STYLE,
+            onMouseDown: (e) => e.preventDefault(),
+            onClick: (e) => {
+              e.stopPropagation();
+              onReplace(hover.key);
+            },
+            children: [
+              isVideo ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_lucide_react3.Film, { size: 14 }) : /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_lucide_react3.ImageIcon, { size: 14 }),
+              isVideo ? "Replace video" : "Replace image"
+            ]
+          }
+        )
+      }
+    )
+  ] });
+}
+
 // src/OhhwellsBridge.tsx
 var import_react_dom2 = require("react-dom");
 var import_navigation = require("next/navigation");
@@ -4918,61 +5132,61 @@ function scrollToHashSectionWhenReady(behavior = "smooth") {
 }
 
 // src/ui/dialog.tsx
-var React5 = __toESM(require("react"), 1);
-var import_radix_ui4 = require("radix-ui");
+var React7 = __toESM(require("react"), 1);
+var import_radix_ui5 = require("radix-ui");
 
 // src/ui/icons.tsx
-var import_jsx_runtime10 = require("react/jsx-runtime");
+var import_jsx_runtime12 = require("react/jsx-runtime");
 function IconX({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime10.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__ */ (0, import_jsx_runtime10.jsx)("path", { d: "M18 6 6 18" }),
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("path", { d: "m6 6 12 12" })
+  return /* @__PURE__ */ (0, import_jsx_runtime12.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__ */ (0, import_jsx_runtime12.jsx)("path", { d: "M18 6 6 18" }),
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("path", { d: "m6 6 12 12" })
   ] });
 }
 function IconChevronDown({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("path", { d: "m6 9 6 6 6-6" }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("path", { d: "m6 9 6 6 6-6" }) });
 }
 function IconFile({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime10.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__ */ (0, import_jsx_runtime10.jsx)("path", { d: "M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z" }),
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("path", { d: "M14 2v4a2 2 0 0 0 2 2h4" })
+  return /* @__PURE__ */ (0, import_jsx_runtime12.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__ */ (0, import_jsx_runtime12.jsx)("path", { d: "M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z" }),
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("path", { d: "M14 2v4a2 2 0 0 0 2 2h4" })
   ] });
 }
 function IconInfo({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime10.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__ */ (0, import_jsx_runtime10.jsx)("circle", { cx: "12", cy: "12", r: "10" }),
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("path", { d: "M12 16v-4" }),
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("path", { d: "M12 8h.01" })
+  return /* @__PURE__ */ (0, import_jsx_runtime12.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__ */ (0, import_jsx_runtime12.jsx)("circle", { cx: "12", cy: "12", r: "10" }),
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("path", { d: "M12 16v-4" }),
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("path", { d: "M12 8h.01" })
   ] });
 }
 function IconArrowRight({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime10.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__ */ (0, import_jsx_runtime10.jsx)("path", { d: "M5 12h14" }),
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("path", { d: "m12 5 7 7-7 7" })
+  return /* @__PURE__ */ (0, import_jsx_runtime12.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__ */ (0, import_jsx_runtime12.jsx)("path", { d: "M5 12h14" }),
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("path", { d: "m12 5 7 7-7 7" })
   ] });
 }
 function IconSection({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime10.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__ */ (0, import_jsx_runtime10.jsx)("rect", { width: "18", height: "7", x: "3", y: "3", rx: "1" }),
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("rect", { width: "9", height: "7", x: "3", y: "14", rx: "1" }),
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("rect", { width: "5", height: "7", x: "16", y: "14", rx: "1" })
+  return /* @__PURE__ */ (0, import_jsx_runtime12.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__ */ (0, import_jsx_runtime12.jsx)("rect", { width: "18", height: "7", x: "3", y: "3", rx: "1" }),
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("rect", { width: "9", height: "7", x: "3", y: "14", rx: "1" }),
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("rect", { width: "5", height: "7", x: "16", y: "14", rx: "1" })
   ] });
 }
 
 // src/ui/dialog.tsx
-var import_jsx_runtime11 = require("react/jsx-runtime");
+var import_jsx_runtime13 = require("react/jsx-runtime");
 function Dialog2({ ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_radix_ui4.Dialog.Root, { "data-slot": "dialog", ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_radix_ui5.Dialog.Root, { "data-slot": "dialog", ...props });
 }
 function DialogPortal({ ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_radix_ui4.Dialog.Portal, { ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_radix_ui5.Dialog.Portal, { ...props });
 }
 function DialogOverlay({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-    import_radix_ui4.Dialog.Overlay,
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+    import_radix_ui5.Dialog.Overlay,
     {
       "data-slot": "dialog-overlay",
       "data-ohw-link-modal-root": "",
@@ -4981,12 +5195,12 @@ function DialogOverlay({
     }
   );
 }
-var DialogContent = React5.forwardRef(({ className, children, showCloseButton = true, container, ...props }, ref) => {
+var DialogContent = React7.forwardRef(({ className, children, showCloseButton = true, container, ...props }, ref) => {
   const positionMode = container ? "absolute" : "fixed";
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(DialogPortal, { container: container ?? void 0, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(DialogOverlay, { className: cn(positionMode, "inset-0") }),
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
-      import_radix_ui4.Dialog.Content,
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(DialogPortal, { container: container ?? void 0, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(DialogOverlay, { className: cn(positionMode, "inset-0") }),
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+      import_radix_ui5.Dialog.Content,
       {
         ref,
         "data-slot": "dialog-content",
@@ -5001,13 +5215,13 @@ var DialogContent = React5.forwardRef(({ className, children, showCloseButton =
         ...props,
         children: [
           children,
-          showCloseButton ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-            import_radix_ui4.Dialog.Close,
+          showCloseButton ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+            import_radix_ui5.Dialog.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__ */ (0, import_jsx_runtime11.jsx)(IconX, { "aria-hidden": true })
+              children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(IconX, { "aria-hidden": true })
             }
           ) : null
         ]
@@ -5015,105 +5229,65 @@ var DialogContent = React5.forwardRef(({ className, children, showCloseButton =
     )
   ] });
 });
-DialogContent.displayName = import_radix_ui4.Dialog.Content.displayName;
+DialogContent.displayName = import_radix_ui5.Dialog.Content.displayName;
 function DialogHeader({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: cn("flex flex-col gap-1.5", className), ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: cn("flex flex-col gap-1.5", className), ...props });
 }
 function DialogFooter({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: cn("flex items-center justify-end gap-2", className), ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: cn("flex items-center justify-end gap-2", className), ...props });
 }
-var DialogTitle = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-  import_radix_ui4.Dialog.Title,
+var DialogTitle = React7.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+  import_radix_ui5.Dialog.Title,
   {
     ref,
     className: cn("text-lg font-semibold leading-none tracking-tight text-card-foreground", className),
     ...props
   }
 ));
-DialogTitle.displayName = import_radix_ui4.Dialog.Title.displayName;
-var DialogDescription = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
-  import_radix_ui4.Dialog.Description,
+DialogTitle.displayName = import_radix_ui5.Dialog.Title.displayName;
+var DialogDescription = React7.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+  import_radix_ui5.Dialog.Description,
   {
     ref,
     className: cn("text-sm text-muted-foreground", className),
     ...props
   }
 ));
-DialogDescription.displayName = import_radix_ui4.Dialog.Description.displayName;
-var DialogClose = import_radix_ui4.Dialog.Close;
-
-// src/ui/button.tsx
-var React6 = __toESM(require("react"), 1);
-var import_radix_ui5 = require("radix-ui");
-var import_jsx_runtime12 = require("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",
-  {
-    variants: {
-      variant: {
-        default: "bg-primary text-primary-foreground hover:opacity-90",
-        outline: "border border-border bg-background text-foreground shadow-sm hover:bg-muted/80",
-        ghost: "min-w-0 px-3 py-2 text-foreground hover:bg-muted/50"
-      },
-      size: {
-        default: "h-9",
-        sm: "h-8 min-w-[64px] px-2 py-1.5 text-sm"
-      }
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default"
-    }
-  }
-);
-var Button = React6.forwardRef(
-  ({ className, variant, size, asChild = false, ...props }, ref) => {
-    const Comp = asChild ? import_radix_ui5.Slot.Root : "button";
-    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
-      Comp,
-      {
-        ref,
-        "data-slot": "button",
-        className: cn(buttonVariants({ variant, size, className })),
-        ...props
-      }
-    );
-  }
-);
-Button.displayName = "Button";
+DialogDescription.displayName = import_radix_ui5.Dialog.Description.displayName;
+var DialogClose = import_radix_ui5.Dialog.Close;
 
 // src/ui/link-modal/DestinationBreadcrumb.tsx
-var import_jsx_runtime13 = require("react/jsx-runtime");
+var import_jsx_runtime14 = require("react/jsx-runtime");
 function DestinationBreadcrumb({ pageTitle, sectionLabel }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex w-full flex-col gap-2", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("p", { className: "text-sm font-medium text-foreground", children: "Destination" }),
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex items-center gap-3", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(IconFile, { className: "shrink-0 text-foreground", "aria-hidden": true }),
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "text-sm font-medium leading-none text-foreground", children: pageTitle })
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex w-full flex-col gap-2", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("p", { className: "text-sm font-medium text-foreground", children: "Destination" }),
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex items-center gap-3", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(IconFile, { className: "shrink-0 text-foreground", "aria-hidden": true }),
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "text-sm font-medium leading-none text-foreground", children: pageTitle })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(IconArrowRight, { className: "shrink-0 text-muted-foreground", "aria-hidden": true }),
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex min-w-0 flex-1 items-center gap-2", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(IconSection, { className: "shrink-0 text-foreground", "aria-hidden": true }),
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "truncate text-sm font-medium leading-none text-foreground", children: sectionLabel })
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(IconArrowRight, { className: "shrink-0 text-muted-foreground", "aria-hidden": true }),
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex min-w-0 flex-1 items-center gap-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(IconSection, { className: "shrink-0 text-foreground", "aria-hidden": true }),
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "truncate text-sm font-medium leading-none text-foreground", children: sectionLabel })
       ] })
     ] })
   ] });
 }
 
 // src/ui/link-modal/SectionTreeItem.tsx
-var import_jsx_runtime14 = require("react/jsx-runtime");
+var import_jsx_runtime15 = require("react/jsx-runtime");
 function SectionTreeItem({ section, onSelect, selected }) {
   const interactive = Boolean(onSelect);
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex h-9 w-full items-end pl-3", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "flex h-9 w-full items-end pl-3", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
       "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__ */ (0, import_jsx_runtime14.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
       "div",
       {
         role: interactive ? "button" : void 0,
@@ -5131,8 +5305,8 @@ function SectionTreeItem({ section, onSelect, selected }) {
           interactive && selected && "border-primary"
         ),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(IconSection, { className: "shrink-0 text-foreground", "aria-hidden": true }),
-          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "truncate text-sm font-normal leading-5 text-foreground", children: section.label })
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(IconSection, { className: "shrink-0 text-foreground", "aria-hidden": true }),
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "truncate text-sm font-normal leading-5 text-foreground", children: section.label })
         ]
       }
     )
@@ -5140,11 +5314,11 @@ function SectionTreeItem({ section, onSelect, selected }) {
 }
 function SectionPickerList({ sections, onSelect }) {
   if (sections.length === 0) {
-    return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("p", { className: "text-sm text-muted-foreground", children: "No sections found on this page." });
+    return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("p", { className: "text-sm text-muted-foreground", children: "No sections found on this page." });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex flex-col gap-1", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("p", { className: "text-sm text-muted-foreground", children: "Pick a section this link should scroll to." }),
-    sections.map((section) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(SectionTreeItem, { section, onSelect }, section.id))
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "flex flex-col gap-1", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("p", { className: "text-sm text-muted-foreground", children: "Pick a section this link should scroll to." }),
+    sections.map((section) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(SectionTreeItem, { section, onSelect }, section.id))
   ] });
 }
 
@@ -5152,11 +5326,11 @@ function SectionPickerList({ sections, onSelect }) {
 var import_react4 = require("react");
 
 // src/ui/input.tsx
-var React7 = __toESM(require("react"), 1);
-var import_jsx_runtime15 = require("react/jsx-runtime");
-var Input = React7.forwardRef(
+var React8 = __toESM(require("react"), 1);
+var import_jsx_runtime16 = require("react/jsx-runtime");
+var Input = React8.forwardRef(
   ({ className, type, ...props }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
       "input",
       {
         type,
@@ -5175,9 +5349,9 @@ Input.displayName = "Input";
 
 // src/ui/label.tsx
 var import_radix_ui6 = require("radix-ui");
-var import_jsx_runtime16 = require("react/jsx-runtime");
+var import_jsx_runtime17 = require("react/jsx-runtime");
 function Label({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
     import_radix_ui6.Label.Root,
     {
       "data-slot": "label",
@@ -5188,9 +5362,9 @@ function Label({ className, ...props }) {
 }
 
 // src/ui/link-modal/UrlOrPageInput.tsx
-var import_jsx_runtime17 = require("react/jsx-runtime");
+var import_jsx_runtime18 = require("react/jsx-runtime");
 function FieldChevron({ onClick }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
     "button",
     {
       type: "button",
@@ -5198,7 +5372,7 @@ function FieldChevron({ onClick }) {
       onClick,
       "aria-label": "Open page list",
       tabIndex: -1,
-      children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(IconChevronDown, {})
+      children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(IconChevronDown, {})
     }
   );
 }
@@ -5237,12 +5411,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__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "flex w-full flex-col gap-2 p-0", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Label, { htmlFor: inputId, className: cn(urlError && "text-destructive"), children: "Destination" }),
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "relative w-full", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { "data-ohw-link-field": true, className: fieldClassName, children: [
-        selectedPage ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "flex shrink-0 items-center pr-2", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(IconFile, { className: "text-foreground", "aria-hidden": true }) }) : null,
-        readOnly ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "min-w-0 flex-1 truncate text-sm leading-5 text-foreground", children: selectedPage?.title ?? value }) : /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "flex w-full flex-col gap-2 p-0", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Label, { htmlFor: inputId, className: cn(urlError && "text-destructive"), children: "Destination" }),
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "relative w-full", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { "data-ohw-link-field": true, className: fieldClassName, children: [
+        selectedPage ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "flex shrink-0 items-center pr-2", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(IconFile, { className: "text-foreground", "aria-hidden": true }) }) : null,
+        readOnly ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "min-w-0 flex-1 truncate text-sm leading-5 text-foreground", children: selectedPage?.title ?? value }) : /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
           Input,
           {
             ref: inputRef,
@@ -5261,7 +5435,7 @@ function UrlOrPageInput({
             )
           }
         ),
-        selectedPage && !readOnly ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+        selectedPage && !readOnly ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
           "button",
           {
             type: "button",
@@ -5269,26 +5443,26 @@ function UrlOrPageInput({
             onMouseDown: clearSelection,
             "aria-label": "Clear selected page",
             tabIndex: -1,
-            children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(IconX, { "aria-hidden": true })
+            children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(IconX, { "aria-hidden": true })
           }
         ) : null,
-        !readOnly ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(FieldChevron, { onClick: toggleDropdown }) : null
+        !readOnly ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(FieldChevron, { onClick: toggleDropdown }) : null
       ] }),
-      dropdownOpen && !readOnly && filteredPages.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+      dropdownOpen && !readOnly && filteredPages.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
         "div",
         {
           "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__ */ (0, import_jsx_runtime17.jsxs)(
+          children: filteredPages.map((page) => /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
             "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__ */ (0, import_jsx_runtime17.jsx)(IconFile, { className: "shrink-0", "aria-hidden": true }),
-                /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "truncate", children: page.title })
+                /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(IconFile, { className: "shrink-0", "aria-hidden": true }),
+                /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "truncate", children: page.title })
               ]
             },
             page.path
@@ -5296,7 +5470,7 @@ function UrlOrPageInput({
         }
       ) : null
     ] }),
-    urlError ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("p", { className: "text-sm font-medium text-destructive", children: urlError }) : null
+    urlError ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("p", { className: "text-sm font-medium text-destructive", children: urlError }) : null
   ] });
 }
 
@@ -5464,7 +5638,7 @@ function useLinkModalState({
 }
 
 // src/ui/link-modal/LinkEditorPanel.tsx
-var import_jsx_runtime18 = require("react/jsx-runtime");
+var import_jsx_runtime19 = require("react/jsx-runtime");
 function LinkEditorPanel({
   open = true,
   mode = "create",
@@ -5488,25 +5662,25 @@ function LinkEditorPanel({
     onSubmit
   });
   const isCancel = state.secondaryLabel === "Cancel";
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_jsx_runtime18.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(DialogClose, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_jsx_runtime19.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(DialogClose, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
       "button",
       {
         type: "button",
         className: "absolute right-[9px] top-[9px] rounded-sm p-1.5 text-foreground hover:bg-muted/50",
         "aria-label": "Close",
-        children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(IconX, { "aria-hidden": true })
+        children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(IconX, { "aria-hidden": true })
       }
     ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(DialogHeader, { className: "w-full gap-1.5 p-6 pr-12", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(DialogTitle, { className: "m-0 w-full break-words", children: state.title }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "flex w-full flex-col gap-3 px-6 pb-8 pt-1", children: [
-      state.showBreadcrumb && state.selectedPage && state.selectedSection ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(DialogHeader, { className: "w-full gap-1.5 p-6 pr-12", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(DialogTitle, { className: "m-0 w-full break-words", children: state.title }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "flex w-full flex-col gap-3 px-6 pb-8 pt-1", children: [
+      state.showBreadcrumb && state.selectedPage && state.selectedSection ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
         DestinationBreadcrumb,
         {
           pageTitle: state.selectedPage.title,
           sectionLabel: state.selectedSection.label
         }
-      ) : /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+      ) : /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
         UrlOrPageInput,
         {
           value: state.searchValue,
@@ -5519,18 +5693,18 @@ function LinkEditorPanel({
           urlError: state.urlError
         }
       ),
-      state.showChooseSection ? /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "flex flex-col justify-center gap-2", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Button, { type: "button", variant: "outline", className: "w-fit cursor-pointer", size: "sm", onClick: state.handleChooseSection, children: "Choose a section" }),
-        /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "flex items-center gap-1 text-sm text-muted-foreground", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(IconInfo, { className: "shrink-0", "aria-hidden": true }),
-          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { children: "Pick a section this link should scroll to." })
+      state.showChooseSection ? /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "flex flex-col justify-center gap-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Button, { type: "button", variant: "outline", className: "w-fit cursor-pointer", size: "sm", onClick: state.handleChooseSection, children: "Choose a section" }),
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "flex items-center gap-1 text-sm text-muted-foreground", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(IconInfo, { className: "shrink-0", "aria-hidden": true }),
+          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { children: "Pick a section this link should scroll to." })
         ] })
       ] }) : null,
-      state.showSectionPicker ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(SectionPickerList, { sections: state.activeSections, onSelect: state.handleSectionSelect }) : null,
-      state.showSectionRow && state.selectedSection ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(SectionTreeItem, { section: state.selectedSection, selected: true }) : null
+      state.showSectionPicker ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(SectionPickerList, { sections: state.activeSections, onSelect: state.handleSectionSelect }) : null,
+      state.showSectionRow && state.selectedSection ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(SectionTreeItem, { section: state.selectedSection, selected: true }) : null
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(DialogFooter, { className: "w-full px-6 pb-6", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(DialogFooter, { className: "w-full px-6 pb-6", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
         Button,
         {
           type: "button",
@@ -5545,7 +5719,7 @@ function LinkEditorPanel({
           children: state.secondaryLabel
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
         Button,
         {
           type: "button",
@@ -5564,7 +5738,7 @@ function LinkEditorPanel({
 }
 
 // src/ui/link-modal/LinkPopover.tsx
-var import_jsx_runtime19 = require("react/jsx-runtime");
+var import_jsx_runtime20 = require("react/jsx-runtime");
 function LinkPopover({
   open = true,
   panelRef,
@@ -5572,14 +5746,14 @@ function LinkPopover({
   onClose,
   ...editorProps
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
     Dialog2,
     {
       open,
       onOpenChange: (next) => {
         if (!next) onClose?.();
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
         DialogContent,
         {
           ref: panelRef,
@@ -5589,7 +5763,7 @@ function LinkPopover({
           "data-ohw-bridge": "",
           showCloseButton: false,
           className: "gap-0 p-0 w-full md:w-md pointer-events-auto",
-          children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(LinkEditorPanel, { ...editorProps, open, onClose })
+          children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(LinkEditorPanel, { ...editorProps, open, onClose })
         }
       )
     }
@@ -5655,7 +5829,7 @@ function shouldUseDevFixtures() {
 }
 
 // src/ui/badge.tsx
-var import_jsx_runtime20 = require("react/jsx-runtime");
+var import_jsx_runtime21 = require("react/jsx-runtime");
 var badgeVariants = cva(
   "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
   {
@@ -5673,12 +5847,12 @@ var badgeVariants = cva(
   }
 );
 function Badge({ className, variant, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: cn(badgeVariants({ variant }), className), ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: cn(badgeVariants({ variant }), className), ...props });
 }
 
 // src/OhhwellsBridge.tsx
-var import_lucide_react3 = require("lucide-react");
-var import_jsx_runtime21 = require("react/jsx-runtime");
+var import_lucide_react4 = require("lucide-react");
+var import_jsx_runtime22 = require("react/jsx-runtime");
 var PRIMARY2 = "#0885FE";
 var IMAGE_FADE_MS = 300;
 function runOpacityFade(el, onDone) {
@@ -5852,7 +6026,7 @@ function mountSchedulingWidget(insertAfter, notifyOnConnect = false, scheduleId,
   const root = (0, import_client.createRoot)(container);
   (0, import_react_dom.flushSync)(() => {
     root.render(
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
         SchedulingWidget,
         {
           notifyOnConnect,
@@ -5925,6 +6099,9 @@ function collectEditableNodes() {
       const url = raw.replace(/^url\(['"]?/, "").replace(/['"]?\)$/, "");
       return { key: el.dataset.ohwKey ?? "", type: "bg-image", text: url };
     }
+    if (el.dataset.ohwEditable === "video") {
+      return { key: el.dataset.ohwKey ?? "", type: "video", text: getVideoEl(el)?.src ?? "" };
+    }
     if (el.dataset.ohwEditable === "link") {
       return { key: el.dataset.ohwKey ?? "", type: "link", text: getLinkHref(el) };
     }
@@ -5939,8 +6116,62 @@ function collectEditableNodes() {
     if (!key) return;
     nodes.push({ key, type: "link", text: getLinkHref(el) });
   });
+  document.querySelectorAll('[data-ohw-editable="video"]').forEach((el) => {
+    const key = el.dataset.ohwKey ?? "";
+    const video = getVideoEl(el);
+    if (!key || !video) return;
+    nodes.push({ key: `${key}${VIDEO_AUTOPLAY_SUFFIX}`, type: "video-setting", text: String(video.autoplay) });
+    nodes.push({ key: `${key}${VIDEO_MUTED_SUFFIX}`, type: "video-setting", text: String(video.muted) });
+  });
   return nodes;
 }
+function isMediaEditable(el) {
+  const t = el.dataset.ohwEditable;
+  return t === "image" || t === "bg-image" || t === "video";
+}
+var MEDIA_SELECTOR = '[data-ohw-editable="image"], [data-ohw-editable="bg-image"], [data-ohw-editable="video"]';
+var NON_MEDIA_SELECTOR = '[data-ohw-editable]:not([data-ohw-editable="image"]):not([data-ohw-editable="bg-image"]):not([data-ohw-editable="video"])';
+function getVideoEl(el) {
+  return el instanceof HTMLVideoElement ? el : el.querySelector("video");
+}
+var VIDEO_AUTOPLAY_SUFFIX = "__ohw_autoplay";
+var VIDEO_MUTED_SUFFIX = "__ohw_muted";
+function isBackgroundVideo(video) {
+  return video.autoplay && video.muted;
+}
+function syncVideoPlayback(video) {
+  const background = isBackgroundVideo(video);
+  video.controls = !background;
+  if (video.autoplay) void video.play().catch(() => {
+  });
+  else video.pause();
+}
+function applyVideoSrc(video, url) {
+  const { autoplay, muted } = video;
+  video.src = url;
+  video.loop = true;
+  video.playsInline = true;
+  video.autoplay = autoplay;
+  video.muted = muted;
+  video.load();
+  syncVideoPlayback(video);
+}
+function applyVideoSettingNode(key, val) {
+  const isAutoplay = key.endsWith(VIDEO_AUTOPLAY_SUFFIX);
+  const isMuted = key.endsWith(VIDEO_MUTED_SUFFIX);
+  if (!isAutoplay && !isMuted) return false;
+  const suffixLen = (isAutoplay ? VIDEO_AUTOPLAY_SUFFIX : VIDEO_MUTED_SUFFIX).length;
+  const baseKey = key.slice(0, key.length - suffixLen);
+  const on = val === "true";
+  document.querySelectorAll(`[data-ohw-key="${baseKey}"]`).forEach((el) => {
+    const video = getVideoEl(el);
+    if (!video) return;
+    if (isAutoplay) video.autoplay = on;
+    else video.muted = on;
+    syncVideoPlayback(video);
+  });
+  return true;
+}
 function applyLinkByKey(key, val) {
   document.querySelectorAll(`[data-ohw-key="${key}"]`).forEach((el) => {
     if (el.dataset.ohwEditable === "link") applyLinkHref(el, val);
@@ -6240,7 +6471,7 @@ function EditGlowChrome({
   dragDisabled = false
 }) {
   const GAP = 6;
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
     "div",
     {
       ref: elRef,
@@ -6255,7 +6486,7 @@ function EditGlowChrome({
         zIndex: 2147483646
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
           "div",
           {
             style: {
@@ -6268,7 +6499,7 @@ function EditGlowChrome({
             }
           }
         ),
-        reorderHrefKey && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+        reorderHrefKey && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
           "div",
           {
             "data-ohw-drag-handle-container": "",
@@ -6280,7 +6511,7 @@ function EditGlowChrome({
               transform: "translate(calc(-100% - 7px), -50%)",
               pointerEvents: dragDisabled ? "none" : "auto"
             },
-            children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
               DragHandle,
               {
                 "aria-label": `Reorder ${reorderHrefKey}`,
@@ -6384,7 +6615,7 @@ function FloatingToolbar({
   onEditLink
 }) {
   const { top, left, transform } = calcToolbarPos(rect, parentScroll, 330);
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
     "div",
     {
       ref: elRef,
@@ -6405,12 +6636,12 @@ function FloatingToolbar({
         fontFamily: "sans-serif",
         pointerEvents: "auto"
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(CustomToolbar, { children: [
-        TOOLBAR_GROUPS.map((btns, gi) => /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_react6.default.Fragment, { children: [
-          gi > 0 && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(CustomToolbarDivider, {}),
+      children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(CustomToolbar, { children: [
+        TOOLBAR_GROUPS.map((btns, gi) => /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_react6.default.Fragment, { children: [
+          gi > 0 && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(CustomToolbarDivider, {}),
           btns.map((btn) => {
             const isActive = activeCommands.has(btn.cmd);
-            return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+            return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
               CustomToolbarButton,
               {
                 title: btn.title,
@@ -6419,7 +6650,7 @@ function FloatingToolbar({
                   e.preventDefault();
                   onCommand(btn.cmd);
                 },
-                children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+                children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
                   "svg",
                   {
                     width: "16",
@@ -6440,7 +6671,7 @@ function FloatingToolbar({
             );
           })
         ] }, gi)),
-        showEditLink ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+        showEditLink ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
           CustomToolbarButton,
           {
             type: "button",
@@ -6454,7 +6685,7 @@ function FloatingToolbar({
               e.preventDefault();
               e.stopPropagation();
             },
-            children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_lucide_react3.Link, { className: "size-4 shrink-0", "aria-hidden": true })
+            children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_lucide_react4.Link, { className: "size-4 shrink-0", "aria-hidden": true })
           }
         ) : null
       ] })
@@ -6471,7 +6702,7 @@ function StateToggle({
   states,
   onStateChange
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
     ToggleGroup,
     {
       "data-ohw-state-toggle": "",
@@ -6485,7 +6716,7 @@ function StateToggle({
         left: rect.right - 8,
         transform: "translateX(-100%)"
       },
-      children: states.map((state) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(ToggleGroupItem, { value: state, size: "sm", children: state }, state))
+      children: states.map((state) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(ToggleGroupItem, { value: state, size: "sm", children: state }, state))
     }
   );
 }
@@ -6521,7 +6752,10 @@ function OhhwellsBridge() {
       const stylesheet = Object.assign(document.createElement("link"), {
         id: figtreeFontId,
         rel: "stylesheet",
-        href: "https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&display=swap"
+        // Inter is loaded alongside Figtree for the media overlay's Replace button. The bridge
+        // renders inside the customer's document, so it cannot assume any font is present — an
+        // unloaded family would silently fall back to whatever the template happens to use.
+        href: "https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&family=Inter:wght@400;500;600&display=swap"
       });
       document.head.append(preconnect1, preconnect2, stylesheet);
     }
@@ -6561,6 +6795,8 @@ function OhhwellsBridge() {
   const glowElRef = (0, import_react6.useRef)(null);
   const hoveredImageRef = (0, import_react6.useRef)(null);
   const hoveredImageHasTextOverlapRef = (0, import_react6.useRef)(false);
+  const [mediaHover, setMediaHover] = (0, import_react6.useState)(null);
+  const [uploadingRects, setUploadingRects] = (0, import_react6.useState)({});
   const hoveredGapRef = (0, import_react6.useRef)(null);
   const imageUnhoverTimerRef = (0, import_react6.useRef)(null);
   const imageShowTimerRef = (0, import_react6.useRef)(null);
@@ -6642,7 +6878,7 @@ function OhhwellsBridge() {
     }
     hoveredGapRef.current = null;
     setSectionGap(null);
-    postToParent({ type: "ow:image-unhover" });
+    setMediaHover(null);
     postToParent({ type: "ow:link-modal-lock", locked: true });
     const html = document.documentElement;
     const body = document.body;
@@ -6886,7 +7122,7 @@ function OhhwellsBridge() {
     deactivate();
     if (hoveredImageRef.current) {
       hoveredImageRef.current = null;
-      postToParentRef.current({ type: "ow:image-unhover" });
+      setMediaHover(null);
     }
     setToolbarVariant("rich-text");
     siblingHintElRef.current = null;
@@ -6929,6 +7165,7 @@ function OhhwellsBridge() {
       const imageLoads = [];
       for (const [key, val] of Object.entries(content)) {
         if (key === "__ohw_sections") continue;
+        if (applyVideoSettingNode(key, val)) continue;
         document.querySelectorAll(`[data-ohw-key="${key}"]`).forEach((el) => {
           if (el.dataset.ohwEditable === "image") {
             const img = el instanceof HTMLImageElement ? el : el.querySelector("img");
@@ -6942,6 +7179,15 @@ function OhhwellsBridge() {
           } else if (el.dataset.ohwEditable === "bg-image") {
             const next = `url('${val}')`;
             if (el.style.backgroundImage !== next) el.style.backgroundImage = next;
+          } else if (el.dataset.ohwEditable === "video") {
+            const video = getVideoEl(el);
+            if (video && video.src !== val) {
+              applyVideoSrc(video, val);
+              imageLoads.push(new Promise((resolve) => {
+                video.onloadeddata = () => resolve();
+                video.onerror = () => resolve();
+              }));
+            }
           } else if (el.dataset.ohwEditable === "link") {
             applyLinkHref(el, val);
           } else if (el.innerHTML !== val) {
@@ -6990,6 +7236,7 @@ function OhhwellsBridge() {
       try {
         for (const [key, val] of Object.entries(content)) {
           if (key === "__ohw_sections") continue;
+          if (applyVideoSettingNode(key, val)) continue;
           document.querySelectorAll(`[data-ohw-key="${key}"]`).forEach((el) => {
             if (el.dataset.ohwEditable === "image") {
               const img = el instanceof HTMLImageElement ? el : el.querySelector("img");
@@ -6997,6 +7244,9 @@ function OhhwellsBridge() {
             } else if (el.dataset.ohwEditable === "bg-image") {
               const next = `url('${val}')`;
               if (el.style.backgroundImage !== next) el.style.backgroundImage = next;
+            } else if (el.dataset.ohwEditable === "video") {
+              const video = getVideoEl(el);
+              if (video && video.src !== val) applyVideoSrc(video, val);
             } else if (el.dataset.ohwEditable === "link") {
               applyLinkHref(el, val);
             } else if (el.innerHTML !== val) {
@@ -7100,8 +7350,9 @@ function OhhwellsBridge() {
       [data-ohw-editable] {
         display: block;
       }
-      [data-ohw-editable]:not([contenteditable]):not([data-ohw-editable="image"]):not([data-ohw-editable="bg-image"]) { cursor: text !important; }
+      [data-ohw-editable]:not([contenteditable]):not([data-ohw-editable="image"]):not([data-ohw-editable="bg-image"]):not([data-ohw-editable="video"]) { cursor: text !important; }
       [data-ohw-editable="image"], [data-ohw-editable="image"] *,
+      [data-ohw-editable="video"], [data-ohw-editable="video"] *,
       [data-ohw-editable="bg-image"], [data-ohw-editable="bg-image"] * { cursor: pointer !important; }
       [data-ohw-editable="link"], [data-ohw-editable="link"] * { cursor: pointer !important; }
       [data-ohw-hovered]:not([contenteditable]):not([data-ohw-href-key]) {
@@ -7168,10 +7419,10 @@ function OhhwellsBridge() {
           });
           return;
         }
-        if (editable.dataset.ohwEditable === "image" || editable.dataset.ohwEditable === "bg-image") {
+        if (isMediaEditable(editable)) {
           e.preventDefault();
           e.stopPropagation();
-          postToParentRef.current({ type: "ow:image-pick", key: editable.dataset.ohwKey ?? "" });
+          postToParentRef.current({ type: "ow:image-pick", key: editable.dataset.ohwKey ?? "", elementType: editable.dataset.ohwEditable ?? "image" });
           return;
         }
         const hrefCtx = getHrefKeyFromElement(editable);
@@ -7271,7 +7522,7 @@ function OhhwellsBridge() {
       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")) {
+      if (!isMediaEditable(editable) && !editable.hasAttribute("contenteditable")) {
         const hoverTarget = editable.closest("[data-ohw-href-key]") ?? editable;
         if (hoverTarget.hasAttribute("data-ohw-href-key")) {
           clearHrefKeyHover(hoverTarget);
@@ -7299,7 +7550,7 @@ function OhhwellsBridge() {
       if (!editable) return;
       const related = e.relatedTarget instanceof Element ? e.relatedTarget : null;
       if (related?.closest("[data-ohw-drag-handle-container], [data-ohw-item-interaction]")) return;
-      if (editable.dataset.ohwEditable !== "image" && editable.dataset.ohwEditable !== "bg-image") {
+      if (!isMediaEditable(editable)) {
         const hoverTarget = editable.closest("[data-ohw-href-key]") ?? editable;
         if (hoverTarget.hasAttribute("data-ohw-href-key")) {
           if (!related?.closest("[data-ohw-href-key]")) {
@@ -7345,23 +7596,26 @@ function OhhwellsBridge() {
       }
       return { top, left, width: Math.max(0, right - left), height: Math.max(0, bottom - top) };
     };
-    const postImageHover = (imgEl, isDragOver = false, forceTextOverlap) => {
+    const showImageHover = (imgEl, isDragOver = false, forceTextOverlap) => {
       const r2 = getVisibleRect(imgEl);
       const hasTextOverlap = forceTextOverlap ?? false;
       hoveredImageHasTextOverlapRef.current = hasTextOverlap;
-      postToParentRef.current({
-        type: "ow:image-hover",
+      const video = imgEl.dataset.ohwEditable === "video" ? getVideoEl(imgEl) : null;
+      setMediaHover({
         key: imgEl.dataset.ohwKey ?? "",
         rect: { top: r2.top, left: r2.left, width: r2.width, height: r2.height },
+        elementType: imgEl.dataset.ohwEditable ?? "image",
         hasTextOverlap,
-        ...isDragOver ? { isDragOver: true } : {}
+        isDragOver,
+        ...video ? { videoAutoplay: video.autoplay, videoMuted: video.muted } : {}
       });
       const track = imgEl.closest("[data-ohw-hover-pause]");
       if (track) track.setAttribute("data-ohw-hover-paused", "");
     };
+    const clearImageHover = () => setMediaHover(null);
     const findImageAtPoint = (clientX, clientY, fromParentViewport) => {
       const { x, y } = toProbeCoords(clientX, clientY, fromParentViewport);
-      const images = Array.from(document.querySelectorAll('[data-ohw-editable="image"], [data-ohw-editable="bg-image"]'));
+      const images = Array.from(document.querySelectorAll(MEDIA_SELECTOR));
       const matches = [];
       for (let i = images.length - 1; i >= 0; i--) {
         const el = images[i];
@@ -7377,7 +7631,9 @@ function OhhwellsBridge() {
         if (x >= r2.left && x <= r2.left + r2.width && y >= r2.top && y <= r2.top + r2.height) matches.push(el);
       }
       if (matches.length === 0) return null;
-      const imageTypeMatches = matches.filter((el) => el.dataset.ohwEditable === "image");
+      const imageTypeMatches = matches.filter(
+        (el) => el.dataset.ohwEditable === "image" || el.dataset.ohwEditable === "video"
+      );
       const candidatePool = imageTypeMatches.length > 0 ? imageTypeMatches : matches;
       const smallest = candidatePool.reduce((best, el) => {
         const br = getVisibleRect(best);
@@ -7406,7 +7662,7 @@ function OhhwellsBridge() {
           hoveredImageRef.current = null;
           hoveredImageHasTextOverlapRef.current = false;
           resumeAnimTracks();
-          postToParentRef.current({ type: "ow:image-unhover" });
+          clearImageHover();
         }
         return;
       }
@@ -7418,21 +7674,22 @@ function OhhwellsBridge() {
           if (hoveredImageRef.current) {
             hoveredImageRef.current = null;
             resumeAnimTracks();
-            postToParentRef.current({ type: "ow:image-unhover" });
+            clearImageHover();
           }
           return;
         }
       }
-      if (activeElRef.current) {
+      const imgEl = findImageAtPoint(clientX, clientY, fromParentViewport);
+      const activeEl = activeElRef.current;
+      if (activeEl && (!imgEl || imgEl.contains(activeEl))) {
         if (hoveredImageRef.current) {
           hoveredImageRef.current = null;
           hoveredImageHasTextOverlapRef.current = false;
           resumeAnimTracks();
-          postToParentRef.current({ type: "ow:image-unhover" });
+          clearImageHover();
         }
         return;
       }
-      const imgEl = findImageAtPoint(clientX, clientY, fromParentViewport);
       if (imgEl) {
         const { x, y } = toProbeCoords(clientX, clientY, fromParentViewport);
         const topEl = document.elementFromPoint(x, y);
@@ -7440,7 +7697,7 @@ function OhhwellsBridge() {
           if (hoveredImageRef.current) {
             hoveredImageRef.current = null;
             resumeAnimTracks();
-            postToParentRef.current({ type: "ow:image-unhover" });
+            clearImageHover();
           }
           return;
         }
@@ -7449,13 +7706,13 @@ function OhhwellsBridge() {
             hoveredImageRef.current = null;
             hoveredImageHasTextOverlapRef.current = false;
             resumeAnimTracks();
-            postToParentRef.current({ type: "ow:image-unhover" });
+            clearImageHover();
           }
           return;
         }
         const isStateCardImage = !!imgEl.closest("[data-ohw-editable-state]");
         const textEditable = Array.from(
-          document.querySelectorAll('[data-ohw-editable]:not([data-ohw-editable="image"]):not([data-ohw-editable="bg-image"])')
+          document.querySelectorAll(NON_MEDIA_SELECTOR)
         ).find((el) => {
           const er = el.getBoundingClientRect();
           return x >= er.left && x <= er.right && y >= er.top && y <= er.bottom;
@@ -7474,14 +7731,14 @@ function OhhwellsBridge() {
               hoveredImageRef.current = null;
               hoveredImageHasTextOverlapRef.current = false;
               resumeAnimTracks();
-              postToParentRef.current({ type: "ow:image-unhover" });
+              clearImageHover();
             }
             return;
           }
           if (isStateCardImage) {
             if (imgEl !== hoveredImageRef.current || !hoveredImageHasTextOverlapRef.current) {
               hoveredImageRef.current = imgEl;
-              postImageHover(imgEl, isDragOver, true);
+              showImageHover(imgEl, isDragOver, true);
             }
             document.querySelectorAll("[data-ohw-hovered]").forEach((el) => el.removeAttribute("data-ohw-hovered"));
             if (textEditable && !isInsideNavigationItem(textEditable)) {
@@ -7493,7 +7750,7 @@ function OhhwellsBridge() {
             hoveredImageRef.current = null;
             hoveredImageHasTextOverlapRef.current = false;
             resumeAnimTracks();
-            postToParentRef.current({ type: "ow:image-unhover" });
+            clearImageHover();
           }
           document.querySelectorAll("[data-ohw-hovered]").forEach((el) => el.removeAttribute("data-ohw-hovered"));
           if (textEditable && !isInsideNavigationItem(textEditable)) {
@@ -7505,7 +7762,7 @@ function OhhwellsBridge() {
           if (hoveredImageRef.current) {
             hoveredImageRef.current = null;
             resumeAnimTracks();
-            postToParentRef.current({ type: "ow:image-unhover" });
+            clearImageHover();
           }
           document.querySelectorAll("[data-ohw-hovered]").forEach((el) => el.removeAttribute("data-ohw-hovered"));
           return;
@@ -7513,9 +7770,9 @@ function OhhwellsBridge() {
         document.querySelectorAll("[data-ohw-hovered]").forEach((el) => el.removeAttribute("data-ohw-hovered"));
         if (imgEl !== hoveredImageRef.current || hoveredImageHasTextOverlapRef.current) {
           hoveredImageRef.current = imgEl;
-          postImageHover(imgEl, isDragOver);
+          showImageHover(imgEl, isDragOver);
         } else if (isDragOver) {
-          postImageHover(imgEl, true);
+          showImageHover(imgEl, true);
         }
       } else {
         const inIframeView = clientX >= 0 && clientY >= 0 && clientX <= window.innerWidth && clientY <= window.innerHeight;
@@ -7532,11 +7789,11 @@ function OhhwellsBridge() {
           hoveredImageRef.current = null;
           hoveredImageHasTextOverlapRef.current = false;
           resumeAnimTracks();
-          postToParentRef.current({ type: "ow:image-unhover" });
+          clearImageHover();
         }
         const { x, y } = toProbeCoords(clientX, clientY, fromParentViewport);
         const textEl = Array.from(
-          document.querySelectorAll('[data-ohw-editable]:not([data-ohw-editable="image"]):not([data-ohw-editable="bg-image"])')
+          document.querySelectorAll(NON_MEDIA_SELECTOR)
         ).find((el) => {
           const er = el.getBoundingClientRect();
           return x >= er.left && x <= er.right && y >= er.top && y <= er.bottom;
@@ -7645,7 +7902,7 @@ function OhhwellsBridge() {
       if (hoveredImageRef.current !== el) {
         hoveredImageRef.current = el;
         const isStateCard = !!el.closest("[data-ohw-editable-state]");
-        postImageHover(el, true, isStateCard ? true : void 0);
+        showImageHover(el, true, isStateCard ? true : void 0);
       }
     };
     const handleDragLeave = (e) => {
@@ -7653,7 +7910,7 @@ function OhhwellsBridge() {
       if (imgEl) return;
       hoveredImageRef.current = null;
       resumeAnimTracks();
-      postToParentRef.current({ type: "ow:image-unhover" });
+      clearImageHover();
     };
     const handleDrop = (e) => {
       e.preventDefault();
@@ -7661,7 +7918,9 @@ function OhhwellsBridge() {
       if (!el) return;
       const file = e.dataTransfer?.files?.[0];
       if (file) {
-        if (file.type.startsWith("image/")) {
+        const wantsVideo = el.dataset.ohwEditable === "video";
+        const accepted = wantsVideo ? file.type.startsWith("video/") : file.type.startsWith("image/");
+        if (accepted) {
           const key = el.dataset.ohwKey ?? "";
           const { name, type: mimeType } = file;
           const r2 = el.getBoundingClientRect();
@@ -7675,7 +7934,7 @@ function OhhwellsBridge() {
       }
       hoveredImageRef.current = null;
       resumeAnimTracks();
-      postToParentRef.current({ type: "ow:image-unhover" });
+      clearImageHover();
     };
     const handleImageUrl = (e) => {
       if (e.data?.type !== "ow:image-url") return;
@@ -7693,7 +7952,11 @@ function OhhwellsBridge() {
           }
         });
         hoveredImageRef.current = null;
-        postToParentRef.current({ type: "ow:image-loaded", key });
+        setUploadingRects((prev) => {
+          const entry = prev[key];
+          if (!entry || entry.fadingOut) return prev;
+          return { ...prev, [key]: { ...entry, fadingOut: true } };
+        });
       };
       let found = false;
       document.querySelectorAll(`[data-ohw-key="${key}"]`).forEach((el) => {
@@ -7728,6 +7991,19 @@ function OhhwellsBridge() {
               requestAnimationFrame(() => onReady());
             }
           }
+        } else if (el.dataset.ohwEditable === "video") {
+          const video = getVideoEl(el);
+          if (video) {
+            found = true;
+            const onReady = () => {
+              video.onloadeddata = null;
+              video.onerror = null;
+              notify();
+            };
+            video.onloadeddata = onReady;
+            video.onerror = onReady;
+            applyVideoSrc(video, url);
+          }
         }
       });
       if (!found) notify();
@@ -7794,12 +8070,16 @@ function OhhwellsBridge() {
           sectionsJson = val;
           continue;
         }
+        if (applyVideoSettingNode(key, val)) continue;
         document.querySelectorAll(`[data-ohw-key="${key}"]`).forEach((el) => {
           if (el.dataset.ohwEditable === "image") {
             const img = el instanceof HTMLImageElement ? el : el.querySelector("img");
             if (img) img.src = val;
           } else if (el.dataset.ohwEditable === "bg-image") {
             el.style.backgroundImage = `url('${val}')`;
+          } else if (el.dataset.ohwEditable === "video") {
+            const video = getVideoEl(el);
+            if (video && video.src !== val) applyVideoSrc(video, val);
           } else if (el.dataset.ohwEditable === "link") {
             applyLinkHref(el, val);
           } else {
@@ -7912,12 +8192,9 @@ function OhhwellsBridge() {
       if (hoveredImageRef.current) {
         const el = hoveredImageRef.current;
         const r2 = el.getBoundingClientRect();
-        postToParentRef.current({
-          type: "ow:image-hover",
-          key: el.dataset.ohwKey ?? "",
-          rect: { top: r2.top, left: r2.left, width: r2.width, height: r2.height },
-          hasTextOverlap: hoveredImageHasTextOverlapRef.current
-        });
+        setMediaHover(
+          (prev) => prev ? { ...prev, rect: { top: r2.top, left: r2.left, width: r2.width, height: r2.height } } : prev
+        );
       }
     };
     const handleSave = (e) => {
@@ -8006,19 +8283,39 @@ function OhhwellsBridge() {
     refreshActiveCommandsRef.current = handleSelectionChange;
     const handleDocMouseLeave = () => {
       hoveredImageRef.current = null;
+      setMediaHover(null);
       document.querySelectorAll("[data-ohw-state-hovered]").forEach((el) => el.removeAttribute("data-ohw-state-hovered"));
       document.querySelectorAll("[data-ohw-hovered]").forEach((el) => el.removeAttribute("data-ohw-hovered"));
       activeStateElRef.current = null;
       setToggleState(null);
     };
-    const handleAnimLock = (e) => {
-      if (e.data?.type !== "ow:anim-lock") return;
-      const { key } = e.data;
+    const handleImageUploading = (e) => {
+      if (e.data?.type !== "ow:image-uploading") return;
+      const { key, uploading } = e.data;
+      setUploadingRects((prev) => {
+        if (!uploading) {
+          if (!(key in prev)) return prev;
+          const next = { ...prev };
+          delete next[key];
+          return next;
+        }
+        const el = document.querySelector(`[data-ohw-key="${key}"]`);
+        if (!el) return prev;
+        const r2 = getVisibleRect(el);
+        return {
+          ...prev,
+          [key]: { rect: { top: r2.top, left: r2.left, width: r2.width, height: r2.height } }
+        };
+      });
       document.querySelectorAll(`[data-ohw-key="${key}"]`).forEach((el) => {
         const track = el.closest("[data-ohw-hover-pause]");
-        if (track) {
+        if (!track) return;
+        if (uploading) {
           uploadLockedTracks.add(track);
           track.setAttribute("data-ohw-hover-paused", "");
+        } else {
+          uploadLockedTracks.delete(track);
+          track.removeAttribute("data-ohw-hover-paused");
         }
       });
     };
@@ -8060,7 +8357,7 @@ function OhhwellsBridge() {
       if (e.data?.type !== "ow:click-at") return;
       const { clientX, clientY } = e.data;
       const allImages = Array.from(
-        document.querySelectorAll('[data-ohw-editable="image"], [data-ohw-editable="bg-image"]')
+        document.querySelectorAll(MEDIA_SELECTOR)
       ).filter((el) => !!el.closest("[data-ohw-editable-state]"));
       const stateCardImage = allImages.find((el) => {
         const ownerCard = el.closest("[data-ohw-editable-state]");
@@ -8075,13 +8372,11 @@ function OhhwellsBridge() {
         return clientX >= r2.left && clientX <= r2.right && clientY >= r2.top && clientY <= r2.bottom;
       });
       if (stateCardImage) {
-        postToParentRef.current({ type: "ow:image-pick", key: stateCardImage.dataset.ohwKey ?? "" });
+        postToParentRef.current({ type: "ow:image-pick", key: stateCardImage.dataset.ohwKey ?? "", elementType: stateCardImage.dataset.ohwEditable ?? "image" });
         return;
       }
       const textEditable = Array.from(
-        document.querySelectorAll(
-          '[data-ohw-editable]:not([data-ohw-editable="image"]):not([data-ohw-editable="bg-image"])'
-        )
+        document.querySelectorAll(NON_MEDIA_SELECTOR)
       ).find((el) => {
         const r2 = el.getBoundingClientRect();
         return clientX >= r2.left && clientX <= r2.right && clientY >= r2.top && clientY <= r2.bottom;
@@ -8109,7 +8404,7 @@ function OhhwellsBridge() {
     window.addEventListener("message", handleClearSchedulingWidget);
     window.addEventListener("message", handleRemoveSchedulingSection);
     window.addEventListener("message", handleImageUrl);
-    window.addEventListener("message", handleAnimLock);
+    window.addEventListener("message", handleImageUploading);
     window.addEventListener("message", handleCanvasHeight);
     window.addEventListener("message", handleParentScroll);
     window.addEventListener("message", handlePointerSync);
@@ -8156,7 +8451,7 @@ function OhhwellsBridge() {
       window.removeEventListener("message", handleClearSchedulingWidget);
       window.removeEventListener("message", handleRemoveSchedulingSection);
       window.removeEventListener("message", handleImageUrl);
-      window.removeEventListener("message", handleAnimLock);
+      window.removeEventListener("message", handleImageUploading);
       window.removeEventListener("message", handleCanvasHeight);
       window.removeEventListener("message", handleParentScroll);
       window.removeEventListener("resize", handleViewportResize);
@@ -8276,12 +8571,68 @@ function OhhwellsBridge() {
   const showEditLink = toolbarShowEditLink;
   const currentSections = sectionsByPath[pathname] ?? [];
   linkPopoverOpenRef.current = linkPopover !== null;
+  const handleMediaReplace = (0, import_react6.useCallback)(
+    (key) => {
+      postToParent({ type: "ow:image-pick", key, elementType: mediaHover?.elementType ?? "image" });
+    },
+    [postToParent, mediaHover?.elementType]
+  );
+  const handleVideoSettingsChange = (0, import_react6.useCallback)(
+    (key, settings) => {
+      document.querySelectorAll(`[data-ohw-key="${key}"]`).forEach((el) => {
+        const video = getVideoEl(el);
+        if (!video) return;
+        if (typeof settings.autoplay === "boolean") video.autoplay = settings.autoplay;
+        if (typeof settings.muted === "boolean") video.muted = settings.muted;
+        syncVideoPlayback(video);
+        postToParent({
+          type: "ow:change",
+          nodes: [
+            { key: `${key}${VIDEO_AUTOPLAY_SUFFIX}`, text: String(video.autoplay) },
+            { key: `${key}${VIDEO_MUTED_SUFFIX}`, text: String(video.muted) }
+          ]
+        });
+        setMediaHover(
+          (prev) => prev && prev.key === key ? { ...prev, videoAutoplay: video.autoplay, videoMuted: video.muted } : prev
+        );
+      });
+    },
+    [postToParent]
+  );
+  const handleMediaFadeOutComplete = (0, import_react6.useCallback)((key) => {
+    setUploadingRects((prev) => {
+      if (!(key in prev)) return prev;
+      const next = { ...prev };
+      delete next[key];
+      return next;
+    });
+  }, []);
   return bridgeRoot ? (0, import_react_dom2.createPortal)(
-    /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_jsx_runtime21.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { ref: attachVisibleViewport, "data-ohw-visible-viewport": "", "aria-hidden": true }),
-      siblingHintRect && !isItemDragging && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(ItemInteractionLayer, { rect: siblingHintRect, state: "sibling-hint" }),
-      hoveredItemRect && !siblingHintRect && !isItemDragging && hoveredItemElRef.current !== selectedElRef.current && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(ItemInteractionLayer, { rect: hoveredItemRect, state: "hover" }),
-      toolbarRect && (toolbarVariant === "link-action" || toolbarVariant === "select-frame") && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_jsx_runtime22.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { ref: attachVisibleViewport, "data-ohw-visible-viewport": "", "aria-hidden": true }),
+      Object.entries(uploadingRects).map(([key, { rect, fadingOut }]) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+        MediaOverlay,
+        {
+          hover: { key, rect, elementType: "image", isDragOver: false, hasTextOverlap: false },
+          isUploading: true,
+          fadingOut,
+          onFadeOutComplete: handleMediaFadeOutComplete,
+          onReplace: handleMediaReplace
+        },
+        `uploading-${key}`
+      )),
+      mediaHover && !(mediaHover.key in uploadingRects) && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+        MediaOverlay,
+        {
+          hover: mediaHover,
+          isUploading: false,
+          onReplace: handleMediaReplace,
+          onVideoSettingsChange: handleVideoSettingsChange
+        }
+      ),
+      siblingHintRect && !isItemDragging && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(ItemInteractionLayer, { rect: siblingHintRect, state: "sibling-hint" }),
+      hoveredItemRect && !siblingHintRect && !isItemDragging && hoveredItemElRef.current !== selectedElRef.current && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(ItemInteractionLayer, { rect: hoveredItemRect, state: "hover" }),
+      toolbarRect && (toolbarVariant === "link-action" || toolbarVariant === "select-frame") && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
         ItemInteractionLayer,
         {
           rect: toolbarRect,
@@ -8292,7 +8643,7 @@ function OhhwellsBridge() {
           dragHandleLabel: reorderHrefKey ? `Reorder ${reorderHrefKey}` : "Reorder item",
           onDragHandleDragStart: handleItemDragStart,
           onDragHandleDragEnd: handleItemDragEnd,
-          toolbar: toolbarVariant === "link-action" && !isItemDragging ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+          toolbar: toolbarVariant === "link-action" && !isItemDragging ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
             ItemActionToolbar,
             {
               onEditLink: openLinkPopoverForSelected,
@@ -8302,8 +8653,8 @@ function OhhwellsBridge() {
           ) : void 0
         }
       ),
-      toolbarRect && toolbarVariant === "rich-text" && /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_jsx_runtime21.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+      toolbarRect && toolbarVariant === "rich-text" && /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_jsx_runtime22.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
           EditGlowChrome,
           {
             rect: toolbarRect,
@@ -8312,7 +8663,7 @@ function OhhwellsBridge() {
             dragDisabled: reorderDragDisabled
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
           FloatingToolbar,
           {
             rect: toolbarRect,
@@ -8325,7 +8676,7 @@ function OhhwellsBridge() {
           }
         )
       ] }),
-      maxBadge && /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+      maxBadge && /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
         "div",
         {
           "data-ohw-max-badge": "",
@@ -8351,7 +8702,7 @@ function OhhwellsBridge() {
           ]
         }
       ),
-      toggleState && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+      toggleState && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
         StateToggle,
         {
           rect: toggleState.rect,
@@ -8360,15 +8711,15 @@ function OhhwellsBridge() {
           onStateChange: handleStateChange
         }
       ),
-      sectionGap && /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+      sectionGap && /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
         "div",
         {
           "data-ohw-section-insert-line": "",
           className: "fixed left-0 w-full z-2147483646 flex items-center pointer-events-none",
           style: { top: sectionGap.y, transform: "translateY(-50%)" },
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "flex-1 bg-primary", style: { height: 3 } }),
-            /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "flex-1 bg-primary", style: { height: 3 } }),
+            /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
               Badge,
               {
                 className: "px-8 py-1 bg-primary hover:bg-primary text-primary-foreground text-xs font-medium shrink-0 rounded-full cursor-pointer pointer-events-auto",
@@ -8381,11 +8732,11 @@ function OhhwellsBridge() {
                 children: "Add Section"
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "flex-1 bg-primary", style: { height: 3 } })
+            /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "flex-1 bg-primary", style: { height: 3 } })
           ]
         }
       ),
-      linkPopover && dialogPortalContainer ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+      linkPopover && dialogPortalContainer ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
         LinkPopover,
         {
           panelRef: linkPopoverPanelRef,
@@ -8401,15 +8752,15 @@ function OhhwellsBridge() {
         },
         `${linkPopover.key}-${pathname}`
       ) : null,
-      sectionGap && /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+      sectionGap && /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
         "div",
         {
           "data-ohw-section-insert-line": "",
           className: "fixed left-0 w-full z-2147483646 flex items-center pointer-events-none",
           style: { top: sectionGap.y, transform: "translateY(-50%)" },
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "flex-1 bg-primary", style: { height: 3 } }),
-            /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "flex-1 bg-primary", style: { height: 3 } }),
+            /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
               Badge,
               {
                 className: "px-8 py-1 bg-primary hover:bg-primary text-primary-foreground text-xs font-medium shrink-0 rounded-full cursor-pointer pointer-events-auto",
@@ -8422,7 +8773,7 @@ function OhhwellsBridge() {
                 children: "Add Section"
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "flex-1 bg-primary", style: { height: 3 } })
+            /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "flex-1 bg-primary", style: { height: 3 } })
           ]
         }
       )