@yoamigo.com/core 0.1.11 → 0.1.13

package/dist/index.js

@@ -938,7 +938,7 @@ function ContentStoreProvider2({ children }) {
 }
 
 // src/components/YaText.tsx
-import { useEffect as useEffect3, useRef as useRef3, useState as useState3, useCallback as useCallback3 } from "react";
+import { useEffect as useEffect4, useRef as useRef5, useState as useState4, useCallback as useCallback5 } from "react";
 import { createPortal as createPortal2 } from "react-dom";
 import { useEditor, EditorContent } from "@tiptap/react";
 import { BubbleMenu } from "@tiptap/react/menus";
@@ -1165,6 +1165,523 @@ function SafeHtml({ content, className, mode = "read-only" }) {
   ] });
 }
 
+// src/hooks/useAnimatedText.ts
+import { useMemo as useMemo3 } from "react";
+
+// src/hooks/useAIEditAnimation.ts
+import { useState as useState3, useEffect as useEffect3, useRef as useRef4, useCallback as useCallback4, useMemo as useMemo2 } from "react";
+
+// 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";
+var AIEditContext = createContext3(null);
+function useAIEditContext() {
+  const context = useContext3(AIEditContext);
+  if (!context) {
+    throw new Error("useAIEditContext must be used within an AIEditProvider");
+  }
+  return context;
+}
+function useAIEditContextOptional() {
+  return useContext3(AIEditContext);
+}
+function AIEditProvider({ children, staggerDelay = 100 }) {
+  const animationsRef = useRef3(/* @__PURE__ */ new Map());
+  const listenersRef = useRef3(/* @__PURE__ */ new Map());
+  const queueRef = useRef3([]);
+  const processingRef = useRef3(false);
+  const notifyListeners = useCallback3((fieldId) => {
+    const listeners = listenersRef.current.get(fieldId);
+    if (listeners) {
+      listeners.forEach((listener) => listener());
+    }
+  }, []);
+  const processQueue = useCallback3(() => {
+    if (processingRef.current || queueRef.current.length === 0) return;
+    processingRef.current = true;
+    const fieldId = queueRef.current.shift();
+    const state = animationsRef.current.get(fieldId);
+    if (state && state.status === "pending") {
+      state.status = "animating";
+      state.startTime = performance.now();
+      notifyListeners(fieldId);
+    }
+    setTimeout(() => {
+      processingRef.current = false;
+      processQueue();
+    }, staggerDelay);
+  }, [staggerDelay, notifyListeners]);
+  const queueAnimation = useCallback3(
+    (fieldId, config) => {
+      const existing = animationsRef.current.get(fieldId);
+      if (existing && existing.status === "animating") {
+        animationsRef.current.delete(fieldId);
+      }
+      const state = {
+        fieldId,
+        status: "pending",
+        startTime: 0,
+        duration: config.duration,
+        onComplete: config.onComplete
+      };
+      animationsRef.current.set(fieldId, state);
+      config.onStart?.();
+      if (!queueRef.current.includes(fieldId)) {
+        queueRef.current.push(fieldId);
+      }
+      notifyListeners(fieldId);
+      processQueue();
+    },
+    [notifyListeners, processQueue]
+  );
+  const cancelAnimation = useCallback3(
+    (fieldId) => {
+      const state = animationsRef.current.get(fieldId);
+      if (state) {
+        animationsRef.current.delete(fieldId);
+        const queueIndex = queueRef.current.indexOf(fieldId);
+        if (queueIndex >= 0) {
+          queueRef.current.splice(queueIndex, 1);
+        }
+        notifyListeners(fieldId);
+      }
+    },
+    [notifyListeners]
+  );
+  const isAnimating = useCallback3((fieldId) => {
+    const state = animationsRef.current.get(fieldId);
+    return state?.status === "animating" || state?.status === "pending";
+  }, []);
+  const getAnimationState = useCallback3((fieldId) => {
+    return animationsRef.current.get(fieldId);
+  }, []);
+  const subscribe = useCallback3((fieldId, listener) => {
+    let listeners = listenersRef.current.get(fieldId);
+    if (!listeners) {
+      listeners = /* @__PURE__ */ new Set();
+      listenersRef.current.set(fieldId, listeners);
+    }
+    listeners.add(listener);
+    return () => {
+      listeners?.delete(listener);
+      if (listeners?.size === 0) {
+        listenersRef.current.delete(fieldId);
+      }
+    };
+  }, []);
+  const completeAnimation = useCallback3(
+    (fieldId) => {
+      const state = animationsRef.current.get(fieldId);
+      if (state) {
+        state.status = "complete";
+        state.onComplete?.();
+        setTimeout(() => {
+          animationsRef.current.delete(fieldId);
+          notifyListeners(fieldId);
+        }, 500);
+        notifyListeners(fieldId);
+      }
+    },
+    [notifyListeners]
+  );
+  const value = useMemo(
+    () => ({
+      queueAnimation,
+      cancelAnimation,
+      isAnimating,
+      getAnimationState,
+      subscribe,
+      completeAnimation
+    }),
+    [queueAnimation, cancelAnimation, isAnimating, getAnimationState, subscribe, completeAnimation]
+  );
+  return /* @__PURE__ */ jsx4(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 previousValueRef = useRef4(value);
+  const isFirstRender = useRef4(true);
+  const [phase, setPhase] = useState3("idle");
+  const [progress, setProgress] = useState3(0);
+  const [displayValue, setDisplayValue] = useState3(value);
+  const metadataRef = useRef4(null);
+  const animationFrameRef = useRef4(null);
+  const startTimeRef = useRef4(0);
+  const cancel = useCallback4(() => {
+    if (animationFrameRef.current !== null) {
+      cancelAnimationFrame(animationFrameRef.current);
+      animationFrameRef.current = null;
+    }
+    setPhase("idle");
+    setProgress(0);
+    setDisplayValue(value);
+    metadataRef.current = null;
+    context?.cancelAnimation(fieldId);
+  }, [value, context, fieldId]);
+  const runAnimation = useCallback4(() => {
+    if (!metadataRef.current) return;
+    const metadata = metadataRef.current;
+    const elapsed = performance.now() - startTimeRef.current;
+    const duration = Math.min(metadata.duration, maxDuration);
+    if (elapsed >= duration) {
+      setProgress(1);
+      setDisplayValue(metadata.newValue);
+      setPhase("complete");
+      metadataRef.current = null;
+      animationFrameRef.current = null;
+      context?.completeAnimation(fieldId);
+      onComplete?.();
+      setTimeout(() => {
+        setPhase("idle");
+      }, 400);
+      return;
+    }
+    const currentProgress = elapsed / duration;
+    setProgress(currentProgress);
+    const interpolatedValue = strategy.interpolate(metadata, currentProgress);
+    setDisplayValue(interpolatedValue);
+    animationFrameRef.current = requestAnimationFrame(runAnimation);
+  }, [strategy, maxDuration, context, fieldId, onComplete]);
+  useEffect3(() => {
+    if (isFirstRender.current) {
+      isFirstRender.current = false;
+      previousValueRef.current = value;
+      return;
+    }
+    if (!enabled) {
+      setDisplayValue(value);
+      previousValueRef.current = value;
+      return;
+    }
+    const oldValue = previousValueRef.current;
+    const newValue = value;
+    if (!strategy.canAnimate(oldValue, newValue)) {
+      setDisplayValue(newValue);
+      previousValueRef.current = newValue;
+      return;
+    }
+    if (animationFrameRef.current !== null) {
+      cancelAnimationFrame(animationFrameRef.current);
+    }
+    const metadata = strategy.prepare(oldValue, newValue);
+    metadataRef.current = metadata;
+    startTimeRef.current = performance.now();
+    context?.queueAnimation(fieldId, {
+      duration: Math.min(metadata.duration, maxDuration),
+      onComplete: () => {
+      }
+    });
+    onStart?.();
+    setPhase("animating");
+    setProgress(0);
+    animationFrameRef.current = requestAnimationFrame(runAnimation);
+    previousValueRef.current = newValue;
+    return () => {
+      if (animationFrameRef.current !== null) {
+        cancelAnimationFrame(animationFrameRef.current);
+      }
+    };
+  }, [value, enabled, strategy, context, fieldId, maxDuration, onStart, runAnimation]);
+  useEffect3(() => {
+    return () => {
+      if (animationFrameRef.current !== null) {
+        cancelAnimationFrame(animationFrameRef.current);
+      }
+    };
+  }, []);
+  const wrapperProps = useMemo2(
+    () => ({
+      className: phase === "animating" ? "ya-ai-editing" : phase === "complete" ? "ya-ai-complete" : "",
+      "data-ai-editing": phase === "animating"
+    }),
+    [phase]
+  );
+  return {
+    displayValue,
+    isAnimating: phase === "animating",
+    phase,
+    progress,
+    cancel,
+    wrapperProps
+  };
+}
+
+// src/lib/text-diff.ts
+function containsHtml(text) {
+  return /<[^>]+>/.test(text);
+}
+function stripHtml(html) {
+  const withNewlines = html.replace(/<br\s*\/?>/gi, "\n");
+  return withNewlines.replace(/<[^>]+>/g, "");
+}
+function commonPrefixLength(a, b) {
+  const minLen = Math.min(a.length, b.length);
+  let i = 0;
+  while (i < minLen && a[i] === b[i]) {
+    i++;
+  }
+  return i;
+}
+function commonSuffixLength(a, b, prefixLen) {
+  const maxSuffixA = a.length - prefixLen;
+  const maxSuffixB = b.length - prefixLen;
+  const maxSuffix = Math.min(maxSuffixA, maxSuffixB);
+  let i = 0;
+  while (i < maxSuffix && a[a.length - 1 - i] === b[b.length - 1 - i]) {
+    i++;
+  }
+  return i;
+}
+function computeTextDiff(oldText, newText) {
+  const normalizedOld = oldText ?? "";
+  const normalizedNew = newText ?? "";
+  const hasHtml = containsHtml(normalizedOld) || containsHtml(normalizedNew);
+  if (hasHtml) {
+    return {
+      type: "complex",
+      deletions: normalizedOld,
+      additions: normalizedNew,
+      commonPrefix: "",
+      commonSuffix: "",
+      oldText: normalizedOld,
+      newText: normalizedNew
+    };
+  }
+  const prefixLen = commonPrefixLength(normalizedOld, normalizedNew);
+  const suffixLen = commonSuffixLength(normalizedOld, normalizedNew, prefixLen);
+  const commonPrefix = normalizedOld.slice(0, prefixLen);
+  const commonSuffix = suffixLen > 0 ? normalizedOld.slice(-suffixLen) : "";
+  const deletions = normalizedOld.slice(prefixLen, normalizedOld.length - suffixLen);
+  const additions = normalizedNew.slice(prefixLen, normalizedNew.length - suffixLen);
+  return {
+    type: "simple",
+    deletions,
+    additions,
+    commonPrefix,
+    commonSuffix,
+    oldText: normalizedOld,
+    newText: normalizedNew
+  };
+}
+function buildIntermediateText(diff, deleteProgress, typeProgress) {
+  if (diff.type === "complex") {
+    return typeProgress >= 1 ? diff.newText : diff.oldText;
+  }
+  const deletionsRemaining = Math.floor(diff.deletions.length * (1 - deleteProgress));
+  const additionsShown = Math.floor(diff.additions.length * typeProgress);
+  const remainingDeletions = diff.deletions.slice(0, deletionsRemaining);
+  const typedAdditions = diff.additions.slice(0, additionsShown);
+  return diff.commonPrefix + remainingDeletions + typedAdditions + diff.commonSuffix;
+}
+function calculateAnimationTiming(diff, options = {}) {
+  const { charDelay = 50, maxDuration = 2e3 } = options;
+  if (diff.type === "complex") {
+    return { deleteDuration: 150, typeDuration: 150 };
+  }
+  const deleteChars = diff.deletions.length;
+  const typeChars = diff.additions.length;
+  const totalChars = deleteChars + typeChars;
+  if (totalChars === 0) {
+    return { deleteDuration: 0, typeDuration: 0 };
+  }
+  const baseDuration = totalChars * charDelay;
+  const scale = baseDuration > maxDuration ? maxDuration / baseDuration : 1;
+  const deleteDuration = Math.round(deleteChars * charDelay * scale);
+  const typeDuration = Math.round(typeChars * charDelay * scale);
+  return { deleteDuration, typeDuration };
+}
+
+// src/lib/animation-strategies.ts
+var textTypingStrategy = {
+  name: "text-typing",
+  canAnimate(oldValue, newValue) {
+    if (oldValue === newValue) return false;
+    if (!oldValue && !newValue) return false;
+    return true;
+  },
+  prepare(oldValue, newValue) {
+    const diff = computeTextDiff(oldValue, newValue);
+    const { deleteDuration, typeDuration } = calculateAnimationTiming(diff, {
+      charDelay: 50,
+      // Fast & snappy
+      maxDuration: 2e3
+    });
+    return {
+      oldValue,
+      newValue,
+      duration: deleteDuration + typeDuration,
+      data: {
+        diff,
+        deleteDuration,
+        typeDuration
+      }
+    };
+  },
+  interpolate(metadata, progress) {
+    const data = metadata.data;
+    const { diff, deleteDuration, typeDuration } = data;
+    const totalDuration = deleteDuration + typeDuration;
+    if (totalDuration === 0) {
+      return metadata.newValue;
+    }
+    const deleteEnd = deleteDuration / totalDuration;
+    let deleteProgress;
+    let typeProgress;
+    if (progress <= deleteEnd) {
+      deleteProgress = deleteEnd > 0 ? progress / deleteEnd : 1;
+      typeProgress = 0;
+    } else {
+      deleteProgress = 1;
+      const typeStart = deleteEnd;
+      const typeRange = 1 - deleteEnd;
+      typeProgress = typeRange > 0 ? (progress - typeStart) / typeRange : 1;
+    }
+    return buildIntermediateText(diff, deleteProgress, typeProgress);
+  }
+};
+var imageCrossfadeStrategy = {
+  name: "image-crossfade",
+  canAnimate(oldValue, newValue) {
+    if (oldValue?.src === newValue?.src) return false;
+    return true;
+  },
+  prepare(oldValue, newValue) {
+    return {
+      oldValue,
+      newValue,
+      duration: 300
+      // Quick crossfade
+    };
+  },
+  interpolate(metadata, progress) {
+    return progress >= 0.5 ? metadata.newValue : metadata.oldValue;
+  }
+};
+var linkTransitionStrategy = {
+  name: "link-transition",
+  canAnimate(oldValue, newValue) {
+    if (oldValue?.text === newValue?.text && oldValue?.href === newValue?.href) {
+      return false;
+    }
+    return true;
+  },
+  prepare(oldValue, newValue) {
+    const textDiff = computeTextDiff(oldValue?.text ?? "", newValue?.text ?? "");
+    const { deleteDuration, typeDuration } = calculateAnimationTiming(textDiff, {
+      charDelay: 50,
+      maxDuration: 1500
+    });
+    return {
+      oldValue,
+      newValue,
+      duration: deleteDuration + typeDuration + 100,
+      // Extra for href highlight
+      data: { textDiff }
+    };
+  },
+  interpolate(metadata, progress) {
+    return progress >= 0.5 ? metadata.newValue : metadata.oldValue;
+  }
+};
+function getTextCursorPosition(metadata, progress) {
+  const { diff, deleteDuration, typeDuration } = metadata.data;
+  const totalDuration = deleteDuration + typeDuration;
+  if (totalDuration === 0) return null;
+  const deleteEnd = deleteDuration / totalDuration;
+  let textLength;
+  if (progress <= deleteEnd) {
+    const deleteProgress = deleteEnd > 0 ? progress / deleteEnd : 1;
+    const deletionsRemaining = Math.floor(diff.deletions.length * (1 - deleteProgress));
+    textLength = diff.commonPrefix.length + deletionsRemaining;
+  } else {
+    const typeProgress = (progress - deleteEnd) / (1 - deleteEnd);
+    const additionsShown = Math.floor(diff.additions.length * typeProgress);
+    textLength = diff.commonPrefix.length + additionsShown;
+  }
+  return textLength;
+}
+
+// src/hooks/useAnimatedText.ts
+function useAnimatedText(fieldId, content, options = {}) {
+  const {
+    enabled = true,
+    charDelay = 50,
+    maxDuration = 2e3,
+    onStart,
+    onComplete
+  } = options;
+  const customStrategy = useMemo3(() => {
+    if (charDelay === 50) {
+      return textTypingStrategy;
+    }
+    return {
+      ...textTypingStrategy,
+      prepare(oldValue, newValue) {
+        const diff = computeTextDiff(oldValue, newValue);
+        const { deleteDuration, typeDuration } = calculateAnimationTiming(diff, {
+          charDelay,
+          maxDuration
+        });
+        return {
+          oldValue,
+          newValue,
+          duration: deleteDuration + typeDuration,
+          data: {
+            diff,
+            deleteDuration,
+            typeDuration
+          }
+        };
+      }
+    };
+  }, [charDelay, maxDuration]);
+  const {
+    displayValue,
+    isAnimating,
+    phase,
+    progress,
+    cancel,
+    wrapperProps
+  } = useAIEditAnimation(fieldId, content, {
+    enabled,
+    strategy: customStrategy,
+    maxDuration,
+    onStart,
+    onComplete
+  });
+  const cursorPosition = useMemo3(() => {
+    if (!isAnimating) return null;
+    const diff = computeTextDiff(content, displayValue);
+    const { deleteDuration, typeDuration } = calculateAnimationTiming(diff, {
+      charDelay,
+      maxDuration
+    });
+    const metadata = {
+      oldValue: content,
+      newValue: displayValue,
+      duration: deleteDuration + typeDuration,
+      data: {
+        diff,
+        deleteDuration,
+        typeDuration
+      }
+    };
+    return getTextCursorPosition(metadata, progress);
+  }, [isAnimating, content, displayValue, charDelay, maxDuration, progress]);
+  return {
+    displayContent: displayValue,
+    isAnimating,
+    phase,
+    progress,
+    cursorPosition,
+    wrapperClassName: wrapperProps.className,
+    cancel
+  };
+}
+
 // #style-inject:#style-inject
 function styleInject(css, { insertAt } = {}) {
   if (!css || typeof document === "undefined") return;
@@ -1415,8 +1932,11 @@ body.builder-selector-active .ya-text-editable:hover {
 }
 `);
 
+// src/styles/ai-animations.css
+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 jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
 var FontSize = Extension.create({
   name: "fontSize",
   addOptions() {
@@ -1511,10 +2031,17 @@ 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] = useState3(false);
-  const [originalContent, setOriginalContent] = useState3(content);
-  const containerRef = useRef3(null);
-  const originalContentRef = useRef3(content);
+  const [isEditing, setIsEditing] = useState4(false);
+  const {
+    displayContent,
+    isAnimating,
+    wrapperClassName
+  } = useAnimatedText(fieldId, content, {
+    enabled: mode === "inline-edit" && !isEditing
+  });
+  const [originalContent, setOriginalContent] = useState4(content);
+  const containerRef = useRef5(null);
+  const originalContentRef = useRef5(content);
   const editor = useEditor({
     extensions: [
       StarterKit.configure({
@@ -1548,19 +2075,19 @@ function YaText({ fieldId, className, as: Component = "span", children }) {
     },
     parseOptions: { preserveWhitespace: "full" }
   });
-  useEffect3(() => {
+  useEffect4(() => {
     if (editor && !isEditing) {
       if (editor.getHTML() !== content) {
         editor.commands.setContent(content, { parseOptions: { preserveWhitespace: "full" } });
       }
     }
   }, [content, editor, isEditing]);
-  useEffect3(() => {
+  useEffect4(() => {
     if (isEditing && activeFieldId !== null && activeFieldId !== fieldId) {
       setIsEditing(false);
     }
   }, [activeFieldId, fieldId, isEditing]);
-  const handleSave = useCallback3(() => {
+  const handleSave = useCallback5(() => {
     if (!editor) return;
     let html = editor.getHTML();
     html = html.replace(/<\/p><p>/g, "<br><br>").replace(/^<p>/, "").replace(/<\/p>$/, "");
@@ -1568,13 +2095,13 @@ function YaText({ fieldId, className, as: Component = "span", children }) {
     saveToWorker?.(fieldId, html);
     setIsEditing(false);
   }, [editor, fieldId, setValue, saveToWorker]);
-  const handleCancel = useCallback3(() => {
+  const handleCancel = useCallback5(() => {
     if (editor) {
       editor.commands.setContent(originalContent, { parseOptions: { preserveWhitespace: "full" } });
     }
     setIsEditing(false);
   }, [editor, originalContent]);
-  const handleClose = useCallback3(() => {
+  const handleClose = useCallback5(() => {
     if (!editor) {
       setIsEditing(false);
       return;
@@ -1587,7 +2114,7 @@ function YaText({ fieldId, className, as: Component = "span", children }) {
     }
     setIsEditing(false);
   }, [editor, fieldId, setValue, saveToWorker]);
-  const handleClick = useCallback3((e) => {
+  const handleClick = useCallback5((e) => {
     if (isEditing) {
       e.preventDefault();
       e.stopPropagation();
@@ -1613,7 +2140,7 @@ function YaText({ fieldId, className, as: Component = "span", children }) {
       }, 20);
     }
   }, [mode, isEditing, content, editor, fieldId, setActiveField, handleClose]);
-  const handleKeyDown = useCallback3(
+  const handleKeyDown = useCallback5(
     (event) => {
       if (!isEditing) return;
       if (event.key === "Enter" && !event.shiftKey) {
@@ -1634,7 +2161,7 @@ function YaText({ fieldId, className, as: Component = "span", children }) {
     },
     [isEditing, handleSave, handleCancel]
   );
-  const handleLink = useCallback3(() => {
+  const handleLink = useCallback5(() => {
     if (!editor) return;
     const previousUrl = editor.getAttributes("link").href;
     const url = window.prompt("Enter URL:", previousUrl || "https://");
@@ -1645,7 +2172,7 @@ function YaText({ fieldId, className, as: Component = "span", children }) {
       editor.chain().focus().extendMarkRange("link").setLink({ href: url }).run();
     }
   }, [editor]);
-  const handleFontSizeChange = useCallback3(
+  const handleFontSizeChange = useCallback5(
     (e) => {
       if (!editor) return;
       const size = e.target.value;
@@ -1657,7 +2184,7 @@ function YaText({ fieldId, className, as: Component = "span", children }) {
     },
     [editor]
   );
-  const handleFontWeightChange = useCallback3(
+  const handleFontWeightChange = useCallback5(
     (e) => {
       if (!editor) return;
       const weight = e.target.value;
@@ -1680,24 +2207,30 @@ function YaText({ fieldId, className, as: Component = "span", children }) {
     return attrs.fontWeight || "";
   };
   if (mode === "read-only") {
-    return /* @__PURE__ */ jsx4(
+    return /* @__PURE__ */ jsx5(
       Component,
       {
         ref: containerRef,
         className,
         "data-ya-restricted": "true",
         "data-field-id": fieldId,
-        children: /* @__PURE__ */ jsx4(SafeHtml, { content, mode })
+        children: /* @__PURE__ */ jsx5(SafeHtml, { content, mode })
       }
     );
   }
-  return /* @__PURE__ */ jsx4(
+  const combinedClassName = [
+    className || "",
+    isEditing ? "ya-text-editing" : "ya-text-editable",
+    wrapperClassName
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx5(
     Component,
     {
       ref: containerRef,
-      className: `${className || ""} ${isEditing ? "ya-text-editing" : "ya-text-editable"}`,
+      className: combinedClassName,
       "data-ya-restricted": "true",
       "data-field-id": fieldId,
+      "data-ai-editing": isAnimating || void 0,
       onClick: handleClick,
       onKeyDown: handleKeyDown,
       children: editor ? /* @__PURE__ */ jsxs2(Fragment2, { children: [
@@ -1710,37 +2243,37 @@ function YaText({ fieldId, className, as: Component = "span", children }) {
               options: { offset: 6, placement: "top" },
               className: "ya-bubble-menu",
               children: [
-                /* @__PURE__ */ jsx4(
+                /* @__PURE__ */ jsx5(
                   "button",
                   {
                     type: "button",
                     onClick: () => editor.chain().focus().toggleBold().run(),
                     className: `ya-bubble-btn ${editor.isActive("bold") ? "is-active" : ""}`,
                     title: "Bold",
-                    children: /* @__PURE__ */ jsx4("strong", { children: "B" })
+                    children: /* @__PURE__ */ jsx5("strong", { children: "B" })
                   }
                 ),
-                /* @__PURE__ */ jsx4(
+                /* @__PURE__ */ jsx5(
                   "button",
                   {
                     type: "button",
                     onClick: () => editor.chain().focus().toggleItalic().run(),
                     className: `ya-bubble-btn ${editor.isActive("italic") ? "is-active" : ""}`,
                     title: "Italic",
-                    children: /* @__PURE__ */ jsx4("em", { children: "I" })
+                    children: /* @__PURE__ */ jsx5("em", { children: "I" })
                   }
                 ),
-                /* @__PURE__ */ jsx4(
+                /* @__PURE__ */ jsx5(
                   "button",
                   {
                     type: "button",
                     onClick: handleLink,
                     className: `ya-bubble-btn ${editor.isActive("link") ? "is-active" : ""}`,
                     title: "Link",
-                    children: /* @__PURE__ */ jsx4("span", { children: "\u{1F517}" })
+                    children: /* @__PURE__ */ jsx5("span", { children: "\u{1F517}" })
                   }
                 ),
-                /* @__PURE__ */ jsx4("span", { className: "ya-bubble-divider" }),
+                /* @__PURE__ */ jsx5("span", { className: "ya-bubble-divider" }),
                 /* @__PURE__ */ jsxs2(
                   "select",
                   {
@@ -1749,8 +2282,8 @@ function YaText({ fieldId, className, as: Component = "span", children }) {
                     className: "ya-bubble-select",
                     title: "Font Size",
                     children: [
-                      /* @__PURE__ */ jsx4("option", { value: "", children: "Size" }),
-                      Object.entries(SIZE_PRESETS).map(([name, size]) => /* @__PURE__ */ jsx4("option", { value: size, children: name }, name))
+                      /* @__PURE__ */ jsx5("option", { value: "", children: "Size" }),
+                      Object.entries(SIZE_PRESETS).map(([name, size]) => /* @__PURE__ */ jsx5("option", { value: size, children: name }, name))
                     ]
                   }
                 ),
@@ -1762,8 +2295,8 @@ function YaText({ fieldId, className, as: Component = "span", children }) {
                     className: "ya-bubble-select",
                     title: "Font Weight",
                     children: [
-                      /* @__PURE__ */ jsx4("option", { value: "", children: "Weight" }),
-                      Object.entries(WEIGHT_PRESETS).map(([name, weight]) => /* @__PURE__ */ jsx4("option", { value: weight, children: name }, name))
+                      /* @__PURE__ */ jsx5("option", { value: "", children: "Weight" }),
+                      Object.entries(WEIGHT_PRESETS).map(([name, weight]) => /* @__PURE__ */ jsx5("option", { value: weight, children: name }, name))
                     ]
                   }
                 )
@@ -1773,9 +2306,9 @@ function YaText({ fieldId, className, as: Component = "span", children }) {
           document.body
         ),
         isEditing ? /* @__PURE__ */ jsxs2(Fragment2, { children: [
-          /* @__PURE__ */ jsx4(EditorContent, { editor }),
+          /* @__PURE__ */ jsx5(EditorContent, { editor }),
           /* @__PURE__ */ jsxs2("div", { className: "ya-text-actions", children: [
-            /* @__PURE__ */ jsx4(
+            /* @__PURE__ */ jsx5(
               "button",
               {
                 type: "button",
@@ -1784,7 +2317,7 @@ function YaText({ fieldId, className, as: Component = "span", children }) {
                 children: "Cancel"
               }
             ),
-            /* @__PURE__ */ jsx4(
+            /* @__PURE__ */ jsx5(
               "button",
               {
                 type: "button",
@@ -1794,14 +2327,20 @@ function YaText({ fieldId, className, as: Component = "span", children }) {
               }
             )
           ] })
-        ] }) : /* @__PURE__ */ jsx4(SafeHtml, { content, mode })
-      ] }) : /* @__PURE__ */ jsx4(SafeHtml, { content, mode })
+        ] }) : /* @__PURE__ */ jsxs2(Fragment2, { children: [
+          /* @__PURE__ */ jsx5(SafeHtml, { content: displayContent, mode }),
+          isAnimating && /* @__PURE__ */ jsx5("span", { className: "ya-typing-cursor" })
+        ] })
+      ] }) : /* @__PURE__ */ jsxs2(Fragment2, { children: [
+        /* @__PURE__ */ jsx5(SafeHtml, { content: displayContent, mode }),
+        isAnimating && /* @__PURE__ */ jsx5("span", { className: "ya-typing-cursor" })
+      ] })
     }
   );
 }
 
 // src/components/YaImage.tsx
-import { useCallback as useCallback5, useEffect as useEffect5, useRef as useRef5, useState as useState5 } from "react";
+import { useCallback as useCallback7, useEffect as useEffect6, useRef as useRef7, useState as useState6 } from "react";
 
 // src/lib/asset-resolver.ts
 var assetResolver = (path) => path;
@@ -1817,25 +2356,25 @@ function resolveAssetUrl(path) {
 }
 
 // src/components/YaTooltip.tsx
-import { useEffect as useEffect4, useRef as useRef4, useState as useState4, useCallback as useCallback4 } from "react";
+import { useEffect as useEffect5, useRef as useRef6, useState as useState5, useCallback as useCallback6 } from "react";
 import { createPortal as createPortal3 } 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');
 
 // src/components/YaTooltip.tsx
-import { jsx as jsx5 } from "react/jsx-runtime";
+import { jsx as jsx6 } from "react/jsx-runtime";
 function YaTooltip({
   anchorRef,
   children,
   show,
   preferredPosition = "bottom"
 }) {
-  const [position, setPosition] = useState4(preferredPosition);
-  const [coords, setCoords] = useState4({ top: 0, left: 0 });
-  const [isPositioned, setIsPositioned] = useState4(false);
-  const tooltipRef = useRef4(null);
-  const calculatePosition = useCallback4(() => {
+  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(() => {
     if (!anchorRef.current) return;
     const anchor = anchorRef.current.getBoundingClientRect();
     const tooltip = tooltipRef.current?.getBoundingClientRect();
@@ -1910,7 +2449,7 @@ function YaTooltip({
     setCoords({ top, left });
     setIsPositioned(true);
   }, [anchorRef, preferredPosition]);
-  useEffect4(() => {
+  useEffect5(() => {
     if (!show) {
       setIsPositioned(false);
       return;
@@ -1923,14 +2462,14 @@ function YaTooltip({
       window.removeEventListener("resize", calculatePosition);
     };
   }, [show, calculatePosition]);
-  useEffect4(() => {
+  useEffect5(() => {
     if (show && tooltipRef.current) {
       calculatePosition();
     }
   }, [show, children, calculatePosition]);
   if (!show) return null;
   return createPortal3(
-    /* @__PURE__ */ jsx5(
+    /* @__PURE__ */ jsx6(
       "div",
       {
         ref: tooltipRef,
@@ -1953,7 +2492,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');
 
 // src/components/YaImage.tsx
-import { jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx7, jsxs as jsxs3 } from "react/jsx-runtime";
 function parseImageValue(value) {
   if (!value) {
     return { src: "" };
@@ -1977,6 +2516,16 @@ function getObjectPosition(imageData) {
   return imageData.objectPosition || "50% 50%";
 }
 var SMALL_IMAGE_THRESHOLD = 100;
+var PLACEHOLDER_SVG = `data:image/svg+xml,${encodeURIComponent(`
+<svg xmlns="http://www.w3.org/2000/svg" width="400" height="300" viewBox="0 0 400 300">
+  <rect fill="#e5e7eb" width="400" height="300"/>
+  <g fill="#9ca3af" transform="translate(175, 125)">
+    <rect x="3" y="3" width="44" height="44" rx="4" stroke="currentColor" stroke-width="2" fill="none"/>
+    <circle cx="15" cy="15" r="4" fill="currentColor"/>
+    <path d="M47 35 L32 20 L17 35 L12 30 L3 39 L3 43 L47 43 Z" fill="currentColor"/>
+  </g>
+</svg>
+`)}`;
 function YaImage({
   fieldId,
   className,
@@ -1988,18 +2537,18 @@ function YaImage({
   fallbackAlt
 }) {
   const { getValue, mode } = useContentStore();
-  const containerRef = useRef5(null);
-  const imgRef = useRef5(null);
-  const [isSelected, setIsSelected] = useState5(false);
-  const [isHovered, setIsHovered] = useState5(false);
-  const [isSmallImage, setIsSmallImage] = useState5(false);
+  const containerRef = useRef7(null);
+  const imgRef = useRef7(null);
+  const [isSelected, setIsSelected] = useState6(false);
+  const [isHovered, setIsHovered] = useState6(false);
+  const [isSmallImage, setIsSmallImage] = useState6(false);
   const rawValue = getValue(fieldId);
   const imageData = parseImageValue(rawValue);
-  const src = imageData.src || fallbackSrc || "";
+  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 = useCallback5(() => {
+  const handleClick = useCallback7(() => {
     if (mode !== "inline-edit") return;
     if (document.body.classList.contains("builder-selector-active")) return;
     setIsSelected(true);
@@ -2027,7 +2576,7 @@ function YaImage({
       "*"
     );
   }, [mode, fieldId, imageData, src, altText, objectFit, objectPosition]);
-  useEffect5(() => {
+  useEffect6(() => {
     if (mode !== "inline-edit") return;
     const handleMessage2 = (event) => {
       if (event.data?.type === "YA_IMAGE_EDIT_COMPLETE" && event.data.fieldId === fieldId) {
@@ -2042,7 +2591,7 @@ function YaImage({
     window.addEventListener("message", handleMessage2);
     return () => window.removeEventListener("message", handleMessage2);
   }, [mode, fieldId]);
-  useEffect5(() => {
+  useEffect6(() => {
     if (mode !== "inline-edit") return;
     const checkSize = () => {
       if (imgRef.current) {
@@ -2064,7 +2613,7 @@ function YaImage({
       window.removeEventListener("resize", checkSize);
     };
   }, [mode]);
-  useEffect5(() => {
+  useEffect6(() => {
     if (!isSelected || mode !== "inline-edit") return;
     let lastRectKey = "";
     let lastTime = 0;
@@ -2099,7 +2648,7 @@ function YaImage({
     return () => cancelAnimationFrame(rafId);
   }, [isSelected, fieldId, mode]);
   if (mode === "read-only") {
-    return /* @__PURE__ */ jsx6(
+    return /* @__PURE__ */ jsx7(
       "img",
       {
         src: resolveAssetUrl(src),
@@ -2127,9 +2676,9 @@ function YaImage({
       strokeLinecap: "round",
       strokeLinejoin: "round",
       children: [
-        /* @__PURE__ */ jsx6("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2", ry: "2" }),
-        /* @__PURE__ */ jsx6("circle", { cx: "8.5", cy: "8.5", r: "1.5" }),
-        /* @__PURE__ */ jsx6("polyline", { points: "21 15 16 10 5 21" })
+        /* @__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" })
       ]
     }
   );
@@ -2154,7 +2703,7 @@ function YaImage({
         }
       },
       children: [
-        /* @__PURE__ */ jsx6(
+        /* @__PURE__ */ jsx7(
           "img",
           {
             ref: imgRef,
@@ -2170,12 +2719,12 @@ function YaImage({
         ),
         isSmallImage ? /* @__PURE__ */ jsxs3(YaTooltip, { anchorRef: containerRef, show: isHovered && !isSelected, children: [
           editIcon,
-          /* @__PURE__ */ jsx6("span", { children: "Click to edit" })
+          /* @__PURE__ */ jsx7("span", { children: "Click to edit" })
         ] }) : (
           /* For large images: show overlay inside the image */
           /* @__PURE__ */ jsxs3("div", { className: "ya-image-overlay", children: [
-            /* @__PURE__ */ jsx6("div", { className: "ya-image-edit-icon", children: editIcon }),
-            /* @__PURE__ */ jsx6("span", { className: "ya-image-edit-label", children: "Click to edit" })
+            /* @__PURE__ */ jsx7("div", { className: "ya-image-edit-icon", children: editIcon }),
+            /* @__PURE__ */ jsx7("span", { className: "ya-image-edit-label", children: "Click to edit" })
           ] })
         )
       ]
@@ -2184,7 +2733,7 @@ function YaImage({
 }
 
 // src/components/YaLink.tsx
-import { useEffect as useEffect6, useRef as useRef6, useState as useState6, useCallback as useCallback6 } from "react";
+import { useEffect as useEffect7, useRef as useRef8, useState as useState7, useCallback as useCallback8 } from "react";
 import { createPortal as createPortal4 } from "react-dom";
 import { useEditor as useEditor2, EditorContent as EditorContent2 } from "@tiptap/react";
 import { BubbleMenu as BubbleMenu2 } from "@tiptap/react/menus";
@@ -2197,7 +2746,7 @@ import { Link as WouterLink, useLocation } from "wouter";
 styleInject('.ya-link-wrapper {\n  position: relative;\n  display: inline;\n}\n.ya-link-editable {\n  cursor: pointer;\n  transition: outline 0.15s ease;\n}\n.ya-link-editable:hover {\n  outline: 2px dashed var(--color-primary, #D4A574);\n  outline-offset: 4px;\n  border-radius: 4px;\n}\nbody.builder-selector-active .ya-link-editable:hover {\n  outline: none;\n  cursor: inherit;\n}\n.ya-link-editing {\n  outline: 2px solid var(--color-primary, #D4A574);\n  outline-offset: 4px;\n  border-radius: 4px;\n  position: relative;\n}\n.ya-link-actions {\n  display: flex;\n  gap: 8px;\n  position: absolute;\n  bottom: -60px;\n  right: 0;\n  z-index: 10;\n  background: rgba(26, 26, 26, 0.95);\n  padding: 8px 10px;\n  border-radius: 8px;\n  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);\n  font-family:\n    system-ui,\n    -apple-system,\n    BlinkMacSystemFont,\n    "Segoe UI",\n    sans-serif;\n}\n.ya-link-btn {\n  padding: 6px 14px;\n  font-size: 12px;\n  font-weight: 500;\n  border-radius: 6px;\n  cursor: pointer;\n  transition: all 0.15s ease;\n  border: none;\n}\n.ya-link-btn-cancel {\n  background: #333333;\n  color: #ffffff;\n  border: 1px solid #555555;\n}\n.ya-link-btn-cancel:hover {\n  background: #444444;\n  color: #ffffff;\n  border-color: #666666;\n}\n.ya-link-btn-save {\n  background: #D4A574;\n  color: #1a1a1a;\n}\n.ya-link-btn-save:hover {\n  background: #c4956a;\n}\n.ya-href-popover {\n  position: absolute;\n  top: 100%;\n  left: 50%;\n  margin-top: 8px;\n  z-index: 10;\n  min-width: 280px;\n  max-width: 320px;\n  background: #1a1a1a;\n  border-radius: 12px;\n  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);\n  transform: translateX(-50%);\n  animation: ya-href-popover-fade-in 0.15s ease;\n  overflow: hidden;\n  font-family:\n    system-ui,\n    -apple-system,\n    BlinkMacSystemFont,\n    "Segoe UI",\n    sans-serif;\n}\n@keyframes ya-href-popover-fade-in {\n  from {\n    opacity: 0;\n    transform: translateX(-50%) translateY(-8px);\n  }\n  to {\n    opacity: 1;\n    transform: translateX(-50%) translateY(0);\n  }\n}\n.ya-href-popover::before {\n  content: "";\n  position: absolute;\n  top: -6px;\n  left: 50%;\n  transform: translateX(-50%);\n  border-left: 8px solid transparent;\n  border-right: 8px solid transparent;\n  border-bottom: 8px solid #1a1a1a;\n}\n.ya-href-popover-header {\n  padding: 12px 16px;\n  font-size: 13px;\n  font-weight: 600;\n  color: #ffffff;\n  border-bottom: 1px solid rgba(255, 255, 255, 0.1);\n}\n.ya-href-popover-section {\n  padding: 12px 16px;\n}\n.ya-href-popover-label {\n  display: block;\n  font-size: 11px;\n  font-weight: 500;\n  color: rgba(255, 255, 255, 0.6);\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n  margin-bottom: 8px;\n}\n.ya-href-collapsible-header {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  width: 100%;\n  padding: 0;\n  background: transparent;\n  border: none;\n  cursor: pointer;\n  transition: color 0.15s ease;\n}\n.ya-href-collapsible-header:hover {\n  color: rgba(255, 255, 255, 0.8);\n}\n.ya-href-chevron {\n  font-size: 8px;\n  color: rgba(255, 255, 255, 0.4);\n}\n.ya-href-popover-pages {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n  max-height: 200px;\n  overflow-y: auto;\n}\n.ya-href-page-btn {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  gap: 4px;\n  width: 100%;\n  padding: 10px 12px;\n  background: rgba(255, 255, 255, 0.05);\n  border: 1px solid transparent;\n  border-radius: 8px;\n  color: #e0e0e0;\n  font-size: 13px;\n  font-weight: 500;\n  text-align: left;\n  cursor: pointer;\n  transition: all 0.15s ease;\n}\n.ya-href-page-btn:hover {\n  background: rgba(255, 255, 255, 0.1);\n  border-color: rgba(255, 255, 255, 0.2);\n}\n.ya-href-page-btn.is-selected {\n  background: #D4A574;\n  color: #1a1a1a;\n}\n.ya-href-page-btn.is-selected .ya-href-page-path {\n  color: rgba(26, 26, 26, 0.6);\n}\n.ya-href-page-path {\n  font-size: 11px;\n  color: rgba(255, 255, 255, 0.4);\n  font-family: monospace;\n  word-break: break-all;\n}\n.ya-href-external-toggle {\n  display: block;\n  width: 100%;\n  padding: 10px 16px;\n  background: transparent;\n  border: none;\n  border-top: 1px solid rgba(255, 255, 255, 0.1);\n  color: #D4A574;\n  font-size: 12px;\n  font-weight: 500;\n  text-align: center;\n  cursor: pointer;\n  transition: background 0.15s ease;\n}\n.ya-href-external-toggle:hover {\n  background: rgba(255, 255, 255, 0.05);\n}\n.ya-href-url-input {\n  width: 100%;\n  padding: 10px 12px;\n  background: rgba(255, 255, 255, 0.05);\n  border: 1px solid rgba(255, 255, 255, 0.2);\n  border-radius: 8px;\n  color: #ffffff;\n  font-size: 13px;\n  outline: none;\n  transition: border-color 0.15s ease;\n}\n.ya-href-url-input::placeholder {\n  color: rgba(255, 255, 255, 0.4);\n}\n.ya-href-url-input:focus {\n  border-color: var(--color-primary, #D4A574);\n}\n.ya-href-popover-actions {\n  display: flex;\n  justify-content: flex-end;\n  gap: 8px;\n  padding: 12px 16px;\n  border-top: 1px solid rgba(255, 255, 255, 0.1);\n}\n.ya-link-edit-popover {\n  position: absolute;\n  top: 100%;\n  left: 50%;\n  margin-top: 8px;\n  z-index: 10;\n  background: #2a2a2a;\n  border-radius: 6px;\n  padding: 4px;\n  display: flex;\n  gap: 4px;\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);\n  transform: translateX(-50%);\n  animation: ya-edit-popover-fade-in 0.1s ease;\n  font-family:\n    system-ui,\n    -apple-system,\n    BlinkMacSystemFont,\n    "Segoe UI",\n    sans-serif;\n  white-space: nowrap;\n}\n@keyframes ya-edit-popover-fade-in {\n  from {\n    opacity: 0;\n    transform: translateX(-50%) translateY(-4px);\n  }\n  to {\n    opacity: 1;\n    transform: translateX(-50%) translateY(0);\n  }\n}\n.ya-link-edit-popover::before {\n  content: "";\n  position: absolute;\n  top: -5px;\n  left: 50%;\n  transform: translateX(-50%);\n  border-left: 6px solid transparent;\n  border-right: 6px solid transparent;\n  border-bottom: 6px solid #2a2a2a;\n}\n.ya-link-edit-popover button {\n  background: #3a3a3a;\n  border: none;\n  color: #fff;\n  padding: 6px 12px;\n  border-radius: 4px;\n  cursor: pointer;\n  font-size: 13px;\n  font-weight: 500;\n  transition: background 0.15s ease;\n}\n.ya-link-edit-popover button:hover {\n  background: #4a4a4a;\n}\n');
 
 // src/components/YaLink.tsx
-import { Fragment as Fragment3, jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx8, jsxs as jsxs4 } from "react/jsx-runtime";
 function isInternalPath(path) {
   if (!path) return false;
   if (path.startsWith("#")) return false;
@@ -2206,6 +2755,12 @@ function isInternalPath(path) {
   if (path.startsWith("mailto:") || path.startsWith("tel:")) return false;
   return path.startsWith("/");
 }
+function isExternalHref(url) {
+  if (!url) return false;
+  if (url.startsWith("//")) return true;
+  if (url.startsWith("http://") || url.startsWith("https://")) return true;
+  return false;
+}
 var FontSize2 = Extension2.create({
   name: "fontSize",
   addOptions() {
@@ -2288,12 +2843,12 @@ function discoverSectionsFromDOM() {
   });
   return sections;
 }
-function YaLink({ fieldId, href: defaultHref = "#", className, as: Component = "a", children, availablePages, onClick }) {
+function YaLink({ fieldId, href: defaultHref = "#", className, style, as: Component = "a", children, availablePages, onClick, target, rel }) {
   const { getValue, setValue, mode, saveToWorker, getPages } = useContentStore();
   const [, navigate] = useLocation();
   const pages = availablePages ?? getPages();
-  const [sections, setSections] = useState6([]);
-  const [sectionsExpanded, setSectionsExpanded] = useState6(false);
+  const [sections, setSections] = useState7([]);
+  const [sectionsExpanded, setSectionsExpanded] = useState7(false);
   const textFieldId = `${fieldId}.text`;
   const hrefFieldId = `${fieldId}.href`;
   const storeText = getValue(textFieldId);
@@ -2301,16 +2856,19 @@ function YaLink({ fieldId, href: defaultHref = "#", className, as: Component = "
   const isIconMode = children != null && typeof children !== "string";
   const text = storeText || (typeof children === "string" ? children : "");
   const href = storeHref || defaultHref;
-  const [editingMode, setEditingMode] = useState6(null);
-  const [showEditPopover, setShowEditPopover] = useState6(false);
-  const [originalText, setOriginalText] = useState6(text);
-  const [originalHref, setOriginalHref] = useState6(href);
-  const [currentHref, setCurrentHref] = useState6(href);
-  const [isExternalUrl, setIsExternalUrl] = useState6(false);
-  const [externalUrl, setExternalUrl] = useState6("");
-  const containerRef = useRef6(null);
-  const hrefPopoverRef = useRef6(null);
-  const hidePopoverTimeoutRef = useRef6(null);
+  const isExternal = isExternalHref(href);
+  const effectiveTarget = target ?? (isExternal ? "_blank" : void 0);
+  const effectiveRel = rel ?? (isExternal ? "noopener noreferrer" : void 0);
+  const [editingMode, setEditingMode] = useState7(null);
+  const [showEditPopover, setShowEditPopover] = useState7(false);
+  const [originalText, setOriginalText] = useState7(text);
+  const [originalHref, setOriginalHref] = useState7(href);
+  const [currentHref, setCurrentHref] = useState7(href);
+  const [isExternalUrl, setIsExternalUrl] = useState7(false);
+  const [externalUrl, setExternalUrl] = useState7("");
+  const containerRef = useRef8(null);
+  const hrefPopoverRef = useRef8(null);
+  const hidePopoverTimeoutRef = useRef8(null);
   const editor = useEditor2({
     extensions: [
       StarterKit2.configure({
@@ -2333,31 +2891,31 @@ function YaLink({ fieldId, href: defaultHref = "#", className, as: Component = "
       }
     }
   });
-  useEffect6(() => {
+  useEffect7(() => {
     if (editor && editingMode !== "text") {
       if (editor.getHTML() !== text) {
         editor.commands.setContent(text);
       }
     }
   }, [text, editor, editingMode]);
-  useEffect6(() => {
+  useEffect7(() => {
     if (editingMode !== "link") {
       setCurrentHref(href);
     }
   }, [href, editingMode]);
-  useEffect6(() => {
+  useEffect7(() => {
     return () => {
       if (hidePopoverTimeoutRef.current) {
         clearTimeout(hidePopoverTimeoutRef.current);
       }
     };
   }, []);
-  useEffect6(() => {
+  useEffect7(() => {
     if (editingMode !== "link") return;
     const handleClickOutside = (event) => {
-      const target = event.target;
-      if (hrefPopoverRef.current?.contains(target)) return;
-      if (containerRef.current?.contains(target)) return;
+      const target2 = event.target;
+      if (hrefPopoverRef.current?.contains(target2)) return;
+      if (containerRef.current?.contains(target2)) return;
       setCurrentHref(originalHref);
       setEditingMode(null);
       setIsExternalUrl(false);
@@ -2366,7 +2924,7 @@ function YaLink({ fieldId, href: defaultHref = "#", className, as: Component = "
     document.addEventListener("mousedown", handleClickOutside);
     return () => document.removeEventListener("mousedown", handleClickOutside);
   }, [editingMode, originalHref]);
-  const handleSaveText = useCallback6(() => {
+  const handleSaveText = useCallback8(() => {
     if (!editor) return;
     let html = editor.getHTML();
     html = html.replace(/<\/p><p>/g, "<br><br>").replace(/^<p>/, "").replace(/<\/p>$/, "");
@@ -2374,26 +2932,26 @@ function YaLink({ fieldId, href: defaultHref = "#", className, as: Component = "
     saveToWorker?.(textFieldId, html);
     setEditingMode(null);
   }, [editor, textFieldId, setValue, saveToWorker]);
-  const handleSaveLink = useCallback6(() => {
+  const handleSaveLink = useCallback8(() => {
     setValue(hrefFieldId, currentHref);
     saveToWorker?.(hrefFieldId, currentHref);
     setEditingMode(null);
     setIsExternalUrl(false);
     setExternalUrl("");
   }, [hrefFieldId, currentHref, setValue, saveToWorker]);
-  const handleCancelText = useCallback6(() => {
+  const handleCancelText = useCallback8(() => {
     if (editor) {
       editor.commands.setContent(originalText);
     }
     setEditingMode(null);
   }, [editor, originalText]);
-  const handleCancelLink = useCallback6(() => {
+  const handleCancelLink = useCallback8(() => {
     setCurrentHref(originalHref);
     setEditingMode(null);
     setIsExternalUrl(false);
     setExternalUrl("");
   }, [originalHref]);
-  const handleClick = useCallback6(
+  const handleClick = useCallback8(
     (e) => {
       const selectModeEnabled = window.__builderSelectModeEnabled;
       if (selectModeEnabled) {
@@ -2425,7 +2983,7 @@ function YaLink({ fieldId, href: defaultHref = "#", className, as: Component = "
     },
     [href, navigate, onClick]
   );
-  const handleMouseEnter = useCallback6(() => {
+  const handleMouseEnter = useCallback8(() => {
     if (hidePopoverTimeoutRef.current) {
       clearTimeout(hidePopoverTimeoutRef.current);
       hidePopoverTimeoutRef.current = null;
@@ -2434,19 +2992,19 @@ function YaLink({ fieldId, href: defaultHref = "#", className, as: Component = "
       setShowEditPopover(true);
     }
   }, [mode, editingMode]);
-  const handleMouseLeave = useCallback6(() => {
+  const handleMouseLeave = useCallback8(() => {
     hidePopoverTimeoutRef.current = window.setTimeout(() => {
       if (!editingMode) {
         setShowEditPopover(false);
       }
     }, 150);
   }, [editingMode]);
-  const handleFocus = useCallback6(() => {
+  const handleFocus = useCallback8(() => {
     if (mode === "inline-edit" && !editingMode) {
       setShowEditPopover(true);
     }
   }, [mode, editingMode]);
-  const startEditText = useCallback6(() => {
+  const startEditText = useCallback8(() => {
     setShowEditPopover(false);
     setEditingMode("text");
     setOriginalText(text);
@@ -2454,14 +3012,14 @@ function YaLink({ fieldId, href: defaultHref = "#", className, as: Component = "
       editor?.chain().focus().selectAll().run();
     }, 20);
   }, [text, editor]);
-  const startEditLink = useCallback6(() => {
+  const startEditLink = useCallback8(() => {
     setShowEditPopover(false);
     setEditingMode("link");
     setOriginalHref(href);
     setCurrentHref(href);
     setSections(discoverSectionsFromDOM());
   }, [href]);
-  const handleKeyDown = useCallback6(
+  const handleKeyDown = useCallback8(
     (event) => {
       if (editingMode !== "text") return;
       if (event.key === "Enter" && !event.shiftKey) {
@@ -2482,7 +3040,7 @@ function YaLink({ fieldId, href: defaultHref = "#", className, as: Component = "
     },
     [editingMode, handleSaveText, handleCancelText]
   );
-  const handleFontSizeChange = useCallback6(
+  const handleFontSizeChange = useCallback8(
     (e) => {
       if (!editor) return;
       const size = e.target.value;
@@ -2494,7 +3052,7 @@ function YaLink({ fieldId, href: defaultHref = "#", className, as: Component = "
     },
     [editor]
   );
-  const handleFontWeightChange = useCallback6(
+  const handleFontWeightChange = useCallback8(
     (e) => {
       if (!editor) return;
       const weight = e.target.value;
@@ -2506,11 +3064,11 @@ function YaLink({ fieldId, href: defaultHref = "#", className, as: Component = "
     },
     [editor]
   );
-  const handlePageSelect = useCallback6((path) => {
+  const handlePageSelect = useCallback8((path) => {
     setCurrentHref(path);
     setIsExternalUrl(false);
   }, []);
-  const handleExternalUrlApply = useCallback6(() => {
+  const handleExternalUrlApply = useCallback8(() => {
     if (externalUrl) {
       setCurrentHref(externalUrl);
     }
@@ -2526,25 +3084,29 @@ function YaLink({ fieldId, href: defaultHref = "#", className, as: Component = "
     return attrs.fontWeight || "";
   };
   if (mode === "read-only") {
-    const content = isIconMode ? children : /* @__PURE__ */ jsx7(SafeHtml, { content: text, mode });
+    const content = isIconMode ? children : /* @__PURE__ */ jsx8(SafeHtml, { content: text, mode });
     if (isInternalPath(href)) {
-      return /* @__PURE__ */ jsx7(
+      return /* @__PURE__ */ jsx8(
         WouterLink,
         {
           href,
           className,
+          style,
           "data-ya-restricted": "true",
           "data-field-id": fieldId,
           children: content
         }
       );
     }
-    return /* @__PURE__ */ jsx7(
+    return /* @__PURE__ */ jsx8(
       Component,
       {
         ref: containerRef,
         href: Component === "a" ? href : void 0,
+        target: Component === "a" ? effectiveTarget : void 0,
+        rel: Component === "a" ? effectiveRel : void 0,
         className,
+        style,
         "data-ya-restricted": "true",
         "data-field-id": fieldId,
         children: content
@@ -2552,12 +3114,15 @@ function YaLink({ fieldId, href: defaultHref = "#", className, as: Component = "
     );
   }
   return /* @__PURE__ */ jsxs4("span", { className: "ya-link-wrapper", children: [
-    /* @__PURE__ */ jsx7(
+    /* @__PURE__ */ jsx8(
       Component,
       {
         ref: containerRef,
         href: Component === "a" ? href : void 0,
+        target: Component === "a" ? effectiveTarget : void 0,
+        rel: Component === "a" ? effectiveRel : void 0,
         className: `${className || ""} ${editingMode ? "ya-link-editing" : "ya-link-editable"}`,
+        style,
         "data-ya-restricted": "true",
         "data-field-id": fieldId,
         onClick: handleClick,
@@ -2578,27 +3143,27 @@ function YaLink({ fieldId, href: defaultHref = "#", className, as: Component = "
                 options: { offset: 6, placement: "top" },
                 className: "ya-bubble-menu",
                 children: [
-                  /* @__PURE__ */ jsx7(
+                  /* @__PURE__ */ jsx8(
                     "button",
                     {
                       type: "button",
                       onClick: () => editor.chain().focus().toggleBold().run(),
                       className: `ya-bubble-btn ${editor.isActive("bold") ? "is-active" : ""}`,
                       title: "Bold",
-                      children: /* @__PURE__ */ jsx7("strong", { children: "B" })
+                      children: /* @__PURE__ */ jsx8("strong", { children: "B" })
                     }
                   ),
-                  /* @__PURE__ */ jsx7(
+                  /* @__PURE__ */ jsx8(
                     "button",
                     {
                       type: "button",
                       onClick: () => editor.chain().focus().toggleItalic().run(),
                       className: `ya-bubble-btn ${editor.isActive("italic") ? "is-active" : ""}`,
                       title: "Italic",
-                      children: /* @__PURE__ */ jsx7("em", { children: "I" })
+                      children: /* @__PURE__ */ jsx8("em", { children: "I" })
                     }
                   ),
-                  /* @__PURE__ */ jsx7("span", { className: "ya-bubble-divider" }),
+                  /* @__PURE__ */ jsx8("span", { className: "ya-bubble-divider" }),
                   /* @__PURE__ */ jsxs4(
                     "select",
                     {
@@ -2607,8 +3172,8 @@ function YaLink({ fieldId, href: defaultHref = "#", className, as: Component = "
                       className: "ya-bubble-select",
                       title: "Font Size",
                       children: [
-                        /* @__PURE__ */ jsx7("option", { value: "", children: "Size" }),
-                        Object.entries(SIZE_PRESETS2).map(([name, size]) => /* @__PURE__ */ jsx7("option", { value: size, children: name }, name))
+                        /* @__PURE__ */ jsx8("option", { value: "", children: "Size" }),
+                        Object.entries(SIZE_PRESETS2).map(([name, size]) => /* @__PURE__ */ jsx8("option", { value: size, children: name }, name))
                       ]
                     }
                   ),
@@ -2620,8 +3185,8 @@ function YaLink({ fieldId, href: defaultHref = "#", className, as: Component = "
                       className: "ya-bubble-select",
                       title: "Font Weight",
                       children: [
-                        /* @__PURE__ */ jsx7("option", { value: "", children: "Weight" }),
-                        Object.entries(WEIGHT_PRESETS2).map(([name, weight]) => /* @__PURE__ */ jsx7("option", { value: weight, children: name }, name))
+                        /* @__PURE__ */ jsx8("option", { value: "", children: "Weight" }),
+                        Object.entries(WEIGHT_PRESETS2).map(([name, weight]) => /* @__PURE__ */ jsx8("option", { value: weight, children: name }, name))
                       ]
                     }
                   )
@@ -2631,21 +3196,21 @@ function YaLink({ fieldId, href: defaultHref = "#", className, as: Component = "
             document.body
           ),
           editingMode === "text" ? /* @__PURE__ */ jsxs4(Fragment3, { children: [
-            /* @__PURE__ */ jsx7(EditorContent2, { editor }),
+            /* @__PURE__ */ jsx8(EditorContent2, { editor }),
             /* @__PURE__ */ jsxs4("div", { className: "ya-link-actions", children: [
-              /* @__PURE__ */ jsx7("button", { type: "button", onClick: handleCancelText, className: "ya-link-btn ya-link-btn-cancel", children: "Cancel" }),
-              /* @__PURE__ */ jsx7("button", { type: "button", onClick: handleSaveText, className: "ya-link-btn ya-link-btn-save", children: "Save" })
+              /* @__PURE__ */ jsx8("button", { type: "button", onClick: handleCancelText, className: "ya-link-btn ya-link-btn-cancel", children: "Cancel" }),
+              /* @__PURE__ */ jsx8("button", { type: "button", onClick: handleSaveText, className: "ya-link-btn ya-link-btn-save", children: "Save" })
             ] })
-          ] }) : /* @__PURE__ */ jsx7(SafeHtml, { content: text, mode })
-        ] }) : /* @__PURE__ */ jsx7(SafeHtml, { content: text, mode })
+          ] }) : /* @__PURE__ */ jsx8(SafeHtml, { content: text, mode })
+        ] }) : /* @__PURE__ */ jsx8(SafeHtml, { content: text, mode })
       }
     ),
     showEditPopover && !editingMode && mode === "inline-edit" && /* @__PURE__ */ jsxs4("div", { className: "ya-link-edit-popover", onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, children: [
-      !isIconMode && /* @__PURE__ */ jsx7("button", { type: "button", onClick: startEditText, children: "Edit text" }),
-      /* @__PURE__ */ jsx7("button", { type: "button", onClick: startEditLink, children: "Edit link" })
+      !isIconMode && /* @__PURE__ */ jsx8("button", { type: "button", onClick: startEditText, children: "Edit text" }),
+      /* @__PURE__ */ jsx8("button", { type: "button", onClick: startEditLink, children: "Edit link" })
     ] }),
     editingMode === "link" && /* @__PURE__ */ jsxs4("div", { ref: hrefPopoverRef, className: "ya-href-popover", children: [
-      /* @__PURE__ */ jsx7("div", { className: "ya-href-popover-header", children: "Link destination" }),
+      /* @__PURE__ */ jsx8("div", { className: "ya-href-popover-header", children: "Link destination" }),
       !isExternalUrl ? /* @__PURE__ */ jsxs4(Fragment3, { children: [
         sections.length > 0 && /* @__PURE__ */ jsxs4("div", { className: "ya-href-popover-section", children: [
           /* @__PURE__ */ jsxs4(
@@ -2655,14 +3220,14 @@ function YaLink({ fieldId, href: defaultHref = "#", className, as: Component = "
               className: "ya-href-popover-label ya-href-collapsible-header",
               onClick: () => setSectionsExpanded(!sectionsExpanded),
               children: [
-                /* @__PURE__ */ jsx7("span", { className: "ya-href-chevron", children: sectionsExpanded ? "\u25BC" : "\u25B6" }),
+                /* @__PURE__ */ jsx8("span", { className: "ya-href-chevron", children: sectionsExpanded ? "\u25BC" : "\u25B6" }),
                 "Scroll to section (",
                 sections.length,
                 ")"
               ]
             }
           ),
-          sectionsExpanded && /* @__PURE__ */ jsx7("div", { className: "ya-href-popover-pages", children: sections.map((section) => /* @__PURE__ */ jsxs4(
+          sectionsExpanded && /* @__PURE__ */ jsx8("div", { className: "ya-href-popover-pages", children: sections.map((section) => /* @__PURE__ */ jsxs4(
             "button",
             {
               type: "button",
@@ -2670,15 +3235,15 @@ function YaLink({ fieldId, href: defaultHref = "#", className, as: Component = "
               onClick: () => handlePageSelect(section.path),
               children: [
                 section.label,
-                /* @__PURE__ */ jsx7("span", { className: "ya-href-page-path", children: section.path })
+                /* @__PURE__ */ jsx8("span", { className: "ya-href-page-path", children: section.path })
               ]
             },
             section.path
           )) })
         ] }),
         pages.length > 0 && /* @__PURE__ */ jsxs4("div", { className: "ya-href-popover-section", children: [
-          /* @__PURE__ */ jsx7("label", { className: "ya-href-popover-label", children: "Navigate to page" }),
-          /* @__PURE__ */ jsx7("div", { className: "ya-href-popover-pages", children: pages.map((page) => /* @__PURE__ */ jsxs4(
+          /* @__PURE__ */ jsx8("label", { className: "ya-href-popover-label", children: "Navigate to page" }),
+          /* @__PURE__ */ jsx8("div", { className: "ya-href-popover-pages", children: pages.map((page) => /* @__PURE__ */ jsxs4(
             "button",
             {
               type: "button",
@@ -2686,13 +3251,13 @@ function YaLink({ fieldId, href: defaultHref = "#", className, as: Component = "
               onClick: () => handlePageSelect(page.path),
               children: [
                 page.label,
-                /* @__PURE__ */ jsx7("span", { className: "ya-href-page-path", children: page.path })
+                /* @__PURE__ */ jsx8("span", { className: "ya-href-page-path", children: page.path })
               ]
             },
             page.path
           )) })
         ] }),
-        /* @__PURE__ */ jsx7(
+        /* @__PURE__ */ jsx8(
           "button",
           {
             type: "button",
@@ -2706,8 +3271,8 @@ function YaLink({ fieldId, href: defaultHref = "#", className, as: Component = "
         )
       ] }) : /* @__PURE__ */ jsxs4(Fragment3, { children: [
         /* @__PURE__ */ jsxs4("div", { className: "ya-href-popover-section", children: [
-          /* @__PURE__ */ jsx7("label", { className: "ya-href-popover-label", children: "External URL" }),
-          /* @__PURE__ */ jsx7(
+          /* @__PURE__ */ jsx8("label", { className: "ya-href-popover-label", children: "External URL" }),
+          /* @__PURE__ */ jsx8(
             "input",
             {
               type: "url",
@@ -2719,21 +3284,21 @@ function YaLink({ fieldId, href: defaultHref = "#", className, as: Component = "
             }
           )
         ] }),
-        /* @__PURE__ */ jsx7("button", { type: "button", className: "ya-href-external-toggle", onClick: () => setIsExternalUrl(false), children: "\u2190 Back to pages" })
+        /* @__PURE__ */ jsx8("button", { type: "button", className: "ya-href-external-toggle", onClick: () => setIsExternalUrl(false), children: "\u2190 Back to pages" })
       ] }),
       /* @__PURE__ */ jsxs4("div", { className: "ya-href-popover-actions", children: [
-        /* @__PURE__ */ jsx7("button", { type: "button", className: "ya-link-btn ya-link-btn-cancel", onClick: handleCancelLink, children: "Cancel" }),
-        isExternalUrl ? /* @__PURE__ */ jsx7("button", { type: "button", className: "ya-link-btn ya-link-btn-save", onClick: handleExternalUrlApply, children: "Apply" }) : /* @__PURE__ */ jsx7("button", { type: "button", className: "ya-link-btn ya-link-btn-save", onClick: handleSaveLink, children: "Save" })
+        /* @__PURE__ */ jsx8("button", { type: "button", className: "ya-link-btn ya-link-btn-cancel", onClick: handleCancelLink, children: "Cancel" }),
+        isExternalUrl ? /* @__PURE__ */ jsx8("button", { type: "button", className: "ya-link-btn ya-link-btn-save", onClick: handleExternalUrlApply, children: "Apply" }) : /* @__PURE__ */ jsx8("button", { type: "button", className: "ya-link-btn ya-link-btn-save", onClick: handleSaveLink, children: "Save" })
       ] })
     ] })
   ] });
 }
 
 // src/components/StaticText.tsx
-import { jsx as jsx8 } from "react/jsx-runtime";
+import { jsx as jsx9 } from "react/jsx-runtime";
 function MpText({ fieldId, className, as: Component = "span", children }) {
   const content = getContent(fieldId) || (typeof children === "string" ? children : "");
-  return /* @__PURE__ */ jsx8(
+  return /* @__PURE__ */ jsx9(
     Component,
     {
       className,
@@ -2744,7 +3309,7 @@ function MpText({ fieldId, className, as: Component = "span", children }) {
 }
 
 // src/components/StaticImage.tsx
-import { jsx as jsx9 } from "react/jsx-runtime";
+import { jsx as jsx10 } from "react/jsx-runtime";
 function parseImageValue2(value) {
   if (!value) {
     return { src: "" };
@@ -2780,7 +3345,7 @@ function MpImage({
   const altText = imageData.alt || alt || fallbackAlt || "";
   const objectFit = imageData.objectFit || propObjectFit || "cover";
   const objectPosition = getObjectPosition2(imageData) || propObjectPosition || "50% 50%";
-  return /* @__PURE__ */ jsx9(
+  return /* @__PURE__ */ jsx10(
     "img",
     {
       src: resolveAssetUrl(src),
@@ -2798,7 +3363,7 @@ function MpImage({
 
 // src/components/MarkdownText.tsx
 import { Fragment as Fragment4 } from "react";
-import { jsx as jsx10 } from "react/jsx-runtime";
+import { jsx as jsx11 } from "react/jsx-runtime";
 function tokenize(text) {
   const tokens = [];
   let remaining = text;
@@ -2860,13 +3425,13 @@ function tokensToElements(tokens) {
   return tokens.map((token, index) => {
     switch (token.type) {
       case "text":
-        return /* @__PURE__ */ jsx10(Fragment4, { children: token.content }, index);
+        return /* @__PURE__ */ jsx11(Fragment4, { children: token.content }, index);
       case "bold":
-        return /* @__PURE__ */ jsx10("strong", { children: token.content }, index);
+        return /* @__PURE__ */ jsx11("strong", { children: token.content }, index);
       case "italic":
-        return /* @__PURE__ */ jsx10("em", { children: token.content }, index);
+        return /* @__PURE__ */ jsx11("em", { children: token.content }, index);
       case "link":
-        return /* @__PURE__ */ jsx10(
+        return /* @__PURE__ */ jsx11(
           "a",
           {
             href: token.url,
@@ -2878,7 +3443,7 @@ function tokensToElements(tokens) {
           index
         );
       case "newline":
-        return /* @__PURE__ */ jsx10("br", {}, index);
+        return /* @__PURE__ */ jsx11("br", {}, index);
       default:
         return null;
     }
@@ -2890,15 +3455,15 @@ function parseMarkdownToElements(content) {
 }
 function MarkdownText({ content, className }) {
   const elements = parseMarkdownToElements(content);
-  return /* @__PURE__ */ jsx10("span", { className, children: elements });
+  return /* @__PURE__ */ jsx11("span", { className, children: elements });
 }
 
 // src/router/Link.tsx
 import { Link as WouterLink2 } from "wouter";
-import { jsx as jsx11 } from "react/jsx-runtime";
+import { jsx as jsx12 } from "react/jsx-runtime";
 function Link2({ to, href, children, className, onClick, replace, ...props }) {
   const target = href ?? to ?? "/";
-  return /* @__PURE__ */ jsx11(WouterLink2, { href: target, className, onClick, replace, ...props, children });
+  return /* @__PURE__ */ jsx12(WouterLink2, { href: target, className, onClick, replace, ...props, children });
 }
 
 // src/router/useNavigate.ts
@@ -2917,7 +3482,7 @@ function useNavigate() {
 
 // src/router/Router.tsx
 import { Router as WouterRouter } from "wouter";
-import { jsx as jsx12 } from "react/jsx-runtime";
+import { jsx as jsx13 } from "react/jsx-runtime";
 function detectBasename() {
   if (typeof window === "undefined") return "";
   const sessionMatch = window.location.pathname.match(/^\/session\/[^/]+/);
@@ -2932,12 +3497,13 @@ function detectBasename() {
 }
 function Router({ children, base }) {
   const basename = base ?? detectBasename();
-  return /* @__PURE__ */ jsx12(WouterRouter, { base: basename, children });
+  return /* @__PURE__ */ jsx13(WouterRouter, { base: basename, children });
 }
 
 // src/router/index.ts
-import { Route, Switch } from "wouter";
+import { Route, Switch, useParams } from "wouter";
 export {
+  AIEditProvider,
   ContentStoreProvider,
   ContentStoreProvider2 as ContentStoreProviderProd,
   Link2 as Link,
@@ -2951,16 +3517,30 @@ export {
   YaImage,
   YaLink,
   YaText,
+  buildIntermediateText,
+  calculateAnimationTiming,
+  computeTextDiff,
+  containsHtml,
   contentRegistry,
   getAllContent,
   getContent,
+  getTextCursorPosition,
   hasContent,
+  imageCrossfadeStrategy,
   initBuilderSelection,
+  linkTransitionStrategy,
   registerContent,
   resolveAssetUrl,
   serializeImageValue,
   setAssetResolver,
+  stripHtml,
+  textTypingStrategy,
+  useAIEditAnimation,
+  useAIEditContext,
+  useAIEditContextOptional,
+  useAnimatedText,
   useContentStore,
   useContentStore2 as useContentStoreProd,
-  useNavigate
+  useNavigate,
+  useParams
 };