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

package/dist/index.js

@@ -1,7 +1,7 @@
 "use client";
 
 // src/OhhwellsBridge.tsx
-import React8, { useCallback as useCallback3, useEffect as useEffect3, useLayoutEffect as useLayoutEffect2, useRef as useRef3, useState as useState5 } from "react";
+import React9, { useCallback as useCallback3, useEffect as useEffect4, useLayoutEffect as useLayoutEffect2, useRef as useRef4, useState as useState5 } from "react";
 import { createRoot } from "react-dom/client";
 import { flushSync } from "react-dom";
 
@@ -4580,6 +4580,220 @@ function ItemInteractionLayer({
   );
 }
 
+// src/ui/MediaOverlay.tsx
+import * as React6 from "react";
+import { Film, ImageIcon, Pause, Play, Volume2, VolumeX } from "lucide-react";
+
+// src/ui/button.tsx
+import * as React5 from "react";
+import { Slot } from "radix-ui";
+import { jsx as jsx10 } 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",
+  {
+    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 ? Slot.Root : "button";
+    return /* @__PURE__ */ jsx10(
+      Comp,
+      {
+        ref,
+        "data-slot": "button",
+        className: cn(buttonVariants({ variant, size, className })),
+        ...props
+      }
+    );
+  }
+);
+Button.displayName = "Button";
+
+// src/ui/MediaOverlay.tsx
+import { Fragment as Fragment2, jsx as jsx11, jsxs as jsxs5 } from "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__ */ jsx11(
+      "div",
+      {
+        ref: skeletonRef,
+        "data-ohw-bridge": "",
+        "data-ohw-media-overlay": "",
+        "data-ohw-media-skeleton": "",
+        "aria-hidden": true,
+        style: { ...box, pointerEvents: "none" },
+        children: /* @__PURE__ */ jsx11("style", { children: SKELETON_CSS })
+      }
+    );
+  }
+  const settingsBar = isVideo && !hover.isDragOver ? /* @__PURE__ */ jsxs5(
+    "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__ */ jsx11(
+          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__ */ jsx11(Pause, { size: 14 }) : /* @__PURE__ */ jsx11(Play, { size: 14 })
+          }
+        ),
+        /* @__PURE__ */ jsx11(
+          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__ */ jsx11(VolumeX, { size: 14 }) : /* @__PURE__ */ jsx11(Volume2, { size: 14 })
+          }
+        )
+      ]
+    }
+  ) : null;
+  return /* @__PURE__ */ jsxs5(Fragment2, { children: [
+    settingsBar,
+    /* @__PURE__ */ jsx11(
+      "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__ */ jsxs5(
+          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__ */ jsx11(Film, { size: 14 }) : /* @__PURE__ */ jsx11(ImageIcon, { size: 14 }),
+              isVideo ? "Replace video" : "Replace image"
+            ]
+          }
+        )
+      }
+    )
+  ] });
+}
+
 // src/OhhwellsBridge.tsx
 import { createPortal } from "react-dom";
 import { usePathname, useRouter, useSearchParams } from "next/navigation";
@@ -4859,60 +5073,60 @@ function scrollToHashSectionWhenReady(behavior = "smooth") {
 }
 
 // src/ui/dialog.tsx
-import * as React5 from "react";
+import * as React7 from "react";
 import { Dialog as DialogPrimitive } from "radix-ui";
 
 // src/ui/icons.tsx
-import { jsx as jsx10, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx12, jsxs as jsxs6 } from "react/jsx-runtime";
 function IconX({ className, ...props }) {
-  return /* @__PURE__ */ jsxs5("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className, ...props, children: [
-    /* @__PURE__ */ jsx10("path", { d: "M18 6 6 18" }),
-    /* @__PURE__ */ jsx10("path", { d: "m6 6 12 12" })
+  return /* @__PURE__ */ jsxs6("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className, ...props, children: [
+    /* @__PURE__ */ jsx12("path", { d: "M18 6 6 18" }),
+    /* @__PURE__ */ jsx12("path", { d: "m6 6 12 12" })
   ] });
 }
 function IconChevronDown({ className, ...props }) {
-  return /* @__PURE__ */ jsx10("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className, ...props, children: /* @__PURE__ */ jsx10("path", { d: "m6 9 6 6 6-6" }) });
+  return /* @__PURE__ */ jsx12("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className, ...props, children: /* @__PURE__ */ jsx12("path", { d: "m6 9 6 6 6-6" }) });
 }
 function IconFile({ className, ...props }) {
-  return /* @__PURE__ */ jsxs5("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className, ...props, children: [
-    /* @__PURE__ */ jsx10("path", { d: "M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z" }),
-    /* @__PURE__ */ jsx10("path", { d: "M14 2v4a2 2 0 0 0 2 2h4" })
+  return /* @__PURE__ */ jsxs6("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className, ...props, children: [
+    /* @__PURE__ */ jsx12("path", { d: "M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z" }),
+    /* @__PURE__ */ jsx12("path", { d: "M14 2v4a2 2 0 0 0 2 2h4" })
   ] });
 }
 function IconInfo({ className, ...props }) {
-  return /* @__PURE__ */ jsxs5("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className, ...props, children: [
-    /* @__PURE__ */ jsx10("circle", { cx: "12", cy: "12", r: "10" }),
-    /* @__PURE__ */ jsx10("path", { d: "M12 16v-4" }),
-    /* @__PURE__ */ jsx10("path", { d: "M12 8h.01" })
+  return /* @__PURE__ */ jsxs6("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className, ...props, children: [
+    /* @__PURE__ */ jsx12("circle", { cx: "12", cy: "12", r: "10" }),
+    /* @__PURE__ */ jsx12("path", { d: "M12 16v-4" }),
+    /* @__PURE__ */ jsx12("path", { d: "M12 8h.01" })
   ] });
 }
 function IconArrowRight({ className, ...props }) {
-  return /* @__PURE__ */ jsxs5("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className, ...props, children: [
-    /* @__PURE__ */ jsx10("path", { d: "M5 12h14" }),
-    /* @__PURE__ */ jsx10("path", { d: "m12 5 7 7-7 7" })
+  return /* @__PURE__ */ jsxs6("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className, ...props, children: [
+    /* @__PURE__ */ jsx12("path", { d: "M5 12h14" }),
+    /* @__PURE__ */ jsx12("path", { d: "m12 5 7 7-7 7" })
   ] });
 }
 function IconSection({ className, ...props }) {
-  return /* @__PURE__ */ jsxs5("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className, ...props, children: [
-    /* @__PURE__ */ jsx10("rect", { width: "18", height: "7", x: "3", y: "3", rx: "1" }),
-    /* @__PURE__ */ jsx10("rect", { width: "9", height: "7", x: "3", y: "14", rx: "1" }),
-    /* @__PURE__ */ jsx10("rect", { width: "5", height: "7", x: "16", y: "14", rx: "1" })
+  return /* @__PURE__ */ jsxs6("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className, ...props, children: [
+    /* @__PURE__ */ jsx12("rect", { width: "18", height: "7", x: "3", y: "3", rx: "1" }),
+    /* @__PURE__ */ jsx12("rect", { width: "9", height: "7", x: "3", y: "14", rx: "1" }),
+    /* @__PURE__ */ jsx12("rect", { width: "5", height: "7", x: "16", y: "14", rx: "1" })
   ] });
 }
 
 // src/ui/dialog.tsx
