@yoamigo.com/core 0.2.0 → 0.3.0

package/dist/index.js

@@ -779,6 +779,7 @@ function ContentStoreProvider({
   );
   const [mode, setModeState] = useState(defaultMode);
   const [listeners, setListeners] = useState(/* @__PURE__ */ new Set());
+  const [changeSourceMap, setChangeSourceMap] = useState({});
   const [activeFieldId, setActiveFieldId] = useState(null);
   useEffect(() => {
     const handleContentUpdate = () => {
@@ -807,16 +808,21 @@ function ContentStoreProvider({
     [content]
   );
   const setValue = useCallback(
-    (fieldId, value2) => {
+    (fieldId, value2, source = "ai") => {
       setContent((prev) => {
         const next = new Map(prev);
         next.set(fieldId, value2);
         return next;
       });
+      setChangeSourceMap((prev) => ({ ...prev, [fieldId]: source }));
       notifyListeners();
     },
     [notifyListeners]
   );
+  const getChangeSource = useCallback(
+    (fieldId) => changeSourceMap[fieldId] || "initial",
+    [changeSourceMap]
+  );
   const setMode = useCallback(
     (newMode) => {
       setModeState(newMode);
@@ -904,6 +910,7 @@ function ContentStoreProvider({
     window.mpContentStore = {
       getValue,
       setValue,
+      getChangeSource,
       getMode: () => mode,
       setMode,
       subscribe,
@@ -912,11 +919,12 @@ function ContentStoreProvider({
     return () => {
       delete window.mpContentStore;
     };
-  }, [getValue, setValue, mode, setMode, subscribe, saveToWorker]);
+  }, [getValue, setValue, getChangeSource, mode, setMode, subscribe, saveToWorker]);
   const getPages = useCallback(() => pages, [pages]);
   const value = {
     getValue,
     setValue,
+    getChangeSource,
     mode,
     setMode,
     subscribe,
@@ -956,10 +964,60 @@ function ContentStoreProvider2({ children }) {
 }
 
 // src/components/YaText.tsx
-import { useEffect as useEffect4, useRef as useRef5, useState as useState4, useCallback as useCallback5 } from "react";
-import { createPortal as createPortal2 } from "react-dom";
+import { useEffect as useEffect6, useRef as useRef6, useState as useState5, useCallback as useCallback7 } from "react";
+import { createPortal as createPortal3 } from "react-dom";
 import { useEditor, EditorContent } from "@tiptap/react";
-import { BubbleMenu } from "@tiptap/react/menus";
+
+// 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 { 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 { 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;
+  const style = {
+    ...floatingStyles,
+    opacity: isPositioned ? 1 : 0,
+    transition: "opacity 0.15s ease"
+  };
+  return createPortal(
+    /* @__PURE__ */ jsx3("div", { ref: refs.setFloating, style, className, children }),
+    document.body
+  );
+}
+
+// src/components/YaText.tsx
 import StarterKit from "@tiptap/starter-kit";
 import Link from "@tiptap/extension-link";
 import { TextStyle } from "@tiptap/extension-text-style";
@@ -967,9 +1025,9 @@ 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 { createPortal } from "react-dom";
+import { createPortal as createPortal2 } from "react-dom";
 import DOMPurify from "dompurify";
-import { Fragment, jsx as jsx3, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx as jsx4, jsxs } from "react/jsx-runtime";
 var ALLOWED_TAGS = ["strong", "em", "a", "span", "br", "b", "i", "u"];
 var ALLOWED_ATTR = ["href", "style", "class", "target", "rel"];
 DOMPurify.addHook("uponSanitizeAttribute", (_node, data) => {
@@ -1015,7 +1073,9 @@ function LinkIcon() {
   return /* @__PURE__ */ jsxs(
     "svg",
     {
-      className: "mp-link-popover-icon",
+      className: "ya-link-popover-icon",
+      width: "14",
+      height: "14",
       viewBox: "0 0 24 24",
       fill: "none",
       stroke: "currentColor",
@@ -1023,8 +1083,8 @@ function LinkIcon() {
       strokeLinecap: "round",
       strokeLinejoin: "round",
       children: [
-        /* @__PURE__ */ jsx3("path", { d: "M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71" }),
-        /* @__PURE__ */ jsx3("path", { d: "M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71" })
+        /* @__PURE__ */ jsx4("path", { d: "M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71" }),
+        /* @__PURE__ */ jsx4("path", { d: "M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71" })
       ]
     }
   );
@@ -1039,7 +1099,7 @@ function LinkPopover({
   return /* @__PURE__ */ jsxs(
     "div",
     {
-      className: "mp-link-popover",
+      className: "ya-link-popover",
       style: {
         top: position.top,
         left: position.left
@@ -1056,10 +1116,10 @@ function LinkPopover({
         }
       },
       children: [
-        /* @__PURE__ */ jsx3(LinkIcon, {}),
-        /* @__PURE__ */ jsxs("span", { className: "mp-link-popover-text", children: [
-          /* @__PURE__ */ jsx3("span", { className: "mp-link-popover-prefix", children: "Go to " }),
-          /* @__PURE__ */ jsx3("span", { className: "mp-link-popover-name", children: displayText })
+        /* @__PURE__ */ jsx4(LinkIcon, {}),
+        /* @__PURE__ */ jsxs("span", { className: "ya-link-popover-text", children: [
+          /* @__PURE__ */ jsx4("span", { className: "ya-link-popover-prefix", children: "Go to " }),
+          /* @__PURE__ */ jsx4("span", { className: "ya-link-popover-name", children: displayText })
         ] })
       ]
     }
@@ -1159,7 +1219,7 @@ function SafeHtml({ content, className, mode = "read-only" }) {
     };
   }, [mode, scheduleHide]);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx3(
+    /* @__PURE__ */ jsx4(
       "span",
       {
         ref: containerRef,
@@ -1167,8 +1227,8 @@ function SafeHtml({ content, className, mode = "read-only" }) {
         dangerouslySetInnerHTML: { __html: sanitized }
       }
     ),
-    mode === "inline-edit" && popoverState.isVisible && createPortal(
-      /* @__PURE__ */ jsx3(
+    mode === "inline-edit" && popoverState.isVisible && createPortal2(
+      /* @__PURE__ */ jsx4(
         LinkPopover,
         {
           displayText: popoverState.displayText,
@@ -1191,7 +1251,7 @@ import { useState as useState3, useEffect as useEffect3, useRef as useRef4, useC
 
 // src/contexts/AIEditContext.tsx
 import { createContext as createContext3, useContext as useContext3, useCallback as useCallback3, useRef as useRef3, useMemo } from "react";
-import { jsx as jsx4 } from "react/jsx-runtime";
+import { jsx as jsx5 } from "react/jsx-runtime";
 var AIEditContext = createContext3(null);
 function useAIEditContext() {
   const context = useContext3(AIEditContext);
@@ -1313,13 +1373,14 @@ function AIEditProvider({ children, staggerDelay = 100 }) {
     }),
     [queueAnimation, cancelAnimation, isAnimating, getAnimationState, subscribe, completeAnimation]
   );
-  return /* @__PURE__ */ jsx4(AIEditContext.Provider, { value, children });
+  return /* @__PURE__ */ jsx5(AIEditContext.Provider, { value, children });
 }
 
 // src/hooks/useAIEditAnimation.ts
 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");
@@ -1374,6 +1435,16 @@ function useAIEditAnimation(fieldId, value, options) {
       previousValueRef.current = value;
       return;
     }
+    const source = getChangeSource(fieldId);
+    if (source === "user") {
+      setDisplayValue(value);
+      previousValueRef.current = value;
+      setPhase("complete");
+      setTimeout(() => {
+        setPhase("idle");
+      }, 400);
+      return;
+    }
     const oldValue = previousValueRef.current;
     const newValue = value;
     if (!strategy.canAnimate(oldValue, newValue)) {
@@ -1402,7 +1473,7 @@ function useAIEditAnimation(fieldId, value, options) {
         cancelAnimationFrame(animationFrameRef.current);
       }
     };
-  }, [value, enabled, strategy, context, fieldId, maxDuration, onStart, runAnimation]);
+  }, [value, enabled, strategy, context, fieldId, maxDuration, onStart, runAnimation, getChangeSource]);
   useEffect3(() => {
     return () => {
       if (animationFrameRef.current !== null) {
@@ -1418,7 +1489,8 @@ function useAIEditAnimation(fieldId, value, options) {
     [phase]
   );
   return {
-    displayValue,
+    // When idle, return current value directly to avoid flash of stale state
+    displayValue: phase === "idle" ? value : displayValue,
     isAnimating: phase === "animating",
     phase,
     progress,
@@ -1700,6 +1772,373 @@ function useAnimatedText(fieldId, content, options = {}) {
   };
 }
 
+// src/components/BubbleIcons.tsx
+import { jsx as jsx6, jsxs as jsxs2 } from "react/jsx-runtime";
+function BoldIcon({ size = 16, className }) {
+  return /* @__PURE__ */ jsxs2(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2.5",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      className,
+      children: [
+        /* @__PURE__ */ jsx6("path", { d: "M6 4h8a4 4 0 0 1 4 4 4 4 0 0 1-4 4H6z" }),
+        /* @__PURE__ */ jsx6("path", { d: "M6 12h9a4 4 0 0 1 4 4 4 4 0 0 1-4 4H6z" })
+      ]
+    }
+  );
+}
+function ItalicIcon({ size = 16, className }) {
+  return /* @__PURE__ */ jsxs2(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      className,
+      children: [
+        /* @__PURE__ */ jsx6("line", { x1: "19", y1: "4", x2: "10", y2: "4" }),
+        /* @__PURE__ */ jsx6("line", { x1: "14", y1: "20", x2: "5", y2: "20" }),
+        /* @__PURE__ */ jsx6("line", { x1: "15", y1: "4", x2: "9", y2: "20" })
+      ]
+    }
+  );
+}
+function LinkIcon2({ size = 16, className }) {
+  return /* @__PURE__ */ jsxs2(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      className,
+      children: [
+        /* @__PURE__ */ jsx6("path", { d: "M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71" }),
+        /* @__PURE__ */ jsx6("path", { d: "M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71" })
+      ]
+    }
+  );
+}
+function ChevronDownIcon({ size = 12, className }) {
+  return /* @__PURE__ */ jsx6(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      className,
+      children: /* @__PURE__ */ jsx6("polyline", { points: "6 9 12 15 18 9" })
+    }
+  );
+}
+
+// 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 { Fragment as Fragment2, jsx as jsx7, jsxs as jsxs3 } from "react/jsx-runtime";
+function BubbleDropdown({
+  label,
+  open,
+  onOpenChange,
+  children,
+  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(() => {
+    if (!open) return;
+    const handleKeyDown = (e) => {
+      if (e.key === "Escape") {
+        e.preventDefault();
+        e.stopPropagation();
+        onOpenChange(false);
+      }
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [open, onOpenChange]);
+  const panelStyle = {
+    ...floatingStyles,
+    opacity: isPositioned ? 1 : 0,
+    transition: "opacity 0.15s ease"
+  };
+  const handleTriggerClick = (e) => {
+    e.stopPropagation();
+  };
+  const handleTriggerMouseDown = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+  };
+  const handlePanelClick = (e) => {
+    e.stopPropagation();
+  };
+  return /* @__PURE__ */ jsxs3(Fragment2, { children: [
+    /* @__PURE__ */ jsxs3(
+      "button",
+      {
+        ref: refs.setReference,
+        type: "button",
+        className: `ya-bubble-dropdown-trigger ${open ? "is-open" : ""} ${triggerClassName}`,
+        ...getReferenceProps({
+          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
+      }
+    ) })
+  ] });
+}
+
+// src/components/FontSizePicker.tsx
+import { useState as useState4, useEffect as useEffect5, useCallback as useCallback5, useRef as useRef5 } from "react";
+import { jsx as jsx8, jsxs as jsxs4 } from "react/jsx-runtime";
+var SIZE_PRESETS = [
+  { name: "S", value: "0.875rem" },
+  { name: "M", value: "1rem" },
+  { name: "L", value: "1.25rem" },
+  { name: "XL", value: "1.5rem" }
+];
+var UNIT_COMPLETIONS = {
+  r: "rem",
+  re: "rem",
+  rem: "rem",
+  p: "px",
+  px: "px",
+  e: "em",
+  em: "em",
+  v: "vw",
+  vw: "vw",
+  vh: "vh"
+};
+function getPresetName(value) {
+  const preset = SIZE_PRESETS.find((p) => p.value === value);
+  return preset?.name ?? null;
+}
+function getFontSizeLabel(value) {
+  if (!value) return "Size";
+  const presetName = getPresetName(value);
+  if (presetName) return presetName;
+  return value;
+}
+function parseValue(value) {
+  const match = value.match(/^([\d.]+)(rem|px|em|%|vw|vh)?$/);
+  if (!match) return null;
+  const num = parseFloat(match[1]);
+  const unit = match[2] || "rem";
+  return { num, unit };
+}
+function autocompleteUnit(input) {
+  const match = input.match(/^([\d.]+)([a-z]*)$/);
+  if (!match) return null;
+  const [, num, partialUnit] = match;
+  if (!partialUnit) return null;
+  const fullUnit = UNIT_COMPLETIONS[partialUnit.toLowerCase()];
+  if (fullUnit && fullUnit !== partialUnit) {
+    return `${num}${fullUnit}`;
+  }
+  return null;
+}
+function normalizeValue(input) {
+  if (!input.trim()) return null;
+  const match = input.match(/^([\d.]+)(rem|px|em|%|vw|vh|pt|cm|mm|in)?$/);
+  if (!match) return null;
+  const num = match[1];
+  const unit = match[2] || "rem";
+  if (isNaN(parseFloat(num))) return null;
+  return `${num}${unit}`;
+}
+function FontSizePicker({ value, onChange, onClose }) {
+  const [inputValue, setInputValue] = useState4(value || "");
+  const inputRef = useRef5(null);
+  useEffect5(() => {
+    inputRef.current?.focus();
+    inputRef.current?.select();
+  }, []);
+  useEffect5(() => {
+    setInputValue(value || "");
+  }, [value]);
+  const handlePresetClick = useCallback5((e, presetValue) => {
+    e.stopPropagation();
+    onChange(presetValue);
+    onClose();
+  }, [onChange, onClose]);
+  const handlePresetMouseDown = useCallback5((e) => {
+    e.preventDefault();
+    e.stopPropagation();
+  }, []);
+  const handleInputChange = useCallback5((e) => {
+    setInputValue(e.target.value);
+  }, []);
+  const handleInputKeyDown = useCallback5((e) => {
+    if (e.key === "ArrowUp" || e.key === "ArrowDown") {
+      e.preventDefault();
+      e.stopPropagation();
+      let step = 0.1;
+      if (e.shiftKey) step = 0.01;
+      if (e.ctrlKey || e.metaKey) step = 1;
+      const direction = e.key === "ArrowUp" ? 1 : -1;
+      const parsed = parseValue(inputValue || value || "1rem");
+      if (!parsed) return;
+      const newNum = Math.max(0, parsed.num + step * direction);
+      const formatted = `${Number(newNum.toFixed(2))}${parsed.unit}`;
+      setInputValue(formatted);
+      onChange(formatted);
+      setTimeout(() => inputRef.current?.focus(), 0);
+      return;
+    }
+    if (e.key === "Tab") {
+      const completed = autocompleteUnit(inputValue);
+      if (completed) {
+        e.preventDefault();
+        setInputValue(completed);
+        onChange(completed);
+      }
+      return;
+    }
+    if (e.key === "Enter") {
+      e.preventDefault();
+      const completed = autocompleteUnit(inputValue) || normalizeValue(inputValue);
+      if (completed) {
+        onChange(completed);
+      }
+      onClose();
+      return;
+    }
+    if (e.key === "Escape") {
+      e.preventDefault();
+      onClose();
+    }
+  }, [inputValue, value, onChange, onClose]);
+  const activePreset = getPresetName(value);
+  return /* @__PURE__ */ jsxs4("div", { className: "ya-font-size-picker", children: [
+    /* @__PURE__ */ jsx8("div", { className: "ya-size-presets", children: SIZE_PRESETS.map((preset) => /* @__PURE__ */ jsxs4(
+      "button",
+      {
+        type: "button",
+        className: `ya-size-preset-btn ${activePreset === preset.name ? "is-active" : ""}`,
+        onClick: (e) => handlePresetClick(e, preset.value),
+        onMouseDown: handlePresetMouseDown,
+        children: [
+          /* @__PURE__ */ jsx8("span", { className: "ya-size-preset-name", children: preset.name }),
+          /* @__PURE__ */ jsx8("span", { className: "ya-size-preset-value", children: preset.value })
+        ]
+      },
+      preset.name
+    )) }),
+    /* @__PURE__ */ jsx8("div", { className: "ya-size-combobox", children: /* @__PURE__ */ jsx8(
+      "input",
+      {
+        ref: inputRef,
+        type: "text",
+        value: inputValue,
+        onChange: handleInputChange,
+        onKeyDown: handleInputKeyDown,
+        onClick: (e) => e.stopPropagation(),
+        onMouseDown: (e) => e.stopPropagation(),
+        className: "ya-size-input",
+        placeholder: "1rem",
+        autoComplete: "off",
+        spellCheck: false
+      }
+    ) })
+  ] });
+}
+
+// src/components/FontWeightPicker.tsx
+import { useCallback as useCallback6 } from "react";
+import { jsx as jsx9 } from "react/jsx-runtime";
+var WEIGHT_PRESETS = [
+  { name: "Regular", value: "400" },
+  { name: "Semi-bold", value: "600" },
+  { name: "Bold", value: "700" },
+  { name: "Extra-bold", value: "800" }
+];
+function getFontWeightLabel(value) {
+  if (!value) return "Weight";
+  const preset = WEIGHT_PRESETS.find((p) => p.value === value);
+  if (preset) return preset.name;
+  return value;
+}
+function FontWeightPicker({ value, onChange, onClose }) {
+  const handleClick = useCallback6((e, weightValue) => {
+    e.stopPropagation();
+    onChange(weightValue);
+    onClose();
+  }, [onChange, onClose]);
+  const handleMouseDown = useCallback6((e) => {
+    e.preventDefault();
+    e.stopPropagation();
+  }, []);
+  return /* @__PURE__ */ jsx9("div", { className: "ya-font-weight-picker", children: WEIGHT_PRESETS.map((preset) => /* @__PURE__ */ jsx9(
+    "button",
+    {
+      type: "button",
+      className: `ya-weight-option ${value === preset.value ? "is-active" : ""}`,
+      style: { fontWeight: preset.value },
+      onClick: (e) => handleClick(e, preset.value),
+      onMouseDown: handleMouseDown,
+      children: preset.name
+    },
+    preset.value
+  )) });
+}
+
 // #style-inject:#style-inject
 function styleInject(css, { insertAt } = {}) {
   if (!css || typeof document === "undefined") return;
@@ -1742,6 +2181,16 @@ body.builder-selector-active .ya-text-editable:hover {
   border-radius: 4px;
   position: relative;
 }
+.ya-text-editing .ProseMirror p::selection,
+.ya-text-editing .ProseMirror::selection {
+  background-color: rgba(212, 165, 116, 0.4);
+  color: inherit;
+}
+.ya-text-editing .ProseMirror p::-moz-selection,
+.ya-text-editing .ProseMirror::-moz-selection {
+  background-color: rgba(212, 165, 116, 0.4);
+  color: inherit;
+}
 .ya-bubble-menu {
   display: flex;
   gap: 4px;
@@ -1749,30 +2198,20 @@ body.builder-selector-active .ya-text-editable:hover {
   background: #1a1a1a;
   border-radius: 8px;
   box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
-  animation: ya-bubble-fade-in 0.15s ease;
   font-family:
     system-ui,
     -apple-system,
     BlinkMacSystemFont,
     "Segoe UI",
     sans-serif;
-}
-@keyframes ya-bubble-fade-in {
-  from {
-    opacity: 0;
-    transform: translateY(4px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
+  z-index: 9999;
 }
 .ya-bubble-btn {
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 32px;
-  height: 32px;
+  width: 36px;
+  height: 36px;
   padding: 0;
   border: none;
   background: transparent;
@@ -1796,7 +2235,7 @@ body.builder-selector-active .ya-text-editable:hover {
 }
 .ya-bubble-divider {
   width: 1px;
-  height: 20px;
+  height: 24px;
   background: rgba(255, 255, 255, 0.2);
   margin: 6px 4px;
 }
@@ -1845,6 +2284,14 @@ body.builder-selector-active .ya-text-editable:hover {
   background: rgba(212, 165, 116, 0.3) !important;
   color: inherit !important;
 }
+body.builder-selector-active .ya-text-editable:not(.ya-text-editing)::selection,
+body.builder-selector-active .ya-text-editable:not(.ya-text-editing) *::selection {
+  color: inherit;
+}
+body.builder-selector-active .ya-text-editable:not(.ya-text-editing)::-moz-selection,
+body.builder-selector-active .ya-text-editable:not(.ya-text-editing) *::-moz-selection {
+  color: inherit;
+}
 .ProseMirror p.is-editor-empty:first-child::before {
   content: attr(data-placeholder);
   float: left;
@@ -1855,13 +2302,11 @@ body.builder-selector-active .ya-text-editable:hover {
 .ya-text-actions {
   display: flex;
   gap: 8px;
-  position: absolute;
-  bottom: -48px;
-  right: 0;
-  z-index: 10;
-  background: rgba(26, 26, 26, 0.8);
+  z-index: 9999;
+  background: rgba(26, 26, 26, 0.95);
   padding: 8px 10px;
   border-radius: 8px;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
   font-family:
     system-ui,
     -apple-system,
@@ -1870,8 +2315,8 @@ body.builder-selector-active .ya-text-editable:hover {
     sans-serif;
 }
 .ya-text-btn {
-  padding: 6px 14px;
-  font-size: 12px;
+  padding: 8px 18px;
+  font-size: 14px;
   font-weight: 500;
   border-radius: 6px;
   cursor: pointer;
@@ -1895,59 +2340,135 @@ body.builder-selector-active .ya-text-editable:hover {
 .ya-text-btn-save:hover {
   background: #c4956a;
 }
-.ya-link-popover {
-  position: fixed;
-  z-index: 9999;
+.ya-bubble-dropdown-trigger {
   display: flex;
   align-items: center;
   gap: 6px;
-  padding: 8px 12px;
-  background: #1a1a1a;
+  padding: 6px 10px;
+  background: transparent;
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  border-radius: 6px;
   color: #e0e0e0;
+  font-size: 12px;
+  cursor: pointer;
+  transition: all 0.15s ease;
+  min-width: 70px;
+}
+.ya-bubble-dropdown-trigger:hover {
+  border-color: rgba(255, 255, 255, 0.4);
+  background: rgba(255, 255, 255, 0.05);
+}
+.ya-bubble-dropdown-trigger.is-open {
+  border-color: var(--color-primary, #D4A574);
+  background: rgba(255, 255, 255, 0.05);
+}
+.ya-bubble-dropdown-label {
+  flex: 1;
+  text-align: left;
+}
+.ya-bubble-dropdown-arrow {
+  transition: transform 0.15s ease;
+  opacity: 0.7;
+}
+.ya-bubble-dropdown-arrow.is-open {
+  transform: rotate(180deg);
+}
+.ya-bubble-dropdown-panel {
+  background: #1a1a1a;
   border-radius: 8px;
-  font-size: 13px;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
+  padding: 8px;
+  min-width: 160px;
+  z-index: 10000;
+  font-family:
+    system-ui,
+    -apple-system,
+    BlinkMacSystemFont,
+    "Segoe UI",
+    sans-serif;
+}
+.ya-font-size-picker {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.ya-size-presets {
+  display: flex;
+  gap: 4px;
+}
+.ya-size-preset-btn {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 2px;
+  padding: 6px 8px;
+  background: rgba(255, 255, 255, 0.05);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 4px;
+  color: #e0e0e0;
+  cursor: pointer;
+  transition: all 0.15s ease;
+}
+.ya-size-preset-name {
+  font-size: 12px;
   font-weight: 500;
-  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
+}
+.ya-size-preset-value {
+  font-size: 9px;
+  opacity: 0.5;
+}
+.ya-size-preset-btn:hover {
+  background: rgba(255, 255, 255, 0.1);
+  border-color: rgba(255, 255, 255, 0.2);
+}
+.ya-size-preset-btn.is-active {
+  background: var(--color-primary, #D4A574);
+  color: #1a1a1a;
+  border-color: var(--color-primary, #D4A574);
+}
+.ya-size-combobox {
+  position: relative;
+}
+.ya-size-input {
+  width: 100%;
+  padding: 6px 8px;
+  background: rgba(255, 255, 255, 0.05);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  border-radius: 4px;
+  color: #e0e0e0;
+  font-size: 12px;
+  box-sizing: border-box;
+}
+.ya-size-input:focus {
+  outline: none;
+  border-color: var(--color-primary, #D4A574);
+}
+.ya-size-input::placeholder {
+  color: rgba(224, 224, 224, 0.5);
+}
+.ya-font-weight-picker {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+.ya-weight-option {
+  padding: 8px 12px;
+  background: transparent;
+  border: none;
+  border-radius: 4px;
+  color: #e0e0e0;
+  font-size: 13px;
+  text-align: left;
   cursor: pointer;
-  white-space: nowrap;
-  transform: translateX(-50%);
-  pointer-events: auto;
-  animation: ya-link-popover-fade-in 0.1s ease;
-}
-.ya-link-popover:hover {
-  background: #2a2a2a;
-}
-@keyframes ya-link-popover-fade-in {
-  from {
-    opacity: 0;
-    transform: translateX(-50%) translateY(-4px);
-  }
-  to {
-    opacity: 1;
-    transform: translateX(-50%) translateY(0);
-  }
+  transition: all 0.15s ease;
 }
-.ya-link-popover::before {
-  content: "";
-  position: absolute;
-  top: -6px;
-  left: 50%;
-  transform: translateX(-50%);
-  border-left: 6px solid transparent;
-  border-right: 6px solid transparent;
-  border-bottom: 6px solid #1a1a1a;
-}
-.ya-link-popover-icon {
-  width: 14px;
-  height: 14px;
-  opacity: 0.8;
-  flex-shrink: 0;
-}
-.ya-link-popover-prefix {
-  opacity: 0.7;
+.ya-weight-option:hover {
+  background: rgba(255, 255, 255, 0.1);
 }
-.ya-link-popover-name {
-  color: var(--color-primary, #D4A574);
+.ya-weight-option.is-active {
+  background: var(--color-primary, #D4A574);
+  color: #1a1a1a;
 }
 `);
 
@@ -1955,7 +2476,7 @@ body.builder-selector-active .ya-text-editable:hover {
 styleInject('.ya-ai-editing {\n  position: relative;\n}\n.ya-ai-editing::before {\n  content: "";\n  position: absolute;\n  inset: -4px;\n  border: 2px solid;\n  border-radius: 6px;\n  animation: ya-ai-focus-pulse 1.5s ease-in-out infinite;\n  pointer-events: none;\n  z-index: 10;\n}\n@keyframes ya-ai-focus-pulse {\n  0%, 100% {\n    border-color: rgba(239, 68, 68, 0.6);\n    box-shadow: 0 0 15px rgba(239, 68, 68, 0.2);\n  }\n  50% {\n    border-color: rgba(249, 115, 22, 0.8);\n    box-shadow: 0 0 25px rgba(249, 115, 22, 0.3);\n  }\n}\n.ya-typing-cursor {\n  display: inline-block;\n  width: 2px;\n  height: 1.1em;\n  background:\n    linear-gradient(\n      180deg,\n      #EF4444,\n      #F97316);\n  animation: ya-cursor-blink 0.5s step-end infinite;\n  margin-left: 1px;\n  vertical-align: text-bottom;\n  border-radius: 1px;\n}\n@keyframes ya-cursor-blink {\n  50% {\n    opacity: 0;\n  }\n}\n.ya-ai-complete {\n  animation: ya-complete-glow 0.4s ease-out forwards;\n}\n@keyframes ya-complete-glow {\n  0% {\n    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.5);\n  }\n  50% {\n    box-shadow: 0 0 20px 5px rgba(16, 185, 129, 0.3);\n  }\n  100% {\n    box-shadow: 0 0 0 0 transparent;\n  }\n}\n@media (prefers-reduced-motion: reduce) {\n  .ya-ai-editing::before {\n    animation: none;\n    border-color: rgba(239, 68, 68, 0.6);\n    box-shadow: 0 0 15px rgba(239, 68, 68, 0.2);\n  }\n  .ya-typing-cursor {\n    animation: none;\n    opacity: 1;\n  }\n  .ya-ai-complete {\n    animation: ya-complete-glow-reduced 0.2s ease-out forwards;\n  }\n  @keyframes ya-complete-glow-reduced {\n    0% {\n      background-color: rgba(16, 185, 129, 0.1);\n    }\n    100% {\n      background-color: transparent;\n    }\n  }\n}\n.ya-ai-hidden {\n  opacity: 0;\n  visibility: hidden;\n}\n.ya-ai-fade-in {\n  animation: ya-fade-in 0.3s ease-out forwards;\n}\n@keyframes ya-fade-in {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n.ya-ai-pulse {\n  animation: ya-scale-pulse 0.3s ease-out forwards;\n}\n@keyframes ya-scale-pulse {\n  0% {\n    transform: scale(1);\n  }\n  50% {\n    transform: scale(1.02);\n  }\n  100% {\n    transform: scale(1);\n  }\n}\n');
 
 // src/components/YaText.tsx
-import { Fragment as Fragment2, jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx10, jsxs as jsxs5 } from "react/jsx-runtime";
 var FontSize = Extension.create({
   name: "fontSize",
   addOptions() {
@@ -2032,25 +2553,16 @@ var FontWeight = Extension.create({
         return chain().setMark("textStyle", { fontWeight: null }).removeEmptyTextStyle().run();
       }
     };
-  }
-});
-var SIZE_PRESETS = {
-  S: "14px",
-  M: "16px",
-  L: "20px",
-  XL: "24px"
-};
-var WEIGHT_PRESETS = {
-  Regular: "400",
-  "Semi-bold": "600",
-  Bold: "700",
-  "Extra-bold": "800"
-};
+  }
+});
 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] = useState4(false);
+  const [isEditing, setIsEditing] = useState5(false);
+  const [showBubbleMenu, setShowBubbleMenu] = useState5(false);
+  const [fontSizeOpen, setFontSizeOpen] = useState5(false);
+  const [fontWeightOpen, setFontWeightOpen] = useState5(false);
   const {
     displayContent,
     isAnimating,
@@ -2058,9 +2570,16 @@ function YaText({ fieldId, className, as: Component = "span", children }) {
   } = useAnimatedText(fieldId, content, {
     enabled: mode === "inline-edit" && !isEditing
   });
-  const [originalContent, setOriginalContent] = useState4(content);
-  const containerRef = useRef5(null);
-  const originalContentRef = useRef5(content);
+  const [originalContent, setOriginalContent] = useState5(content);
+  const containerRef = useRef6(null);
+  const originalContentRef = useRef6(content);
+  const [actionButtonsPos, setActionButtonsPos] = useState5(null);
+  const handleSaveRef = useRef6(() => {
+  });
+  const handleCancelRef = useRef6(() => {
+  });
+  const handleCloseRef = useRef6(() => {
+  });
   const editor = useEditor({
     extensions: [
       StarterKit.configure({
@@ -2090,50 +2609,126 @@ function YaText({ fieldId, className, as: Component = "span", children }) {
     editorProps: {
       attributes: {
         class: "outline-none"
+      },
+      // Handle keyboard shortcuts at the editor level to prevent default behavior
+      handleKeyDown: (_view, event) => {
+        if (event.key === "Enter" && !event.shiftKey) {
+          event.preventDefault();
+          handleSaveRef.current();
+          return true;
+        }
+        if (event.key === "Escape") {
+          event.preventDefault();
+          handleCancelRef.current();
+          return true;
+        }
+        if ((event.metaKey || event.ctrlKey) && event.key === "s") {
+          event.preventDefault();
+          handleSaveRef.current();
+          return true;
+        }
+        return false;
       }
     },
     parseOptions: { preserveWhitespace: "full" }
   });
-  useEffect4(() => {
+  useEffect6(() => {
     if (editor && !isEditing) {
       if (editor.getHTML() !== content) {
         editor.commands.setContent(content, { parseOptions: { preserveWhitespace: "full" } });
       }
     }
   }, [content, editor, isEditing]);
-  useEffect4(() => {
+  useEffect6(() => {
     if (isEditing && activeFieldId !== null && activeFieldId !== fieldId) {
       setIsEditing(false);
     }
   }, [activeFieldId, fieldId, isEditing]);
-  const handleSave = useCallback5(() => {
+  useEffect6(() => {
+    if (!isEditing || !containerRef.current || !editor) {
+      setActionButtonsPos(null);
+      return;
+    }
+    const updatePosition = () => {
+      if (!containerRef.current || !editor) return;
+      const rect = containerRef.current.getBoundingClientRect();
+      const { view } = editor;
+      const endPos = view.state.doc.content.size - 1;
+      const endCoords = view.coordsAtPos(Math.max(0, endPos));
+      setActionButtonsPos({
+        top: rect.bottom + 8,
+        left: endCoords.right
+        // Right edge of buttons aligns with text end
+      });
+    };
+    updatePosition();
+    window.addEventListener("scroll", updatePosition, true);
+    window.addEventListener("resize", updatePosition);
+    return () => {
+      window.removeEventListener("scroll", updatePosition, true);
+      window.removeEventListener("resize", updatePosition);
+    };
+  }, [isEditing, editor]);
+  const handleSave = useCallback7(() => {
     if (!editor) return;
     let html = editor.getHTML();
     html = html.replace(/<\/p><p>/g, "<br><br>").replace(/^<p>/, "").replace(/<\/p>$/, "");
-    setValue(fieldId, html);
-    saveToWorker?.(fieldId, html);
+    if (html !== originalContentRef.current) {
+      setValue(fieldId, html, "user");
+      saveToWorker?.(fieldId, html);
+    }
+    setShowBubbleMenu(false);
     setIsEditing(false);
   }, [editor, fieldId, setValue, saveToWorker]);
-  const handleCancel = useCallback5(() => {
+  const handleCancel = useCallback7(() => {
     if (editor) {
       editor.commands.setContent(originalContent, { parseOptions: { preserveWhitespace: "full" } });
     }
+    setShowBubbleMenu(false);
     setIsEditing(false);
   }, [editor, originalContent]);
-  const handleClose = useCallback5(() => {
+  useEffect6(() => {
+    handleSaveRef.current = handleSave;
+    handleCancelRef.current = handleCancel;
+  }, [handleSave, handleCancel]);
+  useEffect6(() => {
+    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;
+      setActiveField(fieldId, { close: handleCloseRef.current });
+      setIsEditing(true);
+      setTimeout(() => {
+        editor?.chain().focus().selectAll().run();
+        setShowBubbleMenu(true);
+      }, 20);
+    };
+    window.addEventListener("yatext:edit-mode", handleEditRequest);
+    return () => window.removeEventListener("yatext:edit-mode", handleEditRequest);
+  }, [mode, fieldId, content, editor, setActiveField]);
+  const handleClose = useCallback7(() => {
     if (!editor) {
+      setShowBubbleMenu(false);
       setIsEditing(false);
       return;
     }
     let currentHtml = editor.getHTML();
     currentHtml = currentHtml.replace(/<\/p><p>/g, "<br><br>").replace(/^<p>/, "").replace(/<\/p>$/, "");
     if (currentHtml !== originalContentRef.current) {
-      setValue(fieldId, currentHtml);
+      setValue(fieldId, currentHtml, "user");
       saveToWorker?.(fieldId, currentHtml);
     }
+    setShowBubbleMenu(false);
     setIsEditing(false);
   }, [editor, fieldId, setValue, saveToWorker]);
-  const handleClick = useCallback5((e) => {
+  useEffect6(() => {
+    handleCloseRef.current = handleClose;
+  }, [handleClose]);
+  const handleClick = useCallback7((e) => {
     if (isEditing) {
       e.preventDefault();
       e.stopPropagation();
@@ -2156,10 +2751,11 @@ function YaText({ fieldId, className, as: Component = "span", children }) {
       setIsEditing(true);
       setTimeout(() => {
         editor?.chain().focus().selectAll().run();
+        setShowBubbleMenu(true);
       }, 20);
     }
   }, [mode, isEditing, content, editor, fieldId, setActiveField, handleClose]);
-  const handleKeyDown = useCallback5(
+  const handleKeyDown = useCallback7(
     (event) => {
       if (!isEditing) return;
       if (event.key === "Enter" && !event.shiftKey) {
@@ -2180,7 +2776,7 @@ function YaText({ fieldId, className, as: Component = "span", children }) {
     },
     [isEditing, handleSave, handleCancel]
   );
-  const handleLink = useCallback5(() => {
+  const handleLink = useCallback7(() => {
     if (!editor) return;
     const previousUrl = editor.getAttributes("link").href;
     const url = window.prompt("Enter URL:", previousUrl || "https://");
@@ -2191,10 +2787,9 @@ function YaText({ fieldId, className, as: Component = "span", children }) {
       editor.chain().focus().extendMarkRange("link").setLink({ href: url }).run();
     }
   }, [editor]);
-  const handleFontSizeChange = useCallback5(
-    (e) => {
+  const handleFontSizeChange = useCallback7(
+    (size) => {
       if (!editor) return;
-      const size = e.target.value;
       if (size === "") {
         editor.chain().focus().unsetFontSize().run();
       } else {
@@ -2203,10 +2798,9 @@ function YaText({ fieldId, className, as: Component = "span", children }) {
     },
     [editor]
   );
-  const handleFontWeightChange = useCallback5(
-    (e) => {
+  const handleFontWeightChange = useCallback7(
+    (weight) => {
       if (!editor) return;
-      const weight = e.target.value;
       if (weight === "") {
         editor.chain().focus().unsetFontWeight().run();
       } else {
@@ -2218,22 +2812,45 @@ function YaText({ fieldId, className, as: Component = "span", children }) {
   const getCurrentFontSize = () => {
     if (!editor) return "";
     const attrs = editor.getAttributes("textStyle");
-    return attrs.fontSize || "";
+    if (attrs.fontSize) return attrs.fontSize;
+    try {
+      const { from } = editor.state.selection;
+      const domAtPos = editor.view.domAtPos(from);
+      const element = domAtPos.node instanceof Element ? domAtPos.node : domAtPos.node.parentElement;
+      if (element) {
+        const computed = window.getComputedStyle(element);
+        return computed.fontSize || "";
+      }
+    } catch {
+    }
+    return "";
   };
   const getCurrentFontWeight = () => {
     if (!editor) return "";
+    if (editor.isActive("bold")) return "700";
     const attrs = editor.getAttributes("textStyle");
-    return attrs.fontWeight || "";
+    if (attrs.fontWeight) return attrs.fontWeight;
+    try {
+      const { from } = editor.state.selection;
+      const domAtPos = editor.view.domAtPos(from);
+      const element = domAtPos.node instanceof Element ? domAtPos.node : domAtPos.node.parentElement;
+      if (element) {
+        const computed = window.getComputedStyle(element);
+        return computed.fontWeight || "";
+      }
+    } catch {
+    }
+    return "";
   };
   if (mode === "read-only") {
-    return /* @__PURE__ */ jsx5(
+    return /* @__PURE__ */ jsx10(
       Component,
       {
         ref: containerRef,
         className,
         "data-ya-restricted": "true",
         "data-field-id": fieldId,
-        children: /* @__PURE__ */ jsx5(SafeHtml, { content, mode })
+        children: /* @__PURE__ */ jsx10(SafeHtml, { content, mode })
       }
     );
   }
@@ -2242,8 +2859,9 @@ function YaText({ fieldId, className, as: Component = "span", children }) {
     isEditing ? "ya-text-editing" : "ya-text-editable",
     wrapperClassName
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ jsx5(
-    Component,
+  const EditSafeComponent = isEditing && Component === "p" ? "div" : Component;
+  return /* @__PURE__ */ jsx10(
+    EditSafeComponent,
     {
       ref: containerRef,
       className: combinedClassName,
@@ -2252,114 +2870,135 @@ function YaText({ fieldId, className, as: Component = "span", children }) {
       "data-ai-editing": isAnimating || void 0,
       onClick: handleClick,
       onKeyDown: handleKeyDown,
-      children: editor ? /* @__PURE__ */ jsxs2(Fragment2, { children: [
-        createPortal2(
-          /* @__PURE__ */ jsxs2(
-            BubbleMenu,
-            {
-              editor,
-              shouldShow: () => isEditing,
-              options: { offset: 6, placement: "top" },
-              className: "ya-bubble-menu",
-              children: [
-                /* @__PURE__ */ jsx5(
-                  "button",
-                  {
-                    type: "button",
-                    onClick: () => editor.chain().focus().toggleBold().run(),
-                    className: `ya-bubble-btn ${editor.isActive("bold") ? "is-active" : ""}`,
-                    title: "Bold",
-                    children: /* @__PURE__ */ jsx5("strong", { children: "B" })
-                  }
-                ),
-                /* @__PURE__ */ jsx5(
-                  "button",
-                  {
-                    type: "button",
-                    onClick: () => editor.chain().focus().toggleItalic().run(),
-                    className: `ya-bubble-btn ${editor.isActive("italic") ? "is-active" : ""}`,
-                    title: "Italic",
-                    children: /* @__PURE__ */ jsx5("em", { children: "I" })
-                  }
-                ),
-                /* @__PURE__ */ jsx5(
-                  "button",
-                  {
-                    type: "button",
-                    onClick: handleLink,
-                    className: `ya-bubble-btn ${editor.isActive("link") ? "is-active" : ""}`,
-                    title: "Link",
-                    children: /* @__PURE__ */ jsx5("span", { children: "\u{1F517}" })
-                  }
-                ),
-                /* @__PURE__ */ jsx5("span", { className: "ya-bubble-divider" }),
-                /* @__PURE__ */ jsxs2(
-                  "select",
-                  {
-                    value: getCurrentFontSize(),
-                    onChange: handleFontSizeChange,
-                    className: "ya-bubble-select",
-                    title: "Font Size",
-                    children: [
-                      /* @__PURE__ */ jsx5("option", { value: "", children: "Size" }),
-                      Object.entries(SIZE_PRESETS).map(([name, size]) => /* @__PURE__ */ jsx5("option", { value: size, children: name }, name))
-                    ]
-                  }
-                ),
-                /* @__PURE__ */ jsxs2(
-                  "select",
-                  {
-                    value: getCurrentFontWeight(),
-                    onChange: handleFontWeightChange,
-                    className: "ya-bubble-select",
-                    title: "Font Weight",
-                    children: [
-                      /* @__PURE__ */ jsx5("option", { value: "", children: "Weight" }),
-                      Object.entries(WEIGHT_PRESETS).map(([name, weight]) => /* @__PURE__ */ jsx5("option", { value: weight, children: name }, name))
-                    ]
-                  }
-                )
-              ]
-            }
-          ),
-          document.body
+      children: editor ? /* @__PURE__ */ jsxs5(Fragment3, { children: [
+        /* @__PURE__ */ jsxs5(
+          ControlledBubbleMenu,
+          {
+            editor,
+            open: showBubbleMenu,
+            className: "ya-bubble-menu",
+            children: [
+              /* @__PURE__ */ jsx10(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => editor.chain().focus().toggleBold().run(),
+                  onMouseDown: (e) => e.preventDefault(),
+                  className: `ya-bubble-btn ${editor.isActive("bold") ? "is-active" : ""}`,
+                  title: "Bold",
+                  children: /* @__PURE__ */ jsx10(BoldIcon, { size: 16 })
+                }
+              ),
+              /* @__PURE__ */ jsx10(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => editor.chain().focus().toggleItalic().run(),
+                  onMouseDown: (e) => e.preventDefault(),
+                  className: `ya-bubble-btn ${editor.isActive("italic") ? "is-active" : ""}`,
+                  title: "Italic",
+                  children: /* @__PURE__ */ jsx10(ItalicIcon, { size: 16 })
+                }
+              ),
+              /* @__PURE__ */ jsx10(
+                "button",
+                {
+                  type: "button",
+                  onClick: handleLink,
+                  onMouseDown: (e) => e.preventDefault(),
+                  className: `ya-bubble-btn ${editor.isActive("link") ? "is-active" : ""}`,
+                  title: "Link",
+                  children: /* @__PURE__ */ jsx10(LinkIcon2, { size: 16 })
+                }
+              ),
+              /* @__PURE__ */ jsx10("span", { className: "ya-bubble-divider" }),
+              /* @__PURE__ */ jsx10(
+                BubbleDropdown,
+                {
+                  label: getFontSizeLabel(getCurrentFontSize()),
+                  open: fontSizeOpen,
+                  onOpenChange: setFontSizeOpen,
+                  children: /* @__PURE__ */ jsx10(
+                    FontSizePicker,
+                    {
+                      value: getCurrentFontSize(),
+                      onChange: handleFontSizeChange,
+                      onClose: () => setFontSizeOpen(false)
+                    }
+                  )
+                }
+              ),
+              /* @__PURE__ */ jsx10(
+                BubbleDropdown,
+                {
+                  label: getFontWeightLabel(getCurrentFontWeight()),
+                  open: fontWeightOpen,
+                  onOpenChange: setFontWeightOpen,
+                  children: /* @__PURE__ */ jsx10(
+                    FontWeightPicker,
+                    {
+                      value: getCurrentFontWeight(),
+                      onChange: handleFontWeightChange,
+                      onClose: () => setFontWeightOpen(false)
+                    }
+                  )
+                }
+              )
+            ]
+          }
         ),
-        isEditing ? /* @__PURE__ */ jsxs2(Fragment2, { children: [
-          /* @__PURE__ */ jsx5(EditorContent, { editor }),
-          /* @__PURE__ */ jsxs2("div", { className: "ya-text-actions", children: [
-            /* @__PURE__ */ jsx5(
-              "button",
+        isEditing ? /* @__PURE__ */ jsxs5(Fragment3, { children: [
+          /* @__PURE__ */ jsx10(EditorContent, { editor }),
+          actionButtonsPos && createPortal3(
+            /* @__PURE__ */ jsxs5(
+              "div",
               {
-                type: "button",
-                onClick: handleCancel,
-                className: "ya-text-btn ya-text-btn-cancel",
-                children: "Cancel"
+                className: "ya-text-actions",
+                style: {
+                  position: "fixed",
+                  top: actionButtonsPos.top,
+                  left: actionButtonsPos.left,
+                  transform: "translateX(-100%)"
+                  // Right edge aligns with text end
+                },
+                children: [
+                  /* @__PURE__ */ jsx10(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: handleCancel,
+                      className: "ya-text-btn ya-text-btn-cancel",
+                      children: "Cancel"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx10(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: handleSave,
+                      className: "ya-text-btn ya-text-btn-save",
+                      children: "Save"
+                    }
+                  )
+                ]
               }
             ),
-            /* @__PURE__ */ jsx5(
-              "button",
-              {
-                type: "button",
-                onClick: handleSave,
-                className: "ya-text-btn ya-text-btn-save",
-                children: "Save"
-              }
-            )
-          ] })
-        ] }) : /* @__PURE__ */ jsxs2(Fragment2, { children: [
-          /* @__PURE__ */ jsx5(SafeHtml, { content: displayContent, mode }),
-          isAnimating && /* @__PURE__ */ jsx5("span", { className: "ya-typing-cursor" })
+            document.body
+          )
+        ] }) : /* @__PURE__ */ jsxs5(Fragment3, { children: [
+          /* @__PURE__ */ jsx10(SafeHtml, { content: displayContent, mode }),
+          isAnimating && /* @__PURE__ */ jsx10("span", { className: "ya-typing-cursor" })
         ] })
-      ] }) : /* @__PURE__ */ jsxs2(Fragment2, { children: [
-        /* @__PURE__ */ jsx5(SafeHtml, { content: displayContent, mode }),
-        isAnimating && /* @__PURE__ */ jsx5("span", { className: "ya-typing-cursor" })
+      ] }) : /* @__PURE__ */ jsxs5(Fragment3, { children: [
+        /* @__PURE__ */ jsx10(SafeHtml, { content: displayContent, mode }),
+        isAnimating && /* @__PURE__ */ jsx10("span", { className: "ya-typing-cursor" })
       ] })
     }
   );
 }
 
 // src/components/YaImage.tsx
-import { useCallback as useCallback7, useEffect as useEffect6, useRef as useRef7, useState as useState6 } from "react";
+import { useCallback as useCallback9, useEffect as useEffect8, useRef as useRef8, useState as useState7 } from "react";
 
 // src/lib/asset-resolver.ts
 var assetResolver = (path) => path;
@@ -2375,25 +3014,25 @@ function resolveAssetUrl(path) {
 }
 
 // src/components/YaTooltip.tsx
-import { useEffect as useEffect5, useRef as useRef6, useState as useState5, useCallback as useCallback6 } from "react";
-import { createPortal as createPortal3 } from "react-dom";
+import { useEffect as useEffect7, useRef as useRef7, useState as useState6, useCallback as useCallback8 } from "react";
+import { createPortal as createPortal4 } 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    opacity: 0;\n    transform: scale(0.95);\n  }\n  to {\n    opacity: 1;\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');
+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');
 
 // src/components/YaTooltip.tsx
-import { jsx as jsx6 } from "react/jsx-runtime";
+import { jsx as jsx11 } from "react/jsx-runtime";
 function YaTooltip({
   anchorRef,
   children,
   show,
   preferredPosition = "bottom"
 }) {
-  const [position, setPosition] = useState5(preferredPosition);
-  const [coords, setCoords] = useState5({ top: 0, left: 0 });
-  const [isPositioned, setIsPositioned] = useState5(false);
-  const tooltipRef = useRef6(null);
-  const calculatePosition = useCallback6(() => {
+  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(() => {
     if (!anchorRef.current) return;
     const anchor = anchorRef.current.getBoundingClientRect();
     const tooltip = tooltipRef.current?.getBoundingClientRect();
@@ -2468,7 +3107,7 @@ function YaTooltip({
     setCoords({ top, left });
     setIsPositioned(true);
   }, [anchorRef, preferredPosition]);
-  useEffect5(() => {
+  useEffect7(() => {
     if (!show) {
       setIsPositioned(false);
       return;
@@ -2481,14 +3120,14 @@ function YaTooltip({
       window.removeEventListener("resize", calculatePosition);
     };
   }, [show, calculatePosition]);
-  useEffect5(() => {
+  useEffect7(() => {
     if (show && tooltipRef.current) {
       calculatePosition();
     }
   }, [show, children, calculatePosition]);
   if (!show) return null;
-  return createPortal3(
-    /* @__PURE__ */ jsx6(
+  return createPortal4(
+    /* @__PURE__ */ jsx11(
       "div",
       {
         ref: tooltipRef,
@@ -2496,8 +3135,7 @@ function YaTooltip({
         style: {
           top: coords.top,
           left: coords.left,
-          opacity: isPositioned ? 1 : 0,
-          pointerEvents: isPositioned ? "auto" : "none"
+          visibility: isPositioned ? "visible" : "hidden"
         },
         role: "tooltip",
         children
@@ -2511,7 +3149,7 @@ function YaTooltip({
 styleInject('.ya-image-container {\n  position: relative;\n  display: inline-block;\n  min-width: 45px;\n  min-height: 45px;\n  cursor: pointer;\n  transition: outline 0.15s ease;\n}\n.ya-image-container img {\n  display: block;\n}\n.ya-image-editable {\n  cursor: pointer;\n}\n.ya-image-editable:hover {\n  outline: 2px dashed var(--color-primary, #D4A574);\n  outline-offset: 4px;\n}\n.ya-image-selected {\n  outline: 3px solid var(--color-primary, #D4A574);\n  outline-offset: 4px;\n}\n.ya-image-overlay {\n  position: absolute;\n  inset: 0;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 8px;\n  background: rgba(0, 0, 0, 0.5);\n  opacity: 0;\n  transition: opacity 0.2s ease;\n  pointer-events: none;\n  border-radius: inherit;\n}\n.ya-image-editable:hover .ya-image-overlay {\n  opacity: 1;\n}\n.ya-image-selected .ya-image-overlay {\n  opacity: 0;\n}\n.ya-image-edit-icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 48px;\n  height: 48px;\n  background: white;\n  border-radius: 50%;\n  color: #1a1a1a;\n  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);\n}\n.ya-image-edit-icon svg {\n  width: 24px;\n  height: 24px;\n}\n.ya-image-edit-label {\n  color: white;\n  font-size: 14px;\n  font-weight: 500;\n  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);\n}\n@keyframes ya-image-success {\n  0% {\n    outline-color: var(--color-primary, #D4A574);\n  }\n  50% {\n    outline-color: #22c55e;\n    outline-width: 4px;\n  }\n  100% {\n    outline-color: var(--color-primary, #D4A574);\n    outline-width: 2px;\n  }\n}\n.ya-image-success {\n  animation: ya-image-success 0.4s ease;\n}\n.ya-image-loading::after {\n  content: "";\n  position: absolute;\n  inset: 0;\n  background:\n    linear-gradient(\n      90deg,\n      rgba(255, 255, 255, 0) 0%,\n      rgba(255, 255, 255, 0.3) 50%,\n      rgba(255, 255, 255, 0) 100%);\n  background-size: 200% 100%;\n  animation: ya-image-shimmer 1.5s infinite;\n}\n@keyframes ya-image-shimmer {\n  0% {\n    background-position: -200% 0;\n  }\n  100% {\n    background-position: 200% 0;\n  }\n}\n.ya-image-container:focus {\n  outline: 3px solid var(--color-primary, #D4A574);\n  outline-offset: 4px;\n}\n.ya-image-container:focus:not(:focus-visible) {\n  outline: none;\n}\n.ya-image-container:focus-visible {\n  outline: 3px solid var(--color-primary, #D4A574);\n  outline-offset: 4px;\n}\n.ya-image-small .ya-image-overlay {\n  display: none;\n}\n.ya-image-drop-target {\n  outline: 2px dashed var(--ya-drop-color, #3b82f6) !important;\n  outline-offset: 4px;\n}\n.ya-image-drop-target .ya-image-overlay {\n  display: none !important;\n}\n.ya-image-drop-hover {\n  outline: 3px solid var(--ya-drop-color, #3b82f6) !important;\n  outline-offset: 4px;\n  background-color: rgba(59, 130, 246, 0.1);\n}\n.ya-image-drop-hover::before {\n  content: "";\n  position: absolute;\n  inset: -4px;\n  border: 2px solid var(--ya-drop-color, #3b82f6);\n  border-radius: inherit;\n  animation: ya-drop-pulse 1s ease-in-out infinite;\n  pointer-events: none;\n}\n@keyframes ya-drop-pulse {\n  0%, 100% {\n    opacity: 0.4;\n    transform: scale(1);\n  }\n  50% {\n    opacity: 0.8;\n    transform: scale(1.02);\n  }\n}\n');
 
 // src/components/YaImage.tsx
-import { jsx as jsx7, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx12, jsxs as jsxs6 } from "react/jsx-runtime";
 function parseImageValue(value) {
   if (!value) {
     return { src: "" };
@@ -2556,20 +3194,20 @@ function YaImage({
   fallbackAlt
 }) {
   const { getValue, mode } = useContentStore();
-  const containerRef = useRef7(null);
-  const imgRef = useRef7(null);
-  const [isSelected, setIsSelected] = useState6(false);
-  const [isHovered, setIsHovered] = useState6(false);
-  const [isSmallImage, setIsSmallImage] = useState6(false);
-  const [isDropMode, setIsDropMode] = useState6(false);
-  const [isDropHover, setIsDropHover] = useState6(false);
+  const 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 rawValue = getValue(fieldId);
   const imageData = parseImageValue(rawValue);
   const src = imageData.src || fallbackSrc || PLACEHOLDER_SVG;
   const altText = imageData.alt || alt || fallbackAlt || "";
   const objectFit = imageData.objectFit || propObjectFit || "cover";
   const objectPosition = getObjectPosition(imageData) || propObjectPosition || "50% 50%";
-  const handleClick = useCallback7(() => {
+  const handleClick = useCallback9(() => {
     if (mode !== "inline-edit") return;
     if (document.body.classList.contains("builder-selector-active")) return;
     setIsSelected(true);
@@ -2597,7 +3235,7 @@ function YaImage({
       "*"
     );
   }, [mode, fieldId, imageData, src, altText, objectFit, objectPosition]);
-  useEffect6(() => {
+  useEffect8(() => {
     if (mode !== "inline-edit") return;
     const handleMessage2 = (event) => {
       if (event.data?.type === "YA_IMAGE_EDIT_COMPLETE" && event.data.fieldId === fieldId) {
@@ -2612,7 +3250,7 @@ function YaImage({
     window.addEventListener("message", handleMessage2);
     return () => window.removeEventListener("message", handleMessage2);
   }, [mode, fieldId]);
-  useEffect6(() => {
+  useEffect8(() => {
     if (mode !== "inline-edit") return;
     const handleDropModeMessage = (event) => {
       if (event.data?.type === "DROP_MODE_START") {
@@ -2626,7 +3264,7 @@ function YaImage({
     window.addEventListener("message", handleDropModeMessage);
     return () => window.removeEventListener("message", handleDropModeMessage);
   }, [mode]);
-  const handleDragEnter = useCallback7(
+  const handleDragEnter = useCallback9(
     (e) => {
       if (!isDropMode) return;
       e.preventDefault();
@@ -2650,7 +3288,7 @@ function YaImage({
     },
     [isDropMode, fieldId]
   );
-  const handleDragOver = useCallback7(
+  const handleDragOver = useCallback9(
     (e) => {
       if (!isDropMode) return;
       e.preventDefault();
@@ -2658,7 +3296,7 @@ function YaImage({
     },
     [isDropMode]
   );
-  const handleDragLeave = useCallback7(
+  const handleDragLeave = useCallback9(
     (e) => {
       if (!isDropMode) return;
       e.preventDefault();
@@ -2672,7 +3310,7 @@ function YaImage({
     },
     [isDropMode]
   );
-  const handleDrop = useCallback7(
+  const handleDrop = useCallback9(
     (e) => {
       if (!isDropMode) return;
       e.preventDefault();
@@ -2690,7 +3328,7 @@ function YaImage({
     },
     [isDropMode, fieldId]
   );
-  useEffect6(() => {
+  useEffect8(() => {
     if (mode !== "inline-edit") return;
     const checkSize = () => {
       if (imgRef.current) {
@@ -2712,7 +3350,7 @@ function YaImage({
       window.removeEventListener("resize", checkSize);
     };
   }, [mode]);
-  useEffect6(() => {
+  useEffect8(() => {
     if (!isSelected || mode !== "inline-edit") return;
     let lastRectKey = "";
     let lastTime = 0;
@@ -2747,7 +3385,7 @@ function YaImage({
     return () => cancelAnimationFrame(rafId);
   }, [isSelected, fieldId, mode]);
   if (mode === "read-only") {
-    return /* @__PURE__ */ jsx7(
+    return /* @__PURE__ */ jsx12(
       "img",
       {
         src: resolveAssetUrl(src),
@@ -2763,7 +3401,7 @@ function YaImage({
       }
     );
   }
-  const editIcon = /* @__PURE__ */ jsxs3(
+  const editIcon = /* @__PURE__ */ jsxs6(
     "svg",
     {
       width: "24",
@@ -2775,9 +3413,9 @@ function YaImage({
       strokeLinecap: "round",
       strokeLinejoin: "round",
       children: [
-        /* @__PURE__ */ jsx7("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2", ry: "2" }),
-        /* @__PURE__ */ jsx7("circle", { cx: "8.5", cy: "8.5", r: "1.5" }),
-        /* @__PURE__ */ jsx7("polyline", { points: "21 15 16 10 5 21" })
+        /* @__PURE__ */ jsx12("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2", ry: "2" }),
+        /* @__PURE__ */ jsx12("circle", { cx: "8.5", cy: "8.5", r: "1.5" }),
+        /* @__PURE__ */ jsx12("polyline", { points: "21 15 16 10 5 21" })
       ]
     }
   );
@@ -2788,7 +3426,7 @@ function YaImage({
     isDropMode ? "ya-image-drop-target" : "",
     isDropHover ? "ya-image-drop-hover" : ""
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ jsxs3(
+  return /* @__PURE__ */ jsxs6(
     "div",
     {
       ref: containerRef,
@@ -2813,7 +3451,7 @@ function YaImage({
         }
       },
       children: [
-        /* @__PURE__ */ jsx7(
+        /* @__PURE__ */ jsx12(
           "img",
           {
             ref: imgRef,
@@ -2827,14 +3465,14 @@ function YaImage({
             loading
           }
         ),
-        isSmallImage ? /* @__PURE__ */ jsxs3(YaTooltip, { anchorRef: containerRef, show: isHovered && !isSelected, children: [
+        isSmallImage ? /* @__PURE__ */ jsxs6(YaTooltip, { anchorRef: containerRef, show: isHovered && !isSelected, children: [
           editIcon,
-          /* @__PURE__ */ jsx7("span", { children: "Click to edit" })
+          /* @__PURE__ */ jsx12("span", { children: "Click to edit" })
         ] }) : (
           /* For large images: show overlay inside the image */
-          /* @__PURE__ */ jsxs3("div", { className: "ya-image-overlay", children: [
-            /* @__PURE__ */ jsx7("div", { className: "ya-image-edit-icon", children: editIcon }),
-            /* @__PURE__ */ jsx7("span", { className: "ya-image-edit-label", children: "Click to edit" })
+          /* @__PURE__ */ jsxs6("div", { className: "ya-image-overlay", children: [
+            /* @__PURE__ */ jsx12("div", { className: "ya-image-edit-icon", children: editIcon }),
+            /* @__PURE__ */ jsx12("span", { className: "ya-image-edit-label", children: "Click to edit" })
           ] })
         )
       ]
@@ -2843,13 +3481,13 @@ function YaImage({
 }
 
 // src/components/YaVideo.tsx
-import { useCallback as useCallback8, useEffect as useEffect7, useRef as useRef8, useState as useState7 } from "react";
+import { useCallback as useCallback10, useEffect as useEffect9, useRef as useRef9, useState as useState8 } from "react";
 
 // src/components/ya-video.css
 styleInject('.ya-video-wrapper {\n  position: relative;\n  display: block;\n  width: 100%;\n}\n.ya-video-wrapper video,\n.ya-video-wrapper iframe {\n  display: block;\n  width: 100%;\n  height: 100%;\n}\n.ya-video-container {\n  position: relative;\n  display: block;\n  width: 100%;\n  min-width: 80px;\n  min-height: 45px;\n  cursor: pointer;\n  transition: outline 0.15s ease;\n}\n.ya-video-container video,\n.ya-video-container iframe {\n  display: block;\n  width: 100%;\n  height: 100%;\n  pointer-events: none;\n}\n.ya-video-editable {\n  cursor: pointer;\n}\n.ya-video-editable:hover {\n  outline: 2px dashed var(--color-primary, #D4A574);\n  outline-offset: 4px;\n}\n.ya-video-selected {\n  outline: 3px solid var(--color-primary, #D4A574);\n  outline-offset: 4px;\n}\n.ya-video-overlay {\n  position: absolute;\n  inset: 0;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 8px;\n  background: rgba(0, 0, 0, 0.5);\n  opacity: 0;\n  transition: opacity 0.2s ease;\n  pointer-events: none;\n  border-radius: inherit;\n}\n.ya-video-editable:hover .ya-video-overlay {\n  opacity: 1;\n}\n.ya-video-selected .ya-video-overlay {\n  opacity: 0;\n}\n.ya-video-edit-icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 48px;\n  height: 48px;\n  background: white;\n  border-radius: 50%;\n  color: #1a1a1a;\n  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);\n}\n.ya-video-edit-icon svg {\n  width: 24px;\n  height: 24px;\n}\n.ya-video-edit-label {\n  color: white;\n  font-size: 14px;\n  font-weight: 500;\n  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);\n}\n.ya-video-placeholder {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 8px;\n  width: 100%;\n  height: 100%;\n  min-height: 120px;\n  background: #f3f4f6;\n  border: 2px dashed #d1d5db;\n  border-radius: 8px;\n  color: #6b7280;\n  font-size: 14px;\n}\n.ya-video-placeholder img {\n  width: 64px;\n  height: auto;\n  opacity: 0.5;\n}\n@keyframes ya-video-success {\n  0% {\n    outline-color: var(--color-primary, #D4A574);\n  }\n  50% {\n    outline-color: #22c55e;\n    outline-width: 4px;\n  }\n  100% {\n    outline-color: var(--color-primary, #D4A574);\n    outline-width: 2px;\n  }\n}\n.ya-video-success {\n  animation: ya-video-success 0.4s ease;\n}\n.ya-video-loading::after {\n  content: "";\n  position: absolute;\n  inset: 0;\n  background:\n    linear-gradient(\n      90deg,\n      rgba(255, 255, 255, 0) 0%,\n      rgba(255, 255, 255, 0.3) 50%,\n      rgba(255, 255, 255, 0) 100%);\n  background-size: 200% 100%;\n  animation: ya-video-shimmer 1.5s infinite;\n}\n@keyframes ya-video-shimmer {\n  0% {\n    background-position: -200% 0;\n  }\n  100% {\n    background-position: 200% 0;\n  }\n}\n.ya-video-container:focus {\n  outline: 3px solid var(--color-primary, #D4A574);\n  outline-offset: 4px;\n}\n.ya-video-container:focus:not(:focus-visible) {\n  outline: none;\n}\n.ya-video-container:focus-visible {\n  outline: 3px solid var(--color-primary, #D4A574);\n  outline-offset: 4px;\n}\n.ya-video-small .ya-video-overlay {\n  display: none;\n}\n.ya-video-background {\n  position: absolute;\n  inset: 0;\n  z-index: -1;\n}\n.ya-video-background video {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n}\n');
 
 // src/components/YaVideo.tsx
-import { jsx as jsx8, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx13, jsxs as jsxs7 } from "react/jsx-runtime";
 function parseVideoValue(value) {
   if (!value) {
     return { type: "upload", src: "" };
@@ -2917,18 +3555,20 @@ function YaVideo({
   aspectRatio: propAspectRatio,
   objectFit: propObjectFit,
   loading = "lazy",
+  defaultValue,
   fallbackSrc,
   fallbackPoster
 }) {
   const { getValue, mode } = useContentStore();
-  const containerRef = useRef8(null);
-  const videoRef = useRef8(null);
-  const [isSelected, setIsSelected] = useState7(false);
-  const [isHovered, setIsHovered] = useState7(false);
-  const [isSmallVideo, setIsSmallVideo] = useState7(false);
-  const [isInView, setIsInView] = useState7(loading === "eager");
+  const 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 rawValue = getValue(fieldId);
-  const videoData = parseVideoValue(rawValue);
+  const parsedValue = parseVideoValue(rawValue);
+  const videoData = parsedValue.src ? parsedValue : defaultValue || parsedValue;
   const src = videoData.src || fallbackSrc || "";
   const poster = videoData.poster || fallbackPoster || "";
   const objectFit = videoData.objectFit || propObjectFit || "cover";
@@ -2939,8 +3579,8 @@ function YaVideo({
   const controls = videoData.controls ?? true;
   const playsinline = videoData.playsinline ?? true;
   const preload = videoData.preload ?? "metadata";
-  const [prefersReducedMotion, setPrefersReducedMotion] = useState7(false);
-  useEffect7(() => {
+  const [prefersReducedMotion, setPrefersReducedMotion] = useState8(false);
+  useEffect9(() => {
     const mediaQuery = window.matchMedia("(prefers-reduced-motion: reduce)");
     setPrefersReducedMotion(mediaQuery.matches);
     const handleChange = (e) => {
@@ -2950,7 +3590,7 @@ function YaVideo({
     return () => mediaQuery.removeEventListener("change", handleChange);
   }, []);
   const effectiveAutoplay = autoplay && !prefersReducedMotion;
-  useEffect7(() => {
+  useEffect9(() => {
     if (loading === "eager" || isInView) return;
     const observer = new IntersectionObserver(
       (entries) => {
@@ -2967,7 +3607,7 @@ function YaVideo({
     }
     return () => observer.disconnect();
   }, [loading, isInView]);
-  const handleKeyDown = useCallback8(
+  const handleKeyDown = useCallback10(
     (e) => {
       if ((e.key === " " || e.key === "Enter") && videoData.type === "upload" && controls) {
         e.preventDefault();
@@ -2983,7 +3623,7 @@ function YaVideo({
     },
     [videoData.type, controls]
   );
-  const handleClick = useCallback8(() => {
+  const handleClick = useCallback10(() => {
     if (mode !== "inline-edit") return;
     if (document.body.classList.contains("builder-selector-active")) return;
     setIsSelected(true);
@@ -3003,7 +3643,7 @@ function YaVideo({
       "*"
     );
   }, [mode, fieldId, videoData]);
-  useEffect7(() => {
+  useEffect9(() => {
     if (mode !== "inline-edit") return;
     const handleMessage2 = (event) => {
       if (event.data?.type === "YA_VIDEO_EDIT_COMPLETE" && event.data.fieldId === fieldId) {
@@ -3016,7 +3656,7 @@ function YaVideo({
     window.addEventListener("message", handleMessage2);
     return () => window.removeEventListener("message", handleMessage2);
   }, [mode, fieldId]);
-  useEffect7(() => {
+  useEffect9(() => {
     if (mode !== "inline-edit") return;
     const checkSize = () => {
       if (containerRef.current) {
@@ -3028,7 +3668,7 @@ function YaVideo({
     window.addEventListener("resize", checkSize);
     return () => window.removeEventListener("resize", checkSize);
   }, [mode]);
-  useEffect7(() => {
+  useEffect9(() => {
     if (!isSelected || mode !== "inline-edit") return;
     let lastRectKey = "";
     let lastTime = 0;
@@ -3064,24 +3704,24 @@ function YaVideo({
   }, [isSelected, fieldId, mode]);
   const renderVideo = (isReadOnly) => {
     if (!src && !isReadOnly) {
-      return /* @__PURE__ */ jsxs4("div", { className: "ya-video-placeholder", children: [
-        /* @__PURE__ */ jsx8("img", { src: PLACEHOLDER_SVG2, alt: "" }),
-        /* @__PURE__ */ jsx8("span", { children: "No video selected" })
+      return /* @__PURE__ */ jsxs7("div", { className: "ya-video-placeholder", children: [
+        /* @__PURE__ */ jsx13("img", { src: PLACEHOLDER_SVG2, alt: "" }),
+        /* @__PURE__ */ jsx13("span", { children: "No video selected" })
       ] });
     }
     if (!isInView && loading === "lazy" && !isReadOnly) {
-      return /* @__PURE__ */ jsx8(
+      return /* @__PURE__ */ jsx13(
         "div",
         {
           className: "ya-video-placeholder",
           style: { aspectRatio },
-          children: /* @__PURE__ */ jsx8("img", { src: PLACEHOLDER_SVG2, alt: "" })
+          children: /* @__PURE__ */ jsx13("img", { src: PLACEHOLDER_SVG2, alt: "" })
         }
       );
     }
     if (videoData.type === "youtube" && src) {
       const embedUrl = buildYouTubeEmbedUrl(src, videoData);
-      return /* @__PURE__ */ jsx8(
+      return /* @__PURE__ */ jsx13(
         "iframe",
         {
           src: embedUrl,
@@ -3101,7 +3741,7 @@ function YaVideo({
     }
     if (videoData.type === "vimeo" && src) {
       const embedUrl = buildVimeoEmbedUrl(src, videoData);
-      return /* @__PURE__ */ jsx8(
+      return /* @__PURE__ */ jsx13(
         "iframe",
         {
           src: embedUrl,
@@ -3121,7 +3761,7 @@ function YaVideo({
     }
     const resolvedSrc = resolveAssetUrl(src);
     const resolvedPoster = poster ? resolveAssetUrl(poster) : void 0;
-    return /* @__PURE__ */ jsx8(
+    return /* @__PURE__ */ jsx13(
       "video",
       {
         ref: videoRef,
@@ -3156,7 +3796,7 @@ function YaVideo({
     );
   };
   if (mode === "read-only") {
-    return /* @__PURE__ */ jsx8(
+    return /* @__PURE__ */ jsx13(
       "div",
       {
         ref: containerRef,
@@ -3172,7 +3812,7 @@ function YaVideo({
       }
     );
   }
-  const videoIcon = /* @__PURE__ */ jsxs4(
+  const videoIcon = /* @__PURE__ */ jsxs7(
     "svg",
     {
       width: "24",
@@ -3184,12 +3824,12 @@ function YaVideo({
       strokeLinecap: "round",
       strokeLinejoin: "round",
       children: [
-        /* @__PURE__ */ jsx8("rect", { x: "2", y: "4", width: "15", height: "13", rx: "2", ry: "2" }),
-        /* @__PURE__ */ jsx8("polygon", { points: "22 7 15 12 22 17 22 7", fill: "currentColor" })
+        /* @__PURE__ */ jsx13("rect", { x: "2", y: "4", width: "15", height: "13", rx: "2", ry: "2" }),
+        /* @__PURE__ */ jsx13("polygon", { points: "22 7 15 12 22 17 22 7", fill: "currentColor" })
       ]
     }
   );
-  return /* @__PURE__ */ jsxs4(
+  return /* @__PURE__ */ jsxs7(
     "div",
     {
       ref: containerRef,
@@ -3212,14 +3852,14 @@ function YaVideo({
       style: { aspectRatio },
       children: [
         renderVideo(false),
-        isSmallVideo ? /* @__PURE__ */ jsxs4(YaTooltip, { anchorRef: containerRef, show: isHovered && !isSelected, children: [
+        isSmallVideo ? /* @__PURE__ */ jsxs7(YaTooltip, { anchorRef: containerRef, show: isHovered && !isSelected, children: [
           videoIcon,
-          /* @__PURE__ */ jsx8("span", { children: "Click to edit" })
+          /* @__PURE__ */ jsx13("span", { children: "Click to edit" })
         ] }) : (
           /* For large videos: show overlay inside the container */
-          /* @__PURE__ */ jsxs4("div", { className: "ya-video-overlay", children: [
-            /* @__PURE__ */ jsx8("div", { className: "ya-video-edit-icon", children: videoIcon }),
-            /* @__PURE__ */ jsx8("span", { className: "ya-video-edit-label", children: "Click to edit" })
+          /* @__PURE__ */ jsxs7("div", { className: "ya-video-overlay", children: [
+            /* @__PURE__ */ jsx13("div", { className: "ya-video-edit-icon", children: videoIcon }),
+            /* @__PURE__ */ jsx13("span", { className: "ya-video-edit-label", children: "Click to edit" })
           ] })
         )
       ]
@@ -3228,20 +3868,163 @@ function YaVideo({
 }
 
 // src/components/YaLink.tsx
-import { useEffect as useEffect8, useRef as useRef9, useState as useState8, useCallback as useCallback9 } from "react";
-import { createPortal as createPortal4 } from "react-dom";
+import { useEffect as useEffect12, useRef as useRef12, useState as useState11, useCallback as useCallback13, useId } from "react";
+import { createPortal as createPortal5 } from "react-dom";
 import { useEditor as useEditor2, EditorContent as EditorContent2 } from "@tiptap/react";
-import { BubbleMenu as BubbleMenu2 } from "@tiptap/react/menus";
+import { BubbleMenu } from "@tiptap/react/menus";
 import StarterKit2 from "@tiptap/starter-kit";
 import { TextStyle as TextStyle2 } from "@tiptap/extension-text-style";
 import { Extension as Extension2 } from "@tiptap/core";
 import { Link as WouterLink, useLocation } from "wouter";
 
+// src/components/SafeTriangleBelow.tsx
+import { useEffect as useEffect10, useState as useState9, useRef as useRef10, useCallback as useCallback11 } from "react";
+function SafeTriangleBelow({
+  triggerRef,
+  popoverRef,
+  isVisible,
+  onLeave,
+  onStayInside
+}) {
+  const [bounds, setBounds] = useState9(null);
+  const boundsRef = useRef10(bounds);
+  boundsRef.current = bounds;
+  useEffect10(() => {
+    if (!isVisible || !triggerRef.current || !popoverRef.current) {
+      setBounds(null);
+      return;
+    }
+    const timer = setTimeout(() => {
+      if (!triggerRef.current || !popoverRef.current) return;
+      const triggerRect = triggerRef.current.getBoundingClientRect();
+      const popoverRect = popoverRef.current.getBoundingClientRect();
+      setBounds({
+        top: triggerRect.top,
+        bottom: popoverRect.bottom,
+        left: Math.min(triggerRect.left, popoverRect.left),
+        right: Math.max(triggerRect.right, popoverRect.right)
+      });
+    }, 10);
+    return () => clearTimeout(timer);
+  }, [isVisible, triggerRef, popoverRef]);
+  const checkMousePosition = useCallback11((e) => {
+    const b = boundsRef.current;
+    if (!b) return;
+    const { clientX: x, clientY: y } = e;
+    const padding = 5;
+    const isOutside = x < b.left - padding || x > b.right + padding || y < b.top - padding || y > b.bottom + padding;
+    if (isOutside) {
+      onLeave?.();
+    } else {
+      onStayInside?.();
+    }
+  }, [onLeave, onStayInside]);
+  useEffect10(() => {
+    if (!isVisible || !bounds) return;
+    document.addEventListener("mousemove", checkMousePosition);
+    return () => document.removeEventListener("mousemove", checkMousePosition);
+  }, [isVisible, bounds, checkMousePosition]);
+  return null;
+}
+
+// src/hooks/useSafeTriangle.ts
+import { useState as useState10, useRef as useRef11, useCallback as useCallback12, useEffect as useEffect11 } from "react";
+function useSafeTriangle(options = {}) {
+  const { showDelay = 0, hideDelay = 150, enabled = true } = options;
+  const [isVisible, setIsVisible] = useState10(false);
+  const [isHovering, setIsHovering] = useState10(false);
+  const triggerRef = useRef11(null);
+  const popoverRef = useRef11(null);
+  const showTimeoutRef = useRef11(null);
+  const hideTimeoutRef = useRef11(null);
+  useEffect11(() => {
+    return () => {
+      if (showTimeoutRef.current) clearTimeout(showTimeoutRef.current);
+      if (hideTimeoutRef.current) clearTimeout(hideTimeoutRef.current);
+    };
+  }, []);
+  const show = useCallback12(() => {
+    if (!enabled) return;
+    if (hideTimeoutRef.current) {
+      clearTimeout(hideTimeoutRef.current);
+      hideTimeoutRef.current = null;
+    }
+    setIsVisible(true);
+  }, [enabled]);
+  const hide = useCallback12(() => {
+    if (showTimeoutRef.current) {
+      clearTimeout(showTimeoutRef.current);
+      showTimeoutRef.current = null;
+    }
+    setIsVisible(false);
+    setIsHovering(false);
+  }, []);
+  const handleMouseEnter = useCallback12(() => {
+    if (!enabled) return;
+    setIsHovering(true);
+    if (hideTimeoutRef.current) {
+      clearTimeout(hideTimeoutRef.current);
+      hideTimeoutRef.current = null;
+    }
+    if (showDelay > 0) {
+      showTimeoutRef.current = setTimeout(() => {
+        setIsVisible(true);
+      }, showDelay);
+    } else {
+      setIsVisible(true);
+    }
+  }, [showDelay, enabled]);
+  const handleMouseLeave = useCallback12(() => {
+    setIsHovering(false);
+    if (showTimeoutRef.current) {
+      clearTimeout(showTimeoutRef.current);
+      showTimeoutRef.current = null;
+    }
+    hideTimeoutRef.current = setTimeout(() => {
+      setIsVisible(false);
+    }, hideDelay);
+  }, [hideDelay]);
+  const handleFocus = useCallback12(() => {
+    if (!enabled) return;
+    setIsVisible(true);
+  }, [enabled]);
+  const handleTriangleLeave = useCallback12(() => {
+    if (!isHovering) {
+      setIsVisible(false);
+    }
+  }, [isHovering]);
+  const handleStayInside = useCallback12(() => {
+    if (hideTimeoutRef.current) {
+      clearTimeout(hideTimeoutRef.current);
+      hideTimeoutRef.current = null;
+    }
+  }, []);
+  return {
+    triggerRef,
+    popoverRef,
+    isVisible,
+    handlers: {
+      onMouseEnter: handleMouseEnter,
+      onMouseLeave: handleMouseLeave,
+      onFocus: handleFocus
+    },
+    triangleProps: {
+      triggerRef,
+      popoverRef,
+      isVisible,
+      onLeave: handleTriangleLeave,
+      onStayInside: handleStayInside
+    },
+    show,
+    hide
+  };
+}
+
 // 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-actions {\n  display: flex;\n  gap: 8px;\n  position: absolute;\n  bottom: -60px;\n  right: 0;\n  z-index: 10;\n  background: rgba(26, 26, 26, 0.95);\n  padding: 8px 10px;\n  border-radius: 8px;\n  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);\n  font-family:\n    system-ui,\n    -apple-system,\n    BlinkMacSystemFont,\n    "Segoe UI",\n    sans-serif;\n}\n.ya-link-btn {\n  padding: 6px 14px;\n  font-size: 12px;\n  font-weight: 500;\n  border-radius: 6px;\n  cursor: pointer;\n  transition: all 0.15s ease;\n  border: none;\n}\n.ya-link-btn-cancel {\n  background: #333333;\n  color: #ffffff;\n  border: 1px solid #555555;\n}\n.ya-link-btn-cancel:hover {\n  background: #444444;\n  color: #ffffff;\n  border-color: #666666;\n}\n.ya-link-btn-save {\n  background: #D4A574;\n  color: #1a1a1a;\n}\n.ya-link-btn-save:hover {\n  background: #c4956a;\n}\n.ya-href-popover {\n  position: absolute;\n  top: 100%;\n  left: 50%;\n  margin-top: 8px;\n  z-index: 10;\n  min-width: 280px;\n  max-width: 320px;\n  background: #1a1a1a;\n  border-radius: 12px;\n  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);\n  transform: translateX(-50%);\n  animation: ya-href-popover-fade-in 0.15s ease;\n  overflow: hidden;\n  font-family:\n    system-ui,\n    -apple-system,\n    BlinkMacSystemFont,\n    "Segoe UI",\n    sans-serif;\n}\n@keyframes ya-href-popover-fade-in {\n  from {\n    opacity: 0;\n    transform: translateX(-50%) translateY(-8px);\n  }\n  to {\n    opacity: 1;\n    transform: translateX(-50%) translateY(0);\n  }\n}\n.ya-href-popover::before {\n  content: "";\n  position: absolute;\n  top: -6px;\n  left: 50%;\n  transform: translateX(-50%);\n  border-left: 8px solid transparent;\n  border-right: 8px solid transparent;\n  border-bottom: 8px solid #1a1a1a;\n}\n.ya-href-popover-header {\n  padding: 12px 16px;\n  font-size: 13px;\n  font-weight: 600;\n  color: #ffffff;\n  border-bottom: 1px solid rgba(255, 255, 255, 0.1);\n}\n.ya-href-popover-section {\n  padding: 12px 16px;\n}\n.ya-href-popover-label {\n  display: block;\n  font-size: 11px;\n  font-weight: 500;\n  color: rgba(255, 255, 255, 0.6);\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n  margin-bottom: 8px;\n}\n.ya-href-collapsible-header {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  width: 100%;\n  padding: 0;\n  background: transparent;\n  border: none;\n  cursor: pointer;\n  transition: color 0.15s ease;\n}\n.ya-href-collapsible-header:hover {\n  color: rgba(255, 255, 255, 0.8);\n}\n.ya-href-chevron {\n  font-size: 8px;\n  color: rgba(255, 255, 255, 0.4);\n}\n.ya-href-popover-pages {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n  max-height: 200px;\n  overflow-y: auto;\n}\n.ya-href-page-btn {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  gap: 4px;\n  width: 100%;\n  padding: 10px 12px;\n  background: rgba(255, 255, 255, 0.05);\n  border: 1px solid transparent;\n  border-radius: 8px;\n  color: #e0e0e0;\n  font-size: 13px;\n  font-weight: 500;\n  text-align: left;\n  cursor: pointer;\n  transition: all 0.15s ease;\n}\n.ya-href-page-btn:hover {\n  background: rgba(255, 255, 255, 0.1);\n  border-color: rgba(255, 255, 255, 0.2);\n}\n.ya-href-page-btn.is-selected {\n  background: #D4A574;\n  color: #1a1a1a;\n}\n.ya-href-page-btn.is-selected .ya-href-page-path {\n  color: rgba(26, 26, 26, 0.6);\n}\n.ya-href-page-path {\n  font-size: 11px;\n  color: rgba(255, 255, 255, 0.4);\n  font-family: monospace;\n  word-break: break-all;\n}\n.ya-href-external-toggle {\n  display: block;\n  width: 100%;\n  padding: 10px 16px;\n  background: transparent;\n  border: none;\n  border-top: 1px solid rgba(255, 255, 255, 0.1);\n  color: #D4A574;\n  font-size: 12px;\n  font-weight: 500;\n  text-align: center;\n  cursor: pointer;\n  transition: background 0.15s ease;\n}\n.ya-href-external-toggle:hover {\n  background: rgba(255, 255, 255, 0.05);\n}\n.ya-href-url-input {\n  width: 100%;\n  padding: 10px 12px;\n  background: rgba(255, 255, 255, 0.05);\n  border: 1px solid rgba(255, 255, 255, 0.2);\n  border-radius: 8px;\n  color: #ffffff;\n  font-size: 13px;\n  outline: none;\n  transition: border-color 0.15s ease;\n}\n.ya-href-url-input::placeholder {\n  color: rgba(255, 255, 255, 0.4);\n}\n.ya-href-url-input:focus {\n  border-color: var(--color-primary, #D4A574);\n}\n.ya-href-popover-actions {\n  display: flex;\n  justify-content: flex-end;\n  gap: 8px;\n  padding: 12px 16px;\n  border-top: 1px solid rgba(255, 255, 255, 0.1);\n}\n.ya-link-edit-popover {\n  position: absolute;\n  top: 100%;\n  left: 50%;\n  margin-top: 8px;\n  z-index: 10;\n  background: #2a2a2a;\n  border-radius: 6px;\n  padding: 4px;\n  display: flex;\n  gap: 4px;\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);\n  transform: translateX(-50%);\n  animation: ya-edit-popover-fade-in 0.1s ease;\n  font-family:\n    system-ui,\n    -apple-system,\n    BlinkMacSystemFont,\n    "Segoe UI",\n    sans-serif;\n  white-space: nowrap;\n}\n@keyframes ya-edit-popover-fade-in {\n  from {\n    opacity: 0;\n    transform: translateX(-50%) translateY(-4px);\n  }\n  to {\n    opacity: 1;\n    transform: translateX(-50%) translateY(0);\n  }\n}\n.ya-link-edit-popover::before {\n  content: "";\n  position: absolute;\n  top: -5px;\n  left: 50%;\n  transform: translateX(-50%);\n  border-left: 6px solid transparent;\n  border-right: 6px solid transparent;\n  border-bottom: 6px solid #2a2a2a;\n}\n.ya-link-edit-popover button {\n  background: #3a3a3a;\n  border: none;\n  color: #fff;\n  padding: 6px 12px;\n  border-radius: 4px;\n  cursor: pointer;\n  font-size: 13px;\n  font-weight: 500;\n  transition: background 0.15s ease;\n}\n.ya-link-edit-popover button:hover {\n  background: #4a4a4a;\n}\n');
+styleInject('.ya-link-wrapper {\n  position: relative;\n  display: inline;\n}\n.ya-link-editable {\n  cursor: pointer;\n  transition: outline 0.15s ease;\n}\n.ya-link-editable:hover {\n  outline: 2px dashed var(--color-primary, #D4A574);\n  outline-offset: 4px;\n  border-radius: 4px;\n}\nbody.builder-selector-active .ya-link-editable:hover {\n  outline: none;\n  cursor: inherit;\n}\n.ya-link-editing {\n  outline: 2px solid var(--color-primary, #D4A574);\n  outline-offset: 4px;\n  border-radius: 4px;\n  position: relative;\n}\n.ya-link-editing .ProseMirror {\n  color: #1a1a1a !important;\n  caret-color: #1a1a1a;\n}\n.ya-link-editing .ProseMirror p::selection,\n.ya-link-editing .ProseMirror::selection {\n  background-color: rgba(212, 165, 116, 0.4);\n  color: inherit;\n}\n.ya-link-editing .ProseMirror p::-moz-selection,\n.ya-link-editing .ProseMirror::-moz-selection {\n  background-color: rgba(212, 165, 116, 0.4);\n  color: inherit;\n}\nbody.builder-selector-active .ya-link-editable:not(.ya-link-editing)::selection,\nbody.builder-selector-active .ya-link-editable:not(.ya-link-editing) *::selection {\n  color: inherit;\n}\nbody.builder-selector-active .ya-link-editable:not(.ya-link-editing)::-moz-selection,\nbody.builder-selector-active .ya-link-editable:not(.ya-link-editing) *::-moz-selection {\n  color: inherit;\n}\n.ya-link-actions {\n  display: flex;\n  gap: 8px;\n  z-index: 9999;\n  background: rgba(26, 26, 26, 0.95);\n  padding: 8px 10px;\n  border-radius: 8px;\n  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);\n  font-family:\n    system-ui,\n    -apple-system,\n    BlinkMacSystemFont,\n    "Segoe UI",\n    sans-serif;\n}\n.ya-link-btn {\n  padding: 6px 14px;\n  font-size: 12px;\n  font-weight: 500;\n  border-radius: 6px;\n  cursor: pointer;\n  transition: all 0.15s ease;\n  border: none;\n}\n.ya-link-btn-cancel {\n  background: #333333;\n  color: #ffffff;\n  border: 1px solid #555555;\n}\n.ya-link-btn-cancel:hover {\n  background: #444444;\n  color: #ffffff;\n  border-color: #666666;\n}\n.ya-link-btn-save {\n  background: #D4A574;\n  color: #1a1a1a;\n}\n.ya-link-btn-save:hover {\n  background: #c4956a;\n}\n.ya-href-popover {\n  position: absolute;\n  top: 100%;\n  left: 50%;\n  margin-top: 8px;\n  z-index: 100;\n  min-width: 280px;\n  max-width: 320px;\n  background: #1a1a1a;\n  border-radius: 12px;\n  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);\n  transform: translateX(-50%);\n  animation: ya-href-popover-fade-in 0.15s ease;\n  overflow: hidden;\n  font-family:\n    system-ui,\n    -apple-system,\n    BlinkMacSystemFont,\n    "Segoe UI",\n    sans-serif;\n}\n@keyframes ya-href-popover-fade-in {\n  from {\n    opacity: 0;\n    transform: translateX(-50%) translateY(-8px);\n  }\n  to {\n    opacity: 1;\n    transform: translateX(-50%) translateY(0);\n  }\n}\n.ya-href-popover::before {\n  content: "";\n  position: absolute;\n  top: -6px;\n  left: 50%;\n  transform: translateX(-50%);\n  border-left: 8px solid transparent;\n  border-right: 8px solid transparent;\n  border-bottom: 8px solid #1a1a1a;\n}\n.ya-href-popover-header {\n  padding: 12px 16px;\n  font-size: 13px;\n  font-weight: 600;\n  color: #ffffff;\n  border-bottom: 1px solid rgba(255, 255, 255, 0.1);\n}\n.ya-href-popover-section {\n  padding: 12px 16px;\n}\n.ya-href-popover-label {\n  display: block;\n  font-size: 11px;\n  font-weight: 500;\n  color: rgba(255, 255, 255, 0.6);\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n  margin-bottom: 8px;\n}\n.ya-href-collapsible-header {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  width: 100%;\n  padding: 0;\n  background: transparent;\n  border: none;\n  cursor: pointer;\n  transition: color 0.15s ease;\n}\n.ya-href-collapsible-header:hover {\n  color: rgba(255, 255, 255, 0.8);\n}\n.ya-href-chevron {\n  font-size: 8px;\n  color: rgba(255, 255, 255, 0.4);\n}\n.ya-href-popover-pages {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n  max-height: 200px;\n  overflow-y: auto;\n}\n.ya-href-page-btn {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  gap: 4px;\n  width: 100%;\n  padding: 10px 12px;\n  background: rgba(255, 255, 255, 0.05);\n  border: 1px solid transparent;\n  border-radius: 8px;\n  color: #e0e0e0;\n  font-size: 13px;\n  font-weight: 500;\n  text-align: left;\n  cursor: pointer;\n  transition: all 0.15s ease;\n}\n.ya-href-page-btn:hover {\n  background: rgba(255, 255, 255, 0.1);\n  border-color: rgba(255, 255, 255, 0.2);\n}\n.ya-href-page-btn.is-selected {\n  background: #D4A574;\n  color: #1a1a1a;\n}\n.ya-href-page-btn.is-selected .ya-href-page-path {\n  color: rgba(26, 26, 26, 0.6);\n}\n.ya-href-page-path {\n  font-size: 11px;\n  color: rgba(255, 255, 255, 0.4);\n  font-family: monospace;\n  word-break: break-all;\n}\n.ya-href-external-toggle {\n  display: block;\n  width: 100%;\n  padding: 10px 16px;\n  background: transparent;\n  border: none;\n  border-top: 1px solid rgba(255, 255, 255, 0.1);\n  color: #D4A574;\n  font-size: 12px;\n  font-weight: 500;\n  text-align: center;\n  cursor: pointer;\n  transition: background 0.15s ease;\n}\n.ya-href-external-toggle:hover {\n  background: rgba(255, 255, 255, 0.05);\n}\n.ya-href-url-input {\n  width: 100%;\n  padding: 10px 12px;\n  background: rgba(255, 255, 255, 0.05);\n  border: 1px solid rgba(255, 255, 255, 0.2);\n  border-radius: 8px;\n  color: #ffffff;\n  font-size: 13px;\n  outline: none;\n  transition: border-color 0.15s ease;\n}\n.ya-href-url-input::placeholder {\n  color: rgba(255, 255, 255, 0.4);\n}\n.ya-href-url-input:focus {\n  border-color: var(--color-primary, #D4A574);\n}\n.ya-href-popover-actions {\n  display: flex;\n  justify-content: flex-end;\n  gap: 8px;\n  padding: 12px 16px;\n  border-top: 1px solid rgba(255, 255, 255, 0.1);\n}\n.ya-href-popover--above {\n  top: auto;\n  bottom: 100%;\n  margin-top: 0;\n  margin-bottom: 8px;\n  animation: ya-href-popover-fade-in-above 0.15s ease;\n}\n@keyframes ya-href-popover-fade-in-above {\n  from {\n    opacity: 0;\n    transform: translateX(-50%) translateY(8px);\n  }\n  to {\n    opacity: 1;\n    transform: translateX(-50%) translateY(0);\n  }\n}\n.ya-href-popover--above::before {\n  top: auto;\n  bottom: -6px;\n  border-bottom: none;\n  border-top: 8px solid #1a1a1a;\n}\n.ya-link-edit-popover {\n  position: absolute;\n  top: 100%;\n  left: 50%;\n  margin-top: 8px;\n  z-index: 100;\n  background: #2a2a2a;\n  border-radius: 6px;\n  padding: 4px;\n  display: flex;\n  gap: 4px;\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);\n  transform: translateX(-50%);\n  animation: ya-edit-popover-fade-in 0.1s ease;\n  font-family:\n    system-ui,\n    -apple-system,\n    BlinkMacSystemFont,\n    "Segoe UI",\n    sans-serif;\n  white-space: nowrap;\n}\n@keyframes ya-edit-popover-fade-in {\n  from {\n    opacity: 0;\n    transform: translateX(-50%) translateY(-4px);\n  }\n  to {\n    opacity: 1;\n    transform: translateX(-50%) translateY(0);\n  }\n}\n.ya-link-edit-popover::before {\n  content: "";\n  position: absolute;\n  top: -5px;\n  left: 50%;\n  transform: translateX(-50%);\n  border-left: 6px solid transparent;\n  border-right: 6px solid transparent;\n  border-bottom: 6px solid #2a2a2a;\n}\n.ya-link-edit-popover button {\n  background: #3a3a3a;\n  border: none;\n  color: #fff;\n  padding: 6px 12px;\n  border-radius: 4px;\n  cursor: pointer;\n  font-size: 13px;\n  font-weight: 500;\n  transition: background 0.15s ease;\n}\n.ya-link-edit-popover button:hover {\n  background: #4a4a4a;\n}\n');
 
 // src/components/YaLink.tsx
-import { Fragment as Fragment3, jsx as jsx9, jsxs as jsxs5 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx14, jsxs as jsxs8 } from "react/jsx-runtime";
 function isInternalPath(path) {
   if (!path) return false;
   if (path.startsWith("#")) return false;
@@ -3342,8 +4125,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] = useState8([]);
-  const [sectionsExpanded, setSectionsExpanded] = useState8(false);
+  const [sections, setSections] = useState11([]);
+  const [sectionsExpanded, setSectionsExpanded] = useState11(false);
   const textFieldId = `${fieldId}.text`;
   const hrefFieldId = `${fieldId}.href`;
   const storeText = getValue(textFieldId);
@@ -3354,16 +4137,47 @@ 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] = useState8(null);
-  const [showEditPopover, setShowEditPopover] = useState8(false);
-  const [originalText, setOriginalText] = useState8(text);
-  const [originalHref, setOriginalHref] = useState8(href);
-  const [currentHref, setCurrentHref] = useState8(href);
-  const [isExternalUrl, setIsExternalUrl] = useState8(false);
-  const [externalUrl, setExternalUrl] = useState8("");
-  const containerRef = useRef9(null);
-  const hrefPopoverRef = useRef9(null);
-  const hidePopoverTimeoutRef = useRef9(null);
+  const [editingMode, setEditingMode] = useState11(null);
+  const [originalText, setOriginalText] = useState11(text);
+  const [originalHref, setOriginalHref] = useState11(href);
+  const [currentHref, setCurrentHref] = useState11(href);
+  const [isExternalUrl, setIsExternalUrl] = useState11(false);
+  const [externalUrl, setExternalUrl] = useState11("");
+  const [popoverPosition, setPopoverPosition] = useState11("below");
+  const containerRef = useRef12(null);
+  const hrefPopoverRef = useRef12(null);
+  const [actionButtonsPos, setActionButtonsPos] = useState11(null);
+  const handleSaveTextRef = useRef12(() => {
+  });
+  const handleCancelTextRef = useRef12(() => {
+  });
+  const {
+    popoverRef: editPopoverRef,
+    isVisible: showEditPopover,
+    handlers: safeTriangleHandlers,
+    triangleProps,
+    hide: hideEditPopover
+  } = useSafeTriangle({
+    enabled: mode === "inline-edit" && !editingMode,
+    hideDelay: 150
+  });
+  const triggerRef = containerRef;
+  const instanceId = useId();
+  useEffect12(() => {
+    if (showEditPopover && mode === "inline-edit" && !editingMode) {
+      window.dispatchEvent(new CustomEvent("yalink:popover-open", { detail: { id: instanceId } }));
+    }
+  }, [showEditPopover, mode, editingMode, instanceId]);
+  useEffect12(() => {
+    const handleOtherPopoverOpen = (event) => {
+      const customEvent = event;
+      if (customEvent.detail.id !== instanceId && showEditPopover) {
+        hideEditPopover();
+      }
+    };
+    window.addEventListener("yalink:popover-open", handleOtherPopoverOpen);
+    return () => window.removeEventListener("yalink:popover-open", handleOtherPopoverOpen);
+  }, [instanceId, showEditPopover, hideEditPopover]);
   const editor = useEditor2({
     extensions: [
       StarterKit2.configure({
@@ -3383,29 +4197,62 @@ function YaLink({ fieldId, href: defaultHref = "#", className, style, as: Compon
     editorProps: {
       attributes: {
         class: "outline-none"
+      },
+      // Handle keyboard shortcuts at the editor level to prevent default behavior
+      handleKeyDown: (_view, event) => {
+        if (event.key === "Enter" && !event.shiftKey) {
+          event.preventDefault();
+          handleSaveTextRef.current();
+          return true;
+        }
+        if (event.key === "Escape") {
+          event.preventDefault();
+          handleCancelTextRef.current();
+          return true;
+        }
+        if ((event.metaKey || event.ctrlKey) && event.key === "s") {
+          event.preventDefault();
+          handleSaveTextRef.current();
+          return true;
+        }
+        return false;
       }
     }
   });
-  useEffect8(() => {
+  useEffect12(() => {
     if (editor && editingMode !== "text") {
       if (editor.getHTML() !== text) {
         editor.commands.setContent(text);
       }
     }
   }, [text, editor, editingMode]);
-  useEffect8(() => {
+  useEffect12(() => {
     if (editingMode !== "link") {
       setCurrentHref(href);
     }
   }, [href, editingMode]);
-  useEffect8(() => {
+  useEffect12(() => {
+    if (editingMode !== "text" || !containerRef.current) {
+      setActionButtonsPos(null);
+      return;
+    }
+    const updatePosition = () => {
+      if (!containerRef.current) return;
+      const rect = containerRef.current.getBoundingClientRect();
+      setActionButtonsPos({
+        top: rect.bottom + 8,
+        right: window.innerWidth - rect.right
+      });
+    };
+    updatePosition();
+    window.addEventListener("scroll", updatePosition, true);
+    window.addEventListener("resize", updatePosition);
     return () => {
-      if (hidePopoverTimeoutRef.current) {
-        clearTimeout(hidePopoverTimeoutRef.current);
-      }
+      window.removeEventListener("scroll", updatePosition, true);
+      window.removeEventListener("resize", updatePosition);
     };
-  }, []);
-  useEffect8(() => {
+  }, [editingMode]);
+  useEffect12(() => {
     if (editingMode !== "link") return;
     const handleClickOutside = (event) => {
       const target2 = event.target;
@@ -3419,34 +4266,51 @@ function YaLink({ fieldId, href: defaultHref = "#", className, style, as: Compon
     document.addEventListener("mousedown", handleClickOutside);
     return () => document.removeEventListener("mousedown", handleClickOutside);
   }, [editingMode, originalHref]);
-  const handleSaveText = useCallback9(() => {
+  useEffect12(() => {
+    if (editingMode !== "link" || !containerRef.current) return;
+    const updatePosition = () => {
+      if (!containerRef.current) return;
+      const rect = containerRef.current.getBoundingClientRect();
+      const popoverHeight = 350;
+      const spaceBelow = window.innerHeight - rect.bottom;
+      const spaceAbove = rect.top;
+      setPopoverPosition(spaceBelow < popoverHeight && spaceAbove > spaceBelow ? "above" : "below");
+    };
+    window.addEventListener("resize", updatePosition);
+    return () => window.removeEventListener("resize", updatePosition);
+  }, [editingMode]);
+  const handleSaveText = useCallback13(() => {
     if (!editor) return;
     let html = editor.getHTML();
     html = html.replace(/<\/p><p>/g, "<br><br>").replace(/^<p>/, "").replace(/<\/p>$/, "");
-    setValue(textFieldId, html);
+    setValue(textFieldId, html, "user");
     saveToWorker?.(textFieldId, html);
     setEditingMode(null);
   }, [editor, textFieldId, setValue, saveToWorker]);
-  const handleSaveLink = useCallback9(() => {
-    setValue(hrefFieldId, currentHref);
+  const handleSaveLink = useCallback13(() => {
+    setValue(hrefFieldId, currentHref, "user");
     saveToWorker?.(hrefFieldId, currentHref);
     setEditingMode(null);
     setIsExternalUrl(false);
     setExternalUrl("");
   }, [hrefFieldId, currentHref, setValue, saveToWorker]);
-  const handleCancelText = useCallback9(() => {
+  const handleCancelText = useCallback13(() => {
     if (editor) {
       editor.commands.setContent(originalText);
     }
     setEditingMode(null);
   }, [editor, originalText]);
-  const handleCancelLink = useCallback9(() => {
+  const handleCancelLink = useCallback13(() => {
     setCurrentHref(originalHref);
     setEditingMode(null);
     setIsExternalUrl(false);
     setExternalUrl("");
   }, [originalHref]);
-  const handleClick = useCallback9(
+  useEffect12(() => {
+    handleSaveTextRef.current = handleSaveText;
+    handleCancelTextRef.current = handleCancelText;
+  }, [handleSaveText, handleCancelText]);
+  const handleClick = useCallback13(
     (e) => {
       const selectModeEnabled = window.__builderSelectModeEnabled;
       if (selectModeEnabled) {
@@ -3478,43 +4342,35 @@ function YaLink({ fieldId, href: defaultHref = "#", className, style, as: Compon
     },
     [href, navigate, onClick]
   );
-  const handleMouseEnter = useCallback9(() => {
-    if (hidePopoverTimeoutRef.current) {
-      clearTimeout(hidePopoverTimeoutRef.current);
-      hidePopoverTimeoutRef.current = null;
-    }
-    if (mode === "inline-edit" && !editingMode) {
-      setShowEditPopover(true);
-    }
-  }, [mode, editingMode]);
-  const handleMouseLeave = useCallback9(() => {
-    hidePopoverTimeoutRef.current = window.setTimeout(() => {
-      if (!editingMode) {
-        setShowEditPopover(false);
-      }
-    }, 150);
-  }, [editingMode]);
-  const handleFocus = useCallback9(() => {
-    if (mode === "inline-edit" && !editingMode) {
-      setShowEditPopover(true);
-    }
-  }, [mode, editingMode]);
-  const startEditText = useCallback9(() => {
-    setShowEditPopover(false);
-    setEditingMode("text");
-    setOriginalText(text);
-    setTimeout(() => {
-      editor?.chain().focus().selectAll().run();
-    }, 20);
-  }, [text, editor]);
-  const startEditLink = useCallback9(() => {
-    setShowEditPopover(false);
+  const startEditText = useCallback13(() => {
+    hideEditPopover();
+    if (isIconMode) {
+      window.dispatchEvent(new CustomEvent("yatext:edit-mode", {
+        detail: { fieldId }
+      }));
+    } else {
+      setEditingMode("text");
+      setOriginalText(text);
+      setTimeout(() => {
+        editor?.chain().focus().selectAll().run();
+      }, 20);
+    }
+  }, [text, editor, hideEditPopover, isIconMode, fieldId]);
+  const startEditLink = useCallback13(() => {
+    hideEditPopover();
     setEditingMode("link");
     setOriginalHref(href);
     setCurrentHref(href);
     setSections(discoverSectionsFromDOM());
-  }, [href]);
-  const handleKeyDown = useCallback9(
+    if (containerRef.current) {
+      const rect = containerRef.current.getBoundingClientRect();
+      const popoverHeight = 350;
+      const spaceBelow = window.innerHeight - rect.bottom;
+      const spaceAbove = rect.top;
+      setPopoverPosition(spaceBelow < popoverHeight && spaceAbove > spaceBelow ? "above" : "below");
+    }
+  }, [href, hideEditPopover]);
+  const handleKeyDown = useCallback13(
     (event) => {
       if (editingMode !== "text") return;
       if (event.key === "Enter" && !event.shiftKey) {
@@ -3535,7 +4391,7 @@ function YaLink({ fieldId, href: defaultHref = "#", className, style, as: Compon
     },
     [editingMode, handleSaveText, handleCancelText]
   );
-  const handleFontSizeChange = useCallback9(
+  const handleFontSizeChange = useCallback13(
     (e) => {
       if (!editor) return;
       const size = e.target.value;
@@ -3547,7 +4403,7 @@ function YaLink({ fieldId, href: defaultHref = "#", className, style, as: Compon
     },
     [editor]
   );
-  const handleFontWeightChange = useCallback9(
+  const handleFontWeightChange = useCallback13(
     (e) => {
       if (!editor) return;
       const weight = e.target.value;
@@ -3559,11 +4415,11 @@ function YaLink({ fieldId, href: defaultHref = "#", className, style, as: Compon
     },
     [editor]
   );
-  const handlePageSelect = useCallback9((path) => {
+  const handlePageSelect = useCallback13((path) => {
     setCurrentHref(path);
     setIsExternalUrl(false);
   }, []);
-  const handleExternalUrlApply = useCallback9(() => {
+  const handleExternalUrlApply = useCallback13(() => {
     if (externalUrl) {
       setCurrentHref(externalUrl);
     }
@@ -3579,9 +4435,9 @@ function YaLink({ fieldId, href: defaultHref = "#", className, style, as: Compon
     return attrs.fontWeight || "";
   };
   if (mode === "read-only") {
-    const content = isIconMode ? children : /* @__PURE__ */ jsx9(SafeHtml, { content: text, mode });
+    const content = isIconMode ? children : /* @__PURE__ */ jsx14(SafeHtml, { content: text, mode });
     if (isInternalPath(href)) {
-      return /* @__PURE__ */ jsx9(
+      return /* @__PURE__ */ jsx14(
         WouterLink,
         {
           href,
@@ -3593,7 +4449,7 @@ function YaLink({ fieldId, href: defaultHref = "#", className, style, as: Compon
         }
       );
     }
-    return /* @__PURE__ */ jsx9(
+    return /* @__PURE__ */ jsx14(
       Component,
       {
         ref: containerRef,
@@ -3608,8 +4464,8 @@ function YaLink({ fieldId, href: defaultHref = "#", className, style, as: Compon
       }
     );
   }
-  return /* @__PURE__ */ jsxs5("span", { className: "ya-link-wrapper", children: [
-    /* @__PURE__ */ jsx9(
+  return /* @__PURE__ */ jsxs8("span", { className: "ya-link-wrapper", children: [
+    /* @__PURE__ */ jsx14(
       Component,
       {
         ref: containerRef,
@@ -3621,45 +4477,45 @@ function YaLink({ fieldId, href: defaultHref = "#", className, style, as: Compon
         "data-ya-restricted": "true",
         "data-field-id": fieldId,
         onClick: handleClick,
-        onMouseEnter: handleMouseEnter,
-        onMouseLeave: handleMouseLeave,
-        onFocus: handleFocus,
+        onMouseEnter: safeTriangleHandlers.onMouseEnter,
+        onMouseLeave: safeTriangleHandlers.onMouseLeave,
+        onFocus: safeTriangleHandlers.onFocus,
         onKeyDown: handleKeyDown,
         children: isIconMode ? (
           // Icon mode: render children directly, no text editing
           children
-        ) : editor ? /* @__PURE__ */ jsxs5(Fragment3, { children: [
-          createPortal4(
-            /* @__PURE__ */ jsxs5(
-              BubbleMenu2,
+        ) : editor ? /* @__PURE__ */ jsxs8(Fragment4, { children: [
+          createPortal5(
+            /* @__PURE__ */ jsxs8(
+              BubbleMenu,
               {
                 editor,
                 shouldShow: () => editingMode === "text",
                 options: { offset: 6, placement: "top" },
                 className: "ya-bubble-menu",
                 children: [
-                  /* @__PURE__ */ jsx9(
+                  /* @__PURE__ */ jsx14(
                     "button",
                     {
                       type: "button",
                       onClick: () => editor.chain().focus().toggleBold().run(),
                       className: `ya-bubble-btn ${editor.isActive("bold") ? "is-active" : ""}`,
                       title: "Bold",
-                      children: /* @__PURE__ */ jsx9("strong", { children: "B" })
+                      children: /* @__PURE__ */ jsx14("strong", { children: "B" })
                     }
                   ),
-                  /* @__PURE__ */ jsx9(
+                  /* @__PURE__ */ jsx14(
                     "button",
                     {
                       type: "button",
                       onClick: () => editor.chain().focus().toggleItalic().run(),
                       className: `ya-bubble-btn ${editor.isActive("italic") ? "is-active" : ""}`,
                       title: "Italic",
-                      children: /* @__PURE__ */ jsx9("em", { children: "I" })
+                      children: /* @__PURE__ */ jsx14("em", { children: "I" })
                     }
                   ),
-                  /* @__PURE__ */ jsx9("span", { className: "ya-bubble-divider" }),
-                  /* @__PURE__ */ jsxs5(
+                  /* @__PURE__ */ jsx14("span", { className: "ya-bubble-divider" }),
+                  /* @__PURE__ */ jsxs8(
                     "select",
                     {
                       value: getCurrentFontSize(),
@@ -3667,12 +4523,12 @@ function YaLink({ fieldId, href: defaultHref = "#", className, style, as: Compon
                       className: "ya-bubble-select",
                       title: "Font Size",
                       children: [
-                        /* @__PURE__ */ jsx9("option", { value: "", children: "Size" }),
-                        Object.entries(SIZE_PRESETS2).map(([name, size]) => /* @__PURE__ */ jsx9("option", { value: size, children: name }, name))
+                        /* @__PURE__ */ jsx14("option", { value: "", children: "Size" }),
+                        Object.entries(SIZE_PRESETS2).map(([name, size]) => /* @__PURE__ */ jsx14("option", { value: size, children: name }, name))
                       ]
                     }
                   ),
-                  /* @__PURE__ */ jsxs5(
+                  /* @__PURE__ */ jsxs8(
                     "select",
                     {
                       value: getCurrentFontWeight(),
@@ -3680,8 +4536,8 @@ function YaLink({ fieldId, href: defaultHref = "#", className, style, as: Compon
                       className: "ya-bubble-select",
                       title: "Font Weight",
                       children: [
-                        /* @__PURE__ */ jsx9("option", { value: "", children: "Weight" }),
-                        Object.entries(WEIGHT_PRESETS2).map(([name, weight]) => /* @__PURE__ */ jsx9("option", { value: weight, children: name }, name))
+                        /* @__PURE__ */ jsx14("option", { value: "", children: "Weight" }),
+                        Object.entries(WEIGHT_PRESETS2).map(([name, weight]) => /* @__PURE__ */ jsx14("option", { value: weight, children: name }, name))
                       ]
                     }
                   )
@@ -3690,39 +4546,72 @@ function YaLink({ fieldId, href: defaultHref = "#", className, style, as: Compon
             ),
             document.body
           ),
-          editingMode === "text" ? /* @__PURE__ */ jsxs5(Fragment3, { children: [
-            /* @__PURE__ */ jsx9(EditorContent2, { editor }),
-            /* @__PURE__ */ jsxs5("div", { className: "ya-link-actions", children: [
-              /* @__PURE__ */ jsx9("button", { type: "button", onClick: handleCancelText, className: "ya-link-btn ya-link-btn-cancel", children: "Cancel" }),
-              /* @__PURE__ */ jsx9("button", { type: "button", onClick: handleSaveText, className: "ya-link-btn ya-link-btn-save", children: "Save" })
-            ] })
-          ] }) : /* @__PURE__ */ jsx9(SafeHtml, { content: text, mode })
-        ] }) : /* @__PURE__ */ jsx9(SafeHtml, { content: text, mode })
+          editingMode === "text" ? /* @__PURE__ */ jsxs8(Fragment4, { children: [
+            /* @__PURE__ */ jsx14(EditorContent2, { editor }),
+            actionButtonsPos && createPortal5(
+              /* @__PURE__ */ jsxs8(
+                "div",
+                {
+                  className: "ya-link-actions",
+                  style: {
+                    position: "fixed",
+                    top: actionButtonsPos.top,
+                    right: actionButtonsPos.right
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx14("button", { type: "button", onClick: handleCancelText, className: "ya-link-btn ya-link-btn-cancel", children: "Cancel" }),
+                    /* @__PURE__ */ jsx14("button", { type: "button", onClick: handleSaveText, className: "ya-link-btn ya-link-btn-save", children: "Save" })
+                  ]
+                }
+              ),
+              document.body
+            )
+          ] }) : /* @__PURE__ */ jsx14(SafeHtml, { content: text, mode })
+        ] }) : /* @__PURE__ */ jsx14(SafeHtml, { content: text, mode })
       }
     ),
-    showEditPopover && !editingMode && mode === "inline-edit" && /* @__PURE__ */ jsxs5("div", { className: "ya-link-edit-popover", onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, children: [
-      !isIconMode && /* @__PURE__ */ jsx9("button", { type: "button", onClick: startEditText, children: "Edit text" }),
-      /* @__PURE__ */ jsx9("button", { type: "button", onClick: startEditLink, children: "Edit link" })
-    ] }),
-    editingMode === "link" && /* @__PURE__ */ jsxs5("div", { ref: hrefPopoverRef, className: "ya-href-popover", children: [
-      /* @__PURE__ */ jsx9("div", { className: "ya-href-popover-header", children: "Link destination" }),
-      !isExternalUrl ? /* @__PURE__ */ jsxs5(Fragment3, { children: [
-        sections.length > 0 && /* @__PURE__ */ jsxs5("div", { className: "ya-href-popover-section", children: [
-          /* @__PURE__ */ jsxs5(
+    showEditPopover && !editingMode && mode === "inline-edit" && /* @__PURE__ */ jsxs8(
+      "div",
+      {
+        ref: editPopoverRef,
+        className: "ya-link-edit-popover",
+        onMouseEnter: safeTriangleHandlers.onMouseEnter,
+        onMouseLeave: safeTriangleHandlers.onMouseLeave,
+        children: [
+          /* @__PURE__ */ jsx14("button", { type: "button", onClick: startEditText, children: "Edit text" }),
+          /* @__PURE__ */ jsx14("button", { type: "button", onClick: startEditLink, children: "Edit link" })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx14(
+      SafeTriangleBelow,
+      {
+        triggerRef,
+        popoverRef: editPopoverRef,
+        isVisible: showEditPopover && !editingMode && mode === "inline-edit",
+        onLeave: triangleProps.onLeave,
+        onStayInside: triangleProps.onStayInside
+      }
+    ),
+    editingMode === "link" && /* @__PURE__ */ jsxs8("div", { ref: hrefPopoverRef, className: `ya-href-popover ${popoverPosition === "above" ? "ya-href-popover--above" : ""}`, children: [
+      /* @__PURE__ */ jsx14("div", { className: "ya-href-popover-header", children: "Link destination" }),
+      !isExternalUrl ? /* @__PURE__ */ jsxs8(Fragment4, { children: [
+        sections.length > 0 && /* @__PURE__ */ jsxs8("div", { className: "ya-href-popover-section", children: [
+          /* @__PURE__ */ jsxs8(
             "button",
             {
               type: "button",
               className: "ya-href-popover-label ya-href-collapsible-header",
               onClick: () => setSectionsExpanded(!sectionsExpanded),
               children: [
-                /* @__PURE__ */ jsx9("span", { className: "ya-href-chevron", children: sectionsExpanded ? "\u25BC" : "\u25B6" }),
+                /* @__PURE__ */ jsx14("span", { className: "ya-href-chevron", children: sectionsExpanded ? "\u25BC" : "\u25B6" }),
                 "Scroll to section (",
                 sections.length,
                 ")"
               ]
             }
           ),
-          sectionsExpanded && /* @__PURE__ */ jsx9("div", { className: "ya-href-popover-pages", children: sections.map((section) => /* @__PURE__ */ jsxs5(
+          sectionsExpanded && /* @__PURE__ */ jsx14("div", { className: "ya-href-popover-pages", children: sections.map((section) => /* @__PURE__ */ jsxs8(
             "button",
             {
               type: "button",
@@ -3730,15 +4619,15 @@ function YaLink({ fieldId, href: defaultHref = "#", className, style, as: Compon
               onClick: () => handlePageSelect(section.path),
               children: [
                 section.label,
-                /* @__PURE__ */ jsx9("span", { className: "ya-href-page-path", children: section.path })
+                /* @__PURE__ */ jsx14("span", { className: "ya-href-page-path", children: section.path })
               ]
             },
             section.path
           )) })
         ] }),
-        pages.length > 0 && /* @__PURE__ */ jsxs5("div", { className: "ya-href-popover-section", children: [
-          /* @__PURE__ */ jsx9("label", { className: "ya-href-popover-label", children: "Navigate to page" }),
-          /* @__PURE__ */ jsx9("div", { className: "ya-href-popover-pages", children: pages.map((page) => /* @__PURE__ */ jsxs5(
+        pages.length > 0 && /* @__PURE__ */ jsxs8("div", { className: "ya-href-popover-section", children: [
+          /* @__PURE__ */ jsx14("label", { className: "ya-href-popover-label", children: "Navigate to page" }),
+          /* @__PURE__ */ jsx14("div", { className: "ya-href-popover-pages", children: pages.map((page) => /* @__PURE__ */ jsxs8(
             "button",
             {
               type: "button",
@@ -3746,13 +4635,13 @@ function YaLink({ fieldId, href: defaultHref = "#", className, style, as: Compon
               onClick: () => handlePageSelect(page.path),
               children: [
                 page.label,
-                /* @__PURE__ */ jsx9("span", { className: "ya-href-page-path", children: page.path })
+                /* @__PURE__ */ jsx14("span", { className: "ya-href-page-path", children: page.path })
               ]
             },
             page.path
           )) })
         ] }),
-        /* @__PURE__ */ jsx9(
+        /* @__PURE__ */ jsx14(
           "button",
           {
             type: "button",
@@ -3764,10 +4653,10 @@ function YaLink({ fieldId, href: defaultHref = "#", className, style, as: Compon
             children: "Use external URL instead"
           }
         )
-      ] }) : /* @__PURE__ */ jsxs5(Fragment3, { children: [
-        /* @__PURE__ */ jsxs5("div", { className: "ya-href-popover-section", children: [
-          /* @__PURE__ */ jsx9("label", { className: "ya-href-popover-label", children: "External URL" }),
-          /* @__PURE__ */ jsx9(
+      ] }) : /* @__PURE__ */ jsxs8(Fragment4, { children: [
+        /* @__PURE__ */ jsxs8("div", { className: "ya-href-popover-section", children: [
+          /* @__PURE__ */ jsx14("label", { className: "ya-href-popover-label", children: "External URL" }),
+          /* @__PURE__ */ jsx14(
             "input",
             {
               type: "url",
@@ -3779,25 +4668,34 @@ function YaLink({ fieldId, href: defaultHref = "#", className, style, as: Compon
             }
           )
         ] }),
-        /* @__PURE__ */ jsx9("button", { type: "button", className: "ya-href-external-toggle", onClick: () => setIsExternalUrl(false), children: "\u2190 Back to pages" })
+        /* @__PURE__ */ jsx14("button", { type: "button", className: "ya-href-external-toggle", onClick: () => setIsExternalUrl(false), children: "\u2190 Back to pages" })
       ] }),
-      /* @__PURE__ */ jsxs5("div", { className: "ya-href-popover-actions", children: [
-        /* @__PURE__ */ jsx9("button", { type: "button", className: "ya-link-btn ya-link-btn-cancel", onClick: handleCancelLink, children: "Cancel" }),
-        isExternalUrl ? /* @__PURE__ */ jsx9("button", { type: "button", className: "ya-link-btn ya-link-btn-save", onClick: handleExternalUrlApply, children: "Apply" }) : /* @__PURE__ */ jsx9("button", { type: "button", className: "ya-link-btn ya-link-btn-save", onClick: handleSaveLink, children: "Save" })
+      /* @__PURE__ */ jsxs8("div", { className: "ya-href-popover-actions", children: [
+        /* @__PURE__ */ jsx14("button", { type: "button", className: "ya-link-btn ya-link-btn-cancel", onClick: handleCancelLink, children: "Cancel" }),
+        isExternalUrl ? /* @__PURE__ */ jsx14("button", { type: "button", className: "ya-link-btn ya-link-btn-save", onClick: handleExternalUrlApply, children: "Apply" }) : /* @__PURE__ */ jsx14("button", { type: "button", className: "ya-link-btn ya-link-btn-save", onClick: handleSaveLink, children: "Save" })
       ] })
     ] })
   ] });
 }
 
 // src/components/YaContainer.tsx
-import { useCallback as useCallback10, useEffect as useEffect9, useRef as useRef10, useState as useState9 } from "react";
-import { createPortal as createPortal5 } from "react-dom";
+import { useCallback as useCallback14, useEffect as useEffect13, useRef as useRef13, useState as useState12 } 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";
 
 // src/components/ya-container.css
-styleInject('.ya-container {\n  position: relative;\n}\n.ya-container-has-overlay::after {\n  content: "";\n  position: absolute;\n  inset: 0;\n  background: var(--ya-overlay-color, transparent);\n  opacity: var(--ya-overlay-opacity, 0);\n  pointer-events: none;\n  z-index: 0;\n}\n.ya-container > *:not(.ya-container-toolbar) {\n  position: relative;\n  z-index: 1;\n}\n.ya-container-editable {\n  transition: outline 0.15s ease;\n}\n.ya-container-editable:hover {\n  outline: 2px dashed var(--color-primary, #D4A574);\n  outline-offset: -2px;\n}\nbody.builder-selector-active .ya-container-editable:hover {\n  outline: none;\n}\n.ya-container-selected {\n  outline: 3px solid var(--color-primary, #D4A574);\n  outline-offset: -3px;\n}\n.ya-container-toolbar {\n  display: flex;\n  gap: 4px;\n  background: rgba(26, 26, 26, 0.95);\n  padding: 6px 8px;\n  border-radius: 8px;\n  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);\n  z-index: 9999;\n  animation: ya-container-toolbar-fade-in 0.15s ease;\n}\n@keyframes ya-container-toolbar-fade-in {\n  from {\n    opacity: 0;\n    transform: translateY(-4px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n.ya-container-toolbar button {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 32px;\n  height: 32px;\n  background: #3a3a3a;\n  border: none;\n  border-radius: 6px;\n  color: #ffffff;\n  cursor: pointer;\n  transition: background 0.15s ease, transform 0.1s ease;\n}\n.ya-container-toolbar button:hover {\n  background: #4a4a4a;\n  transform: scale(1.05);\n}\n.ya-container-toolbar button:active {\n  transform: scale(0.98);\n}\n.ya-container-toolbar button.active {\n  background: var(--color-primary, #D4A574);\n  color: #1a1a1a;\n}\n.ya-container-toolbar button svg {\n  width: 16px;\n  height: 16px;\n}\n.ya-container-toolbar button[aria-label="Clear background"] {\n  background: #3a2a2a;\n}\n.ya-container-toolbar button[aria-label="Clear background"]:hover {\n  background: #5a3a3a;\n}\n.ya-container:focus-visible {\n  outline: 3px solid var(--color-primary, #D4A574);\n  outline-offset: -3px;\n}\n.ya-container-toolbar button:focus-visible {\n  outline: 2px solid var(--color-primary, #D4A574);\n  outline-offset: 2px;\n}\n.ya-container-drop-target {\n  outline: 2px dashed var(--ya-drop-color, #3b82f6) !important;\n  outline-offset: -2px;\n}\n.ya-container-drop-target .ya-container-toolbar {\n  display: none !important;\n}\n.ya-container-drop-hover {\n  outline: 3px solid var(--ya-drop-color, #3b82f6) !important;\n  outline-offset: -3px;\n}\n.ya-container-drop-hover::before {\n  content: "";\n  position: absolute;\n  inset: 0;\n  background: rgba(59, 130, 246, 0.08);\n  pointer-events: none;\n  z-index: 10;\n  animation: ya-container-drop-pulse 1s ease-in-out infinite;\n}\n@keyframes ya-container-drop-pulse {\n  0%, 100% {\n    background: rgba(59, 130, 246, 0.05);\n  }\n  50% {\n    background: rgba(59, 130, 246, 0.12);\n  }\n}\n');
+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 { jsx as jsx10, jsxs as jsxs6 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx15, jsxs as jsxs9 } from "react/jsx-runtime";
 function parseBackgroundConfig(value) {
   if (!value) {
     return { type: "none" };
@@ -3839,8 +4737,60 @@ function deriveContainerLabel(element) {
   return tagLabels[tagName] || "Section";
 }
 function Toolbar({ containerRef, onImageClick, onColorClick, onAIClick, onClearClick, hasBackground }) {
-  const [position, setPosition] = useState9(null);
-  useEffect9(() => {
+  const [position, setPosition] = useState12(null);
+  const [imageOpen, setImageOpen] = useState12(false);
+  const [colorOpen, setColorOpen] = useState12(false);
+  const [aiOpen, setAiOpen] = useState12(false);
+  const [clearOpen, setClearOpen] = useState12(false);
+  const {
+    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]);
+  useEffect13(() => {
     const updatePosition = () => {
       if (containerRef.current) {
         const rect = containerRef.current.getBoundingClientRect();
@@ -3859,8 +4809,8 @@ function Toolbar({ containerRef, onImageClick, onColorClick, onAIClick, onClearC
     };
   }, [containerRef]);
   if (!position) return null;
-  return createPortal5(
-    /* @__PURE__ */ jsxs6(
+  return createPortal6(
+    /* @__PURE__ */ jsxs9(
       "div",
       {
         className: "ya-container-toolbar",
@@ -3871,60 +4821,106 @@ function Toolbar({ containerRef, onImageClick, onColorClick, onAIClick, onClearC
         },
         onClick: (e) => e.stopPropagation(),
         children: [
-          /* @__PURE__ */ jsx10(
+          /* @__PURE__ */ jsx15(
             "button",
             {
+              ref: imageRefs.setReference,
               type: "button",
               onClick: onImageClick,
               "aria-label": "Edit background image",
-              title: "Background Image",
-              children: /* @__PURE__ */ jsxs6("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
-                /* @__PURE__ */ jsx10("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2", ry: "2" }),
-                /* @__PURE__ */ jsx10("circle", { cx: "8.5", cy: "8.5", r: "1.5" }),
-                /* @__PURE__ */ jsx10("polyline", { points: "21 15 16 10 5 21" })
+              ...getImageRefProps(),
+              children: /* @__PURE__ */ jsxs9("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+                /* @__PURE__ */ jsx15("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2", ry: "2" }),
+                /* @__PURE__ */ jsx15("circle", { cx: "8.5", cy: "8.5", r: "1.5" }),
+                /* @__PURE__ */ jsx15("polyline", { points: "21 15 16 10 5 21" })
               ] })
             }
           ),
-          /* @__PURE__ */ jsx10(
+          imageOpen && /* @__PURE__ */ jsx15(FloatingPortal2, { children: /* @__PURE__ */ jsx15(
+            "div",
+            {
+              ref: imageRefs.setFloating,
+              className: "ya-container-tooltip",
+              style: imageStyles,
+              ...getImageFloatProps(),
+              children: "Background Image"
+            }
+          ) }),
+          /* @__PURE__ */ jsx15(
             "button",
             {
+              ref: colorRefs.setReference,
               type: "button",
               onClick: onColorClick,
               "aria-label": "Edit background color",
-              title: "Background Color",
-              children: /* @__PURE__ */ jsxs6("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
-                /* @__PURE__ */ jsx10("circle", { cx: "12", cy: "12", r: "10" }),
-                /* @__PURE__ */ jsx10("path", { d: "M12 2a10 10 0 0 1 0 20", fill: "currentColor" })
+              ...getColorRefProps(),
+              children: /* @__PURE__ */ jsxs9("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+                /* @__PURE__ */ jsx15("circle", { cx: "12", cy: "12", r: "10" }),
+                /* @__PURE__ */ jsx15("path", { d: "M12 2a10 10 0 0 1 0 20", fill: "currentColor" })
               ] })
             }
           ),
-          /* @__PURE__ */ jsx10(
+          colorOpen && /* @__PURE__ */ jsx15(FloatingPortal2, { children: /* @__PURE__ */ jsx15(
+            "div",
+            {
+              ref: colorRefs.setFloating,
+              className: "ya-container-tooltip",
+              style: colorStyles,
+              ...getColorFloatProps(),
+              children: "Background Color"
+            }
+          ) }),
+          /* @__PURE__ */ jsx15(
             "button",
             {
+              ref: aiRefs.setReference,
               type: "button",
               onClick: onAIClick,
               "aria-label": "Ask AI for help",
-              title: "AI Assist",
-              children: /* @__PURE__ */ jsxs6("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
-                /* @__PURE__ */ jsx10("path", { d: "M12 2L2 7l10 5 10-5-10-5z" }),
-                /* @__PURE__ */ jsx10("path", { d: "M2 17l10 5 10-5" }),
-                /* @__PURE__ */ jsx10("path", { d: "M2 12l10 5 10-5" })
+              ...getAiRefProps(),
+              children: /* @__PURE__ */ jsxs9("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+                /* @__PURE__ */ jsx15("path", { d: "M12 2L2 7l10 5 10-5-10-5z" }),
+                /* @__PURE__ */ jsx15("path", { d: "M2 17l10 5 10-5" }),
+                /* @__PURE__ */ jsx15("path", { d: "M2 12l10 5 10-5" })
               ] })
             }
           ),
-          hasBackground && /* @__PURE__ */ jsx10(
-            "button",
+          aiOpen && /* @__PURE__ */ jsx15(FloatingPortal2, { children: /* @__PURE__ */ jsx15(
+            "div",
             {
-              type: "button",
-              onClick: onClearClick,
-              "aria-label": "Clear background",
-              title: "Clear Background",
-              children: /* @__PURE__ */ jsxs6("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
-                /* @__PURE__ */ jsx10("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
-                /* @__PURE__ */ jsx10("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
-              ] })
+              ref: aiRefs.setFloating,
+              className: "ya-container-tooltip",
+              style: aiStyles,
+              ...getAiFloatProps(),
+              children: "AI Assist"
             }
-          )
+          ) }),
+          hasBackground && /* @__PURE__ */ jsxs9(Fragment5, { children: [
+            /* @__PURE__ */ jsx15(
+              "button",
+              {
+                ref: clearRefs.setReference,
+                type: "button",
+                onClick: onClearClick,
+                "aria-label": "Clear background",
+                ...getClearRefProps(),
+                children: /* @__PURE__ */ jsxs9("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+                  /* @__PURE__ */ jsx15("circle", { cx: "12", cy: "12", r: "10" }),
+                  /* @__PURE__ */ jsx15("line", { x1: "4.93", y1: "4.93", x2: "19.07", y2: "19.07" })
+                ] })
+              }
+            ),
+            clearOpen && /* @__PURE__ */ jsx15(FloatingPortal2, { children: /* @__PURE__ */ jsx15(
+              "div",
+              {
+                ref: clearRefs.setFloating,
+                className: "ya-container-tooltip",
+                style: clearStyles,
+                ...getClearFloatProps(),
+                children: "Remove Background"
+              }
+            ) })
+          ] })
         ]
       }
     ),
@@ -3940,11 +4936,33 @@ function YaContainer({
   defaultBackground
 }) {
   const { getValue, setValue, saveToWorker, mode } = useContentStore();
-  const containerRef = useRef10(null);
-  const [isHovered, setIsHovered] = useState9(false);
-  const [isSelected, setIsSelected] = useState9(false);
-  const [isDropMode, setIsDropMode] = useState9(false);
-  const [isDropHover, setIsDropHover] = useState9(false);
+  const containerRef = useRef13(null);
+  const [isHovered, setIsHovered] = useState12(false);
+  const [isSelected, setIsSelected] = useState12(false);
+  const [isDropMode, setIsDropMode] = useState12(false);
+  const [isDropHover, setIsDropHover] = useState12(false);
+  useEffect13(() => {
+    if (mode !== "inline-edit") return;
+    const containerEl = containerRef.current;
+    if (!containerEl) return;
+    let lastHovered = false;
+    let lastCheckTime = 0;
+    const THROTTLE_MS = 16;
+    const checkMousePosition = (e) => {
+      const now = performance.now();
+      if (now - lastCheckTime < THROTTLE_MS) return;
+      lastCheckTime = now;
+      const rect = containerEl.getBoundingClientRect();
+      const { clientX: x, clientY: y } = e;
+      const isInside = x >= rect.left && x <= rect.right && y >= rect.top && y <= rect.bottom;
+      if (isInside !== lastHovered) {
+        lastHovered = isInside;
+        setIsHovered(isInside);
+      }
+    };
+    window.addEventListener("mousemove", checkMousePosition, { passive: true });
+    return () => window.removeEventListener("mousemove", checkMousePosition);
+  }, [mode]);
   const rawValue = getValue(fieldId);
   const backgroundConfig = rawValue ? parseBackgroundConfig(rawValue) : defaultBackground || { type: "none" };
   const hasBackground = backgroundConfig.type !== "none";
@@ -3965,7 +4983,7 @@ function YaContainer({
     overlayCustomProps["--ya-overlay-color"] = backgroundConfig.overlay.color;
     overlayCustomProps["--ya-overlay-opacity"] = backgroundConfig.overlay.opacity;
   }
-  const handleImageClick = useCallback10(() => {
+  const handleImageClick = useCallback14(() => {
     if (mode !== "inline-edit") return;
     setIsSelected(true);
     const rect = containerRef.current?.getBoundingClientRect();
@@ -3985,7 +5003,7 @@ function YaContainer({
       "*"
     );
   }, [mode, fieldId, backgroundConfig]);
-  const handleColorClick = useCallback10(() => {
+  const handleColorClick = useCallback14(() => {
     if (mode !== "inline-edit") return;
     setIsSelected(true);
     const rect = containerRef.current?.getBoundingClientRect();
@@ -4005,7 +5023,7 @@ function YaContainer({
       "*"
     );
   }, [mode, fieldId, backgroundConfig]);
-  const handleAIClick = useCallback10(() => {
+  const handleAIClick = useCallback14(() => {
     if (mode !== "inline-edit") return;
     const label = deriveContainerLabel(containerRef.current);
     window.parent.postMessage(
@@ -4018,14 +5036,14 @@ function YaContainer({
       "*"
     );
   }, [mode, fieldId, backgroundConfig]);
-  const handleClearClick = useCallback10(() => {
+  const handleClearClick = useCallback14(() => {
     if (mode !== "inline-edit") return;
     const clearedConfig = { type: "none" };
     const serialized = serializeBackgroundConfig(clearedConfig);
     setValue(fieldId, serialized);
     saveToWorker?.(fieldId, serialized);
   }, [mode, fieldId, setValue, saveToWorker]);
-  useEffect9(() => {
+  useEffect13(() => {
     if (mode !== "inline-edit") return;
     const handleMessage2 = (event) => {
       if (event.data?.type === "YA_CONTAINER_EDIT_COMPLETE" && event.data.fieldId === fieldId) {
@@ -4038,7 +5056,7 @@ function YaContainer({
     window.addEventListener("message", handleMessage2);
     return () => window.removeEventListener("message", handleMessage2);
   }, [mode, fieldId]);
-  useEffect9(() => {
+  useEffect13(() => {
     if (mode !== "inline-edit") return;
     const handleDropModeMessage = (event) => {
       if (event.data?.type === "DROP_MODE_START") {
@@ -4052,7 +5070,7 @@ function YaContainer({
     window.addEventListener("message", handleDropModeMessage);
     return () => window.removeEventListener("message", handleDropModeMessage);
   }, [mode]);
-  const handleDragEnter = useCallback10(
+  const handleDragEnter = useCallback14(
     (e) => {
       if (!isDropMode) return;
       e.preventDefault();
@@ -4076,7 +5094,7 @@ function YaContainer({
     },
     [isDropMode, fieldId]
   );
-  const handleDragOver = useCallback10(
+  const handleDragOver = useCallback14(
     (e) => {
       if (!isDropMode) return;
       e.preventDefault();
@@ -4084,7 +5102,7 @@ function YaContainer({
     },
     [isDropMode]
   );
-  const handleDragLeave = useCallback10(
+  const handleDragLeave = useCallback14(
     (e) => {
       if (!isDropMode) return;
       e.preventDefault();
@@ -4098,7 +5116,7 @@ function YaContainer({
     },
     [isDropMode]
   );
-  const handleDrop = useCallback10(
+  const handleDrop = useCallback14(
     (e) => {
       if (!isDropMode) return;
       e.preventDefault();
@@ -4116,7 +5134,7 @@ function YaContainer({
     },
     [isDropMode, fieldId]
   );
-  useEffect9(() => {
+  useEffect13(() => {
     if (!isSelected || mode !== "inline-edit") return;
     let lastRectKey = "";
     let lastTime = 0;
@@ -4151,7 +5169,7 @@ function YaContainer({
     return () => cancelAnimationFrame(rafId);
   }, [isSelected, fieldId, mode]);
   if (mode === "read-only") {
-    return /* @__PURE__ */ jsx10(
+    return /* @__PURE__ */ jsx15(
       Tag,
       {
         className: `ya-container ${className || ""}`,
@@ -4175,7 +5193,7 @@ function YaContainer({
     isDropHover ? "ya-container-drop-hover" : "",
     className || ""
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ jsxs6(
+  return /* @__PURE__ */ jsxs9(
     Tag,
     {
       ref: containerRef,
@@ -4188,15 +5206,13 @@ function YaContainer({
       "data-ya-restricted": "true",
       "data-field-id": fieldId,
       "data-ya-container": "true",
-      onMouseEnter: () => setIsHovered(true),
-      onMouseLeave: () => setIsHovered(false),
       onDragEnter: handleDragEnter,
       onDragOver: handleDragOver,
       onDragLeave: handleDragLeave,
       onDrop: handleDrop,
       children: [
         children,
-        mode === "inline-edit" && (isHovered || isSelected) && !document.body.classList.contains("builder-selector-active") && /* @__PURE__ */ jsx10(
+        mode === "inline-edit" && (isHovered || isSelected) && !document.body.classList.contains("builder-selector-active") && /* @__PURE__ */ jsx15(
           Toolbar,
           {
             containerRef,
@@ -4213,10 +5229,10 @@ function YaContainer({
 }
 
 // src/components/StaticText.tsx
-import { jsx as jsx11 } from "react/jsx-runtime";
+import { jsx as jsx16 } from "react/jsx-runtime";
 function MpText({ fieldId, className, as: Component = "span", children }) {
   const content = getContent(fieldId) || (typeof children === "string" ? children : "");
-  return /* @__PURE__ */ jsx11(
+  return /* @__PURE__ */ jsx16(
     Component,
     {
       className,
@@ -4227,7 +5243,7 @@ function MpText({ fieldId, className, as: Component = "span", children }) {
 }
 
 // src/components/StaticImage.tsx
-import { jsx as jsx12 } from "react/jsx-runtime";
+import { jsx as jsx17 } from "react/jsx-runtime";
 function parseImageValue2(value) {
   if (!value) {
     return { src: "" };
@@ -4263,7 +5279,7 @@ function MpImage({
   const altText = imageData.alt || alt || fallbackAlt || "";
   const objectFit = imageData.objectFit || propObjectFit || "cover";
   const objectPosition = getObjectPosition3(imageData) || propObjectPosition || "50% 50%";
-  return /* @__PURE__ */ jsx12(
+  return /* @__PURE__ */ jsx17(
     "img",
     {
       src: resolveAssetUrl(src),
@@ -4280,8 +5296,8 @@ function MpImage({
 }
 
 // src/components/MarkdownText.tsx
-import { Fragment as Fragment4 } from "react";
-import { jsx as jsx13 } from "react/jsx-runtime";
+import { Fragment as Fragment6 } from "react";
+import { jsx as jsx18 } from "react/jsx-runtime";
 function tokenize(text) {
   const tokens = [];
   let remaining = text;
@@ -4343,13 +5359,13 @@ function tokensToElements(tokens) {
   return tokens.map((token, index) => {
     switch (token.type) {
       case "text":
-        return /* @__PURE__ */ jsx13(Fragment4, { children: token.content }, index);
+        return /* @__PURE__ */ jsx18(Fragment6, { children: token.content }, index);
       case "bold":
-        return /* @__PURE__ */ jsx13("strong", { children: token.content }, index);
+        return /* @__PURE__ */ jsx18("strong", { children: token.content }, index);
       case "italic":
-        return /* @__PURE__ */ jsx13("em", { children: token.content }, index);
+        return /* @__PURE__ */ jsx18("em", { children: token.content }, index);
       case "link":
-        return /* @__PURE__ */ jsx13(
+        return /* @__PURE__ */ jsx18(
           "a",
           {
             href: token.url,
@@ -4361,7 +5377,7 @@ function tokensToElements(tokens) {
           index
         );
       case "newline":
-        return /* @__PURE__ */ jsx13("br", {}, index);
+        return /* @__PURE__ */ jsx18("br", {}, index);
       default:
         return null;
     }
@@ -4373,15 +5389,15 @@ function parseMarkdownToElements(content) {
 }
 function MarkdownText({ content, className }) {
   const elements = parseMarkdownToElements(content);
-  return /* @__PURE__ */ jsx13("span", { className, children: elements });
+  return /* @__PURE__ */ jsx18("span", { className, children: elements });
 }
 
 // src/router/Link.tsx
 import { Link as WouterLink2 } from "wouter";
-import { jsx as jsx14 } from "react/jsx-runtime";
+import { jsx as jsx19 } from "react/jsx-runtime";
 function Link2({ to, href, children, className, onClick, replace, ...props }) {
   const target = href ?? to ?? "/";
-  return /* @__PURE__ */ jsx14(WouterLink2, { href: target, className, onClick, replace, ...props, children });
+  return /* @__PURE__ */ jsx19(WouterLink2, { href: target, className, onClick, replace, ...props, children });
 }
 
 // src/router/useNavigate.ts
@@ -4400,7 +5416,7 @@ function useNavigate() {
 
 // src/router/Router.tsx
 import { Router as WouterRouter } from "wouter";
-import { jsx as jsx15 } from "react/jsx-runtime";
+import { jsx as jsx20 } from "react/jsx-runtime";
 function detectBasename() {
   if (typeof window === "undefined") return "";
   const sessionMatch = window.location.pathname.match(/^\/session\/[^/]+/);
@@ -4415,7 +5431,7 @@ function detectBasename() {
 }
 function Router({ children, base }) {
   const basename = base ?? detectBasename();
-  return /* @__PURE__ */ jsx15(WouterRouter, { base: basename, children });
+  return /* @__PURE__ */ jsx20(WouterRouter, { base: basename, children });
 }
 
 // src/router/index.ts
@@ -4429,6 +5445,7 @@ export {
   Route,
   Router,
   SafeHtml,
+  SafeTriangleBelow,
   MpImage as StaticImage,
   MpText as StaticText,
   Switch,
@@ -4465,5 +5482,6 @@ export {
   useContentStore,
   useContentStore2 as useContentStoreProd,
   useNavigate,
-  useParams
+  useParams,
+  useSafeTriangle
 };