@yoamigo.com/core 0.1.14 → 0.2.0

package/dist/index.js

@@ -168,6 +168,7 @@ var BuilderSelectionManager = class {
     this.setupScrollResizeListeners();
     this.setupKeyboardListener();
     this.setupWheelForwarding();
+    this.setupHistoryInterception();
     this.notifyPageReady();
     window.addEventListener("popstate", () => this.notifyPageReady());
   }
@@ -486,6 +487,23 @@ var BuilderSelectionManager = class {
       }
     }, { passive: false });
   }
+  /**
+   * Intercept History API to detect SPA navigation
+   * Catches programmatic navigation (wouter, react-router, etc.)
+   * Standard pattern used by analytics tools like Google Analytics
+   */
+  setupHistoryInterception() {
+    const originalPushState = history.pushState.bind(history);
+    history.pushState = (...args) => {
+      originalPushState(...args);
+      this.notifyPageReady();
+    };
+    const originalReplaceState = history.replaceState.bind(history);
+    history.replaceState = (...args) => {
+      originalReplaceState(...args);
+      this.notifyPageReady();
+    };
+  }
   showHoverOverlay(element) {
     if (!this.hoverOverlay) return;
     const rect = element.getBoundingClientRect();
@@ -1201,7 +1219,7 @@ function AIEditProvider({ children, staggerDelay = 100 }) {
     processingRef.current = true;
     const fieldId = queueRef.current.shift();
     const state = animationsRef.current.get(fieldId);
-    if (state && state.status === "pending") {
+    if (state?.status === "pending") {
       state.status = "animating";
       state.startTime = performance.now();
       notifyListeners(fieldId);
@@ -1214,7 +1232,7 @@ function AIEditProvider({ children, staggerDelay = 100 }) {
   const queueAnimation = useCallback3(
     (fieldId, config) => {
       const existing = animationsRef.current.get(fieldId);
-      if (existing && existing.status === "animating") {
+      if (existing?.status === "animating") {
         animationsRef.current.delete(fieldId);
       }
       const state = {
@@ -2490,7 +2508,7 @@ function YaTooltip({
 }
 
 // src/components/ya-image.css
-styleInject('.ya-image-container {\n  position: relative;\n  display: inline-block;\n  min-width: 45px;\n  min-height: 45px;\n  cursor: pointer;\n  transition: outline 0.15s ease;\n}\n.ya-image-container img {\n  display: block;\n}\n.ya-image-editable {\n  cursor: pointer;\n}\n.ya-image-editable:hover {\n  outline: 2px dashed var(--color-primary, #D4A574);\n  outline-offset: 4px;\n}\n.ya-image-selected {\n  outline: 3px solid var(--color-primary, #D4A574);\n  outline-offset: 4px;\n}\n.ya-image-overlay {\n  position: absolute;\n  inset: 0;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 8px;\n  background: rgba(0, 0, 0, 0.5);\n  opacity: 0;\n  transition: opacity 0.2s ease;\n  pointer-events: none;\n  border-radius: inherit;\n}\n.ya-image-editable:hover .ya-image-overlay {\n  opacity: 1;\n}\n.ya-image-selected .ya-image-overlay {\n  opacity: 0;\n}\n.ya-image-edit-icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 48px;\n  height: 48px;\n  background: white;\n  border-radius: 50%;\n  color: #1a1a1a;\n  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);\n}\n.ya-image-edit-icon svg {\n  width: 24px;\n  height: 24px;\n}\n.ya-image-edit-label {\n  color: white;\n  font-size: 14px;\n  font-weight: 500;\n  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);\n}\n@keyframes ya-image-success {\n  0% {\n    outline-color: var(--color-primary, #D4A574);\n  }\n  50% {\n    outline-color: #22c55e;\n    outline-width: 4px;\n  }\n  100% {\n    outline-color: var(--color-primary, #D4A574);\n    outline-width: 2px;\n  }\n}\n.ya-image-success {\n  animation: ya-image-success 0.4s ease;\n}\n.ya-image-loading::after {\n  content: "";\n  position: absolute;\n  inset: 0;\n  background:\n    linear-gradient(\n      90deg,\n      rgba(255, 255, 255, 0) 0%,\n      rgba(255, 255, 255, 0.3) 50%,\n      rgba(255, 255, 255, 0) 100%);\n  background-size: 200% 100%;\n  animation: ya-image-shimmer 1.5s infinite;\n}\n@keyframes ya-image-shimmer {\n  0% {\n    background-position: -200% 0;\n  }\n  100% {\n    background-position: 200% 0;\n  }\n}\n.ya-image-container:focus {\n  outline: 3px solid var(--color-primary, #D4A574);\n  outline-offset: 4px;\n}\n.ya-image-container:focus:not(:focus-visible) {\n  outline: none;\n}\n.ya-image-container:focus-visible {\n  outline: 3px solid var(--color-primary, #D4A574);\n  outline-offset: 4px;\n}\n.ya-image-small .ya-image-overlay {\n  display: none;\n}\n');
+styleInject('.ya-image-container {\n  position: relative;\n  display: inline-block;\n  min-width: 45px;\n  min-height: 45px;\n  cursor: pointer;\n  transition: outline 0.15s ease;\n}\n.ya-image-container img {\n  display: block;\n}\n.ya-image-editable {\n  cursor: pointer;\n}\n.ya-image-editable:hover {\n  outline: 2px dashed var(--color-primary, #D4A574);\n  outline-offset: 4px;\n}\n.ya-image-selected {\n  outline: 3px solid var(--color-primary, #D4A574);\n  outline-offset: 4px;\n}\n.ya-image-overlay {\n  position: absolute;\n  inset: 0;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 8px;\n  background: rgba(0, 0, 0, 0.5);\n  opacity: 0;\n  transition: opacity 0.2s ease;\n  pointer-events: none;\n  border-radius: inherit;\n}\n.ya-image-editable:hover .ya-image-overlay {\n  opacity: 1;\n}\n.ya-image-selected .ya-image-overlay {\n  opacity: 0;\n}\n.ya-image-edit-icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 48px;\n  height: 48px;\n  background: white;\n  border-radius: 50%;\n  color: #1a1a1a;\n  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);\n}\n.ya-image-edit-icon svg {\n  width: 24px;\n  height: 24px;\n}\n.ya-image-edit-label {\n  color: white;\n  font-size: 14px;\n  font-weight: 500;\n  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);\n}\n@keyframes ya-image-success {\n  0% {\n    outline-color: var(--color-primary, #D4A574);\n  }\n  50% {\n    outline-color: #22c55e;\n    outline-width: 4px;\n  }\n  100% {\n    outline-color: var(--color-primary, #D4A574);\n    outline-width: 2px;\n  }\n}\n.ya-image-success {\n  animation: ya-image-success 0.4s ease;\n}\n.ya-image-loading::after {\n  content: "";\n  position: absolute;\n  inset: 0;\n  background:\n    linear-gradient(\n      90deg,\n      rgba(255, 255, 255, 0) 0%,\n      rgba(255, 255, 255, 0.3) 50%,\n      rgba(255, 255, 255, 0) 100%);\n  background-size: 200% 100%;\n  animation: ya-image-shimmer 1.5s infinite;\n}\n@keyframes ya-image-shimmer {\n  0% {\n    background-position: -200% 0;\n  }\n  100% {\n    background-position: 200% 0;\n  }\n}\n.ya-image-container:focus {\n  outline: 3px solid var(--color-primary, #D4A574);\n  outline-offset: 4px;\n}\n.ya-image-container:focus:not(:focus-visible) {\n  outline: none;\n}\n.ya-image-container:focus-visible {\n  outline: 3px solid var(--color-primary, #D4A574);\n  outline-offset: 4px;\n}\n.ya-image-small .ya-image-overlay {\n  display: none;\n}\n.ya-image-drop-target {\n  outline: 2px dashed var(--ya-drop-color, #3b82f6) !important;\n  outline-offset: 4px;\n}\n.ya-image-drop-target .ya-image-overlay {\n  display: none !important;\n}\n.ya-image-drop-hover {\n  outline: 3px solid var(--ya-drop-color, #3b82f6) !important;\n  outline-offset: 4px;\n  background-color: rgba(59, 130, 246, 0.1);\n}\n.ya-image-drop-hover::before {\n  content: "";\n  position: absolute;\n  inset: -4px;\n  border: 2px solid var(--ya-drop-color, #3b82f6);\n  border-radius: inherit;\n  animation: ya-drop-pulse 1s ease-in-out infinite;\n  pointer-events: none;\n}\n@keyframes ya-drop-pulse {\n  0%, 100% {\n    opacity: 0.4;\n    transform: scale(1);\n  }\n  50% {\n    opacity: 0.8;\n    transform: scale(1.02);\n  }\n}\n');
 
 // src/components/YaImage.tsx
 import { jsx as jsx7, jsxs as jsxs3 } from "react/jsx-runtime";
@@ -2543,6 +2561,8 @@ function YaImage({
   const [isSelected, setIsSelected] = useState6(false);
   const [isHovered, setIsHovered] = useState6(false);
   const [isSmallImage, setIsSmallImage] = useState6(false);
+  const [isDropMode, setIsDropMode] = useState6(false);
+  const [isDropHover, setIsDropHover] = useState6(false);
   const rawValue = getValue(fieldId);
   const imageData = parseImageValue(rawValue);
   const src = imageData.src || fallbackSrc || PLACEHOLDER_SVG;
@@ -2592,6 +2612,84 @@ function YaImage({
     window.addEventListener("message", handleMessage2);
     return () => window.removeEventListener("message", handleMessage2);
   }, [mode, fieldId]);
+  useEffect6(() => {
+    if (mode !== "inline-edit") return;
+    const handleDropModeMessage = (event) => {
+      if (event.data?.type === "DROP_MODE_START") {
+        setIsDropMode(true);
+      }
+      if (event.data?.type === "DROP_MODE_END") {
+        setIsDropMode(false);
+        setIsDropHover(false);
+      }
+    };
+    window.addEventListener("message", handleDropModeMessage);
+    return () => window.removeEventListener("message", handleDropModeMessage);
+  }, [mode]);
+  const handleDragEnter = useCallback7(
+    (e) => {
+      if (!isDropMode) return;
+      e.preventDefault();
+      e.stopPropagation();
+      setIsDropHover(true);
+      const rect = containerRef.current?.getBoundingClientRect();
+      window.parent.postMessage(
+        {
+          type: "DROP_ZONE_ENTER",
+          fieldId,
+          zoneType: "image",
+          rect: rect ? {
+            top: rect.top,
+            left: rect.left,
+            width: rect.width,
+            height: rect.height
+          } : { top: 0, left: 0, width: 0, height: 0 }
+        },
+        "*"
+      );
+    },
+    [isDropMode, fieldId]
+  );
+  const handleDragOver = useCallback7(
+    (e) => {
+      if (!isDropMode) return;
+      e.preventDefault();
+      e.stopPropagation();
+    },
+    [isDropMode]
+  );
+  const handleDragLeave = useCallback7(
+    (e) => {
+      if (!isDropMode) return;
+      e.preventDefault();
+      e.stopPropagation();
+      const target = e.currentTarget;
+      const relatedTarget = e.relatedTarget;
+      if (!relatedTarget || !target.contains(relatedTarget)) {
+        setIsDropHover(false);
+        window.parent.postMessage({ type: "DROP_ZONE_LEAVE" }, "*");
+      }
+    },
+    [isDropMode]
+  );
+  const handleDrop = useCallback7(
+    (e) => {
+      if (!isDropMode) return;
+      e.preventDefault();
+      e.stopPropagation();
+      setIsDropHover(false);
+      setIsDropMode(false);
+      window.parent.postMessage(
+        {
+          type: "DROP_ZONE_DROP",
+          fieldId,
+          zoneType: "image"
+        },
+        "*"
+      );
+    },
+    [isDropMode, fieldId]
+  );
   useEffect6(() => {
     if (mode !== "inline-edit") return;
     const checkSize = () => {
@@ -2683,14 +2781,25 @@ function YaImage({
       ]
     }
   );
+  const containerClasses = [
+    "ya-image-container",
+    isSelected ? "ya-image-selected" : "ya-image-editable",
+    isSmallImage ? "ya-image-small" : "",
+    isDropMode ? "ya-image-drop-target" : "",
+    isDropHover ? "ya-image-drop-hover" : ""
+  ].filter(Boolean).join(" ");
   return /* @__PURE__ */ jsxs3(
     "div",
     {
       ref: containerRef,
-      className: `ya-image-container ${isSelected ? "ya-image-selected" : "ya-image-editable"} ${isSmallImage ? "ya-image-small" : ""}`,
+      className: containerClasses,
       onClick: handleClick,
       onMouseEnter: () => setIsHovered(true),
       onMouseLeave: () => setIsHovered(false),
+      onDragEnter: handleDragEnter,
+      onDragOver: handleDragOver,
+      onDragLeave: handleDragLeave,
+      onDrop: handleDrop,
       "data-ya-restricted": "true",
       "data-field-id": fieldId,
       "data-ya-image": "true",
@@ -2733,8 +2842,393 @@ function YaImage({
   );
 }
 
+// src/components/YaVideo.tsx
+import { useCallback as useCallback8, useEffect as useEffect7, useRef as useRef8, useState as useState7 } from "react";
+
+// src/components/ya-video.css
+styleInject('.ya-video-wrapper {\n  position: relative;\n  display: block;\n  width: 100%;\n}\n.ya-video-wrapper video,\n.ya-video-wrapper iframe {\n  display: block;\n  width: 100%;\n  height: 100%;\n}\n.ya-video-container {\n  position: relative;\n  display: block;\n  width: 100%;\n  min-width: 80px;\n  min-height: 45px;\n  cursor: pointer;\n  transition: outline 0.15s ease;\n}\n.ya-video-container video,\n.ya-video-container iframe {\n  display: block;\n  width: 100%;\n  height: 100%;\n  pointer-events: none;\n}\n.ya-video-editable {\n  cursor: pointer;\n}\n.ya-video-editable:hover {\n  outline: 2px dashed var(--color-primary, #D4A574);\n  outline-offset: 4px;\n}\n.ya-video-selected {\n  outline: 3px solid var(--color-primary, #D4A574);\n  outline-offset: 4px;\n}\n.ya-video-overlay {\n  position: absolute;\n  inset: 0;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 8px;\n  background: rgba(0, 0, 0, 0.5);\n  opacity: 0;\n  transition: opacity 0.2s ease;\n  pointer-events: none;\n  border-radius: inherit;\n}\n.ya-video-editable:hover .ya-video-overlay {\n  opacity: 1;\n}\n.ya-video-selected .ya-video-overlay {\n  opacity: 0;\n}\n.ya-video-edit-icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 48px;\n  height: 48px;\n  background: white;\n  border-radius: 50%;\n  color: #1a1a1a;\n  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);\n}\n.ya-video-edit-icon svg {\n  width: 24px;\n  height: 24px;\n}\n.ya-video-edit-label {\n  color: white;\n  font-size: 14px;\n  font-weight: 500;\n  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);\n}\n.ya-video-placeholder {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 8px;\n  width: 100%;\n  height: 100%;\n  min-height: 120px;\n  background: #f3f4f6;\n  border: 2px dashed #d1d5db;\n  border-radius: 8px;\n  color: #6b7280;\n  font-size: 14px;\n}\n.ya-video-placeholder img {\n  width: 64px;\n  height: auto;\n  opacity: 0.5;\n}\n@keyframes ya-video-success {\n  0% {\n    outline-color: var(--color-primary, #D4A574);\n  }\n  50% {\n    outline-color: #22c55e;\n    outline-width: 4px;\n  }\n  100% {\n    outline-color: var(--color-primary, #D4A574);\n    outline-width: 2px;\n  }\n}\n.ya-video-success {\n  animation: ya-video-success 0.4s ease;\n}\n.ya-video-loading::after {\n  content: "";\n  position: absolute;\n  inset: 0;\n  background:\n    linear-gradient(\n      90deg,\n      rgba(255, 255, 255, 0) 0%,\n      rgba(255, 255, 255, 0.3) 50%,\n      rgba(255, 255, 255, 0) 100%);\n  background-size: 200% 100%;\n  animation: ya-video-shimmer 1.5s infinite;\n}\n@keyframes ya-video-shimmer {\n  0% {\n    background-position: -200% 0;\n  }\n  100% {\n    background-position: 200% 0;\n  }\n}\n.ya-video-container:focus {\n  outline: 3px solid var(--color-primary, #D4A574);\n  outline-offset: 4px;\n}\n.ya-video-container:focus:not(:focus-visible) {\n  outline: none;\n}\n.ya-video-container:focus-visible {\n  outline: 3px solid var(--color-primary, #D4A574);\n  outline-offset: 4px;\n}\n.ya-video-small .ya-video-overlay {\n  display: none;\n}\n.ya-video-background {\n  position: absolute;\n  inset: 0;\n  z-index: -1;\n}\n.ya-video-background video {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n}\n');
+
+// src/components/YaVideo.tsx
+import { jsx as jsx8, jsxs as jsxs4 } from "react/jsx-runtime";
+function parseVideoValue(value) {
+  if (!value) {
+    return { type: "upload", src: "" };
+  }
+  try {
+    const parsed = JSON.parse(value);
+    if (typeof parsed === "object" && parsed.src) {
+      return {
+        type: parsed.type || "upload",
+        ...parsed
+      };
+    }
+  } catch {
+  }
+  return { type: "upload", src: value };
+}
+function serializeVideoValue(value) {
+  return JSON.stringify(value);
+}
+function buildYouTubeEmbedUrl(videoId, value) {
+  const params = new URLSearchParams({
+    rel: "0",
+    modestbranding: "1"
+  });
+  if (value.autoplay) params.set("autoplay", "1");
+  if (value.muted) params.set("mute", "1");
+  if (value.loop) {
+    params.set("loop", "1");
+    params.set("playlist", videoId);
+  }
+  if (value.controls === false) params.set("controls", "0");
+  if (value.startTime) params.set("start", String(Math.floor(value.startTime)));
+  if (value.endTime) params.set("end", String(Math.floor(value.endTime)));
+  return `https://www.youtube.com/embed/${videoId}?${params.toString()}`;
+}
+function buildVimeoEmbedUrl(videoId, value) {
+  const params = new URLSearchParams({
+    title: "0",
+    byline: "0",
+    portrait: "0"
+  });
+  if (value.autoplay) params.set("autoplay", "1");
+  if (value.muted) params.set("muted", "1");
+  if (value.loop) params.set("loop", "1");
+  if (value.controls === false) params.set("controls", "0");
+  let url = `https://player.vimeo.com/video/${videoId}?${params.toString()}`;
+  if (value.startTime) {
+    url += `#t=${Math.floor(value.startTime)}s`;
+  }
+  return url;
+}
+var SMALL_VIDEO_THRESHOLD = 100;
+var PLACEHOLDER_SVG2 = `data:image/svg+xml,${encodeURIComponent(`
+<svg xmlns="http://www.w3.org/2000/svg" width="400" height="225" viewBox="0 0 400 225">
+  <rect fill="#e5e7eb" width="400" height="225"/>
+  <g fill="#9ca3af" transform="translate(175, 87)">
+    <rect x="0" y="5" width="35" height="25" rx="3" stroke="currentColor" stroke-width="2" fill="none"/>
+    <polygon points="40,17.5 50,10 50,25" fill="currentColor"/>
+  </g>
+</svg>
+`)}`;
+function YaVideo({
+  fieldId,
+  className,
+  aspectRatio: propAspectRatio,
+  objectFit: propObjectFit,
+  loading = "lazy",
+  fallbackSrc,
+  fallbackPoster
+}) {
+  const { getValue, mode } = useContentStore();
+  const containerRef = useRef8(null);
+  const videoRef = useRef8(null);
+  const [isSelected, setIsSelected] = useState7(false);
+  const [isHovered, setIsHovered] = useState7(false);
+  const [isSmallVideo, setIsSmallVideo] = useState7(false);
+  const [isInView, setIsInView] = useState7(loading === "eager");
+  const rawValue = getValue(fieldId);
+  const videoData = parseVideoValue(rawValue);
+  const src = videoData.src || fallbackSrc || "";
+  const poster = videoData.poster || fallbackPoster || "";
+  const objectFit = videoData.objectFit || propObjectFit || "cover";
+  const aspectRatio = videoData.aspectRatio || propAspectRatio || "16/9";
+  const autoplay = videoData.autoplay ?? false;
+  const muted = videoData.muted ?? false;
+  const loop = videoData.loop ?? false;
+  const controls = videoData.controls ?? true;
+  const playsinline = videoData.playsinline ?? true;
+  const preload = videoData.preload ?? "metadata";
+  const [prefersReducedMotion, setPrefersReducedMotion] = useState7(false);
+  useEffect7(() => {
+    const mediaQuery = window.matchMedia("(prefers-reduced-motion: reduce)");
+    setPrefersReducedMotion(mediaQuery.matches);
+    const handleChange = (e) => {
+      setPrefersReducedMotion(e.matches);
+    };
+    mediaQuery.addEventListener("change", handleChange);
+    return () => mediaQuery.removeEventListener("change", handleChange);
+  }, []);
+  const effectiveAutoplay = autoplay && !prefersReducedMotion;
+  useEffect7(() => {
+    if (loading === "eager" || isInView) return;
+    const observer = new IntersectionObserver(
+      (entries) => {
+        if (entries[0]?.isIntersecting) {
+          setIsInView(true);
+          observer.disconnect();
+        }
+      },
+      { rootMargin: "200px" }
+      // Start loading 200px before visible
+    );
+    if (containerRef.current) {
+      observer.observe(containerRef.current);
+    }
+    return () => observer.disconnect();
+  }, [loading, isInView]);
+  const handleKeyDown = useCallback8(
+    (e) => {
+      if ((e.key === " " || e.key === "Enter") && videoData.type === "upload" && controls) {
+        e.preventDefault();
+        const video = videoRef.current;
+        if (video) {
+          if (video.paused) {
+            video.play();
+          } else {
+            video.pause();
+          }
+        }
+      }
+    },
+    [videoData.type, controls]
+  );
+  const handleClick = useCallback8(() => {
+    if (mode !== "inline-edit") return;
+    if (document.body.classList.contains("builder-selector-active")) return;
+    setIsSelected(true);
+    const rect = containerRef.current?.getBoundingClientRect();
+    window.parent.postMessage(
+      {
+        type: "YA_VIDEO_EDIT_REQUEST",
+        fieldId,
+        currentValue: videoData,
+        elementRect: rect ? {
+          top: rect.top,
+          left: rect.left,
+          width: rect.width,
+          height: rect.height
+        } : void 0
+      },
+      "*"
+    );
+  }, [mode, fieldId, videoData]);
+  useEffect7(() => {
+    if (mode !== "inline-edit") return;
+    const handleMessage2 = (event) => {
+      if (event.data?.type === "YA_VIDEO_EDIT_COMPLETE" && event.data.fieldId === fieldId) {
+        setIsSelected(false);
+      }
+      if (event.data?.type === "YA_VIDEO_EDIT_CANCEL" && event.data.fieldId === fieldId) {
+        setIsSelected(false);
+      }
+    };
+    window.addEventListener("message", handleMessage2);
+    return () => window.removeEventListener("message", handleMessage2);
+  }, [mode, fieldId]);
+  useEffect7(() => {
+    if (mode !== "inline-edit") return;
+    const checkSize = () => {
+      if (containerRef.current) {
+        const { width, height } = containerRef.current.getBoundingClientRect();
+        setIsSmallVideo(width < SMALL_VIDEO_THRESHOLD || height < SMALL_VIDEO_THRESHOLD);
+      }
+    };
+    checkSize();
+    window.addEventListener("resize", checkSize);
+    return () => window.removeEventListener("resize", checkSize);
+  }, [mode]);
+  useEffect7(() => {
+    if (!isSelected || mode !== "inline-edit") return;
+    let lastRectKey = "";
+    let lastTime = 0;
+    let rafId;
+    const loop2 = (time) => {
+      if (time - lastTime >= 50) {
+        const rect = containerRef.current?.getBoundingClientRect();
+        if (rect) {
+          const rectKey = `${Math.round(rect.top)},${Math.round(rect.left)},${Math.round(rect.width)},${Math.round(rect.height)}`;
+          if (rectKey !== lastRectKey) {
+            lastRectKey = rectKey;
+            window.parent.postMessage(
+              {
+                type: "YA_VIDEO_POSITION_UPDATE",
+                fieldId,
+                elementRect: {
+                  top: rect.top,
+                  left: rect.left,
+                  width: rect.width,
+                  height: rect.height
+                }
+              },
+              "*"
+            );
+          }
+        }
+        lastTime = time;
+      }
+      rafId = requestAnimationFrame(loop2);
+    };
+    rafId = requestAnimationFrame(loop2);
+    return () => cancelAnimationFrame(rafId);
+  }, [isSelected, fieldId, mode]);
+  const renderVideo = (isReadOnly) => {
+    if (!src && !isReadOnly) {
+      return /* @__PURE__ */ jsxs4("div", { className: "ya-video-placeholder", children: [
+        /* @__PURE__ */ jsx8("img", { src: PLACEHOLDER_SVG2, alt: "" }),
+        /* @__PURE__ */ jsx8("span", { children: "No video selected" })
+      ] });
+    }
+    if (!isInView && loading === "lazy" && !isReadOnly) {
+      return /* @__PURE__ */ jsx8(
+        "div",
+        {
+          className: "ya-video-placeholder",
+          style: { aspectRatio },
+          children: /* @__PURE__ */ jsx8("img", { src: PLACEHOLDER_SVG2, alt: "" })
+        }
+      );
+    }
+    if (videoData.type === "youtube" && src) {
+      const embedUrl = buildYouTubeEmbedUrl(src, videoData);
+      return /* @__PURE__ */ jsx8(
+        "iframe",
+        {
+          src: embedUrl,
+          className,
+          style: {
+            width: "100%",
+            height: "100%",
+            border: "none",
+            aspectRatio,
+            objectFit
+          },
+          allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture",
+          allowFullScreen: true,
+          loading
+        }
+      );
+    }
+    if (videoData.type === "vimeo" && src) {
+      const embedUrl = buildVimeoEmbedUrl(src, videoData);
+      return /* @__PURE__ */ jsx8(
+        "iframe",
+        {
+          src: embedUrl,
+          className,
+          style: {
+            width: "100%",
+            height: "100%",
+            border: "none",
+            aspectRatio,
+            objectFit
+          },
+          allow: "autoplay; fullscreen; picture-in-picture",
+          allowFullScreen: true,
+          loading
+        }
+      );
+    }
+    const resolvedSrc = resolveAssetUrl(src);
+    const resolvedPoster = poster ? resolveAssetUrl(poster) : void 0;
+    return /* @__PURE__ */ jsx8(
+      "video",
+      {
+        ref: videoRef,
+        src: resolvedSrc,
+        poster: resolvedPoster,
+        className,
+        style: {
+          objectFit,
+          aspectRatio
+        },
+        autoPlay: effectiveAutoplay,
+        muted,
+        loop,
+        controls: controls && isReadOnly,
+        playsInline: playsinline,
+        preload,
+        onLoadedMetadata: (e) => {
+          if (videoData.startTime) {
+            e.currentTarget.currentTime = videoData.startTime;
+          }
+        },
+        onTimeUpdate: (e) => {
+          if (videoData.endTime && e.currentTarget.currentTime >= videoData.endTime) {
+            if (loop) {
+              e.currentTarget.currentTime = videoData.startTime || 0;
+            } else {
+              e.currentTarget.pause();
+            }
+          }
+        }
+      }
+    );
+  };
+  if (mode === "read-only") {
+    return /* @__PURE__ */ jsx8(
+      "div",
+      {
+        ref: containerRef,
+        className: `ya-video-wrapper ${className || ""}`,
+        style: { aspectRatio },
+        "data-ya-restricted": "true",
+        "data-field-id": fieldId,
+        tabIndex: videoData.type === "upload" && controls ? 0 : void 0,
+        role: videoData.type === "upload" && controls ? "application" : void 0,
+        "aria-label": videoData.type === "upload" && controls ? "Video player. Press Space or Enter to play/pause." : void 0,
+        onKeyDown: handleKeyDown,
+        children: renderVideo(true)
+      }
+    );
+  }
+  const videoIcon = /* @__PURE__ */ jsxs4(
+    "svg",
+    {
+      width: "24",
+      height: "24",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      children: [
+        /* @__PURE__ */ jsx8("rect", { x: "2", y: "4", width: "15", height: "13", rx: "2", ry: "2" }),
+        /* @__PURE__ */ jsx8("polygon", { points: "22 7 15 12 22 17 22 7", fill: "currentColor" })
+      ]
+    }
+  );
+  return /* @__PURE__ */ jsxs4(
+    "div",
+    {
+      ref: containerRef,
+      className: `ya-video-container ${isSelected ? "ya-video-selected" : "ya-video-editable"} ${isSmallVideo ? "ya-video-small" : ""}`,
+      onClick: handleClick,
+      onMouseEnter: () => setIsHovered(true),
+      onMouseLeave: () => setIsHovered(false),
+      "data-ya-restricted": "true",
+      "data-field-id": fieldId,
+      "data-ya-video": "true",
+      role: "button",
+      tabIndex: 0,
+      "aria-label": `Edit video: ${fieldId}`,
+      onKeyDown: (e) => {
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          handleClick();
+        }
+      },
+      style: { aspectRatio },
+      children: [
+        renderVideo(false),
+        isSmallVideo ? /* @__PURE__ */ jsxs4(YaTooltip, { anchorRef: containerRef, show: isHovered && !isSelected, children: [
+          videoIcon,
+          /* @__PURE__ */ jsx8("span", { children: "Click to edit" })
+        ] }) : (
+          /* For large videos: show overlay inside the container */
+          /* @__PURE__ */ jsxs4("div", { className: "ya-video-overlay", children: [
+            /* @__PURE__ */ jsx8("div", { className: "ya-video-edit-icon", children: videoIcon }),
+            /* @__PURE__ */ jsx8("span", { className: "ya-video-edit-label", children: "Click to edit" })
+          ] })
+        )
+      ]
+    }
+  );
+}
+
 // src/components/YaLink.tsx
-import { useEffect as useEffect7, useRef as useRef8, useState as useState7, useCallback as useCallback8 } from "react";
+import { useEffect as useEffect8, useRef as useRef9, useState as useState8, useCallback as useCallback9 } from "react";
 import { createPortal as createPortal4 } from "react-dom";
 import { useEditor as useEditor2, EditorContent as EditorContent2 } from "@tiptap/react";
 import { BubbleMenu as BubbleMenu2 } from "@tiptap/react/menus";
@@ -2747,7 +3241,7 @@ import { Link as WouterLink, useLocation } from "wouter";
 styleInject('.ya-link-wrapper {\n  position: relative;\n  display: inline;\n}\n.ya-link-editable {\n  cursor: pointer;\n  transition: outline 0.15s ease;\n}\n.ya-link-editable:hover {\n  outline: 2px dashed var(--color-primary, #D4A574);\n  outline-offset: 4px;\n  border-radius: 4px;\n}\nbody.builder-selector-active .ya-link-editable:hover {\n  outline: none;\n  cursor: inherit;\n}\n.ya-link-editing {\n  outline: 2px solid var(--color-primary, #D4A574);\n  outline-offset: 4px;\n  border-radius: 4px;\n  position: relative;\n}\n.ya-link-actions {\n  display: flex;\n  gap: 8px;\n  position: absolute;\n  bottom: -60px;\n  right: 0;\n  z-index: 10;\n  background: rgba(26, 26, 26, 0.95);\n  padding: 8px 10px;\n  border-radius: 8px;\n  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);\n  font-family:\n    system-ui,\n    -apple-system,\n    BlinkMacSystemFont,\n    "Segoe UI",\n    sans-serif;\n}\n.ya-link-btn {\n  padding: 6px 14px;\n  font-size: 12px;\n  font-weight: 500;\n  border-radius: 6px;\n  cursor: pointer;\n  transition: all 0.15s ease;\n  border: none;\n}\n.ya-link-btn-cancel {\n  background: #333333;\n  color: #ffffff;\n  border: 1px solid #555555;\n}\n.ya-link-btn-cancel:hover {\n  background: #444444;\n  color: #ffffff;\n  border-color: #666666;\n}\n.ya-link-btn-save {\n  background: #D4A574;\n  color: #1a1a1a;\n}\n.ya-link-btn-save:hover {\n  background: #c4956a;\n}\n.ya-href-popover {\n  position: absolute;\n  top: 100%;\n  left: 50%;\n  margin-top: 8px;\n  z-index: 10;\n  min-width: 280px;\n  max-width: 320px;\n  background: #1a1a1a;\n  border-radius: 12px;\n  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);\n  transform: translateX(-50%);\n  animation: ya-href-popover-fade-in 0.15s ease;\n  overflow: hidden;\n  font-family:\n    system-ui,\n    -apple-system,\n    BlinkMacSystemFont,\n    "Segoe UI",\n    sans-serif;\n}\n@keyframes ya-href-popover-fade-in {\n  from {\n    opacity: 0;\n    transform: translateX(-50%) translateY(-8px);\n  }\n  to {\n    opacity: 1;\n    transform: translateX(-50%) translateY(0);\n  }\n}\n.ya-href-popover::before {\n  content: "";\n  position: absolute;\n  top: -6px;\n  left: 50%;\n  transform: translateX(-50%);\n  border-left: 8px solid transparent;\n  border-right: 8px solid transparent;\n  border-bottom: 8px solid #1a1a1a;\n}\n.ya-href-popover-header {\n  padding: 12px 16px;\n  font-size: 13px;\n  font-weight: 600;\n  color: #ffffff;\n  border-bottom: 1px solid rgba(255, 255, 255, 0.1);\n}\n.ya-href-popover-section {\n  padding: 12px 16px;\n}\n.ya-href-popover-label {\n  display: block;\n  font-size: 11px;\n  font-weight: 500;\n  color: rgba(255, 255, 255, 0.6);\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n  margin-bottom: 8px;\n}\n.ya-href-collapsible-header {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  width: 100%;\n  padding: 0;\n  background: transparent;\n  border: none;\n  cursor: pointer;\n  transition: color 0.15s ease;\n}\n.ya-href-collapsible-header:hover {\n  color: rgba(255, 255, 255, 0.8);\n}\n.ya-href-chevron {\n  font-size: 8px;\n  color: rgba(255, 255, 255, 0.4);\n}\n.ya-href-popover-pages {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n  max-height: 200px;\n  overflow-y: auto;\n}\n.ya-href-page-btn {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  gap: 4px;\n  width: 100%;\n  padding: 10px 12px;\n  background: rgba(255, 255, 255, 0.05);\n  border: 1px solid transparent;\n  border-radius: 8px;\n  color: #e0e0e0;\n  font-size: 13px;\n  font-weight: 500;\n  text-align: left;\n  cursor: pointer;\n  transition: all 0.15s ease;\n}\n.ya-href-page-btn:hover {\n  background: rgba(255, 255, 255, 0.1);\n  border-color: rgba(255, 255, 255, 0.2);\n}\n.ya-href-page-btn.is-selected {\n  background: #D4A574;\n  color: #1a1a1a;\n}\n.ya-href-page-btn.is-selected .ya-href-page-path {\n  color: rgba(26, 26, 26, 0.6);\n}\n.ya-href-page-path {\n  font-size: 11px;\n  color: rgba(255, 255, 255, 0.4);\n  font-family: monospace;\n  word-break: break-all;\n}\n.ya-href-external-toggle {\n  display: block;\n  width: 100%;\n  padding: 10px 16px;\n  background: transparent;\n  border: none;\n  border-top: 1px solid rgba(255, 255, 255, 0.1);\n  color: #D4A574;\n  font-size: 12px;\n  font-weight: 500;\n  text-align: center;\n  cursor: pointer;\n  transition: background 0.15s ease;\n}\n.ya-href-external-toggle:hover {\n  background: rgba(255, 255, 255, 0.05);\n}\n.ya-href-url-input {\n  width: 100%;\n  padding: 10px 12px;\n  background: rgba(255, 255, 255, 0.05);\n  border: 1px solid rgba(255, 255, 255, 0.2);\n  border-radius: 8px;\n  color: #ffffff;\n  font-size: 13px;\n  outline: none;\n  transition: border-color 0.15s ease;\n}\n.ya-href-url-input::placeholder {\n  color: rgba(255, 255, 255, 0.4);\n}\n.ya-href-url-input:focus {\n  border-color: var(--color-primary, #D4A574);\n}\n.ya-href-popover-actions {\n  display: flex;\n  justify-content: flex-end;\n  gap: 8px;\n  padding: 12px 16px;\n  border-top: 1px solid rgba(255, 255, 255, 0.1);\n}\n.ya-link-edit-popover {\n  position: absolute;\n  top: 100%;\n  left: 50%;\n  margin-top: 8px;\n  z-index: 10;\n  background: #2a2a2a;\n  border-radius: 6px;\n  padding: 4px;\n  display: flex;\n  gap: 4px;\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);\n  transform: translateX(-50%);\n  animation: ya-edit-popover-fade-in 0.1s ease;\n  font-family:\n    system-ui,\n    -apple-system,\n    BlinkMacSystemFont,\n    "Segoe UI",\n    sans-serif;\n  white-space: nowrap;\n}\n@keyframes ya-edit-popover-fade-in {\n  from {\n    opacity: 0;\n    transform: translateX(-50%) translateY(-4px);\n  }\n  to {\n    opacity: 1;\n    transform: translateX(-50%) translateY(0);\n  }\n}\n.ya-link-edit-popover::before {\n  content: "";\n  position: absolute;\n  top: -5px;\n  left: 50%;\n  transform: translateX(-50%);\n  border-left: 6px solid transparent;\n  border-right: 6px solid transparent;\n  border-bottom: 6px solid #2a2a2a;\n}\n.ya-link-edit-popover button {\n  background: #3a3a3a;\n  border: none;\n  color: #fff;\n  padding: 6px 12px;\n  border-radius: 4px;\n  cursor: pointer;\n  font-size: 13px;\n  font-weight: 500;\n  transition: background 0.15s ease;\n}\n.ya-link-edit-popover button:hover {\n  background: #4a4a4a;\n}\n');
 
 // src/components/YaLink.tsx
-import { Fragment as Fragment3, jsx as jsx8, jsxs as jsxs4 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx9, jsxs as jsxs5 } from "react/jsx-runtime";
 function isInternalPath(path) {
   if (!path) return false;
   if (path.startsWith("#")) return false;
@@ -2848,8 +3342,8 @@ function YaLink({ fieldId, href: defaultHref = "#", className, style, as: Compon
   const { getValue, setValue, mode, saveToWorker, getPages } = useContentStore();
   const [, navigate] = useLocation();
   const pages = availablePages ?? getPages();
-  const [sections, setSections] = useState7([]);
-  const [sectionsExpanded, setSectionsExpanded] = useState7(false);
+  const [sections, setSections] = useState8([]);
+  const [sectionsExpanded, setSectionsExpanded] = useState8(false);
   const textFieldId = `${fieldId}.text`;
   const hrefFieldId = `${fieldId}.href`;
   const storeText = getValue(textFieldId);
@@ -2860,16 +3354,16 @@ function YaLink({ fieldId, href: defaultHref = "#", className, style, as: Compon
   const isExternal = isExternalHref(href);
   const effectiveTarget = target ?? (isExternal ? "_blank" : void 0);
   const effectiveRel = rel ?? (isExternal ? "noopener noreferrer" : void 0);
-  const [editingMode, setEditingMode] = useState7(null);
-  const [showEditPopover, setShowEditPopover] = useState7(false);
-  const [originalText, setOriginalText] = useState7(text);
-  const [originalHref, setOriginalHref] = useState7(href);
-  const [currentHref, setCurrentHref] = useState7(href);
-  const [isExternalUrl, setIsExternalUrl] = useState7(false);
-  const [externalUrl, setExternalUrl] = useState7("");
-  const containerRef = useRef8(null);
-  const hrefPopoverRef = useRef8(null);
-  const hidePopoverTimeoutRef = useRef8(null);
+  const [editingMode, setEditingMode] = useState8(null);
+  const [showEditPopover, setShowEditPopover] = useState8(false);
+  const [originalText, setOriginalText] = useState8(text);
+  const [originalHref, setOriginalHref] = useState8(href);
+  const [currentHref, setCurrentHref] = useState8(href);
+  const [isExternalUrl, setIsExternalUrl] = useState8(false);
+  const [externalUrl, setExternalUrl] = useState8("");
+  const containerRef = useRef9(null);
+  const hrefPopoverRef = useRef9(null);
+  const hidePopoverTimeoutRef = useRef9(null);
   const editor = useEditor2({
     extensions: [
       StarterKit2.configure({
@@ -2892,26 +3386,26 @@ function YaLink({ fieldId, href: defaultHref = "#", className, style, as: Compon
       }
     }
   });
-  useEffect7(() => {
+  useEffect8(() => {
     if (editor && editingMode !== "text") {
       if (editor.getHTML() !== text) {
         editor.commands.setContent(text);
       }
     }
   }, [text, editor, editingMode]);
-  useEffect7(() => {
+  useEffect8(() => {
     if (editingMode !== "link") {
       setCurrentHref(href);
     }
   }, [href, editingMode]);
-  useEffect7(() => {
+  useEffect8(() => {
     return () => {
       if (hidePopoverTimeoutRef.current) {
         clearTimeout(hidePopoverTimeoutRef.current);
       }
     };
   }, []);
-  useEffect7(() => {
+  useEffect8(() => {
     if (editingMode !== "link") return;
     const handleClickOutside = (event) => {
       const target2 = event.target;
@@ -2925,7 +3419,7 @@ function YaLink({ fieldId, href: defaultHref = "#", className, style, as: Compon
     document.addEventListener("mousedown", handleClickOutside);
     return () => document.removeEventListener("mousedown", handleClickOutside);
   }, [editingMode, originalHref]);
-  const handleSaveText = useCallback8(() => {
+  const handleSaveText = useCallback9(() => {
     if (!editor) return;
     let html = editor.getHTML();
     html = html.replace(/<\/p><p>/g, "<br><br>").replace(/^<p>/, "").replace(/<\/p>$/, "");
@@ -2933,26 +3427,26 @@ function YaLink({ fieldId, href: defaultHref = "#", className, style, as: Compon
     saveToWorker?.(textFieldId, html);
     setEditingMode(null);
   }, [editor, textFieldId, setValue, saveToWorker]);
-  const handleSaveLink = useCallback8(() => {
+  const handleSaveLink = useCallback9(() => {
     setValue(hrefFieldId, currentHref);
     saveToWorker?.(hrefFieldId, currentHref);
     setEditingMode(null);
     setIsExternalUrl(false);
     setExternalUrl("");
   }, [hrefFieldId, currentHref, setValue, saveToWorker]);
-  const handleCancelText = useCallback8(() => {
+  const handleCancelText = useCallback9(() => {
     if (editor) {
       editor.commands.setContent(originalText);
     }
     setEditingMode(null);
   }, [editor, originalText]);
-  const handleCancelLink = useCallback8(() => {
+  const handleCancelLink = useCallback9(() => {
     setCurrentHref(originalHref);
     setEditingMode(null);
     setIsExternalUrl(false);
     setExternalUrl("");
   }, [originalHref]);
-  const handleClick = useCallback8(
+  const handleClick = useCallback9(
     (e) => {
       const selectModeEnabled = window.__builderSelectModeEnabled;
       if (selectModeEnabled) {
@@ -2984,7 +3478,7 @@ function YaLink({ fieldId, href: defaultHref = "#", className, style, as: Compon
     },
     [href, navigate, onClick]
   );
-  const handleMouseEnter = useCallback8(() => {
+  const handleMouseEnter = useCallback9(() => {
     if (hidePopoverTimeoutRef.current) {
       clearTimeout(hidePopoverTimeoutRef.current);
       hidePopoverTimeoutRef.current = null;
@@ -2993,19 +3487,19 @@ function YaLink({ fieldId, href: defaultHref = "#", className, style, as: Compon
       setShowEditPopover(true);
     }
   }, [mode, editingMode]);
-  const handleMouseLeave = useCallback8(() => {
+  const handleMouseLeave = useCallback9(() => {
     hidePopoverTimeoutRef.current = window.setTimeout(() => {
       if (!editingMode) {
         setShowEditPopover(false);
       }
     }, 150);
   }, [editingMode]);
-  const handleFocus = useCallback8(() => {
+  const handleFocus = useCallback9(() => {
     if (mode === "inline-edit" && !editingMode) {
       setShowEditPopover(true);
     }
   }, [mode, editingMode]);
-  const startEditText = useCallback8(() => {
+  const startEditText = useCallback9(() => {
     setShowEditPopover(false);
     setEditingMode("text");
     setOriginalText(text);
@@ -3013,14 +3507,14 @@ function YaLink({ fieldId, href: defaultHref = "#", className, style, as: Compon
       editor?.chain().focus().selectAll().run();
     }, 20);
   }, [text, editor]);
-  const startEditLink = useCallback8(() => {
+  const startEditLink = useCallback9(() => {
     setShowEditPopover(false);
     setEditingMode("link");
     setOriginalHref(href);
     setCurrentHref(href);
     setSections(discoverSectionsFromDOM());
   }, [href]);
-  const handleKeyDown = useCallback8(
+  const handleKeyDown = useCallback9(
     (event) => {
       if (editingMode !== "text") return;
       if (event.key === "Enter" && !event.shiftKey) {
@@ -3041,7 +3535,7 @@ function YaLink({ fieldId, href: defaultHref = "#", className, style, as: Compon
     },
     [editingMode, handleSaveText, handleCancelText]
   );
-  const handleFontSizeChange = useCallback8(
+  const handleFontSizeChange = useCallback9(
     (e) => {
       if (!editor) return;
       const size = e.target.value;
@@ -3053,7 +3547,7 @@ function YaLink({ fieldId, href: defaultHref = "#", className, style, as: Compon
     },
     [editor]
   );
-  const handleFontWeightChange = useCallback8(
+  const handleFontWeightChange = useCallback9(
     (e) => {
       if (!editor) return;
       const weight = e.target.value;
@@ -3065,11 +3559,11 @@ function YaLink({ fieldId, href: defaultHref = "#", className, style, as: Compon
     },
     [editor]
   );
-  const handlePageSelect = useCallback8((path) => {
+  const handlePageSelect = useCallback9((path) => {
     setCurrentHref(path);
     setIsExternalUrl(false);
   }, []);
-  const handleExternalUrlApply = useCallback8(() => {
+  const handleExternalUrlApply = useCallback9(() => {
     if (externalUrl) {
       setCurrentHref(externalUrl);
     }
@@ -3085,9 +3579,9 @@ function YaLink({ fieldId, href: defaultHref = "#", className, style, as: Compon
     return attrs.fontWeight || "";
   };
   if (mode === "read-only") {
-    const content = isIconMode ? children : /* @__PURE__ */ jsx8(SafeHtml, { content: text, mode });
+    const content = isIconMode ? children : /* @__PURE__ */ jsx9(SafeHtml, { content: text, mode });
     if (isInternalPath(href)) {
-      return /* @__PURE__ */ jsx8(
+      return /* @__PURE__ */ jsx9(
         WouterLink,
         {
           href,
@@ -3099,7 +3593,7 @@ function YaLink({ fieldId, href: defaultHref = "#", className, style, as: Compon
         }
       );
     }
-    return /* @__PURE__ */ jsx8(
+    return /* @__PURE__ */ jsx9(
       Component,
       {
         ref: containerRef,
@@ -3114,8 +3608,8 @@ function YaLink({ fieldId, href: defaultHref = "#", className, style, as: Compon
       }
     );
   }
-  return /* @__PURE__ */ jsxs4("span", { className: "ya-link-wrapper", children: [
-    /* @__PURE__ */ jsx8(
+  return /* @__PURE__ */ jsxs5("span", { className: "ya-link-wrapper", children: [
+    /* @__PURE__ */ jsx9(
       Component,
       {
         ref: containerRef,
@@ -3134,9 +3628,9 @@ function YaLink({ fieldId, href: defaultHref = "#", className, style, as: Compon
         children: isIconMode ? (
           // Icon mode: render children directly, no text editing
           children
-        ) : editor ? /* @__PURE__ */ jsxs4(Fragment3, { children: [
+        ) : editor ? /* @__PURE__ */ jsxs5(Fragment3, { children: [
           createPortal4(
-            /* @__PURE__ */ jsxs4(
+            /* @__PURE__ */ jsxs5(
               BubbleMenu2,
               {
                 editor,
@@ -3144,28 +3638,28 @@ function YaLink({ fieldId, href: defaultHref = "#", className, style, as: Compon
                 options: { offset: 6, placement: "top" },
                 className: "ya-bubble-menu",
                 children: [
-                  /* @__PURE__ */ jsx8(
+                  /* @__PURE__ */ jsx9(
                     "button",
                     {
                       type: "button",
                       onClick: () => editor.chain().focus().toggleBold().run(),
                       className: `ya-bubble-btn ${editor.isActive("bold") ? "is-active" : ""}`,
                       title: "Bold",
-                      children: /* @__PURE__ */ jsx8("strong", { children: "B" })
+                      children: /* @__PURE__ */ jsx9("strong", { children: "B" })
                     }
                   ),
-                  /* @__PURE__ */ jsx8(
+                  /* @__PURE__ */ jsx9(
                     "button",
                     {
                       type: "button",
                       onClick: () => editor.chain().focus().toggleItalic().run(),
                       className: `ya-bubble-btn ${editor.isActive("italic") ? "is-active" : ""}`,
                       title: "Italic",
-                      children: /* @__PURE__ */ jsx8("em", { children: "I" })
+                      children: /* @__PURE__ */ jsx9("em", { children: "I" })
                     }
                   ),
-                  /* @__PURE__ */ jsx8("span", { className: "ya-bubble-divider" }),
-                  /* @__PURE__ */ jsxs4(
+                  /* @__PURE__ */ jsx9("span", { className: "ya-bubble-divider" }),
+                  /* @__PURE__ */ jsxs5(
                     "select",
                     {
                       value: getCurrentFontSize(),
@@ -3173,12 +3667,12 @@ function YaLink({ fieldId, href: defaultHref = "#", className, style, as: Compon
                       className: "ya-bubble-select",
                       title: "Font Size",
                       children: [
-                        /* @__PURE__ */ jsx8("option", { value: "", children: "Size" }),
-                        Object.entries(SIZE_PRESETS2).map(([name, size]) => /* @__PURE__ */ jsx8("option", { value: size, children: name }, name))
+                        /* @__PURE__ */ jsx9("option", { value: "", children: "Size" }),
+                        Object.entries(SIZE_PRESETS2).map(([name, size]) => /* @__PURE__ */ jsx9("option", { value: size, children: name }, name))
                       ]
                     }
                   ),
-                  /* @__PURE__ */ jsxs4(
+                  /* @__PURE__ */ jsxs5(
                     "select",
                     {
                       value: getCurrentFontWeight(),
@@ -3186,8 +3680,8 @@ function YaLink({ fieldId, href: defaultHref = "#", className, style, as: Compon
                       className: "ya-bubble-select",
                       title: "Font Weight",
                       children: [
-                        /* @__PURE__ */ jsx8("option", { value: "", children: "Weight" }),
-                        Object.entries(WEIGHT_PRESETS2).map(([name, weight]) => /* @__PURE__ */ jsx8("option", { value: weight, children: name }, name))
+                        /* @__PURE__ */ jsx9("option", { value: "", children: "Weight" }),
+                        Object.entries(WEIGHT_PRESETS2).map(([name, weight]) => /* @__PURE__ */ jsx9("option", { value: weight, children: name }, name))
                       ]
                     }
                   )
@@ -3196,39 +3690,39 @@ function YaLink({ fieldId, href: defaultHref = "#", className, style, as: Compon
             ),
             document.body
           ),
-          editingMode === "text" ? /* @__PURE__ */ jsxs4(Fragment3, { children: [
-            /* @__PURE__ */ jsx8(EditorContent2, { editor }),
-            /* @__PURE__ */ jsxs4("div", { className: "ya-link-actions", children: [
-              /* @__PURE__ */ jsx8("button", { type: "button", onClick: handleCancelText, className: "ya-link-btn ya-link-btn-cancel", children: "Cancel" }),
-              /* @__PURE__ */ jsx8("button", { type: "button", onClick: handleSaveText, className: "ya-link-btn ya-link-btn-save", children: "Save" })
+          editingMode === "text" ? /* @__PURE__ */ jsxs5(Fragment3, { children: [
+            /* @__PURE__ */ jsx9(EditorContent2, { editor }),
+            /* @__PURE__ */ jsxs5("div", { className: "ya-link-actions", children: [
+              /* @__PURE__ */ jsx9("button", { type: "button", onClick: handleCancelText, className: "ya-link-btn ya-link-btn-cancel", children: "Cancel" }),
+              /* @__PURE__ */ jsx9("button", { type: "button", onClick: handleSaveText, className: "ya-link-btn ya-link-btn-save", children: "Save" })
             ] })
-          ] }) : /* @__PURE__ */ jsx8(SafeHtml, { content: text, mode })
-        ] }) : /* @__PURE__ */ jsx8(SafeHtml, { content: text, mode })
+          ] }) : /* @__PURE__ */ jsx9(SafeHtml, { content: text, mode })
+        ] }) : /* @__PURE__ */ jsx9(SafeHtml, { content: text, mode })
       }
     ),
-    showEditPopover && !editingMode && mode === "inline-edit" && /* @__PURE__ */ jsxs4("div", { className: "ya-link-edit-popover", onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, children: [
-      !isIconMode && /* @__PURE__ */ jsx8("button", { type: "button", onClick: startEditText, children: "Edit text" }),
-      /* @__PURE__ */ jsx8("button", { type: "button", onClick: startEditLink, children: "Edit link" })
+    showEditPopover && !editingMode && mode === "inline-edit" && /* @__PURE__ */ jsxs5("div", { className: "ya-link-edit-popover", onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, children: [
+      !isIconMode && /* @__PURE__ */ jsx9("button", { type: "button", onClick: startEditText, children: "Edit text" }),
+      /* @__PURE__ */ jsx9("button", { type: "button", onClick: startEditLink, children: "Edit link" })
     ] }),
-    editingMode === "link" && /* @__PURE__ */ jsxs4("div", { ref: hrefPopoverRef, className: "ya-href-popover", children: [
-      /* @__PURE__ */ jsx8("div", { className: "ya-href-popover-header", children: "Link destination" }),
-      !isExternalUrl ? /* @__PURE__ */ jsxs4(Fragment3, { children: [
-        sections.length > 0 && /* @__PURE__ */ jsxs4("div", { className: "ya-href-popover-section", children: [
-          /* @__PURE__ */ jsxs4(
+    editingMode === "link" && /* @__PURE__ */ jsxs5("div", { ref: hrefPopoverRef, className: "ya-href-popover", children: [
+      /* @__PURE__ */ jsx9("div", { className: "ya-href-popover-header", children: "Link destination" }),
+      !isExternalUrl ? /* @__PURE__ */ jsxs5(Fragment3, { children: [
+        sections.length > 0 && /* @__PURE__ */ jsxs5("div", { className: "ya-href-popover-section", children: [
+          /* @__PURE__ */ jsxs5(
             "button",
             {
               type: "button",
               className: "ya-href-popover-label ya-href-collapsible-header",
               onClick: () => setSectionsExpanded(!sectionsExpanded),
               children: [
-                /* @__PURE__ */ jsx8("span", { className: "ya-href-chevron", children: sectionsExpanded ? "\u25BC" : "\u25B6" }),
+                /* @__PURE__ */ jsx9("span", { className: "ya-href-chevron", children: sectionsExpanded ? "\u25BC" : "\u25B6" }),
                 "Scroll to section (",
                 sections.length,
                 ")"
               ]
             }
           ),
-          sectionsExpanded && /* @__PURE__ */ jsx8("div", { className: "ya-href-popover-pages", children: sections.map((section) => /* @__PURE__ */ jsxs4(
+          sectionsExpanded && /* @__PURE__ */ jsx9("div", { className: "ya-href-popover-pages", children: sections.map((section) => /* @__PURE__ */ jsxs5(
             "button",
             {
               type: "button",
@@ -3236,15 +3730,15 @@ function YaLink({ fieldId, href: defaultHref = "#", className, style, as: Compon
               onClick: () => handlePageSelect(section.path),
               children: [
                 section.label,
-                /* @__PURE__ */ jsx8("span", { className: "ya-href-page-path", children: section.path })
+                /* @__PURE__ */ jsx9("span", { className: "ya-href-page-path", children: section.path })
               ]
             },
             section.path
           )) })
         ] }),
-        pages.length > 0 && /* @__PURE__ */ jsxs4("div", { className: "ya-href-popover-section", children: [
-          /* @__PURE__ */ jsx8("label", { className: "ya-href-popover-label", children: "Navigate to page" }),
-          /* @__PURE__ */ jsx8("div", { className: "ya-href-popover-pages", children: pages.map((page) => /* @__PURE__ */ jsxs4(
+        pages.length > 0 && /* @__PURE__ */ jsxs5("div", { className: "ya-href-popover-section", children: [
+          /* @__PURE__ */ jsx9("label", { className: "ya-href-popover-label", children: "Navigate to page" }),
+          /* @__PURE__ */ jsx9("div", { className: "ya-href-popover-pages", children: pages.map((page) => /* @__PURE__ */ jsxs5(
             "button",
             {
               type: "button",
@@ -3252,13 +3746,13 @@ function YaLink({ fieldId, href: defaultHref = "#", className, style, as: Compon
               onClick: () => handlePageSelect(page.path),
               children: [
                 page.label,
-                /* @__PURE__ */ jsx8("span", { className: "ya-href-page-path", children: page.path })
+                /* @__PURE__ */ jsx9("span", { className: "ya-href-page-path", children: page.path })
               ]
             },
             page.path
           )) })
         ] }),
-        /* @__PURE__ */ jsx8(
+        /* @__PURE__ */ jsx9(
           "button",
           {
             type: "button",
@@ -3270,10 +3764,10 @@ function YaLink({ fieldId, href: defaultHref = "#", className, style, as: Compon
             children: "Use external URL instead"
           }
         )
-      ] }) : /* @__PURE__ */ jsxs4(Fragment3, { children: [
-        /* @__PURE__ */ jsxs4("div", { className: "ya-href-popover-section", children: [
-          /* @__PURE__ */ jsx8("label", { className: "ya-href-popover-label", children: "External URL" }),
-          /* @__PURE__ */ jsx8(
+      ] }) : /* @__PURE__ */ jsxs5(Fragment3, { children: [
+        /* @__PURE__ */ jsxs5("div", { className: "ya-href-popover-section", children: [
+          /* @__PURE__ */ jsx9("label", { className: "ya-href-popover-label", children: "External URL" }),
+          /* @__PURE__ */ jsx9(
             "input",
             {
               type: "url",
@@ -3285,21 +3779,444 @@ function YaLink({ fieldId, href: defaultHref = "#", className, style, as: Compon
             }
           )
         ] }),
-        /* @__PURE__ */ jsx8("button", { type: "button", className: "ya-href-external-toggle", onClick: () => setIsExternalUrl(false), children: "\u2190 Back to pages" })
+        /* @__PURE__ */ jsx9("button", { type: "button", className: "ya-href-external-toggle", onClick: () => setIsExternalUrl(false), children: "\u2190 Back to pages" })
       ] }),
-      /* @__PURE__ */ jsxs4("div", { className: "ya-href-popover-actions", children: [
-        /* @__PURE__ */ jsx8("button", { type: "button", className: "ya-link-btn ya-link-btn-cancel", onClick: handleCancelLink, children: "Cancel" }),
-        isExternalUrl ? /* @__PURE__ */ jsx8("button", { type: "button", className: "ya-link-btn ya-link-btn-save", onClick: handleExternalUrlApply, children: "Apply" }) : /* @__PURE__ */ jsx8("button", { type: "button", className: "ya-link-btn ya-link-btn-save", onClick: handleSaveLink, children: "Save" })
+      /* @__PURE__ */ jsxs5("div", { className: "ya-href-popover-actions", children: [
+        /* @__PURE__ */ jsx9("button", { type: "button", className: "ya-link-btn ya-link-btn-cancel", onClick: handleCancelLink, children: "Cancel" }),
+        isExternalUrl ? /* @__PURE__ */ jsx9("button", { type: "button", className: "ya-link-btn ya-link-btn-save", onClick: handleExternalUrlApply, children: "Apply" }) : /* @__PURE__ */ jsx9("button", { type: "button", className: "ya-link-btn ya-link-btn-save", onClick: handleSaveLink, children: "Save" })
       ] })
     ] })
   ] });
 }
 
+// src/components/YaContainer.tsx
+import { useCallback as useCallback10, useEffect as useEffect9, useRef as useRef10, useState as useState9 } from "react";
+import { createPortal as createPortal5 } from "react-dom";
+
+// src/components/ya-container.css
+styleInject('.ya-container {\n  position: relative;\n}\n.ya-container-has-overlay::after {\n  content: "";\n  position: absolute;\n  inset: 0;\n  background: var(--ya-overlay-color, transparent);\n  opacity: var(--ya-overlay-opacity, 0);\n  pointer-events: none;\n  z-index: 0;\n}\n.ya-container > *:not(.ya-container-toolbar) {\n  position: relative;\n  z-index: 1;\n}\n.ya-container-editable {\n  transition: outline 0.15s ease;\n}\n.ya-container-editable:hover {\n  outline: 2px dashed var(--color-primary, #D4A574);\n  outline-offset: -2px;\n}\nbody.builder-selector-active .ya-container-editable:hover {\n  outline: none;\n}\n.ya-container-selected {\n  outline: 3px solid var(--color-primary, #D4A574);\n  outline-offset: -3px;\n}\n.ya-container-toolbar {\n  display: flex;\n  gap: 4px;\n  background: rgba(26, 26, 26, 0.95);\n  padding: 6px 8px;\n  border-radius: 8px;\n  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);\n  z-index: 9999;\n  animation: ya-container-toolbar-fade-in 0.15s ease;\n}\n@keyframes ya-container-toolbar-fade-in {\n  from {\n    opacity: 0;\n    transform: translateY(-4px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n.ya-container-toolbar button {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 32px;\n  height: 32px;\n  background: #3a3a3a;\n  border: none;\n  border-radius: 6px;\n  color: #ffffff;\n  cursor: pointer;\n  transition: background 0.15s ease, transform 0.1s ease;\n}\n.ya-container-toolbar button:hover {\n  background: #4a4a4a;\n  transform: scale(1.05);\n}\n.ya-container-toolbar button:active {\n  transform: scale(0.98);\n}\n.ya-container-toolbar button.active {\n  background: var(--color-primary, #D4A574);\n  color: #1a1a1a;\n}\n.ya-container-toolbar button svg {\n  width: 16px;\n  height: 16px;\n}\n.ya-container-toolbar button[aria-label="Clear background"] {\n  background: #3a2a2a;\n}\n.ya-container-toolbar button[aria-label="Clear background"]:hover {\n  background: #5a3a3a;\n}\n.ya-container:focus-visible {\n  outline: 3px solid var(--color-primary, #D4A574);\n  outline-offset: -3px;\n}\n.ya-container-toolbar button:focus-visible {\n  outline: 2px solid var(--color-primary, #D4A574);\n  outline-offset: 2px;\n}\n.ya-container-drop-target {\n  outline: 2px dashed var(--ya-drop-color, #3b82f6) !important;\n  outline-offset: -2px;\n}\n.ya-container-drop-target .ya-container-toolbar {\n  display: none !important;\n}\n.ya-container-drop-hover {\n  outline: 3px solid var(--ya-drop-color, #3b82f6) !important;\n  outline-offset: -3px;\n}\n.ya-container-drop-hover::before {\n  content: "";\n  position: absolute;\n  inset: 0;\n  background: rgba(59, 130, 246, 0.08);\n  pointer-events: none;\n  z-index: 10;\n  animation: ya-container-drop-pulse 1s ease-in-out infinite;\n}\n@keyframes ya-container-drop-pulse {\n  0%, 100% {\n    background: rgba(59, 130, 246, 0.05);\n  }\n  50% {\n    background: rgba(59, 130, 246, 0.12);\n  }\n}\n');
+
+// src/components/YaContainer.tsx
+import { jsx as jsx10, jsxs as jsxs6 } from "react/jsx-runtime";
+function parseBackgroundConfig(value) {
+  if (!value) {
+    return { type: "none" };
+  }
+  try {
+    const parsed = JSON.parse(value);
+    if (typeof parsed === "object" && parsed.type) {
+      return parsed;
+    }
+  } catch {
+  }
+  return { type: "none" };
+}
+function serializeBackgroundConfig(config) {
+  return JSON.stringify(config);
+}
+function getObjectPosition2(imageConfig) {
+  if (imageConfig.focalPoint) {
+    return `${imageConfig.focalPoint.x}% ${imageConfig.focalPoint.y}%`;
+  }
+  return imageConfig.objectPosition || "50% 50%";
+}
+function deriveContainerLabel(element) {
+  if (!element) return "Section";
+  const tagName = element.tagName.toLowerCase();
+  const id = element.id;
+  const ariaLabel = element.getAttribute("aria-label");
+  if (ariaLabel) return ariaLabel;
+  if (id) return id.replace(/-/g, " ").replace(/([A-Z])/g, " $1").trim();
+  const tagLabels = {
+    section: "Section",
+    header: "Header",
+    footer: "Footer",
+    main: "Main Content",
+    article: "Article",
+    aside: "Sidebar",
+    div: "Container"
+  };
+  return tagLabels[tagName] || "Section";
+}
+function Toolbar({ containerRef, onImageClick, onColorClick, onAIClick, onClearClick, hasBackground }) {
+  const [position, setPosition] = useState9(null);
+  useEffect9(() => {
+    const updatePosition = () => {
+      if (containerRef.current) {
+        const rect = containerRef.current.getBoundingClientRect();
+        setPosition({
+          top: rect.top + 8,
+          left: rect.left + 8
+        });
+      }
+    };
+    updatePosition();
+    window.addEventListener("scroll", updatePosition, true);
+    window.addEventListener("resize", updatePosition);
+    return () => {
+      window.removeEventListener("scroll", updatePosition, true);
+      window.removeEventListener("resize", updatePosition);
+    };
+  }, [containerRef]);
+  if (!position) return null;
+  return createPortal5(
+    /* @__PURE__ */ jsxs6(
+      "div",
+      {
+        className: "ya-container-toolbar",
+        style: {
+          position: "fixed",
+          top: position.top,
+          left: position.left
+        },
+        onClick: (e) => e.stopPropagation(),
+        children: [
+          /* @__PURE__ */ jsx10(
+            "button",
+            {
+              type: "button",
+              onClick: onImageClick,
+              "aria-label": "Edit background image",
+              title: "Background Image",
+              children: /* @__PURE__ */ jsxs6("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+                /* @__PURE__ */ jsx10("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2", ry: "2" }),
+                /* @__PURE__ */ jsx10("circle", { cx: "8.5", cy: "8.5", r: "1.5" }),
+                /* @__PURE__ */ jsx10("polyline", { points: "21 15 16 10 5 21" })
+              ] })
+            }
+          ),
+          /* @__PURE__ */ jsx10(
+            "button",
+            {
+              type: "button",
+              onClick: onColorClick,
+              "aria-label": "Edit background color",
+              title: "Background Color",
+              children: /* @__PURE__ */ jsxs6("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+                /* @__PURE__ */ jsx10("circle", { cx: "12", cy: "12", r: "10" }),
+                /* @__PURE__ */ jsx10("path", { d: "M12 2a10 10 0 0 1 0 20", fill: "currentColor" })
+              ] })
+            }
+          ),
+          /* @__PURE__ */ jsx10(
+            "button",
+            {
+              type: "button",
+              onClick: onAIClick,
+              "aria-label": "Ask AI for help",
+              title: "AI Assist",
+              children: /* @__PURE__ */ jsxs6("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+                /* @__PURE__ */ jsx10("path", { d: "M12 2L2 7l10 5 10-5-10-5z" }),
+                /* @__PURE__ */ jsx10("path", { d: "M2 17l10 5 10-5" }),
+                /* @__PURE__ */ jsx10("path", { d: "M2 12l10 5 10-5" })
+              ] })
+            }
+          ),
+          hasBackground && /* @__PURE__ */ jsx10(
+            "button",
+            {
+              type: "button",
+              onClick: onClearClick,
+              "aria-label": "Clear background",
+              title: "Clear Background",
+              children: /* @__PURE__ */ jsxs6("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+                /* @__PURE__ */ jsx10("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+                /* @__PURE__ */ jsx10("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+              ] })
+            }
+          )
+        ]
+      }
+    ),
+    document.body
+  );
+}
+function YaContainer({
+  fieldId,
+  className,
+  style,
+  as: Tag = "section",
+  children,
+  defaultBackground
+}) {
+  const { getValue, setValue, saveToWorker, mode } = useContentStore();
+  const containerRef = useRef10(null);
+  const [isHovered, setIsHovered] = useState9(false);
+  const [isSelected, setIsSelected] = useState9(false);
+  const [isDropMode, setIsDropMode] = useState9(false);
+  const [isDropHover, setIsDropHover] = useState9(false);
+  const rawValue = getValue(fieldId);
+  const backgroundConfig = rawValue ? parseBackgroundConfig(rawValue) : defaultBackground || { type: "none" };
+  const hasBackground = backgroundConfig.type !== "none";
+  const backgroundStyles = {};
+  if (backgroundConfig.type === "color" && backgroundConfig.backgroundColor) {
+    backgroundStyles.backgroundColor = backgroundConfig.backgroundColor;
+  }
+  if (backgroundConfig.type === "image" && backgroundConfig.backgroundImage) {
+    const img = backgroundConfig.backgroundImage;
+    const resolvedSrc = resolveAssetUrl(img.src);
+    backgroundStyles.backgroundImage = `url(${resolvedSrc})`;
+    backgroundStyles.backgroundSize = img.objectFit || "cover";
+    backgroundStyles.backgroundPosition = getObjectPosition2(img);
+    backgroundStyles.backgroundRepeat = "no-repeat";
+  }
+  const overlayCustomProps = {};
+  if (backgroundConfig.overlay) {
+    overlayCustomProps["--ya-overlay-color"] = backgroundConfig.overlay.color;
+    overlayCustomProps["--ya-overlay-opacity"] = backgroundConfig.overlay.opacity;
+  }
+  const handleImageClick = useCallback10(() => {
+    if (mode !== "inline-edit") return;
+    setIsSelected(true);
+    const rect = containerRef.current?.getBoundingClientRect();
+    window.parent.postMessage(
+      {
+        type: "YA_CONTAINER_EDIT_REQUEST",
+        fieldId,
+        currentValue: backgroundConfig,
+        editType: "image",
+        elementRect: rect ? {
+          top: rect.top,
+          left: rect.left,
+          width: rect.width,
+          height: rect.height
+        } : void 0
+      },
+      "*"
+    );
+  }, [mode, fieldId, backgroundConfig]);
+  const handleColorClick = useCallback10(() => {
+    if (mode !== "inline-edit") return;
+    setIsSelected(true);
+    const rect = containerRef.current?.getBoundingClientRect();
+    window.parent.postMessage(
+      {
+        type: "YA_CONTAINER_EDIT_REQUEST",
+        fieldId,
+        currentValue: backgroundConfig,
+        editType: "color",
+        elementRect: rect ? {
+          top: rect.top,
+          left: rect.left,
+          width: rect.width,
+          height: rect.height
+        } : void 0
+      },
+      "*"
+    );
+  }, [mode, fieldId, backgroundConfig]);
+  const handleAIClick = useCallback10(() => {
+    if (mode !== "inline-edit") return;
+    const label = deriveContainerLabel(containerRef.current);
+    window.parent.postMessage(
+      {
+        type: "YA_CONTAINER_SELECT_FOR_AI",
+        fieldId,
+        label: `Background: ${label}`,
+        currentValue: backgroundConfig
+      },
+      "*"
+    );
+  }, [mode, fieldId, backgroundConfig]);
+  const handleClearClick = useCallback10(() => {
+    if (mode !== "inline-edit") return;
+    const clearedConfig = { type: "none" };
+    const serialized = serializeBackgroundConfig(clearedConfig);
+    setValue(fieldId, serialized);
+    saveToWorker?.(fieldId, serialized);
+  }, [mode, fieldId, setValue, saveToWorker]);
+  useEffect9(() => {
+    if (mode !== "inline-edit") return;
+    const handleMessage2 = (event) => {
+      if (event.data?.type === "YA_CONTAINER_EDIT_COMPLETE" && event.data.fieldId === fieldId) {
+        setIsSelected(false);
+      }
+      if (event.data?.type === "YA_CONTAINER_EDIT_CANCEL" && event.data.fieldId === fieldId) {
+        setIsSelected(false);
+      }
+    };
+    window.addEventListener("message", handleMessage2);
+    return () => window.removeEventListener("message", handleMessage2);
+  }, [mode, fieldId]);
+  useEffect9(() => {
+    if (mode !== "inline-edit") return;
+    const handleDropModeMessage = (event) => {
+      if (event.data?.type === "DROP_MODE_START") {
+        setIsDropMode(true);
+      }
+      if (event.data?.type === "DROP_MODE_END") {
+        setIsDropMode(false);
+        setIsDropHover(false);
+      }
+    };
+    window.addEventListener("message", handleDropModeMessage);
+    return () => window.removeEventListener("message", handleDropModeMessage);
+  }, [mode]);
+  const handleDragEnter = useCallback10(
+    (e) => {
+      if (!isDropMode) return;
+      e.preventDefault();
+      e.stopPropagation();
+      setIsDropHover(true);
+      const rect = containerRef.current?.getBoundingClientRect();
+      window.parent.postMessage(
+        {
+          type: "DROP_ZONE_ENTER",
+          fieldId,
+          zoneType: "background",
+          rect: rect ? {
+            top: rect.top,
+            left: rect.left,
+            width: rect.width,
+            height: rect.height
+          } : { top: 0, left: 0, width: 0, height: 0 }
+        },
+        "*"
+      );
+    },
+    [isDropMode, fieldId]
+  );
+  const handleDragOver = useCallback10(
+    (e) => {
+      if (!isDropMode) return;
+      e.preventDefault();
+      e.stopPropagation();
+    },
+    [isDropMode]
+  );
+  const handleDragLeave = useCallback10(
+    (e) => {
+      if (!isDropMode) return;
+      e.preventDefault();
+      e.stopPropagation();
+      const target = e.currentTarget;
+      const relatedTarget = e.relatedTarget;
+      if (!relatedTarget || !target.contains(relatedTarget)) {
+        setIsDropHover(false);
+        window.parent.postMessage({ type: "DROP_ZONE_LEAVE" }, "*");
+      }
+    },
+    [isDropMode]
+  );
+  const handleDrop = useCallback10(
+    (e) => {
+      if (!isDropMode) return;
+      e.preventDefault();
+      e.stopPropagation();
+      setIsDropHover(false);
+      setIsDropMode(false);
+      window.parent.postMessage(
+        {
+          type: "DROP_ZONE_DROP",
+          fieldId,
+          zoneType: "background"
+        },
+        "*"
+      );
+    },
+    [isDropMode, fieldId]
+  );
+  useEffect9(() => {
+    if (!isSelected || mode !== "inline-edit") return;
+    let lastRectKey = "";
+    let lastTime = 0;
+    let rafId;
+    const loop = (time) => {
+      if (time - lastTime >= 50) {
+        const rect = containerRef.current?.getBoundingClientRect();
+        if (rect) {
+          const rectKey = `${Math.round(rect.top)},${Math.round(rect.left)},${Math.round(rect.width)},${Math.round(rect.height)}`;
+          if (rectKey !== lastRectKey) {
+            lastRectKey = rectKey;
+            window.parent.postMessage(
+              {
+                type: "YA_CONTAINER_POSITION_UPDATE",
+                fieldId,
+                elementRect: {
+                  top: rect.top,
+                  left: rect.left,
+                  width: rect.width,
+                  height: rect.height
+                }
+              },
+              "*"
+            );
+          }
+        }
+        lastTime = time;
+      }
+      rafId = requestAnimationFrame(loop);
+    };
+    rafId = requestAnimationFrame(loop);
+    return () => cancelAnimationFrame(rafId);
+  }, [isSelected, fieldId, mode]);
+  if (mode === "read-only") {
+    return /* @__PURE__ */ jsx10(
+      Tag,
+      {
+        className: `ya-container ${className || ""}`,
+        style: {
+          ...backgroundStyles,
+          ...overlayCustomProps,
+          ...style
+        },
+        "data-ya-restricted": "true",
+        "data-field-id": fieldId,
+        children
+      }
+    );
+  }
+  const containerClasses = [
+    "ya-container",
+    mode === "inline-edit" ? "ya-container-editable" : "",
+    isSelected ? "ya-container-selected" : "",
+    hasBackground ? "ya-container-has-overlay" : "",
+    isDropMode ? "ya-container-drop-target" : "",
+    isDropHover ? "ya-container-drop-hover" : "",
+    className || ""
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs6(
+    Tag,
+    {
+      ref: containerRef,
+      className: containerClasses,
+      style: {
+        ...backgroundStyles,
+        ...overlayCustomProps,
+        ...style
+      },
+      "data-ya-restricted": "true",
+      "data-field-id": fieldId,
+      "data-ya-container": "true",
+      onMouseEnter: () => setIsHovered(true),
+      onMouseLeave: () => setIsHovered(false),
+      onDragEnter: handleDragEnter,
+      onDragOver: handleDragOver,
+      onDragLeave: handleDragLeave,
+      onDrop: handleDrop,
+      children: [
+        children,
+        mode === "inline-edit" && (isHovered || isSelected) && !document.body.classList.contains("builder-selector-active") && /* @__PURE__ */ jsx10(
+          Toolbar,
+          {
+            containerRef,
+            onImageClick: handleImageClick,
+            onColorClick: handleColorClick,
+            onAIClick: handleAIClick,
+            onClearClick: handleClearClick,
+            hasBackground
+          }
+        )
+      ]
+    }
+  );
+}
+
 // src/components/StaticText.tsx
-import { jsx as jsx9 } from "react/jsx-runtime";
+import { jsx as jsx11 } from "react/jsx-runtime";
 function MpText({ fieldId, className, as: Component = "span", children }) {
   const content = getContent(fieldId) || (typeof children === "string" ? children : "");
-  return /* @__PURE__ */ jsx9(
+  return /* @__PURE__ */ jsx11(
     Component,
     {
       className,
@@ -3310,7 +4227,7 @@ function MpText({ fieldId, className, as: Component = "span", children }) {
 }
 
 // src/components/StaticImage.tsx
-import { jsx as jsx10 } from "react/jsx-runtime";
+import { jsx as jsx12 } from "react/jsx-runtime";
 function parseImageValue2(value) {
   if (!value) {
     return { src: "" };
@@ -3324,7 +4241,7 @@ function parseImageValue2(value) {
   }
   return { src: value };
 }
-function getObjectPosition2(imageData) {
+function getObjectPosition3(imageData) {
   if (imageData.focalPoint) {
     return `${imageData.focalPoint.x}% ${imageData.focalPoint.y}%`;
   }
@@ -3345,8 +4262,8 @@ function MpImage({
   const src = imageData.src || fallbackSrc || "";
   const altText = imageData.alt || alt || fallbackAlt || "";
   const objectFit = imageData.objectFit || propObjectFit || "cover";
-  const objectPosition = getObjectPosition2(imageData) || propObjectPosition || "50% 50%";
-  return /* @__PURE__ */ jsx10(
+  const objectPosition = getObjectPosition3(imageData) || propObjectPosition || "50% 50%";
+  return /* @__PURE__ */ jsx12(
     "img",
     {
       src: resolveAssetUrl(src),
@@ -3364,7 +4281,7 @@ function MpImage({
 
 // src/components/MarkdownText.tsx
 import { Fragment as Fragment4 } from "react";
-import { jsx as jsx11 } from "react/jsx-runtime";
+import { jsx as jsx13 } from "react/jsx-runtime";
 function tokenize(text) {
   const tokens = [];
   let remaining = text;
@@ -3426,13 +4343,13 @@ function tokensToElements(tokens) {
   return tokens.map((token, index) => {
     switch (token.type) {
       case "text":
-        return /* @__PURE__ */ jsx11(Fragment4, { children: token.content }, index);
+        return /* @__PURE__ */ jsx13(Fragment4, { children: token.content }, index);
       case "bold":
-        return /* @__PURE__ */ jsx11("strong", { children: token.content }, index);
+        return /* @__PURE__ */ jsx13("strong", { children: token.content }, index);
       case "italic":
-        return /* @__PURE__ */ jsx11("em", { children: token.content }, index);
+        return /* @__PURE__ */ jsx13("em", { children: token.content }, index);
       case "link":
-        return /* @__PURE__ */ jsx11(
+        return /* @__PURE__ */ jsx13(
           "a",
           {
             href: token.url,
@@ -3444,7 +4361,7 @@ function tokensToElements(tokens) {
           index
         );
       case "newline":
-        return /* @__PURE__ */ jsx11("br", {}, index);
+        return /* @__PURE__ */ jsx13("br", {}, index);
       default:
         return null;
     }
@@ -3456,15 +4373,15 @@ function parseMarkdownToElements(content) {
 }
 function MarkdownText({ content, className }) {
   const elements = parseMarkdownToElements(content);
-  return /* @__PURE__ */ jsx11("span", { className, children: elements });
+  return /* @__PURE__ */ jsx13("span", { className, children: elements });
 }
 
 // src/router/Link.tsx
 import { Link as WouterLink2 } from "wouter";
-import { jsx as jsx12 } from "react/jsx-runtime";
+import { jsx as jsx14 } from "react/jsx-runtime";
 function Link2({ to, href, children, className, onClick, replace, ...props }) {
   const target = href ?? to ?? "/";
-  return /* @__PURE__ */ jsx12(WouterLink2, { href: target, className, onClick, replace, ...props, children });
+  return /* @__PURE__ */ jsx14(WouterLink2, { href: target, className, onClick, replace, ...props, children });
 }
 
 // src/router/useNavigate.ts
@@ -3483,7 +4400,7 @@ function useNavigate() {
 
 // src/router/Router.tsx
 import { Router as WouterRouter } from "wouter";
-import { jsx as jsx13 } from "react/jsx-runtime";
+import { jsx as jsx15 } from "react/jsx-runtime";
 function detectBasename() {
   if (typeof window === "undefined") return "";
   const sessionMatch = window.location.pathname.match(/^\/session\/[^/]+/);
@@ -3498,7 +4415,7 @@ function detectBasename() {
 }
 function Router({ children, base }) {
   const basename = base ?? detectBasename();
-  return /* @__PURE__ */ jsx13(WouterRouter, { base: basename, children });
+  return /* @__PURE__ */ jsx15(WouterRouter, { base: basename, children });
 }
 
 // src/router/index.ts
@@ -3515,9 +4432,11 @@ export {
   MpImage as StaticImage,
   MpText as StaticText,
   Switch,
+  YaContainer,
   YaImage,
   YaLink,
   YaText,
+  YaVideo,
   buildIntermediateText,
   calculateAnimationTiming,
   computeTextDiff,
@@ -3530,9 +4449,12 @@ export {
   imageCrossfadeStrategy,
   initBuilderSelection,
   linkTransitionStrategy,
+  parseBackgroundConfig,
   registerContent,
   resolveAssetUrl,
+  serializeBackgroundConfig,
   serializeImageValue,
+  serializeVideoValue,
   setAssetResolver,
   stripHtml,
   textTypingStrategy,