@yoamigo.com/core 0.4.3 → 0.4.4

package/dist/{content-helpers-kWphH5Tn.d.ts → content-helpers-DOUKazMz.d.ts}

@@ -150,6 +150,8 @@ interface YaLinkProps {
     /** Default href if not set in content store */
     href?: string;
     className?: string;
+    /** Classes to apply to the wrapper span (for display/width control) */
+    wrapperClassName?: string;
     /** Inline styles to apply to the link element */
     style?: React$1.CSSProperties;
     as?: 'a' | 'span';
@@ -175,7 +177,7 @@ declare module '@tiptap/core' {
         };
     }
 }
-declare function YaLink({ fieldId, href: defaultHref, className, style, as: Component, children, availablePages, onClick, target, rel }: YaLinkProps): react_jsx_runtime.JSX.Element;
+declare function YaLink({ fieldId, href: defaultHref, className, wrapperClassName, style, as: Component, children, availablePages, onClick, target, rel }: YaLinkProps): react_jsx_runtime.JSX.Element;
 
 interface BackgroundImageConfig {
     src: string;

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import React$1, { ReactNode } from 'react';
-export { D as BackgroundConfig, F as BackgroundImageConfig, C as ContentStoreProviderProd, q as EmbedFieldValue, r as EmbedType, I as ImageFieldValue, f as MarkdownText, g as MarkdownTextProps, O as OverlayConfig, P as PageInfo, c as StaticImage, d as StaticImageProps, M as StaticText, S as StaticTextProps, V as VideoFieldValue, y as YaContainer, B as YaContainerProps, m as YaEmbed, o as YaEmbedProps, Y as YaImage, h as YaImageProps, w as YaLink, x as YaLinkProps, j as YaVideo, l as YaVideoProps, b as background, e as embed, i as image, z as parseBackgroundConfig, p as parseEmbedUrl, A as serializeBackgroundConfig, n as serializeEmbedValue, s as serializeImageValue, k as serializeVideoValue, t as text, u as useContentStoreProd, v as video } from './content-helpers-kWphH5Tn.js';
+export { D as BackgroundConfig, F as BackgroundImageConfig, C as ContentStoreProviderProd, q as EmbedFieldValue, r as EmbedType, I as ImageFieldValue, f as MarkdownText, g as MarkdownTextProps, O as OverlayConfig, P as PageInfo, c as StaticImage, d as StaticImageProps, M as StaticText, S as StaticTextProps, V as VideoFieldValue, y as YaContainer, B as YaContainerProps, m as YaEmbed, o as YaEmbedProps, Y as YaImage, h as YaImageProps, w as YaLink, x as YaLinkProps, j as YaVideo, l as YaVideoProps, b as background, e as embed, i as image, z as parseBackgroundConfig, p as parseEmbedUrl, A as serializeBackgroundConfig, n as serializeEmbedValue, s as serializeImageValue, k as serializeVideoValue, t as text, u as useContentStoreProd, v as video } from './content-helpers-DOUKazMz.js';
 export { Link, LinkProps, NavigateFunction, Router, RouterProps, ScrollRestoration, useNavigate } from './router.js';
 export { Route, Switch, useParams } from 'wouter';
 export { A as AssetResolverFn, C as ContentRegistry, c as contentRegistry, a as getAllContent, g as getContent, h as hasContent, r as registerContent, b as resolveAssetUrl, s as setAssetResolver } from './asset-resolver-BnIvDkVv.js';

package/dist/index.js

@@ -5213,7 +5213,7 @@ function TwitterWidgetLoader() {
 }
 
 // src/components/YaLink.tsx
-import { useEffect as useEffect15, useRef as useRef16, useState as useState15, useCallback as useCallback17, useId } from "react";
+import { useEffect as useEffect15, useLayoutEffect as useLayoutEffect3, useRef as useRef16, useState as useState15, useCallback as useCallback17, useId } from "react";
 import { createPortal as createPortal6 } from "react-dom";
 import { useEditor as useEditor2, EditorContent as EditorContent2 } from "@tiptap/react";
 import { BubbleMenu } from "@tiptap/react/menus";
@@ -5366,7 +5366,7 @@ function useSafeTriangle(options = {}) {
 }
 
 // src/components/ya-link.css
-styleInject('.ya-link-wrapper {\n  position: relative;\n  display: inline;\n}\n.ya-link-editable {\n  cursor: pointer;\n  transition: outline 0.15s ease;\n}\n.ya-link-editable:hover {\n  outline: 2px dashed var(--color-primary, #D4A574);\n  outline-offset: 4px;\n  border-radius: 4px;\n}\nbody.builder-selector-active .ya-link-editable:hover {\n  outline: none;\n  cursor: inherit;\n}\n.ya-link-editing {\n  outline: 2px solid var(--color-primary, #D4A574);\n  outline-offset: 4px;\n  border-radius: 4px;\n  position: relative;\n}\n.ya-link-editing .ProseMirror {\n  color: #1a1a1a !important;\n  caret-color: #1a1a1a;\n}\n.ya-link-editing .ProseMirror p::selection,\n.ya-link-editing .ProseMirror::selection {\n  background-color: rgba(212, 165, 116, 0.4);\n  color: inherit;\n}\n.ya-link-editing .ProseMirror p::-moz-selection,\n.ya-link-editing .ProseMirror::-moz-selection {\n  background-color: rgba(212, 165, 116, 0.4);\n  color: inherit;\n}\n.ProseMirror-gapcursor {\n  display: none !important;\n}\n.ProseMirror .ProseMirror-dropcursor {\n  display: none !important;\n}\nbody.builder-selector-active .ya-link-editable:not(.ya-link-editing)::selection,\nbody.builder-selector-active .ya-link-editable:not(.ya-link-editing) *::selection {\n  color: inherit;\n}\nbody.builder-selector-active .ya-link-editable:not(.ya-link-editing)::-moz-selection,\nbody.builder-selector-active .ya-link-editable:not(.ya-link-editing) *::-moz-selection {\n  color: inherit;\n}\n.ya-link-actions {\n  display: flex;\n  gap: 8px;\n  z-index: 9999;\n  background: rgba(26, 26, 26, 0.95);\n  padding: 8px 10px;\n  border-radius: 8px;\n  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);\n  font-family:\n    system-ui,\n    -apple-system,\n    BlinkMacSystemFont,\n    "Segoe UI",\n    sans-serif;\n}\n.ya-link-btn {\n  padding: 6px 14px;\n  font-size: 12px;\n  font-weight: 500;\n  border-radius: 6px;\n  cursor: pointer;\n  transition: all 0.15s ease;\n  border: none;\n}\n.ya-link-btn-cancel {\n  background: #333333;\n  color: #ffffff;\n  border: 1px solid #555555;\n}\n.ya-link-btn-cancel:hover {\n  background: #444444;\n  color: #ffffff;\n  border-color: #666666;\n}\n.ya-link-btn-save {\n  background: #D4A574;\n  color: #1a1a1a;\n}\n.ya-link-btn-save:hover {\n  background: #c4956a;\n}\n.ya-href-popover {\n  position: absolute;\n  top: 100%;\n  left: 50%;\n  margin-top: 8px;\n  z-index: 100;\n  min-width: 280px;\n  max-width: 320px;\n  background: #1a1a1a;\n  border-radius: 12px;\n  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);\n  transform: translateX(-50%);\n  animation: ya-href-popover-fade-in 0.15s ease;\n  overflow: hidden;\n  font-family:\n    system-ui,\n    -apple-system,\n    BlinkMacSystemFont,\n    "Segoe UI",\n    sans-serif;\n}\n@keyframes ya-href-popover-fade-in {\n  from {\n    opacity: 0;\n    transform: translateX(-50%) translateY(-8px);\n  }\n  to {\n    opacity: 1;\n    transform: translateX(-50%) translateY(0);\n  }\n}\n.ya-href-popover::before {\n  content: "";\n  position: absolute;\n  top: -6px;\n  left: 50%;\n  transform: translateX(-50%);\n  border-left: 8px solid transparent;\n  border-right: 8px solid transparent;\n  border-bottom: 8px solid #1a1a1a;\n}\n.ya-href-popover-header {\n  padding: 12px 16px;\n  font-size: 13px;\n  font-weight: 600;\n  color: #ffffff;\n  border-bottom: 1px solid rgba(255, 255, 255, 0.1);\n}\n.ya-href-popover-section {\n  padding: 12px 16px;\n}\n.ya-href-popover-label {\n  display: block;\n  font-size: 11px;\n  font-weight: 500;\n  color: rgba(255, 255, 255, 0.6);\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n  margin-bottom: 8px;\n}\n.ya-href-collapsible-header {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  width: 100%;\n  padding: 0;\n  background: transparent;\n  border: none;\n  cursor: pointer;\n  transition: color 0.15s ease;\n}\n.ya-href-collapsible-header:hover {\n  color: rgba(255, 255, 255, 0.8);\n}\n.ya-href-chevron {\n  font-size: 8px;\n  color: rgba(255, 255, 255, 0.4);\n}\n.ya-href-popover-pages {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n  max-height: 200px;\n  overflow-y: auto;\n}\n.ya-href-page-btn {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  gap: 4px;\n  width: 100%;\n  padding: 10px 12px;\n  background: rgba(255, 255, 255, 0.05);\n  border: 1px solid transparent;\n  border-radius: 8px;\n  color: #e0e0e0;\n  font-size: 13px;\n  font-weight: 500;\n  text-align: left;\n  cursor: pointer;\n  transition: all 0.15s ease;\n}\n.ya-href-page-btn:hover {\n  background: rgba(255, 255, 255, 0.1);\n  border-color: rgba(255, 255, 255, 0.2);\n}\n.ya-href-page-btn.is-selected {\n  background: #D4A574;\n  color: #1a1a1a;\n}\n.ya-href-page-btn.is-selected .ya-href-page-path {\n  color: rgba(26, 26, 26, 0.6);\n}\n.ya-href-page-path {\n  font-size: 11px;\n  color: rgba(255, 255, 255, 0.4);\n  font-family: monospace;\n  word-break: break-all;\n}\n.ya-href-external-toggle {\n  display: block;\n  width: 100%;\n  padding: 10px 16px;\n  background: transparent;\n  border: none;\n  border-top: 1px solid rgba(255, 255, 255, 0.1);\n  color: #D4A574;\n  font-size: 12px;\n  font-weight: 500;\n  text-align: center;\n  cursor: pointer;\n  transition: background 0.15s ease;\n}\n.ya-href-external-toggle:hover {\n  background: rgba(255, 255, 255, 0.05);\n}\n.ya-href-url-input {\n  width: 100%;\n  padding: 10px 12px;\n  background: rgba(255, 255, 255, 0.05);\n  border: 1px solid rgba(255, 255, 255, 0.2);\n  border-radius: 8px;\n  color: #ffffff;\n  font-size: 13px;\n  outline: none;\n  transition: border-color 0.15s ease;\n}\n.ya-href-url-input::placeholder {\n  color: rgba(255, 255, 255, 0.4);\n}\n.ya-href-url-input:focus {\n  border-color: var(--color-primary, #D4A574);\n}\n.ya-href-popover-actions {\n  display: flex;\n  justify-content: flex-end;\n  gap: 8px;\n  padding: 12px 16px;\n  border-top: 1px solid rgba(255, 255, 255, 0.1);\n}\n.ya-href-popover--above {\n  top: auto;\n  bottom: 100%;\n  margin-top: 0;\n  margin-bottom: 8px;\n  animation: ya-href-popover-fade-in-above 0.15s ease;\n}\n@keyframes ya-href-popover-fade-in-above {\n  from {\n    opacity: 0;\n    transform: translateX(-50%) translateY(8px);\n  }\n  to {\n    opacity: 1;\n    transform: translateX(-50%) translateY(0);\n  }\n}\n.ya-href-popover--above::before {\n  top: auto;\n  bottom: -6px;\n  border-bottom: none;\n  border-top: 8px solid #1a1a1a;\n}\n.ya-link-edit-popover {\n  position: absolute;\n  top: 100%;\n  left: 50%;\n  margin-top: 8px;\n  z-index: 100;\n  background: #2a2a2a;\n  border-radius: 6px;\n  padding: 4px;\n  display: flex;\n  gap: 4px;\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);\n  transform: translateX(-50%);\n  animation: ya-edit-popover-fade-in 0.1s ease;\n  font-family:\n    system-ui,\n    -apple-system,\n    BlinkMacSystemFont,\n    "Segoe UI",\n    sans-serif;\n  white-space: nowrap;\n}\n@keyframes ya-edit-popover-fade-in {\n  from {\n    opacity: 0;\n    transform: translateX(-50%) translateY(-4px);\n  }\n  to {\n    opacity: 1;\n    transform: translateX(-50%) translateY(0);\n  }\n}\n.ya-link-edit-popover::before {\n  content: "";\n  position: absolute;\n  top: -5px;\n  left: 50%;\n  transform: translateX(-50%);\n  border-left: 6px solid transparent;\n  border-right: 6px solid transparent;\n  border-bottom: 6px solid #2a2a2a;\n}\n.ya-link-edit-popover button {\n  background: #3a3a3a;\n  border: none;\n  color: #fff;\n  padding: 6px 12px;\n  border-radius: 4px;\n  cursor: pointer;\n  font-size: 13px;\n  font-weight: 500;\n  transition: background 0.15s ease;\n}\n.ya-link-edit-popover button:hover {\n  background: #4a4a4a;\n}\n');
+styleInject('.ya-link-wrapper {\n  position: relative;\n  display: inline;\n}\n.ya-link-editable {\n  cursor: pointer;\n  transition: outline 0.15s ease;\n}\n.ya-link-editable:hover {\n  outline: 2px dashed var(--color-primary, #D4A574);\n  outline-offset: 4px;\n  border-radius: 4px;\n}\nbody.builder-selector-active .ya-link-editable:hover {\n  outline: none;\n  cursor: inherit;\n}\n.ya-link-editing {\n  outline: 2px solid var(--color-primary, #D4A574);\n  outline-offset: 4px;\n  border-radius: 4px;\n  position: relative;\n}\n.ya-link-editing .ProseMirror {\n  color: #1a1a1a !important;\n  caret-color: #1a1a1a;\n}\n.ya-link-editing .ProseMirror p::selection,\n.ya-link-editing .ProseMirror::selection {\n  background-color: rgba(212, 165, 116, 0.4);\n  color: inherit;\n}\n.ya-link-editing .ProseMirror p::-moz-selection,\n.ya-link-editing .ProseMirror::-moz-selection {\n  background-color: rgba(212, 165, 116, 0.4);\n  color: inherit;\n}\n.ProseMirror-gapcursor {\n  display: none !important;\n}\n.ProseMirror .ProseMirror-dropcursor {\n  display: none !important;\n}\nbody.builder-selector-active .ya-link-editable:not(.ya-link-editing)::selection,\nbody.builder-selector-active .ya-link-editable:not(.ya-link-editing) *::selection {\n  color: inherit;\n}\nbody.builder-selector-active .ya-link-editable:not(.ya-link-editing)::-moz-selection,\nbody.builder-selector-active .ya-link-editable:not(.ya-link-editing) *::-moz-selection {\n  color: inherit;\n}\n.ya-link-actions {\n  display: flex;\n  gap: 8px;\n  z-index: 9999;\n  background: rgba(26, 26, 26, 0.95);\n  padding: 8px 10px;\n  border-radius: 8px;\n  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);\n  font-family:\n    system-ui,\n    -apple-system,\n    BlinkMacSystemFont,\n    "Segoe UI",\n    sans-serif;\n}\n.ya-link-btn {\n  padding: 6px 14px;\n  font-size: 12px;\n  font-weight: 500;\n  border-radius: 6px;\n  cursor: pointer;\n  transition: all 0.15s ease;\n  border: none;\n}\n.ya-link-btn-cancel {\n  background: #333333;\n  color: #ffffff;\n  border: 1px solid #555555;\n}\n.ya-link-btn-cancel:hover {\n  background: #444444;\n  color: #ffffff;\n  border-color: #666666;\n}\n.ya-link-btn-save {\n  background: #D4A574;\n  color: #1a1a1a;\n}\n.ya-link-btn-save:hover {\n  background: #c4956a;\n}\n.ya-href-popover {\n  position: fixed;\n  z-index: 10000;\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  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  }\n  to {\n    opacity: 1;\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  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  }\n  to {\n    opacity: 1;\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: fixed;\n  z-index: 10000;\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  transition: opacity 100ms ease;\n  font-family:\n    system-ui,\n    -apple-system,\n    BlinkMacSystemFont,\n    "Segoe UI",\n    sans-serif;\n  white-space: nowrap;\n}\n.ya-link-edit-popover::before {\n  content: "";\n  position: absolute;\n  top: -5px;\n  left: 50%;\n  transform: translateX(-50%);\n  border-left: 6px solid transparent;\n  border-right: 6px solid transparent;\n  border-bottom: 6px solid #2a2a2a;\n}\n.ya-link-edit-popover button {\n  background: #3a3a3a;\n  border: none;\n  color: #fff;\n  padding: 6px 12px;\n  border-radius: 4px;\n  cursor: pointer;\n  font-size: 13px;\n  font-weight: 500;\n  transition: background 0.15s ease;\n}\n.ya-link-edit-popover button:hover {\n  background: #4a4a4a;\n}\n');
 
 // src/components/YaLink.tsx
 import { Fragment as Fragment4, jsx as jsx15, jsxs as jsxs9 } from "react/jsx-runtime";
@@ -5466,7 +5466,7 @@ function discoverSectionsFromDOM() {
   });
   return sections;
 }
