@yoamigo.com/core 0.2.0 → 0.2.2

package/dist/{MarkdownText-BUTYfqXS.d.ts → MarkdownText-kV5IiAma.d.ts}

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import React$1, { ReactNode } from 'react';
+import React__default, { ReactNode } from 'react';
 
 type EditMode = 'read-only' | 'inline-edit';
 interface ContentStore {
@@ -28,9 +28,9 @@ interface YaLinkProps {
     href?: string;
     className?: string;
     /** Inline styles to apply to the link element */
-    style?: React$1.CSSProperties;
+    style?: React__default.CSSProperties;
     as?: 'a' | 'span';
-    children?: React$1.ReactNode;
+    children?: React__default.ReactNode;
     /** Available pages for href dropdown (injected by template) */
     availablePages?: PageInfo[];
     /** Optional click handler called after navigation */

package/dist/index.d.ts

@@ -1,6 +1,7 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import React, { ReactNode, CSSProperties } from 'react';
-export { C as ContentStoreProviderProd, d as MarkdownText, e as MarkdownTextProps, P as PageInfo, b as StaticImage, c as StaticImageProps, M as StaticText, S as StaticTextProps, Y as YaLink, f as YaLinkProps, u as useContentStoreProd } from './MarkdownText-BUTYfqXS.js';
+import * as React$1 from 'react';
+import React__default, { ReactNode, CSSProperties } from 'react';
+export { C as ContentStoreProviderProd, d as MarkdownText, e as MarkdownTextProps, P as PageInfo, b as StaticImage, c as StaticImageProps, M as StaticText, S as StaticTextProps, Y as YaLink, f as YaLinkProps, u as useContentStoreProd } from './MarkdownText-kV5IiAma.js';
 export { Link, LinkProps, NavigateFunction, Router, RouterProps, 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';
@@ -44,7 +45,7 @@ interface YaTextProps {
     className?: string;
     as?: YaTextElement;
     /** Optional fallback content (used if fieldId not in store) */
-    children?: React.ReactNode;
+    children?: React__default.ReactNode;
 }
 declare module '@tiptap/core' {
     interface Commands<ReturnType> {
@@ -125,7 +126,9 @@ interface YaVideoProps {
     objectFit?: 'cover' | 'contain' | 'fill';
     /** Loading strategy */
     loading?: 'lazy' | 'eager';
-    /** Fallback for backward compatibility */
+    /** Default video value (used when nothing in content store) */
+    defaultValue?: VideoFieldValue;
+    /** Fallback for backward compatibility (deprecated: use defaultValue) */
     fallbackSrc?: string;
     /** Fallback poster image */
     fallbackPoster?: string;
@@ -134,7 +137,7 @@ interface YaVideoProps {
  * Serialize video field value for storage
  */
 declare function serializeVideoValue(value: VideoFieldValue): string;
-declare function YaVideo({ fieldId, className, aspectRatio: propAspectRatio, objectFit: propObjectFit, loading, fallbackSrc, fallbackPoster, }: YaVideoProps): react_jsx_runtime.JSX.Element;
+declare function YaVideo({ fieldId, className, aspectRatio: propAspectRatio, objectFit: propObjectFit, loading, defaultValue, fallbackSrc, fallbackPoster, }: YaVideoProps): react_jsx_runtime.JSX.Element;
 
 interface BackgroundImageConfig {
     src: string;
@@ -191,6 +194,39 @@ interface SafeHtmlProps {
  */
 declare function SafeHtml({ content, className, mode }: SafeHtmlProps): react_jsx_runtime.JSX.Element;
 
+interface SafeTriangleBelowProps {
+    /** Ref to the trigger element */
+    triggerRef: React.RefObject<HTMLElement | null>;
+    /** Ref to the popover element */
+    popoverRef: React.RefObject<HTMLElement | null>;
+    /** Whether the popover is currently visible */
+    isVisible: boolean;
+    /** Called when mouse leaves the safe zone */
+    onLeave?: () => void;
+}
+/**
+ * SafeTriangleBelow creates a dynamic SVG triangle between the cursor and a popover
+ * that appears below the trigger, preventing the popover from closing when users
+ * move diagonally toward it.
+ *
+ * Based on the "Safe Triangle" pattern:
+ * @see https://www.smashingmagazine.com/2023/08/better-context-menus-safe-triangles/
+ *
+ * This variant is for popovers that appear BELOW the trigger (vs SafeTriangle which
+ * is for tooltips appearing to the RIGHT).
+ *
+ * Usage:
+ * ```tsx
+ * <SafeTriangleBelow
+ *   triggerRef={triggerRef}
+ *   popoverRef={popoverRef}
+ *   isVisible={isOpen}
+ *   onLeave={() => setIsOpen(false)}
+ * />
+ * ```
+ */
+declare function SafeTriangleBelow({ triggerRef, popoverRef, isVisible, onLeave, }: SafeTriangleBelowProps): React$1.ReactPortal | null;
+
 /**
  * Animation state for a single field
  */
@@ -580,4 +616,60 @@ interface AnimatedTextOptions {
  */
 declare function useAnimatedText(fieldId: string, content: string, options?: AnimatedTextOptions): AnimatedTextResult;
 
-export { type AIEditContextValue, AIEditProvider, type AnimatedTextOptions, type AnimatedTextResult, type AnimationConfig, type AnimationMetadata, type AnimationOptions, type AnimationPhase, type AnimationResult, type AnimationState, type AnimationStrategy, type BackgroundConfig, type BackgroundImageConfig, type ContentStoreContextType, type ContentStoreMode, ContentStoreProvider, type ImageFieldValue, type ImageValue, type LinkValue, type OverlayConfig, SafeHtml, type SafeHtmlProps, type TextAnimationMetadata, type TextDiff, type VideoFieldValue, YaContainer, type YaContainerProps, YaImage, type YaImageProps, YaText, type YaTextProps, YaVideo, type YaVideoProps, buildIntermediateText, calculateAnimationTiming, computeTextDiff, containsHtml, getTextCursorPosition, imageCrossfadeStrategy, linkTransitionStrategy, parseBackgroundConfig, serializeBackgroundConfig, serializeImageValue, serializeVideoValue, stripHtml, textTypingStrategy, useAIEditAnimation, useAIEditContext, useAIEditContextOptional, useAnimatedText, useContentStore };
+interface UseSafeTriangleOptions {
+    /** Delay before showing popover (ms) */
+    showDelay?: number;
+    /** Delay before hiding popover after mouse leaves (ms) */
+    hideDelay?: number;
+    /** Whether the hook is enabled (for edit mode check) */
+    enabled?: boolean;
+}
+interface UseSafeTriangleReturn<T extends HTMLElement, U extends HTMLElement> {
+    /** Ref to attach to the trigger element */
+    triggerRef: React.RefObject<T | null>;
+    /** Ref to attach to the popover element */
+    popoverRef: React.RefObject<U | null>;
+    /** Whether the popover should be visible */
+    isVisible: boolean;
+    /** Event handlers to spread on the trigger container */
+    handlers: {
+        onMouseEnter: () => void;
+        onMouseLeave: () => void;
+        onFocus: () => void;
+    };
+    /** Props to spread on the SafeTriangleBelow component */
+    triangleProps: {
+        triggerRef: React.RefObject<T | null>;
+        popoverRef: React.RefObject<U | null>;
+        isVisible: boolean;
+        onLeave: () => void;
+    };
+    /** Manually show the popover */
+    show: () => void;
+    /** Manually hide the popover */
+    hide: () => void;
+}
+/**
+ * Hook for managing safe triangle popover state.
+ * Handles show/hide delays and provides all necessary refs and handlers.
+ *
+ * @example
+ * ```tsx
+ * const { triggerRef, popoverRef, isVisible, handlers, triangleProps } = useSafeTriangle()
+ *
+ * return (
+ *   <div>
+ *     <a ref={triggerRef} {...handlers}>
+ *       Hover me
+ *     </a>
+ *     {isVisible && (
+ *       <div ref={popoverRef}>Popover content</div>
+ *     )}
+ *     <SafeTriangleBelow {...triangleProps} />
+ *   </div>
+ * )
+ * ```
+ */
+declare function useSafeTriangle<T extends HTMLElement = HTMLElement, U extends HTMLElement = HTMLDivElement>(options?: UseSafeTriangleOptions): UseSafeTriangleReturn<T, U>;
+
+export { type AIEditContextValue, AIEditProvider, type AnimatedTextOptions, type AnimatedTextResult, type AnimationConfig, type AnimationMetadata, type AnimationOptions, type AnimationPhase, type AnimationResult, type AnimationState, type AnimationStrategy, type BackgroundConfig, type BackgroundImageConfig, type ContentStoreContextType, type ContentStoreMode, ContentStoreProvider, type ImageFieldValue, type ImageValue, type LinkValue, type OverlayConfig, SafeHtml, type SafeHtmlProps, SafeTriangleBelow, type TextAnimationMetadata, type TextDiff, type VideoFieldValue, YaContainer, type YaContainerProps, YaImage, type YaImageProps, YaText, type YaTextProps, YaVideo, type YaVideoProps, buildIntermediateText, calculateAnimationTiming, computeTextDiff, containsHtml, getTextCursorPosition, imageCrossfadeStrategy, linkTransitionStrategy, parseBackgroundConfig, serializeBackgroundConfig, serializeImageValue, serializeVideoValue, stripHtml, textTypingStrategy, useAIEditAnimation, useAIEditContext, useAIEditContextOptional, useAnimatedText, useContentStore, useSafeTriangle };

package/dist/index.js

@@ -2917,6 +2917,7 @@ function YaVideo({
   aspectRatio: propAspectRatio,
   objectFit: propObjectFit,
   loading = "lazy",
+  defaultValue,
   fallbackSrc,
   fallbackPoster
 }) {
@@ -2928,7 +2929,8 @@ function YaVideo({
   const [isSmallVideo, setIsSmallVideo] = useState7(false);
   const [isInView, setIsInView] = useState7(loading === "eager");
   const rawValue = getValue(fieldId);
-  const videoData = parseVideoValue(rawValue);
+  const parsedValue = parseVideoValue(rawValue);
+  const videoData = parsedValue.src ? parsedValue : defaultValue || parsedValue;
   const src = videoData.src || fallbackSrc || "";
   const poster = videoData.poster || fallbackPoster || "";
   const objectFit = videoData.objectFit || propObjectFit || "cover";
@@ -3228,8 +3230,8 @@ function YaVideo({
 }
 
 // src/components/YaLink.tsx
-import { useEffect as useEffect8, useRef as useRef9, useState as useState8, useCallback as useCallback9 } from "react";
-import { createPortal as createPortal4 } from "react-dom";
+import { useEffect as useEffect10, useRef as useRef10, useState as useState10, useCallback as useCallback10 } from "react";
+import { createPortal as createPortal5 } from "react-dom";
 import { useEditor as useEditor2, EditorContent as EditorContent2 } from "@tiptap/react";
 import { BubbleMenu as BubbleMenu2 } from "@tiptap/react/menus";
 import StarterKit2 from "@tiptap/starter-kit";
@@ -3237,11 +3239,169 @@ import { TextStyle as TextStyle2 } from "@tiptap/extension-text-style";
 import { Extension as Extension2 } from "@tiptap/core";
 import { Link as WouterLink, useLocation } from "wouter";
 
+// src/components/SafeTriangleBelow.tsx
+import { useEffect as useEffect8, useState as useState8 } from "react";
+import { createPortal as createPortal4 } from "react-dom";
+import { jsx as jsx9 } from "react/jsx-runtime";
+function SafeTriangleBelow({
+  triggerRef,
+  popoverRef,
+  isVisible,
+  onLeave
+}) {
+  const [mousePos, setMousePos] = useState8({ x: 0, y: 0 });
+  const [mounted, setMounted] = useState8(false);
+  useEffect8(() => {
+    setMounted(true);
+  }, []);
+  useEffect8(() => {
+    if (!isVisible) return;
+    const handleMouseMove = (e) => {
+      setMousePos({ x: e.clientX, y: e.clientY });
+    };
+    document.addEventListener("mousemove", handleMouseMove);
+    return () => document.removeEventListener("mousemove", handleMouseMove);
+  }, [isVisible]);
+  if (!mounted || !isVisible || !triggerRef.current || !popoverRef.current) {
+    return null;
+  }
+  const popoverRect = popoverRef.current.getBoundingClientRect();
+  const triggerRect = triggerRef.current.getBoundingClientRect();
+  if (mousePos.y >= popoverRect.top) {
+    return null;
+  }
+  const leftBound = Math.min(triggerRect.left, popoverRect.left) - 20;
+  const rightBound = Math.max(triggerRect.right, popoverRect.right) + 20;
+  if (mousePos.x < leftBound || mousePos.x > rightBound) {
+    return null;
+  }
+  const svgTop = mousePos.y;
+  const svgHeight = Math.max(popoverRect.top - mousePos.y, 1);
+  const svgLeft = Math.min(mousePos.x, popoverRect.left);
+  const svgWidth = Math.max(popoverRect.right - svgLeft, mousePos.x - svgLeft, 1);
+  const cursorX = mousePos.x - svgLeft;
+  const popoverLeftX = popoverRect.left - svgLeft;
+  const popoverRightX = popoverRect.right - svgLeft;
+  const path = `M ${cursorX},0 L ${popoverLeftX},${svgHeight} L ${popoverRightX},${svgHeight} z`;
+  return createPortal4(
+    /* @__PURE__ */ jsx9(
+      "svg",
+      {
+        style: {
+          position: "fixed",
+          width: svgWidth,
+          height: svgHeight,
+          top: svgTop,
+          left: svgLeft,
+          pointerEvents: "none",
+          zIndex: 9998
+        },
+        children: /* @__PURE__ */ jsx9(
+          "path",
+          {
+            d: path,
+            fill: "transparent",
+            style: { pointerEvents: "auto" },
+            onMouseLeave: onLeave
+          }
+        )
+      }
+    ),
+    document.body
+  );
+}
+
+// src/hooks/useSafeTriangle.ts
+import { useState as useState9, useRef as useRef9, useCallback as useCallback9, useEffect as useEffect9 } from "react";
+function useSafeTriangle(options = {}) {
+  const { showDelay = 0, hideDelay = 150, enabled = true } = options;
+  const [isVisible, setIsVisible] = useState9(false);
+  const [isHovering, setIsHovering] = useState9(false);
+  const triggerRef = useRef9(null);
+  const popoverRef = useRef9(null);
+  const showTimeoutRef = useRef9(null);
+  const hideTimeoutRef = useRef9(null);
+  useEffect9(() => {
+    return () => {
+      if (showTimeoutRef.current) clearTimeout(showTimeoutRef.current);
+      if (hideTimeoutRef.current) clearTimeout(hideTimeoutRef.current);
+    };
+  }, []);
+  const show = useCallback9(() => {
+    if (!enabled) return;
+    if (hideTimeoutRef.current) {
+      clearTimeout(hideTimeoutRef.current);
+      hideTimeoutRef.current = null;
+    }
+    setIsVisible(true);
+  }, [enabled]);
+  const hide = useCallback9(() => {
+    if (showTimeoutRef.current) {
+      clearTimeout(showTimeoutRef.current);
+      showTimeoutRef.current = null;
+    }
+    setIsVisible(false);
+    setIsHovering(false);
+  }, []);
+  const handleMouseEnter = useCallback9(() => {
+    if (!enabled) return;
+    setIsHovering(true);
+    if (hideTimeoutRef.current) {
+      clearTimeout(hideTimeoutRef.current);
+      hideTimeoutRef.current = null;
+    }
+    if (showDelay > 0) {
+      showTimeoutRef.current = setTimeout(() => {
+        setIsVisible(true);
+      }, showDelay);
+    } else {
+      setIsVisible(true);
+    }
+  }, [showDelay, enabled]);
+  const handleMouseLeave = useCallback9(() => {
+    setIsHovering(false);
+    if (showTimeoutRef.current) {
+      clearTimeout(showTimeoutRef.current);
+      showTimeoutRef.current = null;
+    }
+    hideTimeoutRef.current = setTimeout(() => {
+      setIsVisible(false);
+    }, hideDelay);
+  }, [hideDelay]);
+  const handleFocus = useCallback9(() => {
+    if (!enabled) return;
+    setIsVisible(true);
+  }, [enabled]);
+  const handleTriangleLeave = useCallback9(() => {
+    if (!isHovering) {
+      setIsVisible(false);
+    }
+  }, [isHovering]);
+  return {
+    triggerRef,
+    popoverRef,
+    isVisible,
+    handlers: {
+      onMouseEnter: handleMouseEnter,
+      onMouseLeave: handleMouseLeave,
+      onFocus: handleFocus
+    },
+    triangleProps: {
+      triggerRef,
+      popoverRef,
+      isVisible,
+      onLeave: handleTriangleLeave
+    },
+    show,
+    hide
+  };
+}
+
 // src/components/ya-link.css
 styleInject('.ya-link-wrapper {\n  position: relative;\n  display: inline;\n}\n.ya-link-editable {\n  cursor: pointer;\n  transition: outline 0.15s ease;\n}\n.ya-link-editable:hover {\n  outline: 2px dashed var(--color-primary, #D4A574);\n  outline-offset: 4px;\n  border-radius: 4px;\n}\nbody.builder-selector-active .ya-link-editable:hover {\n  outline: none;\n  cursor: inherit;\n}\n.ya-link-editing {\n  outline: 2px solid var(--color-primary, #D4A574);\n  outline-offset: 4px;\n  border-radius: 4px;\n  position: relative;\n}\n.ya-link-actions {\n  display: flex;\n  gap: 8px;\n  position: absolute;\n  bottom: -60px;\n  right: 0;\n  z-index: 10;\n  background: rgba(26, 26, 26, 0.95);\n  padding: 8px 10px;\n  border-radius: 8px;\n  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);\n  font-family:\n    system-ui,\n    -apple-system,\n    BlinkMacSystemFont,\n    "Segoe UI",\n    sans-serif;\n}\n.ya-link-btn {\n  padding: 6px 14px;\n  font-size: 12px;\n  font-weight: 500;\n  border-radius: 6px;\n  cursor: pointer;\n  transition: all 0.15s ease;\n  border: none;\n}\n.ya-link-btn-cancel {\n  background: #333333;\n  color: #ffffff;\n  border: 1px solid #555555;\n}\n.ya-link-btn-cancel:hover {\n  background: #444444;\n  color: #ffffff;\n  border-color: #666666;\n}\n.ya-link-btn-save {\n  background: #D4A574;\n  color: #1a1a1a;\n}\n.ya-link-btn-save:hover {\n  background: #c4956a;\n}\n.ya-href-popover {\n  position: absolute;\n  top: 100%;\n  left: 50%;\n  margin-top: 8px;\n  z-index: 10;\n  min-width: 280px;\n  max-width: 320px;\n  background: #1a1a1a;\n  border-radius: 12px;\n  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);\n  transform: translateX(-50%);\n  animation: ya-href-popover-fade-in 0.15s ease;\n  overflow: hidden;\n  font-family:\n    system-ui,\n    -apple-system,\n    BlinkMacSystemFont,\n    "Segoe UI",\n    sans-serif;\n}\n@keyframes ya-href-popover-fade-in {\n  from {\n    opacity: 0;\n    transform: translateX(-50%) translateY(-8px);\n  }\n  to {\n    opacity: 1;\n    transform: translateX(-50%) translateY(0);\n  }\n}\n.ya-href-popover::before {\n  content: "";\n  position: absolute;\n  top: -6px;\n  left: 50%;\n  transform: translateX(-50%);\n  border-left: 8px solid transparent;\n  border-right: 8px solid transparent;\n  border-bottom: 8px solid #1a1a1a;\n}\n.ya-href-popover-header {\n  padding: 12px 16px;\n  font-size: 13px;\n  font-weight: 600;\n  color: #ffffff;\n  border-bottom: 1px solid rgba(255, 255, 255, 0.1);\n}\n.ya-href-popover-section {\n  padding: 12px 16px;\n}\n.ya-href-popover-label {\n  display: block;\n  font-size: 11px;\n  font-weight: 500;\n  color: rgba(255, 255, 255, 0.6);\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n  margin-bottom: 8px;\n}\n.ya-href-collapsible-header {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  width: 100%;\n  padding: 0;\n  background: transparent;\n  border: none;\n  cursor: pointer;\n  transition: color 0.15s ease;\n}\n.ya-href-collapsible-header:hover {\n  color: rgba(255, 255, 255, 0.8);\n}\n.ya-href-chevron {\n  font-size: 8px;\n  color: rgba(255, 255, 255, 0.4);\n}\n.ya-href-popover-pages {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n  max-height: 200px;\n  overflow-y: auto;\n}\n.ya-href-page-btn {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  gap: 4px;\n  width: 100%;\n  padding: 10px 12px;\n  background: rgba(255, 255, 255, 0.05);\n  border: 1px solid transparent;\n  border-radius: 8px;\n  color: #e0e0e0;\n  font-size: 13px;\n  font-weight: 500;\n  text-align: left;\n  cursor: pointer;\n  transition: all 0.15s ease;\n}\n.ya-href-page-btn:hover {\n  background: rgba(255, 255, 255, 0.1);\n  border-color: rgba(255, 255, 255, 0.2);\n}\n.ya-href-page-btn.is-selected {\n  background: #D4A574;\n  color: #1a1a1a;\n}\n.ya-href-page-btn.is-selected .ya-href-page-path {\n  color: rgba(26, 26, 26, 0.6);\n}\n.ya-href-page-path {\n  font-size: 11px;\n  color: rgba(255, 255, 255, 0.4);\n  font-family: monospace;\n  word-break: break-all;\n}\n.ya-href-external-toggle {\n  display: block;\n  width: 100%;\n  padding: 10px 16px;\n  background: transparent;\n  border: none;\n  border-top: 1px solid rgba(255, 255, 255, 0.1);\n  color: #D4A574;\n  font-size: 12px;\n  font-weight: 500;\n  text-align: center;\n  cursor: pointer;\n  transition: background 0.15s ease;\n}\n.ya-href-external-toggle:hover {\n  background: rgba(255, 255, 255, 0.05);\n}\n.ya-href-url-input {\n  width: 100%;\n  padding: 10px 12px;\n  background: rgba(255, 255, 255, 0.05);\n  border: 1px solid rgba(255, 255, 255, 0.2);\n  border-radius: 8px;\n  color: #ffffff;\n  font-size: 13px;\n  outline: none;\n  transition: border-color 0.15s ease;\n}\n.ya-href-url-input::placeholder {\n  color: rgba(255, 255, 255, 0.4);\n}\n.ya-href-url-input:focus {\n  border-color: var(--color-primary, #D4A574);\n}\n.ya-href-popover-actions {\n  display: flex;\n  justify-content: flex-end;\n  gap: 8px;\n  padding: 12px 16px;\n  border-top: 1px solid rgba(255, 255, 255, 0.1);\n}\n.ya-link-edit-popover {\n  position: absolute;\n  top: 100%;\n  left: 50%;\n  margin-top: 8px;\n  z-index: 10;\n  background: #2a2a2a;\n  border-radius: 6px;\n  padding: 4px;\n  display: flex;\n  gap: 4px;\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);\n  transform: translateX(-50%);\n  animation: ya-edit-popover-fade-in 0.1s ease;\n  font-family:\n    system-ui,\n    -apple-system,\n    BlinkMacSystemFont,\n    "Segoe UI",\n    sans-serif;\n  white-space: nowrap;\n}\n@keyframes ya-edit-popover-fade-in {\n  from {\n    opacity: 0;\n    transform: translateX(-50%) translateY(-4px);\n  }\n  to {\n    opacity: 1;\n    transform: translateX(-50%) translateY(0);\n  }\n}\n.ya-link-edit-popover::before {\n  content: "";\n  position: absolute;\n  top: -5px;\n  left: 50%;\n  transform: translateX(-50%);\n  border-left: 6px solid transparent;\n  border-right: 6px solid transparent;\n  border-bottom: 6px solid #2a2a2a;\n}\n.ya-link-edit-popover button {\n  background: #3a3a3a;\n  border: none;\n  color: #fff;\n  padding: 6px 12px;\n  border-radius: 4px;\n  cursor: pointer;\n  font-size: 13px;\n  font-weight: 500;\n  transition: background 0.15s ease;\n}\n.ya-link-edit-popover button:hover {\n  background: #4a4a4a;\n}\n');
 
 // src/components/YaLink.tsx
-import { Fragment as Fragment3, jsx as jsx9, jsxs as jsxs5 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx10, jsxs as jsxs5 } from "react/jsx-runtime";
 function isInternalPath(path) {
   if (!path) return false;
   if (path.startsWith("#")) return false;
@@ -3342,8 +3502,8 @@ function YaLink({ fieldId, href: defaultHref = "#", className, style, as: Compon
   const { getValue, setValue, mode, saveToWorker, getPages } = useContentStore();
   const [, navigate] = useLocation();
   const pages = availablePages ?? getPages();
-  const [sections, setSections] = useState8([]);
-  const [sectionsExpanded, setSectionsExpanded] = useState8(false);
+  const [sections, setSections] = useState10([]);
+  const [sectionsExpanded, setSectionsExpanded] = useState10(false);
   const textFieldId = `${fieldId}.text`;
   const hrefFieldId = `${fieldId}.href`;
   const storeText = getValue(textFieldId);
@@ -3354,16 +3514,25 @@ function YaLink({ fieldId, href: defaultHref = "#", className, style, as: Compon
   const isExternal = isExternalHref(href);
   const effectiveTarget = target ?? (isExternal ? "_blank" : void 0);
   const effectiveRel = rel ?? (isExternal ? "noopener noreferrer" : void 0);
-  const [editingMode, setEditingMode] = useState8(null);
-  const [showEditPopover, setShowEditPopover] = useState8(false);
-  const [originalText, setOriginalText] = useState8(text);
-  const [originalHref, setOriginalHref] = useState8(href);
-  const [currentHref, setCurrentHref] = useState8(href);
-  const [isExternalUrl, setIsExternalUrl] = useState8(false);
-  const [externalUrl, setExternalUrl] = useState8("");
-  const containerRef = useRef9(null);
-  const hrefPopoverRef = useRef9(null);
-  const hidePopoverTimeoutRef = useRef9(null);
+  const [editingMode, setEditingMode] = useState10(null);
+  const [originalText, setOriginalText] = useState10(text);
+  const [originalHref, setOriginalHref] = useState10(href);
+  const [currentHref, setCurrentHref] = useState10(href);
+  const [isExternalUrl, setIsExternalUrl] = useState10(false);
+  const [externalUrl, setExternalUrl] = useState10("");
+  const containerRef = useRef10(null);
+  const hrefPopoverRef = useRef10(null);
+  const {
+    popoverRef: editPopoverRef,
+    isVisible: showEditPopover,
+    handlers: safeTriangleHandlers,
+    triangleProps,
+    hide: hideEditPopover
+  } = useSafeTriangle({
+    enabled: mode === "inline-edit" && !editingMode,
+    hideDelay: 150
+  });
+  const triggerRef = containerRef;
   const editor = useEditor2({
     extensions: [
       StarterKit2.configure({
@@ -3386,26 +3555,19 @@ function YaLink({ fieldId, href: defaultHref = "#", className, style, as: Compon
       }
     }
   });
-  useEffect8(() => {
+  useEffect10(() => {
     if (editor && editingMode !== "text") {
       if (editor.getHTML() !== text) {
         editor.commands.setContent(text);
       }
     }
   }, [text, editor, editingMode]);
-  useEffect8(() => {
+  useEffect10(() => {
     if (editingMode !== "link") {
       setCurrentHref(href);
     }
   }, [href, editingMode]);
-  useEffect8(() => {
-    return () => {
-      if (hidePopoverTimeoutRef.current) {
-        clearTimeout(hidePopoverTimeoutRef.current);
-      }
-    };
-  }, []);
-  useEffect8(() => {
+  useEffect10(() => {
     if (editingMode !== "link") return;
     const handleClickOutside = (event) => {
       const target2 = event.target;
@@ -3419,7 +3581,7 @@ function YaLink({ fieldId, href: defaultHref = "#", className, style, as: Compon
     document.addEventListener("mousedown", handleClickOutside);
     return () => document.removeEventListener("mousedown", handleClickOutside);
   }, [editingMode, originalHref]);
-  const handleSaveText = useCallback9(() => {
+  const handleSaveText = useCallback10(() => {
     if (!editor) return;
     let html = editor.getHTML();
     html = html.replace(/<\/p><p>/g, "<br><br>").replace(/^<p>/, "").replace(/<\/p>$/, "");
@@ -3427,26 +3589,26 @@ function YaLink({ fieldId, href: defaultHref = "#", className, style, as: Compon
     saveToWorker?.(textFieldId, html);
     setEditingMode(null);
   }, [editor, textFieldId, setValue, saveToWorker]);
-  const handleSaveLink = useCallback9(() => {
+  const handleSaveLink = useCallback10(() => {
     setValue(hrefFieldId, currentHref);
     saveToWorker?.(hrefFieldId, currentHref);
     setEditingMode(null);
     setIsExternalUrl(false);
     setExternalUrl("");
   }, [hrefFieldId, currentHref, setValue, saveToWorker]);
-  const handleCancelText = useCallback9(() => {
+  const handleCancelText = useCallback10(() => {
     if (editor) {
       editor.commands.setContent(originalText);
     }
     setEditingMode(null);
   }, [editor, originalText]);
-  const handleCancelLink = useCallback9(() => {
+  const handleCancelLink = useCallback10(() => {
     setCurrentHref(originalHref);
     setEditingMode(null);
     setIsExternalUrl(false);
     setExternalUrl("");
   }, [originalHref]);
-  const handleClick = useCallback9(
+  const handleClick = useCallback10(
     (e) => {
       const selectModeEnabled = window.__builderSelectModeEnabled;
       if (selectModeEnabled) {
@@ -3478,43 +3640,22 @@ function YaLink({ fieldId, href: defaultHref = "#", className, style, as: Compon
     },
     [href, navigate, onClick]
   );
-  const handleMouseEnter = useCallback9(() => {
-    if (hidePopoverTimeoutRef.current) {
-      clearTimeout(hidePopoverTimeoutRef.current);
-      hidePopoverTimeoutRef.current = null;
-    }
-    if (mode === "inline-edit" && !editingMode) {
-      setShowEditPopover(true);
-    }
-  }, [mode, editingMode]);
-  const handleMouseLeave = useCallback9(() => {
-    hidePopoverTimeoutRef.current = window.setTimeout(() => {
-      if (!editingMode) {
-        setShowEditPopover(false);
-      }
-    }, 150);
-  }, [editingMode]);
-  const handleFocus = useCallback9(() => {
-    if (mode === "inline-edit" && !editingMode) {
-      setShowEditPopover(true);
-    }
-  }, [mode, editingMode]);
-  const startEditText = useCallback9(() => {
-    setShowEditPopover(false);
+  const startEditText = useCallback10(() => {
+    hideEditPopover();
     setEditingMode("text");
     setOriginalText(text);
     setTimeout(() => {
       editor?.chain().focus().selectAll().run();
     }, 20);
-  }, [text, editor]);
-  const startEditLink = useCallback9(() => {
-    setShowEditPopover(false);
+  }, [text, editor, hideEditPopover]);
+  const startEditLink = useCallback10(() => {
+    hideEditPopover();
     setEditingMode("link");
     setOriginalHref(href);
     setCurrentHref(href);
     setSections(discoverSectionsFromDOM());
-  }, [href]);
-  const handleKeyDown = useCallback9(
+  }, [href, hideEditPopover]);
+  const handleKeyDown = useCallback10(
     (event) => {
       if (editingMode !== "text") return;
       if (event.key === "Enter" && !event.shiftKey) {
@@ -3535,7 +3676,7 @@ function YaLink({ fieldId, href: defaultHref = "#", className, style, as: Compon
     },
     [editingMode, handleSaveText, handleCancelText]
   );
-  const handleFontSizeChange = useCallback9(
+  const handleFontSizeChange = useCallback10(
     (e) => {
       if (!editor) return;
       const size = e.target.value;
@@ -3547,7 +3688,7 @@ function YaLink({ fieldId, href: defaultHref = "#", className, style, as: Compon
     },
     [editor]
   );
-  const handleFontWeightChange = useCallback9(
+  const handleFontWeightChange = useCallback10(
     (e) => {
       if (!editor) return;
       const weight = e.target.value;
@@ -3559,11 +3700,11 @@ function YaLink({ fieldId, href: defaultHref = "#", className, style, as: Compon
     },
     [editor]
   );
-  const handlePageSelect = useCallback9((path) => {
+  const handlePageSelect = useCallback10((path) => {
     setCurrentHref(path);
     setIsExternalUrl(false);
   }, []);
-  const handleExternalUrlApply = useCallback9(() => {
+  const handleExternalUrlApply = useCallback10(() => {
     if (externalUrl) {
       setCurrentHref(externalUrl);
     }
@@ -3579,9 +3720,9 @@ function YaLink({ fieldId, href: defaultHref = "#", className, style, as: Compon
     return attrs.fontWeight || "";
   };
   if (mode === "read-only") {
-    const content = isIconMode ? children : /* @__PURE__ */ jsx9(SafeHtml, { content: text, mode });
+    const content = isIconMode ? children : /* @__PURE__ */ jsx10(SafeHtml, { content: text, mode });
     if (isInternalPath(href)) {
-      return /* @__PURE__ */ jsx9(
+      return /* @__PURE__ */ jsx10(
         WouterLink,
         {
           href,
@@ -3593,7 +3734,7 @@ function YaLink({ fieldId, href: defaultHref = "#", className, style, as: Compon
         }
       );
     }
-    return /* @__PURE__ */ jsx9(
+    return /* @__PURE__ */ jsx10(
       Component,
       {
         ref: containerRef,
@@ -3609,7 +3750,7 @@ function YaLink({ fieldId, href: defaultHref = "#", className, style, as: Compon
     );
   }
   return /* @__PURE__ */ jsxs5("span", { className: "ya-link-wrapper", children: [
-    /* @__PURE__ */ jsx9(
+    /* @__PURE__ */ jsx10(
       Component,
       {
         ref: containerRef,
@@ -3621,15 +3762,15 @@ function YaLink({ fieldId, href: defaultHref = "#", className, style, as: Compon
         "data-ya-restricted": "true",
         "data-field-id": fieldId,
         onClick: handleClick,
-        onMouseEnter: handleMouseEnter,
-        onMouseLeave: handleMouseLeave,
-        onFocus: handleFocus,
+        onMouseEnter: safeTriangleHandlers.onMouseEnter,
+        onMouseLeave: safeTriangleHandlers.onMouseLeave,
+        onFocus: safeTriangleHandlers.onFocus,
         onKeyDown: handleKeyDown,
         children: isIconMode ? (
           // Icon mode: render children directly, no text editing
           children
         ) : editor ? /* @__PURE__ */ jsxs5(Fragment3, { children: [
-          createPortal4(
+          createPortal5(
             /* @__PURE__ */ jsxs5(
               BubbleMenu2,
               {
@@ -3638,27 +3779,27 @@ function YaLink({ fieldId, href: defaultHref = "#", className, style, as: Compon
                 options: { offset: 6, placement: "top" },
                 className: "ya-bubble-menu",
                 children: [
-                  /* @__PURE__ */ jsx9(
+                  /* @__PURE__ */ jsx10(
                     "button",
                     {
                       type: "button",
                       onClick: () => editor.chain().focus().toggleBold().run(),
                       className: `ya-bubble-btn ${editor.isActive("bold") ? "is-active" : ""}`,
                       title: "Bold",
-                      children: /* @__PURE__ */ jsx9("strong", { children: "B" })
+                      children: /* @__PURE__ */ jsx10("strong", { children: "B" })
                     }
                   ),
-                  /* @__PURE__ */ jsx9(
+                  /* @__PURE__ */ jsx10(
                     "button",
                     {
                       type: "button",
                       onClick: () => editor.chain().focus().toggleItalic().run(),
                       className: `ya-bubble-btn ${editor.isActive("italic") ? "is-active" : ""}`,
                       title: "Italic",
-                      children: /* @__PURE__ */ jsx9("em", { children: "I" })
+                      children: /* @__PURE__ */ jsx10("em", { children: "I" })
                     }
                   ),
-                  /* @__PURE__ */ jsx9("span", { className: "ya-bubble-divider" }),
+                  /* @__PURE__ */ jsx10("span", { className: "ya-bubble-divider" }),
                   /* @__PURE__ */ jsxs5(
                     "select",
                     {
@@ -3667,8 +3808,8 @@ function YaLink({ fieldId, href: defaultHref = "#", className, style, as: Compon
                       className: "ya-bubble-select",
                       title: "Font Size",
                       children: [
-                        /* @__PURE__ */ jsx9("option", { value: "", children: "Size" }),
-                        Object.entries(SIZE_PRESETS2).map(([name, size]) => /* @__PURE__ */ jsx9("option", { value: size, children: name }, name))
+                        /* @__PURE__ */ jsx10("option", { value: "", children: "Size" }),
+                        Object.entries(SIZE_PRESETS2).map(([name, size]) => /* @__PURE__ */ jsx10("option", { value: size, children: name }, name))
                       ]
                     }
                   ),
@@ -3680,8 +3821,8 @@ function YaLink({ fieldId, href: defaultHref = "#", className, style, as: Compon
                       className: "ya-bubble-select",
                       title: "Font Weight",
                       children: [
-                        /* @__PURE__ */ jsx9("option", { value: "", children: "Weight" }),
-                        Object.entries(WEIGHT_PRESETS2).map(([name, weight]) => /* @__PURE__ */ jsx9("option", { value: weight, children: name }, name))
+                        /* @__PURE__ */ jsx10("option", { value: "", children: "Weight" }),
+                        Object.entries(WEIGHT_PRESETS2).map(([name, weight]) => /* @__PURE__ */ jsx10("option", { value: weight, children: name }, name))
                       ]
                     }
                   )
@@ -3691,21 +3832,39 @@ function YaLink({ fieldId, href: defaultHref = "#", className, style, as: Compon
             document.body
           ),
           editingMode === "text" ? /* @__PURE__ */ jsxs5(Fragment3, { children: [
-            /* @__PURE__ */ jsx9(EditorContent2, { editor }),
+            /* @__PURE__ */ jsx10(EditorContent2, { editor }),
             /* @__PURE__ */ jsxs5("div", { className: "ya-link-actions", children: [
-              /* @__PURE__ */ jsx9("button", { type: "button", onClick: handleCancelText, className: "ya-link-btn ya-link-btn-cancel", children: "Cancel" }),
-              /* @__PURE__ */ jsx9("button", { type: "button", onClick: handleSaveText, className: "ya-link-btn ya-link-btn-save", children: "Save" })
+              /* @__PURE__ */ jsx10("button", { type: "button", onClick: handleCancelText, className: "ya-link-btn ya-link-btn-cancel", children: "Cancel" }),
+              /* @__PURE__ */ jsx10("button", { type: "button", onClick: handleSaveText, className: "ya-link-btn ya-link-btn-save", children: "Save" })
             ] })
-          ] }) : /* @__PURE__ */ jsx9(SafeHtml, { content: text, mode })
-        ] }) : /* @__PURE__ */ jsx9(SafeHtml, { content: text, mode })
+          ] }) : /* @__PURE__ */ jsx10(SafeHtml, { content: text, mode })
+        ] }) : /* @__PURE__ */ jsx10(SafeHtml, { content: text, mode })
+      }
+    ),
+    showEditPopover && !editingMode && mode === "inline-edit" && /* @__PURE__ */ jsxs5(
+      "div",
+      {
+        ref: editPopoverRef,
+        className: "ya-link-edit-popover",
+        onMouseEnter: safeTriangleHandlers.onMouseEnter,
+        onMouseLeave: safeTriangleHandlers.onMouseLeave,
+        children: [
+          !isIconMode && /* @__PURE__ */ jsx10("button", { type: "button", onClick: startEditText, children: "Edit text" }),
+          /* @__PURE__ */ jsx10("button", { type: "button", onClick: startEditLink, children: "Edit link" })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx10(
+      SafeTriangleBelow,
+      {
+        triggerRef,
+        popoverRef: editPopoverRef,
+        isVisible: showEditPopover && !editingMode && mode === "inline-edit",
+        onLeave: triangleProps.onLeave
       }
     ),
-    showEditPopover && !editingMode && mode === "inline-edit" && /* @__PURE__ */ jsxs5("div", { className: "ya-link-edit-popover", onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, children: [
-      !isIconMode && /* @__PURE__ */ jsx9("button", { type: "button", onClick: startEditText, children: "Edit text" }),
-      /* @__PURE__ */ jsx9("button", { type: "button", onClick: startEditLink, children: "Edit link" })
-    ] }),
     editingMode === "link" && /* @__PURE__ */ jsxs5("div", { ref: hrefPopoverRef, className: "ya-href-popover", children: [
-      /* @__PURE__ */ jsx9("div", { className: "ya-href-popover-header", children: "Link destination" }),
+      /* @__PURE__ */ jsx10("div", { className: "ya-href-popover-header", children: "Link destination" }),
       !isExternalUrl ? /* @__PURE__ */ jsxs5(Fragment3, { children: [
         sections.length > 0 && /* @__PURE__ */ jsxs5("div", { className: "ya-href-popover-section", children: [
           /* @__PURE__ */ jsxs5(
@@ -3715,14 +3874,14 @@ function YaLink({ fieldId, href: defaultHref = "#", className, style, as: Compon
               className: "ya-href-popover-label ya-href-collapsible-header",
               onClick: () => setSectionsExpanded(!sectionsExpanded),
               children: [
-                /* @__PURE__ */ jsx9("span", { className: "ya-href-chevron", children: sectionsExpanded ? "\u25BC" : "\u25B6" }),
+                /* @__PURE__ */ jsx10("span", { className: "ya-href-chevron", children: sectionsExpanded ? "\u25BC" : "\u25B6" }),
                 "Scroll to section (",
                 sections.length,
                 ")"
               ]
             }
           ),
-          sectionsExpanded && /* @__PURE__ */ jsx9("div", { className: "ya-href-popover-pages", children: sections.map((section) => /* @__PURE__ */ jsxs5(
+          sectionsExpanded && /* @__PURE__ */ jsx10("div", { className: "ya-href-popover-pages", children: sections.map((section) => /* @__PURE__ */ jsxs5(
             "button",
             {
               type: "button",
@@ -3730,15 +3889,15 @@ function YaLink({ fieldId, href: defaultHref = "#", className, style, as: Compon
               onClick: () => handlePageSelect(section.path),
               children: [
                 section.label,
-                /* @__PURE__ */ jsx9("span", { className: "ya-href-page-path", children: section.path })
+                /* @__PURE__ */ jsx10("span", { className: "ya-href-page-path", children: section.path })
               ]
             },
             section.path
           )) })
         ] }),
         pages.length > 0 && /* @__PURE__ */ jsxs5("div", { className: "ya-href-popover-section", children: [
-          /* @__PURE__ */ jsx9("label", { className: "ya-href-popover-label", children: "Navigate to page" }),
-          /* @__PURE__ */ jsx9("div", { className: "ya-href-popover-pages", children: pages.map((page) => /* @__PURE__ */ jsxs5(
+          /* @__PURE__ */ jsx10("label", { className: "ya-href-popover-label", children: "Navigate to page" }),
+          /* @__PURE__ */ jsx10("div", { className: "ya-href-popover-pages", children: pages.map((page) => /* @__PURE__ */ jsxs5(
             "button",
             {
               type: "button",
@@ -3746,13 +3905,13 @@ function YaLink({ fieldId, href: defaultHref = "#", className, style, as: Compon
               onClick: () => handlePageSelect(page.path),
               children: [
                 page.label,
-                /* @__PURE__ */ jsx9("span", { className: "ya-href-page-path", children: page.path })
+                /* @__PURE__ */ jsx10("span", { className: "ya-href-page-path", children: page.path })
               ]
             },
             page.path
           )) })
         ] }),
-        /* @__PURE__ */ jsx9(
+        /* @__PURE__ */ jsx10(
           "button",
           {
             type: "button",
@@ -3766,8 +3925,8 @@ function YaLink({ fieldId, href: defaultHref = "#", className, style, as: Compon
         )
       ] }) : /* @__PURE__ */ jsxs5(Fragment3, { children: [
         /* @__PURE__ */ jsxs5("div", { className: "ya-href-popover-section", children: [
-          /* @__PURE__ */ jsx9("label", { className: "ya-href-popover-label", children: "External URL" }),
-          /* @__PURE__ */ jsx9(
+          /* @__PURE__ */ jsx10("label", { className: "ya-href-popover-label", children: "External URL" }),
+          /* @__PURE__ */ jsx10(
             "input",
             {
               type: "url",
@@ -3779,25 +3938,25 @@ function YaLink({ fieldId, href: defaultHref = "#", className, style, as: Compon
             }
           )
         ] }),
-        /* @__PURE__ */ jsx9("button", { type: "button", className: "ya-href-external-toggle", onClick: () => setIsExternalUrl(false), children: "\u2190 Back to pages" })
+        /* @__PURE__ */ jsx10("button", { type: "button", className: "ya-href-external-toggle", onClick: () => setIsExternalUrl(false), children: "\u2190 Back to pages" })
       ] }),
       /* @__PURE__ */ jsxs5("div", { className: "ya-href-popover-actions", children: [
-        /* @__PURE__ */ jsx9("button", { type: "button", className: "ya-link-btn ya-link-btn-cancel", onClick: handleCancelLink, children: "Cancel" }),
-        isExternalUrl ? /* @__PURE__ */ jsx9("button", { type: "button", className: "ya-link-btn ya-link-btn-save", onClick: handleExternalUrlApply, children: "Apply" }) : /* @__PURE__ */ jsx9("button", { type: "button", className: "ya-link-btn ya-link-btn-save", onClick: handleSaveLink, children: "Save" })
+        /* @__PURE__ */ jsx10("button", { type: "button", className: "ya-link-btn ya-link-btn-cancel", onClick: handleCancelLink, children: "Cancel" }),
+        isExternalUrl ? /* @__PURE__ */ jsx10("button", { type: "button", className: "ya-link-btn ya-link-btn-save", onClick: handleExternalUrlApply, children: "Apply" }) : /* @__PURE__ */ jsx10("button", { type: "button", className: "ya-link-btn ya-link-btn-save", onClick: handleSaveLink, children: "Save" })
       ] })
     ] })
   ] });
 }
 
 // src/components/YaContainer.tsx
-import { useCallback as useCallback10, useEffect as useEffect9, useRef as useRef10, useState as useState9 } from "react";
-import { createPortal as createPortal5 } from "react-dom";
+import { useCallback as useCallback11, useEffect as useEffect11, useRef as useRef11, useState as useState11 } from "react";
+import { createPortal as createPortal6 } from "react-dom";
 
 // src/components/ya-container.css
 styleInject('.ya-container {\n  position: relative;\n}\n.ya-container-has-overlay::after {\n  content: "";\n  position: absolute;\n  inset: 0;\n  background: var(--ya-overlay-color, transparent);\n  opacity: var(--ya-overlay-opacity, 0);\n  pointer-events: none;\n  z-index: 0;\n}\n.ya-container > *:not(.ya-container-toolbar) {\n  position: relative;\n  z-index: 1;\n}\n.ya-container-editable {\n  transition: outline 0.15s ease;\n}\n.ya-container-editable:hover {\n  outline: 2px dashed var(--color-primary, #D4A574);\n  outline-offset: -2px;\n}\nbody.builder-selector-active .ya-container-editable:hover {\n  outline: none;\n}\n.ya-container-selected {\n  outline: 3px solid var(--color-primary, #D4A574);\n  outline-offset: -3px;\n}\n.ya-container-toolbar {\n  display: flex;\n  gap: 4px;\n  background: rgba(26, 26, 26, 0.95);\n  padding: 6px 8px;\n  border-radius: 8px;\n  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);\n  z-index: 9999;\n  animation: ya-container-toolbar-fade-in 0.15s ease;\n}\n@keyframes ya-container-toolbar-fade-in {\n  from {\n    opacity: 0;\n    transform: translateY(-4px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n.ya-container-toolbar button {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 32px;\n  height: 32px;\n  background: #3a3a3a;\n  border: none;\n  border-radius: 6px;\n  color: #ffffff;\n  cursor: pointer;\n  transition: background 0.15s ease, transform 0.1s ease;\n}\n.ya-container-toolbar button:hover {\n  background: #4a4a4a;\n  transform: scale(1.05);\n}\n.ya-container-toolbar button:active {\n  transform: scale(0.98);\n}\n.ya-container-toolbar button.active {\n  background: var(--color-primary, #D4A574);\n  color: #1a1a1a;\n}\n.ya-container-toolbar button svg {\n  width: 16px;\n  height: 16px;\n}\n.ya-container-toolbar button[aria-label="Clear background"] {\n  background: #3a2a2a;\n}\n.ya-container-toolbar button[aria-label="Clear background"]:hover {\n  background: #5a3a3a;\n}\n.ya-container:focus-visible {\n  outline: 3px solid var(--color-primary, #D4A574);\n  outline-offset: -3px;\n}\n.ya-container-toolbar button:focus-visible {\n  outline: 2px solid var(--color-primary, #D4A574);\n  outline-offset: 2px;\n}\n.ya-container-drop-target {\n  outline: 2px dashed var(--ya-drop-color, #3b82f6) !important;\n  outline-offset: -2px;\n}\n.ya-container-drop-target .ya-container-toolbar {\n  display: none !important;\n}\n.ya-container-drop-hover {\n  outline: 3px solid var(--ya-drop-color, #3b82f6) !important;\n  outline-offset: -3px;\n}\n.ya-container-drop-hover::before {\n  content: "";\n  position: absolute;\n  inset: 0;\n  background: rgba(59, 130, 246, 0.08);\n  pointer-events: none;\n  z-index: 10;\n  animation: ya-container-drop-pulse 1s ease-in-out infinite;\n}\n@keyframes ya-container-drop-pulse {\n  0%, 100% {\n    background: rgba(59, 130, 246, 0.05);\n  }\n  50% {\n    background: rgba(59, 130, 246, 0.12);\n  }\n}\n');
 
 // src/components/YaContainer.tsx
-import { jsx as jsx10, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx11, jsxs as jsxs6 } from "react/jsx-runtime";
 function parseBackgroundConfig(value) {
   if (!value) {
     return { type: "none" };
@@ -3839,8 +3998,8 @@ function deriveContainerLabel(element) {
   return tagLabels[tagName] || "Section";
 }
 function Toolbar({ containerRef, onImageClick, onColorClick, onAIClick, onClearClick, hasBackground }) {
-  const [position, setPosition] = useState9(null);
-  useEffect9(() => {
+  const [position, setPosition] = useState11(null);
+  useEffect11(() => {
     const updatePosition = () => {
       if (containerRef.current) {
         const rect = containerRef.current.getBoundingClientRect();
@@ -3859,7 +4018,7 @@ function Toolbar({ containerRef, onImageClick, onColorClick, onAIClick, onClearC
     };
   }, [containerRef]);
   if (!position) return null;
-  return createPortal5(
+  return createPortal6(
     /* @__PURE__ */ jsxs6(
       "div",
       {
@@ -3871,7 +4030,7 @@ function Toolbar({ containerRef, onImageClick, onColorClick, onAIClick, onClearC
         },
         onClick: (e) => e.stopPropagation(),
         children: [
-          /* @__PURE__ */ jsx10(
+          /* @__PURE__ */ jsx11(
             "button",
             {
               type: "button",
@@ -3879,13 +4038,13 @@ function Toolbar({ containerRef, onImageClick, onColorClick, onAIClick, onClearC
               "aria-label": "Edit background image",
               title: "Background Image",
               children: /* @__PURE__ */ jsxs6("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
-                /* @__PURE__ */ jsx10("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2", ry: "2" }),
-                /* @__PURE__ */ jsx10("circle", { cx: "8.5", cy: "8.5", r: "1.5" }),
-                /* @__PURE__ */ jsx10("polyline", { points: "21 15 16 10 5 21" })
+                /* @__PURE__ */ jsx11("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2", ry: "2" }),
+                /* @__PURE__ */ jsx11("circle", { cx: "8.5", cy: "8.5", r: "1.5" }),
+                /* @__PURE__ */ jsx11("polyline", { points: "21 15 16 10 5 21" })
               ] })
             }
           ),
-          /* @__PURE__ */ jsx10(
+          /* @__PURE__ */ jsx11(
             "button",
             {
               type: "button",
@@ -3893,12 +4052,12 @@ function Toolbar({ containerRef, onImageClick, onColorClick, onAIClick, onClearC
               "aria-label": "Edit background color",
               title: "Background Color",
               children: /* @__PURE__ */ jsxs6("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
-                /* @__PURE__ */ jsx10("circle", { cx: "12", cy: "12", r: "10" }),
-                /* @__PURE__ */ jsx10("path", { d: "M12 2a10 10 0 0 1 0 20", fill: "currentColor" })
+                /* @__PURE__ */ jsx11("circle", { cx: "12", cy: "12", r: "10" }),
+                /* @__PURE__ */ jsx11("path", { d: "M12 2a10 10 0 0 1 0 20", fill: "currentColor" })
               ] })
             }
           ),
-          /* @__PURE__ */ jsx10(
+          /* @__PURE__ */ jsx11(
             "button",
             {
               type: "button",
@@ -3906,13 +4065,13 @@ function Toolbar({ containerRef, onImageClick, onColorClick, onAIClick, onClearC
               "aria-label": "Ask AI for help",
               title: "AI Assist",
               children: /* @__PURE__ */ jsxs6("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
-                /* @__PURE__ */ jsx10("path", { d: "M12 2L2 7l10 5 10-5-10-5z" }),
-                /* @__PURE__ */ jsx10("path", { d: "M2 17l10 5 10-5" }),
-                /* @__PURE__ */ jsx10("path", { d: "M2 12l10 5 10-5" })
+                /* @__PURE__ */ jsx11("path", { d: "M12 2L2 7l10 5 10-5-10-5z" }),
+                /* @__PURE__ */ jsx11("path", { d: "M2 17l10 5 10-5" }),
+                /* @__PURE__ */ jsx11("path", { d: "M2 12l10 5 10-5" })
               ] })
             }
           ),
-          hasBackground && /* @__PURE__ */ jsx10(
+          hasBackground && /* @__PURE__ */ jsx11(
             "button",
             {
               type: "button",
@@ -3920,8 +4079,8 @@ function Toolbar({ containerRef, onImageClick, onColorClick, onAIClick, onClearC
               "aria-label": "Clear background",
               title: "Clear Background",
               children: /* @__PURE__ */ jsxs6("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
-                /* @__PURE__ */ jsx10("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
-                /* @__PURE__ */ jsx10("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+                /* @__PURE__ */ jsx11("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+                /* @__PURE__ */ jsx11("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
               ] })
             }
           )
@@ -3940,11 +4099,11 @@ function YaContainer({
   defaultBackground
 }) {
   const { getValue, setValue, saveToWorker, mode } = useContentStore();
-  const containerRef = useRef10(null);
-  const [isHovered, setIsHovered] = useState9(false);
-  const [isSelected, setIsSelected] = useState9(false);
-  const [isDropMode, setIsDropMode] = useState9(false);
-  const [isDropHover, setIsDropHover] = useState9(false);
+  const containerRef = useRef11(null);
+  const [isHovered, setIsHovered] = useState11(false);
+  const [isSelected, setIsSelected] = useState11(false);
+  const [isDropMode, setIsDropMode] = useState11(false);
+  const [isDropHover, setIsDropHover] = useState11(false);
   const rawValue = getValue(fieldId);
   const backgroundConfig = rawValue ? parseBackgroundConfig(rawValue) : defaultBackground || { type: "none" };
   const hasBackground = backgroundConfig.type !== "none";
@@ -3965,7 +4124,7 @@ function YaContainer({
     overlayCustomProps["--ya-overlay-color"] = backgroundConfig.overlay.color;
     overlayCustomProps["--ya-overlay-opacity"] = backgroundConfig.overlay.opacity;
   }
-  const handleImageClick = useCallback10(() => {
+  const handleImageClick = useCallback11(() => {
     if (mode !== "inline-edit") return;
     setIsSelected(true);
     const rect = containerRef.current?.getBoundingClientRect();
@@ -3985,7 +4144,7 @@ function YaContainer({
       "*"
     );
   }, [mode, fieldId, backgroundConfig]);
-  const handleColorClick = useCallback10(() => {
+  const handleColorClick = useCallback11(() => {
     if (mode !== "inline-edit") return;
     setIsSelected(true);
     const rect = containerRef.current?.getBoundingClientRect();
@@ -4005,7 +4164,7 @@ function YaContainer({
       "*"
     );
   }, [mode, fieldId, backgroundConfig]);
-  const handleAIClick = useCallback10(() => {
+  const handleAIClick = useCallback11(() => {
     if (mode !== "inline-edit") return;
     const label = deriveContainerLabel(containerRef.current);
     window.parent.postMessage(
@@ -4018,14 +4177,14 @@ function YaContainer({
       "*"
     );
   }, [mode, fieldId, backgroundConfig]);
-  const handleClearClick = useCallback10(() => {
+  const handleClearClick = useCallback11(() => {
     if (mode !== "inline-edit") return;
     const clearedConfig = { type: "none" };
     const serialized = serializeBackgroundConfig(clearedConfig);
     setValue(fieldId, serialized);
     saveToWorker?.(fieldId, serialized);
   }, [mode, fieldId, setValue, saveToWorker]);
-  useEffect9(() => {
+  useEffect11(() => {
     if (mode !== "inline-edit") return;
     const handleMessage2 = (event) => {
       if (event.data?.type === "YA_CONTAINER_EDIT_COMPLETE" && event.data.fieldId === fieldId) {
@@ -4038,7 +4197,7 @@ function YaContainer({
     window.addEventListener("message", handleMessage2);
     return () => window.removeEventListener("message", handleMessage2);
   }, [mode, fieldId]);
-  useEffect9(() => {
+  useEffect11(() => {
     if (mode !== "inline-edit") return;
     const handleDropModeMessage = (event) => {
       if (event.data?.type === "DROP_MODE_START") {
@@ -4052,7 +4211,7 @@ function YaContainer({
     window.addEventListener("message", handleDropModeMessage);
     return () => window.removeEventListener("message", handleDropModeMessage);
   }, [mode]);
-  const handleDragEnter = useCallback10(
+  const handleDragEnter = useCallback11(
     (e) => {
       if (!isDropMode) return;
       e.preventDefault();
@@ -4076,7 +4235,7 @@ function YaContainer({
     },
     [isDropMode, fieldId]
   );
-  const handleDragOver = useCallback10(
+  const handleDragOver = useCallback11(
     (e) => {
       if (!isDropMode) return;
       e.preventDefault();
@@ -4084,7 +4243,7 @@ function YaContainer({
     },
     [isDropMode]
   );
-  const handleDragLeave = useCallback10(
+  const handleDragLeave = useCallback11(
     (e) => {
       if (!isDropMode) return;
       e.preventDefault();
@@ -4098,7 +4257,7 @@ function YaContainer({
     },
     [isDropMode]
   );
-  const handleDrop = useCallback10(
+  const handleDrop = useCallback11(
     (e) => {
       if (!isDropMode) return;
       e.preventDefault();
@@ -4116,7 +4275,7 @@ function YaContainer({
     },
     [isDropMode, fieldId]
   );
-  useEffect9(() => {
+  useEffect11(() => {
     if (!isSelected || mode !== "inline-edit") return;
     let lastRectKey = "";
     let lastTime = 0;
@@ -4151,7 +4310,7 @@ function YaContainer({
     return () => cancelAnimationFrame(rafId);
   }, [isSelected, fieldId, mode]);
   if (mode === "read-only") {
-    return /* @__PURE__ */ jsx10(
+    return /* @__PURE__ */ jsx11(
       Tag,
       {
         className: `ya-container ${className || ""}`,
@@ -4196,7 +4355,7 @@ function YaContainer({
       onDrop: handleDrop,
       children: [
         children,
-        mode === "inline-edit" && (isHovered || isSelected) && !document.body.classList.contains("builder-selector-active") && /* @__PURE__ */ jsx10(
+        mode === "inline-edit" && (isHovered || isSelected) && !document.body.classList.contains("builder-selector-active") && /* @__PURE__ */ jsx11(
           Toolbar,
           {
             containerRef,
@@ -4213,10 +4372,10 @@ function YaContainer({
 }
 
 // src/components/StaticText.tsx
-import { jsx as jsx11 } from "react/jsx-runtime";
+import { jsx as jsx12 } from "react/jsx-runtime";
 function MpText({ fieldId, className, as: Component = "span", children }) {
   const content = getContent(fieldId) || (typeof children === "string" ? children : "");
-  return /* @__PURE__ */ jsx11(
+  return /* @__PURE__ */ jsx12(
     Component,
     {
       className,
@@ -4227,7 +4386,7 @@ function MpText({ fieldId, className, as: Component = "span", children }) {
 }
 
 // src/components/StaticImage.tsx
-import { jsx as jsx12 } from "react/jsx-runtime";
+import { jsx as jsx13 } from "react/jsx-runtime";
 function parseImageValue2(value) {
   if (!value) {
     return { src: "" };
@@ -4263,7 +4422,7 @@ function MpImage({
   const altText = imageData.alt || alt || fallbackAlt || "";
   const objectFit = imageData.objectFit || propObjectFit || "cover";
   const objectPosition = getObjectPosition3(imageData) || propObjectPosition || "50% 50%";
-  return /* @__PURE__ */ jsx12(
+  return /* @__PURE__ */ jsx13(
     "img",
     {
       src: resolveAssetUrl(src),
@@ -4281,7 +4440,7 @@ function MpImage({
 
 // src/components/MarkdownText.tsx
 import { Fragment as Fragment4 } from "react";
-import { jsx as jsx13 } from "react/jsx-runtime";
+import { jsx as jsx14 } from "react/jsx-runtime";
 function tokenize(text) {
   const tokens = [];
   let remaining = text;
@@ -4343,13 +4502,13 @@ function tokensToElements(tokens) {
   return tokens.map((token, index) => {
     switch (token.type) {
       case "text":
-        return /* @__PURE__ */ jsx13(Fragment4, { children: token.content }, index);
+        return /* @__PURE__ */ jsx14(Fragment4, { children: token.content }, index);
       case "bold":
-        return /* @__PURE__ */ jsx13("strong", { children: token.content }, index);
+        return /* @__PURE__ */ jsx14("strong", { children: token.content }, index);
       case "italic":
-        return /* @__PURE__ */ jsx13("em", { children: token.content }, index);
+        return /* @__PURE__ */ jsx14("em", { children: token.content }, index);
       case "link":
-        return /* @__PURE__ */ jsx13(
+        return /* @__PURE__ */ jsx14(
           "a",
           {
             href: token.url,
@@ -4361,7 +4520,7 @@ function tokensToElements(tokens) {
           index
         );
       case "newline":
-        return /* @__PURE__ */ jsx13("br", {}, index);
+        return /* @__PURE__ */ jsx14("br", {}, index);
       default:
         return null;
     }
@@ -4373,15 +4532,15 @@ function parseMarkdownToElements(content) {
 }
 function MarkdownText({ content, className }) {
   const elements = parseMarkdownToElements(content);
-  return /* @__PURE__ */ jsx13("span", { className, children: elements });
+  return /* @__PURE__ */ jsx14("span", { className, children: elements });
 }
 
 // src/router/Link.tsx
 import { Link as WouterLink2 } from "wouter";
-import { jsx as jsx14 } from "react/jsx-runtime";
+import { jsx as jsx15 } from "react/jsx-runtime";
 function Link2({ to, href, children, className, onClick, replace, ...props }) {
   const target = href ?? to ?? "/";
-  return /* @__PURE__ */ jsx14(WouterLink2, { href: target, className, onClick, replace, ...props, children });
+  return /* @__PURE__ */ jsx15(WouterLink2, { href: target, className, onClick, replace, ...props, children });
 }
 
 // src/router/useNavigate.ts
@@ -4400,7 +4559,7 @@ function useNavigate() {
 
 // src/router/Router.tsx
 import { Router as WouterRouter } from "wouter";
-import { jsx as jsx15 } from "react/jsx-runtime";
+import { jsx as jsx16 } from "react/jsx-runtime";
 function detectBasename() {
   if (typeof window === "undefined") return "";
   const sessionMatch = window.location.pathname.match(/^\/session\/[^/]+/);
@@ -4415,7 +4574,7 @@ function detectBasename() {
 }
 function Router({ children, base }) {
   const basename = base ?? detectBasename();
-  return /* @__PURE__ */ jsx15(WouterRouter, { base: basename, children });
+  return /* @__PURE__ */ jsx16(WouterRouter, { base: basename, children });
 }
 
 // src/router/index.ts
@@ -4429,6 +4588,7 @@ export {
   Route,
   Router,
   SafeHtml,
+  SafeTriangleBelow,
   MpImage as StaticImage,
   MpText as StaticText,
   Switch,
@@ -4465,5 +4625,6 @@ export {
   useContentStore,
   useContentStore2 as useContentStoreProd,
   useNavigate,
-  useParams
+  useParams,
+  useSafeTriangle
 };

package/dist/plugin.js

@@ -6,6 +6,37 @@ function yoamigoPlugin(options = {}) {
   const templateDir = process.cwd();
   const resolveFromTemplate = (relativePath) => path.resolve(templateDir, relativePath);
   return [
+    // Content HMR plugin - enables hot reloading of content.ts without full page refresh
+    {
+      name: "yoamigo:content-hmr",
+      handleHotUpdate({ file, server }) {
+        if (!file.endsWith("/content.ts") && !file.endsWith("\\content.ts")) return;
+        server.ws.send({
+          type: "custom",
+          event: "yoamigo:content-update"
+        });
+        return [];
+      },
+      transform(code, id) {
+        if (!id.match(/\/main\.tsx?$/) && !id.match(/\\main\.tsx?$/)) return;
+        const hmrCode = `
+// YoAmigo Content HMR - injected by yoamigo:content-hmr plugin
+if (import.meta.hot) {
+  import.meta.hot.on('yoamigo:content-update', async () => {
+    try {
+      const { default: newContent } = await import('./content?t=' + Date.now())
+      const { registerContent } = await import('@yoamigo.com/core')
+      registerContent(newContent)
+      window.dispatchEvent(new CustomEvent('content-updated'))
+    } catch (err) {
+      console.error('[yoamigo:content-hmr] Failed to hot reload content:', err)
+    }
+  })
+}
+`;
+        return { code: code + "\n" + hmrCode, map: null };
+      }
+    },
     {
       name: "yoamigo:config",
       config(config, { mode }) {

package/dist/prod.d.ts

@@ -1,6 +1,6 @@
-export { a as ContentStore, E as ContentStoreMode, C as ContentStoreProvider, d as MarkdownText, e as MarkdownTextProps, P as PageInfo, b as StaticImage, c as StaticImageProps, M as StaticText, S as StaticTextProps, b as YaImage, c as YaImageProps, M as YaText, S as YaTextProps, u as useContentStore } from './MarkdownText-BUTYfqXS.js';
+export { a as ContentStore, E as ContentStoreMode, C as ContentStoreProvider, d as MarkdownText, e as MarkdownTextProps, P as PageInfo, b as StaticImage, c as StaticImageProps, M as StaticText, S as StaticTextProps, b as YaImage, c as YaImageProps, M as YaText, S as YaTextProps, u as useContentStore } from './MarkdownText-kV5IiAma.js';
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import React from 'react';
+import React__default from 'react';
 export { Link, LinkProps, NavigateFunction, Router, RouterProps, 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';
@@ -10,9 +10,9 @@ interface StaticLinkProps {
     href?: string;
     className?: string;
     /** Inline styles to apply to the link element */
-    style?: React.CSSProperties;
+    style?: React__default.CSSProperties;
     as?: 'a' | 'span';
-    children?: React.ReactNode;
+    children?: React__default.ReactNode;
     /** Optional click handler called after navigation */
     onClick?: () => void;
 }

package/package.json

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