@yoamigo.com/core 0.3.1 → 0.3.4

package/dist/index.js

@@ -157,6 +157,9 @@ var BuilderSelectionManager = class {
   elementMap = /* @__PURE__ */ new Map();
   // Current selections from parent (for re-rendering on mode change)
   currentSelections = [];
+  // Throttle screenshot captures to prevent overlapping
+  lastCaptureTime = 0;
+  CAPTURE_THROTTLE_MS = 3e3;
   constructor() {
     if (window.parent === window) {
       console.log("[BuilderSelection] Not in iframe, skipping initialization");
@@ -280,6 +283,16 @@ var BuilderSelectionManager = class {
     });
   };
   handleKeyDown = (e) => {
+    const isMac = navigator.platform.toUpperCase().indexOf("MAC") >= 0;
+    const modifier = isMac ? e.metaKey : e.ctrlKey;
+    if (modifier) {
+      if (e.key === "=" || e.key === "+" || e.key === "-" || e.key === "0" || e.key === "1") {
+        e.preventDefault();
+        const normalizedKey = e.key === "=" ? "+" : e.key;
+        this.sendToParent({ type: "IFRAME_KEYBOARD_ZOOM", key: normalizedKey });
+        return;
+      }
+    }
     if (e.key === "Shift") {
       const activeElement = document.activeElement;
       const isEditing = activeElement?.closest(".ya-text-editing") || activeElement?.closest(".ya-link-editing");
@@ -596,10 +609,16 @@ var BuilderSelectionManager = class {
   /**
    * Capture a full-page screenshot for loading placeholder
    * Uses html2canvas to render the page at reduced quality for smaller file size
+   * Throttled to prevent overlapping captures (3 second minimum between captures)
    */
   async captureFullPageScreenshot() {
+    const now = Date.now();
+    if (now - this.lastCaptureTime < this.CAPTURE_THROTTLE_MS) {
+      console.log("[BuilderSelection] Screenshot throttled");
+      return;
+    }
+    this.lastCaptureTime = now;
     try {
-      console.log("[BuilderSelection] Capturing full-page screenshot");
       const html2canvas = (await import("html2canvas-pro")).default;
       const overlays = document.querySelectorAll(".builder-selection-container, #builder-hover-overlay");
       overlays.forEach((el) => {
@@ -612,14 +631,14 @@ var BuilderSelectionManager = class {
         logging: false,
         useCORS: true,
         allowTaint: true,
-        backgroundColor: null
+        backgroundColor: "#ffffff"
+        // White background for JPEG (null would render as black)
       });
       overlays.forEach((el) => {
         ;
         el.style.display = "";
       });
       const dataUrl = canvas.toDataURL("image/jpeg", 0.6);
-      console.log("[BuilderSelection] Full-page screenshot captured, size:", dataUrl.length);
       this.sendToParent({
         type: "SCREENSHOT_READY",
         dataUrl
@@ -739,12 +758,18 @@ var BuilderSelectionManager = class {
     this.selections.set(selectionId, { element, container, badge, border });
   }
 };
+var instance = null;
 function initBuilderSelection() {
   if (typeof window !== "undefined" && window.parent !== window) {
+    if (instance) {
+      return;
+    }
     if (document.readyState === "loading") {
-      document.addEventListener("DOMContentLoaded", () => new BuilderSelectionManager());
+      document.addEventListener("DOMContentLoaded", () => {
+        instance = new BuilderSelectionManager();
+      });
     } else {
-      new BuilderSelectionManager();
+      instance = new BuilderSelectionManager();
     }
   }
 }
@@ -3146,7 +3171,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.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');
+styleInject('.ya-image-container {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\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 jsx12, jsxs as jsxs6 } from "react/jsx-runtime";
@@ -3867,8 +3892,419 @@ function YaVideo({
   );
 }
 
+// src/components/YaEmbed.tsx
+import { useCallback as useCallback11, useEffect as useEffect10, useRef as useRef10, useState as useState9 } from "react";
+
+// src/components/ya-embed.css
+styleInject('.ya-embed-wrapper {\n  position: relative;\n  display: block;\n  width: 100%;\n}\n.ya-embed-wrapper iframe {\n  display: block;\n  width: 100%;\n  height: 100%;\n}\n.ya-embed-container {\n  position: relative;\n  display: block;\n  width: 100%;\n  min-width: 80px;\n  min-height: 80px;\n  cursor: pointer;\n  transition: outline 0.15s ease;\n}\n.ya-embed-container iframe {\n  display: block;\n  width: 100%;\n  height: 100%;\n  pointer-events: none;\n}\n.ya-embed-editable {\n  cursor: pointer;\n}\n.ya-embed-editable:hover {\n  outline: 2px dashed var(--color-primary, #d4a574);\n  outline-offset: 4px;\n}\n.ya-embed-selected {\n  outline: 3px solid var(--color-primary, #d4a574);\n  outline-offset: 4px;\n}\n.ya-embed-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-embed-editable:hover .ya-embed-overlay {\n  opacity: 1;\n}\n.ya-embed-selected .ya-embed-overlay {\n  opacity: 0;\n}\n.ya-embed-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-embed-edit-icon svg {\n  width: 24px;\n  height: 24px;\n}\n.ya-embed-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-embed-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-embed-placeholder img {\n  width: 64px;\n  height: auto;\n  opacity: 0.5;\n}\n@keyframes ya-embed-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-embed-success {\n  animation: ya-embed-success 0.4s ease;\n}\n.ya-embed-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-embed-shimmer 1.5s infinite;\n}\n@keyframes ya-embed-shimmer {\n  0% {\n    background-position: -200% 0;\n  }\n  100% {\n    background-position: 200% 0;\n  }\n}\n.ya-embed-container:focus {\n  outline: 3px solid var(--color-primary, #d4a574);\n  outline-offset: 4px;\n}\n.ya-embed-container:focus:not(:focus-visible) {\n  outline: none;\n}\n.ya-embed-container:focus-visible {\n  outline: 3px solid var(--color-primary, #d4a574);\n  outline-offset: 4px;\n}\n.ya-embed-small .ya-embed-overlay {\n  display: none;\n}\n.ya-embed-twitter {\n  min-height: 200px;\n}\n.ya-embed-twitter .twitter-tweet {\n  margin: 0 auto !important;\n}\n.ya-embed-wrapper[data-embed-type=spotify],\n.ya-embed-container[data-embed-type=spotify] {\n  min-height: 80px;\n}\n.ya-embed-wrapper[data-embed-type=soundcloud],\n.ya-embed-container[data-embed-type=soundcloud] {\n  min-height: 166px;\n}\n.ya-embed-wrapper[data-embed-type=instagram] iframe,\n.ya-embed-container[data-embed-type=instagram] iframe {\n  min-height: 400px;\n}\n');
+
+// src/components/YaEmbed.tsx
+import { jsx as jsx14, jsxs as jsxs8 } from "react/jsx-runtime";
+function parseEmbedUrl(url) {
+  if (!url) return null;
+  const trimmedUrl = url.trim();
+  const spotifyMatch = trimmedUrl.match(
+    /open\.spotify\.com\/(track|album|playlist|episode|show)\/([a-zA-Z0-9]+)/
+  );
+  if (spotifyMatch) {
+    const spotifyType = spotifyMatch[1];
+    const spotifyId = spotifyMatch[2];
+    const height = spotifyType === "track" ? 152 : 352;
+    return {
+      type: "spotify",
+      src: `${spotifyType}/${spotifyId}`,
+      originalUrl: trimmedUrl,
+      height,
+      spotifyType
+    };
+  }
+  const soundcloudMatch = trimmedUrl.match(/soundcloud\.com\/([^/]+)\/([^/?]+)/);
+  if (soundcloudMatch) {
+    return {
+      type: "soundcloud",
+      src: trimmedUrl,
+      // SoundCloud embeds use full URL
+      originalUrl: trimmedUrl,
+      height: 166
+    };
+  }
+  const twitterMatch = trimmedUrl.match(/(?:twitter\.com|x\.com)\/\w+\/status\/(\d+)/);
+  if (twitterMatch) {
+    return {
+      type: "twitter",
+      src: twitterMatch[1],
+      // Tweet ID
+      originalUrl: trimmedUrl,
+      aspectRatio: "1/1"
+      // Twitter embeds are roughly square
+    };
+  }
+  const instagramMatch = trimmedUrl.match(/instagram\.com\/(?:p|reel)\/([a-zA-Z0-9_-]+)/);
+  if (instagramMatch) {
+    return {
+      type: "instagram",
+      src: instagramMatch[1],
+      // Post shortcode
+      originalUrl: trimmedUrl,
+      aspectRatio: "1/1"
+    };
+  }
+  if (trimmedUrl.startsWith("https://")) {
+    if (trimmedUrl.startsWith("javascript:") || trimmedUrl.startsWith("data:") || trimmedUrl.includes("<script")) {
+      return null;
+    }
+    return {
+      type: "custom",
+      src: trimmedUrl,
+      originalUrl: trimmedUrl,
+      aspectRatio: "16/9"
+    };
+  }
+  return null;
+}
+function parseEmbedValue(value) {
+  if (!value) {
+    return { type: "custom", src: "" };
+  }
+  try {
+    const parsed = JSON.parse(value);
+    if (typeof parsed === "object" && parsed.src) {
+      return {
+        type: parsed.type || "custom",
+        ...parsed
+      };
+    }
+  } catch {
+    const detected = parseEmbedUrl(value);
+    if (detected) {
+      return detected;
+    }
+  }
+  return { type: "custom", src: value, originalUrl: value };
+}
+function serializeEmbedValue(value) {
+  return JSON.stringify(value);
+}
+function buildSpotifyEmbedUrl(src) {
+  return `https://open.spotify.com/embed/${src}?utm_source=generator&theme=0`;
+}
+function buildSoundCloudEmbedUrl(src) {
+  return `https://w.soundcloud.com/player/?url=${encodeURIComponent(src)}&color=%23ff5500&auto_play=false&hide_related=true&show_comments=false&show_user=true&show_reposts=false&show_teaser=false`;
+}
+function buildInstagramEmbedUrl(shortcode) {
+  return `https://www.instagram.com/p/${shortcode}/embed`;
+}
+var SMALL_EMBED_THRESHOLD = 100;
+var PLACEHOLDER_SVG3 = `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="5" y="5" width="40" height="30" rx="4" stroke="currentColor" stroke-width="2" fill="none"/>
+    <path d="M15 15 L25 22 L15 29 Z" fill="currentColor"/>
+  </g>
+</svg>
+`)}`;
+function YaEmbed({
+  fieldId,
+  className,
+  aspectRatio: propAspectRatio,
+  maxWidth,
+  loading = "lazy",
+  defaultValue
+}) {
+  const { getValue, mode } = useContentStore();
+  const containerRef = useRef10(null);
+  const [isSelected, setIsSelected] = useState9(false);
+  const [isHovered, setIsHovered] = useState9(false);
+  const [isSmallEmbed, setIsSmallEmbed] = useState9(false);
+  const [isInView, setIsInView] = useState9(loading === "eager");
+  const rawValue = getValue(fieldId);
+  const parsedValue = parseEmbedValue(rawValue);
+  const embedData = parsedValue.src ? parsedValue : defaultValue || parsedValue;
+  const src = embedData.src || "";
+  const embedType = embedData.type || "custom";
+  const height = embedData.height;
+  const aspectRatio = embedData.aspectRatio || propAspectRatio || "16/9";
+  useEffect10(() => {
+    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 handleClick = useCallback11(() => {
+    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_EMBED_EDIT_REQUEST",
+        fieldId,
+        currentValue: embedData,
+        elementRect: rect ? {
+          top: rect.top,
+          left: rect.left,
+          width: rect.width,
+          height: rect.height
+        } : void 0
+      },
+      "*"
+    );
+  }, [mode, fieldId, embedData]);
+  useEffect10(() => {
+    if (mode !== "inline-edit") return;
+    const handleMessage2 = (event) => {
+      if (event.data?.type === "YA_EMBED_EDIT_COMPLETE" && event.data.fieldId === fieldId) {
+        setIsSelected(false);
+      }
+      if (event.data?.type === "YA_EMBED_EDIT_CANCEL" && event.data.fieldId === fieldId) {
+        setIsSelected(false);
+      }
+    };
+    window.addEventListener("message", handleMessage2);
+    return () => window.removeEventListener("message", handleMessage2);
+  }, [mode, fieldId]);
+  useEffect10(() => {
+    if (mode !== "inline-edit") return;
+    const checkSize = () => {
+      if (containerRef.current) {
+        const { width, height: height2 } = containerRef.current.getBoundingClientRect();
+        setIsSmallEmbed(width < SMALL_EMBED_THRESHOLD || height2 < SMALL_EMBED_THRESHOLD);
+      }
+    };
+    checkSize();
+    window.addEventListener("resize", checkSize);
+    return () => window.removeEventListener("resize", checkSize);
+  }, [mode]);
+  useEffect10(() => {
+    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_EMBED_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]);
+  const renderEmbed = (isReadOnly) => {
+    if (!src && !isReadOnly) {
+      return /* @__PURE__ */ jsxs8("div", { className: "ya-embed-placeholder", children: [
+        /* @__PURE__ */ jsx14("img", { src: PLACEHOLDER_SVG3, alt: "" }),
+        /* @__PURE__ */ jsx14("span", { children: "No embed selected" })
+      ] });
+    }
+    if (!isInView && loading === "lazy" && !isReadOnly) {
+      return /* @__PURE__ */ jsx14("div", { className: "ya-embed-placeholder", style: { aspectRatio }, children: /* @__PURE__ */ jsx14("img", { src: PLACEHOLDER_SVG3, alt: "" }) });
+    }
+    if (embedType === "spotify" && src) {
+      const embedUrl = buildSpotifyEmbedUrl(src);
+      return /* @__PURE__ */ jsx14(
+        "iframe",
+        {
+          src: embedUrl,
+          style: {
+            width: "100%",
+            height: height ? `${height}px` : "100%",
+            border: "none",
+            borderRadius: "12px"
+          },
+          allow: "autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture",
+          loading,
+          title: "Spotify embed"
+        }
+      );
+    }
+    if (embedType === "soundcloud" && src) {
+      const embedUrl = buildSoundCloudEmbedUrl(src);
+      return /* @__PURE__ */ jsx14(
+        "iframe",
+        {
+          src: embedUrl,
+          style: {
+            width: "100%",
+            height: height ? `${height}px` : "166px",
+            border: "none"
+          },
+          allow: "autoplay",
+          loading,
+          title: "SoundCloud embed"
+        }
+      );
+    }
+    if (embedType === "twitter" && src) {
+      return /* @__PURE__ */ jsxs8("div", { className: "ya-embed-twitter", children: [
+        /* @__PURE__ */ jsx14("blockquote", { className: "twitter-tweet", "data-dnt": "true", children: /* @__PURE__ */ jsx14("a", { href: embedData.originalUrl || `https://twitter.com/i/status/${src}`, children: "Loading tweet..." }) }),
+        /* @__PURE__ */ jsx14(TwitterWidgetLoader, {})
+      ] });
+    }
+    if (embedType === "instagram" && src) {
+      const embedUrl = buildInstagramEmbedUrl(src);
+      return /* @__PURE__ */ jsx14(
+        "iframe",
+        {
+          src: embedUrl,
+          style: {
+            width: "100%",
+            height: "100%",
+            aspectRatio,
+            border: "none",
+            minHeight: "400px"
+          },
+          allow: "encrypted-media",
+          loading,
+          title: "Instagram embed"
+        }
+      );
+    }
+    if (embedType === "custom" && src) {
+      return /* @__PURE__ */ jsx14(
+        "iframe",
+        {
+          src,
+          style: {
+            width: "100%",
+            height: "100%",
+            border: "none",
+            aspectRatio
+          },
+          sandbox: "allow-scripts allow-same-origin allow-popups allow-forms",
+          loading,
+          title: "Embedded content"
+        }
+      );
+    }
+    return null;
+  };
+  const wrapperStyle = {
+    aspectRatio: height ? void 0 : aspectRatio,
+    height: height ? `${height}px` : void 0,
+    maxWidth: maxWidth ? `${maxWidth}px` : void 0
+  };
+  if (mode === "read-only") {
+    return /* @__PURE__ */ jsx14(
+      "div",
+      {
+        ref: containerRef,
+        className: `ya-embed-wrapper ${className || ""}`,
+        style: wrapperStyle,
+        "data-ya-restricted": "true",
+        "data-field-id": fieldId,
+        children: renderEmbed(true)
+      }
+    );
+  }
+  const embedIcon = /* @__PURE__ */ jsxs8(
+    "svg",
+    {
+      width: "24",
+      height: "24",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      children: [
+        /* @__PURE__ */ jsx14("polyline", { points: "16 18 22 12 16 6" }),
+        /* @__PURE__ */ jsx14("polyline", { points: "8 6 2 12 8 18" })
+      ]
+    }
+  );
+  return /* @__PURE__ */ jsxs8(
+    "div",
+    {
+      ref: containerRef,
+      className: `ya-embed-container ${isSelected ? "ya-embed-selected" : "ya-embed-editable"} ${isSmallEmbed ? "ya-embed-small" : ""}`,
+      onClick: handleClick,
+      onMouseEnter: () => setIsHovered(true),
+      onMouseLeave: () => setIsHovered(false),
+      "data-ya-restricted": "true",
+      "data-field-id": fieldId,
+      "data-ya-embed": "true",
+      role: "button",
+      tabIndex: 0,
+      "aria-label": `Edit embed: ${fieldId}`,
+      onKeyDown: (e) => {
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          handleClick();
+        }
+      },
+      style: wrapperStyle,
+      children: [
+        renderEmbed(false),
+        isSmallEmbed ? /* @__PURE__ */ jsxs8(YaTooltip, { anchorRef: containerRef, show: isHovered && !isSelected, children: [
+          embedIcon,
+          /* @__PURE__ */ jsx14("span", { children: "Click to edit" })
+        ] }) : (
+          /* For large embeds: show overlay inside the container */
+          /* @__PURE__ */ jsxs8("div", { className: "ya-embed-overlay", children: [
+            /* @__PURE__ */ jsx14("div", { className: "ya-embed-edit-icon", children: embedIcon }),
+            /* @__PURE__ */ jsx14("span", { className: "ya-embed-edit-label", children: "Click to edit" })
+          ] })
+        )
+      ]
+    }
+  );
+}
+function TwitterWidgetLoader() {
+  useEffect10(() => {
+    if (window.twttr?.widgets) {
+      ;
+      window.twttr.widgets.load();
+      return;
+    }
+    if (document.getElementById("twitter-wjs")) {
+      return;
+    }
+    const script = document.createElement("script");
+    script.id = "twitter-wjs";
+    script.src = "https://platform.twitter.com/widgets.js";
+    script.async = true;
+    document.body.appendChild(script);
+    return () => {
+    };
+  }, []);
+  return null;
+}
+
 // src/components/YaLink.tsx