-function YaLink({ fieldId, href: defaultHref = "#", className, style, as: Component = "a", children, availablePages, onClick, target, rel }) {
+function YaLink({ fieldId, href: defaultHref = "#", className, wrapperClassName, style, as: Component = "a", children, availablePages, onClick, target, rel }) {
   const { getValue, setValue, mode, saveToWorker, getPages } = useContentStore();
   const [, navigate] = useLocation();
   const pages = availablePages ?? getPages();
@@ -5488,10 +5488,13 @@ function YaLink({ fieldId, href: defaultHref = "#", className, style, as: Compon
   const [currentHref, setCurrentHref] = useState15(href);
   const [isExternalUrl, setIsExternalUrl] = useState15(false);
   const [externalUrl, setExternalUrl] = useState15("");
-  const [popoverPosition, setPopoverPosition] = useState15("below");
   const containerRef = useRef16(null);
   const hrefPopoverRef = useRef16(null);
   const [actionButtonsPos, setActionButtonsPos] = useState15(null);
+  const [editPopoverPos, setEditPopoverPos] = useState15(null);
+  const [editPopoverVisible, setEditPopoverVisible] = useState15(false);
+  const [editPopoverMounted, setEditPopoverMounted] = useState15(false);
+  const [hrefPopoverPos, setHrefPopoverPos] = useState15(null);
   const handleSaveTextRef = useRef16(() => {
   });
   const handleCancelTextRef = useRef16(() => {
@@ -5600,6 +5603,68 @@ function YaLink({ fieldId, href: defaultHref = "#", className, style, as: Compon
       window.removeEventListener("resize", updatePosition);
     };
   }, [editingMode]);
+  useEffect15(() => {
+    const shouldShow = showEditPopover && !editingMode && mode === "inline-edit";
+    if (shouldShow) {
+      setEditPopoverMounted(true);
+      requestAnimationFrame(() => {
+        setEditPopoverVisible(true);
+      });
+    } else {
+      setEditPopoverVisible(false);
+      const timer = setTimeout(() => {
+        setEditPopoverMounted(false);
+      }, 100);
+      return () => clearTimeout(timer);
+    }
+  }, [showEditPopover, editingMode, mode]);
+  useLayoutEffect3(() => {
+    if (!editPopoverMounted || !containerRef.current) {
+      setEditPopoverPos(null);
+      return;
+    }
+    const updatePosition = () => {
+      if (!containerRef.current) return;
+      const rect = containerRef.current.getBoundingClientRect();
+      setEditPopoverPos({
+        top: rect.bottom + 8,
+        left: rect.left + rect.width / 2
+      });
+    };
+    updatePosition();
+    window.addEventListener("scroll", updatePosition, true);
+    window.addEventListener("resize", updatePosition);
+    return () => {
+      window.removeEventListener("scroll", updatePosition, true);
+      window.removeEventListener("resize", updatePosition);
+    };
+  }, [editPopoverMounted]);
+  useLayoutEffect3(() => {
+    if (editingMode !== "link" || !containerRef.current) {
+      setHrefPopoverPos(null);
+      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;
+      const isAbove = spaceBelow < popoverHeight && spaceAbove > spaceBelow;
+      setHrefPopoverPos({
+        top: isAbove ? rect.top - 8 : rect.bottom + 8,
+        left: rect.left + rect.width / 2,
+        isAbove
+      });
+    };
+    updatePosition();
+    window.addEventListener("scroll", updatePosition, true);
+    window.addEventListener("resize", updatePosition);
+    return () => {
+      window.removeEventListener("scroll", updatePosition, true);
+      window.removeEventListener("resize", updatePosition);
+    };
+  }, [editingMode]);
   useEffect15(() => {
     if (editingMode !== "link") return;
     const handleClickOutside = (event) => {
@@ -5614,19 +5679,6 @@ function YaLink({ fieldId, href: defaultHref = "#", className, style, as: Compon
     document.addEventListener("mousedown", handleClickOutside);
     return () => document.removeEventListener("mousedown", handleClickOutside);
   }, [editingMode, originalHref]);
-  useEffect15(() => {
-    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 = useCallback17(() => {
     if (!editor) return;
     let html = editor.getHTML();
@@ -5710,13 +5762,6 @@ function YaLink({ fieldId, href: defaultHref = "#", className, style, as: Compon
     setOriginalHref(href);
     setCurrentHref(href);
     setSections(discoverSectionsFromDOM());
-    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 = useCallback17(
     (event) => {
@@ -5812,7 +5857,7 @@ function YaLink({ fieldId, href: defaultHref = "#", className, style, as: Compon
       }
     );
   }
-  return /* @__PURE__ */ jsxs9("span", { className: "ya-link-wrapper", children: [
+  return /* @__PURE__ */ jsxs9("span", { className: `ya-link-wrapper ${wrapperClassName || ""}`, children: [
     /* @__PURE__ */ jsx15(
       Component,
       {
@@ -5918,18 +5963,27 @@ function YaLink({ fieldId, href: defaultHref = "#", className, style, as: Compon
         ] }) : /* @__PURE__ */ jsx15(SafeHtml, { content: text2, mode })
       }
     ),
-    showEditPopover && !editingMode && mode === "inline-edit" && /* @__PURE__ */ jsxs9(
-      "div",
-      {
-        ref: editPopoverRef,
-        className: "ya-link-edit-popover",
-        onMouseEnter: safeTriangleHandlers.onMouseEnter,
-        onMouseLeave: safeTriangleHandlers.onMouseLeave,
-        children: [
-          /* @__PURE__ */ jsx15("button", { type: "button", onClick: startEditText, children: "Edit text" }),
-          /* @__PURE__ */ jsx15("button", { type: "button", onClick: startEditLink, children: "Edit link" })
-        ]
-      }
+    editPopoverMounted && editPopoverPos && createPortal6(
+      /* @__PURE__ */ jsxs9(
+        "div",
+        {
+          ref: editPopoverRef,
+          className: "ya-link-edit-popover",
+          style: {
+            top: editPopoverPos.top,
+            left: editPopoverPos.left,
+            transform: "translateX(-50%)",
+            opacity: editPopoverVisible ? 1 : 0
+          },
+          onMouseEnter: safeTriangleHandlers.onMouseEnter,
+          onMouseLeave: safeTriangleHandlers.onMouseLeave,
+          children: [
+            /* @__PURE__ */ jsx15("button", { type: "button", onClick: startEditText, children: "Edit text" }),
+            /* @__PURE__ */ jsx15("button", { type: "button", onClick: startEditLink, children: "Edit link" })
+          ]
+        }
+      ),
+      document.body
     ),
     /* @__PURE__ */ jsx15(
       SafeTriangleBelow,
@@ -5941,88 +5995,104 @@ function YaLink({ fieldId, href: defaultHref = "#", className, style, as: Compon
         onStayInside: triangleProps.onStayInside
       }
     ),
-    editingMode === "link" && /* @__PURE__ */ jsxs9("div", { ref: hrefPopoverRef, className: `ya-href-popover ${popoverPosition === "above" ? "ya-href-popover--above" : ""}`, children: [
-      /* @__PURE__ */ jsx15("div", { className: "ya-href-popover-header", children: "Link destination" }),
-      !isExternalUrl ? /* @__PURE__ */ jsxs9(Fragment4, { children: [
-        sections.length > 0 && /* @__PURE__ */ jsxs9("div", { className: "ya-href-popover-section", children: [
-          /* @__PURE__ */ jsxs9(
-            "button",
-            {
-              type: "button",
-              className: "ya-href-popover-label ya-href-collapsible-header",
-              onClick: () => setSectionsExpanded(!sectionsExpanded),
-              children: [
-                /* @__PURE__ */ jsx15("span", { className: "ya-href-chevron", children: sectionsExpanded ? "\u25BC" : "\u25B6" }),
-                "Scroll to section (",
-                sections.length,
-                ")"
-              ]
-            }
-          ),
-          sectionsExpanded && /* @__PURE__ */ jsx15("div", { className: "ya-href-popover-pages", children: sections.map((section) => /* @__PURE__ */ jsxs9(
-            "button",
-            {
-              type: "button",
-              className: `ya-href-page-btn ${currentHref === section.path ? "is-selected" : ""}`,
-              onClick: () => handlePageSelect(section.path),
-              children: [
-                section.label,
-                /* @__PURE__ */ jsx15("span", { className: "ya-href-page-path", children: section.path })
-              ]
-            },
-            section.path
-          )) })
-        ] }),
-        pages.length > 0 && /* @__PURE__ */ jsxs9("div", { className: "ya-href-popover-section", children: [
-          /* @__PURE__ */ jsx15("label", { className: "ya-href-popover-label", children: "Navigate to page" }),
-          /* @__PURE__ */ jsx15("div", { className: "ya-href-popover-pages", children: pages.map((page) => /* @__PURE__ */ jsxs9(
-            "button",
-            {
-              type: "button",
-              className: `ya-href-page-btn ${currentHref === page.path ? "is-selected" : ""}`,
-              onClick: () => handlePageSelect(page.path),
-              children: [
-                page.label,
-                /* @__PURE__ */ jsx15("span", { className: "ya-href-page-path", children: page.path })
-              ]
-            },
-            page.path
-          )) })
-        ] }),
-        /* @__PURE__ */ jsx15(
-          "button",
-          {
-            type: "button",
-            className: "ya-href-external-toggle",
-            onClick: () => {
-              setIsExternalUrl(true);
-              setExternalUrl(currentHref.startsWith("http") ? currentHref : "");
-            },
-            children: "Use external URL instead"
-          }
-        )
-      ] }) : /* @__PURE__ */ jsxs9(Fragment4, { children: [
-        /* @__PURE__ */ jsxs9("div", { className: "ya-href-popover-section", children: [
-          /* @__PURE__ */ jsx15("label", { className: "ya-href-popover-label", children: "External URL" }),
-          /* @__PURE__ */ jsx15(
-            "input",
-            {
-              type: "url",
-              className: "ya-href-url-input",
-              placeholder: "https://example.com",
-              value: externalUrl,
-              onChange: (e) => setExternalUrl(e.target.value),
-              autoFocus: true
-            }
-          )
-        ] }),
-        /* @__PURE__ */ jsx15("button", { type: "button", className: "ya-href-external-toggle", onClick: () => setIsExternalUrl(false), children: "\u2190 Back to pages" })
-      ] }),
-      /* @__PURE__ */ jsxs9("div", { className: "ya-href-popover-actions", children: [
-        /* @__PURE__ */ jsx15("button", { type: "button", className: "ya-link-btn ya-link-btn-cancel", onClick: handleCancelLink, children: "Cancel" }),
-        isExternalUrl ? /* @__PURE__ */ jsx15("button", { type: "button", className: "ya-link-btn ya-link-btn-save", onClick: handleExternalUrlApply, children: "Apply" }) : /* @__PURE__ */ jsx15("button", { type: "button", className: "ya-link-btn ya-link-btn-save", onClick: handleSaveLink, children: "Save" })
-      ] })
-    ] })
+    editingMode === "link" && hrefPopoverPos && createPortal6(
+      /* @__PURE__ */ jsxs9(
+        "div",
+        {
+          ref: hrefPopoverRef,
+          className: `ya-href-popover ${hrefPopoverPos.isAbove ? "ya-href-popover--above" : ""}`,
+          style: {
+            top: hrefPopoverPos.isAbove ? "auto" : hrefPopoverPos.top,
+            bottom: hrefPopoverPos.isAbove ? window.innerHeight - hrefPopoverPos.top : "auto",
+            left: hrefPopoverPos.left,
+            transform: "translateX(-50%)"
+          },
+          children: [
+            /* @__PURE__ */ jsx15("div", { className: "ya-href-popover-header", children: "Link destination" }),
+            !isExternalUrl ? /* @__PURE__ */ jsxs9(Fragment4, { children: [
+              sections.length > 0 && /* @__PURE__ */ jsxs9("div", { className: "ya-href-popover-section", children: [
+                /* @__PURE__ */ jsxs9(
+                  "button",
+                  {
+                    type: "button",
+                    className: "ya-href-popover-label ya-href-collapsible-header",
+                    onClick: () => setSectionsExpanded(!sectionsExpanded),
+                    children: [
+                      /* @__PURE__ */ jsx15("span", { className: "ya-href-chevron", children: sectionsExpanded ? "\u25BC" : "\u25B6" }),
+                      "Scroll to section (",
+                      sections.length,
+                      ")"
+                    ]
+                  }
+                ),
+                sectionsExpanded && /* @__PURE__ */ jsx15("div", { className: "ya-href-popover-pages", children: sections.map((section) => /* @__PURE__ */ jsxs9(
+                  "button",
+                  {
+                    type: "button",
+                    className: `ya-href-page-btn ${currentHref === section.path ? "is-selected" : ""}`,
+                    onClick: () => handlePageSelect(section.path),
+                    children: [
+                      section.label,
+                      /* @__PURE__ */ jsx15("span", { className: "ya-href-page-path", children: section.path })
+                    ]
+                  },
+                  section.path
+                )) })
+              ] }),
+              pages.length > 0 && /* @__PURE__ */ jsxs9("div", { className: "ya-href-popover-section", children: [
+                /* @__PURE__ */ jsx15("label", { className: "ya-href-popover-label", children: "Navigate to page" }),
+                /* @__PURE__ */ jsx15("div", { className: "ya-href-popover-pages", children: pages.map((page) => /* @__PURE__ */ jsxs9(
+                  "button",
+                  {
+                    type: "button",
+                    className: `ya-href-page-btn ${currentHref === page.path ? "is-selected" : ""}`,
+                    onClick: () => handlePageSelect(page.path),
+                    children: [
+                      page.label,
+                      /* @__PURE__ */ jsx15("span", { className: "ya-href-page-path", children: page.path })
+                    ]
+                  },
+                  page.path
+                )) })
+              ] }),
+              /* @__PURE__ */ jsx15(
+                "button",
+                {
+                  type: "button",
+                  className: "ya-href-external-toggle",
+                  onClick: () => {
+                    setIsExternalUrl(true);
+                    setExternalUrl(currentHref.startsWith("http") ? currentHref : "");
+                  },
+                  children: "Use external URL instead"
+                }
+              )
+            ] }) : /* @__PURE__ */ jsxs9(Fragment4, { children: [
+              /* @__PURE__ */ jsxs9("div", { className: "ya-href-popover-section", children: [
+                /* @__PURE__ */ jsx15("label", { className: "ya-href-popover-label", children: "External URL" }),
+                /* @__PURE__ */ jsx15(
+                  "input",
+                  {
+                    type: "url",
+                    className: "ya-href-url-input",
+                    placeholder: "https://example.com",
+                    value: externalUrl,
+                    onChange: (e) => setExternalUrl(e.target.value),
+                    autoFocus: true
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsx15("button", { type: "button", className: "ya-href-external-toggle", onClick: () => setIsExternalUrl(false), children: "\u2190 Back to pages" })
+            ] }),
+            /* @__PURE__ */ jsxs9("div", { className: "ya-href-popover-actions", children: [
+              /* @__PURE__ */ jsx15("button", { type: "button", className: "ya-link-btn ya-link-btn-cancel", onClick: handleCancelLink, children: "Cancel" }),
+              isExternalUrl ? /* @__PURE__ */ jsx15("button", { type: "button", className: "ya-link-btn ya-link-btn-save", onClick: handleExternalUrlApply, children: "Apply" }) : /* @__PURE__ */ jsx15("button", { type: "button", className: "ya-link-btn ya-link-btn-save", onClick: handleSaveLink, children: "Save" })
+            ] })
+          ]
+        }
+      ),
+      document.body
+    )
   ] });
 }
 
@@ -6031,7 +6101,7 @@ import { useCallback as useCallback19, useEffect as useEffect17, useRef as useRe
 import { createPortal as createPortal8 } from "react-dom";
 
 // src/components/Tooltip.tsx
-import { useState as useState16, useRef as useRef17, useEffect as useEffect16, useLayoutEffect as useLayoutEffect3, useCallback as useCallback18 } from "react";
+import { useState as useState16, useRef as useRef17, useEffect as useEffect16, useLayoutEffect as useLayoutEffect4, useCallback as useCallback18 } from "react";
 import { createPortal as createPortal7 } from "react-dom";
 
 // src/components/tooltip.css
@@ -6147,7 +6217,7 @@ function Tooltip({
     };
   }, []);
   const edgePadding = 12;
-  useLayoutEffect3(() => {
+  useLayoutEffect4(() => {
     if (!isVisible || !tooltipRef.current || !tooltipPosition || tooltipPosition.adjusted) {
       return;
     }

package/dist/prod.d.ts

@@ -1,4 +1,4 @@
-export { a as ContentStore, E as ContentStoreMode, C as ContentStoreProvider, f as MarkdownText, g as MarkdownTextProps, P as PageInfo, c as StaticImage, d as StaticImageProps, M as StaticText, S as StaticTextProps, c as YaImage, d as YaImageProps, M as YaText, S as YaTextProps, b as background, e as embed, i as image, p as parseEmbedUrl, t as text, u as useContentStore, v as video } from './content-helpers-kWphH5Tn.js';
+export { a as ContentStore, E as ContentStoreMode, C as ContentStoreProvider, f as MarkdownText, g as MarkdownTextProps, P as PageInfo, c as StaticImage, d as StaticImageProps, M as StaticText, S as StaticTextProps, c as YaImage, d as YaImageProps, M as YaText, S as YaTextProps, b as background, e as embed, i as image, p as parseEmbedUrl, t as text, u as useContentStore, v as video } from './content-helpers-DOUKazMz.js';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import React, { CSSProperties, ReactNode } from 'react';
 export { Link, LinkProps, NavigateFunction, Router, RouterProps, ScrollRestoration, useNavigate } from './router.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yoamigo.com/core",
-  "version": "0.4.3",
+  "version": "0.4.4",
   "description": "Core components, router, and utilities for YoAmigo templates",
   "type": "module",
   "license": "SEE LICENSE IN LICENSE",