-import { jsx as jsx11, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx13, jsxs as jsxs7 } from "react/jsx-runtime";
 function Dialog2({ ...props }) {
-  return /* @__PURE__ */ jsx11(DialogPrimitive.Root, { "data-slot": "dialog", ...props });
+  return /* @__PURE__ */ jsx13(DialogPrimitive.Root, { "data-slot": "dialog", ...props });
 }
 function DialogPortal({ ...props }) {
-  return /* @__PURE__ */ jsx11(DialogPrimitive.Portal, { ...props });
+  return /* @__PURE__ */ jsx13(DialogPrimitive.Portal, { ...props });
 }
 function DialogOverlay({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx11(
+  return /* @__PURE__ */ jsx13(
     DialogPrimitive.Overlay,
     {
       "data-slot": "dialog-overlay",
@@ -4922,11 +5136,11 @@ 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__ */ jsxs6(DialogPortal, { container: container ?? void 0, children: [
-    /* @__PURE__ */ jsx11(DialogOverlay, { className: cn(positionMode, "inset-0") }),
-    /* @__PURE__ */ jsxs6(
+  return /* @__PURE__ */ jsxs7(DialogPortal, { container: container ?? void 0, children: [
+    /* @__PURE__ */ jsx13(DialogOverlay, { className: cn(positionMode, "inset-0") }),
+    /* @__PURE__ */ jsxs7(
       DialogPrimitive.Content,
       {
         ref,
@@ -4942,13 +5156,13 @@ var DialogContent = React5.forwardRef(({ className, children, showCloseButton =
         ...props,
         children: [
           children,
-          showCloseButton ? /* @__PURE__ */ jsx11(
+          showCloseButton ? /* @__PURE__ */ jsx13(
             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__ */ jsx11(IconX, { "aria-hidden": true })
+              children: /* @__PURE__ */ jsx13(IconX, { "aria-hidden": true })
             }
           ) : null
         ]
@@ -4958,12 +5172,12 @@ var DialogContent = React5.forwardRef(({ className, children, showCloseButton =
 });
 DialogContent.displayName = DialogPrimitive.Content.displayName;
 function DialogHeader({ className, ...props }) {
-  return /* @__PURE__ */ jsx11("div", { className: cn("flex flex-col gap-1.5", className), ...props });
+  return /* @__PURE__ */ jsx13("div", { className: cn("flex flex-col gap-1.5", className), ...props });
 }
 function DialogFooter({ className, ...props }) {
-  return /* @__PURE__ */ jsx11("div", { className: cn("flex items-center justify-end gap-2", className), ...props });
+  return /* @__PURE__ */ jsx13("div", { className: cn("flex items-center justify-end gap-2", className), ...props });
 }
-var DialogTitle = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx11(
+var DialogTitle = React7.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx13(
   DialogPrimitive.Title,
   {
     ref,
@@ -4972,7 +5186,7 @@ var DialogTitle = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE
   }
 ));
 DialogTitle.displayName = DialogPrimitive.Title.displayName;
-var DialogDescription = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx11(
+var DialogDescription = React7.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx13(
   DialogPrimitive.Description,
   {
     ref,
@@ -4983,78 +5197,38 @@ var DialogDescription = React5.forwardRef(({ className, ...props }, ref) => /* @
 DialogDescription.displayName = DialogPrimitive.Description.displayName;
 var DialogClose = DialogPrimitive.Close;
 
-// src/ui/button.tsx
-import * as React6 from "react";
-import { Slot } from "radix-ui";
-import { jsx as jsx12 } 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",
-  {
-    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 ? Slot.Root : "button";
-    return /* @__PURE__ */ jsx12(
-      Comp,
-      {
-        ref,
-        "data-slot": "button",
-        className: cn(buttonVariants({ variant, size, className })),
-        ...props
-      }
-    );
-  }
-);
-Button.displayName = "Button";
-
 // src/ui/link-modal/DestinationBreadcrumb.tsx
-import { jsx as jsx13, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx14, jsxs as jsxs8 } from "react/jsx-runtime";
 function DestinationBreadcrumb({ pageTitle, sectionLabel }) {
-  return /* @__PURE__ */ jsxs7("div", { className: "flex w-full flex-col gap-2", children: [
-    /* @__PURE__ */ jsx13("p", { className: "text-sm font-medium text-foreground", children: "Destination" }),
-    /* @__PURE__ */ jsxs7("div", { className: "flex items-center gap-3", children: [
-      /* @__PURE__ */ jsxs7("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ jsx13(IconFile, { className: "shrink-0 text-foreground", "aria-hidden": true }),
-        /* @__PURE__ */ jsx13("span", { className: "text-sm font-medium leading-none text-foreground", children: pageTitle })
+  return /* @__PURE__ */ jsxs8("div", { className: "flex w-full flex-col gap-2", children: [
+    /* @__PURE__ */ jsx14("p", { className: "text-sm font-medium text-foreground", children: "Destination" }),
+    /* @__PURE__ */ jsxs8("div", { className: "flex items-center gap-3", children: [
+      /* @__PURE__ */ jsxs8("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx14(IconFile, { className: "shrink-0 text-foreground", "aria-hidden": true }),
+        /* @__PURE__ */ jsx14("span", { className: "text-sm font-medium leading-none text-foreground", children: pageTitle })
       ] }),
-      /* @__PURE__ */ jsx13(IconArrowRight, { className: "shrink-0 text-muted-foreground", "aria-hidden": true }),
-      /* @__PURE__ */ jsxs7("div", { className: "flex min-w-0 flex-1 items-center gap-2", children: [
-        /* @__PURE__ */ jsx13(IconSection, { className: "shrink-0 text-foreground", "aria-hidden": true }),
-        /* @__PURE__ */ jsx13("span", { className: "truncate text-sm font-medium leading-none text-foreground", children: sectionLabel })
+      /* @__PURE__ */ jsx14(IconArrowRight, { className: "shrink-0 text-muted-foreground", "aria-hidden": true }),
+      /* @__PURE__ */ jsxs8("div", { className: "flex min-w-0 flex-1 items-center gap-2", children: [
+        /* @__PURE__ */ jsx14(IconSection, { className: "shrink-0 text-foreground", "aria-hidden": true }),
+        /* @__PURE__ */ jsx14("span", { className: "truncate text-sm font-medium leading-none text-foreground", children: sectionLabel })
       ] })
     ] })
   ] });
 }
 
 // src/ui/link-modal/SectionTreeItem.tsx
-import { jsx as jsx14, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx15, jsxs as jsxs9 } from "react/jsx-runtime";
 function SectionTreeItem({ section, onSelect, selected }) {
   const interactive = Boolean(onSelect);
-  return /* @__PURE__ */ jsxs8("div", { className: "flex h-9 w-full items-end pl-3", children: [
-    /* @__PURE__ */ jsx14(
+  return /* @__PURE__ */ jsxs9("div", { className: "flex h-9 w-full items-end pl-3", children: [
+    /* @__PURE__ */ jsx15(
       "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__ */ jsxs8(
+    /* @__PURE__ */ jsxs9(
       "div",
       {
         role: interactive ? "button" : void 0,
@@ -5072,8 +5246,8 @@ function SectionTreeItem({ section, onSelect, selected }) {
           interactive && selected && "border-primary"
         ),
         children: [
-          /* @__PURE__ */ jsx14(IconSection, { className: "shrink-0 text-foreground", "aria-hidden": true }),
-          /* @__PURE__ */ jsx14("span", { className: "truncate text-sm font-normal leading-5 text-foreground", children: section.label })
+          /* @__PURE__ */ jsx15(IconSection, { className: "shrink-0 text-foreground", "aria-hidden": true }),
+          /* @__PURE__ */ jsx15("span", { className: "truncate text-sm font-normal leading-5 text-foreground", children: section.label })
         ]
       }
     )
@@ -5081,23 +5255,23 @@ function SectionTreeItem({ section, onSelect, selected }) {
 }
 function SectionPickerList({ sections, onSelect }) {
   if (sections.length === 0) {
-    return /* @__PURE__ */ jsx14("p", { className: "text-sm text-muted-foreground", children: "No sections found on this page." });
+    return /* @__PURE__ */ jsx15("p", { className: "text-sm text-muted-foreground", children: "No sections found on this page." });
   }
-  return /* @__PURE__ */ jsxs8("div", { className: "flex flex-col gap-1", children: [
-    /* @__PURE__ */ jsx14("p", { className: "text-sm text-muted-foreground", children: "Pick a section this link should scroll to." }),
-    sections.map((section) => /* @__PURE__ */ jsx14(SectionTreeItem, { section, onSelect }, section.id))
+  return /* @__PURE__ */ jsxs9("div", { className: "flex flex-col gap-1", children: [
+    /* @__PURE__ */ jsx15("p", { className: "text-sm text-muted-foreground", children: "Pick a section this link should scroll to." }),
+    sections.map((section) => /* @__PURE__ */ jsx15(SectionTreeItem, { section, onSelect }, section.id))
   ] });
 }
 
 // src/ui/link-modal/UrlOrPageInput.tsx
-import { useId as useId2, useRef as useRef2, useState as useState3 } from "react";
+import { useId as useId2, useRef as useRef3, useState as useState3 } from "react";
 
 // src/ui/input.tsx
-import * as React7 from "react";
-import { jsx as jsx15 } from "react/jsx-runtime";
-var Input = React7.forwardRef(
+import * as React8 from "react";
+import { jsx as jsx16 } from "react/jsx-runtime";
+var Input = React8.forwardRef(
   ({ className, type, ...props }, ref) => {
-    return /* @__PURE__ */ jsx15(
+    return /* @__PURE__ */ jsx16(
       "input",
       {
         type,
@@ -5116,9 +5290,9 @@ Input.displayName = "Input";
 
 // src/ui/label.tsx
 import { Label as LabelPrimitive } from "radix-ui";
-import { jsx as jsx16 } from "react/jsx-runtime";
+import { jsx as jsx17 } from "react/jsx-runtime";
 function Label({ className, ...props }) {
-  return /* @__PURE__ */ jsx16(
+  return /* @__PURE__ */ jsx17(
     LabelPrimitive.Root,
     {
       "data-slot": "label",
@@ -5129,9 +5303,9 @@ function Label({ className, ...props }) {
 }
 
 // src/ui/link-modal/UrlOrPageInput.tsx
-import { jsx as jsx17, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx18, jsxs as jsxs10 } from "react/jsx-runtime";
 function FieldChevron({ onClick }) {
-  return /* @__PURE__ */ jsx17(
+  return /* @__PURE__ */ jsx18(
     "button",
     {
       type: "button",
@@ -5139,7 +5313,7 @@ function FieldChevron({ onClick }) {
       onClick,
       "aria-label": "Open page list",
       tabIndex: -1,
-      children: /* @__PURE__ */ jsx17(IconChevronDown, {})
+      children: /* @__PURE__ */ jsx18(IconChevronDown, {})
     }
   );
 }
@@ -5156,7 +5330,7 @@ function UrlOrPageInput({
   urlError
 }) {
   const inputId = useId2();
-  const inputRef = useRef2(null);
+  const inputRef = useRef3(null);
   const [isFocused, setIsFocused] = useState3(false);
   const openDropdown = () => {
     if (readOnly || filteredPages.length === 0) return;
@@ -5178,12 +5352,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__ */ jsxs9("div", { className: "flex w-full flex-col gap-2 p-0", children: [
-    /* @__PURE__ */ jsx17(Label, { htmlFor: inputId, className: cn(urlError && "text-destructive"), children: "Destination" }),
-    /* @__PURE__ */ jsxs9("div", { className: "relative w-full", children: [
-      /* @__PURE__ */ jsxs9("div", { "data-ohw-link-field": true, className: fieldClassName, children: [
-        selectedPage ? /* @__PURE__ */ jsx17("div", { className: "flex shrink-0 items-center pr-2", children: /* @__PURE__ */ jsx17(IconFile, { className: "text-foreground", "aria-hidden": true }) }) : null,
-        readOnly ? /* @__PURE__ */ jsx17("span", { className: "min-w-0 flex-1 truncate text-sm leading-5 text-foreground", children: selectedPage?.title ?? value }) : /* @__PURE__ */ jsx17(
+  return /* @__PURE__ */ jsxs10("div", { className: "flex w-full flex-col gap-2 p-0", children: [
+    /* @__PURE__ */ jsx18(Label, { htmlFor: inputId, className: cn(urlError && "text-destructive"), children: "Destination" }),
+    /* @__PURE__ */ jsxs10("div", { className: "relative w-full", children: [
+      /* @__PURE__ */ jsxs10("div", { "data-ohw-link-field": true, className: fieldClassName, children: [
+        selectedPage ? /* @__PURE__ */ jsx18("div", { className: "flex shrink-0 items-center pr-2", children: /* @__PURE__ */ jsx18(IconFile, { className: "text-foreground", "aria-hidden": true }) }) : null,
+        readOnly ? /* @__PURE__ */ jsx18("span", { className: "min-w-0 flex-1 truncate text-sm leading-5 text-foreground", children: selectedPage?.title ?? value }) : /* @__PURE__ */ jsx18(
           Input,
           {
             ref: inputRef,
@@ -5202,7 +5376,7 @@ function UrlOrPageInput({
             )
           }
         ),
-        selectedPage && !readOnly ? /* @__PURE__ */ jsx17(
+        selectedPage && !readOnly ? /* @__PURE__ */ jsx18(
           "button",
           {
             type: "button",
@@ -5210,26 +5384,26 @@ function UrlOrPageInput({
             onMouseDown: clearSelection,
             "aria-label": "Clear selected page",
             tabIndex: -1,
-            children: /* @__PURE__ */ jsx17(IconX, { "aria-hidden": true })
+            children: /* @__PURE__ */ jsx18(IconX, { "aria-hidden": true })
           }
         ) : null,
-        !readOnly ? /* @__PURE__ */ jsx17(FieldChevron, { onClick: toggleDropdown }) : null
+        !readOnly ? /* @__PURE__ */ jsx18(FieldChevron, { onClick: toggleDropdown }) : null
       ] }),
-      dropdownOpen && !readOnly && filteredPages.length > 0 ? /* @__PURE__ */ jsx17(
+      dropdownOpen && !readOnly && filteredPages.length > 0 ? /* @__PURE__ */ jsx18(
         "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__ */ jsxs9(
+          children: filteredPages.map((page) => /* @__PURE__ */ jsxs10(
             "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__ */ jsx17(IconFile, { className: "shrink-0", "aria-hidden": true }),
-                /* @__PURE__ */ jsx17("span", { className: "truncate", children: page.title })
+                /* @__PURE__ */ jsx18(IconFile, { className: "shrink-0", "aria-hidden": true }),
+                /* @__PURE__ */ jsx18("span", { className: "truncate", children: page.title })
               ]
             },
             page.path
@@ -5237,12 +5411,12 @@ function UrlOrPageInput({
         }
       ) : null
     ] }),
-    urlError ? /* @__PURE__ */ jsx17("p", { className: "text-sm font-medium text-destructive", children: urlError }) : null
+    urlError ? /* @__PURE__ */ jsx18("p", { className: "text-sm font-medium text-destructive", children: urlError }) : null
   ] });
 }
 
 // src/ui/link-modal/useLinkModalState.ts
-import { useCallback as useCallback2, useEffect as useEffect2, useMemo as useMemo2, useState as useState4 } from "react";
+import { useCallback as useCallback2, useEffect as useEffect3, useMemo as useMemo2, useState as useState4 } from "react";
 function useLinkModalState({
   open,
   mode,
@@ -5272,7 +5446,7 @@ function useLinkModalState({
     setDropdownOpen(false);
     setUrlError("");
   }, []);
-  useEffect2(() => {
+  useEffect3(() => {
     if (!open) return;
     if (mode === "edit" && initialTarget) {
       const { pageRoute } = parseTarget(initialTarget);
@@ -5405,7 +5579,7 @@ function useLinkModalState({
 }
 
 // src/ui/link-modal/LinkEditorPanel.tsx
-import { Fragment as Fragment2, jsx as jsx18, jsxs as jsxs10 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx19, jsxs as jsxs11 } from "react/jsx-runtime";
 function LinkEditorPanel({
   open = true,
   mode = "create",
@@ -5429,25 +5603,25 @@ function LinkEditorPanel({
     onSubmit
   });
   const isCancel = state.secondaryLabel === "Cancel";
-  return /* @__PURE__ */ jsxs10(Fragment2, { children: [
-    /* @__PURE__ */ jsx18(DialogClose, { asChild: true, children: /* @__PURE__ */ jsx18(
+  return /* @__PURE__ */ jsxs11(Fragment3, { children: [
+    /* @__PURE__ */ jsx19(DialogClose, { asChild: true, children: /* @__PURE__ */ jsx19(
       "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__ */ jsx18(IconX, { "aria-hidden": true })
+        children: /* @__PURE__ */ jsx19(IconX, { "aria-hidden": true })
       }
     ) }),
-    /* @__PURE__ */ jsx18(DialogHeader, { className: "w-full gap-1.5 p-6 pr-12", children: /* @__PURE__ */ jsx18(DialogTitle, { className: "m-0 w-full break-words", children: state.title }) }),
-    /* @__PURE__ */ jsxs10("div", { className: "flex w-full flex-col gap-3 px-6 pb-8 pt-1", children: [
-      state.showBreadcrumb && state.selectedPage && state.selectedSection ? /* @__PURE__ */ jsx18(
+    /* @__PURE__ */ jsx19(DialogHeader, { className: "w-full gap-1.5 p-6 pr-12", children: /* @__PURE__ */ jsx19(DialogTitle, { className: "m-0 w-full break-words", children: state.title }) }),
+    /* @__PURE__ */ jsxs11("div", { className: "flex w-full flex-col gap-3 px-6 pb-8 pt-1", children: [
+      state.showBreadcrumb && state.selectedPage && state.selectedSection ? /* @__PURE__ */ jsx19(
         DestinationBreadcrumb,
         {
           pageTitle: state.selectedPage.title,
           sectionLabel: state.selectedSection.label
         }
-      ) : /* @__PURE__ */ jsx18(
+      ) : /* @__PURE__ */ jsx19(
         UrlOrPageInput,
         {
           value: state.searchValue,
@@ -5460,18 +5634,18 @@ function LinkEditorPanel({
           urlError: state.urlError
         }
       ),
-      state.showChooseSection ? /* @__PURE__ */ jsxs10("div", { className: "flex flex-col justify-center gap-2", children: [
-        /* @__PURE__ */ jsx18(Button, { type: "button", variant: "outline", className: "w-fit cursor-pointer", size: "sm", onClick: state.handleChooseSection, children: "Choose a section" }),
-        /* @__PURE__ */ jsxs10("div", { className: "flex items-center gap-1 text-sm text-muted-foreground", children: [
-          /* @__PURE__ */ jsx18(IconInfo, { className: "shrink-0", "aria-hidden": true }),
-          /* @__PURE__ */ jsx18("span", { children: "Pick a section this link should scroll to." })
+      state.showChooseSection ? /* @__PURE__ */ jsxs11("div", { className: "flex flex-col justify-center gap-2", children: [
+        /* @__PURE__ */ jsx19(Button, { type: "button", variant: "outline", className: "w-fit cursor-pointer", size: "sm", onClick: state.handleChooseSection, children: "Choose a section" }),
+        /* @__PURE__ */ jsxs11("div", { className: "flex items-center gap-1 text-sm text-muted-foreground", children: [
+          /* @__PURE__ */ jsx19(IconInfo, { className: "shrink-0", "aria-hidden": true }),
+          /* @__PURE__ */ jsx19("span", { children: "Pick a section this link should scroll to." })
         ] })
       ] }) : null,
-      state.showSectionPicker ? /* @__PURE__ */ jsx18(SectionPickerList, { sections: state.activeSections, onSelect: state.handleSectionSelect }) : null,
-      state.showSectionRow && state.selectedSection ? /* @__PURE__ */ jsx18(SectionTreeItem, { section: state.selectedSection, selected: true }) : null
+      state.showSectionPicker ? /* @__PURE__ */ jsx19(SectionPickerList, { sections: state.activeSections, onSelect: state.handleSectionSelect }) : null,
+      state.showSectionRow && state.selectedSection ? /* @__PURE__ */ jsx19(SectionTreeItem, { section: state.selectedSection, selected: true }) : null
     ] }),
-    /* @__PURE__ */ jsxs10(DialogFooter, { className: "w-full px-6 pb-6", children: [
-      /* @__PURE__ */ jsx18(
+    /* @__PURE__ */ jsxs11(DialogFooter, { className: "w-full px-6 pb-6", children: [
+      /* @__PURE__ */ jsx19(
         Button,
         {
           type: "button",
@@ -5486,7 +5660,7 @@ function LinkEditorPanel({
           children: state.secondaryLabel
         }
       ),
-      /* @__PURE__ */ jsx18(
+      /* @__PURE__ */ jsx19(
         Button,
         {
           type: "button",
@@ -5505,7 +5679,7 @@ function LinkEditorPanel({
 }
 
 // src/ui/link-modal/LinkPopover.tsx
-import { jsx as jsx19 } from "react/jsx-runtime";
+import { jsx as jsx20 } from "react/jsx-runtime";
 function LinkPopover({
   open = true,
   panelRef,
@@ -5513,14 +5687,14 @@ function LinkPopover({
   onClose,
   ...editorProps
 }) {
-  return /* @__PURE__ */ jsx19(
+  return /* @__PURE__ */ jsx20(
     Dialog2,
     {
       open,
       onOpenChange: (next) => {
         if (!next) onClose?.();
       },
-      children: /* @__PURE__ */ jsx19(
+      children: /* @__PURE__ */ jsx20(
         DialogContent,
         {
           ref: panelRef,
@@ -5530,7 +5704,7 @@ function LinkPopover({
           "data-ohw-bridge": "",
           showCloseButton: false,
           className: "gap-0 p-0 w-full md:w-md pointer-events-auto",
-          children: /* @__PURE__ */ jsx19(LinkEditorPanel, { ...editorProps, open, onClose })
+          children: /* @__PURE__ */ jsx20(LinkEditorPanel, { ...editorProps, open, onClose })
         }
       )
     }
@@ -5596,7 +5770,7 @@ function shouldUseDevFixtures() {
 }
 
 // src/ui/badge.tsx
-import { jsx as jsx20 } from "react/jsx-runtime";
+import { jsx as jsx21 } 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",
   {
@@ -5614,12 +5788,12 @@ var badgeVariants = cva(
   }
 );
 function Badge({ className, variant, ...props }) {
-  return /* @__PURE__ */ jsx20("div", { className: cn(badgeVariants({ variant }), className), ...props });
+  return /* @__PURE__ */ jsx21("div", { className: cn(badgeVariants({ variant }), className), ...props });
 }
 
 // src/OhhwellsBridge.tsx
 import { Link as Link2 } from "lucide-react";
-import { Fragment as Fragment3, jsx as jsx21, jsxs as jsxs11 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx22, jsxs as jsxs12 } from "react/jsx-runtime";
 var PRIMARY2 = "#0885FE";
 var IMAGE_FADE_MS = 300;
 function runOpacityFade(el, onDone) {
@@ -5793,7 +5967,7 @@ function mountSchedulingWidget(insertAfter, notifyOnConnect = false, scheduleId,
   const root = createRoot(container);
   flushSync(() => {
     root.render(
-      /* @__PURE__ */ jsx21(
+      /* @__PURE__ */ jsx22(
         SchedulingWidget,
         {
           notifyOnConnect,
@@ -6238,7 +6412,7 @@ function EditGlowChrome({
   dragDisabled = false
 }) {
   const GAP = 6;
-  return /* @__PURE__ */ jsxs11(
+  return /* @__PURE__ */ jsxs12(
     "div",
     {
       ref: elRef,
@@ -6253,7 +6427,7 @@ function EditGlowChrome({
         zIndex: 2147483646
       },
       children: [
-        /* @__PURE__ */ jsx21(
+        /* @__PURE__ */ jsx22(
           "div",
           {
             style: {
@@ -6266,7 +6440,7 @@ function EditGlowChrome({
             }
           }
         ),
-        reorderHrefKey && /* @__PURE__ */ jsx21(
+        reorderHrefKey && /* @__PURE__ */ jsx22(
           "div",
           {
             "data-ohw-drag-handle-container": "",
@@ -6278,7 +6452,7 @@ function EditGlowChrome({
               transform: "translate(calc(-100% - 7px), -50%)",
               pointerEvents: dragDisabled ? "none" : "auto"
             },
-            children: /* @__PURE__ */ jsx21(
+            children: /* @__PURE__ */ jsx22(
               DragHandle,
               {
                 "aria-label": `Reorder ${reorderHrefKey}`,
@@ -6382,7 +6556,7 @@ function FloatingToolbar({
   onEditLink
 }) {
   const { top, left, transform } = calcToolbarPos(rect, parentScroll, 330);
-  return /* @__PURE__ */ jsx21(
+  return /* @__PURE__ */ jsx22(
     "div",
     {
       ref: elRef,
@@ -6403,12 +6577,12 @@ function FloatingToolbar({
         fontFamily: "sans-serif",
         pointerEvents: "auto"
       },
-      children: /* @__PURE__ */ jsxs11(CustomToolbar, { children: [
-        TOOLBAR_GROUPS.map((btns, gi) => /* @__PURE__ */ jsxs11(React8.Fragment, { children: [
-          gi > 0 && /* @__PURE__ */ jsx21(CustomToolbarDivider, {}),
+      children: /* @__PURE__ */ jsxs12(CustomToolbar, { children: [
+        TOOLBAR_GROUPS.map((btns, gi) => /* @__PURE__ */ jsxs12(React9.Fragment, { children: [
+          gi > 0 && /* @__PURE__ */ jsx22(CustomToolbarDivider, {}),
           btns.map((btn) => {
             const isActive = activeCommands.has(btn.cmd);
-            return /* @__PURE__ */ jsx21(
+            return /* @__PURE__ */ jsx22(
               CustomToolbarButton,
               {
                 title: btn.title,
@@ -6417,7 +6591,7 @@ function FloatingToolbar({
                   e.preventDefault();
                   onCommand(btn.cmd);
                 },
-                children: /* @__PURE__ */ jsx21(
+                children: /* @__PURE__ */ jsx22(
                   "svg",
                   {
                     width: "16",
@@ -6438,7 +6612,7 @@ function FloatingToolbar({
             );
           })
         ] }, gi)),
-        showEditLink ? /* @__PURE__ */ jsx21(
+        showEditLink ? /* @__PURE__ */ jsx22(
           CustomToolbarButton,
           {
             type: "button",
@@ -6452,7 +6626,7 @@ function FloatingToolbar({
               e.preventDefault();
               e.stopPropagation();
             },
-            children: /* @__PURE__ */ jsx21(Link2, { className: "size-4 shrink-0", "aria-hidden": true })
+            children: /* @__PURE__ */ jsx22(Link2, { className: "size-4 shrink-0", "aria-hidden": true })
           }
         ) : null
       ] })
@@ -6469,7 +6643,7 @@ function StateToggle({
   states,
   onStateChange
 }) {
-  return /* @__PURE__ */ jsx21(
+  return /* @__PURE__ */ jsx22(
     ToggleGroup,
     {
       "data-ohw-state-toggle": "",
@@ -6483,7 +6657,7 @@ function StateToggle({
         left: rect.right - 8,
         transform: "translateX(-100%)"
       },
-      children: states.map((state) => /* @__PURE__ */ jsx21(ToggleGroupItem, { value: state, size: "sm", children: state }, state))
+      children: states.map((state) => /* @__PURE__ */ jsx22(ToggleGroupItem, { value: state, size: "sm", children: state }, state))
     }
   );
 }
@@ -6511,7 +6685,7 @@ function OhhwellsBridge() {
   const searchParams = useSearchParams();
   const isEditMode = isEditSessionActive();
   const [bridgeRoot, setBridgeRoot] = useState5(null);
-  useEffect3(() => {
+  useEffect4(() => {
     const figtreeFontId = "ohw-figtree-font";
     if (!document.getElementById(figtreeFontId)) {
       const preconnect1 = Object.assign(document.createElement("link"), { rel: "preconnect", href: "https://fonts.googleapis.com" });
@@ -6519,7 +6693,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);
     }
@@ -6542,50 +6719,52 @@ function OhhwellsBridge() {
     }
   }, []);
   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 autoSaveTimers = useRef4(/* @__PURE__ */ new Map());
+  const activeElRef = useRef4(null);
+  const selectedElRef = useRef4(null);
+  const originalContentRef = useRef4(null);
+  const activeStateElRef = useRef4(null);
+  const parentScrollRef = useRef4(null);
+  const visibleViewportRef = useRef4(null);
   const [dialogPortalContainer, setDialogPortalContainer] = useState5(null);
   const attachVisibleViewport = useCallback3((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 toolbarElRef = useRef4(null);
+  const glowElRef = useRef4(null);
+  const hoveredImageRef = useRef4(null);
+  const hoveredImageHasTextOverlapRef = useRef4(false);
+  const [mediaHover, setMediaHover] = useState5(null);
+  const [uploadingRects, setUploadingRects] = useState5({});
+  const hoveredGapRef = useRef4(null);
+  const imageUnhoverTimerRef = useRef4(null);
+  const imageShowTimerRef = useRef4(null);
+  const editStylesRef = useRef4(null);
+  const activateRef = useRef4(() => {
   });
-  const deactivateRef = useRef3(() => {
+  const deactivateRef = useRef4(() => {
   });
-  const selectRef = useRef3(() => {
+  const selectRef = useRef4(() => {
   });
-  const selectFrameRef = useRef3(() => {
+  const selectFrameRef = useRef4(() => {
   });
-  const deselectRef = useRef3(() => {
+  const deselectRef = useRef4(() => {
   });
-  const reselectNavigationItemRef = useRef3(() => {
+  const reselectNavigationItemRef = useRef4(() => {
   });
-  const commitNavigationTextEditRef = useRef3(() => {
+  const commitNavigationTextEditRef = useRef4(() => {
   });
-  const refreshActiveCommandsRef = useRef3(() => {
+  const refreshActiveCommandsRef = useRef4(() => {
   });
-  const postToParentRef = useRef3(postToParent);
+  const postToParentRef = useRef4(postToParent);
   postToParentRef.current = postToParent;
-  const sectionsLoadedRef = useRef3(false);
-  const pendingScheduleConfigRequests = useRef3([]);
+  const sectionsLoadedRef = useRef4(false);
+  const pendingScheduleConfigRequests = useRef4([]);
   const [toolbarRect, setToolbarRect] = useState5(null);
   const [toolbarVariant, setToolbarVariant] = useState5("none");
-  const toolbarVariantRef = useRef3("none");
+  const toolbarVariantRef = useRef4("none");
   toolbarVariantRef.current = toolbarVariant;
   const [reorderHrefKey, setReorderHrefKey] = useState5(null);
   const [reorderDragDisabled, setReorderDragDisabled] = useState5(false);
@@ -6594,19 +6773,19 @@ function OhhwellsBridge() {
   const [activeCommands, setActiveCommands] = useState5(/* @__PURE__ */ new Set());
   const [sectionGap, setSectionGap] = useState5(null);
   const [toolbarShowEditLink, setToolbarShowEditLink] = useState5(false);
-  const hoveredItemElRef = useRef3(null);
+  const hoveredItemElRef = useRef4(null);
   const [hoveredItemRect, setHoveredItemRect] = useState5(null);
-  const siblingHintElRef = useRef3(null);
+  const siblingHintElRef = useRef4(null);
   const [siblingHintRect, setSiblingHintRect] = useState5(null);
   const [isItemDragging, setIsItemDragging] = 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);
+  const sectionsPrefetchGenRef = useRef4(0);
+  const setLinkPopoverRef = useRef4(setLinkPopover);
+  const linkPopoverPanelRef = useRef4(null);
+  const linkPopoverOpenRef = useRef4(false);
+  const linkPopoverGraceUntilRef = useRef4(0);
   setLinkPopoverRef.current = setLinkPopover;
   const bumpLinkPopoverGrace = () => {
     linkPopoverGraceUntilRef.current = Date.now() + 350;
@@ -6630,9 +6809,9 @@ function OhhwellsBridge() {
       );
     });
   }, [isEditMode, pathname]);
-  const runSectionsPrefetchRef = useRef3(runSectionsPrefetch);
+  const runSectionsPrefetchRef = useRef4(runSectionsPrefetch);
   runSectionsPrefetchRef.current = runSectionsPrefetch;
-  useEffect3(() => {
+  useEffect4(() => {
     if (!linkPopover) return;
     if (hoveredImageRef.current) {
       hoveredImageRef.current = null;
@@ -6640,7 +6819,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;
@@ -6666,7 +6845,7 @@ function OhhwellsBridge() {
       document.removeEventListener("touchmove", preventBackgroundScroll, scrollOpts);
     };
   }, [linkPopover, postToParent]);
-  useEffect3(() => {
+  useEffect4(() => {
     if (!isEditMode) return;
     const useFixtures = shouldUseDevFixtures();
     if (useFixtures) {
@@ -6690,14 +6869,14 @@ function OhhwellsBridge() {
     if (!useFixtures) postToParent({ type: "ow:request-site-pages" });
     return () => window.removeEventListener("message", onSitePages);
   }, [isEditMode, postToParent]);
-  useEffect3(() => {
+  useEffect4(() => {
     if (!isEditMode || shouldUseDevFixtures()) return;
     void loadAllSectionsManifest().then((manifest) => {
       if (Object.keys(manifest).length === 0) return;
       setSectionsByPath((prev) => ({ ...manifest, ...prev }));
     });
   }, [isEditMode]);
-  useEffect3(() => {
+  useEffect4(() => {
     const update = () => {
       const el = activeElRef.current ?? selectedElRef.current;
       if (el) setToolbarRect(getEditMeasureEl(el).getBoundingClientRect());
@@ -6884,7 +7063,7 @@ function OhhwellsBridge() {
     deactivate();
     if (hoveredImageRef.current) {
       hoveredImageRef.current = null;
-      postToParentRef.current({ type: "ow:image-unhover" });
+      setMediaHover(null);
     }
     setToolbarVariant("rich-text");
     siblingHintElRef.current = null;
@@ -6986,7 +7165,7 @@ function OhhwellsBridge() {
       cancelled = true;
     };
   }, [subdomain, isEditMode]);
-  useEffect3(() => {
+  useEffect4(() => {
     if (!subdomain || isEditMode) return;
     let debounceTimer = null;
     let observer = null;
@@ -7040,16 +7219,16 @@ function OhhwellsBridge() {
     const visible = Boolean(subdomain) && fetchState !== "done";
     el.style.display = visible ? "flex" : "none";
   }, [subdomain, fetchState]);
-  useEffect3(() => {
+  useEffect4(() => {
     postToParent({ type: "ow:navigation", path: pathname });
   }, [pathname, postToParent]);
-  useEffect3(() => {
+  useEffect4(() => {
     if (!isEditMode) return;
     setLinkPopover(null);
     deselectRef.current();
     deactivateRef.current();
   }, [pathname, isEditMode]);
-  useEffect3(() => {
+  useEffect4(() => {
     if (!isEditMode) return;
     const measure = () => {
       const h = document.body.scrollHeight;
@@ -7073,7 +7252,7 @@ function OhhwellsBridge() {
       window.removeEventListener("resize", handleResize);
     };
   }, [pathname, isEditMode, postToParent]);
-  useEffect3(() => {
+  useEffect4(() => {
     if (!subdomainFromQuery || isEditMode) return;
     const handleClick = (e) => {
       const anchor = e.target.closest("a");
@@ -7089,7 +7268,7 @@ function OhhwellsBridge() {
     document.addEventListener("click", handleClick, true);
     return () => document.removeEventListener("click", handleClick, true);
   }, [subdomainFromQuery, isEditMode, router]);
-  useEffect3(() => {
+  useEffect4(() => {
     if (!isEditMode) {
       editStylesRef.current?.base.remove();
       editStylesRef.current?.forceHover.remove();
@@ -7184,7 +7363,7 @@ function OhhwellsBridge() {
         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);
@@ -7358,25 +7537,23 @@ 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;
       const video = imgEl.dataset.ohwEditable === "video" ? getVideoEl(imgEl) : null;
-      postToParentRef.current({
-        type: "ow:image-hover",
+      setMediaHover({
         key: imgEl.dataset.ohwKey ?? "",
-        // Lets the parent pick the file-picker `accept`, overlay label/icon and drop
-        // mime-check without a parallel ow:video-* message channel.
-        elementType: imgEl.dataset.ohwEditable ?? "image",
         rect: { top: r2.top, left: r2.left, width: r2.width, height: r2.height },
+        elementType: imgEl.dataset.ohwEditable ?? "image",
         hasTextOverlap,
-        ...video ? { videoAutoplay: video.autoplay, videoMuted: video.muted } : {},
-        ...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(MEDIA_SELECTOR));
@@ -7426,7 +7603,7 @@ function OhhwellsBridge() {
           hoveredImageRef.current = null;
           hoveredImageHasTextOverlapRef.current = false;
           resumeAnimTracks();
-          postToParentRef.current({ type: "ow:image-unhover" });
+          clearImageHover();
         }
         return;
       }
@@ -7438,21 +7615,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);
@@ -7460,7 +7638,7 @@ function OhhwellsBridge() {
           if (hoveredImageRef.current) {
             hoveredImageRef.current = null;
             resumeAnimTracks();
-            postToParentRef.current({ type: "ow:image-unhover" });
+            clearImageHover();
           }
           return;
         }
@@ -7469,7 +7647,7 @@ function OhhwellsBridge() {
             hoveredImageRef.current = null;
             hoveredImageHasTextOverlapRef.current = false;
             resumeAnimTracks();
-            postToParentRef.current({ type: "ow:image-unhover" });
+            clearImageHover();
           }
           return;
         }
@@ -7494,14 +7672,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)) {
@@ -7513,7 +7691,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)) {
@@ -7525,7 +7703,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;
@@ -7533,9 +7711,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;
@@ -7552,7 +7730,7 @@ 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(
@@ -7665,7 +7843,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) => {
@@ -7673,7 +7851,7 @@ function OhhwellsBridge() {
       if (imgEl) return;
       hoveredImageRef.current = null;
       resumeAnimTracks();
-      postToParentRef.current({ type: "ow:image-unhover" });
+      clearImageHover();
     };
     const handleDrop = (e) => {
       e.preventDefault();
@@ -7697,31 +7875,7 @@ function OhhwellsBridge() {
       }
       hoveredImageRef.current = null;
       resumeAnimTracks();
-      postToParentRef.current({ type: "ow:image-unhover" });
-    };
-    const handleVideoSettings = (e) => {
-      if (e.data?.type !== "ow:video-settings") return;
-      const { key, autoplay, muted } = e.data;
-      document.querySelectorAll(`[data-ohw-key="${key}"]`).forEach((el) => {
-        const video = getVideoEl(el);
-        if (!video) return;
-        if (typeof autoplay === "boolean") video.autoplay = autoplay;
-        if (typeof muted === "boolean") video.muted = muted;
-        syncVideoPlayback(video);
-        postToParentRef.current({
-          type: "ow:change",
-          nodes: [
-            { key: `${key}${VIDEO_AUTOPLAY_SUFFIX}`, text: String(video.autoplay) },
-            { key: `${key}${VIDEO_MUTED_SUFFIX}`, text: String(video.muted) }
-          ]
-        });
-        postToParentRef.current({
-          type: "ow:video-settings-applied",
-          key,
-          autoplay: video.autoplay,
-          muted: video.muted
-        });
-      });
+      clearImageHover();
     };
     const handleImageUrl = (e) => {
       if (e.data?.type !== "ow:image-url") return;
@@ -7739,7 +7893,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) => {
@@ -7975,12 +8133,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) => {
@@ -8069,19 +8224,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");
         }
       });
     };
@@ -8138,7 +8313,7 @@ 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(
@@ -8170,8 +8345,7 @@ function OhhwellsBridge() {
     window.addEventListener("message", handleClearSchedulingWidget);
     window.addEventListener("message", handleRemoveSchedulingSection);
     window.addEventListener("message", handleImageUrl);
-    window.addEventListener("message", handleVideoSettings);
-    window.addEventListener("message", handleAnimLock);
+    window.addEventListener("message", handleImageUploading);
     window.addEventListener("message", handleCanvasHeight);
     window.addEventListener("message", handleParentScroll);
     window.addEventListener("message", handlePointerSync);
@@ -8218,8 +8392,7 @@ function OhhwellsBridge() {
       window.removeEventListener("message", handleClearSchedulingWidget);
       window.removeEventListener("message", handleRemoveSchedulingSection);
       window.removeEventListener("message", handleImageUrl);
-      window.removeEventListener("message", handleVideoSettings);
-      window.removeEventListener("message", handleAnimLock);
+      window.removeEventListener("message", handleImageUploading);
       window.removeEventListener("message", handleCanvasHeight);
       window.removeEventListener("message", handleParentScroll);
       window.removeEventListener("resize", handleViewportResize);
@@ -8233,7 +8406,7 @@ function OhhwellsBridge() {
       if (imageShowTimerRef.current) clearTimeout(imageShowTimerRef.current);
     };
   }, [isEditMode, refreshStateRules]);
-  useEffect3(() => {
+  useEffect4(() => {
     const handler = (e) => {
       if (e.data?.type !== "ow:request-schedule-config") return;
       const insertAfterVal = e.data.insertAfter;
@@ -8249,7 +8422,7 @@ function OhhwellsBridge() {
     window.addEventListener("message", handler);
     return () => window.removeEventListener("message", handler);
   }, [processConfigRequest]);
-  useEffect3(() => {
+  useEffect4(() => {
     if (!isEditMode) return;
     document.querySelectorAll("[data-ohw-active-state]").forEach((el) => {
       el.removeAttribute("data-ohw-active-state");
@@ -8278,7 +8451,7 @@ function OhhwellsBridge() {
       clearTimeout(timer);
     };
   }, [pathname, isEditMode, refreshStateRules, postToParent]);
-  useEffect3(() => {
+  useEffect4(() => {
     scrollToHashSectionWhenReady();
     const onHashChange = () => scrollToHashSectionWhenReady();
     window.addEventListener("hashchange", onHashChange);
@@ -8339,12 +8512,68 @@ function OhhwellsBridge() {
   const showEditLink = toolbarShowEditLink;
   const currentSections = sectionsByPath[pathname] ?? [];
   linkPopoverOpenRef.current = linkPopover !== null;
+  const handleMediaReplace = useCallback3(
+    (key) => {
+      postToParent({ type: "ow:image-pick", key, elementType: mediaHover?.elementType ?? "image" });
+    },
+    [postToParent, mediaHover?.elementType]
+  );
+  const handleVideoSettingsChange = useCallback3(
+    (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 = useCallback3((key) => {
+    setUploadingRects((prev) => {
+      if (!(key in prev)) return prev;
+      const next = { ...prev };
+      delete next[key];
+      return next;
+    });
+  }, []);
   return bridgeRoot ? createPortal(
-    /* @__PURE__ */ jsxs11(Fragment3, { children: [
-      /* @__PURE__ */ jsx21("div", { ref: attachVisibleViewport, "data-ohw-visible-viewport": "", "aria-hidden": true }),
-      siblingHintRect && !isItemDragging && /* @__PURE__ */ jsx21(ItemInteractionLayer, { rect: siblingHintRect, state: "sibling-hint" }),
-      hoveredItemRect && !siblingHintRect && !isItemDragging && hoveredItemElRef.current !== selectedElRef.current && /* @__PURE__ */ jsx21(ItemInteractionLayer, { rect: hoveredItemRect, state: "hover" }),
-      toolbarRect && (toolbarVariant === "link-action" || toolbarVariant === "select-frame") && /* @__PURE__ */ jsx21(
+    /* @__PURE__ */ jsxs12(Fragment4, { children: [
+      /* @__PURE__ */ jsx22("div", { ref: attachVisibleViewport, "data-ohw-visible-viewport": "", "aria-hidden": true }),
+      Object.entries(uploadingRects).map(([key, { rect, fadingOut }]) => /* @__PURE__ */ jsx22(
+        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__ */ jsx22(
+        MediaOverlay,
+        {
+          hover: mediaHover,
+          isUploading: false,
+          onReplace: handleMediaReplace,
+          onVideoSettingsChange: handleVideoSettingsChange
+        }
+      ),
+      siblingHintRect && !isItemDragging && /* @__PURE__ */ jsx22(ItemInteractionLayer, { rect: siblingHintRect, state: "sibling-hint" }),
+      hoveredItemRect && !siblingHintRect && !isItemDragging && hoveredItemElRef.current !== selectedElRef.current && /* @__PURE__ */ jsx22(ItemInteractionLayer, { rect: hoveredItemRect, state: "hover" }),
+      toolbarRect && (toolbarVariant === "link-action" || toolbarVariant === "select-frame") && /* @__PURE__ */ jsx22(
         ItemInteractionLayer,
         {
           rect: toolbarRect,
@@ -8355,7 +8584,7 @@ function OhhwellsBridge() {
           dragHandleLabel: reorderHrefKey ? `Reorder ${reorderHrefKey}` : "Reorder item",
           onDragHandleDragStart: handleItemDragStart,
           onDragHandleDragEnd: handleItemDragEnd,
-          toolbar: toolbarVariant === "link-action" && !isItemDragging ? /* @__PURE__ */ jsx21(
+          toolbar: toolbarVariant === "link-action" && !isItemDragging ? /* @__PURE__ */ jsx22(
             ItemActionToolbar,
             {
               onEditLink: openLinkPopoverForSelected,
@@ -8365,8 +8594,8 @@ function OhhwellsBridge() {
           ) : void 0
         }
       ),
-      toolbarRect && toolbarVariant === "rich-text" && /* @__PURE__ */ jsxs11(Fragment3, { children: [
-        /* @__PURE__ */ jsx21(
+      toolbarRect && toolbarVariant === "rich-text" && /* @__PURE__ */ jsxs12(Fragment4, { children: [
+        /* @__PURE__ */ jsx22(
           EditGlowChrome,
           {
             rect: toolbarRect,
@@ -8375,7 +8604,7 @@ function OhhwellsBridge() {
             dragDisabled: reorderDragDisabled
           }
         ),
-        /* @__PURE__ */ jsx21(
+        /* @__PURE__ */ jsx22(
           FloatingToolbar,
           {
             rect: toolbarRect,
@@ -8388,7 +8617,7 @@ function OhhwellsBridge() {
           }
         )
       ] }),
-      maxBadge && /* @__PURE__ */ jsxs11(
+      maxBadge && /* @__PURE__ */ jsxs12(
         "div",
         {
           "data-ohw-max-badge": "",
@@ -8414,7 +8643,7 @@ function OhhwellsBridge() {
           ]
         }
       ),
-      toggleState && /* @__PURE__ */ jsx21(
+      toggleState && /* @__PURE__ */ jsx22(
         StateToggle,
         {
           rect: toggleState.rect,
@@ -8423,15 +8652,15 @@ function OhhwellsBridge() {
           onStateChange: handleStateChange
         }
       ),
-      sectionGap && /* @__PURE__ */ jsxs11(
+      sectionGap && /* @__PURE__ */ jsxs12(
         "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__ */ jsx21("div", { className: "flex-1 bg-primary", style: { height: 3 } }),
-            /* @__PURE__ */ jsx21(
+            /* @__PURE__ */ jsx22("div", { className: "flex-1 bg-primary", style: { height: 3 } }),
+            /* @__PURE__ */ jsx22(
               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",
@@ -8444,11 +8673,11 @@ function OhhwellsBridge() {
                 children: "Add Section"
               }
             ),
-            /* @__PURE__ */ jsx21("div", { className: "flex-1 bg-primary", style: { height: 3 } })
+            /* @__PURE__ */ jsx22("div", { className: "flex-1 bg-primary", style: { height: 3 } })
           ]
         }
       ),
-      linkPopover && dialogPortalContainer ? /* @__PURE__ */ jsx21(
+      linkPopover && dialogPortalContainer ? /* @__PURE__ */ jsx22(
         LinkPopover,
         {
           panelRef: linkPopoverPanelRef,
@@ -8464,15 +8693,15 @@ function OhhwellsBridge() {
         },
         `${linkPopover.key}-${pathname}`
       ) : null,
-      sectionGap && /* @__PURE__ */ jsxs11(
+      sectionGap && /* @__PURE__ */ jsxs12(
         "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__ */ jsx21("div", { className: "flex-1 bg-primary", style: { height: 3 } }),
-            /* @__PURE__ */ jsx21(
+            /* @__PURE__ */ jsx22("div", { className: "flex-1 bg-primary", style: { height: 3 } }),
+            /* @__PURE__ */ jsx22(
               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",
@@ -8485,7 +8714,7 @@ function OhhwellsBridge() {
                 children: "Add Section"
               }
             ),
-            /* @__PURE__ */ jsx21("div", { className: "flex-1 bg-primary", style: { height: 3 } })
+            /* @__PURE__ */ jsx22("div", { className: "flex-1 bg-primary", style: { height: 3 } })
           ]
         }
       )