@yoamigo.com/core 0.4.0 → 0.4.2

package/dist/index.js

@@ -1143,6 +1143,16 @@ function ContentStoreProvider({
     (fieldId) => changeSourceMap[fieldId] || "initial",
     [changeSourceMap]
   );
+  const clearChangeSource = useCallback(
+    (fieldId) => {
+      setChangeSourceMap((prev) => {
+        const next = { ...prev };
+        delete next[fieldId];
+        return next;
+      });
+    },
+    []
+  );
   const setMode = useCallback(
     (newMode) => {
       setModeState(newMode);
@@ -1245,6 +1255,7 @@ function ContentStoreProvider({
     getValue,
     setValue,
     getChangeSource,
+    clearChangeSource,
     mode,
     setMode,
     subscribe,
@@ -1321,55 +1332,106 @@ function ContentStoreProvider2({ children, initialContent }) {
 }
 
 // src/components/YaText.tsx
-import { useEffect as useEffect6, useRef as useRef6, useState as useState5, useCallback as useCallback7 } from "react";
-import { createPortal as createPortal3 } from "react-dom";
+import { useEffect as useEffect7, useRef as useRef8, useState as useState7, useCallback as useCallback9 } from "react";
+import { createPortal as createPortal4 } from "react-dom";
 import { useEditor, EditorContent } from "@tiptap/react";
 
 // src/components/ControlledBubbleMenu.tsx
-import { useFloating, autoUpdate, offset, flip, shift } from "@floating-ui/react";
 import { isNodeSelection, posToDOMRect } from "@tiptap/core";
-import { useLayoutEffect } from "react";
+import { useLayoutEffect, useState as useState2, useRef as useRef2, useCallback as useCallback2, useEffect as useEffect2 } from "react";
 import { createPortal } from "react-dom";
 import { jsx as jsx3 } from "react/jsx-runtime";
 function ControlledBubbleMenu({ editor, open, children, className }) {
-  const { floatingStyles, refs, isPositioned } = useFloating({
-    open,
-    // Required for isPositioned to work
-    strategy: "fixed",
-    whileElementsMounted: autoUpdate,
-    placement: "top",
-    middleware: [
-      offset({ mainAxis: 8 }),
-      flip({
-        padding: 8,
-        fallbackPlacements: ["bottom", "top-start", "bottom-start", "top-end", "bottom-end"]
-      }),
-      shift({ padding: 8 })
-    ]
-  });
-  useLayoutEffect(() => {
-    if (!open) return;
+  const menuRef = useRef2(null);
+  const [position, setPosition] = useState2(null);
+  const [isMounted, setIsMounted] = useState2(false);
+  useEffect2(() => {
+    setIsMounted(true);
+  }, []);
+  const getSelectionRect = useCallback2(() => {
+    if (!editor.view) return null;
     const { ranges } = editor.state.selection;
     const from = Math.min(...ranges.map((range) => range.$from.pos));
     const to = Math.max(...ranges.map((range) => range.$to.pos));
-    refs.setReference({
-      getBoundingClientRect() {
-        if (isNodeSelection(editor.state.selection)) {
-          const node = editor.view.nodeDOM(from);
-          if (node) return node.getBoundingClientRect();
-        }
-        return posToDOMRect(editor.view, from, to);
-      }
-    });
-  }, [refs, editor.view, editor.state.selection, open]);
-  if (!open) return null;
+    if (isNodeSelection(editor.state.selection)) {
+      const node = editor.view.nodeDOM(from);
+      if (node) return node.getBoundingClientRect();
+    }
+    return posToDOMRect(editor.view, from, to);
+  }, [editor]);
+  const calculatePosition = useCallback2(() => {
+    const selectionRect = getSelectionRect();
+    if (!selectionRect) return null;
+    const gap = 8;
+    const menuHeight = 44;
+    const menuWidth = 300;
+    const padding = 8;
+    let placement = "top";
+    let top = selectionRect.top - menuHeight - gap;
+    let left = selectionRect.left + selectionRect.width / 2 - menuWidth / 2;
+    if (top < padding) {
+      placement = "bottom";
+      top = selectionRect.bottom + gap;
+    }
+    if (left < padding) {
+      left = padding;
+    } else if (left + menuWidth > window.innerWidth - padding) {
+      left = window.innerWidth - menuWidth - padding;
+    }
+    return { top, left, placement, adjusted: false };
+  }, [getSelectionRect]);
+  useLayoutEffect(() => {
+    if (!open) {
+      setPosition(null);
+      return;
+    }
+    const updatePosition = () => {
+      const pos = calculatePosition();
+      setPosition(pos);
+    };
+    updatePosition();
+    const handleSelectionUpdate = () => {
+      if (open) updatePosition();
+    };
+    editor.on("selectionUpdate", handleSelectionUpdate);
+    editor.on("transaction", handleSelectionUpdate);
+    window.addEventListener("scroll", updatePosition, true);
+    window.addEventListener("resize", updatePosition);
+    return () => {
+      editor.off("selectionUpdate", handleSelectionUpdate);
+      editor.off("transaction", handleSelectionUpdate);
+      window.removeEventListener("scroll", updatePosition, true);
+      window.removeEventListener("resize", updatePosition);
+    };
+  }, [open, editor, calculatePosition]);
+  useLayoutEffect(() => {
+    if (!open || !menuRef.current || !position || position.adjusted) return;
+    const menuRect = menuRef.current.getBoundingClientRect();
+    const padding = 8;
+    let adjustedLeft = position.left;
+    let adjustedTop = position.top;
+    if (menuRect.right > window.innerWidth - padding) {
+      adjustedLeft -= menuRect.right - window.innerWidth + padding;
+    }
+    if (menuRect.left < padding) {
+      adjustedLeft += padding - menuRect.left;
+    }
+    if (adjustedLeft !== position.left || adjustedTop !== position.top) {
+      setPosition((prev) => prev ? { ...prev, left: adjustedLeft, top: adjustedTop, adjusted: true } : null);
+    } else {
+      setPosition((prev) => prev ? { ...prev, adjusted: true } : null);
+    }
+  }, [open, position]);
+  if (!open || !isMounted || !position) return null;
   const style = {
-    ...floatingStyles,
-    opacity: isPositioned ? 1 : 0,
+    position: "fixed",
+    top: position.top,
+    left: position.left,
+    opacity: 1,
     transition: "opacity 0.15s ease"
   };
   return createPortal(
-    /* @__PURE__ */ jsx3("div", { ref: refs.setFloating, style, className, children }),
+    /* @__PURE__ */ jsx3("div", { ref: menuRef, style, className, children }),
     document.body
   );
 }
@@ -1381,7 +1443,7 @@ import { TextStyle } from "@tiptap/extension-text-style";
 import { Extension } from "@tiptap/core";
 
 // src/components/SafeHtml.tsx
-import { useEffect as useEffect2, useRef as useRef2, useState as useState2, useCallback as useCallback2 } from "react";
+import { useEffect as useEffect3, useRef as useRef3, useState as useState3, useCallback as useCallback3 } from "react";
 import { createPortal as createPortal2 } from "react-dom";
 import DOMPurify from "dompurify";
 import { Fragment, jsx as jsx4, jsxs } from "react/jsx-runtime";
@@ -1485,10 +1547,10 @@ function LinkPopover({
   );
 }
 function SafeHtml({ content, className, mode = "read-only" }) {
-  const containerRef = useRef2(null);
-  const showTimerRef = useRef2(void 0);
-  const hideTimerRef = useRef2(void 0);
-  const [popoverState, setPopoverState] = useState2({
+  const containerRef = useRef3(null);
+  const showTimerRef = useRef3(void 0);
+  const hideTimerRef = useRef3(void 0);
+  const [popoverState, setPopoverState] = useState3({
     isVisible: false,
     href: "",
     displayText: "",
@@ -1499,20 +1561,20 @@ function SafeHtml({ content, className, mode = "read-only" }) {
     ALLOWED_TAGS,
     ALLOWED_ATTR
   });
-  const hidePopover = useCallback2(() => {
+  const hidePopover = useCallback3(() => {
     clearTimeout(showTimerRef.current);
     setPopoverState((prev) => ({ ...prev, isVisible: false }));
   }, []);
-  const scheduleHide = useCallback2(() => {
+  const scheduleHide = useCallback3(() => {
     clearTimeout(showTimerRef.current);
     hideTimerRef.current = window.setTimeout(() => {
       hidePopover();
     }, 100);
   }, [hidePopover]);
-  const cancelHide = useCallback2(() => {
+  const cancelHide = useCallback3(() => {
     clearTimeout(hideTimerRef.current);
   }, []);
-  const handlePopoverClick = useCallback2(() => {
+  const handlePopoverClick = useCallback3(() => {
     if (popoverState.isExternal) {
       window.open(popoverState.href, "_blank", "noopener,noreferrer");
     } else {
@@ -1520,7 +1582,7 @@ function SafeHtml({ content, className, mode = "read-only" }) {
     }
     hidePopover();
   }, [popoverState.href, popoverState.isExternal, hidePopover]);
-  useEffect2(() => {
+  useEffect3(() => {
     if (mode !== "inline-edit" || !containerRef.current) return;
     const container = containerRef.current;
     const handleMouseOver = (e) => {
@@ -1606,10 +1668,10 @@ function SafeHtml({ content, className, mode = "read-only" }) {
 import { useMemo as useMemo4 } from "react";
 
 // src/hooks/useAIEditAnimation.ts
-import { useState as useState3, useEffect as useEffect3, useRef as useRef4, useCallback as useCallback4, useMemo as useMemo3 } from "react";
+import { useState as useState4, useEffect as useEffect4, useRef as useRef5, useCallback as useCallback5, useMemo as useMemo3 } from "react";
 
 // src/contexts/AIEditContext.tsx
-import { createContext as createContext3, useContext as useContext3, useCallback as useCallback3, useRef as useRef3, useMemo as useMemo2 } from "react";
+import { createContext as createContext3, useContext as useContext3, useCallback as useCallback4, useRef as useRef4, useMemo as useMemo2 } from "react";
 import { jsx as jsx5 } from "react/jsx-runtime";
 var AIEditContext = createContext3(null);
 function useAIEditContext() {
@@ -1623,17 +1685,17 @@ function useAIEditContextOptional() {
   return useContext3(AIEditContext);
 }
 function AIEditProvider({ children, staggerDelay = 100 }) {
-  const animationsRef = useRef3(/* @__PURE__ */ new Map());
-  const listenersRef = useRef3(/* @__PURE__ */ new Map());
-  const queueRef = useRef3([]);
-  const processingRef = useRef3(false);
-  const notifyListeners = useCallback3((fieldId) => {
+  const animationsRef = useRef4(/* @__PURE__ */ new Map());
+  const listenersRef = useRef4(/* @__PURE__ */ new Map());
+  const queueRef = useRef4([]);
+  const processingRef = useRef4(false);
+  const notifyListeners = useCallback4((fieldId) => {
     const listeners = listenersRef.current.get(fieldId);
     if (listeners) {
       listeners.forEach((listener) => listener());
     }
   }, []);
-  const processQueue = useCallback3(() => {
+  const processQueue = useCallback4(() => {
     if (processingRef.current || queueRef.current.length === 0) return;
     processingRef.current = true;
     const fieldId = queueRef.current.shift();
@@ -1648,7 +1710,7 @@ function AIEditProvider({ children, staggerDelay = 100 }) {
       processQueue();
     }, staggerDelay);
   }, [staggerDelay, notifyListeners]);
-  const queueAnimation = useCallback3(
+  const queueAnimation = useCallback4(
     (fieldId, config) => {
       const existing = animationsRef.current.get(fieldId);
       if (existing?.status === "animating") {
@@ -1671,7 +1733,7 @@ function AIEditProvider({ children, staggerDelay = 100 }) {
     },
     [notifyListeners, processQueue]
   );
-  const cancelAnimation = useCallback3(
+  const cancelAnimation = useCallback4(
     (fieldId) => {
       const state = animationsRef.current.get(fieldId);
       if (state) {
@@ -1685,14 +1747,14 @@ function AIEditProvider({ children, staggerDelay = 100 }) {
     },
     [notifyListeners]
   );
-  const isAnimating = useCallback3((fieldId) => {
+  const isAnimating = useCallback4((fieldId) => {
     const state = animationsRef.current.get(fieldId);
     return state?.status === "animating" || state?.status === "pending";
   }, []);
-  const getAnimationState = useCallback3((fieldId) => {
+  const getAnimationState = useCallback4((fieldId) => {
     return animationsRef.current.get(fieldId);
   }, []);
-  const subscribe = useCallback3((fieldId, listener) => {
+  const subscribe = useCallback4((fieldId, listener) => {
     let listeners = listenersRef.current.get(fieldId);
     if (!listeners) {
       listeners = /* @__PURE__ */ new Set();
@@ -1706,7 +1768,7 @@ function AIEditProvider({ children, staggerDelay = 100 }) {
       }
     };
   }, []);
-  const completeAnimation = useCallback3(
+  const completeAnimation = useCallback4(
     (fieldId) => {
       const state = animationsRef.current.get(fieldId);
       if (state) {
@@ -1739,16 +1801,16 @@ function AIEditProvider({ children, staggerDelay = 100 }) {
 function useAIEditAnimation(fieldId, value, options) {
   const { enabled = true, strategy, maxDuration = 2e3, onStart, onComplete } = options;
   const context = useAIEditContextOptional();
-  const { getChangeSource } = useContentStore();
-  const previousValueRef = useRef4(value);
-  const isFirstRender = useRef4(true);
-  const [phase, setPhase] = useState3("idle");
-  const [progress, setProgress] = useState3(0);
-  const [displayValue, setDisplayValue] = useState3(value);
-  const metadataRef = useRef4(null);
-  const animationFrameRef = useRef4(null);
-  const startTimeRef = useRef4(0);
-  const cancel = useCallback4(() => {
+  const { getChangeSource, clearChangeSource } = useContentStore();
+  const previousValueRef = useRef5(value);
+  const isFirstRender = useRef5(true);
+  const [phase, setPhase] = useState4("idle");
+  const [progress, setProgress] = useState4(0);
+  const [displayValue, setDisplayValue] = useState4(value);
+  const metadataRef = useRef5(null);
+  const animationFrameRef = useRef5(null);
+  const startTimeRef = useRef5(0);
+  const cancel = useCallback5(() => {
     if (animationFrameRef.current !== null) {
       cancelAnimationFrame(animationFrameRef.current);
       animationFrameRef.current = null;
@@ -1759,7 +1821,7 @@ function useAIEditAnimation(fieldId, value, options) {
     metadataRef.current = null;
     context?.cancelAnimation(fieldId);
   }, [value, context, fieldId]);
-  const runAnimation = useCallback4(() => {
+  const runAnimation = useCallback5(() => {
     if (!metadataRef.current) return;
     const metadata = metadataRef.current;
     const elapsed = performance.now() - startTimeRef.current;
@@ -1774,6 +1836,7 @@ function useAIEditAnimation(fieldId, value, options) {
       onComplete?.();
       setTimeout(() => {
         setPhase("idle");
+        clearChangeSource(fieldId);
       }, 400);
       return;
     }
@@ -1782,8 +1845,8 @@ function useAIEditAnimation(fieldId, value, options) {
     const interpolatedValue = strategy.interpolate(metadata, currentProgress);
     setDisplayValue(interpolatedValue);
     animationFrameRef.current = requestAnimationFrame(runAnimation);
-  }, [strategy, maxDuration, context, fieldId, onComplete]);
-  useEffect3(() => {
+  }, [strategy, maxDuration, context, fieldId, onComplete, clearChangeSource]);
+  useEffect4(() => {
     if (isFirstRender.current) {
       isFirstRender.current = false;
       previousValueRef.current = value;
@@ -1801,6 +1864,7 @@ function useAIEditAnimation(fieldId, value, options) {
       setPhase("complete");
       setTimeout(() => {
         setPhase("idle");
+        clearChangeSource(fieldId);
       }, 400);
       return;
     }
@@ -1832,8 +1896,8 @@ function useAIEditAnimation(fieldId, value, options) {
         cancelAnimationFrame(animationFrameRef.current);
       }
     };
-  }, [value, enabled, strategy, context, fieldId, maxDuration, onStart, runAnimation, getChangeSource]);
-  useEffect3(() => {
+  }, [value, enabled, strategy, context, fieldId, maxDuration, onStart, runAnimation, getChangeSource, clearChangeSource]);
+  useEffect4(() => {
     return () => {
       if (animationFrameRef.current !== null) {
         cancelAnimationFrame(animationFrameRef.current);
@@ -2213,8 +2277,8 @@ function ChevronDownIcon({ size = 12, className }) {
 }
 
 // src/components/BubbleDropdown.tsx
-import { useEffect as useEffect4 } from "react";
-import { useFloating as useFloating2, autoUpdate as autoUpdate2, offset as offset2, flip as flip2, shift as shift2, useClick, useDismiss, useInteractions, FloatingPortal } from "@floating-ui/react";
+import { useEffect as useEffect5, useLayoutEffect as useLayoutEffect2, useState as useState5, useRef as useRef6, useCallback as useCallback6 } from "react";
+import { createPortal as createPortal3 } from "react-dom";
 import { Fragment as Fragment2, jsx as jsx7, jsxs as jsxs3 } from "react/jsx-runtime";
 function BubbleDropdown({
   label,
@@ -2224,29 +2288,66 @@ function BubbleDropdown({
   triggerClassName = "",
   panelClassName = ""
 }) {
-  const { refs, floatingStyles, context, isPositioned } = useFloating2({
-    open,
-    onOpenChange,
-    placement: "bottom-start",
-    strategy: "fixed",
-    whileElementsMounted: autoUpdate2,
-    middleware: [
-      offset2({ mainAxis: 4 }),
-      flip2({
-        padding: 8,
-        fallbackPlacements: ["bottom-end", "top-start", "top-end"]
-      }),
-      shift2({ padding: 8 })
-    ]
-  });
-  const click = useClick(context);
-  const dismiss = useDismiss(context, {
-    // Don't dismiss on ancestor scroll - we're inside a portaled bubble menu
-    ancestorScroll: false
-  });
-  const { getReferenceProps, getFloatingProps } = useInteractions([click, dismiss]);
-  useEffect4(() => {
+  const triggerRef = useRef6(null);
+  const panelRef = useRef6(null);
+  const [position, setPosition] = useState5(null);
+  const [isMounted, setIsMounted] = useState5(false);
+  useEffect5(() => {
+    setIsMounted(true);
+  }, []);
+  const calculatePosition = useCallback6(() => {
+    if (!triggerRef.current) return null;
+    const triggerRect = triggerRef.current.getBoundingClientRect();
+    const gap = 4;
+    const padding = 8;
+    let top = triggerRect.bottom + gap;
+    let left = triggerRect.left;
+    const estimatedWidth = 150;
+    if (left + estimatedWidth > window.innerWidth - padding) {
+      left = window.innerWidth - estimatedWidth - padding;
+    }
+    if (left < padding) {
+      left = padding;
+    }
+    return { top, left, adjusted: false };
+  }, []);
+  useEffect5(() => {
+    if (open) {
+      const pos = calculatePosition();
+      setPosition(pos);
+    } else {
+      setPosition(null);
+    }
+  }, [open, calculatePosition]);
+  useLayoutEffect2(() => {
+    if (!open || !panelRef.current || !position || position.adjusted) return;
+    const panelRect = panelRef.current.getBoundingClientRect();
+    const padding = 8;
+    let adjustedLeft = position.left;
+    let adjustedTop = position.top;
+    if (panelRect.right > window.innerWidth - padding) {
+      adjustedLeft -= panelRect.right - window.innerWidth + padding;
+    }
+    if (panelRect.bottom > window.innerHeight - padding) {
+      const triggerRect = triggerRef.current?.getBoundingClientRect();
+      if (triggerRect) {
+        adjustedTop = triggerRect.top - panelRect.height - 4;
+      }
+    }
+    if (adjustedLeft !== position.left || adjustedTop !== position.top) {
+      setPosition({ top: adjustedTop, left: adjustedLeft, adjusted: true });
+    } else {
+      setPosition((prev) => prev ? { ...prev, adjusted: true } : null);
+    }
+  }, [open, position]);
+  useEffect5(() => {
     if (!open) return;
+    const handleClickOutside = (e) => {
+      if (triggerRef.current?.contains(e.target) || panelRef.current?.contains(e.target)) {
+        return;
+      }
+      onOpenChange(false);
+    };
     const handleKeyDown = (e) => {
       if (e.key === "Escape") {
         e.preventDefault();
@@ -2254,16 +2355,19 @@ function BubbleDropdown({
         onOpenChange(false);
       }
     };
+    const timeoutId = setTimeout(() => {
+      document.addEventListener("mousedown", handleClickOutside);
+    }, 0);
     document.addEventListener("keydown", handleKeyDown);
-    return () => document.removeEventListener("keydown", handleKeyDown);
+    return () => {
+      clearTimeout(timeoutId);
+      document.removeEventListener("mousedown", handleClickOutside);
+      document.removeEventListener("keydown", handleKeyDown);
+    };
   }, [open, onOpenChange]);
-  const panelStyle = {
-    ...floatingStyles,
-    opacity: isPositioned ? 1 : 0,
-    transition: "opacity 0.15s ease"
-  };
   const handleTriggerClick = (e) => {
     e.stopPropagation();
+    onOpenChange(!open);
   };
   const handleTriggerMouseDown = (e) => {
     e.preventDefault();
@@ -2272,40 +2376,46 @@ function BubbleDropdown({
   const handlePanelClick = (e) => {
     e.stopPropagation();
   };
+  const panelStyle = position ? {
+    position: "fixed",
+    top: position.top,
+    left: position.left,
+    opacity: 1,
+    transition: "opacity 0.15s ease"
+  } : {};
   return /* @__PURE__ */ jsxs3(Fragment2, { children: [
     /* @__PURE__ */ jsxs3(
       "button",
       {
-        ref: refs.setReference,
+        ref: triggerRef,
         type: "button",
         className: `ya-bubble-dropdown-trigger ${open ? "is-open" : ""} ${triggerClassName}`,
-        ...getReferenceProps({
-          onClick: handleTriggerClick,
-          onMouseDown: handleTriggerMouseDown
-        }),
+        onClick: handleTriggerClick,
+        onMouseDown: handleTriggerMouseDown,
         children: [
           /* @__PURE__ */ jsx7("span", { className: "ya-bubble-dropdown-label", children: label }),
           /* @__PURE__ */ jsx7(ChevronDownIcon, { size: 10, className: `ya-bubble-dropdown-arrow ${open ? "is-open" : ""}` })
         ]
       }
     ),
-    open && /* @__PURE__ */ jsx7(FloatingPortal, { children: /* @__PURE__ */ jsx7(
-      "div",
-      {
-        ref: refs.setFloating,
-        style: panelStyle,
-        className: `ya-bubble-dropdown-panel ${panelClassName}`,
-        ...getFloatingProps({
-          onClick: handlePanelClick
-        }),
-        children
-      }
-    ) })
+    isMounted && open && position && createPortal3(
+      /* @__PURE__ */ jsx7(
+        "div",
+        {
+          ref: panelRef,
+          style: panelStyle,
+          className: `ya-bubble-dropdown-panel ${panelClassName}`,
+          onClick: handlePanelClick,
+          children
+        }
+      ),
+      document.body
+    )
   ] });
 }
 
 // src/components/FontSizePicker.tsx
-import { useState as useState4, useEffect as useEffect5, useCallback as useCallback5, useRef as useRef5 } from "react";
+import { useState as useState6, useEffect as useEffect6, useCallback as useCallback7, useRef as useRef7 } from "react";
 import { jsx as jsx8, jsxs as jsxs4 } from "react/jsx-runtime";
 var SIZE_PRESETS = [
   { name: "S", value: "0.875rem" },
@@ -2363,28 +2473,28 @@ function normalizeValue(input) {
   return `${num}${unit}`;
 }
 function FontSizePicker({ value, onChange, onClose }) {
-  const [inputValue, setInputValue] = useState4(value || "");
-  const inputRef = useRef5(null);
-  useEffect5(() => {
+  const [inputValue, setInputValue] = useState6(value || "");
+  const inputRef = useRef7(null);
+  useEffect6(() => {
     inputRef.current?.focus();
     inputRef.current?.select();
   }, []);
-  useEffect5(() => {
+  useEffect6(() => {
     setInputValue(value || "");
   }, [value]);
-  const handlePresetClick = useCallback5((e, presetValue) => {
+  const handlePresetClick = useCallback7((e, presetValue) => {
     e.stopPropagation();
     onChange(presetValue);
     onClose();
   }, [onChange, onClose]);
-  const handlePresetMouseDown = useCallback5((e) => {
+  const handlePresetMouseDown = useCallback7((e) => {
     e.preventDefault();
     e.stopPropagation();
   }, []);
-  const handleInputChange = useCallback5((e) => {
+  const handleInputChange = useCallback7((e) => {
     setInputValue(e.target.value);
   }, []);
-  const handleInputKeyDown = useCallback5((e) => {
+  const handleInputKeyDown = useCallback7((e) => {
     if (e.key === "ArrowUp" || e.key === "ArrowDown") {
       e.preventDefault();
       e.stopPropagation();
@@ -2460,7 +2570,7 @@ function FontSizePicker({ value, onChange, onClose }) {
 }
 
 // src/components/FontWeightPicker.tsx
-import { useCallback as useCallback6 } from "react";
+import { useCallback as useCallback8 } from "react";
 import { jsx as jsx9 } from "react/jsx-runtime";
 var WEIGHT_PRESETS = [
   { name: "Regular", value: "400" },
@@ -2475,12 +2585,12 @@ function getFontWeightLabel(value) {
   return value;
 }
 function FontWeightPicker({ value, onChange, onClose }) {
-  const handleClick = useCallback6((e, weightValue) => {
+  const handleClick = useCallback8((e, weightValue) => {
     e.stopPropagation();
     onChange(weightValue);
     onClose();
   }, [onChange, onClose]);
-  const handleMouseDown = useCallback6((e) => {
+  const handleMouseDown = useCallback8((e) => {
     e.preventDefault();
     e.stopPropagation();
   }, []);
@@ -2632,6 +2742,18 @@ body.builder-selector-active .ya-text-editable:hover {
 .ProseMirror p {
   margin: 0;
 }
+.ya-text-inline-edit .ProseMirror p {
+  display: inline;
+}
+.ya-text-inline-edit .ProseMirror p + p::before {
+  content: " ";
+}
+.ProseMirror-gapcursor {
+  display: none !important;
+}
+.ProseMirror .ProseMirror-dropcursor {
+  display: none !important;
+}
 .ProseMirror a {
   color: var(--color-primary, #D4A574);
   text-decoration: underline;
@@ -2918,10 +3040,10 @@ function YaText({ fieldId, className, as: Component = "span", children }) {
   const { getValue, setValue, mode, saveToWorker, activeFieldId, setActiveField } = useContentStore();
   const storeContent = getValue(fieldId);
   const content = storeContent || (typeof children === "string" ? children : "");
-  const [isEditing, setIsEditing] = useState5(false);
-  const [showBubbleMenu, setShowBubbleMenu] = useState5(false);
-  const [fontSizeOpen, setFontSizeOpen] = useState5(false);
-  const [fontWeightOpen, setFontWeightOpen] = useState5(false);
+  const [isEditing, setIsEditing] = useState7(false);
+  const [showBubbleMenu, setShowBubbleMenu] = useState7(false);
+  const [fontSizeOpen, setFontSizeOpen] = useState7(false);
+  const [fontWeightOpen, setFontWeightOpen] = useState7(false);
   const {
     displayContent,
     isAnimating,
@@ -2929,15 +3051,16 @@ function YaText({ fieldId, className, as: Component = "span", children }) {
   } = useAnimatedText(fieldId, content, {
     enabled: mode === "inline-edit" && !isEditing
   });
-  const [originalContent, setOriginalContent] = useState5(content);
-  const containerRef = useRef6(null);
-  const originalContentRef = useRef6(content);
-  const [actionButtonsPos, setActionButtonsPos] = useState5(null);
-  const handleSaveRef = useRef6(() => {
+  const [originalContent, setOriginalContent] = useState7(content);
+  const containerRef = useRef8(null);
+  const originalContentRef = useRef8(content);
+  const originalHadLineBreaksRef = useRef8(false);
+  const [actionButtonsPos, setActionButtonsPos] = useState7(null);
+  const handleSaveRef = useRef8(() => {
   });
-  const handleCancelRef = useRef6(() => {
+  const handleCancelRef = useRef8(() => {
   });
-  const handleCloseRef = useRef6(() => {
+  const handleCloseRef = useRef8(() => {
   });
   const editor = useEditor({
     extensions: [
@@ -2949,6 +3072,9 @@ function YaText({ fieldId, className, as: Component = "span", children }) {
         blockquote: false,
         codeBlock: false,
         horizontalRule: false,
+        // Disable gapcursor and dropcursor - show unwanted visual elements
+        gapcursor: false,
+        dropcursor: false,
         // Disable Link since we configure it separately below
         link: false
       }),
@@ -2963,7 +3089,6 @@ function YaText({ fieldId, className, as: Component = "span", children }) {
       FontWeight
     ],
     content,
-    // Content is now HTML, no conversion needed
     editable: true,
     editorProps: {
       attributes: {
@@ -2991,19 +3116,19 @@ function YaText({ fieldId, className, as: Component = "span", children }) {
     },
     parseOptions: { preserveWhitespace: "full" }
   });
-  useEffect6(() => {
+  useEffect7(() => {
     if (editor && !isEditing) {
       if (editor.getHTML() !== content) {
         editor.commands.setContent(content, { parseOptions: { preserveWhitespace: "full" } });
       }
     }
   }, [content, editor, isEditing]);
-  useEffect6(() => {
+  useEffect7(() => {
     if (isEditing && activeFieldId !== null && activeFieldId !== fieldId) {
       setIsEditing(false);
     }
   }, [activeFieldId, fieldId, isEditing]);
-  useEffect6(() => {
+  useEffect7(() => {
     if (!isEditing || !containerRef.current || !editor) {
       setActionButtonsPos(null);
       return;
@@ -3028,55 +3153,62 @@ function YaText({ fieldId, className, as: Component = "span", children }) {
       window.removeEventListener("resize", updatePosition);
     };
   }, [isEditing, editor]);
-  const handleSave = useCallback7(() => {
+  const handleSave = useCallback9(() => {
     if (!editor) return;
     let html = editor.getHTML();
-    html = html.replace(/<\/p><p>/g, "<br><br>").replace(/^<p>/, "").replace(/<\/p>$/, "");
+    const separator = originalHadLineBreaksRef.current ? "<br><br>" : " ";
+    html = html.replace(/<\/p><p>/g, separator).replace(/^<p>/, "").replace(/<\/p>$/, "");
     if (html !== originalContentRef.current) {
       setValue(fieldId, html, "user");
       saveToWorker?.(fieldId, html);
+      originalContentRef.current = html;
     }
     setShowBubbleMenu(false);
     setIsEditing(false);
   }, [editor, fieldId, setValue, saveToWorker]);
-  const handleCancel = useCallback7(() => {
+  const handleCancel = useCallback9(() => {
     if (editor) {
       editor.commands.setContent(originalContent, { parseOptions: { preserveWhitespace: "full" } });
     }
     setShowBubbleMenu(false);
     setIsEditing(false);
   }, [editor, originalContent]);
-  useEffect6(() => {
+  useEffect7(() => {
     handleSaveRef.current = handleSave;
     handleCancelRef.current = handleCancel;
   }, [handleSave, handleCancel]);
-  useEffect6(() => {
+  useEffect7(() => {
     if (mode !== "inline-edit") return;
     const handleEditRequest = (event) => {
       const customEvent = event;
       const parentFieldId = customEvent.detail.fieldId;
       const parentLink = containerRef.current?.closest(`[data-field-id="${parentFieldId}"]`);
       if (!parentLink) return;
-      setOriginalContent(content);
-      originalContentRef.current = content;
+      originalHadLineBreaksRef.current = /<br\s*\/?>/i.test(content);
       setActiveField(fieldId, { close: handleCloseRef.current });
       setIsEditing(true);
       setTimeout(() => {
         editor?.chain().focus().selectAll().run();
         setShowBubbleMenu(true);
+        if (editor) {
+          const normalizedHtml = editor.getHTML();
+          setOriginalContent(normalizedHtml);
+          originalContentRef.current = normalizedHtml;
+        }
       }, 20);
     };
     window.addEventListener("yatext:edit-mode", handleEditRequest);
     return () => window.removeEventListener("yatext:edit-mode", handleEditRequest);
   }, [mode, fieldId, content, editor, setActiveField]);
-  const handleClose = useCallback7(() => {
+  const handleClose = useCallback9(() => {
     if (!editor) {
       setShowBubbleMenu(false);
       setIsEditing(false);
       return;
     }
     let currentHtml = editor.getHTML();
-    currentHtml = currentHtml.replace(/<\/p><p>/g, "<br><br>").replace(/^<p>/, "").replace(/<\/p>$/, "");
+    const separator = originalHadLineBreaksRef.current ? "<br><br>" : " ";
+    currentHtml = currentHtml.replace(/<\/p><p>/g, separator).replace(/^<p>/, "").replace(/<\/p>$/, "");
     if (currentHtml !== originalContentRef.current) {
       setValue(fieldId, currentHtml, "user");
       saveToWorker?.(fieldId, currentHtml);
@@ -3084,10 +3216,10 @@ function YaText({ fieldId, className, as: Component = "span", children }) {
     setShowBubbleMenu(false);
     setIsEditing(false);
   }, [editor, fieldId, setValue, saveToWorker]);
-  useEffect6(() => {
+  useEffect7(() => {
     handleCloseRef.current = handleClose;
   }, [handleClose]);
-  const handleClick = useCallback7((e) => {
+  const handleClick = useCallback9((e) => {
     if (isEditing) {
       e.preventDefault();
       e.stopPropagation();
@@ -3104,17 +3236,21 @@ function YaText({ fieldId, className, as: Component = "span", children }) {
     if (mode === "inline-edit" && !isEditing) {
       e.preventDefault();
       e.stopPropagation();
-      setOriginalContent(content);
-      originalContentRef.current = content;
+      originalHadLineBreaksRef.current = /<br\s*\/?>/i.test(content);
       setActiveField(fieldId, { close: handleClose });
       setIsEditing(true);
       setTimeout(() => {
         editor?.chain().focus().selectAll().run();
         setShowBubbleMenu(true);
+        if (editor) {
+          const normalizedHtml = editor.getHTML();
+          setOriginalContent(normalizedHtml);
+          originalContentRef.current = normalizedHtml;
+        }
       }, 20);
     }
   }, [mode, isEditing, content, editor, fieldId, setActiveField, handleClose]);
-  const handleKeyDown = useCallback7(
+  const handleKeyDown = useCallback9(
     (event) => {
       if (!isEditing) return;
       if (event.key === "Enter" && !event.shiftKey) {
@@ -3135,7 +3271,7 @@ function YaText({ fieldId, className, as: Component = "span", children }) {
     },
     [isEditing, handleSave, handleCancel]
   );
-  const handleLink = useCallback7(() => {
+  const handleLink = useCallback9(() => {
     if (!editor) return;
     const previousUrl = editor.getAttributes("link").href;
     const url = window.prompt("Enter URL:", previousUrl || "https://");
@@ -3146,7 +3282,7 @@ function YaText({ fieldId, className, as: Component = "span", children }) {
       editor.chain().focus().extendMarkRange("link").setLink({ href: url }).run();
     }
   }, [editor]);
-  const handleFontSizeChange = useCallback7(
+  const handleFontSizeChange = useCallback9(
     (size) => {
       if (!editor) return;
       if (size === "") {
@@ -3157,7 +3293,7 @@ function YaText({ fieldId, className, as: Component = "span", children }) {
     },
     [editor]
   );
-  const handleFontWeightChange = useCallback7(
+  const handleFontWeightChange = useCallback9(
     (weight) => {
       if (!editor) return;
       if (weight === "") {
@@ -3213,9 +3349,12 @@ function YaText({ fieldId, className, as: Component = "span", children }) {
       }
     );
   }
+  const hasExplicitLineBreaks = /<br\s*\/?>/i.test(content);
+  const shouldForceInline = !hasExplicitLineBreaks;
   const combinedClassName = [
     className || "",
     isEditing ? "ya-text-editing" : "ya-text-editable",
+    isEditing && shouldForceInline ? "ya-text-inline-edit" : "",
     wrapperClassName
   ].filter(Boolean).join(" ");
   const EditSafeComponent = isEditing && Component === "p" ? "div" : Component;
@@ -3308,7 +3447,7 @@ function YaText({ fieldId, className, as: Component = "span", children }) {
         ),
         isEditing ? /* @__PURE__ */ jsxs5(Fragment3, { children: [
           /* @__PURE__ */ jsx10(EditorContent, { editor }),
-          actionButtonsPos && createPortal3(
+          actionButtonsPos && createPortal4(
             /* @__PURE__ */ jsxs5(
               "div",
               {
@@ -3357,7 +3496,7 @@ function YaText({ fieldId, className, as: Component = "span", children }) {
 }
 
 // src/components/YaImage.tsx
-import { useCallback as useCallback9, useEffect as useEffect8, useRef as useRef8, useState as useState7 } from "react";
+import { useCallback as useCallback12, useEffect as useEffect10, useRef as useRef11, useState as useState10 } from "react";
 
 // src/lib/asset-resolver.ts
 var assetResolver = (path) => path;
@@ -3373,8 +3512,8 @@ function resolveAssetUrl(path) {
 }
 
 // src/components/YaTooltip.tsx
-import { useEffect as useEffect7, useRef as useRef7, useState as useState6, useCallback as useCallback8 } from "react";
-import { createPortal as createPortal4 } from "react-dom";
+import { useEffect as useEffect8, useRef as useRef9, useState as useState8, useCallback as useCallback10 } from "react";
+import { createPortal as createPortal5 } from "react-dom";
 
 // src/components/ya-tooltip.css
 styleInject('.ya-tooltip {\n  position: fixed;\n  z-index: 9999;\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 8px 12px;\n  background: #1a1a1a;\n  color: white;\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  animation: ya-tooltip-fade-in 0.15s ease;\n  pointer-events: none;\n}\n@keyframes ya-tooltip-fade-in {\n  from {\n    transform: scale(0.95);\n  }\n  to {\n    transform: scale(1);\n  }\n}\n.ya-tooltip svg {\n  width: 16px;\n  height: 16px;\n  flex-shrink: 0;\n}\n.ya-tooltip-bottom {\n  transform: translateX(-50%);\n}\n.ya-tooltip-bottom::before {\n  content: "";\n  position: absolute;\n  bottom: 100%;\n  left: 50%;\n  transform: translateX(-50%);\n  border: 6px solid transparent;\n  border-bottom-color: #1a1a1a;\n}\n.ya-tooltip-top {\n  transform: translateX(-50%);\n}\n.ya-tooltip-top::before {\n  content: "";\n  position: absolute;\n  top: 100%;\n  left: 50%;\n  transform: translateX(-50%);\n  border: 6px solid transparent;\n  border-top-color: #1a1a1a;\n}\n.ya-tooltip-right {\n  transform: translateY(-50%);\n}\n.ya-tooltip-right::before {\n  content: "";\n  position: absolute;\n  right: 100%;\n  top: 50%;\n  transform: translateY(-50%);\n  border: 6px solid transparent;\n  border-right-color: #1a1a1a;\n}\n.ya-tooltip-left {\n  transform: translateY(-50%);\n}\n.ya-tooltip-left::before {\n  content: "";\n  position: absolute;\n  left: 100%;\n  top: 50%;\n  transform: translateY(-50%);\n  border: 6px solid transparent;\n  border-left-color: #1a1a1a;\n}\n');
@@ -3387,11 +3526,11 @@ function YaTooltip({
   show,
   preferredPosition = "bottom"
 }) {
-  const [position, setPosition] = useState6(preferredPosition);
-  const [coords, setCoords] = useState6({ top: 0, left: 0 });
-  const [isPositioned, setIsPositioned] = useState6(false);
-  const tooltipRef = useRef7(null);
-  const calculatePosition = useCallback8(() => {
+  const [position, setPosition] = useState8(preferredPosition);
+  const [coords, setCoords] = useState8({ top: 0, left: 0 });
+  const [isPositioned, setIsPositioned] = useState8(false);
+  const tooltipRef = useRef9(null);
+  const calculatePosition = useCallback10(() => {
     if (!anchorRef.current) return;
     const anchor = anchorRef.current.getBoundingClientRect();
     const tooltip = tooltipRef.current?.getBoundingClientRect();
@@ -3466,7 +3605,7 @@ function YaTooltip({
     setCoords({ top, left });
     setIsPositioned(true);
   }, [anchorRef, preferredPosition]);
-  useEffect7(() => {
+  useEffect8(() => {
     if (!show) {
       setIsPositioned(false);
       return;
@@ -3479,13 +3618,13 @@ function YaTooltip({
       window.removeEventListener("resize", calculatePosition);
     };
   }, [show, calculatePosition]);
-  useEffect7(() => {
+  useEffect8(() => {
     if (show && tooltipRef.current) {
       calculatePosition();
     }
   }, [show, children, calculatePosition]);
   if (!show) return null;
-  return createPortal4(
+  return createPortal5(
     /* @__PURE__ */ jsx11(
       "div",
       {
@@ -3504,6 +3643,345 @@ function YaTooltip({
   );
 }
 
+// src/hooks/useImageShaderTransition.ts
+import { useCallback as useCallback11, useEffect as useEffect9, useRef as useRef10, useState as useState9 } from "react";
+
+// src/lib/image-shader-transition.ts
+var VERTEX_SHADER = `
+  attribute vec2 a_position;
+  attribute vec2 a_texCoord;
+  varying vec2 v_texCoord;
+
+  void main() {
+    gl_Position = vec4(a_position, 0.0, 1.0);
+    v_texCoord = a_texCoord;
+  }
+`;
+var FLAG_WAVE_FRAGMENT_SHADER = `
+  precision mediump float;
+
+  uniform sampler2D uTex1;
+  uniform sampler2D uTex2;
+  uniform float uTime;
+  uniform float uProgress;
+
+  varying vec2 v_texCoord;
+
+  void main() {
+    vec2 uv = v_texCoord;
+    float p = uProgress;
+
+    // Smooth easing (smoothstep)
+    float slide = p * p * (3.0 - 2.0 * p);
+
+    // Wave physics - amplitude peaks mid-transition
+    float waveStrength = sin(p * 3.14159) * 0.1;
+    float wave = sin(uv.y * 15.0 + uTime * 5.0) * waveStrength;
+
+    // Distort UVs horizontally
+    vec2 distortedUv = uv;
+    distortedUv.x -= wave;
+
+    // Slide logic with boundary clamping
+    if (uv.x > (1.0 - slide)) {
+      vec2 newUv = distortedUv - vec2(1.0 - slide, 0.0);
+      // Clamp to valid texture coordinates
+      newUv = clamp(newUv, 0.0, 1.0);
+      gl_FragColor = texture2D(uTex2, newUv);
+    } else {
+      vec2 oldUv = distortedUv + vec2(slide, 0.0);
+      // Clamp to valid texture coordinates
+      oldUv = clamp(oldUv, 0.0, 1.0);
+      gl_FragColor = texture2D(uTex1, oldUv);
+    }
+  }
+`;
+function compileShader(gl, source, type) {
+  const shader = gl.createShader(type);
+  if (!shader) return null;
+  gl.shaderSource(shader, source);
+  gl.compileShader(shader);
+  if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
+    console.error("Shader compile error:", gl.getShaderInfoLog(shader));
+    gl.deleteShader(shader);
+    return null;
+  }
+  return shader;
+}
+function createShaderProgram(gl) {
+  const vertexShader = compileShader(gl, VERTEX_SHADER, gl.VERTEX_SHADER);
+  const fragmentShader = compileShader(gl, FLAG_WAVE_FRAGMENT_SHADER, gl.FRAGMENT_SHADER);
+  if (!vertexShader || !fragmentShader) return null;
+  const program = gl.createProgram();
+  if (!program) return null;
+  gl.attachShader(program, vertexShader);
+  gl.attachShader(program, fragmentShader);
+  gl.linkProgram(program);
+  if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
+    console.error("Program link error:", gl.getProgramInfoLog(program));
+    gl.deleteProgram(program);
+    return null;
+  }
+  gl.deleteShader(vertexShader);
+  gl.deleteShader(fragmentShader);
+  return program;
+}
+function setupGeometry(gl, program) {
+  const positions = new Float32Array([
+    -1,
+    -1,
+    1,
+    -1,
+    -1,
+    1,
+    // Triangle 1
+    -1,
+    1,
+    1,
+    -1,
+    1,
+    1
+    // Triangle 2
+  ]);
+  const texCoords = new Float32Array([
+    0,
+    1,
+    1,
+    1,
+    0,
+    0,
+    // Triangle 1
+    0,
+    0,
+    1,
+    1,
+    1,
+    0
+    // Triangle 2
+  ]);
+  const positionBuffer = gl.createBuffer();
+  gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
+  gl.bufferData(gl.ARRAY_BUFFER, positions, gl.STATIC_DRAW);
+  const positionLocation = gl.getAttribLocation(program, "a_position");
+  gl.enableVertexAttribArray(positionLocation);
+  gl.vertexAttribPointer(positionLocation, 2, gl.FLOAT, false, 0, 0);
+  const texCoordBuffer = gl.createBuffer();
+  gl.bindBuffer(gl.ARRAY_BUFFER, texCoordBuffer);
+  gl.bufferData(gl.ARRAY_BUFFER, texCoords, gl.STATIC_DRAW);
+  const texCoordLocation = gl.getAttribLocation(program, "a_texCoord");
+  gl.enableVertexAttribArray(texCoordLocation);
+  gl.vertexAttribPointer(texCoordLocation, 2, gl.FLOAT, false, 0, 0);
+}
+function loadImageAsTexture(gl, src, onLoad) {
+  const texture = gl.createTexture();
+  if (!texture) return null;
+  gl.bindTexture(gl.TEXTURE_2D, texture);
+  const placeholder = new Uint8Array([128, 128, 128, 255]);
+  gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 1, 1, 0, gl.RGBA, gl.UNSIGNED_BYTE, placeholder);
+  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
+  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
+  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
+  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
+  if (!src || src.startsWith("data:image/svg+xml")) {
+    const transparent = new Uint8Array([0, 0, 0, 0]);
+    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 1, 1, 0, gl.RGBA, gl.UNSIGNED_BYTE, transparent);
+    onLoad?.();
+    return texture;
+  }
+  const image2 = document.createElement("img");
+  image2.crossOrigin = "anonymous";
+  image2.onload = () => {
+    gl.bindTexture(gl.TEXTURE_2D, texture);
+    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image2);
+    onLoad?.();
+  };
+  image2.onerror = () => {
+    console.warn("Failed to load image for shader transition:", src);
+    onLoad?.();
+  };
+  image2.src = src;
+  return texture;
+}
+function isWebGLAvailable() {
+  try {
+    const canvas = document.createElement("canvas");
+    const gl = canvas.getContext("webgl") || canvas.getContext("experimental-webgl");
+    return gl !== null;
+  } catch {
+    return false;
+  }
+}
+function createTransitionRenderer(canvas) {
+  const gl = canvas.getContext("webgl", {
+    alpha: true,
+    premultipliedAlpha: false,
+    preserveDrawingBuffer: false
+  });
+  if (!gl) {
+    console.warn("WebGL not available for image transition");
+    return null;
+  }
+  const program = createShaderProgram(gl);
+  if (!program) {
+    console.error("Failed to create shader program");
+    return null;
+  }
+  gl.useProgram(program);
+  setupGeometry(gl, program);
+  const uTex1 = gl.getUniformLocation(program, "uTex1");
+  const uTex2 = gl.getUniformLocation(program, "uTex2");
+  const uTime = gl.getUniformLocation(program, "uTime");
+  const uProgress = gl.getUniformLocation(program, "uProgress");
+  if (!uTex1 || !uTex2 || !uTime || !uProgress) {
+    console.error("Failed to get uniform locations");
+    return null;
+  }
+  gl.enable(gl.BLEND);
+  gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
+  const renderer = {
+    canvas,
+    gl,
+    program,
+    uniforms: { uTex1, uTex2, uTime, uProgress },
+    textures: { tex1: null, tex2: null },
+    destroy: () => {
+      if (renderer.textures.tex1) gl.deleteTexture(renderer.textures.tex1);
+      if (renderer.textures.tex2) gl.deleteTexture(renderer.textures.tex2);
+      gl.deleteProgram(program);
+      const ext = gl.getExtension("WEBGL_lose_context");
+      ext?.loseContext();
+    }
+  };
+  return renderer;
+}
+function renderTransitionFrame(renderer, progress, time) {
+  const { gl, program, uniforms, textures } = renderer;
+  const canvas = renderer.canvas;
+  if (canvas.width !== canvas.clientWidth || canvas.height !== canvas.clientHeight) {
+    canvas.width = canvas.clientWidth;
+    canvas.height = canvas.clientHeight;
+    gl.viewport(0, 0, canvas.width, canvas.height);
+  }
+  gl.clearColor(0, 0, 0, 0);
+  gl.clear(gl.COLOR_BUFFER_BIT);
+  gl.useProgram(program);
+  gl.activeTexture(gl.TEXTURE0);
+  gl.bindTexture(gl.TEXTURE_2D, textures.tex1);
+  gl.uniform1i(uniforms.uTex1, 0);
+  gl.activeTexture(gl.TEXTURE1);
+  gl.bindTexture(gl.TEXTURE_2D, textures.tex2);
+  gl.uniform1i(uniforms.uTex2, 1);
+  gl.uniform1f(uniforms.uTime, time);
+  gl.uniform1f(uniforms.uProgress, progress);
+  gl.drawArrays(gl.TRIANGLES, 0, 6);
+}
+function setTransitionTextures(renderer, oldSrc, newSrc, onReady) {
+  const { gl } = renderer;
+  let loadedCount = 0;
+  const checkReady = () => {
+    loadedCount++;
+    if (loadedCount === 2) onReady();
+  };
+  if (renderer.textures.tex1) gl.deleteTexture(renderer.textures.tex1);
+  if (renderer.textures.tex2) gl.deleteTexture(renderer.textures.tex2);
+  renderer.textures.tex1 = loadImageAsTexture(gl, oldSrc, checkReady);
+  renderer.textures.tex2 = loadImageAsTexture(gl, newSrc, checkReady);
+}
+
+// src/hooks/useImageShaderTransition.ts
+function preloadImage(src) {
+  return new Promise((resolve) => {
+    if (!src || src.startsWith("data:")) {
+      resolve();
+      return;
+    }
+    const img = document.createElement("img");
+    img.onload = () => resolve();
+    img.onerror = () => resolve();
+    img.src = src;
+  });
+}
+var TRANSITION_DURATION = 500;
+function useImageShaderTransition(options = {}) {
+  const { duration = TRANSITION_DURATION, onComplete } = options;
+  const canvasRef = useRef10(null);
+  const rendererRef = useRef10(null);
+  const rafRef = useRef10(null);
+  const startTimeRef = useRef10(0);
+  const newSrcRef = useRef10("");
+  const [isTransitioning, setIsTransitioning] = useState9(false);
+  const [webglAvailable] = useState9(() => isWebGLAvailable());
+  useEffect9(() => {
+    return () => {
+      if (rafRef.current) {
+        cancelAnimationFrame(rafRef.current);
+      }
+      rendererRef.current?.destroy();
+    };
+  }, []);
+  const animate = useCallback11(() => {
+    const renderer = rendererRef.current;
+    if (!renderer) return;
+    const elapsed = performance.now() - startTimeRef.current;
+    const progress = Math.min(elapsed / duration, 1);
+    renderTransitionFrame(renderer, progress, elapsed / 1e3);
+    if (progress < 1) {
+      rafRef.current = requestAnimationFrame(animate);
+    } else {
+      preloadImage(newSrcRef.current).then(() => {
+        setIsTransitioning(false);
+        onComplete?.();
+      });
+    }
+  }, [duration, onComplete]);
+  const startTransition = useCallback11(
+    (oldSrc, newSrc) => {
+      if (!webglAvailable) {
+        return;
+      }
+      if (rafRef.current) {
+        cancelAnimationFrame(rafRef.current);
+        rafRef.current = null;
+      }
+      newSrcRef.current = newSrc;
+      const canvas = canvasRef.current;
+      if (!canvas) {
+        console.warn("Canvas not available for shader transition");
+        return;
+      }
+      if (!rendererRef.current) {
+        rendererRef.current = createTransitionRenderer(canvas);
+      }
+      const renderer = rendererRef.current;
+      if (!renderer) {
+        console.warn("Failed to create transition renderer");
+        return;
+      }
+      setTransitionTextures(renderer, oldSrc, newSrc, () => {
+        renderTransitionFrame(renderer, 0, 0);
+        setIsTransitioning(true);
+        startTimeRef.current = performance.now();
+        rafRef.current = requestAnimationFrame(animate);
+      });
+    },
+    [webglAvailable, animate]
+  );
+  const cancelTransition = useCallback11(() => {
+    if (rafRef.current) {
+      cancelAnimationFrame(rafRef.current);
+      rafRef.current = null;
+    }
+    setIsTransitioning(false);
+  }, []);
+  return {
+    canvasRef,
+    isTransitioning,
+    startTransition,
+    cancelTransition,
+    webglAvailable
+  };
+}
+
 // src/components/ya-image.css
 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');
 
@@ -3552,15 +4030,16 @@ function YaImage({
   fallbackSrc,
   fallbackAlt
 }) {
-  const { getValue, setValue, mode } = useContentStore();
-  const containerRef = useRef8(null);
-  const imgRef = useRef8(null);
-  const [isSelected, setIsSelected] = useState7(false);
-  const [isHovered, setIsHovered] = useState7(false);
-  const [isSmallImage, setIsSmallImage] = useState7(false);
-  const [isDropMode, setIsDropMode] = useState7(false);
-  const [isDropHover, setIsDropHover] = useState7(false);
-  const [previewOverride, setPreviewOverride] = useState7(null);
+  const { getValue, setValue, mode, getChangeSource, clearChangeSource } = useContentStore();
+  const containerRef = useRef11(null);
+  const imgRef = useRef11(null);
+  const [isSelected, setIsSelected] = useState10(false);
+  const [isHovered, setIsHovered] = useState10(false);
+  const [isSmallImage, setIsSmallImage] = useState10(false);
+  const [isDropMode, setIsDropMode] = useState10(false);
+  const [isDropHover, setIsDropHover] = useState10(false);
+  const [previewOverride, setPreviewOverride] = useState10(null);
+  const prevSrcRef = useRef11(null);
   const rawValue = getValue(fieldId);
   const imageData = parseImageValue(rawValue);
   const displayData = previewOverride || imageData;
@@ -3568,7 +4047,45 @@ function YaImage({
   const altText = displayData.alt || alt || fallbackAlt || "";
   const objectFit = displayData.objectFit || propObjectFit || "cover";
   const objectPosition = getObjectPosition(displayData) || propObjectPosition || "50% 50%";
-  const handleClick = useCallback9(() => {
+  const {
+    canvasRef,
+    isTransitioning,
+    startTransition,
+    cancelTransition,
+    webglAvailable
+  } = useImageShaderTransition({
+    duration: 500,
+    onComplete: () => {
+      clearChangeSource(fieldId);
+    }
+  });
+  useEffect10(() => {
+    const changeSource = getChangeSource(fieldId);
+    const resolvedSrc = resolveAssetUrl(src);
+    const prevResolvedSrc = prevSrcRef.current;
+    if (changeSource === "ai") {
+      if (prevResolvedSrc !== null && prevResolvedSrc !== resolvedSrc && webglAvailable) {
+        startTransition(prevResolvedSrc, resolvedSrc);
+      } else {
+        clearChangeSource(fieldId);
+      }
+    }
+    prevSrcRef.current = resolvedSrc;
+  }, [
+    rawValue,
+    src,
+    fieldId,
+    getChangeSource,
+    clearChangeSource,
+    startTransition,
+    webglAvailable
+  ]);
+  useEffect10(() => {
+    return () => {
+      cancelTransition();
+    };
+  }, [cancelTransition]);
+  const handleClick = useCallback12(() => {
     if (mode !== "inline-edit") return;
     if (document.body.classList.contains("builder-selector-active")) return;
     setIsSelected(true);
@@ -3596,7 +4113,7 @@ function YaImage({
       "*"
     );
   }, [mode, fieldId, imageData, src, altText, objectFit, objectPosition]);
-  useEffect8(() => {
+  useEffect10(() => {
     if (mode !== "inline-edit") return;
     const handleMessage2 = (event) => {
       if (event.data?.type === "YA_IMAGE_EDIT_COMPLETE" && event.data.fieldId === fieldId) {
@@ -3617,7 +4134,7 @@ function YaImage({
     window.addEventListener("message", handleMessage2);
     return () => window.removeEventListener("message", handleMessage2);
   }, [mode, fieldId, setValue]);
-  useEffect8(() => {
+  useEffect10(() => {
     if (mode !== "inline-edit") return;
     const handleDropModeMessage = (event) => {
       if (event.data?.type === "DROP_MODE_START") {
@@ -3631,7 +4148,7 @@ function YaImage({
     window.addEventListener("message", handleDropModeMessage);
     return () => window.removeEventListener("message", handleDropModeMessage);
   }, [mode]);
-  const handleDragEnter = useCallback9(
+  const handleDragEnter = useCallback12(
     (e) => {
       if (!isDropMode) return;
       e.preventDefault();
@@ -3655,7 +4172,7 @@ function YaImage({
     },
     [isDropMode, fieldId]
   );
-  const handleDragOver = useCallback9(
+  const handleDragOver = useCallback12(
     (e) => {
       if (!isDropMode) return;
       e.preventDefault();
@@ -3663,7 +4180,7 @@ function YaImage({
     },
     [isDropMode]
   );
-  const handleDragLeave = useCallback9(
+  const handleDragLeave = useCallback12(
     (e) => {
       if (!isDropMode) return;
       e.preventDefault();
@@ -3677,7 +4194,7 @@ function YaImage({
     },
     [isDropMode]
   );
-  const handleDrop = useCallback9(
+  const handleDrop = useCallback12(
     (e) => {
       if (!isDropMode) return;
       e.preventDefault();
@@ -3695,7 +4212,7 @@ function YaImage({
     },
     [isDropMode, fieldId]
   );
-  useEffect8(() => {
+  useEffect10(() => {
     if (mode !== "inline-edit") return;
     const checkSize = () => {
       if (imgRef.current) {
@@ -3717,7 +4234,7 @@ function YaImage({
       window.removeEventListener("resize", checkSize);
     };
   }, [mode]);
-  useEffect8(() => {
+  useEffect10(() => {
     if (!isSelected || mode !== "inline-edit") return;
     let lastRectKey = "";
     let lastTime = 0;
@@ -3752,19 +4269,48 @@ function YaImage({
     return () => cancelAnimationFrame(rafId);
   }, [isSelected, fieldId, mode]);
   if (mode === "read-only") {
-    return /* @__PURE__ */ jsx12(
-      "img",
+    return /* @__PURE__ */ jsxs6(
+      "div",
       {
-        src: resolveAssetUrl(src),
-        alt: altText,
-        className,
-        style: {
-          objectFit,
-          objectPosition
-        },
-        loading,
+        style: { position: "relative", display: "inline-block" },
         "data-ya-restricted": "true",
-        "data-field-id": fieldId
+        "data-field-id": fieldId,
+        children: [
+          /* @__PURE__ */ jsx12(
+            "img",
+            {
+              src: resolveAssetUrl(src),
+              alt: altText,
+              className,
+              style: {
+                objectFit,
+                objectPosition,
+                // Smooth crossfade: hide img during transition (canvas takes over)
+                opacity: isTransitioning ? 0 : 1,
+                transition: "opacity 0.05s ease-out"
+              },
+              loading
+            }
+          ),
+          /* @__PURE__ */ jsx12(
+            "canvas",
+            {
+              ref: canvasRef,
+              className,
+              style: {
+                position: "absolute",
+                top: 0,
+                left: 0,
+                width: "100%",
+                height: "100%",
+                // Smooth crossfade: show canvas during transition
+                opacity: isTransitioning ? 1 : 0,
+                pointerEvents: isTransitioning ? "auto" : "none",
+                transition: "opacity 0.05s ease-out"
+              }
+            }
+          )
+        ]
       }
     );
   }
@@ -3827,11 +4373,32 @@ function YaImage({
             className,
             style: {
               objectFit,
-              objectPosition
+              objectPosition,
+              // Smooth crossfade: hide img during transition (canvas takes over)
+              opacity: isTransitioning ? 0 : 1,
+              transition: "opacity 0.05s ease-out"
             },
             loading
           }
         ),
+        /* @__PURE__ */ jsx12(
+          "canvas",
+          {
+            ref: canvasRef,
+            className,
+            style: {
+              position: "absolute",
+              top: 0,
+              left: 0,
+              width: "100%",
+              height: "100%",
+              // Smooth crossfade: show canvas during transition
+              opacity: isTransitioning ? 1 : 0,
+              pointerEvents: isTransitioning ? "auto" : "none",
+              transition: "opacity 0.05s ease-out"
+            }
+          }
+        ),
         isSmallImage ? /* @__PURE__ */ jsxs6(YaTooltip, { anchorRef: containerRef, show: isHovered && !isSelected, children: [
           editIcon,
           /* @__PURE__ */ jsx12("span", { children: "Click to edit" })
@@ -3848,7 +4415,7 @@ function YaImage({
 }
 
 // src/components/YaVideo.tsx
-import { useCallback as useCallback10, useEffect as useEffect9, useRef as useRef9, useState as useState8 } from "react";
+import { useCallback as useCallback13, useEffect as useEffect11, useRef as useRef12, useState as useState11 } 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');
@@ -3927,12 +4494,12 @@ function YaVideo({
   fallbackPoster
 }) {
   const { getValue, mode } = useContentStore();
-  const containerRef = useRef9(null);
-  const videoRef = useRef9(null);
-  const [isSelected, setIsSelected] = useState8(false);
-  const [isHovered, setIsHovered] = useState8(false);
-  const [isSmallVideo, setIsSmallVideo] = useState8(false);
-  const [isInView, setIsInView] = useState8(loading === "eager");
+  const containerRef = useRef12(null);
+  const videoRef = useRef12(null);
+  const [isSelected, setIsSelected] = useState11(false);
+  const [isHovered, setIsHovered] = useState11(false);
+  const [isSmallVideo, setIsSmallVideo] = useState11(false);
+  const [isInView, setIsInView] = useState11(loading === "eager");
   const rawValue = getValue(fieldId);
   const parsedValue = parseVideoValue(rawValue);
   const videoData = parsedValue.src ? parsedValue : defaultValue || parsedValue;
@@ -3946,8 +4513,8 @@ function YaVideo({
   const controls = videoData.controls ?? true;
   const playsinline = videoData.playsinline ?? true;
   const preload = videoData.preload ?? "metadata";
-  const [prefersReducedMotion, setPrefersReducedMotion] = useState8(false);
-  useEffect9(() => {
+  const [prefersReducedMotion, setPrefersReducedMotion] = useState11(false);
+  useEffect11(() => {
     const mediaQuery = window.matchMedia("(prefers-reduced-motion: reduce)");
     setPrefersReducedMotion(mediaQuery.matches);
     const handleChange = (e) => {
@@ -3957,7 +4524,7 @@ function YaVideo({
     return () => mediaQuery.removeEventListener("change", handleChange);
   }, []);
   const effectiveAutoplay = autoplay && !prefersReducedMotion;
-  useEffect9(() => {
+  useEffect11(() => {
     if (loading === "eager" || isInView) return;
     const observer = new IntersectionObserver(
       (entries) => {
@@ -3974,7 +4541,7 @@ function YaVideo({
     }
     return () => observer.disconnect();
   }, [loading, isInView]);
-  const handleKeyDown = useCallback10(
+  const handleKeyDown = useCallback13(
     (e) => {
       if ((e.key === " " || e.key === "Enter") && videoData.type === "upload" && controls) {
         e.preventDefault();
@@ -3990,7 +4557,7 @@ function YaVideo({
     },
     [videoData.type, controls]
   );
-  const handleClick = useCallback10(() => {
+  const handleClick = useCallback13(() => {
     if (mode !== "inline-edit") return;
     if (document.body.classList.contains("builder-selector-active")) return;
     setIsSelected(true);
@@ -4010,7 +4577,7 @@ function YaVideo({
       "*"
     );
   }, [mode, fieldId, videoData]);
-  useEffect9(() => {
+  useEffect11(() => {
     if (mode !== "inline-edit") return;
     const handleMessage2 = (event) => {
       if (event.data?.type === "YA_VIDEO_EDIT_COMPLETE" && event.data.fieldId === fieldId) {
@@ -4023,7 +4590,7 @@ function YaVideo({
     window.addEventListener("message", handleMessage2);
     return () => window.removeEventListener("message", handleMessage2);
   }, [mode, fieldId]);
-  useEffect9(() => {
+  useEffect11(() => {
     if (mode !== "inline-edit") return;
     const checkSize = () => {
       if (containerRef.current) {
@@ -4035,7 +4602,7 @@ function YaVideo({
     window.addEventListener("resize", checkSize);
     return () => window.removeEventListener("resize", checkSize);
   }, [mode]);
-  useEffect9(() => {
+  useEffect11(() => {
     if (!isSelected || mode !== "inline-edit") return;
     let lastRectKey = "";
     let lastTime = 0;
@@ -4235,7 +4802,7 @@ function YaVideo({
 }
 
 // src/components/YaEmbed.tsx
-import { useCallback as useCallback11, useEffect as useEffect10, useRef as useRef10, useState as useState9 } from "react";
+import { useCallback as useCallback14, useEffect as useEffect12, useRef as useRef13, useState as useState12 } 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');
@@ -4355,11 +4922,11 @@ function YaEmbed({
   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 containerRef = useRef13(null);
+  const [isSelected, setIsSelected] = useState12(false);
+  const [isHovered, setIsHovered] = useState12(false);
+  const [isSmallEmbed, setIsSmallEmbed] = useState12(false);
+  const [isInView, setIsInView] = useState12(loading === "eager");
   const rawValue = getValue(fieldId);
   const parsedValue = parseEmbedValue(rawValue);
   const embedData = parsedValue.src ? parsedValue : defaultValue || parsedValue;
@@ -4367,7 +4934,7 @@ function YaEmbed({
   const embedType = embedData.type || "custom";
   const height = embedData.height;
   const aspectRatio = embedData.aspectRatio || propAspectRatio || "16/9";
-  useEffect10(() => {
+  useEffect12(() => {
     if (loading === "eager" || isInView) return;
     const observer = new IntersectionObserver(
       (entries) => {
@@ -4384,7 +4951,7 @@ function YaEmbed({
     }
     return () => observer.disconnect();
   }, [loading, isInView]);
-  const handleClick = useCallback11(() => {
+  const handleClick = useCallback14(() => {
     if (mode !== "inline-edit") return;
     if (document.body.classList.contains("builder-selector-active")) return;
     setIsSelected(true);
@@ -4404,7 +4971,7 @@ function YaEmbed({
       "*"
     );
   }, [mode, fieldId, embedData]);
-  useEffect10(() => {
+  useEffect12(() => {
     if (mode !== "inline-edit") return;
     const handleMessage2 = (event) => {
       if (event.data?.type === "YA_EMBED_EDIT_COMPLETE" && event.data.fieldId === fieldId) {
@@ -4417,7 +4984,7 @@ function YaEmbed({
     window.addEventListener("message", handleMessage2);
     return () => window.removeEventListener("message", handleMessage2);
   }, [mode, fieldId]);
-  useEffect10(() => {
+  useEffect12(() => {
     if (mode !== "inline-edit") return;
     const checkSize = () => {
       if (containerRef.current) {
@@ -4429,7 +4996,7 @@ function YaEmbed({
     window.addEventListener("resize", checkSize);
     return () => window.removeEventListener("resize", checkSize);
   }, [mode]);
-  useEffect10(() => {
+  useEffect12(() => {
     if (!isSelected || mode !== "inline-edit") return;
     let lastRectKey = "";
     let lastTime = 0;
@@ -4625,7 +5192,7 @@ function YaEmbed({
   );
 }
 function TwitterWidgetLoader() {
-  useEffect10(() => {
+  useEffect12(() => {
     if (window.twttr?.widgets) {
       ;
       window.twttr.widgets.load();
@@ -4646,8 +5213,8 @@ function TwitterWidgetLoader() {
 }
 
 // src/components/YaLink.tsx
-import { useEffect as useEffect13, useRef as useRef13, useState as useState12, useCallback as useCallback14, useId } from "react";
-import { createPortal as createPortal5 } from "react-dom";
+import { useEffect as useEffect15, useRef as useRef16, useState as useState15, useCallback as useCallback17, useId } from "react";
+import { createPortal as createPortal6 } from "react-dom";
 import { useEditor as useEditor2, EditorContent as EditorContent2 } from "@tiptap/react";
 import { BubbleMenu } from "@tiptap/react/menus";
 import StarterKit2 from "@tiptap/starter-kit";
@@ -4656,7 +5223,7 @@ import { Extension as Extension2 } from "@tiptap/core";
 import { Link as WouterLink, useLocation } from "wouter";
 
 // src/components/SafeTriangleBelow.tsx
-import { useEffect as useEffect11, useState as useState10, useRef as useRef11, useCallback as useCallback12 } from "react";
+import { useEffect as useEffect13, useState as useState13, useRef as useRef14, useCallback as useCallback15 } from "react";
 function SafeTriangleBelow({
   triggerRef,
   popoverRef,
@@ -4664,10 +5231,10 @@ function SafeTriangleBelow({
   onLeave,
   onStayInside
 }) {
-  const [bounds, setBounds] = useState10(null);
-  const boundsRef = useRef11(bounds);
+  const [bounds, setBounds] = useState13(null);
+  const boundsRef = useRef14(bounds);
   boundsRef.current = bounds;
-  useEffect11(() => {
+  useEffect13(() => {
     if (!isVisible || !triggerRef.current || !popoverRef.current) {
       setBounds(null);
       return;
@@ -4685,7 +5252,7 @@ function SafeTriangleBelow({
     }, 10);
     return () => clearTimeout(timer);
   }, [isVisible, triggerRef, popoverRef]);
-  const checkMousePosition = useCallback12((e) => {
+  const checkMousePosition = useCallback15((e) => {
     const b = boundsRef.current;
     if (!b) return;
     const { clientX: x, clientY: y } = e;
@@ -4697,7 +5264,7 @@ function SafeTriangleBelow({
       onStayInside?.();
     }
   }, [onLeave, onStayInside]);
-  useEffect11(() => {
+  useEffect13(() => {
     if (!isVisible || !bounds) return;
     document.addEventListener("mousemove", checkMousePosition);
     return () => document.removeEventListener("mousemove", checkMousePosition);
@@ -4706,22 +5273,22 @@ function SafeTriangleBelow({
 }
 
 // src/hooks/useSafeTriangle.ts
-import { useState as useState11, useRef as useRef12, useCallback as useCallback13, useEffect as useEffect12 } from "react";
+import { useState as useState14, useRef as useRef15, useCallback as useCallback16, useEffect as useEffect14 } from "react";
 function useSafeTriangle(options = {}) {
   const { showDelay = 0, hideDelay = 150, enabled = true } = options;
-  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(() => {
+  const [isVisible, setIsVisible] = useState14(false);
+  const [isHovering, setIsHovering] = useState14(false);
+  const triggerRef = useRef15(null);
+  const popoverRef = useRef15(null);
+  const showTimeoutRef = useRef15(null);
+  const hideTimeoutRef = useRef15(null);
+  useEffect14(() => {
     return () => {
       if (showTimeoutRef.current) clearTimeout(showTimeoutRef.current);
       if (hideTimeoutRef.current) clearTimeout(hideTimeoutRef.current);
     };
   }, []);
-  const show = useCallback13(() => {
+  const show = useCallback16(() => {
     if (!enabled) return;
     if (hideTimeoutRef.current) {
       clearTimeout(hideTimeoutRef.current);
@@ -4729,7 +5296,7 @@ function useSafeTriangle(options = {}) {
     }
     setIsVisible(true);
   }, [enabled]);
-  const hide = useCallback13(() => {
+  const hide = useCallback16(() => {
     if (showTimeoutRef.current) {
       clearTimeout(showTimeoutRef.current);
       showTimeoutRef.current = null;
@@ -4737,7 +5304,7 @@ function useSafeTriangle(options = {}) {
     setIsVisible(false);
     setIsHovering(false);
   }, []);
-  const handleMouseEnter = useCallback13(() => {
+  const handleMouseEnter = useCallback16(() => {
     if (!enabled) return;
     setIsHovering(true);
     if (hideTimeoutRef.current) {
@@ -4752,7 +5319,7 @@ function useSafeTriangle(options = {}) {
       setIsVisible(true);
     }
   }, [showDelay, enabled]);
-  const handleMouseLeave = useCallback13(() => {
+  const handleMouseLeave = useCallback16(() => {
     setIsHovering(false);
     if (showTimeoutRef.current) {
       clearTimeout(showTimeoutRef.current);
@@ -4762,16 +5329,16 @@ function useSafeTriangle(options = {}) {
       setIsVisible(false);
     }, hideDelay);
   }, [hideDelay]);
-  const handleFocus = useCallback13(() => {
+  const handleFocus = useCallback16(() => {
     if (!enabled) return;
     setIsVisible(true);
   }, [enabled]);
-  const handleTriangleLeave = useCallback13(() => {
+  const handleTriangleLeave = useCallback16(() => {
     if (!isHovering) {
       setIsVisible(false);
     }
   }, [isHovering]);
-  const handleStayInside = useCallback13(() => {
+  const handleStayInside = useCallback16(() => {
     if (hideTimeoutRef.current) {
       clearTimeout(hideTimeoutRef.current);
       hideTimeoutRef.current = null;
@@ -4799,7 +5366,7 @@ function useSafeTriangle(options = {}) {
 }
 
 // src/components/ya-link.css
-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');
+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}\n.ProseMirror-gapcursor {\n  display: none !important;\n}\n.ProseMirror .ProseMirror-dropcursor {\n  display: none !important;\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 jsx15, jsxs as jsxs9 } from "react/jsx-runtime";
@@ -4903,8 +5470,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] = useState12([]);
-  const [sectionsExpanded, setSectionsExpanded] = useState12(false);
+  const [sections, setSections] = useState15([]);
+  const [sectionsExpanded, setSectionsExpanded] = useState15(false);
   const textFieldId = `${fieldId}.text`;
   const hrefFieldId = `${fieldId}.href`;
   const storeText = getValue(textFieldId);
@@ -4915,19 +5482,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] = useState12(null);
-  const [originalText, setOriginalText] = useState12(text2);
-  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 [editingMode, setEditingMode] = useState15(null);
+  const [originalText, setOriginalText] = useState15(text2);
+  const [originalHref, setOriginalHref] = useState15(href);
+  const [currentHref, setCurrentHref] = useState15(href);
+  const [isExternalUrl, setIsExternalUrl] = useState15(false);
+  const [externalUrl, setExternalUrl] = useState15("");
+  const [popoverPosition, setPopoverPosition] = useState15("below");
+  const containerRef = useRef16(null);
+  const hrefPopoverRef = useRef16(null);
+  const [actionButtonsPos, setActionButtonsPos] = useState15(null);
+  const handleSaveTextRef = useRef16(() => {
   });
-  const handleCancelTextRef = useRef13(() => {
+  const handleCancelTextRef = useRef16(() => {
   });
   const {
     popoverRef: editPopoverRef,
@@ -4941,12 +5508,12 @@ function YaLink({ fieldId, href: defaultHref = "#", className, style, as: Compon
   });
   const triggerRef = containerRef;
   const instanceId = useId();
-  useEffect13(() => {
+  useEffect15(() => {
     if (showEditPopover && mode === "inline-edit" && !editingMode) {
       window.dispatchEvent(new CustomEvent("yalink:popover-open", { detail: { id: instanceId } }));
     }
   }, [showEditPopover, mode, editingMode, instanceId]);
-  useEffect13(() => {
+  useEffect15(() => {
     const handleOtherPopoverOpen = (event) => {
       const customEvent = event;
       if (customEvent.detail.id !== instanceId && showEditPopover) {
@@ -4964,7 +5531,10 @@ function YaLink({ fieldId, href: defaultHref = "#", className, style, as: Compon
         orderedList: false,
         blockquote: false,
         codeBlock: false,
-        horizontalRule: false
+        horizontalRule: false,
+        // Disable gapcursor and dropcursor - show unwanted visual elements
+        gapcursor: false,
+        dropcursor: false
       }),
       TextStyle2,
       FontSize2,
@@ -4997,19 +5567,19 @@ function YaLink({ fieldId, href: defaultHref = "#", className, style, as: Compon
       }
     }
   });
-  useEffect13(() => {
+  useEffect15(() => {
     if (editor && editingMode !== "text") {
       if (editor.getHTML() !== text2) {
         editor.commands.setContent(text2);
       }
     }
   }, [text2, editor, editingMode]);
-  useEffect13(() => {
+  useEffect15(() => {
     if (editingMode !== "link") {
       setCurrentHref(href);
     }
   }, [href, editingMode]);
-  useEffect13(() => {
+  useEffect15(() => {
     if (editingMode !== "text" || !containerRef.current) {
       setActionButtonsPos(null);
       return;
@@ -5030,7 +5600,7 @@ function YaLink({ fieldId, href: defaultHref = "#", className, style, as: Compon
       window.removeEventListener("resize", updatePosition);
     };
   }, [editingMode]);
-  useEffect13(() => {
+  useEffect15(() => {
     if (editingMode !== "link") return;
     const handleClickOutside = (event) => {
       const target2 = event.target;
@@ -5044,7 +5614,7 @@ function YaLink({ fieldId, href: defaultHref = "#", className, style, as: Compon
     document.addEventListener("mousedown", handleClickOutside);
     return () => document.removeEventListener("mousedown", handleClickOutside);
   }, [editingMode, originalHref]);
-  useEffect13(() => {
+  useEffect15(() => {
     if (editingMode !== "link" || !containerRef.current) return;
     const updatePosition = () => {
       if (!containerRef.current) return;
@@ -5057,7 +5627,7 @@ function YaLink({ fieldId, href: defaultHref = "#", className, style, as: Compon
     window.addEventListener("resize", updatePosition);
     return () => window.removeEventListener("resize", updatePosition);
   }, [editingMode]);
-  const handleSaveText = useCallback14(() => {
+  const handleSaveText = useCallback17(() => {
     if (!editor) return;
     let html = editor.getHTML();
     html = html.replace(/<\/p><p>/g, "<br><br>").replace(/^<p>/, "").replace(/<\/p>$/, "");
@@ -5065,30 +5635,30 @@ function YaLink({ fieldId, href: defaultHref = "#", className, style, as: Compon
     saveToWorker?.(textFieldId, html);
     setEditingMode(null);
   }, [editor, textFieldId, setValue, saveToWorker]);
-  const handleSaveLink = useCallback14(() => {
+  const handleSaveLink = useCallback17(() => {
     setValue(hrefFieldId, currentHref, "user");
     saveToWorker?.(hrefFieldId, currentHref);
     setEditingMode(null);
     setIsExternalUrl(false);
     setExternalUrl("");
   }, [hrefFieldId, currentHref, setValue, saveToWorker]);
-  const handleCancelText = useCallback14(() => {
+  const handleCancelText = useCallback17(() => {
     if (editor) {
       editor.commands.setContent(originalText);
     }
     setEditingMode(null);
   }, [editor, originalText]);
-  const handleCancelLink = useCallback14(() => {
+  const handleCancelLink = useCallback17(() => {
     setCurrentHref(originalHref);
     setEditingMode(null);
     setIsExternalUrl(false);
     setExternalUrl("");
   }, [originalHref]);
-  useEffect13(() => {
+  useEffect15(() => {
     handleSaveTextRef.current = handleSaveText;
     handleCancelTextRef.current = handleCancelText;
   }, [handleSaveText, handleCancelText]);
-  const handleClick = useCallback14(
+  const handleClick = useCallback17(
     (e) => {
       const selectModeEnabled = window.__builderSelectModeEnabled;
       if (selectModeEnabled) {
@@ -5120,7 +5690,7 @@ function YaLink({ fieldId, href: defaultHref = "#", className, style, as: Compon
     },
     [href, navigate, onClick]
   );
-  const startEditText = useCallback14(() => {
+  const startEditText = useCallback17(() => {
     hideEditPopover();
     if (isIconMode) {
       window.dispatchEvent(new CustomEvent("yatext:edit-mode", {
@@ -5134,7 +5704,7 @@ function YaLink({ fieldId, href: defaultHref = "#", className, style, as: Compon
       }, 20);
     }
   }, [text2, editor, hideEditPopover, isIconMode, fieldId]);
-  const startEditLink = useCallback14(() => {
+  const startEditLink = useCallback17(() => {
     hideEditPopover();
     setEditingMode("link");
     setOriginalHref(href);
@@ -5148,7 +5718,7 @@ function YaLink({ fieldId, href: defaultHref = "#", className, style, as: Compon
       setPopoverPosition(spaceBelow < popoverHeight && spaceAbove > spaceBelow ? "above" : "below");
     }
   }, [href, hideEditPopover]);
-  const handleKeyDown = useCallback14(
+  const handleKeyDown = useCallback17(
     (event) => {
       if (editingMode !== "text") return;
       if (event.key === "Enter" && !event.shiftKey) {
@@ -5169,7 +5739,7 @@ function YaLink({ fieldId, href: defaultHref = "#", className, style, as: Compon
     },
     [editingMode, handleSaveText, handleCancelText]
   );
-  const handleFontSizeChange = useCallback14(
+  const handleFontSizeChange = useCallback17(
     (e) => {
       if (!editor) return;
       const size = e.target.value;
@@ -5181,7 +5751,7 @@ function YaLink({ fieldId, href: defaultHref = "#", className, style, as: Compon
     },
     [editor]
   );
-  const handleFontWeightChange = useCallback14(
+  const handleFontWeightChange = useCallback17(
     (e) => {
       if (!editor) return;
       const weight = e.target.value;
@@ -5193,11 +5763,11 @@ function YaLink({ fieldId, href: defaultHref = "#", className, style, as: Compon
     },
     [editor]
   );
-  const handlePageSelect = useCallback14((path) => {
+  const handlePageSelect = useCallback17((path) => {
     setCurrentHref(path);
     setIsExternalUrl(false);
   }, []);
-  const handleExternalUrlApply = useCallback14(() => {
+  const handleExternalUrlApply = useCallback17(() => {
     if (externalUrl) {
       setCurrentHref(externalUrl);
     }
@@ -5263,7 +5833,7 @@ function YaLink({ fieldId, href: defaultHref = "#", className, style, as: Compon
           // Icon mode: render children directly, no text editing
           children
         ) : editor ? /* @__PURE__ */ jsxs9(Fragment4, { children: [
-          createPortal5(
+          createPortal6(
             /* @__PURE__ */ jsxs9(
               BubbleMenu,
               {
@@ -5326,7 +5896,7 @@ function YaLink({ fieldId, href: defaultHref = "#", className, style, as: Compon
           ),
           editingMode === "text" ? /* @__PURE__ */ jsxs9(Fragment4, { children: [
             /* @__PURE__ */ jsx15(EditorContent2, { editor }),
-            actionButtonsPos && createPortal5(
+            actionButtonsPos && createPortal6(
               /* @__PURE__ */ jsxs9(
                 "div",
                 {
@@ -5457,23 +6027,223 @@ function YaLink({ fieldId, href: defaultHref = "#", className, style, as: Compon
 }
 
 // src/components/YaContainer.tsx
-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,
-  useHover,
-  useInteractions as useInteractions2,
-  offset as offset3,
-  flip as flip3,
-  shift as shift3,
-  FloatingPortal as FloatingPortal2
-} from "@floating-ui/react";
+import { useCallback as useCallback19, useEffect as useEffect17, useRef as useRef18, useState as useState17 } from "react";
+import { createPortal as createPortal8 } from "react-dom";
+
+// src/components/Tooltip.tsx
+import { useState as useState16, useRef as useRef17, useEffect as useEffect16, useLayoutEffect as useLayoutEffect3, useCallback as useCallback18 } from "react";
+import { createPortal as createPortal7 } from "react-dom";
+
+// src/components/tooltip.css
+styleInject('.ya-tooltip-trigger {\n  display: inline-flex;\n}\n.ya-tooltip-v2 {\n  position: fixed;\n  z-index: 10000;\n  padding: 8px 12px;\n  background: #1a1a1a;\n  color: white;\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  border-radius: 6px;\n  white-space: nowrap;\n  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);\n  pointer-events: none;\n  animation: ya-tooltip-v2-fade-in 0.15s ease-out;\n}\n@keyframes ya-tooltip-v2-fade-in {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n.ya-tooltip-v2-arrow {\n  position: absolute;\n  width: 0;\n  height: 0;\n  left: 50%;\n  transform: translateX(-50%);\n}\n.ya-tooltip-v2-bottom .ya-tooltip-v2-arrow {\n  top: -6px;\n  border-left: 6px solid transparent;\n  border-right: 6px solid transparent;\n  border-bottom: 6px solid #1a1a1a;\n}\n.ya-tooltip-v2-top .ya-tooltip-v2-arrow {\n  bottom: -6px;\n  border-left: 6px solid transparent;\n  border-right: 6px solid transparent;\n  border-top: 6px solid #1a1a1a;\n}\n.ya-tooltip-v2-left .ya-tooltip-v2-arrow {\n  right: -6px;\n  left: auto;\n  top: 50%;\n  transform: translateY(-50%);\n  border-top: 6px solid transparent;\n  border-bottom: 6px solid transparent;\n  border-left: 6px solid #1a1a1a;\n}\n.ya-tooltip-v2-right .ya-tooltip-v2-arrow {\n  left: -6px;\n  top: 50%;\n  transform: translateY(-50%);\n  border-top: 6px solid transparent;\n  border-bottom: 6px solid transparent;\n  border-right: 6px solid #1a1a1a;\n}\n');
+
+// src/components/Tooltip.tsx
+import { Fragment as Fragment5, jsx as jsx16, jsxs as jsxs10 } from "react/jsx-runtime";
+function Tooltip({
+  content,
+  children,
+  position = "bottom",
+  delay = 0
+}) {
+  const [isVisible, setIsVisible] = useState16(false);
+  const [tooltipPosition, setTooltipPosition] = useState16(null);
+  const [isMounted, setIsMounted] = useState16(false);
+  const triggerRef = useRef17(null);
+  const tooltipRef = useRef17(null);
+  const timeoutRef = useRef17(null);
+  useEffect16(() => {
+    setIsMounted(true);
+  }, []);
+  const calculatePosition = useCallback18(() => {
+    if (!triggerRef.current) return null;
+    const triggerRect = triggerRef.current.getBoundingClientRect();
+    const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
+    const scrollLeft = window.pageXOffset || document.documentElement.scrollLeft;
+    const gap = 8;
+    const arrowSize = 6;
+    const tooltipWidth = 200;
+    const tooltipHeight = 40;
+    const padding = 12;
+    let top = 0;
+    let left = 0;
+    let finalPosition = position;
+    let useTransformX = false;
+    let arrowOffset = 0;
+    switch (position) {
+      case "top":
+        top = triggerRect.top + scrollTop - tooltipHeight - gap - arrowSize;
+        left = triggerRect.left + scrollLeft + triggerRect.width / 2;
+        useTransformX = true;
+        if (triggerRect.top < tooltipHeight + gap + arrowSize) {
+          finalPosition = "bottom";
+          top = triggerRect.bottom + scrollTop + gap + arrowSize;
+        }
+        break;
+      case "bottom":
+        top = triggerRect.bottom + scrollTop + gap + arrowSize;
+        left = triggerRect.left + scrollLeft + triggerRect.width / 2;
+        useTransformX = true;
+        if (window.innerHeight - triggerRect.bottom < tooltipHeight + gap + arrowSize) {
+          finalPosition = "top";
+          top = triggerRect.top + scrollTop - tooltipHeight - gap - arrowSize;
+        }
+        break;
+      case "left":
+        top = triggerRect.top + scrollTop + triggerRect.height / 2 - tooltipHeight / 2;
+        left = triggerRect.left + scrollLeft - tooltipWidth - gap - arrowSize;
+        if (triggerRect.left < tooltipWidth + gap + arrowSize) {
+          finalPosition = "right";
+          left = triggerRect.right + scrollLeft + gap + arrowSize;
+        }
+        break;
+      case "right":
+        top = triggerRect.top + scrollTop + triggerRect.height / 2 - tooltipHeight / 2;
+        left = triggerRect.right + scrollLeft + gap + arrowSize;
+        if (window.innerWidth - triggerRect.right < tooltipWidth + gap + arrowSize) {
+          finalPosition = "left";
+          left = triggerRect.left + scrollLeft - tooltipWidth - gap - arrowSize;
+        }
+        break;
+    }
+    const triggerCenterX = triggerRect.left + triggerRect.width / 2;
+    if (finalPosition === "top" || finalPosition === "bottom") {
+      const tooltipLeftEdge = triggerCenterX - tooltipWidth / 2;
+      const tooltipRightEdge = triggerCenterX + tooltipWidth / 2;
+      if (tooltipLeftEdge < padding) {
+        const adjustment = padding - tooltipLeftEdge;
+        left = padding + tooltipWidth / 2 + scrollLeft;
+        arrowOffset = -adjustment;
+        useTransformX = true;
+      } else if (tooltipRightEdge > window.innerWidth - padding) {
+        const adjustment = tooltipRightEdge - (window.innerWidth - padding);
+        left = window.innerWidth - padding - tooltipWidth / 2 + scrollLeft;
+        arrowOffset = adjustment;
+        useTransformX = true;
+      }
+    }
+    return { top, left, position: finalPosition, useTransformX, arrowOffset, triggerCenterX, adjusted: false };
+  }, [position]);
+  const handleMouseEnter = () => {
+    timeoutRef.current = setTimeout(() => {
+      const pos = calculatePosition();
+      if (pos) {
+        setTooltipPosition(pos);
+        setIsVisible(true);
+      }
+    }, delay);
+  };
+  const handleMouseLeave = () => {
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+    }
+    setIsVisible(false);
+    setTooltipPosition(null);
+  };
+  useEffect16(() => {
+    return () => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+    };
+  }, []);
+  const edgePadding = 12;
+  useLayoutEffect3(() => {
+    if (!isVisible || !tooltipRef.current || !tooltipPosition || tooltipPosition.adjusted) {
+      return;
+    }
+    const rect = tooltipRef.current.getBoundingClientRect();
+    const viewportWidth = window.innerWidth;
+    const viewportHeight = window.innerHeight;
+    const triggerCenterX = tooltipPosition.triggerCenterX ?? 0;
+    const scrollLeft = window.pageXOffset || document.documentElement.scrollLeft;
+    if (tooltipPosition.position === "top" || tooltipPosition.position === "bottom") {
+      const actualWidth = rect.width;
+      const idealLeft = triggerCenterX - actualWidth / 2;
+      const idealRight = triggerCenterX + actualWidth / 2;
+      let finalLeft;
+      let newArrowOffset = 0;
+      if (idealLeft >= edgePadding && idealRight <= viewportWidth - edgePadding) {
+        finalLeft = triggerCenterX + scrollLeft;
+      } else if (idealLeft < edgePadding) {
+        finalLeft = edgePadding + actualWidth / 2 + scrollLeft;
+        newArrowOffset = triggerCenterX - (edgePadding + actualWidth / 2);
+      } else {
+        finalLeft = viewportWidth - edgePadding - actualWidth / 2 + scrollLeft;
+        newArrowOffset = triggerCenterX - (viewportWidth - edgePadding - actualWidth / 2);
+      }
+      let adjustedTop = tooltipPosition.top;
+      if (rect.bottom > viewportHeight - edgePadding) {
+        adjustedTop -= rect.bottom - viewportHeight + edgePadding;
+      }
+      if (rect.top < edgePadding) {
+        adjustedTop += edgePadding - rect.top;
+      }
+      setTooltipPosition(
+        (prev) => prev ? { ...prev, left: finalLeft, top: adjustedTop, arrowOffset: newArrowOffset, useTransformX: true, adjusted: true } : null
+      );
+    } else {
+      let adjustedTop = tooltipPosition.top;
+      if (rect.bottom > viewportHeight - edgePadding) {
+        adjustedTop -= rect.bottom - viewportHeight + edgePadding;
+      }
+      if (rect.top < edgePadding) {
+        adjustedTop += edgePadding - rect.top;
+      }
+      if (adjustedTop !== tooltipPosition.top) {
+        setTooltipPosition(
+          (prev) => prev ? { ...prev, top: adjustedTop, adjusted: true } : null
+        );
+      } else {
+        setTooltipPosition((prev) => prev ? { ...prev, adjusted: true } : null);
+      }
+    }
+  }, [isVisible, tooltipPosition]);
+  const tooltipContent = isMounted && isVisible && tooltipPosition ? createPortal7(
+    /* @__PURE__ */ jsxs10(
+      "div",
+      {
+        ref: tooltipRef,
+        className: `ya-tooltip-v2 ya-tooltip-v2-${tooltipPosition.position}`,
+        style: {
+          top: `${tooltipPosition.top}px`,
+          left: `${tooltipPosition.left}px`,
+          transform: tooltipPosition.useTransformX ? "translateX(-50%)" : void 0
+        },
+        role: "tooltip",
+        children: [
+          content,
+          /* @__PURE__ */ jsx16(
+            "div",
+            {
+              className: "ya-tooltip-v2-arrow",
+              style: tooltipPosition.arrowOffset ? { left: `calc(50% + ${tooltipPosition.arrowOffset}px)`, transform: "translateX(-50%)" } : void 0
+            }
+          )
+        ]
+      }
+    ),
+    document.body
+  ) : null;
+  return /* @__PURE__ */ jsxs10(Fragment5, { children: [
+    /* @__PURE__ */ jsx16(
+      "div",
+      {
+        ref: triggerRef,
+        onMouseEnter: handleMouseEnter,
+        onMouseLeave: handleMouseLeave,
+        className: "ya-tooltip-trigger",
+        children
+      }
+    ),
+    tooltipContent
+  ] });
+}
 
 // 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  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 jsx16, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx17, jsxs as jsxs11 } from "react/jsx-runtime";
 function parseBackgroundConfig(value) {
   if (!value) {
     return { type: "none" };
@@ -5514,61 +6284,9 @@ function deriveContainerLabel(element) {
   };
   return tagLabels[tagName] || "Section";
 }
-function Toolbar({ containerRef, onImageClick, onColorClick, onAIClick, onClearClick, hasBackground }) {
-  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,
-    context: imageContext
-  } = useFloating3({
-    open: imageOpen,
-    onOpenChange: setImageOpen,
-    middleware: [offset3(8), flip3(), shift3({ padding: 10 })],
-    placement: "bottom"
-  });
-  const imageHover = useHover(imageContext, { delay: { open: 0, close: 0 } });
-  const { getReferenceProps: getImageRefProps, getFloatingProps: getImageFloatProps } = useInteractions2([imageHover]);
-  const {
-    refs: colorRefs,
-    floatingStyles: colorStyles,
-    context: colorContext
-  } = useFloating3({
-    open: colorOpen,
-    onOpenChange: setColorOpen,
-    middleware: [offset3(8), flip3(), shift3({ padding: 10 })],
-    placement: "bottom"
-  });
-  const colorHover = useHover(colorContext, { delay: { open: 0, close: 0 } });
-  const { getReferenceProps: getColorRefProps, getFloatingProps: getColorFloatProps } = useInteractions2([colorHover]);
-  const {
-    refs: aiRefs,
-    floatingStyles: aiStyles,
-    context: aiContext
-  } = useFloating3({
-    open: aiOpen,
-    onOpenChange: setAiOpen,
-    middleware: [offset3(8), flip3(), shift3({ padding: 10 })],
-    placement: "bottom"
-  });
-  const aiHover = useHover(aiContext, { delay: { open: 0, close: 0 } });
-  const { getReferenceProps: getAiRefProps, getFloatingProps: getAiFloatProps } = useInteractions2([aiHover]);
-  const {
-    refs: clearRefs,
-    floatingStyles: clearStyles,
-    context: clearContext
-  } = useFloating3({
-    open: clearOpen,
-    onOpenChange: setClearOpen,
-    middleware: [offset3(8), flip3(), shift3({ padding: 10 })],
-    placement: "bottom"
-  });
-  const clearHover = useHover(clearContext, { delay: { open: 0, close: 0 } });
-  const { getReferenceProps: getClearRefProps, getFloatingProps: getClearFloatProps } = useInteractions2([clearHover]);
-  useEffect14(() => {
+function Toolbar({ containerRef, onImageClick, onColorClick, onAIClick: _onAIClick, onClearClick, hasBackground }) {
+  const [position, setPosition] = useState17(null);
+  useEffect17(() => {
     const updatePosition = () => {
       if (containerRef.current) {
         const rect = containerRef.current.getBoundingClientRect();
@@ -5587,8 +6305,8 @@ function Toolbar({ containerRef, onImageClick, onColorClick, onAIClick, onClearC
     };
   }, [containerRef]);
   if (!position) return null;
-  return createPortal6(
-    /* @__PURE__ */ jsxs10(
+  return createPortal8(
+    /* @__PURE__ */ jsxs11(
       "div",
       {
         className: "ya-container-toolbar",
@@ -5599,81 +6317,43 @@ function Toolbar({ containerRef, onImageClick, onColorClick, onAIClick, onClearC
         },
         onClick: (e) => e.stopPropagation(),
         children: [
-          /* @__PURE__ */ jsx16(
+          /* @__PURE__ */ jsx17(Tooltip, { content: "Background Image", position: "bottom", children: /* @__PURE__ */ jsx17(
             "button",
             {
-              ref: imageRefs.setReference,
               type: "button",
               onClick: onImageClick,
               "aria-label": "Edit background image",
-              ...getImageRefProps(),
-              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" })
+              children: /* @__PURE__ */ jsxs11("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+                /* @__PURE__ */ jsx17("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2", ry: "2" }),
+                /* @__PURE__ */ jsx17("circle", { cx: "8.5", cy: "8.5", r: "1.5" }),
+                /* @__PURE__ */ jsx17("polyline", { points: "21 15 16 10 5 21" })
               ] })
             }
-          ),
-          imageOpen && /* @__PURE__ */ jsx16(FloatingPortal2, { children: /* @__PURE__ */ jsx16(
-            "div",
-            {
-              ref: imageRefs.setFloating,
-              className: "ya-container-tooltip",
-              style: imageStyles,
-              ...getImageFloatProps(),
-              children: "Background Image"
-            }
           ) }),
-          /* @__PURE__ */ jsx16(
+          /* @__PURE__ */ jsx17(Tooltip, { content: "Background Color", position: "bottom", children: /* @__PURE__ */ jsx17(
             "button",
             {
-              ref: colorRefs.setReference,
               type: "button",
               onClick: onColorClick,
               "aria-label": "Edit background color",
-              ...getColorRefProps(),
-              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" })
+              children: /* @__PURE__ */ jsxs11("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+                /* @__PURE__ */ jsx17("circle", { cx: "12", cy: "12", r: "10" }),
+                /* @__PURE__ */ jsx17("path", { d: "M12 2a10 10 0 0 1 0 20", fill: "currentColor" })
               ] })
             }
-          ),
-          colorOpen && /* @__PURE__ */ jsx16(FloatingPortal2, { children: /* @__PURE__ */ jsx16(
-            "div",
+          ) }),
+          hasBackground && /* @__PURE__ */ jsx17(Tooltip, { content: "Remove Background", position: "bottom", children: /* @__PURE__ */ jsx17(
+            "button",
             {
-              ref: colorRefs.setFloating,
-              className: "ya-container-tooltip",
-              style: colorStyles,
-              ...getColorFloatProps(),
-              children: "Background Color"
+              type: "button",
+              onClick: onClearClick,
+              "aria-label": "Clear background",
+              children: /* @__PURE__ */ jsxs11("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+                /* @__PURE__ */ jsx17("circle", { cx: "12", cy: "12", r: "10" }),
+                /* @__PURE__ */ jsx17("line", { x1: "4.93", y1: "4.93", x2: "19.07", y2: "19.07" })
+              ] })
             }
-          ) }),
-          hasBackground && /* @__PURE__ */ jsxs10(Fragment5, { children: [
-            /* @__PURE__ */ jsx16(
-              "button",
-              {
-                ref: clearRefs.setReference,
-                type: "button",
-                onClick: onClearClick,
-                "aria-label": "Clear background",
-                ...getClearRefProps(),
-                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__ */ jsx16(FloatingPortal2, { children: /* @__PURE__ */ jsx16(
-              "div",
-              {
-                ref: clearRefs.setFloating,
-                className: "ya-container-tooltip",
-                style: clearStyles,
-                ...getClearFloatProps(),
-                children: "Remove Background"
-              }
-            ) })
-          ] })
+          ) })
         ]
       }
     ),
@@ -5689,13 +6369,13 @@ function YaContainer({
   defaultBackground
 }) {
   const { getValue, setValue, saveToWorker, mode } = useContentStore();
-  const containerRef = useRef14(null);
-  const [isHovered, setIsHovered] = useState13(false);
-  const [isSelected, setIsSelected] = useState13(false);
-  const [isDropMode, setIsDropMode] = useState13(false);
-  const [isDropHover, setIsDropHover] = useState13(false);
-  const [previewConfig, setPreviewConfig] = useState13(null);
-  useEffect14(() => {
+  const containerRef = useRef18(null);
+  const [isHovered, setIsHovered] = useState17(false);
+  const [isSelected, setIsSelected] = useState17(false);
+  const [isDropMode, setIsDropMode] = useState17(false);
+  const [isDropHover, setIsDropHover] = useState17(false);
+  const [previewConfig, setPreviewConfig] = useState17(null);
+  useEffect17(() => {
     if (mode !== "inline-edit") return;
     const containerEl = containerRef.current;
     if (!containerEl) return;
@@ -5738,7 +6418,7 @@ function YaContainer({
     overlayCustomProps["--ya-overlay-color"] = displayConfig.overlay.color;
     overlayCustomProps["--ya-overlay-opacity"] = displayConfig.overlay.opacity;
   }
-  const handleImageClick = useCallback15(() => {
+  const handleImageClick = useCallback19(() => {
     if (mode !== "inline-edit") return;
     setIsSelected(true);
     const rect = containerRef.current?.getBoundingClientRect();
@@ -5758,7 +6438,7 @@ function YaContainer({
       "*"
     );
   }, [mode, fieldId, backgroundConfig]);
-  const handleColorClick = useCallback15(() => {
+  const handleColorClick = useCallback19(() => {
     if (mode !== "inline-edit") return;
     setIsSelected(true);
     const rect = containerRef.current?.getBoundingClientRect();
@@ -5778,7 +6458,7 @@ function YaContainer({
       "*"
     );
   }, [mode, fieldId, backgroundConfig]);
-  const handleAIClick = useCallback15(() => {
+  const handleAIClick = useCallback19(() => {
     if (mode !== "inline-edit") return;
     const label = deriveContainerLabel(containerRef.current);
     window.parent.postMessage(
@@ -5791,14 +6471,14 @@ function YaContainer({
       "*"
     );
   }, [mode, fieldId, backgroundConfig]);
-  const handleClearClick = useCallback15(() => {
+  const handleClearClick = useCallback19(() => {
     if (mode !== "inline-edit") return;
     const clearedConfig = { type: "none" };
     const serialized = serializeBackgroundConfig(clearedConfig);
     setValue(fieldId, serialized);
     saveToWorker?.(fieldId, serialized);
   }, [mode, fieldId, setValue, saveToWorker]);
-  useEffect14(() => {
+  useEffect17(() => {
     if (mode !== "inline-edit") return;
     const handleMessage2 = (event) => {
       if (event.data?.type === "YA_CONTAINER_UPDATE_PREVIEW" && event.data.fieldId === fieldId) {
@@ -5819,7 +6499,7 @@ function YaContainer({
     window.addEventListener("message", handleMessage2);
     return () => window.removeEventListener("message", handleMessage2);
   }, [mode, fieldId]);
-  useEffect14(() => {
+  useEffect17(() => {
     if (mode !== "inline-edit") return;
     const handleDropModeMessage = (event) => {
       if (event.data?.type === "DROP_MODE_START") {
@@ -5833,7 +6513,7 @@ function YaContainer({
     window.addEventListener("message", handleDropModeMessage);
     return () => window.removeEventListener("message", handleDropModeMessage);
   }, [mode]);
-  const handleDragEnter = useCallback15(
+  const handleDragEnter = useCallback19(
     (e) => {
       if (!isDropMode) return;
       e.preventDefault();
@@ -5857,7 +6537,7 @@ function YaContainer({
     },
     [isDropMode, fieldId]
   );
-  const handleDragOver = useCallback15(
+  const handleDragOver = useCallback19(
     (e) => {
       if (!isDropMode) return;
       e.preventDefault();
@@ -5865,7 +6545,7 @@ function YaContainer({
     },
     [isDropMode]
   );
-  const handleDragLeave = useCallback15(
+  const handleDragLeave = useCallback19(
     (e) => {
       if (!isDropMode) return;
       e.preventDefault();
@@ -5879,7 +6559,7 @@ function YaContainer({
     },
     [isDropMode]
   );
-  const handleDrop = useCallback15(
+  const handleDrop = useCallback19(
     (e) => {
       if (!isDropMode) return;
       e.preventDefault();
@@ -5897,7 +6577,7 @@ function YaContainer({
     },
     [isDropMode, fieldId]
   );
-  useEffect14(() => {
+  useEffect17(() => {
     if (!isSelected || mode !== "inline-edit") return;
     let lastRectKey = "";
     let lastTime = 0;
@@ -5932,7 +6612,7 @@ function YaContainer({
     return () => cancelAnimationFrame(rafId);
   }, [isSelected, fieldId, mode]);
   if (mode === "read-only") {
-    return /* @__PURE__ */ jsx16(
+    return /* @__PURE__ */ jsx17(
       Tag,
       {
         className: `ya-container ${className || ""}`,
@@ -5956,7 +6636,7 @@ function YaContainer({
     isDropHover ? "ya-container-drop-hover" : "",
     className || ""
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ jsxs10(
+  return /* @__PURE__ */ jsxs11(
     Tag,
     {
       ref: containerRef,
@@ -5975,7 +6655,7 @@ function YaContainer({
       onDrop: handleDrop,
       children: [
         children,
-        mode === "inline-edit" && (isHovered || isSelected) && !document.body.classList.contains("builder-selector-active") && /* @__PURE__ */ jsx16(
+        mode === "inline-edit" && (isHovered || isSelected) && !document.body.classList.contains("builder-selector-active") && /* @__PURE__ */ jsx17(
           Toolbar,
           {
             containerRef,
@@ -5992,10 +6672,10 @@ function YaContainer({
 }
 
 // src/components/StaticText.tsx
-import { jsx as jsx17 } from "react/jsx-runtime";
+import { jsx as jsx18 } from "react/jsx-runtime";
 function MpText({ fieldId, className, as: Component = "span", children }) {
   const content = getContent(fieldId) || (typeof children === "string" ? children : "");
-  return /* @__PURE__ */ jsx17(
+  return /* @__PURE__ */ jsx18(
     Component,
     {
       className,
@@ -6006,7 +6686,7 @@ function MpText({ fieldId, className, as: Component = "span", children }) {
 }
 
 // src/components/StaticImage.tsx
-import { jsx as jsx18 } from "react/jsx-runtime";
+import { jsx as jsx19 } from "react/jsx-runtime";
 function parseImageValue2(value) {
   if (!value) {
     return { src: "" };
@@ -6042,7 +6722,7 @@ function MpImage({
   const altText = imageData.alt || alt || fallbackAlt || "";
   const objectFit = imageData.objectFit || propObjectFit || "cover";
   const objectPosition = getObjectPosition3(imageData) || propObjectPosition || "50% 50%";
-  return /* @__PURE__ */ jsx18(
+  return /* @__PURE__ */ jsx19(
     "img",
     {
       src: resolveAssetUrl(src),
@@ -6060,7 +6740,7 @@ function MpImage({
 
 // src/components/MarkdownText.tsx
 import { Fragment as Fragment6 } from "react";
-import { jsx as jsx19 } from "react/jsx-runtime";
+import { jsx as jsx20 } from "react/jsx-runtime";
 function tokenize(text2) {
   const tokens = [];
   let remaining = text2;
@@ -6122,13 +6802,13 @@ function tokensToElements(tokens) {
   return tokens.map((token, index) => {
     switch (token.type) {
       case "text":
-        return /* @__PURE__ */ jsx19(Fragment6, { children: token.content }, index);
+        return /* @__PURE__ */ jsx20(Fragment6, { children: token.content }, index);
       case "bold":
-        return /* @__PURE__ */ jsx19("strong", { children: token.content }, index);
+        return /* @__PURE__ */ jsx20("strong", { children: token.content }, index);
       case "italic":
-        return /* @__PURE__ */ jsx19("em", { children: token.content }, index);
+        return /* @__PURE__ */ jsx20("em", { children: token.content }, index);
       case "link":
-        return /* @__PURE__ */ jsx19(
+        return /* @__PURE__ */ jsx20(
           "a",
           {
             href: token.url,
@@ -6140,7 +6820,7 @@ function tokensToElements(tokens) {
           index
         );
       case "newline":
-        return /* @__PURE__ */ jsx19("br", {}, index);
+        return /* @__PURE__ */ jsx20("br", {}, index);
       default:
         return null;
     }
@@ -6152,15 +6832,15 @@ function parseMarkdownToElements(content) {
 }
 function MarkdownText({ content, className }) {
   const elements = parseMarkdownToElements(content);
-  return /* @__PURE__ */ jsx19("span", { className, children: elements });
+  return /* @__PURE__ */ jsx20("span", { className, children: elements });
 }
 
 // src/router/Link.tsx
 import { Link as WouterLink2 } from "wouter";
-import { jsx as jsx20 } from "react/jsx-runtime";
+import { jsx as jsx21 } from "react/jsx-runtime";
 function Link2({ to, href, children, className, onClick, replace, ...props }) {
   const target = href ?? to ?? "/";
-  return /* @__PURE__ */ jsx20(WouterLink2, { href: target, className, onClick, replace, ...props, children });
+  return /* @__PURE__ */ jsx21(WouterLink2, { href: target, className, onClick, replace, ...props, children });
 }
 
 // src/router/useNavigate.ts
@@ -6179,7 +6859,7 @@ function useNavigate() {
 
 // src/router/Router.tsx
 import { Router as WouterRouter } from "wouter";
-import { jsx as jsx21 } from "react/jsx-runtime";
+import { jsx as jsx22 } from "react/jsx-runtime";
 function detectBasename() {
   if (typeof window === "undefined") return "";
   const sessionMatch = window.location.pathname.match(/^\/session\/[^/]+/);
@@ -6194,11 +6874,11 @@ function detectBasename() {
 }
 function Router({ children, base }) {
   const basename = base ?? detectBasename();
-  return /* @__PURE__ */ jsx21(WouterRouter, { base: basename, children });
+  return /* @__PURE__ */ jsx22(WouterRouter, { base: basename, children });
 }
 
 // src/router/ScrollRestoration.tsx
-import { useEffect as useEffect15, useRef as useRef15 } from "react";
+import { useEffect as useEffect18, useRef as useRef19 } from "react";
 import { useLocation as useLocation3 } from "wouter";
 var SCROLL_POSITIONS_KEY = "yoamigo-scroll-positions";
 var HISTORY_INDEX_KEY = "yoamigo-history-index";
@@ -6234,10 +6914,10 @@ function setHistoryIndex(index) {
 var globalHistoryIndex = 0;
 function ScrollRestoration() {
   const [location] = useLocation3();
-  const previousLocation = useRef15(location);
-  const isPopState = useRef15(false);
-  const scrollPositionsRef = useRef15({});
-  useEffect15(() => {
+  const previousLocation = useRef19(location);
+  const isPopState = useRef19(false);
+  const scrollPositionsRef = useRef19({});
+  useEffect18(() => {
     if (typeof history !== "undefined" && "scrollRestoration" in history) {
       history.scrollRestoration = "manual";
     }
@@ -6255,7 +6935,7 @@ function ScrollRestoration() {
     window.addEventListener("popstate", handlePopState);
     return () => window.removeEventListener("popstate", handlePopState);
   }, []);
-  useEffect15(() => {
+  useEffect18(() => {
     if (previousLocation.current === location) return;
     const prevHistoryIndex = globalHistoryIndex;
     const currentScrollY = window.scrollY;
@@ -6275,7 +6955,7 @@ function ScrollRestoration() {
     }
     previousLocation.current = location;
   }, [location]);
-  useEffect15(() => {
+  useEffect18(() => {
     let timeoutId;
     const handleScroll = () => {
       clearTimeout(timeoutId);
@@ -6326,6 +7006,7 @@ export {
   MpImage as StaticImage,
   MpText as StaticText,
   Switch,
+  Tooltip,
   YaContainer,
   YaEmbed,
   YaImage,