-import { useEffect as useEffect12, useRef as useRef12, useState as useState11, useCallback as useCallback13, useId } from "react";
+import { useEffect as useEffect13, useRef as useRef13, useState as useState12, useCallback as useCallback14, useId } from "react";
 import { createPortal as createPortal5 } from "react-dom";
 import { useEditor as useEditor2, EditorContent as EditorContent2 } from "@tiptap/react";
 import { BubbleMenu } from "@tiptap/react/menus";
@@ -3878,7 +4314,7 @@ import { Extension as Extension2 } from "@tiptap/core";
 import { Link as WouterLink, useLocation } from "wouter";
 
 // src/components/SafeTriangleBelow.tsx
-import { useEffect as useEffect10, useState as useState9, useRef as useRef10, useCallback as useCallback11 } from "react";
+import { useEffect as useEffect11, useState as useState10, useRef as useRef11, useCallback as useCallback12 } from "react";
 function SafeTriangleBelow({
   triggerRef,
   popoverRef,
@@ -3886,10 +4322,10 @@ function SafeTriangleBelow({
   onLeave,
   onStayInside
 }) {
-  const [bounds, setBounds] = useState9(null);
-  const boundsRef = useRef10(bounds);
+  const [bounds, setBounds] = useState10(null);
+  const boundsRef = useRef11(bounds);
   boundsRef.current = bounds;
-  useEffect10(() => {
+  useEffect11(() => {
     if (!isVisible || !triggerRef.current || !popoverRef.current) {
       setBounds(null);
       return;
@@ -3907,7 +4343,7 @@ function SafeTriangleBelow({
     }, 10);
     return () => clearTimeout(timer);
   }, [isVisible, triggerRef, popoverRef]);
-  const checkMousePosition = useCallback11((e) => {
+  const checkMousePosition = useCallback12((e) => {
     const b = boundsRef.current;
     if (!b) return;
     const { clientX: x, clientY: y } = e;
@@ -3919,7 +4355,7 @@ function SafeTriangleBelow({
       onStayInside?.();
     }
   }, [onLeave, onStayInside]);
-  useEffect10(() => {
+  useEffect11(() => {
     if (!isVisible || !bounds) return;
     document.addEventListener("mousemove", checkMousePosition);
     return () => document.removeEventListener("mousemove", checkMousePosition);
@@ -3928,22 +4364,22 @@ function SafeTriangleBelow({
 }
 
 // src/hooks/useSafeTriangle.ts
-import { useState as useState10, useRef as useRef11, useCallback as useCallback12, useEffect as useEffect11 } from "react";
+import { useState as useState11, useRef as useRef12, useCallback as useCallback13, useEffect as useEffect12 } from "react";
 function useSafeTriangle(options = {}) {
   const { showDelay = 0, hideDelay = 150, enabled = true } = options;
-  const [isVisible, setIsVisible] = useState10(false);
-  const [isHovering, setIsHovering] = useState10(false);
-  const triggerRef = useRef11(null);
-  const popoverRef = useRef11(null);
-  const showTimeoutRef = useRef11(null);
-  const hideTimeoutRef = useRef11(null);
-  useEffect11(() => {
+  const [isVisible, setIsVisible] = useState11(false);
+  const [isHovering, setIsHovering] = useState11(false);
+  const triggerRef = useRef12(null);
+  const popoverRef = useRef12(null);
+  const showTimeoutRef = useRef12(null);
+  const hideTimeoutRef = useRef12(null);
+  useEffect12(() => {
     return () => {
       if (showTimeoutRef.current) clearTimeout(showTimeoutRef.current);
       if (hideTimeoutRef.current) clearTimeout(hideTimeoutRef.current);
     };
   }, []);
-  const show = useCallback12(() => {
+  const show = useCallback13(() => {
     if (!enabled) return;
     if (hideTimeoutRef.current) {
       clearTimeout(hideTimeoutRef.current);
@@ -3951,7 +4387,7 @@ function useSafeTriangle(options = {}) {
     }
     setIsVisible(true);
   }, [enabled]);
-  const hide = useCallback12(() => {
+  const hide = useCallback13(() => {
     if (showTimeoutRef.current) {
       clearTimeout(showTimeoutRef.current);
       showTimeoutRef.current = null;
@@ -3959,7 +4395,7 @@ function useSafeTriangle(options = {}) {
     setIsVisible(false);
     setIsHovering(false);
   }, []);
-  const handleMouseEnter = useCallback12(() => {
+  const handleMouseEnter = useCallback13(() => {
     if (!enabled) return;
     setIsHovering(true);
     if (hideTimeoutRef.current) {
@@ -3974,7 +4410,7 @@ function useSafeTriangle(options = {}) {
       setIsVisible(true);
     }
   }, [showDelay, enabled]);
-  const handleMouseLeave = useCallback12(() => {
+  const handleMouseLeave = useCallback13(() => {
     setIsHovering(false);
     if (showTimeoutRef.current) {
       clearTimeout(showTimeoutRef.current);
@@ -3984,16 +4420,16 @@ function useSafeTriangle(options = {}) {
       setIsVisible(false);
     }, hideDelay);
   }, [hideDelay]);
-  const handleFocus = useCallback12(() => {
+  const handleFocus = useCallback13(() => {
     if (!enabled) return;
     setIsVisible(true);
   }, [enabled]);
-  const handleTriangleLeave = useCallback12(() => {
+  const handleTriangleLeave = useCallback13(() => {
     if (!isHovering) {
       setIsVisible(false);
     }
   }, [isHovering]);
-  const handleStayInside = useCallback12(() => {
+  const handleStayInside = useCallback13(() => {
     if (hideTimeoutRef.current) {
       clearTimeout(hideTimeoutRef.current);
       hideTimeoutRef.current = null;
@@ -4024,7 +4460,7 @@ function useSafeTriangle(options = {}) {
 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-editing .ProseMirror {\n  color: #1a1a1a !important;\n  caret-color: #1a1a1a;\n}\n.ya-link-editing .ProseMirror p::selection,\n.ya-link-editing .ProseMirror::selection {\n  background-color: rgba(212, 165, 116, 0.4);\n  color: inherit;\n}\n.ya-link-editing .ProseMirror p::-moz-selection,\n.ya-link-editing .ProseMirror::-moz-selection {\n  background-color: rgba(212, 165, 116, 0.4);\n  color: inherit;\n}\nbody.builder-selector-active .ya-link-editable:not(.ya-link-editing)::selection,\nbody.builder-selector-active .ya-link-editable:not(.ya-link-editing) *::selection {\n  color: inherit;\n}\nbody.builder-selector-active .ya-link-editable:not(.ya-link-editing)::-moz-selection,\nbody.builder-selector-active .ya-link-editable:not(.ya-link-editing) *::-moz-selection {\n  color: inherit;\n}\n.ya-link-actions {\n  display: flex;\n  gap: 8px;\n  z-index: 9999;\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: 100;\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-href-popover--above {\n  top: auto;\n  bottom: 100%;\n  margin-top: 0;\n  margin-bottom: 8px;\n  animation: ya-href-popover-fade-in-above 0.15s ease;\n}\n@keyframes ya-href-popover-fade-in-above {\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--above::before {\n  top: auto;\n  bottom: -6px;\n  border-bottom: none;\n  border-top: 8px solid #1a1a1a;\n}\n.ya-link-edit-popover {\n  position: absolute;\n  top: 100%;\n  left: 50%;\n  margin-top: 8px;\n  z-index: 100;\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 Fragment4, jsx as jsx14, jsxs as jsxs8 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx15, jsxs as jsxs9 } from "react/jsx-runtime";
 function isInternalPath(path) {
   if (!path) return false;
   if (path.startsWith("#")) return false;
@@ -4125,8 +4561,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] = useState11([]);
-  const [sectionsExpanded, setSectionsExpanded] = useState11(false);
+  const [sections, setSections] = useState12([]);
+  const [sectionsExpanded, setSectionsExpanded] = useState12(false);
   const textFieldId = `${fieldId}.text`;
   const hrefFieldId = `${fieldId}.href`;
   const storeText = getValue(textFieldId);
@@ -4137,19 +4573,19 @@ 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] = useState11(null);
-  const [originalText, setOriginalText] = useState11(text);
-  const [originalHref, setOriginalHref] = useState11(href);
-  const [currentHref, setCurrentHref] = useState11(href);
-  const [isExternalUrl, setIsExternalUrl] = useState11(false);
-  const [externalUrl, setExternalUrl] = useState11("");
-  const [popoverPosition, setPopoverPosition] = useState11("below");
-  const containerRef = useRef12(null);
-  const hrefPopoverRef = useRef12(null);
-  const [actionButtonsPos, setActionButtonsPos] = useState11(null);
-  const handleSaveTextRef = useRef12(() => {
+  const [editingMode, setEditingMode] = useState12(null);
+  const [originalText, setOriginalText] = useState12(text);
+  const [originalHref, setOriginalHref] = useState12(href);
+  const [currentHref, setCurrentHref] = useState12(href);
+  const [isExternalUrl, setIsExternalUrl] = useState12(false);
+  const [externalUrl, setExternalUrl] = useState12("");
+  const [popoverPosition, setPopoverPosition] = useState12("below");
+  const containerRef = useRef13(null);
+  const hrefPopoverRef = useRef13(null);
+  const [actionButtonsPos, setActionButtonsPos] = useState12(null);
+  const handleSaveTextRef = useRef13(() => {
   });
-  const handleCancelTextRef = useRef12(() => {
+  const handleCancelTextRef = useRef13(() => {
   });
   const {
     popoverRef: editPopoverRef,
@@ -4163,12 +4599,12 @@ function YaLink({ fieldId, href: defaultHref = "#", className, style, as: Compon
   });
   const triggerRef = containerRef;
   const instanceId = useId();
-  useEffect12(() => {
+  useEffect13(() => {
     if (showEditPopover && mode === "inline-edit" && !editingMode) {
       window.dispatchEvent(new CustomEvent("yalink:popover-open", { detail: { id: instanceId } }));
     }
   }, [showEditPopover, mode, editingMode, instanceId]);
-  useEffect12(() => {
+  useEffect13(() => {
     const handleOtherPopoverOpen = (event) => {
       const customEvent = event;
       if (customEvent.detail.id !== instanceId && showEditPopover) {
@@ -4219,19 +4655,19 @@ function YaLink({ fieldId, href: defaultHref = "#", className, style, as: Compon
       }
     }
   });
-  useEffect12(() => {
+  useEffect13(() => {
     if (editor && editingMode !== "text") {
       if (editor.getHTML() !== text) {
         editor.commands.setContent(text);
       }
     }
   }, [text, editor, editingMode]);
-  useEffect12(() => {
+  useEffect13(() => {
     if (editingMode !== "link") {
       setCurrentHref(href);
     }
   }, [href, editingMode]);
-  useEffect12(() => {
+  useEffect13(() => {
     if (editingMode !== "text" || !containerRef.current) {
       setActionButtonsPos(null);
       return;
@@ -4252,7 +4688,7 @@ function YaLink({ fieldId, href: defaultHref = "#", className, style, as: Compon
       window.removeEventListener("resize", updatePosition);
     };
   }, [editingMode]);
-  useEffect12(() => {
+  useEffect13(() => {
     if (editingMode !== "link") return;
     const handleClickOutside = (event) => {
       const target2 = event.target;
@@ -4266,7 +4702,7 @@ function YaLink({ fieldId, href: defaultHref = "#", className, style, as: Compon
     document.addEventListener("mousedown", handleClickOutside);
     return () => document.removeEventListener("mousedown", handleClickOutside);
   }, [editingMode, originalHref]);
-  useEffect12(() => {
+  useEffect13(() => {
     if (editingMode !== "link" || !containerRef.current) return;
     const updatePosition = () => {
       if (!containerRef.current) return;
@@ -4279,7 +4715,7 @@ function YaLink({ fieldId, href: defaultHref = "#", className, style, as: Compon
     window.addEventListener("resize", updatePosition);
     return () => window.removeEventListener("resize", updatePosition);
   }, [editingMode]);
-  const handleSaveText = useCallback13(() => {
+  const handleSaveText = useCallback14(() => {
     if (!editor) return;
     let html = editor.getHTML();
     html = html.replace(/<\/p><p>/g, "<br><br>").replace(/^<p>/, "").replace(/<\/p>$/, "");
@@ -4287,30 +4723,30 @@ function YaLink({ fieldId, href: defaultHref = "#", className, style, as: Compon
     saveToWorker?.(textFieldId, html);
     setEditingMode(null);
   }, [editor, textFieldId, setValue, saveToWorker]);
-  const handleSaveLink = useCallback13(() => {
+  const handleSaveLink = useCallback14(() => {
     setValue(hrefFieldId, currentHref, "user");
     saveToWorker?.(hrefFieldId, currentHref);
     setEditingMode(null);
     setIsExternalUrl(false);
     setExternalUrl("");
   }, [hrefFieldId, currentHref, setValue, saveToWorker]);
-  const handleCancelText = useCallback13(() => {
+  const handleCancelText = useCallback14(() => {
     if (editor) {
       editor.commands.setContent(originalText);
     }
     setEditingMode(null);
   }, [editor, originalText]);
-  const handleCancelLink = useCallback13(() => {
+  const handleCancelLink = useCallback14(() => {
     setCurrentHref(originalHref);
     setEditingMode(null);
     setIsExternalUrl(false);
     setExternalUrl("");
   }, [originalHref]);
-  useEffect12(() => {
+  useEffect13(() => {
     handleSaveTextRef.current = handleSaveText;
     handleCancelTextRef.current = handleCancelText;
   }, [handleSaveText, handleCancelText]);
-  const handleClick = useCallback13(
+  const handleClick = useCallback14(
     (e) => {
       const selectModeEnabled = window.__builderSelectModeEnabled;
       if (selectModeEnabled) {
@@ -4342,7 +4778,7 @@ function YaLink({ fieldId, href: defaultHref = "#", className, style, as: Compon
     },
     [href, navigate, onClick]
   );
-  const startEditText = useCallback13(() => {
+  const startEditText = useCallback14(() => {
     hideEditPopover();
     if (isIconMode) {
       window.dispatchEvent(new CustomEvent("yatext:edit-mode", {
@@ -4356,7 +4792,7 @@ function YaLink({ fieldId, href: defaultHref = "#", className, style, as: Compon
       }, 20);
     }
   }, [text, editor, hideEditPopover, isIconMode, fieldId]);
-  const startEditLink = useCallback13(() => {
+  const startEditLink = useCallback14(() => {
     hideEditPopover();
     setEditingMode("link");
     setOriginalHref(href);
@@ -4370,7 +4806,7 @@ function YaLink({ fieldId, href: defaultHref = "#", className, style, as: Compon
       setPopoverPosition(spaceBelow < popoverHeight && spaceAbove > spaceBelow ? "above" : "below");
     }
   }, [href, hideEditPopover]);
-  const handleKeyDown = useCallback13(
+  const handleKeyDown = useCallback14(
     (event) => {
       if (editingMode !== "text") return;
       if (event.key === "Enter" && !event.shiftKey) {
@@ -4391,7 +4827,7 @@ function YaLink({ fieldId, href: defaultHref = "#", className, style, as: Compon
     },
     [editingMode, handleSaveText, handleCancelText]
   );
-  const handleFontSizeChange = useCallback13(
+  const handleFontSizeChange = useCallback14(
     (e) => {
       if (!editor) return;
       const size = e.target.value;
@@ -4403,7 +4839,7 @@ function YaLink({ fieldId, href: defaultHref = "#", className, style, as: Compon
     },
     [editor]
   );
-  const handleFontWeightChange = useCallback13(
+  const handleFontWeightChange = useCallback14(
     (e) => {
       if (!editor) return;
       const weight = e.target.value;
@@ -4415,11 +4851,11 @@ function YaLink({ fieldId, href: defaultHref = "#", className, style, as: Compon
     },
     [editor]
   );
-  const handlePageSelect = useCallback13((path) => {
+  const handlePageSelect = useCallback14((path) => {
     setCurrentHref(path);
     setIsExternalUrl(false);
   }, []);
-  const handleExternalUrlApply = useCallback13(() => {
+  const handleExternalUrlApply = useCallback14(() => {
     if (externalUrl) {
       setCurrentHref(externalUrl);
     }
@@ -4435,9 +4871,9 @@ function YaLink({ fieldId, href: defaultHref = "#", className, style, as: Compon
     return attrs.fontWeight || "";
   };
   if (mode === "read-only") {
-    const content = isIconMode ? children : /* @__PURE__ */ jsx14(SafeHtml, { content: text, mode });
+    const content = isIconMode ? children : /* @__PURE__ */ jsx15(SafeHtml, { content: text, mode });
     if (isInternalPath(href)) {
-      return /* @__PURE__ */ jsx14(
+      return /* @__PURE__ */ jsx15(
         WouterLink,
         {
           href,
@@ -4449,7 +4885,7 @@ function YaLink({ fieldId, href: defaultHref = "#", className, style, as: Compon
         }
       );
     }
-    return /* @__PURE__ */ jsx14(
+    return /* @__PURE__ */ jsx15(
       Component,
       {
         ref: containerRef,
@@ -4464,8 +4900,8 @@ function YaLink({ fieldId, href: defaultHref = "#", className, style, as: Compon
       }
     );
   }
-  return /* @__PURE__ */ jsxs8("span", { className: "ya-link-wrapper", children: [
-    /* @__PURE__ */ jsx14(
+  return /* @__PURE__ */ jsxs9("span", { className: "ya-link-wrapper", children: [
+    /* @__PURE__ */ jsx15(
       Component,
       {
         ref: containerRef,
@@ -4484,9 +4920,9 @@ function YaLink({ fieldId, href: defaultHref = "#", className, style, as: Compon
         children: isIconMode ? (
           // Icon mode: render children directly, no text editing
           children
-        ) : editor ? /* @__PURE__ */ jsxs8(Fragment4, { children: [
+        ) : editor ? /* @__PURE__ */ jsxs9(Fragment4, { children: [
           createPortal5(
-            /* @__PURE__ */ jsxs8(
+            /* @__PURE__ */ jsxs9(
               BubbleMenu,
               {
                 editor,
@@ -4494,28 +4930,28 @@ function YaLink({ fieldId, href: defaultHref = "#", className, style, as: Compon
                 options: { offset: 6, placement: "top" },
                 className: "ya-bubble-menu",
                 children: [
-                  /* @__PURE__ */ jsx14(
+                  /* @__PURE__ */ jsx15(
                     "button",
                     {
                       type: "button",
                       onClick: () => editor.chain().focus().toggleBold().run(),
                       className: `ya-bubble-btn ${editor.isActive("bold") ? "is-active" : ""}`,
                       title: "Bold",
-                      children: /* @__PURE__ */ jsx14("strong", { children: "B" })
+                      children: /* @__PURE__ */ jsx15("strong", { children: "B" })
                     }
                   ),
-                  /* @__PURE__ */ jsx14(
+                  /* @__PURE__ */ jsx15(
                     "button",
                     {
                       type: "button",
                       onClick: () => editor.chain().focus().toggleItalic().run(),
                       className: `ya-bubble-btn ${editor.isActive("italic") ? "is-active" : ""}`,
                       title: "Italic",
-                      children: /* @__PURE__ */ jsx14("em", { children: "I" })
+                      children: /* @__PURE__ */ jsx15("em", { children: "I" })
                     }
                   ),
-                  /* @__PURE__ */ jsx14("span", { className: "ya-bubble-divider" }),
-                  /* @__PURE__ */ jsxs8(
+                  /* @__PURE__ */ jsx15("span", { className: "ya-bubble-divider" }),
+                  /* @__PURE__ */ jsxs9(
                     "select",
                     {
                       value: getCurrentFontSize(),
@@ -4523,12 +4959,12 @@ function YaLink({ fieldId, href: defaultHref = "#", className, style, as: Compon
                       className: "ya-bubble-select",
                       title: "Font Size",
                       children: [
-                        /* @__PURE__ */ jsx14("option", { value: "", children: "Size" }),
-                        Object.entries(SIZE_PRESETS2).map(([name, size]) => /* @__PURE__ */ jsx14("option", { value: size, children: name }, name))
+                        /* @__PURE__ */ jsx15("option", { value: "", children: "Size" }),
+                        Object.entries(SIZE_PRESETS2).map(([name, size]) => /* @__PURE__ */ jsx15("option", { value: size, children: name }, name))
                       ]
                     }
                   ),
-                  /* @__PURE__ */ jsxs8(
+                  /* @__PURE__ */ jsxs9(
                     "select",
                     {
                       value: getCurrentFontWeight(),
@@ -4536,8 +4972,8 @@ function YaLink({ fieldId, href: defaultHref = "#", className, style, as: Compon
                       className: "ya-bubble-select",
                       title: "Font Weight",
                       children: [
-                        /* @__PURE__ */ jsx14("option", { value: "", children: "Weight" }),
-                        Object.entries(WEIGHT_PRESETS2).map(([name, weight]) => /* @__PURE__ */ jsx14("option", { value: weight, children: name }, name))
+                        /* @__PURE__ */ jsx15("option", { value: "", children: "Weight" }),
+                        Object.entries(WEIGHT_PRESETS2).map(([name, weight]) => /* @__PURE__ */ jsx15("option", { value: weight, children: name }, name))
                       ]
                     }
                   )
@@ -4546,10 +4982,10 @@ function YaLink({ fieldId, href: defaultHref = "#", className, style, as: Compon
             ),
             document.body
           ),
-          editingMode === "text" ? /* @__PURE__ */ jsxs8(Fragment4, { children: [
-            /* @__PURE__ */ jsx14(EditorContent2, { editor }),
+          editingMode === "text" ? /* @__PURE__ */ jsxs9(Fragment4, { children: [
+            /* @__PURE__ */ jsx15(EditorContent2, { editor }),
             actionButtonsPos && createPortal5(
-              /* @__PURE__ */ jsxs8(
+              /* @__PURE__ */ jsxs9(
                 "div",
                 {
                   className: "ya-link-actions",
@@ -4559,18 +4995,18 @@ function YaLink({ fieldId, href: defaultHref = "#", className, style, as: Compon
                     right: actionButtonsPos.right
                   },
                   children: [
-                    /* @__PURE__ */ jsx14("button", { type: "button", onClick: handleCancelText, className: "ya-link-btn ya-link-btn-cancel", children: "Cancel" }),
-                    /* @__PURE__ */ jsx14("button", { type: "button", onClick: handleSaveText, className: "ya-link-btn ya-link-btn-save", children: "Save" })
+                    /* @__PURE__ */ jsx15("button", { type: "button", onClick: handleCancelText, className: "ya-link-btn ya-link-btn-cancel", children: "Cancel" }),
+                    /* @__PURE__ */ jsx15("button", { type: "button", onClick: handleSaveText, className: "ya-link-btn ya-link-btn-save", children: "Save" })
                   ]
                 }
               ),
               document.body
             )
-          ] }) : /* @__PURE__ */ jsx14(SafeHtml, { content: text, mode })
-        ] }) : /* @__PURE__ */ jsx14(SafeHtml, { content: text, mode })
+          ] }) : /* @__PURE__ */ jsx15(SafeHtml, { content: text, mode })
+        ] }) : /* @__PURE__ */ jsx15(SafeHtml, { content: text, mode })
       }
     ),
-    showEditPopover && !editingMode && mode === "inline-edit" && /* @__PURE__ */ jsxs8(
+    showEditPopover && !editingMode && mode === "inline-edit" && /* @__PURE__ */ jsxs9(
       "div",
       {
         ref: editPopoverRef,
@@ -4578,12 +5014,12 @@ function YaLink({ fieldId, href: defaultHref = "#", className, style, as: Compon
         onMouseEnter: safeTriangleHandlers.onMouseEnter,
         onMouseLeave: safeTriangleHandlers.onMouseLeave,
         children: [
-          /* @__PURE__ */ jsx14("button", { type: "button", onClick: startEditText, children: "Edit text" }),
-          /* @__PURE__ */ jsx14("button", { type: "button", onClick: startEditLink, children: "Edit link" })
+          /* @__PURE__ */ jsx15("button", { type: "button", onClick: startEditText, children: "Edit text" }),
+          /* @__PURE__ */ jsx15("button", { type: "button", onClick: startEditLink, children: "Edit link" })
         ]
       }
     ),
-    /* @__PURE__ */ jsx14(
+    /* @__PURE__ */ jsx15(
       SafeTriangleBelow,
       {
         triggerRef,
@@ -4593,25 +5029,25 @@ function YaLink({ fieldId, href: defaultHref = "#", className, style, as: Compon
         onStayInside: triangleProps.onStayInside
       }
     ),
-    editingMode === "link" && /* @__PURE__ */ jsxs8("div", { ref: hrefPopoverRef, className: `ya-href-popover ${popoverPosition === "above" ? "ya-href-popover--above" : ""}`, children: [
-      /* @__PURE__ */ jsx14("div", { className: "ya-href-popover-header", children: "Link destination" }),
-      !isExternalUrl ? /* @__PURE__ */ jsxs8(Fragment4, { children: [
-        sections.length > 0 && /* @__PURE__ */ jsxs8("div", { className: "ya-href-popover-section", children: [
-          /* @__PURE__ */ jsxs8(
+    editingMode === "link" && /* @__PURE__ */ jsxs9("div", { ref: hrefPopoverRef, className: `ya-href-popover ${popoverPosition === "above" ? "ya-href-popover--above" : ""}`, children: [
+      /* @__PURE__ */ jsx15("div", { className: "ya-href-popover-header", children: "Link destination" }),
+      !isExternalUrl ? /* @__PURE__ */ jsxs9(Fragment4, { children: [
+        sections.length > 0 && /* @__PURE__ */ jsxs9("div", { className: "ya-href-popover-section", children: [
+          /* @__PURE__ */ jsxs9(
             "button",
             {
               type: "button",
               className: "ya-href-popover-label ya-href-collapsible-header",
               onClick: () => setSectionsExpanded(!sectionsExpanded),
               children: [
-                /* @__PURE__ */ jsx14("span", { className: "ya-href-chevron", children: sectionsExpanded ? "\u25BC" : "\u25B6" }),
+                /* @__PURE__ */ jsx15("span", { className: "ya-href-chevron", children: sectionsExpanded ? "\u25BC" : "\u25B6" }),
                 "Scroll to section (",
                 sections.length,
                 ")"
               ]
             }
           ),
-          sectionsExpanded && /* @__PURE__ */ jsx14("div", { className: "ya-href-popover-pages", children: sections.map((section) => /* @__PURE__ */ jsxs8(
+          sectionsExpanded && /* @__PURE__ */ jsx15("div", { className: "ya-href-popover-pages", children: sections.map((section) => /* @__PURE__ */ jsxs9(
             "button",
             {
               type: "button",
@@ -4619,15 +5055,15 @@ function YaLink({ fieldId, href: defaultHref = "#", className, style, as: Compon
               onClick: () => handlePageSelect(section.path),
               children: [
                 section.label,
-                /* @__PURE__ */ jsx14("span", { className: "ya-href-page-path", children: section.path })
+                /* @__PURE__ */ jsx15("span", { className: "ya-href-page-path", children: section.path })
               ]
             },
             section.path
           )) })
         ] }),
-        pages.length > 0 && /* @__PURE__ */ jsxs8("div", { className: "ya-href-popover-section", children: [
-          /* @__PURE__ */ jsx14("label", { className: "ya-href-popover-label", children: "Navigate to page" }),
-          /* @__PURE__ */ jsx14("div", { className: "ya-href-popover-pages", children: pages.map((page) => /* @__PURE__ */ jsxs8(
+        pages.length > 0 && /* @__PURE__ */ jsxs9("div", { className: "ya-href-popover-section", children: [
+          /* @__PURE__ */ jsx15("label", { className: "ya-href-popover-label", children: "Navigate to page" }),
+          /* @__PURE__ */ jsx15("div", { className: "ya-href-popover-pages", children: pages.map((page) => /* @__PURE__ */ jsxs9(
             "button",
             {
               type: "button",
@@ -4635,13 +5071,13 @@ function YaLink({ fieldId, href: defaultHref = "#", className, style, as: Compon
               onClick: () => handlePageSelect(page.path),
               children: [
                 page.label,
-                /* @__PURE__ */ jsx14("span", { className: "ya-href-page-path", children: page.path })
+                /* @__PURE__ */ jsx15("span", { className: "ya-href-page-path", children: page.path })
               ]
             },
             page.path
           )) })
         ] }),
-        /* @__PURE__ */ jsx14(
+        /* @__PURE__ */ jsx15(
           "button",
           {
             type: "button",
@@ -4653,10 +5089,10 @@ function YaLink({ fieldId, href: defaultHref = "#", className, style, as: Compon
             children: "Use external URL instead"
           }
         )
-      ] }) : /* @__PURE__ */ jsxs8(Fragment4, { children: [
-        /* @__PURE__ */ jsxs8("div", { className: "ya-href-popover-section", children: [
-          /* @__PURE__ */ jsx14("label", { className: "ya-href-popover-label", children: "External URL" }),
-          /* @__PURE__ */ jsx14(
+      ] }) : /* @__PURE__ */ jsxs9(Fragment4, { children: [
+        /* @__PURE__ */ jsxs9("div", { className: "ya-href-popover-section", children: [
+          /* @__PURE__ */ jsx15("label", { className: "ya-href-popover-label", children: "External URL" }),
+          /* @__PURE__ */ jsx15(
             "input",
             {
               type: "url",
@@ -4668,18 +5104,18 @@ function YaLink({ fieldId, href: defaultHref = "#", className, style, as: Compon
             }
           )
         ] }),
-        /* @__PURE__ */ jsx14("button", { type: "button", className: "ya-href-external-toggle", onClick: () => setIsExternalUrl(false), children: "\u2190 Back to pages" })
+        /* @__PURE__ */ jsx15("button", { type: "button", className: "ya-href-external-toggle", onClick: () => setIsExternalUrl(false), children: "\u2190 Back to pages" })
       ] }),
-      /* @__PURE__ */ jsxs8("div", { className: "ya-href-popover-actions", children: [
-        /* @__PURE__ */ jsx14("button", { type: "button", className: "ya-link-btn ya-link-btn-cancel", onClick: handleCancelLink, children: "Cancel" }),
-        isExternalUrl ? /* @__PURE__ */ jsx14("button", { type: "button", className: "ya-link-btn ya-link-btn-save", onClick: handleExternalUrlApply, children: "Apply" }) : /* @__PURE__ */ jsx14("button", { type: "button", className: "ya-link-btn ya-link-btn-save", onClick: handleSaveLink, children: "Save" })
+      /* @__PURE__ */ jsxs9("div", { className: "ya-href-popover-actions", children: [
+        /* @__PURE__ */ jsx15("button", { type: "button", className: "ya-link-btn ya-link-btn-cancel", onClick: handleCancelLink, children: "Cancel" }),
+        isExternalUrl ? /* @__PURE__ */ jsx15("button", { type: "button", className: "ya-link-btn ya-link-btn-save", onClick: handleExternalUrlApply, children: "Apply" }) : /* @__PURE__ */ jsx15("button", { type: "button", className: "ya-link-btn ya-link-btn-save", onClick: handleSaveLink, children: "Save" })
       ] })
     ] })
   ] });
 }
 
 // src/components/YaContainer.tsx
-import { useCallback as useCallback14, useEffect as useEffect13, useRef as useRef13, useState as useState12 } from "react";
+import { useCallback as useCallback15, useEffect as useEffect14, useRef as useRef14, useState as useState13 } from "react";
 import { createPortal as createPortal6 } from "react-dom";
 import {
   useFloating as useFloating3,
@@ -4695,7 +5131,7 @@ import {
 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  pointer-events: none;\n}\n.ya-container-editable > * {\n  pointer-events: auto;\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: 36px;\n  height: 36px;\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: 18px;\n  height: 18px;\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  pointer-events: auto !important;\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.ya-container-tooltip {\n  background: #1a1a1a;\n  color: white;\n  padding: 8px 12px;\n  border-radius: 6px;\n  font-size: 13px;\n  font-weight: 500;\n  font-family:\n    system-ui,\n    -apple-system,\n    BlinkMacSystemFont,\n    "Segoe UI",\n    sans-serif;\n  white-space: nowrap;\n  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);\n  z-index: 10000;\n  pointer-events: none;\n  animation: ya-container-tooltip-fade-in 0.1s ease;\n}\n@keyframes ya-container-tooltip-fade-in {\n  from {\n    opacity: 0;\n    transform: scale(0.95);\n  }\n  to {\n    opacity: 1;\n    transform: scale(1);\n  }\n}\n');
 
 // src/components/YaContainer.tsx
-import { Fragment as Fragment5, jsx as jsx15, jsxs as jsxs9 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx16, jsxs as jsxs10 } from "react/jsx-runtime";
 function parseBackgroundConfig(value) {
   if (!value) {
     return { type: "none" };
@@ -4737,11 +5173,11 @@ function deriveContainerLabel(element) {
   return tagLabels[tagName] || "Section";
 }
 function Toolbar({ containerRef, onImageClick, onColorClick, onAIClick, onClearClick, hasBackground }) {
-  const [position, setPosition] = useState12(null);
-  const [imageOpen, setImageOpen] = useState12(false);
-  const [colorOpen, setColorOpen] = useState12(false);
-  const [aiOpen, setAiOpen] = useState12(false);
-  const [clearOpen, setClearOpen] = useState12(false);
+  const [position, setPosition] = useState13(null);
+  const [imageOpen, setImageOpen] = useState13(false);
+  const [colorOpen, setColorOpen] = useState13(false);
+  const [aiOpen, setAiOpen] = useState13(false);
+  const [clearOpen, setClearOpen] = useState13(false);
   const {
     refs: imageRefs,
     floatingStyles: imageStyles,
@@ -4790,7 +5226,7 @@ function Toolbar({ containerRef, onImageClick, onColorClick, onAIClick, onClearC
   });
   const clearHover = useHover(clearContext, { delay: { open: 0, close: 0 } });
   const { getReferenceProps: getClearRefProps, getFloatingProps: getClearFloatProps } = useInteractions2([clearHover]);
-  useEffect13(() => {
+  useEffect14(() => {
     const updatePosition = () => {
       if (containerRef.current) {
         const rect = containerRef.current.getBoundingClientRect();
@@ -4810,7 +5246,7 @@ function Toolbar({ containerRef, onImageClick, onColorClick, onAIClick, onClearC
   }, [containerRef]);
   if (!position) return null;
   return createPortal6(
-    /* @__PURE__ */ jsxs9(
+    /* @__PURE__ */ jsxs10(
       "div",
       {
         className: "ya-container-toolbar",
@@ -4821,7 +5257,7 @@ function Toolbar({ containerRef, onImageClick, onColorClick, onAIClick, onClearC
         },
         onClick: (e) => e.stopPropagation(),
         children: [
-          /* @__PURE__ */ jsx15(
+          /* @__PURE__ */ jsx16(
             "button",
             {
               ref: imageRefs.setReference,
@@ -4829,14 +5265,14 @@ function Toolbar({ containerRef, onImageClick, onColorClick, onAIClick, onClearC
               onClick: onImageClick,
               "aria-label": "Edit background image",
               ...getImageRefProps(),
-              children: /* @__PURE__ */ jsxs9("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
-                /* @__PURE__ */ jsx15("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2", ry: "2" }),
-                /* @__PURE__ */ jsx15("circle", { cx: "8.5", cy: "8.5", r: "1.5" }),
-                /* @__PURE__ */ jsx15("polyline", { points: "21 15 16 10 5 21" })
+              children: /* @__PURE__ */ jsxs10("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+                /* @__PURE__ */ jsx16("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2", ry: "2" }),
+                /* @__PURE__ */ jsx16("circle", { cx: "8.5", cy: "8.5", r: "1.5" }),
+                /* @__PURE__ */ jsx16("polyline", { points: "21 15 16 10 5 21" })
               ] })
             }
           ),
-          imageOpen && /* @__PURE__ */ jsx15(FloatingPortal2, { children: /* @__PURE__ */ jsx15(
+          imageOpen && /* @__PURE__ */ jsx16(FloatingPortal2, { children: /* @__PURE__ */ jsx16(
             "div",
             {
               ref: imageRefs.setFloating,
@@ -4846,7 +5282,7 @@ function Toolbar({ containerRef, onImageClick, onColorClick, onAIClick, onClearC
               children: "Background Image"
             }
           ) }),
-          /* @__PURE__ */ jsx15(
+          /* @__PURE__ */ jsx16(
             "button",
             {
               ref: colorRefs.setReference,
@@ -4854,13 +5290,13 @@ function Toolbar({ containerRef, onImageClick, onColorClick, onAIClick, onClearC
               onClick: onColorClick,
               "aria-label": "Edit background color",
               ...getColorRefProps(),
-              children: /* @__PURE__ */ jsxs9("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
-                /* @__PURE__ */ jsx15("circle", { cx: "12", cy: "12", r: "10" }),
-                /* @__PURE__ */ jsx15("path", { d: "M12 2a10 10 0 0 1 0 20", fill: "currentColor" })
+              children: /* @__PURE__ */ jsxs10("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+                /* @__PURE__ */ jsx16("circle", { cx: "12", cy: "12", r: "10" }),
+                /* @__PURE__ */ jsx16("path", { d: "M12 2a10 10 0 0 1 0 20", fill: "currentColor" })
               ] })
             }
           ),
-          colorOpen && /* @__PURE__ */ jsx15(FloatingPortal2, { children: /* @__PURE__ */ jsx15(
+          colorOpen && /* @__PURE__ */ jsx16(FloatingPortal2, { children: /* @__PURE__ */ jsx16(
             "div",
             {
               ref: colorRefs.setFloating,
@@ -4870,7 +5306,7 @@ function Toolbar({ containerRef, onImageClick, onColorClick, onAIClick, onClearC
               children: "Background Color"
             }
           ) }),
-          /* @__PURE__ */ jsx15(
+          /* @__PURE__ */ jsx16(
             "button",
             {
               ref: aiRefs.setReference,
@@ -4878,14 +5314,14 @@ function Toolbar({ containerRef, onImageClick, onColorClick, onAIClick, onClearC
               onClick: onAIClick,
               "aria-label": "Ask AI for help",
               ...getAiRefProps(),
-              children: /* @__PURE__ */ jsxs9("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
-                /* @__PURE__ */ jsx15("path", { d: "M12 2L2 7l10 5 10-5-10-5z" }),
-                /* @__PURE__ */ jsx15("path", { d: "M2 17l10 5 10-5" }),
-                /* @__PURE__ */ jsx15("path", { d: "M2 12l10 5 10-5" })
+              children: /* @__PURE__ */ jsxs10("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+                /* @__PURE__ */ jsx16("path", { d: "M12 2L2 7l10 5 10-5-10-5z" }),
+                /* @__PURE__ */ jsx16("path", { d: "M2 17l10 5 10-5" }),
+                /* @__PURE__ */ jsx16("path", { d: "M2 12l10 5 10-5" })
               ] })
             }
           ),
-          aiOpen && /* @__PURE__ */ jsx15(FloatingPortal2, { children: /* @__PURE__ */ jsx15(
+          aiOpen && /* @__PURE__ */ jsx16(FloatingPortal2, { children: /* @__PURE__ */ jsx16(
             "div",
             {
               ref: aiRefs.setFloating,
@@ -4895,8 +5331,8 @@ function Toolbar({ containerRef, onImageClick, onColorClick, onAIClick, onClearC
               children: "AI Assist"
             }
           ) }),
-          hasBackground && /* @__PURE__ */ jsxs9(Fragment5, { children: [
-            /* @__PURE__ */ jsx15(
+          hasBackground && /* @__PURE__ */ jsxs10(Fragment5, { children: [
+            /* @__PURE__ */ jsx16(
               "button",
               {
                 ref: clearRefs.setReference,
@@ -4904,13 +5340,13 @@ function Toolbar({ containerRef, onImageClick, onColorClick, onAIClick, onClearC
                 onClick: onClearClick,
                 "aria-label": "Clear background",
                 ...getClearRefProps(),
-                children: /* @__PURE__ */ jsxs9("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
-                  /* @__PURE__ */ jsx15("circle", { cx: "12", cy: "12", r: "10" }),
-                  /* @__PURE__ */ jsx15("line", { x1: "4.93", y1: "4.93", x2: "19.07", y2: "19.07" })
+                children: /* @__PURE__ */ jsxs10("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+                  /* @__PURE__ */ jsx16("circle", { cx: "12", cy: "12", r: "10" }),
+                  /* @__PURE__ */ jsx16("line", { x1: "4.93", y1: "4.93", x2: "19.07", y2: "19.07" })
                 ] })
               }
             ),
-            clearOpen && /* @__PURE__ */ jsx15(FloatingPortal2, { children: /* @__PURE__ */ jsx15(
+            clearOpen && /* @__PURE__ */ jsx16(FloatingPortal2, { children: /* @__PURE__ */ jsx16(
               "div",
               {
                 ref: clearRefs.setFloating,
@@ -4936,12 +5372,12 @@ function YaContainer({
   defaultBackground
 }) {
   const { getValue, setValue, saveToWorker, mode } = useContentStore();
-  const containerRef = useRef13(null);
-  const [isHovered, setIsHovered] = useState12(false);
-  const [isSelected, setIsSelected] = useState12(false);
-  const [isDropMode, setIsDropMode] = useState12(false);
-  const [isDropHover, setIsDropHover] = useState12(false);
-  useEffect13(() => {
+  const containerRef = useRef14(null);
+  const [isHovered, setIsHovered] = useState13(false);
+  const [isSelected, setIsSelected] = useState13(false);
+  const [isDropMode, setIsDropMode] = useState13(false);
+  const [isDropHover, setIsDropHover] = useState13(false);
+  useEffect14(() => {
     if (mode !== "inline-edit") return;
     const containerEl = containerRef.current;
     if (!containerEl) return;
@@ -4983,7 +5419,7 @@ function YaContainer({
     overlayCustomProps["--ya-overlay-color"] = backgroundConfig.overlay.color;
     overlayCustomProps["--ya-overlay-opacity"] = backgroundConfig.overlay.opacity;
   }
-  const handleImageClick = useCallback14(() => {
+  const handleImageClick = useCallback15(() => {
     if (mode !== "inline-edit") return;
     setIsSelected(true);
     const rect = containerRef.current?.getBoundingClientRect();
@@ -5003,7 +5439,7 @@ function YaContainer({
       "*"
     );
   }, [mode, fieldId, backgroundConfig]);
-  const handleColorClick = useCallback14(() => {
+  const handleColorClick = useCallback15(() => {
     if (mode !== "inline-edit") return;
     setIsSelected(true);
     const rect = containerRef.current?.getBoundingClientRect();
@@ -5023,7 +5459,7 @@ function YaContainer({
       "*"
     );
   }, [mode, fieldId, backgroundConfig]);
-  const handleAIClick = useCallback14(() => {
+  const handleAIClick = useCallback15(() => {
     if (mode !== "inline-edit") return;
     const label = deriveContainerLabel(containerRef.current);
     window.parent.postMessage(
@@ -5036,14 +5472,14 @@ function YaContainer({
       "*"
     );
   }, [mode, fieldId, backgroundConfig]);
-  const handleClearClick = useCallback14(() => {
+  const handleClearClick = useCallback15(() => {
     if (mode !== "inline-edit") return;
     const clearedConfig = { type: "none" };
     const serialized = serializeBackgroundConfig(clearedConfig);
     setValue(fieldId, serialized);
     saveToWorker?.(fieldId, serialized);
   }, [mode, fieldId, setValue, saveToWorker]);
-  useEffect13(() => {
+  useEffect14(() => {
     if (mode !== "inline-edit") return;
     const handleMessage2 = (event) => {
       if (event.data?.type === "YA_CONTAINER_EDIT_COMPLETE" && event.data.fieldId === fieldId) {
@@ -5056,7 +5492,7 @@ function YaContainer({
     window.addEventListener("message", handleMessage2);
     return () => window.removeEventListener("message", handleMessage2);
   }, [mode, fieldId]);
-  useEffect13(() => {
+  useEffect14(() => {
     if (mode !== "inline-edit") return;
     const handleDropModeMessage = (event) => {
       if (event.data?.type === "DROP_MODE_START") {
@@ -5070,7 +5506,7 @@ function YaContainer({
     window.addEventListener("message", handleDropModeMessage);
     return () => window.removeEventListener("message", handleDropModeMessage);
   }, [mode]);
-  const handleDragEnter = useCallback14(
+  const handleDragEnter = useCallback15(
     (e) => {
       if (!isDropMode) return;
       e.preventDefault();
@@ -5094,7 +5530,7 @@ function YaContainer({
     },
     [isDropMode, fieldId]
   );
-  const handleDragOver = useCallback14(
+  const handleDragOver = useCallback15(
     (e) => {
       if (!isDropMode) return;
       e.preventDefault();
@@ -5102,7 +5538,7 @@ function YaContainer({
     },
     [isDropMode]
   );
-  const handleDragLeave = useCallback14(
+  const handleDragLeave = useCallback15(
     (e) => {
       if (!isDropMode) return;
       e.preventDefault();
@@ -5116,7 +5552,7 @@ function YaContainer({
     },
     [isDropMode]
   );
-  const handleDrop = useCallback14(
+  const handleDrop = useCallback15(
     (e) => {
       if (!isDropMode) return;
       e.preventDefault();
@@ -5134,7 +5570,7 @@ function YaContainer({
     },
     [isDropMode, fieldId]
   );
-  useEffect13(() => {
+  useEffect14(() => {
     if (!isSelected || mode !== "inline-edit") return;
     let lastRectKey = "";
     let lastTime = 0;
@@ -5169,7 +5605,7 @@ function YaContainer({
     return () => cancelAnimationFrame(rafId);
   }, [isSelected, fieldId, mode]);
   if (mode === "read-only") {
-    return /* @__PURE__ */ jsx15(
+    return /* @__PURE__ */ jsx16(
       Tag,
       {
         className: `ya-container ${className || ""}`,
@@ -5193,7 +5629,7 @@ function YaContainer({
     isDropHover ? "ya-container-drop-hover" : "",
     className || ""
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ jsxs9(
+  return /* @__PURE__ */ jsxs10(
     Tag,
     {
       ref: containerRef,
@@ -5212,7 +5648,7 @@ function YaContainer({
       onDrop: handleDrop,
       children: [
         children,
-        mode === "inline-edit" && (isHovered || isSelected) && !document.body.classList.contains("builder-selector-active") && /* @__PURE__ */ jsx15(
+        mode === "inline-edit" && (isHovered || isSelected) && !document.body.classList.contains("builder-selector-active") && /* @__PURE__ */ jsx16(
           Toolbar,
           {
             containerRef,
@@ -5229,10 +5665,10 @@ function YaContainer({
 }
 
 // src/components/StaticText.tsx
-import { jsx as jsx16 } from "react/jsx-runtime";
+import { jsx as jsx17 } from "react/jsx-runtime";
 function MpText({ fieldId, className, as: Component = "span", children }) {
   const content = getContent(fieldId) || (typeof children === "string" ? children : "");
-  return /* @__PURE__ */ jsx16(
+  return /* @__PURE__ */ jsx17(
     Component,
     {
       className,
@@ -5243,7 +5679,7 @@ function MpText({ fieldId, className, as: Component = "span", children }) {
 }
 
 // src/components/StaticImage.tsx
-import { jsx as jsx17 } from "react/jsx-runtime";
+import { jsx as jsx18 } from "react/jsx-runtime";
 function parseImageValue2(value) {
   if (!value) {
     return { src: "" };
@@ -5279,7 +5715,7 @@ function MpImage({
   const altText = imageData.alt || alt || fallbackAlt || "";
   const objectFit = imageData.objectFit || propObjectFit || "cover";
   const objectPosition = getObjectPosition3(imageData) || propObjectPosition || "50% 50%";
-  return /* @__PURE__ */ jsx17(
+  return /* @__PURE__ */ jsx18(
     "img",
     {
       src: resolveAssetUrl(src),
@@ -5297,7 +5733,7 @@ function MpImage({
 
 // src/components/MarkdownText.tsx
 import { Fragment as Fragment6 } from "react";
-import { jsx as jsx18 } from "react/jsx-runtime";
+import { jsx as jsx19 } from "react/jsx-runtime";
 function tokenize(text) {
   const tokens = [];
   let remaining = text;
@@ -5359,13 +5795,13 @@ function tokensToElements(tokens) {
   return tokens.map((token, index) => {
     switch (token.type) {
       case "text":
-        return /* @__PURE__ */ jsx18(Fragment6, { children: token.content }, index);
+        return /* @__PURE__ */ jsx19(Fragment6, { children: token.content }, index);
       case "bold":
-        return /* @__PURE__ */ jsx18("strong", { children: token.content }, index);
+        return /* @__PURE__ */ jsx19("strong", { children: token.content }, index);
       case "italic":
-        return /* @__PURE__ */ jsx18("em", { children: token.content }, index);
+        return /* @__PURE__ */ jsx19("em", { children: token.content }, index);
       case "link":
-        return /* @__PURE__ */ jsx18(
+        return /* @__PURE__ */ jsx19(
           "a",
           {
             href: token.url,
@@ -5377,7 +5813,7 @@ function tokensToElements(tokens) {
           index
         );
       case "newline":
-        return /* @__PURE__ */ jsx18("br", {}, index);
+        return /* @__PURE__ */ jsx19("br", {}, index);
       default:
         return null;
     }
@@ -5389,15 +5825,15 @@ function parseMarkdownToElements(content) {
 }
 function MarkdownText({ content, className }) {
   const elements = parseMarkdownToElements(content);
-  return /* @__PURE__ */ jsx18("span", { className, children: elements });
+  return /* @__PURE__ */ jsx19("span", { className, children: elements });
 }
 
 // src/router/Link.tsx
 import { Link as WouterLink2 } from "wouter";
-import { jsx as jsx19 } from "react/jsx-runtime";
+import { jsx as jsx20 } from "react/jsx-runtime";
 function Link2({ to, href, children, className, onClick, replace, ...props }) {
   const target = href ?? to ?? "/";
-  return /* @__PURE__ */ jsx19(WouterLink2, { href: target, className, onClick, replace, ...props, children });
+  return /* @__PURE__ */ jsx20(WouterLink2, { href: target, className, onClick, replace, ...props, children });
 }
 
 // src/router/useNavigate.ts
@@ -5416,7 +5852,7 @@ function useNavigate() {
 
 // src/router/Router.tsx
 import { Router as WouterRouter } from "wouter";
-import { jsx as jsx20 } from "react/jsx-runtime";
+import { jsx as jsx21 } from "react/jsx-runtime";
 function detectBasename() {
   if (typeof window === "undefined") return "";
   const sessionMatch = window.location.pathname.match(/^\/session\/[^/]+/);
@@ -5431,7 +5867,7 @@ function detectBasename() {
 }
 function Router({ children, base }) {
   const basename = base ?? detectBasename();
-  return /* @__PURE__ */ jsx20(WouterRouter, { base: basename, children });
+  return /* @__PURE__ */ jsx21(WouterRouter, { base: basename, children });
 }
 
 // src/router/index.ts
@@ -5450,6 +5886,7 @@ export {
   MpText as StaticText,
   Switch,
   YaContainer,
+  YaEmbed,
   YaImage,
   YaLink,
   YaText,
@@ -5467,9 +5904,11 @@ export {
   initBuilderSelection,
   linkTransitionStrategy,
   parseBackgroundConfig,
+  parseEmbedUrl,
   registerContent,
   resolveAssetUrl,
   serializeBackgroundConfig,
+  serializeEmbedValue,
   serializeImageValue,
   serializeVideoValue,
   setAssetResolver,