@yoamigo.com/core 0.1.0

package/dist/index.js

@@ -0,0 +1,2579 @@
+// src/lib/content-registry.ts
+var contentMap = /* @__PURE__ */ new Map();
+function registerContent(content) {
+  contentMap = new Map(Object.entries(content));
+}
+function getContent(fieldId) {
+  return contentMap.get(fieldId) ?? "";
+}
+function getAllContent() {
+  return Object.fromEntries(contentMap);
+}
+function hasContent(fieldId) {
+  return contentMap.has(fieldId);
+}
+var contentRegistry = {
+  registerContent,
+  getContent,
+  getAllContent,
+  hasContent
+};
+
+// src/lib/utils/content-loader.ts
+function getAllContent2() {
+  return getAllContent();
+}
+
+// src/components/ContentStoreProvider.tsx
+import { createContext, useCallback, useContext, useEffect, useRef, useState } from "react";
+
+// src/lib/image-cache.ts
+var cache = /* @__PURE__ */ new Map();
+function setCachedImages(images) {
+  cache.clear();
+  const timestamp = Date.now();
+  for (const img of images) {
+    cache.set(img.key, {
+      blobUrl: img.blobUrl,
+      originalUrl: img.originalUrl,
+      timestamp
+    });
+  }
+}
+function clearImageCache() {
+  cache.clear();
+}
+
+// src/lib/image-cache-listener.ts
+var isListening = false;
+function handleMessage(event) {
+  const data = event.data;
+  if (data?.type === "YA_IMAGE_CACHE_UPDATE") {
+    console.log("[ImageCache] Received cache update:", data.images.length, "images");
+    setCachedImages(data.images);
+  }
+  if (data?.type === "YA_IMAGE_CACHE_CLEAR") {
+    console.log("[ImageCache] Cache cleared by parent");
+    clearImageCache();
+  }
+}
+function initImageCacheListener() {
+  if (isListening) {
+    window.parent.postMessage({ type: "YA_IMAGE_CACHE_REQUEST" }, "*");
+    return () => {
+    };
+  }
+  window.addEventListener("message", handleMessage);
+  isListening = true;
+  window.parent.postMessage({ type: "YA_IMAGE_CACHE_REQUEST" }, "*");
+  return () => {
+    window.removeEventListener("message", handleMessage);
+    isListening = false;
+    clearImageCache();
+  };
+}
+
+// src/components/ContentStoreProvider.tsx
+import { jsx } from "react/jsx-runtime";
+var ContentStoreContext = createContext(null);
+function useContentStore() {
+  const context = useContext(ContentStoreContext);
+  if (!context) {
+    throw new Error("useContentStore must be used within a ContentStoreProvider");
+  }
+  return context;
+}
+function extractSessionId() {
+  const match = window.location.pathname.match(/\/session\/([^/]+)/);
+  return match ? match[1] : null;
+}
+function isBuilderPreview() {
+  return typeof window !== "undefined" && (window.__YOAMIGO_EDIT_MODE__ === true || import.meta.env?.YA_EDIT_MODE === "true");
+}
+function ContentStoreProvider({
+  children,
+  initialContent,
+  initialMode,
+  pages = []
+}) {
+  const defaultContent = initialContent ?? getAllContent2();
+  const defaultMode = initialMode ?? (isBuilderPreview() ? "inline-edit" : "read-only");
+  const [content, setContent] = useState(
+    new Map(Object.entries(defaultContent))
+  );
+  const [mode, setModeState] = useState(defaultMode);
+  const [listeners, setListeners] = useState(/* @__PURE__ */ new Set());
+  const [activeFieldId, setActiveFieldId] = useState(null);
+  useEffect(() => {
+    const handleContentUpdate = () => {
+      const newContent = getAllContent2();
+      setContent(new Map(Object.entries(newContent)));
+    };
+    window.addEventListener("content-updated", handleContentUpdate);
+    return () => window.removeEventListener("content-updated", handleContentUpdate);
+  }, []);
+  useEffect(() => {
+    if (mode !== "inline-edit") return;
+    return initImageCacheListener();
+  }, [mode]);
+  const activeCallbacksRef = useRef(null);
+  const notifyListeners = useCallback(() => {
+    listeners.forEach((listener) => listener());
+  }, [listeners]);
+  const getValue = useCallback(
+    (fieldId) => {
+      return content.get(fieldId) ?? "";
+    },
+    [content]
+  );
+  const setValue = useCallback(
+    (fieldId, value2) => {
+      setContent((prev) => {
+        const next = new Map(prev);
+        next.set(fieldId, value2);
+        return next;
+      });
+      notifyListeners();
+    },
+    [notifyListeners]
+  );
+  const setMode = useCallback(
+    (newMode) => {
+      setModeState(newMode);
+      notifyListeners();
+    },
+    [notifyListeners]
+  );
+  const subscribe = useCallback((listener) => {
+    setListeners((prev) => {
+      const next = new Set(prev);
+      next.add(listener);
+      return next;
+    });
+    return () => {
+      setListeners((prev) => {
+        const next = new Set(prev);
+        next.delete(listener);
+        return next;
+      });
+    };
+  }, []);
+  const clearActiveField = useCallback(() => {
+    if (activeCallbacksRef.current) {
+      activeCallbacksRef.current.close();
+    }
+    activeCallbacksRef.current = null;
+    setActiveFieldId(null);
+  }, []);
+  const setActiveField = useCallback((fieldId, callbacks) => {
+    if (activeFieldId && activeFieldId !== fieldId && activeCallbacksRef.current) {
+      activeCallbacksRef.current.close();
+    }
+    activeCallbacksRef.current = callbacks;
+    setActiveFieldId(fieldId);
+  }, [activeFieldId]);
+  const saveToWorker = useCallback(
+    async (fieldId, value2) => {
+      const sessionId = extractSessionId();
+      if (!sessionId) {
+        console.warn("saveToWorker: Not in builder preview mode, skipping");
+        return;
+      }
+      try {
+        const response = await fetch(`/api/session/${sessionId}/inline-edit`, {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          credentials: "include",
+          body: JSON.stringify({ fieldId, value: value2 })
+        });
+        if (!response.ok) {
+          const error = await response.json();
+          console.error("saveToWorker failed:", error);
+          throw new Error(error.error || "Failed to save");
+        }
+        console.log(`saveToWorker: Saved ${fieldId}`);
+      } catch (error) {
+        console.error("saveToWorker error:", error);
+        throw error;
+      }
+    },
+    []
+  );
+  useEffect(() => {
+    if (!activeFieldId) return;
+    const handleClickOutside = (event) => {
+      const target = event.target;
+      const isInsideYaText = target.closest("[data-field-id]");
+      const isInsideBubbleMenu = target.closest(".ya-bubble-menu");
+      const isInsideActions = target.closest(".ya-text-actions");
+      if (!isInsideYaText && !isInsideBubbleMenu && !isInsideActions) {
+        if (activeCallbacksRef.current) {
+          activeCallbacksRef.current.close();
+        }
+        activeCallbacksRef.current = null;
+        setActiveFieldId(null);
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+    };
+  }, [activeFieldId]);
+  useEffect(() => {
+    ;
+    window.mpContentStore = {
+      getValue,
+      setValue,
+      getMode: () => mode,
+      setMode,
+      subscribe,
+      saveToWorker
+    };
+    return () => {
+      delete window.mpContentStore;
+    };
+  }, [getValue, setValue, mode, setMode, subscribe, saveToWorker]);
+  const getPages = useCallback(() => pages, [pages]);
+  const value = {
+    getValue,
+    setValue,
+    mode,
+    setMode,
+    subscribe,
+    saveToWorker,
+    activeFieldId,
+    setActiveField,
+    clearActiveField,
+    getPages
+  };
+  return /* @__PURE__ */ jsx(ContentStoreContext.Provider, { value, children });
+}
+
+// src/components/ContentStoreProvider.prod.tsx
+import { createContext as createContext2, useContext as useContext2 } from "react";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var contentMap2 = new Map(Object.entries(getAllContent()));
+var staticStore = {
+  getValue: (fieldId) => contentMap2.get(fieldId) ?? "",
+  setValue: () => {
+  },
+  // No-op in production
+  mode: "read-only",
+  setMode: () => {
+  },
+  // No-op in production
+  subscribe: () => () => {
+  },
+  // No-op, return empty unsubscribe
+  saveToWorker: void 0
+};
+var ContentStoreContext2 = createContext2(staticStore);
+function useContentStore2() {
+  return useContext2(ContentStoreContext2);
+}
+function ContentStoreProvider2({ children }) {
+  return /* @__PURE__ */ jsx2(ContentStoreContext2.Provider, { value: staticStore, children });
+}
+
+// src/components/YaText.tsx
+import { useEffect as useEffect3, useRef as useRef3, useState as useState3, useCallback as useCallback3 } from "react";
+import { createPortal as createPortal2 } from "react-dom";
+import { useEditor, EditorContent } from "@tiptap/react";
+import { BubbleMenu } from "@tiptap/react/menus";
+import StarterKit from "@tiptap/starter-kit";
+import Link from "@tiptap/extension-link";
+import { TextStyle } from "@tiptap/extension-text-style";
+import { Extension } from "@tiptap/core";
+
+// src/components/SafeHtml.tsx
+import { useEffect as useEffect2, useRef as useRef2, useState as useState2, useCallback as useCallback2 } from "react";
+import { createPortal } from "react-dom";
+import DOMPurify from "dompurify";
+import { Fragment, jsx as jsx3, jsxs } from "react/jsx-runtime";
+var ALLOWED_TAGS = ["strong", "em", "a", "span", "br", "b", "i", "u"];
+var ALLOWED_ATTR = ["href", "style", "class", "target", "rel"];
+DOMPurify.addHook("uponSanitizeAttribute", (_node, data) => {
+  if (data.attrName === "style") {
+    const allowedStyles = ["font-size", "font-weight"];
+    const styleValue = data.attrValue;
+    const filteredStyles = styleValue.split(";").map((s) => s.trim()).filter((s) => {
+      const [prop] = s.split(":").map((p) => p.trim());
+      return allowedStyles.includes(prop);
+    }).join("; ");
+    data.attrValue = filteredStyles;
+  }
+});
+function extractLinkDisplayText(href) {
+  if (!href) return { text: "link", isExternal: false };
+  if (href.startsWith("#")) {
+    const section = href.slice(1).replace(/-/g, " ");
+    return { text: section || "section", isExternal: false };
+  }
+  if (href.startsWith("/")) {
+    const segments = href.split("/").filter(Boolean);
+    const lastSegment = segments[segments.length - 1] || "home";
+    const text = lastSegment.replace(/-/g, " ").replace(/^\w/, (c) => c.toUpperCase());
+    return { text, isExternal: false };
+  }
+  if (href.startsWith("mailto:")) {
+    return { text: "email", isExternal: true };
+  }
+  if (href.startsWith("tel:")) {
+    return { text: "phone", isExternal: true };
+  }
+  try {
+    const url = new URL(href);
+    return {
+      text: url.hostname.replace(/^www\./, ""),
+      isExternal: true
+    };
+  } catch {
+    return { text: href.slice(0, 20), isExternal: true };
+  }
+}
+function LinkIcon() {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      className: "mp-link-popover-icon",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      children: [
+        /* @__PURE__ */ jsx3("path", { d: "M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71" }),
+        /* @__PURE__ */ jsx3("path", { d: "M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71" })
+      ]
+    }
+  );
+}
+function LinkPopover({
+  displayText,
+  position,
+  onMouseEnter,
+  onMouseLeave,
+  onClick
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "mp-link-popover",
+      style: {
+        top: position.top,
+        left: position.left
+      },
+      onMouseEnter,
+      onMouseLeave,
+      onClick,
+      role: "button",
+      tabIndex: 0,
+      onKeyDown: (e) => {
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          onClick();
+        }
+      },
+      children: [
+        /* @__PURE__ */ jsx3(LinkIcon, {}),
+        /* @__PURE__ */ jsxs("span", { className: "mp-link-popover-text", children: [
+          /* @__PURE__ */ jsx3("span", { className: "mp-link-popover-prefix", children: "Go to " }),
+          /* @__PURE__ */ jsx3("span", { className: "mp-link-popover-name", children: displayText })
+        ] })
+      ]
+    }
+  );
+}
+function SafeHtml({ content, className, mode = "read-only" }) {
+  const containerRef = useRef2(null);
+  const showTimerRef = useRef2(void 0);
+  const hideTimerRef = useRef2(void 0);
+  const [popoverState, setPopoverState] = useState2({
+    isVisible: false,
+    href: "",
+    displayText: "",
+    isExternal: false,
+    position: { top: 0, left: 0 }
+  });
+  const sanitized = DOMPurify.sanitize(content, {
+    ALLOWED_TAGS,
+    ALLOWED_ATTR
+  });
+  const hidePopover = useCallback2(() => {
+    clearTimeout(showTimerRef.current);
+    setPopoverState((prev) => ({ ...prev, isVisible: false }));
+  }, []);
+  const scheduleHide = useCallback2(() => {
+    clearTimeout(showTimerRef.current);
+    hideTimerRef.current = window.setTimeout(() => {
+      hidePopover();
+    }, 100);
+  }, [hidePopover]);
+  const cancelHide = useCallback2(() => {
+    clearTimeout(hideTimerRef.current);
+  }, []);
+  const handlePopoverClick = useCallback2(() => {
+    if (popoverState.isExternal) {
+      window.open(popoverState.href, "_blank", "noopener,noreferrer");
+    } else {
+      window.location.href = popoverState.href;
+    }
+    hidePopover();
+  }, [popoverState.href, popoverState.isExternal, hidePopover]);
+  useEffect2(() => {
+    if (mode !== "inline-edit" || !containerRef.current) return;
+    const container = containerRef.current;
+    const handleMouseOver = (e) => {
+      const link = e.target.closest("a");
+      if (!link) return;
+      if (e.target.closest(".mp-text-editing, .mp-text-editable")) return;
+      const selectModeEnabled = window.__builderSelectModeEnabled;
+      if (selectModeEnabled) return;
+      clearTimeout(hideTimerRef.current);
+      showTimerRef.current = window.setTimeout(() => {
+        const href = link.getAttribute("href") || "";
+        const { text, isExternal } = extractLinkDisplayText(href);
+        const rect = link.getBoundingClientRect();
+        const top = rect.bottom + window.scrollY + 8;
+        const left = rect.left + rect.width / 2 + window.scrollX;
+        setPopoverState({
+          isVisible: true,
+          href,
+          displayText: text,
+          isExternal,
+          position: { top, left }
+        });
+      }, 150);
+    };
+    const handleMouseOut = (e) => {
+      const link = e.target.closest("a");
+      if (!link) return;
+      scheduleHide();
+    };
+    const handleClick = (e) => {
+      if (e.target.closest(".mp-text-editing, .mp-text-editable")) return;
+      const yaLink = e.target.closest(".ya-link-editable, .ya-link-editing");
+      if (yaLink) {
+        if (yaLink.classList.contains("ya-link-editing")) {
+          e.preventDefault();
+          e.stopPropagation();
+        }
+        return;
+      }
+      const link = e.target.closest("a");
+      if (link) {
+        e.preventDefault();
+        e.stopPropagation();
+      }
+    };
+    container.addEventListener("mouseover", handleMouseOver);
+    container.addEventListener("mouseout", handleMouseOut);
+    container.addEventListener("click", handleClick, true);
+    return () => {
+      container.removeEventListener("mouseover", handleMouseOver);
+      container.removeEventListener("mouseout", handleMouseOut);
+      container.removeEventListener("click", handleClick, true);
+      clearTimeout(showTimerRef.current);
+      clearTimeout(hideTimerRef.current);
+    };
+  }, [mode, scheduleHide]);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx3(
+      "span",
+      {
+        ref: containerRef,
+        className,
+        dangerouslySetInnerHTML: { __html: sanitized }
+      }
+    ),
+    mode === "inline-edit" && popoverState.isVisible && createPortal(
+      /* @__PURE__ */ jsx3(
+        LinkPopover,
+        {
+          displayText: popoverState.displayText,
+          position: popoverState.position,
+          onMouseEnter: cancelHide,
+          onMouseLeave: hidePopover,
+          onClick: handlePopoverClick
+        }
+      ),
+      document.body
+    )
+  ] });
+}
+
+// src/components/YaText.tsx
+import { Fragment as Fragment2, jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
+var FontSize = Extension.create({
+  name: "fontSize",
+  addOptions() {
+    return {
+      types: ["textStyle"]
+    };
+  },
+  addGlobalAttributes() {
+    return [
+      {
+        types: this.options.types,
+        attributes: {
+          fontSize: {
+            default: null,
+            parseHTML: (element) => element.style.fontSize || null,
+            renderHTML: (attributes) => {
+              if (!attributes.fontSize) {
+                return {};
+              }
+              return {
+                style: `font-size: ${attributes.fontSize}`
+              };
+            }
+          }
+        }
+      }
+    ];
+  },
+  addCommands() {
+    return {
+      setFontSize: (fontSize) => ({ chain }) => {
+        return chain().setMark("textStyle", { fontSize }).run();
+      },
+      unsetFontSize: () => ({ chain }) => {
+        return chain().setMark("textStyle", { fontSize: null }).removeEmptyTextStyle().run();
+      }
+    };
+  }
+});
+var FontWeight = Extension.create({
+  name: "fontWeight",
+  addOptions() {
+    return {
+      types: ["textStyle"]
+    };
+  },
+  addGlobalAttributes() {
+    return [
+      {
+        types: this.options.types,
+        attributes: {
+          fontWeight: {
+            default: null,
+            parseHTML: (element) => element.style.fontWeight || null,
+            renderHTML: (attributes) => {
+              if (!attributes.fontWeight) {
+                return {};
+              }
+              return {
+                style: `font-weight: ${attributes.fontWeight}`
+              };
+            }
+          }
+        }
+      }
+    ];
+  },
+  addCommands() {
+    return {
+      setFontWeight: (fontWeight) => ({ chain }) => {
+        return chain().setMark("textStyle", { fontWeight }).run();
+      },
+      unsetFontWeight: () => ({ chain }) => {
+        return chain().setMark("textStyle", { fontWeight: null }).removeEmptyTextStyle().run();
+      }
+    };
+  }
+});
+var SIZE_PRESETS = {
+  S: "14px",
+  M: "16px",
+  L: "20px",
+  XL: "24px"
+};
+var WEIGHT_PRESETS = {
+  Regular: "400",
+  "Semi-bold": "600",
+  Bold: "700",
+  "Extra-bold": "800"
+};
+function YaText({ fieldId, className, as: Component = "span", children }) {
+  const { getValue, setValue, mode, saveToWorker, activeFieldId, setActiveField } = useContentStore();
+  const storeContent = getValue(fieldId);
+  const content = storeContent || (typeof children === "string" ? children : "");
+  const [isEditing, setIsEditing] = useState3(false);
+  const [originalContent, setOriginalContent] = useState3(content);
+  const containerRef = useRef3(null);
+  const originalContentRef = useRef3(content);
+  const editor = useEditor({
+    extensions: [
+      StarterKit.configure({
+        // Disable block-level features for inline editing
+        heading: false,
+        bulletList: false,
+        orderedList: false,
+        blockquote: false,
+        codeBlock: false,
+        horizontalRule: false,
+        // Disable Link since we configure it separately below
+        link: false
+      }),
+      Link.configure({
+        openOnClick: false,
+        HTMLAttributes: {
+          class: "text-[var(--color-primary)] underline"
+        }
+      }),
+      TextStyle,
+      FontSize,
+      FontWeight
+    ],
+    content,
+    // Content is now HTML, no conversion needed
+    editable: true,
+    editorProps: {
+      attributes: {
+        class: "outline-none"
+      }
+    },
+    parseOptions: { preserveWhitespace: "full" }
+  });
+  useEffect3(() => {
+    if (editor && !isEditing) {
+      if (editor.getHTML() !== content) {
+        editor.commands.setContent(content, { parseOptions: { preserveWhitespace: "full" } });
+      }
+    }
+  }, [content, editor, isEditing]);
+  useEffect3(() => {
+    if (isEditing && activeFieldId !== null && activeFieldId !== fieldId) {
+      setIsEditing(false);
+    }
+  }, [activeFieldId, fieldId, isEditing]);
+  const handleSave = useCallback3(() => {
+    if (!editor) return;
+    let html = editor.getHTML();
+    html = html.replace(/<\/p><p>/g, "<br><br>").replace(/^<p>/, "").replace(/<\/p>$/, "");
+    setValue(fieldId, html);
+    saveToWorker?.(fieldId, html);
+    setIsEditing(false);
+  }, [editor, fieldId, setValue, saveToWorker]);
+  const handleCancel = useCallback3(() => {
+    if (editor) {
+      editor.commands.setContent(originalContent, { parseOptions: { preserveWhitespace: "full" } });
+    }
+    setIsEditing(false);
+  }, [editor, originalContent]);
+  const handleClose = useCallback3(() => {
+    if (!editor) {
+      setIsEditing(false);
+      return;
+    }
+    let currentHtml = editor.getHTML();
+    currentHtml = currentHtml.replace(/<\/p><p>/g, "<br><br>").replace(/^<p>/, "").replace(/<\/p>$/, "");
+    if (currentHtml !== originalContentRef.current) {
+      setValue(fieldId, currentHtml);
+      saveToWorker?.(fieldId, currentHtml);
+    }
+    setIsEditing(false);
+  }, [editor, fieldId, setValue, saveToWorker]);
+  const handleClick = useCallback3((e) => {
+    if (isEditing) {
+      e.preventDefault();
+      e.stopPropagation();
+      return;
+    }
+    const selectModeEnabled = window.__builderSelectModeEnabled;
+    if (selectModeEnabled) {
+      return;
+    }
+    const isInsideLink = e.currentTarget.closest("a") !== null;
+    if (isInsideLink) {
+      return;
+    }
+    if (mode === "inline-edit" && !isEditing) {
+      e.preventDefault();
+      e.stopPropagation();
+      setOriginalContent(content);
+      originalContentRef.current = content;
+      setActiveField(fieldId, { close: handleClose });
+      setIsEditing(true);
+      setTimeout(() => {
+        editor?.chain().focus().selectAll().run();
+      }, 20);
+    }
+  }, [mode, isEditing, content, editor, fieldId, setActiveField, handleClose]);
+  const handleKeyDown = useCallback3(
+    (event) => {
+      if (!isEditing) return;
+      if (event.key === "Enter" && !event.shiftKey) {
+        event.preventDefault();
+        handleSave();
+        return;
+      }
+      if (event.key === "Escape") {
+        event.preventDefault();
+        handleCancel();
+        return;
+      }
+      if ((event.metaKey || event.ctrlKey) && event.key === "s") {
+        event.preventDefault();
+        handleSave();
+        return;
+      }
+    },
+    [isEditing, handleSave, handleCancel]
+  );
+  const handleLink = useCallback3(() => {
+    if (!editor) return;
+    const previousUrl = editor.getAttributes("link").href;
+    const url = window.prompt("Enter URL:", previousUrl || "https://");
+    if (url === null) return;
+    if (url === "") {
+      editor.chain().focus().extendMarkRange("link").unsetLink().run();
+    } else {
+      editor.chain().focus().extendMarkRange("link").setLink({ href: url }).run();
+    }
+  }, [editor]);
+  const handleFontSizeChange = useCallback3(
+    (e) => {
+      if (!editor) return;
+      const size = e.target.value;
+      if (size === "") {
+        editor.chain().focus().unsetFontSize().run();
+      } else {
+        editor.chain().focus().setFontSize(size).run();
+      }
+    },
+    [editor]
+  );
+  const handleFontWeightChange = useCallback3(
+    (e) => {
+      if (!editor) return;
+      const weight = e.target.value;
+      if (weight === "") {
+        editor.chain().focus().unsetFontWeight().run();
+      } else {
+        editor.chain().focus().setFontWeight(weight).run();
+      }
+    },
+    [editor]
+  );
+  const getCurrentFontSize = () => {
+    if (!editor) return "";
+    const attrs = editor.getAttributes("textStyle");
+    return attrs.fontSize || "";
+  };
+  const getCurrentFontWeight = () => {
+    if (!editor) return "";
+    const attrs = editor.getAttributes("textStyle");
+    return attrs.fontWeight || "";
+  };
+  if (mode === "read-only") {
+    return /* @__PURE__ */ jsx4(
+      Component,
+      {
+        ref: containerRef,
+        className,
+        "data-ya-restricted": "true",
+        "data-field-id": fieldId,
+        children: /* @__PURE__ */ jsx4(SafeHtml, { content, mode })
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx4(
+    Component,
+    {
+      ref: containerRef,
+      className: `${className || ""} ${isEditing ? "ya-text-editing" : "ya-text-editable"}`,
+      "data-ya-restricted": "true",
+      "data-field-id": fieldId,
+      onClick: handleClick,
+      onKeyDown: handleKeyDown,
+      children: editor ? /* @__PURE__ */ jsxs2(Fragment2, { children: [
+        createPortal2(
+          /* @__PURE__ */ jsxs2(
+            BubbleMenu,
+            {
+              editor,
+              shouldShow: () => isEditing,
+              options: { offset: 6, placement: "top" },
+              className: "ya-bubble-menu",
+              children: [
+                /* @__PURE__ */ jsx4(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => editor.chain().focus().toggleBold().run(),
+                    className: `ya-bubble-btn ${editor.isActive("bold") ? "is-active" : ""}`,
+                    title: "Bold",
+                    children: /* @__PURE__ */ jsx4("strong", { children: "B" })
+                  }
+                ),
+                /* @__PURE__ */ jsx4(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => editor.chain().focus().toggleItalic().run(),
+                    className: `ya-bubble-btn ${editor.isActive("italic") ? "is-active" : ""}`,
+                    title: "Italic",
+                    children: /* @__PURE__ */ jsx4("em", { children: "I" })
+                  }
+                ),
+                /* @__PURE__ */ jsx4(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: handleLink,
+                    className: `ya-bubble-btn ${editor.isActive("link") ? "is-active" : ""}`,
+                    title: "Link",
+                    children: /* @__PURE__ */ jsx4("span", { children: "\u{1F517}" })
+                  }
+                ),
+                /* @__PURE__ */ jsx4("span", { className: "ya-bubble-divider" }),
+                /* @__PURE__ */ jsxs2(
+                  "select",
+                  {
+                    value: getCurrentFontSize(),
+                    onChange: handleFontSizeChange,
+                    className: "ya-bubble-select",
+                    title: "Font Size",
+                    children: [
+                      /* @__PURE__ */ jsx4("option", { value: "", children: "Size" }),
+                      Object.entries(SIZE_PRESETS).map(([name, size]) => /* @__PURE__ */ jsx4("option", { value: size, children: name }, name))
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsxs2(
+                  "select",
+                  {
+                    value: getCurrentFontWeight(),
+                    onChange: handleFontWeightChange,
+                    className: "ya-bubble-select",
+                    title: "Font Weight",
+                    children: [
+                      /* @__PURE__ */ jsx4("option", { value: "", children: "Weight" }),
+                      Object.entries(WEIGHT_PRESETS).map(([name, weight]) => /* @__PURE__ */ jsx4("option", { value: weight, children: name }, name))
+                    ]
+                  }
+                )
+              ]
+            }
+          ),
+          document.body
+        ),
+        isEditing ? /* @__PURE__ */ jsxs2(Fragment2, { children: [
+          /* @__PURE__ */ jsx4(EditorContent, { editor }),
+          /* @__PURE__ */ jsxs2("div", { className: "ya-text-actions", children: [
+            /* @__PURE__ */ jsx4(
+              "button",
+              {
+                type: "button",
+                onClick: handleCancel,
+                className: "ya-text-btn ya-text-btn-cancel",
+                children: "Cancel"
+              }
+            ),
+            /* @__PURE__ */ jsx4(
+              "button",
+              {
+                type: "button",
+                onClick: handleSave,
+                className: "ya-text-btn ya-text-btn-save",
+                children: "Save"
+              }
+            )
+          ] })
+        ] }) : /* @__PURE__ */ jsx4(SafeHtml, { content, mode })
+      ] }) : /* @__PURE__ */ jsx4(SafeHtml, { content, mode })
+    }
+  );
+}
+
+// src/components/YaImage.tsx
+import { useCallback as useCallback5, useEffect as useEffect5, useRef as useRef5, useState as useState5 } from "react";
+
+// src/lib/asset-resolver.ts
+var assetResolver = (path) => path;
+function setAssetResolver(resolver) {
+  assetResolver = resolver;
+}
+function resolveAssetUrl(path) {
+  if (!path) return "";
+  if (path.startsWith("http://") || path.startsWith("https://")) {
+    return path;
+  }
+  return assetResolver(path);
+}
+
+// src/components/YaTooltip.tsx
+import { useEffect as useEffect4, useRef as useRef4, useState as useState4, useCallback as useCallback4 } from "react";
+import { createPortal as createPortal3 } from "react-dom";
+import { jsx as jsx5 } from "react/jsx-runtime";
+function YaTooltip({
+  anchorRef,
+  children,
+  show,
+  preferredPosition = "bottom"
+}) {
+  const [position, setPosition] = useState4(preferredPosition);
+  const [coords, setCoords] = useState4({ top: 0, left: 0 });
+  const [isPositioned, setIsPositioned] = useState4(false);
+  const tooltipRef = useRef4(null);
+  const calculatePosition = useCallback4(() => {
+    if (!anchorRef.current) return;
+    const anchor = anchorRef.current.getBoundingClientRect();
+    const tooltip = tooltipRef.current?.getBoundingClientRect();
+    const tooltipWidth = tooltip?.width || 120;
+    const tooltipHeight = tooltip?.height || 40;
+    const padding = 8;
+    const edgeMargin = 10;
+    const spaceBelow = window.innerHeight - anchor.bottom - edgeMargin;
+    const spaceAbove = anchor.top - edgeMargin;
+    const spaceRight = window.innerWidth - anchor.right - edgeMargin;
+    const spaceLeft = anchor.left - edgeMargin;
+    let pos = preferredPosition;
+    let top = 0;
+    let left = 0;
+    const positions = [preferredPosition, "bottom", "top", "right", "left"];
+    const uniquePositions = [...new Set(positions)];
+    for (const tryPos of uniquePositions) {
+      let fits = false;
+      switch (tryPos) {
+        case "bottom":
+          if (spaceBelow >= tooltipHeight + padding) {
+            pos = "bottom";
+            top = anchor.bottom + padding;
+            left = anchor.left + anchor.width / 2;
+            fits = true;
+          }
+          break;
+        case "top":
+          if (spaceAbove >= tooltipHeight + padding) {
+            pos = "top";
+            top = anchor.top - tooltipHeight - padding;
+            left = anchor.left + anchor.width / 2;
+            fits = true;
+          }
+          break;
+        case "right":
+          if (spaceRight >= tooltipWidth + padding) {
+            pos = "right";
+            top = anchor.top + anchor.height / 2;
+            left = anchor.right + padding;
+            fits = true;
+          }
+          break;
+        case "left":
+          if (spaceLeft >= tooltipWidth + padding) {
+            pos = "left";
+            top = anchor.top + anchor.height / 2;
+            left = anchor.left - tooltipWidth - padding;
+            fits = true;
+          }
+          break;
+      }
+      if (fits) break;
+    }
+    if (pos === "top" || pos === "bottom") {
+      const halfWidth = tooltipWidth / 2;
+      if (left - halfWidth < edgeMargin) {
+        left = edgeMargin + halfWidth;
+      } else if (left + halfWidth > window.innerWidth - edgeMargin) {
+        left = window.innerWidth - edgeMargin - halfWidth;
+      }
+    }
+    if (pos === "left" || pos === "right") {
+      const halfHeight = tooltipHeight / 2;
+      if (top - halfHeight < edgeMargin) {
+        top = edgeMargin + halfHeight;
+      } else if (top + halfHeight > window.innerHeight - edgeMargin) {
+        top = window.innerHeight - edgeMargin - halfHeight;
+      }
+    }
+    setPosition(pos);
+    setCoords({ top, left });
+    setIsPositioned(true);
+  }, [anchorRef, preferredPosition]);
+  useEffect4(() => {
+    if (!show) {
+      setIsPositioned(false);
+      return;
+    }
+    calculatePosition();
+    window.addEventListener("scroll", calculatePosition, true);
+    window.addEventListener("resize", calculatePosition);
+    return () => {
+      window.removeEventListener("scroll", calculatePosition, true);
+      window.removeEventListener("resize", calculatePosition);
+    };
+  }, [show, calculatePosition]);
+  useEffect4(() => {
+    if (show && tooltipRef.current) {
+      calculatePosition();
+    }
+  }, [show, children, calculatePosition]);
+  if (!show) return null;
+  return createPortal3(
+    /* @__PURE__ */ jsx5(
+      "div",
+      {
+        ref: tooltipRef,
+        className: `ya-tooltip ya-tooltip-${position}`,
+        style: {
+          top: coords.top,
+          left: coords.left,
+          opacity: isPositioned ? 1 : 0,
+          pointerEvents: isPositioned ? "auto" : "none"
+        },
+        role: "tooltip",
+        children
+      }
+    ),
+    document.body
+  );
+}
+
+// src/components/YaImage.tsx
+import { jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
+function parseImageValue(value) {
+  if (!value) {
+    return { src: "" };
+  }
+  try {
+    const parsed = JSON.parse(value);
+    if (typeof parsed === "object" && parsed.src) {
+      return parsed;
+    }
+  } catch {
+  }
+  return { src: value };
+}
+function serializeImageValue(value) {
+  return JSON.stringify(value);
+}
+function getObjectPosition(imageData) {
+  if (imageData.focalPoint) {
+    return `${imageData.focalPoint.x}% ${imageData.focalPoint.y}%`;
+  }
+  return imageData.objectPosition || "50% 50%";
+}
+var SMALL_IMAGE_THRESHOLD = 100;
+function YaImage({
+  fieldId,
+  className,
+  alt,
+  objectFit: propObjectFit,
+  objectPosition: propObjectPosition,
+  loading = "lazy",
+  fallbackSrc,
+  fallbackAlt
+}) {
+  const { getValue, mode } = useContentStore();
+  const containerRef = useRef5(null);
+  const imgRef = useRef5(null);
+  const [isSelected, setIsSelected] = useState5(false);
+  const [isHovered, setIsHovered] = useState5(false);
+  const [isSmallImage, setIsSmallImage] = useState5(false);
+  const rawValue = getValue(fieldId);
+  const imageData = parseImageValue(rawValue);
+  const src = imageData.src || fallbackSrc || "";
+  const altText = imageData.alt || alt || fallbackAlt || "";
+  const objectFit = imageData.objectFit || propObjectFit || "cover";
+  const objectPosition = getObjectPosition(imageData) || propObjectPosition || "50% 50%";
+  const handleClick = useCallback5(() => {
+    if (mode !== "inline-edit") return;
+    if (document.body.classList.contains("builder-selector-active")) return;
+    setIsSelected(true);
+    const rect = containerRef.current?.getBoundingClientRect();
+    window.parent.postMessage(
+      {
+        type: "YA_IMAGE_EDIT_REQUEST",
+        fieldId,
+        currentValue: {
+          ...imageData,
+          src,
+          // Raw path, parent resolves display URL via asset cache
+          alt: altText,
+          objectFit,
+          objectPosition
+        },
+        // Include element rect for floating popover positioning
+        elementRect: rect ? {
+          top: rect.top,
+          left: rect.left,
+          width: rect.width,
+          height: rect.height
+        } : void 0
+      },
+      "*"
+    );
+  }, [mode, fieldId, imageData, src, altText, objectFit, objectPosition]);
+  useEffect5(() => {
+    if (mode !== "inline-edit") return;
+    const handleMessage2 = (event) => {
+      if (event.data?.type === "YA_IMAGE_EDIT_COMPLETE" && event.data.fieldId === fieldId) {
+        setIsSelected(false);
+      }
+      if (event.data?.type === "YA_IMAGE_EDIT_CANCEL" && event.data.fieldId === fieldId) {
+        setIsSelected(false);
+      }
+      if (event.data?.type === "YA_IMAGE_UPDATE_PREVIEW" && event.data.fieldId === fieldId) {
+      }
+    };
+    window.addEventListener("message", handleMessage2);
+    return () => window.removeEventListener("message", handleMessage2);
+  }, [mode, fieldId]);
+  useEffect5(() => {
+    if (mode !== "inline-edit") return;
+    const checkSize = () => {
+      if (imgRef.current) {
+        const { width, height } = imgRef.current.getBoundingClientRect();
+        setIsSmallImage(width < SMALL_IMAGE_THRESHOLD || height < SMALL_IMAGE_THRESHOLD);
+      }
+    };
+    const img = imgRef.current;
+    if (img) {
+      if (img.complete) {
+        checkSize();
+      } else {
+        img.addEventListener("load", checkSize);
+      }
+    }
+    window.addEventListener("resize", checkSize);
+    return () => {
+      img?.removeEventListener("load", checkSize);
+      window.removeEventListener("resize", checkSize);
+    };
+  }, [mode]);
+  useEffect5(() => {
+    if (!isSelected || mode !== "inline-edit") return;
+    let lastRectKey = "";
+    let lastTime = 0;
+    let rafId;
+    const loop = (time) => {
+      if (time - lastTime >= 50) {
+        const rect = containerRef.current?.getBoundingClientRect();
+        if (rect) {
+          const rectKey = `${Math.round(rect.top)},${Math.round(rect.left)},${Math.round(rect.width)},${Math.round(rect.height)}`;
+          if (rectKey !== lastRectKey) {
+            lastRectKey = rectKey;
+            window.parent.postMessage(
+              {
+                type: "YA_IMAGE_POSITION_UPDATE",
+                fieldId,
+                elementRect: {
+                  top: rect.top,
+                  left: rect.left,
+                  width: rect.width,
+                  height: rect.height
+                }
+              },
+              "*"
+            );
+          }
+        }
+        lastTime = time;
+      }
+      rafId = requestAnimationFrame(loop);
+    };
+    rafId = requestAnimationFrame(loop);
+    return () => cancelAnimationFrame(rafId);
+  }, [isSelected, fieldId, mode]);
+  if (mode === "read-only") {
+    return /* @__PURE__ */ jsx6(
+      "img",
+      {
+        src: resolveAssetUrl(src),
+        alt: altText,
+        className,
+        style: {
+          objectFit,
+          objectPosition
+        },
+        loading,
+        "data-ya-restricted": "true",
+        "data-field-id": fieldId
+      }
+    );
+  }
+  const editIcon = /* @__PURE__ */ jsxs3(
+    "svg",
+    {
+      width: "24",
+      height: "24",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      children: [
+        /* @__PURE__ */ jsx6("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2", ry: "2" }),
+        /* @__PURE__ */ jsx6("circle", { cx: "8.5", cy: "8.5", r: "1.5" }),
+        /* @__PURE__ */ jsx6("polyline", { points: "21 15 16 10 5 21" })
+      ]
+    }
+  );
+  return /* @__PURE__ */ jsxs3(
+    "div",
+    {
+      ref: containerRef,
+      className: `ya-image-container ${isSelected ? "ya-image-selected" : "ya-image-editable"} ${isSmallImage ? "ya-image-small" : ""}`,
+      onClick: handleClick,
+      onMouseEnter: () => setIsHovered(true),
+      onMouseLeave: () => setIsHovered(false),
+      "data-ya-restricted": "true",
+      "data-field-id": fieldId,
+      "data-ya-image": "true",
+      role: "button",
+      tabIndex: 0,
+      "aria-label": `Edit image: ${altText || fieldId}`,
+      onKeyDown: (e) => {
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          handleClick();
+        }
+      },
+      children: [
+        /* @__PURE__ */ jsx6(
+          "img",
+          {
+            ref: imgRef,
+            src: resolveAssetUrl(src),
+            alt: altText,
+            className,
+            style: {
+              objectFit,
+              objectPosition
+            },
+            loading
+          }
+        ),
+        isSmallImage ? /* @__PURE__ */ jsxs3(YaTooltip, { anchorRef: containerRef, show: isHovered && !isSelected, children: [
+          editIcon,
+          /* @__PURE__ */ jsx6("span", { children: "Click to edit" })
+        ] }) : (
+          /* For large images: show overlay inside the image */
+          /* @__PURE__ */ jsxs3("div", { className: "ya-image-overlay", children: [
+            /* @__PURE__ */ jsx6("div", { className: "ya-image-edit-icon", children: editIcon }),
+            /* @__PURE__ */ jsx6("span", { className: "ya-image-edit-label", children: "Click to edit" })
+          ] })
+        )
+      ]
+    }
+  );
+}
+
+// src/components/YaLink.tsx
+import { useEffect as useEffect6, useRef as useRef6, useState as useState6, useCallback as useCallback6 } from "react";
+import { createPortal as createPortal4 } from "react-dom";
+import { useEditor as useEditor2, EditorContent as EditorContent2 } from "@tiptap/react";
+import { BubbleMenu as BubbleMenu2 } from "@tiptap/react/menus";
+import StarterKit2 from "@tiptap/starter-kit";
+import { TextStyle as TextStyle2 } from "@tiptap/extension-text-style";
+import { Extension as Extension2 } from "@tiptap/core";
+import { Link as WouterLink, useLocation } from "wouter";
+import { Fragment as Fragment3, jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
+function isInternalPath(path) {
+  if (!path) return false;
+  if (path.startsWith("#")) return false;
+  if (path.startsWith("//")) return false;
+  if (path.includes("://")) return false;
+  if (path.startsWith("mailto:") || path.startsWith("tel:")) return false;
+  return path.startsWith("/");
+}
+var FontSize2 = Extension2.create({
+  name: "fontSize",
+  addOptions() {
+    return { types: ["textStyle"] };
+  },
+  addGlobalAttributes() {
+    return [
+      {
+        types: this.options.types,
+        attributes: {
+          fontSize: {
+            default: null,
+            parseHTML: (element) => element.style.fontSize || null,
+            renderHTML: (attributes) => {
+              if (!attributes.fontSize) return {};
+              return { style: `font-size: ${attributes.fontSize}` };
+            }
+          }
+        }
+      }
+    ];
+  },
+  addCommands() {
+    return {
+      setFontSize: (fontSize) => ({ chain }) => chain().setMark("textStyle", { fontSize }).run(),
+      unsetFontSize: () => ({ chain }) => chain().setMark("textStyle", { fontSize: null }).removeEmptyTextStyle().run()
+    };
+  }
+});
+var FontWeight2 = Extension2.create({
+  name: "fontWeight",
+  addOptions() {
+    return { types: ["textStyle"] };
+  },
+  addGlobalAttributes() {
+    return [
+      {
+        types: this.options.types,
+        attributes: {
+          fontWeight: {
+            default: null,
+            parseHTML: (element) => element.style.fontWeight || null,
+            renderHTML: (attributes) => {
+              if (!attributes.fontWeight) return {};
+              return { style: `font-weight: ${attributes.fontWeight}` };
+            }
+          }
+        }
+      }
+    ];
+  },
+  addCommands() {
+    return {
+      setFontWeight: (fontWeight) => ({ chain }) => chain().setMark("textStyle", { fontWeight }).run(),
+      unsetFontWeight: () => ({ chain }) => chain().setMark("textStyle", { fontWeight: null }).removeEmptyTextStyle().run()
+    };
+  }
+});
+var SIZE_PRESETS2 = {
+  S: "14px",
+  M: "16px",
+  L: "20px",
+  XL: "24px"
+};
+var WEIGHT_PRESETS2 = {
+  Regular: "400",
+  "Semi-bold": "600",
+  Bold: "700",
+  "Extra-bold": "800"
+};
+function discoverSectionsFromDOM() {
+  const sections = [];
+  const selectableElements = document.querySelectorAll("[data-mp-selectable]");
+  selectableElements.forEach((el) => {
+    const id = el.getAttribute("data-mp-selectable") || el.id;
+    if (id) {
+      const label = id.split("-").map((word) => word.charAt(0).toUpperCase() + word.slice(1)).join(" ");
+      sections.push({ path: `#${id}`, label });
+    }
+  });
+  return sections;
+}
+function YaLink({ fieldId, href: defaultHref = "#", className, as: Component = "a", children, availablePages, onClick }) {
+  const { getValue, setValue, mode, saveToWorker, getPages } = useContentStore();
+  const [, navigate] = useLocation();
+  const pages = availablePages ?? getPages();
+  const [sections, setSections] = useState6([]);
+  const [sectionsExpanded, setSectionsExpanded] = useState6(false);
+  const textFieldId = `${fieldId}.text`;
+  const hrefFieldId = `${fieldId}.href`;
+  const storeText = getValue(textFieldId);
+  const storeHref = getValue(hrefFieldId);
+  const isIconMode = children != null && typeof children !== "string";
+  const text = storeText || (typeof children === "string" ? children : "");
+  const href = storeHref || defaultHref;
+  const [editingMode, setEditingMode] = useState6(null);
+  const [showEditPopover, setShowEditPopover] = useState6(false);
+  const [originalText, setOriginalText] = useState6(text);
+  const [originalHref, setOriginalHref] = useState6(href);
+  const [currentHref, setCurrentHref] = useState6(href);
+  const [isExternalUrl, setIsExternalUrl] = useState6(false);
+  const [externalUrl, setExternalUrl] = useState6("");
+  const containerRef = useRef6(null);
+  const hrefPopoverRef = useRef6(null);
+  const hidePopoverTimeoutRef = useRef6(null);
+  const editor = useEditor2({
+    extensions: [
+      StarterKit2.configure({
+        heading: false,
+        bulletList: false,
+        orderedList: false,
+        blockquote: false,
+        codeBlock: false,
+        horizontalRule: false
+      }),
+      TextStyle2,
+      FontSize2,
+      FontWeight2
+    ],
+    content: text,
+    editable: true,
+    editorProps: {
+      attributes: {
+        class: "outline-none"
+      }
+    }
+  });
+  useEffect6(() => {
+    if (editor && editingMode !== "text") {
+      if (editor.getHTML() !== text) {
+        editor.commands.setContent(text);
+      }
+    }
+  }, [text, editor, editingMode]);
+  useEffect6(() => {
+    if (editingMode !== "link") {
+      setCurrentHref(href);
+    }
+  }, [href, editingMode]);
+  useEffect6(() => {
+    return () => {
+      if (hidePopoverTimeoutRef.current) {
+        clearTimeout(hidePopoverTimeoutRef.current);
+      }
+    };
+  }, []);
+  useEffect6(() => {
+    if (editingMode !== "link") return;
+    const handleClickOutside = (event) => {
+      const target = event.target;
+      if (hrefPopoverRef.current?.contains(target)) return;
+      if (containerRef.current?.contains(target)) return;
+      setCurrentHref(originalHref);
+      setEditingMode(null);
+      setIsExternalUrl(false);
+      setExternalUrl("");
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, [editingMode, originalHref]);
+  const handleSaveText = useCallback6(() => {
+    if (!editor) return;
+    let html = editor.getHTML();
+    html = html.replace(/<\/p><p>/g, "<br><br>").replace(/^<p>/, "").replace(/<\/p>$/, "");
+    setValue(textFieldId, html);
+    saveToWorker?.(textFieldId, html);
+    setEditingMode(null);
+  }, [editor, textFieldId, setValue, saveToWorker]);
+  const handleSaveLink = useCallback6(() => {
+    setValue(hrefFieldId, currentHref);
+    saveToWorker?.(hrefFieldId, currentHref);
+    setEditingMode(null);
+    setIsExternalUrl(false);
+    setExternalUrl("");
+  }, [hrefFieldId, currentHref, setValue, saveToWorker]);
+  const handleCancelText = useCallback6(() => {
+    if (editor) {
+      editor.commands.setContent(originalText);
+    }
+    setEditingMode(null);
+  }, [editor, originalText]);
+  const handleCancelLink = useCallback6(() => {
+    setCurrentHref(originalHref);
+    setEditingMode(null);
+    setIsExternalUrl(false);
+    setExternalUrl("");
+  }, [originalHref]);
+  const handleClick = useCallback6(
+    (e) => {
+      const selectModeEnabled = window.__builderSelectModeEnabled;
+      if (selectModeEnabled) {
+        e.preventDefault();
+        return;
+      }
+      if (href.startsWith("#")) {
+        e.preventDefault();
+        const targetId = href.substring(1);
+        const targetElement = document.getElementById(targetId);
+        if (targetElement) {
+          const navHeight = 118;
+          const targetPosition = targetElement.offsetTop - navHeight;
+          window.scrollTo({
+            top: targetPosition,
+            behavior: "smooth"
+          });
+        }
+        onClick?.();
+        return;
+      }
+      if (isInternalPath(href)) {
+        e.preventDefault();
+        navigate(href);
+        onClick?.();
+        return;
+      }
+      onClick?.();
+    },
+    [href, navigate, onClick]
+  );
+  const handleMouseEnter = useCallback6(() => {
+    if (hidePopoverTimeoutRef.current) {
+      clearTimeout(hidePopoverTimeoutRef.current);
+      hidePopoverTimeoutRef.current = null;
+    }
+    if (mode === "inline-edit" && !editingMode) {
+      setShowEditPopover(true);
+    }
+  }, [mode, editingMode]);
+  const handleMouseLeave = useCallback6(() => {
+    hidePopoverTimeoutRef.current = window.setTimeout(() => {
+      if (!editingMode) {
+        setShowEditPopover(false);
+      }
+    }, 150);
+  }, [editingMode]);
+  const handleFocus = useCallback6(() => {
+    if (mode === "inline-edit" && !editingMode) {
+      setShowEditPopover(true);
+    }
+  }, [mode, editingMode]);
+  const startEditText = useCallback6(() => {
+    setShowEditPopover(false);
+    setEditingMode("text");
+    setOriginalText(text);
+    setTimeout(() => {
+      editor?.chain().focus().selectAll().run();
+    }, 20);
+  }, [text, editor]);
+  const startEditLink = useCallback6(() => {
+    setShowEditPopover(false);
+    setEditingMode("link");
+    setOriginalHref(href);
+    setCurrentHref(href);
+    setSections(discoverSectionsFromDOM());
+  }, [href]);
+  const handleKeyDown = useCallback6(
+    (event) => {
+      if (editingMode !== "text") return;
+      if (event.key === "Enter" && !event.shiftKey) {
+        event.preventDefault();
+        handleSaveText();
+        return;
+      }
+      if (event.key === "Escape") {
+        event.preventDefault();
+        handleCancelText();
+        return;
+      }
+      if ((event.metaKey || event.ctrlKey) && event.key === "s") {
+        event.preventDefault();
+        handleSaveText();
+        return;
+      }
+    },
+    [editingMode, handleSaveText, handleCancelText]
+  );
+  const handleFontSizeChange = useCallback6(
+    (e) => {
+      if (!editor) return;
+      const size = e.target.value;
+      if (size === "") {
+        editor.chain().focus().unsetFontSize().run();
+      } else {
+        editor.chain().focus().setFontSize(size).run();
+      }
+    },
+    [editor]
+  );
+  const handleFontWeightChange = useCallback6(
+    (e) => {
+      if (!editor) return;
+      const weight = e.target.value;
+      if (weight === "") {
+        editor.chain().focus().unsetFontWeight().run();
+      } else {
+        editor.chain().focus().setFontWeight(weight).run();
+      }
+    },
+    [editor]
+  );
+  const handlePageSelect = useCallback6((path) => {
+    setCurrentHref(path);
+    setIsExternalUrl(false);
+  }, []);
+  const handleExternalUrlApply = useCallback6(() => {
+    if (externalUrl) {
+      setCurrentHref(externalUrl);
+    }
+  }, [externalUrl]);
+  const getCurrentFontSize = () => {
+    if (!editor) return "";
+    const attrs = editor.getAttributes("textStyle");
+    return attrs.fontSize || "";
+  };
+  const getCurrentFontWeight = () => {
+    if (!editor) return "";
+    const attrs = editor.getAttributes("textStyle");
+    return attrs.fontWeight || "";
+  };
+  if (mode === "read-only") {
+    const content = isIconMode ? children : /* @__PURE__ */ jsx7(SafeHtml, { content: text, mode });
+    if (isInternalPath(href)) {
+      return /* @__PURE__ */ jsx7(
+        WouterLink,
+        {
+          href,
+          className,
+          "data-ya-restricted": "true",
+          "data-field-id": fieldId,
+          children: content
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx7(
+      Component,
+      {
+        ref: containerRef,
+        href: Component === "a" ? href : void 0,
+        className,
+        "data-ya-restricted": "true",
+        "data-field-id": fieldId,
+        children: content
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs4("span", { className: "ya-link-wrapper", children: [
+    /* @__PURE__ */ jsx7(
+      Component,
+      {
+        ref: containerRef,
+        href: Component === "a" ? href : void 0,
+        className: `${className || ""} ${editingMode ? "ya-link-editing" : "ya-link-editable"}`,
+        "data-ya-restricted": "true",
+        "data-field-id": fieldId,
+        onClick: handleClick,
+        onMouseEnter: handleMouseEnter,
+        onMouseLeave: handleMouseLeave,
+        onFocus: handleFocus,
+        onKeyDown: handleKeyDown,
+        children: isIconMode ? (
+          // Icon mode: render children directly, no text editing
+          children
+        ) : editor ? /* @__PURE__ */ jsxs4(Fragment3, { children: [
+          createPortal4(
+            /* @__PURE__ */ jsxs4(
+              BubbleMenu2,
+              {
+                editor,
+                shouldShow: () => editingMode === "text",
+                options: { offset: 6, placement: "top" },
+                className: "ya-bubble-menu",
+                children: [
+                  /* @__PURE__ */ jsx7(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: () => editor.chain().focus().toggleBold().run(),
+                      className: `ya-bubble-btn ${editor.isActive("bold") ? "is-active" : ""}`,
+                      title: "Bold",
+                      children: /* @__PURE__ */ jsx7("strong", { children: "B" })
+                    }
+                  ),
+                  /* @__PURE__ */ jsx7(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: () => editor.chain().focus().toggleItalic().run(),
+                      className: `ya-bubble-btn ${editor.isActive("italic") ? "is-active" : ""}`,
+                      title: "Italic",
+                      children: /* @__PURE__ */ jsx7("em", { children: "I" })
+                    }
+                  ),
+                  /* @__PURE__ */ jsx7("span", { className: "ya-bubble-divider" }),
+                  /* @__PURE__ */ jsxs4(
+                    "select",
+                    {
+                      value: getCurrentFontSize(),
+                      onChange: handleFontSizeChange,
+                      className: "ya-bubble-select",
+                      title: "Font Size",
+                      children: [
+                        /* @__PURE__ */ jsx7("option", { value: "", children: "Size" }),
+                        Object.entries(SIZE_PRESETS2).map(([name, size]) => /* @__PURE__ */ jsx7("option", { value: size, children: name }, name))
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ jsxs4(
+                    "select",
+                    {
+                      value: getCurrentFontWeight(),
+                      onChange: handleFontWeightChange,
+                      className: "ya-bubble-select",
+                      title: "Font Weight",
+                      children: [
+                        /* @__PURE__ */ jsx7("option", { value: "", children: "Weight" }),
+                        Object.entries(WEIGHT_PRESETS2).map(([name, weight]) => /* @__PURE__ */ jsx7("option", { value: weight, children: name }, name))
+                      ]
+                    }
+                  )
+                ]
+              }
+            ),
+            document.body
+          ),
+          editingMode === "text" ? /* @__PURE__ */ jsxs4(Fragment3, { children: [
+            /* @__PURE__ */ jsx7(EditorContent2, { editor }),
+            /* @__PURE__ */ jsxs4("div", { className: "ya-link-actions", children: [
+              /* @__PURE__ */ jsx7("button", { type: "button", onClick: handleCancelText, className: "ya-link-btn ya-link-btn-cancel", children: "Cancel" }),
+              /* @__PURE__ */ jsx7("button", { type: "button", onClick: handleSaveText, className: "ya-link-btn ya-link-btn-save", children: "Save" })
+            ] })
+          ] }) : /* @__PURE__ */ jsx7(SafeHtml, { content: text, mode })
+        ] }) : /* @__PURE__ */ jsx7(SafeHtml, { content: text, mode })
+      }
+    ),
+    showEditPopover && !editingMode && mode === "inline-edit" && /* @__PURE__ */ jsxs4("div", { className: "ya-link-edit-popover", onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, children: [
+      !isIconMode && /* @__PURE__ */ jsx7("button", { type: "button", onClick: startEditText, children: "Edit text" }),
+      /* @__PURE__ */ jsx7("button", { type: "button", onClick: startEditLink, children: "Edit link" })
+    ] }),
+    editingMode === "link" && /* @__PURE__ */ jsxs4("div", { ref: hrefPopoverRef, className: "ya-href-popover", children: [
+      /* @__PURE__ */ jsx7("div", { className: "ya-href-popover-header", children: "Link destination" }),
+      !isExternalUrl ? /* @__PURE__ */ jsxs4(Fragment3, { children: [
+        sections.length > 0 && /* @__PURE__ */ jsxs4("div", { className: "ya-href-popover-section", children: [
+          /* @__PURE__ */ jsxs4(
+            "button",
+            {
+              type: "button",
+              className: "ya-href-popover-label ya-href-collapsible-header",
+              onClick: () => setSectionsExpanded(!sectionsExpanded),
+              children: [
+                /* @__PURE__ */ jsx7("span", { className: "ya-href-chevron", children: sectionsExpanded ? "\u25BC" : "\u25B6" }),
+                "Scroll to section (",
+                sections.length,
+                ")"
+              ]
+            }
+          ),
+          sectionsExpanded && /* @__PURE__ */ jsx7("div", { className: "ya-href-popover-pages", children: sections.map((section) => /* @__PURE__ */ jsxs4(
+            "button",
+            {
+              type: "button",
+              className: `ya-href-page-btn ${currentHref === section.path ? "is-selected" : ""}`,
+              onClick: () => handlePageSelect(section.path),
+              children: [
+                section.label,
+                /* @__PURE__ */ jsx7("span", { className: "ya-href-page-path", children: section.path })
+              ]
+            },
+            section.path
+          )) })
+        ] }),
+        pages.length > 0 && /* @__PURE__ */ jsxs4("div", { className: "ya-href-popover-section", children: [
+          /* @__PURE__ */ jsx7("label", { className: "ya-href-popover-label", children: "Navigate to page" }),
+          /* @__PURE__ */ jsx7("div", { className: "ya-href-popover-pages", children: pages.map((page) => /* @__PURE__ */ jsxs4(
+            "button",
+            {
+              type: "button",
+              className: `ya-href-page-btn ${currentHref === page.path ? "is-selected" : ""}`,
+              onClick: () => handlePageSelect(page.path),
+              children: [
+                page.label,
+                /* @__PURE__ */ jsx7("span", { className: "ya-href-page-path", children: page.path })
+              ]
+            },
+            page.path
+          )) })
+        ] }),
+        /* @__PURE__ */ jsx7(
+          "button",
+          {
+            type: "button",
+            className: "ya-href-external-toggle",
+            onClick: () => {
+              setIsExternalUrl(true);
+              setExternalUrl(currentHref.startsWith("http") ? currentHref : "");
+            },
+            children: "Use external URL instead"
+          }
+        )
+      ] }) : /* @__PURE__ */ jsxs4(Fragment3, { children: [
+        /* @__PURE__ */ jsxs4("div", { className: "ya-href-popover-section", children: [
+          /* @__PURE__ */ jsx7("label", { className: "ya-href-popover-label", children: "External URL" }),
+          /* @__PURE__ */ jsx7(
+            "input",
+            {
+              type: "url",
+              className: "ya-href-url-input",
+              placeholder: "https://example.com",
+              value: externalUrl,
+              onChange: (e) => setExternalUrl(e.target.value),
+              autoFocus: true
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx7("button", { type: "button", className: "ya-href-external-toggle", onClick: () => setIsExternalUrl(false), children: "\u2190 Back to pages" })
+      ] }),
+      /* @__PURE__ */ jsxs4("div", { className: "ya-href-popover-actions", children: [
+        /* @__PURE__ */ jsx7("button", { type: "button", className: "ya-link-btn ya-link-btn-cancel", onClick: handleCancelLink, children: "Cancel" }),
+        isExternalUrl ? /* @__PURE__ */ jsx7("button", { type: "button", className: "ya-link-btn ya-link-btn-save", onClick: handleExternalUrlApply, children: "Apply" }) : /* @__PURE__ */ jsx7("button", { type: "button", className: "ya-link-btn ya-link-btn-save", onClick: handleSaveLink, children: "Save" })
+      ] })
+    ] })
+  ] });
+}
+
+// src/components/StaticText.tsx
+import { jsx as jsx8 } from "react/jsx-runtime";
+function MpText({ fieldId, className, as: Component = "span", children }) {
+  const content = getContent(fieldId) || (typeof children === "string" ? children : "");
+  return /* @__PURE__ */ jsx8(
+    Component,
+    {
+      className,
+      "data-field-id": fieldId,
+      dangerouslySetInnerHTML: { __html: content }
+    }
+  );
+}
+
+// src/components/StaticImage.tsx
+import { jsx as jsx9 } from "react/jsx-runtime";
+function parseImageValue2(value) {
+  if (!value) {
+    return { src: "" };
+  }
+  try {
+    const parsed = JSON.parse(value);
+    if (typeof parsed === "object" && parsed.src) {
+      return parsed;
+    }
+  } catch {
+  }
+  return { src: value };
+}
+function getObjectPosition2(imageData) {
+  if (imageData.focalPoint) {
+    return `${imageData.focalPoint.x}% ${imageData.focalPoint.y}%`;
+  }
+  return imageData.objectPosition || "50% 50%";
+}
+function MpImage({
+  fieldId,
+  className,
+  alt,
+  objectFit: propObjectFit,
+  objectPosition: propObjectPosition,
+  loading = "lazy",
+  fallbackSrc,
+  fallbackAlt
+}) {
+  const rawValue = getContent(fieldId);
+  const imageData = parseImageValue2(rawValue);
+  const src = imageData.src || fallbackSrc || "";
+  const altText = imageData.alt || alt || fallbackAlt || "";
+  const objectFit = imageData.objectFit || propObjectFit || "cover";
+  const objectPosition = getObjectPosition2(imageData) || propObjectPosition || "50% 50%";
+  return /* @__PURE__ */ jsx9(
+    "img",
+    {
+      src: resolveAssetUrl(src),
+      alt: altText,
+      className,
+      style: {
+        objectFit,
+        objectPosition
+      },
+      loading,
+      "data-field-id": fieldId
+    }
+  );
+}
+
+// src/components/MarkdownText.tsx
+import { Fragment as Fragment4 } from "react";
+import { jsx as jsx10 } from "react/jsx-runtime";
+function tokenize(text) {
+  const tokens = [];
+  let remaining = text;
+  const patterns = [
+    // Bold: **text**
+    { regex: /^\*\*(.+?)\*\*/, type: "bold" },
+    // Italic: *text* (but not **)
+    { regex: /^\*([^*]+?)\*/, type: "italic" },
+    // Link: [text](url)
+    { regex: /^\[([^\]]+)\]\(([^)]+)\)/, type: "link" },
+    // Newline
+    { regex: /^\n/, type: "newline" }
+  ];
+  while (remaining.length > 0) {
+    let matched = false;
+    for (const pattern of patterns) {
+      const match = remaining.match(pattern.regex);
+      if (match) {
+        if (pattern.type === "bold") {
+          tokens.push({ type: "bold", content: match[1] });
+        } else if (pattern.type === "italic") {
+          tokens.push({ type: "italic", content: match[1] });
+        } else if (pattern.type === "link") {
+          tokens.push({ type: "link", text: match[1], url: match[2] });
+        } else if (pattern.type === "newline") {
+          tokens.push({ type: "newline" });
+        }
+        remaining = remaining.slice(match[0].length);
+        matched = true;
+        break;
+      }
+    }
+    if (!matched) {
+      const nextSpecial = remaining.search(/[*[\n]/);
+      if (nextSpecial === -1) {
+        tokens.push({ type: "text", content: remaining });
+        remaining = "";
+      } else if (nextSpecial === 0) {
+        tokens.push({ type: "text", content: remaining[0] });
+        remaining = remaining.slice(1);
+      } else {
+        tokens.push({ type: "text", content: remaining.slice(0, nextSpecial) });
+        remaining = remaining.slice(nextSpecial);
+      }
+    }
+  }
+  const merged = [];
+  for (const token of tokens) {
+    const last = merged[merged.length - 1];
+    if (token.type === "text" && last?.type === "text") {
+      last.content += token.content;
+    } else {
+      merged.push(token);
+    }
+  }
+  return merged;
+}
+function tokensToElements(tokens) {
+  return tokens.map((token, index) => {
+    switch (token.type) {
+      case "text":
+        return /* @__PURE__ */ jsx10(Fragment4, { children: token.content }, index);
+      case "bold":
+        return /* @__PURE__ */ jsx10("strong", { children: token.content }, index);
+      case "italic":
+        return /* @__PURE__ */ jsx10("em", { children: token.content }, index);
+      case "link":
+        return /* @__PURE__ */ jsx10(
+          "a",
+          {
+            href: token.url,
+            target: "_blank",
+            rel: "noopener noreferrer",
+            className: "text-[var(--color-primary)] underline hover:text-[var(--color-secondary)]",
+            children: token.text
+          },
+          index
+        );
+      case "newline":
+        return /* @__PURE__ */ jsx10("br", {}, index);
+      default:
+        return null;
+    }
+  });
+}
+function parseMarkdownToElements(content) {
+  const tokens = tokenize(content);
+  return tokensToElements(tokens);
+}
+function MarkdownText({ content, className }) {
+  const elements = parseMarkdownToElements(content);
+  return /* @__PURE__ */ jsx10("span", { className, children: elements });
+}
+
+// src/router/Link.tsx
+import { Link as WouterLink2 } from "wouter";
+import { jsx as jsx11 } from "react/jsx-runtime";
+function Link2({ to, href, children, className, onClick, replace, ...props }) {
+  const target = href ?? to ?? "/";
+  return /* @__PURE__ */ jsx11(WouterLink2, { href: target, className, onClick, replace, ...props, children });
+}
+
+// src/router/useNavigate.ts
+import { useLocation as useLocation2 } from "wouter";
+function useNavigate() {
+  const [, setLocation] = useLocation2();
+  return (to, options) => {
+    if (options?.replace) {
+      window.history.replaceState(null, "", to);
+      setLocation(to);
+    } else {
+      setLocation(to);
+    }
+  };
+}
+
+// src/router/Router.tsx
+import { Router as WouterRouter } from "wouter";
+import { jsx as jsx12 } from "react/jsx-runtime";
+function detectBasename() {
+  if (typeof window === "undefined") return "";
+  const sessionMatch = window.location.pathname.match(/^\/session\/[^/]+/);
+  if (sessionMatch) return sessionMatch[0];
+  const previewMatch = window.location.pathname.match(/^\/deploy-preview\/[^/]+/);
+  if (previewMatch) return previewMatch[0];
+  return "";
+}
+function Router({ children, base }) {
+  const basename = base ?? detectBasename();
+  return /* @__PURE__ */ jsx12(WouterRouter, { base: basename, children });
+}
+
+// src/lib/builder-selection.ts
+var SELECTABLE_SELECTORS = [
+  // Interactive elements
+  "button",
+  // Buttons
+  "a[href]",
+  // Links with href
+  '[role="button"]',
+  // ARIA buttons
+  // Form elements
+  "input",
+  // Input fields (text, checkbox, etc.)
+  "textarea",
+  // Text areas
+  "select",
+  // Dropdown selects
+  "label",
+  // Form labels
+  "form",
+  // Forms as containers
+  // Media elements
+  "img",
+  // Images
+  "video",
+  // Videos
+  "audio",
+  // Audio players
+  "iframe",
+  // Embedded content
+  "svg",
+  // SVG graphics
+  "figure",
+  // Figures with captions
+  "figcaption",
+  // Figure captions
+  // Text/content elements
+  "h1",
+  "h2",
+  "h3",
+  "h4",
+  "h5",
+  "h6",
+  // Headings
+  "p",
+  // Paragraphs
+  "blockquote",
+  // Block quotes
+  "table",
+  // Tables
+  "tr",
+  // Table rows
+  "td",
+  // Table cells
+  "th",
+  // Table headers
+  // List elements
+  "li",
+  // List items (event cards, etc.)
+  "ol",
+  // Ordered lists
+  "ul",
+  // Unordered lists
+  // Other
+  "article",
+  // Article cards
+  "[data-mp-selectable]"
+  // Explicit selectables (backward compatible)
+];
+var CONTAINER_SELECTORS = [
+  "section",
+  "[data-mp-editable]",
+  "nav",
+  "header",
+  "footer"
+];
+var BuilderSelectionManager = class {
+  enabled = false;
+  selections = /* @__PURE__ */ new Map();
+  hoverOverlay = null;
+  currentHoveredElement = null;
+  // Cache element references for lookup when syncing selections
+  elementMap = /* @__PURE__ */ new Map();
+  // Current selections from parent (for re-rendering on mode change)
+  currentSelections = [];
+  constructor() {
+    if (window.parent === window) {
+      console.log("[BuilderSelection] Not in iframe, skipping initialization");
+      return;
+    }
+    console.log("[BuilderSelection] Initializing in iframe context");
+    this.setupMessageListener();
+    this.createHoverOverlay();
+    this.setupScrollResizeListeners();
+    this.setupKeyboardListener();
+    this.setupWheelForwarding();
+    this.notifyPageReady();
+    window.addEventListener("popstate", () => this.notifyPageReady());
+  }
+  notifyPageReady() {
+    this.sendToParent({
+      type: "PAGE_READY",
+      page: window.location.pathname
+    });
+  }
+  sendToParent(message) {
+    try {
+      window.parent.postMessage(message, "*");
+    } catch (error) {
+      console.error("[BuilderSelection] Failed to send message to parent:", error);
+    }
+  }
+  setupMessageListener() {
+    window.addEventListener("message", (event) => {
+      const data = event.data;
+      if (!data?.type) return;
+      switch (data.type) {
+        case "SELECTOR_MODE":
+          this.setEnabled(data.enabled ?? false);
+          break;
+        case "SELECTION_SYNC":
+          this.syncSelections(data.selections ?? [], data.currentPage ?? "");
+          break;
+        case "CLEAR_SELECTIONS":
+          this.clearAllSelections();
+          break;
+      }
+    });
+  }
+  setEnabled(enabled) {
+    console.log("[BuilderSelection] Selector mode:", enabled);
+    this.enabled = enabled;
+    window.__builderSelectModeEnabled = enabled;
+    if (enabled) {
+      document.body.style.cursor = "crosshair";
+      document.body.classList.add("builder-selector-active");
+      this.attachEventListeners();
+      this.renderSelectionMasks();
+    } else {
+      document.body.style.cursor = "";
+      document.body.classList.remove("builder-selector-active");
+      this.detachEventListeners();
+      this.hideHoverOverlay();
+      this.clearAllSelections();
+    }
+  }
+  attachEventListeners() {
+    document.addEventListener("mouseover", this.handleMouseOver);
+    document.addEventListener("mouseout", this.handleMouseOut);
+    document.addEventListener("click", this.handleClick, true);
+  }
+  detachEventListeners() {
+    document.removeEventListener("mouseover", this.handleMouseOver);
+    document.removeEventListener("mouseout", this.handleMouseOut);
+    document.removeEventListener("click", this.handleClick, true);
+  }
+  handleMouseOver = (e) => {
+    if (!this.enabled) return;
+    const target = this.findDeepestSelectableAt(e.target);
+    if (!target || target === this.currentHoveredElement) return;
+    this.currentHoveredElement = target;
+    this.showHoverOverlay(target);
+    const selectorId = this.generateSelectorId(target);
+    this.sendToParent({
+      type: "ELEMENT_HOVER",
+      selectorId
+    });
+  };
+  handleMouseOut = (e) => {
+    if (!this.enabled) return;
+    const relatedTarget = e.relatedTarget;
+    const stillInSelectable = relatedTarget ? this.findDeepestSelectableAt(relatedTarget) : null;
+    if (!stillInSelectable || stillInSelectable !== this.currentHoveredElement) {
+      this.currentHoveredElement = null;
+      this.hideHoverOverlay();
+      this.sendToParent({
+        type: "ELEMENT_HOVER",
+        selectorId: null
+      });
+    }
+  };
+  handleClick = (e) => {
+    if (!this.enabled) return;
+    const target = this.findDeepestSelectableAt(e.target);
+    if (!target) return;
+    e.preventDefault();
+    e.stopPropagation();
+    const selectorId = this.generateSelectorId(target);
+    const label = this.deriveLabel(target);
+    this.elementMap.set(selectorId, target);
+    this.sendToParent({
+      type: "ELEMENT_CLICKED",
+      selectorId,
+      label,
+      page: window.location.pathname,
+      modifier: e.shiftKey ? "shift" : e.metaKey || e.ctrlKey ? "cmd" : null
+    });
+  };
+  handleKeyDown = (e) => {
+    if (e.key === "Shift") {
+      const activeElement = document.activeElement;
+      const isEditing = activeElement?.closest(".ya-text-editing") || activeElement?.closest(".ya-link-editing");
+      if (!isEditing) {
+        this.sendToParent({ type: "SHIFT_KEY_PRESSED" });
+      }
+    }
+  };
+  /**
+   * Check if element matches any selectable selector
+   */
+  isSelectableElement(el) {
+    for (const selector of SELECTABLE_SELECTORS) {
+      if (el.matches(selector)) return true;
+    }
+    for (const selector of CONTAINER_SELECTORS) {
+      if (el.matches(selector)) return true;
+    }
+    return false;
+  }
+  /**
+   * Find the deepest selectable element from the click/hover target
+   * Walks up the DOM tree and returns the first (deepest) selectable found
+   */
+  findDeepestSelectableAt(target) {
+    if (target.closest(".mp-text-editing")) {
+      return null;
+    }
+    let current = target;
+    const selectables = [];
+    while (current && current !== document.body) {
+      if (this.isSelectableElement(current)) {
+        selectables.push(current);
+      }
+      current = current.parentElement;
+    }
+    return selectables[0] || null;
+  }
+  /**
+   * Generate a unique selector ID for an element
+   * Uses data-mp-selectable if available, otherwise generates from context
+   */
+  generateSelectorId(el) {
+    if (el.dataset.mpSelectable) return el.dataset.mpSelectable;
+    if (el.id) return el.id;
+    const tag = el.tagName.toLowerCase();
+    const parent = el.closest("section, [data-mp-selectable], [data-mp-editable]");
+    const parentId = parent?.dataset?.mpSelectable || parent?.dataset?.mpEditable || parent?.id || "page";
+    const siblings = parent ? Array.from(parent.querySelectorAll(tag)) : [];
+    const index = siblings.indexOf(el);
+    return `${parentId}.${tag}${index > 0 ? `.${index}` : ""}`;
+  }
+  /**
+   * Derive a human-readable label from the element
+   */
+  deriveLabel(el) {
+    if (el.dataset.mpSelectable) {
+      return this.toTitleCase(el.dataset.mpSelectable);
+    }
+    const tag = el.tagName.toLowerCase();
+    const text = el.textContent?.trim().slice(0, 30) || "";
+    if (tag === "button" || el.getAttribute("role") === "button") {
+      return text ? `"${text}" Button` : "Button";
+    }
+    if (tag === "a") {
+      return text ? `"${text}" Link` : "Link";
+    }
+    if (tag === "img") {
+      return el.alt || "Image";
+    }
+    if (tag === "video") {
+      return "Video";
+    }
+    if (tag === "audio") {
+      return "Audio Player";
+    }
+    if (tag === "iframe") {
+      return "Embedded Content";
+    }
+    if (tag === "svg") {
+      return "SVG Graphic";
+    }
+    if (tag === "figure") {
+      const caption = el.querySelector("figcaption")?.textContent?.trim();
+      return caption ? `Figure: ${caption.slice(0, 20)}` : "Figure";
+    }
+    if (tag === "figcaption") {
+      return text ? `Caption: ${text.slice(0, 20)}` : "Caption";
+    }
+    if (tag === "input") {
+      const type = el.type || "text";
+      const placeholder = el.placeholder;
+      if (type === "submit") return "Submit Button";
+      if (type === "checkbox") return "Checkbox";
+      if (type === "radio") return "Radio Button";
+      return placeholder ? `"${placeholder}" Input` : `${type.charAt(0).toUpperCase() + type.slice(1)} Input`;
+    }
+    if (tag === "textarea") {
+      const placeholder = el.placeholder;
+      return placeholder ? `"${placeholder}" Text Area` : "Text Area";
+    }
+    if (tag === "select") {
+      return "Dropdown";
+    }
+    if (tag === "label") {
+      return text ? `Label: ${text.slice(0, 20)}` : "Label";
+    }
+    if (tag === "form") {
+      return "Form";
+    }
+    if (["h1", "h2", "h3", "h4", "h5", "h6"].includes(tag)) {
+      return text ? `Heading: ${text.slice(0, 25)}` : `${tag.toUpperCase()} Heading`;
+    }
+    if (tag === "p") {
+      return text ? `Paragraph: ${text.slice(0, 20)}...` : "Paragraph";
+    }
+    if (tag === "blockquote") {
+      return text ? `Quote: ${text.slice(0, 20)}...` : "Block Quote";
+    }
+    if (tag === "table") {
+      return "Table";
+    }
+    if (tag === "tr") {
+      return "Table Row";
+    }
+    if (tag === "td" || tag === "th") {
+      return text ? `Cell: ${text.slice(0, 15)}` : "Table Cell";
+    }
+    if (tag === "ol") {
+      return "Ordered List";
+    }
+    if (tag === "ul") {
+      return "Unordered List";
+    }
+    if (tag === "li") {
+      const preview = text.length > 20 ? text.slice(0, 20) + "..." : text;
+      return preview ? `List Item: ${preview}` : "List Item";
+    }
+    if (tag === "section") {
+      const heading = el.querySelector("h1, h2, h3")?.textContent?.trim();
+      return heading ? `${heading} Section` : "Section";
+    }
+    if (tag === "article") {
+      const heading = el.querySelector("h1, h2, h3, h4")?.textContent?.trim();
+      return heading ? heading : "Article";
+    }
+    if (tag === "nav") {
+      return "Navigation";
+    }
+    if (tag === "header") {
+      return "Header";
+    }
+    if (tag === "footer") {
+      return "Footer";
+    }
+    return text || this.toTitleCase(tag);
+  }
+  /**
+   * Convert kebab-case or tag names to Title Case
+   */
+  toTitleCase(str) {
+    return str.split(/[-_]/).map((word) => word.charAt(0).toUpperCase() + word.slice(1)).join(" ");
+  }
+  createHoverOverlay() {
+    this.hoverOverlay = document.createElement("div");
+    this.hoverOverlay.id = "builder-hover-overlay";
+    this.hoverOverlay.style.cssText = `
+      position: fixed;
+      pointer-events: none;
+      border: 2px dashed #3B82F6;
+      background: rgba(59, 130, 246, 0.05);
+      z-index: 9999;
+      display: none;
+      transition: all 0.15s ease-out;
+      border-radius: 4px;
+    `;
+    document.body.appendChild(this.hoverOverlay);
+  }
+  setupScrollResizeListeners() {
+    window.addEventListener("scroll", this.updateSelectionPositions, { passive: true });
+    window.addEventListener("resize", this.updateSelectionPositions, { passive: true });
+  }
+  setupKeyboardListener() {
+    document.addEventListener("keydown", this.handleKeyDown);
+  }
+  /**
+   * Forward wheel events with ctrlKey (pinch zoom) to parent
+   * This allows pinch-to-zoom gestures inside the iframe to control
+   * the parent's zoom state instead of zooming the iframe content
+   */
+  setupWheelForwarding() {
+    document.addEventListener("wheel", (e) => {
+      if (e.ctrlKey) {
+        e.preventDefault();
+        this.sendToParent({
+          type: "IFRAME_WHEEL",
+          deltaY: e.deltaY,
+          clientX: e.clientX,
+          clientY: e.clientY,
+          ctrlKey: true
+        });
+      }
+    }, { passive: false });
+  }
+  showHoverOverlay(element) {
+    if (!this.hoverOverlay) return;
+    const rect = element.getBoundingClientRect();
+    this.hoverOverlay.style.top = `${rect.top}px`;
+    this.hoverOverlay.style.left = `${rect.left}px`;
+    this.hoverOverlay.style.width = `${rect.width}px`;
+    this.hoverOverlay.style.height = `${rect.height}px`;
+    this.hoverOverlay.style.display = "block";
+  }
+  hideHoverOverlay() {
+    if (this.hoverOverlay) {
+      this.hoverOverlay.style.display = "none";
+    }
+  }
+  syncSelections(selections, _currentPage) {
+    console.log("[BuilderSelection] Syncing selections:", selections.length, "current page:", _currentPage);
+    this.currentSelections = selections;
+    if (!this.enabled) {
+      this.clearAllSelections();
+      return;
+    }
+    this.renderSelectionMasks();
+  }
+  /**
+   * Render selection masks for current selections (only when enabled)
+   */
+  renderSelectionMasks() {
+    this.clearAllSelections();
+    for (const sel of this.currentSelections) {
+      if (sel.page !== window.location.pathname) continue;
+      const element = this.findElementBySelectorId(sel.selectorId);
+      if (!element) {
+        console.warn(`[BuilderSelection] Element not found for selector: ${sel.selectorId}`);
+        continue;
+      }
+      this.renderSelectionIndicator(element, sel.id, sel.color);
+    }
+  }
+  /**
+   * Find element by selector ID (supports both explicit and auto-generated IDs)
+   */
+  findElementBySelectorId(selectorId) {
+    const explicit = document.querySelector(`[data-mp-selectable="${selectorId}"]`);
+    if (explicit) return explicit;
+    const byId = document.getElementById(selectorId);
+    if (byId) return byId;
+    const cached = this.elementMap.get(selectorId);
+    if (cached && document.body.contains(cached)) return cached;
+    const parts = selectorId.split(".");
+    if (parts.length >= 2) {
+      const parentId = parts[0];
+      const tag = parts[1];
+      const index = parts.length > 2 ? parseInt(parts[2], 10) : 0;
+      let parent = null;
+      if (parentId === "page") {
+        parent = document.body;
+      } else {
+        parent = document.querySelector(`[data-mp-selectable="${parentId}"]`) || document.querySelector(`[data-mp-editable="${parentId}"]`) || document.getElementById(parentId) || document.querySelector(`section#${parentId}`);
+      }
+      if (parent) {
+        const candidates = parent.querySelectorAll(tag);
+        if (candidates[index]) {
+          return candidates[index];
+        }
+      }
+    }
+    return null;
+  }
+  clearAllSelections() {
+    this.selections.forEach(({ container }) => {
+      container.remove();
+    });
+    this.selections.clear();
+  }
+  /**
+   * Update positions of selection overlays when viewport changes (scroll/resize)
+   */
+  updateSelectionPositions = () => {
+    this.selections.forEach(({ element, container }) => {
+      if (!document.body.contains(element)) {
+        return;
+      }
+      const rect = element.getBoundingClientRect();
+      container.style.top = `${rect.top}px`;
+      container.style.left = `${rect.left}px`;
+      container.style.width = `${rect.width}px`;
+      container.style.height = `${rect.height}px`;
+    });
+  };
+  renderSelectionIndicator(element, selectionId, color) {
+    const rect = element.getBoundingClientRect();
+    const container = document.createElement("div");
+    container.className = "builder-selection-container";
+    container.dataset.selectionId = selectionId;
+    container.style.cssText = `
+      position: fixed;
+      top: ${rect.top}px;
+      left: ${rect.left}px;
+      width: ${rect.width}px;
+      height: ${rect.height}px;
+      pointer-events: none;
+      z-index: 9999;
+    `;
+    const border = document.createElement("div");
+    border.className = "builder-selection-border";
+    border.style.cssText = `
+      position: absolute;
+      inset: 0;
+      border: 2px solid ${color};
+      border-radius: 4px;
+      pointer-events: none;
+    `;
+    container.appendChild(border);
+    const badge = document.createElement("div");
+    badge.textContent = selectionId;
+    badge.className = "builder-selection-badge";
+    badge.style.cssText = `
+      position: absolute;
+      top: 8px;
+      left: 8px;
+      background: ${color};
+      color: white;
+      font-size: 11px;
+      font-weight: 600;
+      padding: 4px 10px;
+      border-radius: 9999px;
+      pointer-events: none;
+      font-family: system-ui, -apple-system, sans-serif;
+      box-shadow: 0 2px 4px rgba(0,0,0,0.2);
+    `;
+    container.appendChild(badge);
+    document.body.appendChild(container);
+    this.selections.set(selectionId, { element, container, badge, border });
+  }
+};
+function initBuilderSelection() {
+  if (typeof window !== "undefined" && window.parent !== window) {
+    if (document.readyState === "loading") {
+      document.addEventListener("DOMContentLoaded", () => new BuilderSelectionManager());
+    } else {
+      new BuilderSelectionManager();
+    }
+  }
+}
+export {
+  ContentStoreProvider,
+  ContentStoreProvider2 as ContentStoreProviderProd,
+  Link2 as Link,
+  MarkdownText,
+  Router,
+  SafeHtml,
+  MpImage as StaticImage,
+  MpText as StaticText,
+  YaImage,
+  YaLink,
+  YaText,
+  contentRegistry,
+  getAllContent,
+  getContent,
+  hasContent,
+  initBuilderSelection,
+  registerContent,
+  resolveAssetUrl,
+  serializeImageValue,
+  setAssetResolver,
+  useContentStore,
+  useContentStore2 as useContentStoreProd,
+  useNavigate
+};