@yoamigo.com/core 0.4.8 → 1.0.0

package/dist/index.js

@@ -895,7 +895,7 @@ var BuilderSelectionManager = class {
     const navLinks = document.querySelectorAll("nav a[href]");
     navLinks.forEach((link) => {
       const href = link.getAttribute("href");
-      if (href && href.startsWith("/")) {
+      if (href?.startsWith("/")) {
         const path = href.split("?")[0].replace(/\/$/, "") || "/";
         routes.add(path);
       }
@@ -907,7 +907,7 @@ var BuilderSelectionManager = class {
    * Non-blocking: uses requestIdleCallback between pages
    * Transfers ArrayBuffer directly (zero-copy) for performance
    */
-  async captureAllPagesScreenshots(checkpointId, viewport) {
+  async captureAllPagesScreenshots(checkpointId, _viewport) {
     console.log("[BuilderSelection] Starting multi-page capture for checkpoint:", checkpointId);
     const routes = this.getAllRoutes();
     const originalPath = window.location.pathname;
@@ -923,7 +923,8 @@ var BuilderSelectionManager = class {
       try {
         await new Promise((resolve) => {
           if ("requestIdleCallback" in window) {
-            requestIdleCallback(() => resolve(), { timeout: 1e3 });
+            ;
+            window.requestIdleCallback(() => resolve(), { timeout: 1e3 });
           } else {
             setTimeout(resolve, 50);
           }
@@ -1098,6 +1099,40 @@ function initBuilderSelection() {
   }
 }
 
+// src/lib/collection-context-registry.ts
+var registry = /* @__PURE__ */ new Map();
+function registerCollectionContext(prefix, context) {
+  if (registry.has(prefix)) {
+    console.warn(
+      `[collection-registry] Overwriting existing context for prefix "${prefix}". This usually means multiple CollectionContentProviders with the same prefix are mounted.`
+    );
+  }
+  registry.set(prefix, context);
+}
+function unregisterCollectionContext(prefix) {
+  registry.delete(prefix);
+}
+function getCollectionContextForField(fieldId) {
+  for (const [prefix, context] of registry) {
+    if (fieldId === prefix || fieldId.startsWith(prefix + ".")) {
+      return context;
+    }
+  }
+  return null;
+}
+function getAllCollectionFields() {
+  const result = [];
+  for (const [prefix, context] of registry) {
+    result.push({
+      prefix,
+      recordId: context.recordId,
+      collectionSlug: context.collectionSlug,
+      appId: context.appId
+    });
+  }
+  return result;
+}
+
 // src/components/ContentStoreProvider.tsx
 import { jsx } from "react/jsx-runtime";
 var ContentStoreContext = createContext(null);
@@ -1292,16 +1327,68 @@ function ContentStoreProvider({
   useEffect(() => {
     modeRef.current = mode;
   }, [mode]);
+  const contentRef = useRef(content);
+  useEffect(() => {
+    contentRef.current = content;
+  }, [content]);
   useEffect(() => {
     ;
     window.yaContentStore = {
-      getValue: (fieldId) => getValueRef.current(fieldId),
-      setValue: (fieldId, value2, source) => setValueRef.current(fieldId, value2, source),
-      getChangeSource: (fieldId) => getChangeSourceRef.current(fieldId),
+      // getValue: Check collection context first, then static content
+      getValue: (fieldId) => {
+        const collectionCtx = getCollectionContextForField(fieldId);
+        if (collectionCtx) {
+          return collectionCtx.getValue(fieldId);
+        }
+        return getValueRef.current(fieldId);
+      },
+      // setValue: Route to collection context if field belongs to one
+      setValue: (fieldId, value2, source) => {
+        const collectionCtx = getCollectionContextForField(fieldId);
+        if (collectionCtx?.setValue) {
+          collectionCtx.setValue(fieldId, value2, source);
+          collectionCtx.saveToBackend?.(fieldId, value2);
+          return;
+        }
+        setValueRef.current(fieldId, value2, source);
+      },
+      // getChangeSource: Check collection context first
+      getChangeSource: (fieldId) => {
+        return getChangeSourceRef.current(fieldId);
+      },
       getMode: () => modeRef.current,
       setMode: (mode2) => setModeRef.current(mode2),
       subscribe: (listener) => subscribeRef.current(listener),
-      saveToWorker: saveToWorkerRef.current ? (fieldId, value2) => saveToWorkerRef.current?.(fieldId, value2) : void 0
+      saveToWorker: saveToWorkerRef.current ? (fieldId, value2) => saveToWorkerRef.current?.(fieldId, value2) : void 0,
+      // NEW: Get info about a field (is it static or collection?)
+      getFieldInfo: (fieldId) => {
+        const collectionCtx = getCollectionContextForField(fieldId);
+        if (collectionCtx) {
+          return {
+            isCollectionField: true,
+            collectionSlug: collectionCtx.collectionSlug,
+            recordId: collectionCtx.recordId,
+            prefix: collectionCtx.prefix,
+            appId: collectionCtx.appId
+          };
+        }
+        return {
+          isCollectionField: false,
+          collectionSlug: void 0,
+          recordId: void 0,
+          prefix: void 0,
+          appId: void 0
+        };
+      },
+      // NEW: List all editable fields (for AI discovery)
+      listEditableFields: () => {
+        const staticFields = Array.from(contentRef.current.keys());
+        const collectionFields = getAllCollectionFields();
+        return {
+          static: staticFields,
+          collection: collectionFields
+        };
+      }
     };
     return () => {
       delete window.yaContentStore;
@@ -1389,7 +1476,7 @@ function ContentStoreProvider2({ children, initialContent }) {
 }
 
 // src/components/YaText.tsx
-import { useEffect as useEffect7, useRef as useRef8, useState as useState7, useCallback as useCallback9 } from "react";
+import { useEffect as useEffect8, useRef as useRef9, useState as useState8, useCallback as useCallback10 } from "react";
 import { createPortal as createPortal4 } from "react-dom";
 import { useEditor, EditorContent } from "@tiptap/react";
 
@@ -1499,11 +1586,322 @@ import Link from "@tiptap/extension-link";
 import { TextStyle } from "@tiptap/extension-text-style";
 import { Extension } from "@tiptap/core";
 
+// src/hooks/useContent.ts
+import { useMemo as useMemo3 } from "react";
+
+// src/components/CollectionContentProvider.tsx
+import {
+  createContext as createContext3,
+  useCallback as useCallback3,
+  useContext as useContext3,
+  useEffect as useEffect3,
+  useMemo as useMemo2,
+  useRef as useRef3,
+  useState as useState3
+} from "react";
+import { jsx as jsx4 } from "react/jsx-runtime";
+var CollectionContentContext = createContext3(null);
+function useCollectionContent() {
+  return useContext3(CollectionContentContext);
+}
+function extractSessionId2() {
+  if (typeof window === "undefined") return null;
+  const match = window.location.pathname.match(/\/session\/([^/]+)/);
+  return match ? match[1] : null;
+}
+function isBuilderPreview2() {
+  return typeof window !== "undefined" && (window.__YOAMIGO_EDIT_MODE__ === true || typeof import.meta !== "undefined" && import.meta.env?.YA_EDIT_MODE === "true");
+}
+function flattenObject(obj, prefix) {
+  const result = {};
+  function flatten(current, currentPath) {
+    if (current === null || current === void 0) {
+      result[currentPath] = "";
+      return;
+    }
+    if (typeof current === "string") {
+      result[currentPath] = current;
+      return;
+    }
+    if (typeof current === "number" || typeof current === "boolean") {
+      result[currentPath] = String(current);
+      return;
+    }
+    if (Array.isArray(current)) {
+      result[currentPath] = JSON.stringify(current);
+      current.forEach((item, index) => {
+        flatten(item, `${currentPath}.${index}`);
+      });
+      return;
+    }
+    if (typeof current === "object") {
+      const record = current;
+      if (record.src && typeof record.src === "string") {
+        result[currentPath] = JSON.stringify(current);
+      }
+      for (const [key, value] of Object.entries(record)) {
+        flatten(value, `${currentPath}.${key}`);
+      }
+    }
+  }
+  for (const [key, value] of Object.entries(obj)) {
+    flatten(value, `${prefix}.${key}`);
+  }
+  return result;
+}
+function CollectionContentProvider({
+  record,
+  prefix,
+  children,
+  recordId,
+  collectionSlug,
+  appId,
+  // changeType is auto-determined from recordId presence
+  changeType: _changeType = "UPDATE"
+}) {
+  const isEditable = Boolean(
+    collectionSlug && appId && isBuilderPreview2()
+  );
+  const baseContentMap = useMemo2(() => {
+    return flattenObject(record, prefix);
+  }, [record, prefix]);
+  const [localOverrides, setLocalOverrides] = useState3({});
+  const [changeSourceMap, setChangeSourceMap] = useState3({});
+  const isMountedRef = useRef3(true);
+  useEffect3(() => {
+    isMountedRef.current = true;
+    return () => {
+      isMountedRef.current = false;
+    };
+  }, []);
+  const getValue = useCallback3(
+    (fieldId) => {
+      if (fieldId in localOverrides) {
+        return localOverrides[fieldId];
+      }
+      if (fieldId in baseContentMap) {
+        return baseContentMap[fieldId];
+      }
+      const prefixedFieldId = fieldId.startsWith(prefix + ".") ? fieldId : `${prefix}.${fieldId}`;
+      if (prefixedFieldId in localOverrides) {
+        return localOverrides[prefixedFieldId];
+      }
+      if (prefixedFieldId in baseContentMap) {
+        return baseContentMap[prefixedFieldId];
+      }
+      return "";
+    },
+    [baseContentMap, localOverrides, prefix]
+  );
+  const setValue = useCallback3(
+    (fieldId, value, source = "ai") => {
+      if (!isEditable) {
+        console.warn("[CollectionContentProvider] setValue called but editing is not enabled");
+        return;
+      }
+      setLocalOverrides((prev) => ({ ...prev, [fieldId]: value }));
+      setChangeSourceMap((prev) => ({ ...prev, [fieldId]: source }));
+    },
+    [isEditable]
+  );
+  const getChangeSource = useCallback3(
+    (fieldId) => changeSourceMap[fieldId] || "initial",
+    [changeSourceMap]
+  );
+  const clearChangeSource = useCallback3(
+    (fieldId) => {
+      setChangeSourceMap((prev) => {
+        const next = { ...prev };
+        delete next[fieldId];
+        return next;
+      });
+    },
+    []
+  );
+  const saveToBackend = useCallback3(
+    async (fieldId, value) => {
+      if (!isEditable) {
+        console.warn("[CollectionContentProvider] saveToBackend called but editing is not enabled");
+        return;
+      }
+      const sessionId = extractSessionId2();
+      if (!sessionId) {
+        console.warn("[CollectionContentProvider] saveToBackend: Not in builder preview mode, skipping");
+        return;
+      }
+      try {
+        const response = await fetch(`/api/session/${sessionId}/collection-edit`, {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          credentials: "include",
+          body: JSON.stringify({
+            fieldId,
+            value,
+            recordId,
+            collectionSlug,
+            appId,
+            changeType: recordId ? "UPDATE" : "CREATE"
+          })
+        });
+        if (!response.ok) {
+          const error = await response.json();
+          console.error("[CollectionContentProvider] saveToBackend failed:", error);
+          throw new Error(error.error || "Failed to save collection edit");
+        }
+        console.log(`[CollectionContentProvider] Saved ${fieldId} to staging`);
+      } catch (error) {
+        console.error("[CollectionContentProvider] saveToBackend error:", error);
+        throw error;
+      }
+    },
+    [isEditable, recordId, collectionSlug, appId]
+  );
+  const contextValue = useMemo2(() => ({
+    getValue,
+    setValue: isEditable ? setValue : void 0,
+    saveToBackend: isEditable ? saveToBackend : void 0,
+    getChangeSource: isEditable ? getChangeSource : void 0,
+    clearChangeSource: isEditable ? clearChangeSource : void 0,
+    isCollectionContent: true,
+    prefix,
+    recordId,
+    collectionSlug,
+    appId,
+    isEditable
+  }), [
+    getValue,
+    setValue,
+    saveToBackend,
+    getChangeSource,
+    clearChangeSource,
+    isEditable,
+    prefix,
+    recordId,
+    collectionSlug,
+    appId
+  ]);
+  const contextValueRef = useRef3(contextValue);
+  useEffect3(() => {
+    contextValueRef.current = contextValue;
+  }, [contextValue]);
+  useEffect3(() => {
+    if (!isEditable) return;
+    const registryContext = {
+      getValue: (fid) => contextValueRef.current.getValue(fid),
+      setValue: (fid, val, src) => {
+        contextValueRef.current.setValue?.(fid, val, src);
+      },
+      saveToBackend: (fid, val) => {
+        return contextValueRef.current.saveToBackend?.(fid, val) ?? Promise.resolve();
+      },
+      prefix,
+      recordId,
+      collectionSlug,
+      appId
+    };
+    registerCollectionContext(prefix, registryContext);
+    return () => {
+      unregisterCollectionContext(prefix);
+    };
+  }, [isEditable, prefix, recordId, collectionSlug, appId]);
+  return /* @__PURE__ */ jsx4(CollectionContentContext.Provider, { value: contextValue, children });
+}
+
+// src/types/fields.ts
+function parseFieldValue(raw) {
+  if (!raw) {
+    return {};
+  }
+  if (typeof raw === "string") {
+    if (raw.startsWith("{") || raw.startsWith("[")) {
+      try {
+        return JSON.parse(raw);
+      } catch {
+        return raw;
+      }
+    }
+    return raw;
+  }
+  return raw;
+}
+function stringifyFieldValue(value) {
+  if (typeof value === "string") {
+    return value;
+  }
+  return JSON.stringify(value);
+}
+
+// src/hooks/useContent.ts
+function useContent(fieldId) {
+  const contentStore = useContentStore();
+  const collectionContext = useCollectionContent();
+  const isInCollection = Boolean(
+    collectionContext?.isEditable && fieldId.startsWith(collectionContext.prefix + ".")
+  );
+  return useMemo3(() => {
+    const getValueFn = () => {
+      return isInCollection ? collectionContext.getValue(fieldId) : contentStore.getValue(fieldId);
+    };
+    const setValueFn = (value, source) => {
+      if (isInCollection && collectionContext.setValue) {
+        collectionContext.setValue(fieldId, value, source);
+      } else {
+        contentStore.setValue(fieldId, value, source);
+      }
+    };
+    const saveFn = async () => {
+      const value = getValueFn();
+      if (isInCollection && collectionContext.saveToBackend) {
+        await collectionContext.saveToBackend(fieldId, value);
+      } else if (contentStore.saveToWorker) {
+        await contentStore.saveToWorker(fieldId, value);
+      }
+    };
+    const getChangeSourceFn = () => {
+      if (isInCollection) {
+        return collectionContext.getChangeSource?.(fieldId);
+      }
+      return contentStore.getChangeSource?.(fieldId);
+    };
+    const clearChangeSourceFn = () => {
+      if (isInCollection) {
+        collectionContext.clearChangeSource?.(fieldId);
+      } else {
+        contentStore.clearChangeSource?.(fieldId);
+      }
+    };
+    return {
+      get value() {
+        const raw = getValueFn();
+        return parseFieldValue(raw);
+      },
+      get() {
+        return getValueFn();
+      },
+      set(value, source) {
+        const stringValue = typeof value === "string" ? value : stringifyFieldValue(value);
+        setValueFn(stringValue, source);
+      },
+      async save() {
+        await saveFn();
+      },
+      get changeSource() {
+        return getChangeSourceFn();
+      },
+      clearChangeSource() {
+        clearChangeSourceFn();
+      },
+      mode: contentStore.mode,
+      isCollectionField: isInCollection
+    };
+  }, [fieldId, isInCollection, collectionContext, contentStore]);
+}
+
 // src/components/SafeHtml.tsx
-import { useEffect as useEffect3, useRef as useRef3, useState as useState3, useCallback as useCallback3 } from "react";
+import { useEffect as useEffect4, useRef as useRef4, useState as useState4, useCallback as useCallback4 } from "react";
 import { createPortal as createPortal2 } from "react-dom";
 import DOMPurify from "dompurify";
-import { Fragment, jsx as jsx4, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx as jsx5, jsxs } from "react/jsx-runtime";
 var ALLOWED_TAGS = ["strong", "em", "a", "span", "br", "b", "i", "u"];
 var ALLOWED_ATTR = ["href", "style", "class", "target", "rel"];
 if (typeof window !== "undefined") {
@@ -1561,8 +1959,8 @@ function LinkIcon() {
       strokeLinecap: "round",
       strokeLinejoin: "round",
       children: [
-        /* @__PURE__ */ jsx4("path", { d: "M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71" }),
-        /* @__PURE__ */ jsx4("path", { d: "M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71" })
+        /* @__PURE__ */ jsx5("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__ */ jsx5("path", { d: "M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71" })
       ]
     }
   );
@@ -1594,20 +1992,20 @@ function LinkPopover({
         }
       },
       children: [
-        /* @__PURE__ */ jsx4(LinkIcon, {}),
+        /* @__PURE__ */ jsx5(LinkIcon, {}),
         /* @__PURE__ */ jsxs("span", { className: "ya-link-popover-text", children: [
-          /* @__PURE__ */ jsx4("span", { className: "ya-link-popover-prefix", children: "Go to " }),
-          /* @__PURE__ */ jsx4("span", { className: "ya-link-popover-name", children: displayText })
+          /* @__PURE__ */ jsx5("span", { className: "ya-link-popover-prefix", children: "Go to " }),
+          /* @__PURE__ */ jsx5("span", { className: "ya-link-popover-name", children: displayText })
         ] })
       ]
     }
   );
 }
 function SafeHtml({ content, className, mode = "read-only" }) {
-  const containerRef = useRef3(null);
-  const showTimerRef = useRef3(void 0);
-  const hideTimerRef = useRef3(void 0);
-  const [popoverState, setPopoverState] = useState3({
+  const containerRef = useRef4(null);
+  const showTimerRef = useRef4(void 0);
+  const hideTimerRef = useRef4(void 0);
+  const [popoverState, setPopoverState] = useState4({
     isVisible: false,
     href: "",
     displayText: "",
@@ -1618,20 +2016,20 @@ function SafeHtml({ content, className, mode = "read-only" }) {
     ALLOWED_TAGS,
     ALLOWED_ATTR
   });
-  const hidePopover = useCallback3(() => {
+  const hidePopover = useCallback4(() => {
     clearTimeout(showTimerRef.current);
     setPopoverState((prev) => ({ ...prev, isVisible: false }));
   }, []);
-  const scheduleHide = useCallback3(() => {
+  const scheduleHide = useCallback4(() => {
     clearTimeout(showTimerRef.current);
     hideTimerRef.current = window.setTimeout(() => {
       hidePopover();
     }, 100);
   }, [hidePopover]);
-  const cancelHide = useCallback3(() => {
+  const cancelHide = useCallback4(() => {
     clearTimeout(hideTimerRef.current);
   }, []);
-  const handlePopoverClick = useCallback3(() => {
+  const handlePopoverClick = useCallback4(() => {
     if (popoverState.isExternal) {
       window.open(popoverState.href, "_blank", "noopener,noreferrer");
     } else {
@@ -1639,7 +2037,7 @@ function SafeHtml({ content, className, mode = "read-only" }) {
     }
     hidePopover();
   }, [popoverState.href, popoverState.isExternal, hidePopover]);
-  useEffect3(() => {
+  useEffect4(() => {
     if (mode !== "inline-edit" || !containerRef.current) return;
     const container = containerRef.current;
     const handleMouseOver = (e) => {
@@ -1697,7 +2095,7 @@ function SafeHtml({ content, className, mode = "read-only" }) {
     };
   }, [mode, scheduleHide]);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx4(
+    /* @__PURE__ */ jsx5(
       "span",
       {
         ref: containerRef,
@@ -1706,7 +2104,7 @@ function SafeHtml({ content, className, mode = "read-only" }) {
       }
     ),
     mode === "inline-edit" && popoverState.isVisible && createPortal2(
-      /* @__PURE__ */ jsx4(
+      /* @__PURE__ */ jsx5(
         LinkPopover,
         {
           displayText: popoverState.displayText,
@@ -1722,37 +2120,37 @@ function SafeHtml({ content, className, mode = "read-only" }) {
 }
 
 // src/hooks/useAnimatedText.ts
-import { useMemo as useMemo4 } from "react";
+import { useMemo as useMemo6 } from "react";
 
 // src/hooks/useAIEditAnimation.ts
-import { useState as useState4, useEffect as useEffect4, useRef as useRef5, useCallback as useCallback5, useMemo as useMemo3 } from "react";
+import { useState as useState5, useEffect as useEffect5, useRef as useRef6, useCallback as useCallback6, useMemo as useMemo5 } from "react";
 
 // src/contexts/AIEditContext.tsx
-import { createContext as createContext3, useContext as useContext3, useCallback as useCallback4, useRef as useRef4, useMemo as useMemo2 } from "react";
-import { jsx as jsx5 } from "react/jsx-runtime";
-var AIEditContext = createContext3(null);
+import { createContext as createContext4, useContext as useContext4, useCallback as useCallback5, useRef as useRef5, useMemo as useMemo4 } from "react";
+import { jsx as jsx6 } from "react/jsx-runtime";
+var AIEditContext = createContext4(null);
 function useAIEditContext() {
-  const context = useContext3(AIEditContext);
+  const context = useContext4(AIEditContext);
   if (!context) {
     throw new Error("useAIEditContext must be used within an AIEditProvider");
   }
   return context;
 }
 function useAIEditContextOptional() {
-  return useContext3(AIEditContext);
+  return useContext4(AIEditContext);
 }
 function AIEditProvider({ children, staggerDelay = 100 }) {
-  const animationsRef = useRef4(/* @__PURE__ */ new Map());
-  const listenersRef = useRef4(/* @__PURE__ */ new Map());
-  const queueRef = useRef4([]);
-  const processingRef = useRef4(false);
-  const notifyListeners = useCallback4((fieldId) => {
+  const animationsRef = useRef5(/* @__PURE__ */ new Map());
+  const listenersRef = useRef5(/* @__PURE__ */ new Map());
+  const queueRef = useRef5([]);
+  const processingRef = useRef5(false);
+  const notifyListeners = useCallback5((fieldId) => {
     const listeners = listenersRef.current.get(fieldId);
     if (listeners) {
       listeners.forEach((listener) => listener());
     }
   }, []);
-  const processQueue = useCallback4(() => {
+  const processQueue = useCallback5(() => {
     if (processingRef.current || queueRef.current.length === 0) return;
     processingRef.current = true;
     const fieldId = queueRef.current.shift();
@@ -1767,7 +2165,7 @@ function AIEditProvider({ children, staggerDelay = 100 }) {
       processQueue();
     }, staggerDelay);
   }, [staggerDelay, notifyListeners]);
-  const queueAnimation = useCallback4(
+  const queueAnimation = useCallback5(
     (fieldId, config) => {
       const existing = animationsRef.current.get(fieldId);
       if (existing?.status === "animating") {
@@ -1790,7 +2188,7 @@ function AIEditProvider({ children, staggerDelay = 100 }) {
     },
     [notifyListeners, processQueue]
   );
-  const cancelAnimation = useCallback4(
+  const cancelAnimation = useCallback5(
     (fieldId) => {
       const state = animationsRef.current.get(fieldId);
       if (state) {
@@ -1804,14 +2202,14 @@ function AIEditProvider({ children, staggerDelay = 100 }) {
     },
     [notifyListeners]
   );
-  const isAnimating = useCallback4((fieldId) => {
+  const isAnimating = useCallback5((fieldId) => {
     const state = animationsRef.current.get(fieldId);
     return state?.status === "animating" || state?.status === "pending";
   }, []);
-  const getAnimationState = useCallback4((fieldId) => {
+  const getAnimationState = useCallback5((fieldId) => {
     return animationsRef.current.get(fieldId);
   }, []);
-  const subscribe = useCallback4((fieldId, listener) => {
+  const subscribe = useCallback5((fieldId, listener) => {
     let listeners = listenersRef.current.get(fieldId);
     if (!listeners) {
       listeners = /* @__PURE__ */ new Set();
@@ -1825,7 +2223,7 @@ function AIEditProvider({ children, staggerDelay = 100 }) {
       }
     };
   }, []);
-  const completeAnimation = useCallback4(
+  const completeAnimation = useCallback5(
     (fieldId) => {
       const state = animationsRef.current.get(fieldId);
       if (state) {
@@ -1840,7 +2238,7 @@ function AIEditProvider({ children, staggerDelay = 100 }) {
     },
     [notifyListeners]
   );
-  const value = useMemo2(
+  const value = useMemo4(
     () => ({
       queueAnimation,
       cancelAnimation,
@@ -1851,7 +2249,7 @@ function AIEditProvider({ children, staggerDelay = 100 }) {
     }),
     [queueAnimation, cancelAnimation, isAnimating, getAnimationState, subscribe, completeAnimation]
   );
-  return /* @__PURE__ */ jsx5(AIEditContext.Provider, { value, children });
+  return /* @__PURE__ */ jsx6(AIEditContext.Provider, { value, children });
 }
 
 // src/hooks/useAIEditAnimation.ts
@@ -1859,15 +2257,15 @@ function useAIEditAnimation(fieldId, value, options) {
   const { enabled = true, strategy, maxDuration = 2e3, onStart, onComplete } = options;
   const context = useAIEditContextOptional();
   const { getChangeSource, clearChangeSource } = useContentStore();
-  const previousValueRef = useRef5(value);
-  const isFirstRender = useRef5(true);
-  const [phase, setPhase] = useState4("idle");
-  const [progress, setProgress] = useState4(0);
-  const [displayValue, setDisplayValue] = useState4(value);
-  const metadataRef = useRef5(null);
-  const animationFrameRef = useRef5(null);
-  const startTimeRef = useRef5(0);
-  const cancel = useCallback5(() => {
+  const previousValueRef = useRef6(value);
+  const isFirstRender = useRef6(true);
+  const [phase, setPhase] = useState5("idle");
+  const [progress, setProgress] = useState5(0);
+  const [displayValue, setDisplayValue] = useState5(value);
+  const metadataRef = useRef6(null);
+  const animationFrameRef = useRef6(null);
+  const startTimeRef = useRef6(0);
+  const cancel = useCallback6(() => {
     if (animationFrameRef.current !== null) {
       cancelAnimationFrame(animationFrameRef.current);
       animationFrameRef.current = null;
@@ -1878,7 +2276,7 @@ function useAIEditAnimation(fieldId, value, options) {
     metadataRef.current = null;
     context?.cancelAnimation(fieldId);
   }, [value, context, fieldId]);
-  const runAnimation = useCallback5(() => {
+  const runAnimation = useCallback6(() => {
     if (!metadataRef.current) return;
     const metadata = metadataRef.current;
     const elapsed = performance.now() - startTimeRef.current;
@@ -1903,7 +2301,7 @@ function useAIEditAnimation(fieldId, value, options) {
     setDisplayValue(interpolatedValue);
     animationFrameRef.current = requestAnimationFrame(runAnimation);
   }, [strategy, maxDuration, context, fieldId, onComplete, clearChangeSource]);
-  useEffect4(() => {
+  useEffect5(() => {
     if (isFirstRender.current) {
       isFirstRender.current = false;
       previousValueRef.current = value;
@@ -1957,14 +2355,14 @@ function useAIEditAnimation(fieldId, value, options) {
       }
     };
   }, [value, enabled, strategy, context, fieldId, maxDuration, onStart, runAnimation, getChangeSource, clearChangeSource]);
-  useEffect4(() => {
+  useEffect5(() => {
     return () => {
       if (animationFrameRef.current !== null) {
         cancelAnimationFrame(animationFrameRef.current);
       }
     };
   }, []);
-  const wrapperProps = useMemo3(
+  const wrapperProps = useMemo5(
     () => ({
       className: phase === "animating" ? "ya-ai-editing" : phase === "complete" ? "ya-ai-complete" : "",
       "data-ai-editing": phase === "animating"
@@ -2186,7 +2584,7 @@ function useAnimatedText(fieldId, content, options = {}) {
     onStart,
     onComplete
   } = options;
-  const customStrategy = useMemo4(() => {
+  const customStrategy = useMemo6(() => {
     if (charDelay === 50) {
       return textTypingStrategy;
     }
@@ -2225,7 +2623,7 @@ function useAnimatedText(fieldId, content, options = {}) {
     onStart,
     onComplete
   });
-  const cursorPosition = useMemo4(() => {
+  const cursorPosition = useMemo6(() => {
     if (!isAnimating) return null;
     const diff = computeTextDiff(content, displayValue);
     const { deleteDuration, typeDuration } = calculateAnimationTiming(diff, {
@@ -2256,7 +2654,7 @@ function useAnimatedText(fieldId, content, options = {}) {
 }
 
 // src/components/BubbleIcons.tsx
-import { jsx as jsx6, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx7, jsxs as jsxs2 } from "react/jsx-runtime";
 function BoldIcon({ size = 16, className }) {
   return /* @__PURE__ */ jsxs2(
     "svg",
@@ -2271,8 +2669,8 @@ function BoldIcon({ size = 16, className }) {
       strokeLinejoin: "round",
       className,
       children: [
-        /* @__PURE__ */ jsx6("path", { d: "M6 4h8a4 4 0 0 1 4 4 4 4 0 0 1-4 4H6z" }),
-        /* @__PURE__ */ jsx6("path", { d: "M6 12h9a4 4 0 0 1 4 4 4 4 0 0 1-4 4H6z" })
+        /* @__PURE__ */ jsx7("path", { d: "M6 4h8a4 4 0 0 1 4 4 4 4 0 0 1-4 4H6z" }),
+        /* @__PURE__ */ jsx7("path", { d: "M6 12h9a4 4 0 0 1 4 4 4 4 0 0 1-4 4H6z" })
       ]
     }
   );
@@ -2291,9 +2689,9 @@ function ItalicIcon({ size = 16, className }) {
       strokeLinejoin: "round",
       className,
       children: [
-        /* @__PURE__ */ jsx6("line", { x1: "19", y1: "4", x2: "10", y2: "4" }),
-        /* @__PURE__ */ jsx6("line", { x1: "14", y1: "20", x2: "5", y2: "20" }),
-        /* @__PURE__ */ jsx6("line", { x1: "15", y1: "4", x2: "9", y2: "20" })
+        /* @__PURE__ */ jsx7("line", { x1: "19", y1: "4", x2: "10", y2: "4" }),
+        /* @__PURE__ */ jsx7("line", { x1: "14", y1: "20", x2: "5", y2: "20" }),
+        /* @__PURE__ */ jsx7("line", { x1: "15", y1: "4", x2: "9", y2: "20" })
       ]
     }
   );
@@ -2312,14 +2710,14 @@ function LinkIcon2({ size = 16, className }) {
       strokeLinejoin: "round",
       className,
       children: [
-        /* @__PURE__ */ jsx6("path", { d: "M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71" }),
-        /* @__PURE__ */ jsx6("path", { d: "M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71" })
+        /* @__PURE__ */ jsx7("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__ */ jsx7("path", { d: "M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71" })
       ]
     }
   );
 }
 function ChevronDownIcon({ size = 12, className }) {
-  return /* @__PURE__ */ jsx6(
+  return /* @__PURE__ */ jsx7(
     "svg",
     {
       width: size,
@@ -2331,15 +2729,15 @@ function ChevronDownIcon({ size = 12, className }) {
       strokeLinecap: "round",
       strokeLinejoin: "round",
       className,
-      children: /* @__PURE__ */ jsx6("polyline", { points: "6 9 12 15 18 9" })
+      children: /* @__PURE__ */ jsx7("polyline", { points: "6 9 12 15 18 9" })
     }
   );
 }
 
 // src/components/BubbleDropdown.tsx
-import { useEffect as useEffect5, useLayoutEffect as useLayoutEffect2, useState as useState5, useRef as useRef6, useCallback as useCallback6 } from "react";
+import { useEffect as useEffect6, useLayoutEffect as useLayoutEffect2, useState as useState6, useRef as useRef7, useCallback as useCallback7 } from "react";
 import { createPortal as createPortal3 } from "react-dom";
-import { Fragment as Fragment2, jsx as jsx7, jsxs as jsxs3 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx8, jsxs as jsxs3 } from "react/jsx-runtime";
 function BubbleDropdown({
   label,
   open,
@@ -2348,14 +2746,14 @@ function BubbleDropdown({
   triggerClassName = "",
   panelClassName = ""
 }) {
-  const triggerRef = useRef6(null);
-  const panelRef = useRef6(null);
-  const [position, setPosition] = useState5(null);
-  const [isMounted, setIsMounted] = useState5(false);
-  useEffect5(() => {
+  const triggerRef = useRef7(null);
+  const panelRef = useRef7(null);
+  const [position, setPosition] = useState6(null);
+  const [isMounted, setIsMounted] = useState6(false);
+  useEffect6(() => {
     setIsMounted(true);
   }, []);
-  const calculatePosition = useCallback6(() => {
+  const calculatePosition = useCallback7(() => {
     if (!triggerRef.current) return null;
     const triggerRect = triggerRef.current.getBoundingClientRect();
     const gap = 4;
@@ -2371,7 +2769,7 @@ function BubbleDropdown({
     }
     return { top, left, adjusted: false };
   }, []);
-  useEffect5(() => {
+  useEffect6(() => {
     if (open) {
       const pos = calculatePosition();
       setPosition(pos);
@@ -2400,7 +2798,7 @@ function BubbleDropdown({
       setPosition((prev) => prev ? { ...prev, adjusted: true } : null);
     }
   }, [open, position]);
-  useEffect5(() => {
+  useEffect6(() => {
     if (!open) return;
     const handleClickOutside = (e) => {
       if (triggerRef.current?.contains(e.target) || panelRef.current?.contains(e.target)) {
@@ -2453,13 +2851,13 @@ function BubbleDropdown({
         onClick: handleTriggerClick,
         onMouseDown: handleTriggerMouseDown,
         children: [
-          /* @__PURE__ */ jsx7("span", { className: "ya-bubble-dropdown-label", children: label }),
-          /* @__PURE__ */ jsx7(ChevronDownIcon, { size: 10, className: `ya-bubble-dropdown-arrow ${open ? "is-open" : ""}` })
+          /* @__PURE__ */ jsx8("span", { className: "ya-bubble-dropdown-label", children: label }),
+          /* @__PURE__ */ jsx8(ChevronDownIcon, { size: 10, className: `ya-bubble-dropdown-arrow ${open ? "is-open" : ""}` })
         ]
       }
     ),
     isMounted && open && position && createPortal3(
-      /* @__PURE__ */ jsx7(
+      /* @__PURE__ */ jsx8(
         "div",
         {
           ref: panelRef,
@@ -2475,8 +2873,8 @@ function BubbleDropdown({
 }
 
 // src/components/FontSizePicker.tsx
-import { useState as useState6, useEffect as useEffect6, useCallback as useCallback7, useRef as useRef7 } from "react";
-import { jsx as jsx8, jsxs as jsxs4 } from "react/jsx-runtime";
+import { useState as useState7, useEffect as useEffect7, useCallback as useCallback8, useRef as useRef8 } from "react";
+import { jsx as jsx9, jsxs as jsxs4 } from "react/jsx-runtime";
 var SIZE_PRESETS = [
   { name: "S", value: "0.875rem" },
   { name: "M", value: "1rem" },
@@ -2533,28 +2931,28 @@ function normalizeValue(input) {
   return `${num}${unit}`;
 }
 function FontSizePicker({ value, onChange, onClose }) {
-  const [inputValue, setInputValue] = useState6(value || "");
-  const inputRef = useRef7(null);
-  useEffect6(() => {
+  const [inputValue, setInputValue] = useState7(value || "");
+  const inputRef = useRef8(null);
+  useEffect7(() => {
     inputRef.current?.focus();
     inputRef.current?.select();
   }, []);
-  useEffect6(() => {
+  useEffect7(() => {
     setInputValue(value || "");
   }, [value]);
-  const handlePresetClick = useCallback7((e, presetValue) => {
+  const handlePresetClick = useCallback8((e, presetValue) => {
     e.stopPropagation();
     onChange(presetValue);
     onClose();
   }, [onChange, onClose]);
-  const handlePresetMouseDown = useCallback7((e) => {
+  const handlePresetMouseDown = useCallback8((e) => {
     e.preventDefault();
     e.stopPropagation();
   }, []);
-  const handleInputChange = useCallback7((e) => {
+  const handleInputChange = useCallback8((e) => {
     setInputValue(e.target.value);
   }, []);
-  const handleInputKeyDown = useCallback7((e) => {
+  const handleInputKeyDown = useCallback8((e) => {
     if (e.key === "ArrowUp" || e.key === "ArrowDown") {
       e.preventDefault();
       e.stopPropagation();
@@ -2596,7 +2994,7 @@ function FontSizePicker({ value, onChange, onClose }) {
   }, [inputValue, value, onChange, onClose]);
   const activePreset = getPresetName(value);
   return /* @__PURE__ */ jsxs4("div", { className: "ya-font-size-picker", children: [
-    /* @__PURE__ */ jsx8("div", { className: "ya-size-presets", children: SIZE_PRESETS.map((preset) => /* @__PURE__ */ jsxs4(
+    /* @__PURE__ */ jsx9("div", { className: "ya-size-presets", children: SIZE_PRESETS.map((preset) => /* @__PURE__ */ jsxs4(
       "button",
       {
         type: "button",
@@ -2604,13 +3002,13 @@ function FontSizePicker({ value, onChange, onClose }) {
         onClick: (e) => handlePresetClick(e, preset.value),
         onMouseDown: handlePresetMouseDown,
         children: [
-          /* @__PURE__ */ jsx8("span", { className: "ya-size-preset-name", children: preset.name }),
-          /* @__PURE__ */ jsx8("span", { className: "ya-size-preset-value", children: preset.value })
+          /* @__PURE__ */ jsx9("span", { className: "ya-size-preset-name", children: preset.name }),
+          /* @__PURE__ */ jsx9("span", { className: "ya-size-preset-value", children: preset.value })
         ]
       },
       preset.name
     )) }),
-    /* @__PURE__ */ jsx8("div", { className: "ya-size-combobox", children: /* @__PURE__ */ jsx8(
+    /* @__PURE__ */ jsx9("div", { className: "ya-size-combobox", children: /* @__PURE__ */ jsx9(
       "input",
       {
         ref: inputRef,
@@ -2630,8 +3028,8 @@ function FontSizePicker({ value, onChange, onClose }) {
 }
 
 // src/components/FontWeightPicker.tsx
-import { useCallback as useCallback8 } from "react";
-import { jsx as jsx9 } from "react/jsx-runtime";
+import { useCallback as useCallback9 } from "react";
+import { jsx as jsx10 } from "react/jsx-runtime";
 var WEIGHT_PRESETS = [
   { name: "Regular", value: "400" },
   { name: "Semi-bold", value: "600" },
@@ -2645,16 +3043,16 @@ function getFontWeightLabel(value) {
   return value;
 }
 function FontWeightPicker({ value, onChange, onClose }) {
-  const handleClick = useCallback8((e, weightValue) => {
+  const handleClick = useCallback9((e, weightValue) => {
     e.stopPropagation();
     onChange(weightValue);
     onClose();
   }, [onChange, onClose]);
-  const handleMouseDown = useCallback8((e) => {
+  const handleMouseDown = useCallback9((e) => {
     e.preventDefault();
     e.stopPropagation();
   }, []);
-  return /* @__PURE__ */ jsx9("div", { className: "ya-font-weight-picker", children: WEIGHT_PRESETS.map((preset) => /* @__PURE__ */ jsx9(
+  return /* @__PURE__ */ jsx10("div", { className: "ya-font-weight-picker", children: WEIGHT_PRESETS.map((preset) => /* @__PURE__ */ jsx10(
     "button",
     {
       type: "button",
@@ -3017,7 +3415,7 @@ body.builder-selector-active .ya-text-editable:not(.ya-text-editing) *::-moz-sel
 styleInject('.ya-ai-editing {\n  position: relative;\n}\n.ya-ai-editing::before {\n  content: "";\n  position: absolute;\n  inset: -4px;\n  border: 2px solid;\n  border-radius: 6px;\n  animation: ya-ai-focus-pulse 1.5s ease-in-out infinite;\n  pointer-events: none;\n  z-index: 10;\n}\n@keyframes ya-ai-focus-pulse {\n  0%, 100% {\n    border-color: rgba(239, 68, 68, 0.6);\n    box-shadow: 0 0 15px rgba(239, 68, 68, 0.2);\n  }\n  50% {\n    border-color: rgba(249, 115, 22, 0.8);\n    box-shadow: 0 0 25px rgba(249, 115, 22, 0.3);\n  }\n}\n.ya-typing-cursor {\n  display: inline-block;\n  width: 2px;\n  height: 1.1em;\n  background:\n    linear-gradient(\n      180deg,\n      #EF4444,\n      #F97316);\n  animation: ya-cursor-blink 0.5s step-end infinite;\n  margin-left: 1px;\n  vertical-align: text-bottom;\n  border-radius: 1px;\n}\n@keyframes ya-cursor-blink {\n  50% {\n    opacity: 0;\n  }\n}\n.ya-ai-complete {\n  animation: ya-complete-glow 0.4s ease-out forwards;\n}\n@keyframes ya-complete-glow {\n  0% {\n    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.5);\n  }\n  50% {\n    box-shadow: 0 0 20px 5px rgba(16, 185, 129, 0.3);\n  }\n  100% {\n    box-shadow: 0 0 0 0 transparent;\n  }\n}\n@media (prefers-reduced-motion: reduce) {\n  .ya-ai-editing::before {\n    animation: none;\n    border-color: rgba(239, 68, 68, 0.6);\n    box-shadow: 0 0 15px rgba(239, 68, 68, 0.2);\n  }\n  .ya-typing-cursor {\n    animation: none;\n    opacity: 1;\n  }\n  .ya-ai-complete {\n    animation: ya-complete-glow-reduced 0.2s ease-out forwards;\n  }\n  @keyframes ya-complete-glow-reduced {\n    0% {\n      background-color: rgba(16, 185, 129, 0.1);\n    }\n    100% {\n      background-color: transparent;\n    }\n  }\n}\n.ya-ai-hidden {\n  opacity: 0;\n  visibility: hidden;\n}\n.ya-ai-fade-in {\n  animation: ya-fade-in 0.3s ease-out forwards;\n}\n@keyframes ya-fade-in {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n.ya-ai-pulse {\n  animation: ya-scale-pulse 0.3s ease-out forwards;\n}\n@keyframes ya-scale-pulse {\n  0% {\n    transform: scale(1);\n  }\n  50% {\n    transform: scale(1.02);\n  }\n  100% {\n    transform: scale(1);\n  }\n}\n');
 
 // src/components/YaText.tsx
-import { Fragment as Fragment3, jsx as jsx10, jsxs as jsxs5 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx11, jsxs as jsxs5 } from "react/jsx-runtime";
 var FontSize = Extension.create({
   name: "fontSize",
   addOptions() {
@@ -3097,13 +3495,15 @@ var FontWeight = Extension.create({
   }
 });
 function YaText({ fieldId, className, as: Component = "span", children }) {
-  const { getValue, setValue, mode, saveToWorker, activeFieldId, setActiveField } = useContentStore();
-  const storeContent = getValue(fieldId);
+  const contentHandle = useContent(fieldId);
+  const { mode } = contentHandle;
+  const { activeFieldId, setActiveField } = useContentStore();
+  const storeContent = contentHandle.get();
   const content = storeContent || (typeof children === "string" ? children : "");
-  const [isEditing, setIsEditing] = useState7(false);
-  const [showBubbleMenu, setShowBubbleMenu] = useState7(false);
-  const [fontSizeOpen, setFontSizeOpen] = useState7(false);
-  const [fontWeightOpen, setFontWeightOpen] = useState7(false);
+  const [isEditing, setIsEditing] = useState8(false);
+  const [showBubbleMenu, setShowBubbleMenu] = useState8(false);
+  const [fontSizeOpen, setFontSizeOpen] = useState8(false);
+  const [fontWeightOpen, setFontWeightOpen] = useState8(false);
   const {
     displayContent,
     isAnimating,
@@ -3111,16 +3511,16 @@ function YaText({ fieldId, className, as: Component = "span", children }) {
   } = useAnimatedText(fieldId, content, {
     enabled: mode === "inline-edit" && !isEditing
   });
-  const [originalContent, setOriginalContent] = useState7(content);
-  const containerRef = useRef8(null);
-  const originalContentRef = useRef8(content);
-  const originalHadLineBreaksRef = useRef8(false);
-  const [actionButtonsPos, setActionButtonsPos] = useState7(null);
-  const handleSaveRef = useRef8(() => {
+  const [originalContent, setOriginalContent] = useState8(content);
+  const containerRef = useRef9(null);
+  const originalContentRef = useRef9(content);
+  const originalHadLineBreaksRef = useRef9(false);
+  const [actionButtonsPos, setActionButtonsPos] = useState8(null);
+  const handleSaveRef = useRef9(() => {
   });
-  const handleCancelRef = useRef8(() => {
+  const handleCancelRef = useRef9(() => {
   });
-  const handleCloseRef = useRef8(() => {
+  const handleCloseRef = useRef9(() => {
   });
   const editor = useEditor({
     extensions: [
@@ -3176,19 +3576,19 @@ function YaText({ fieldId, className, as: Component = "span", children }) {
     },
     parseOptions: { preserveWhitespace: "full" }
   });
-  useEffect7(() => {
+  useEffect8(() => {
     if (editor && !isEditing) {
       if (editor.getHTML() !== content) {
         editor.commands.setContent(content, { parseOptions: { preserveWhitespace: "full" } });
       }
     }
   }, [content, editor, isEditing]);
-  useEffect7(() => {
+  useEffect8(() => {
     if (isEditing && activeFieldId !== null && activeFieldId !== fieldId) {
       setIsEditing(false);
     }
   }, [activeFieldId, fieldId, isEditing]);
-  useEffect7(() => {
+  useEffect8(() => {
     if (!isEditing || !containerRef.current || !editor) {
       setActionButtonsPos(null);
       return;
@@ -3213,31 +3613,31 @@ function YaText({ fieldId, className, as: Component = "span", children }) {
       window.removeEventListener("resize", updatePosition);
     };
   }, [isEditing, editor]);
-  const handleSave = useCallback9(() => {
+  const handleSave = useCallback10(() => {
     if (!editor) return;
     let html = editor.getHTML();
     const separator = originalHadLineBreaksRef.current ? "<br><br>" : " ";
     html = html.replace(/<\/p><p>/g, separator).replace(/^<p>/, "").replace(/<\/p>$/, "");
     if (html !== originalContentRef.current) {
-      setValue(fieldId, html, "user");
-      saveToWorker?.(fieldId, html);
+      contentHandle.set(html, "user");
+      contentHandle.save();
       originalContentRef.current = html;
     }
     setShowBubbleMenu(false);
     setIsEditing(false);
-  }, [editor, fieldId, setValue, saveToWorker]);
-  const handleCancel = useCallback9(() => {
+  }, [editor, contentHandle]);
+  const handleCancel = useCallback10(() => {
     if (editor) {
       editor.commands.setContent(originalContent, { parseOptions: { preserveWhitespace: "full" } });
     }
     setShowBubbleMenu(false);
     setIsEditing(false);
   }, [editor, originalContent]);
-  useEffect7(() => {
+  useEffect8(() => {
     handleSaveRef.current = handleSave;
     handleCancelRef.current = handleCancel;
   }, [handleSave, handleCancel]);
-  useEffect7(() => {
+  useEffect8(() => {
     if (mode !== "inline-edit") return;
     const handleEditRequest = (event) => {
       const customEvent = event;
@@ -3260,7 +3660,7 @@ function YaText({ fieldId, className, as: Component = "span", children }) {
     window.addEventListener("yatext:edit-mode", handleEditRequest);
     return () => window.removeEventListener("yatext:edit-mode", handleEditRequest);
   }, [mode, fieldId, content, editor, setActiveField]);
-  const handleClose = useCallback9(() => {
+  const handleClose = useCallback10(() => {
     if (!editor) {
       setShowBubbleMenu(false);
       setIsEditing(false);
@@ -3270,16 +3670,16 @@ function YaText({ fieldId, className, as: Component = "span", children }) {
     const separator = originalHadLineBreaksRef.current ? "<br><br>" : " ";
     currentHtml = currentHtml.replace(/<\/p><p>/g, separator).replace(/^<p>/, "").replace(/<\/p>$/, "");
     if (currentHtml !== originalContentRef.current) {
-      setValue(fieldId, currentHtml, "user");
-      saveToWorker?.(fieldId, currentHtml);
+      contentHandle.set(currentHtml, "user");
+      contentHandle.save();
     }
     setShowBubbleMenu(false);
     setIsEditing(false);
-  }, [editor, fieldId, setValue, saveToWorker]);
-  useEffect7(() => {
+  }, [editor, contentHandle]);
+  useEffect8(() => {
     handleCloseRef.current = handleClose;
   }, [handleClose]);
-  const handleClick = useCallback9((e) => {
+  const handleClick = useCallback10((e) => {
     if (isEditing) {
       e.preventDefault();
       e.stopPropagation();
@@ -3310,7 +3710,7 @@ function YaText({ fieldId, className, as: Component = "span", children }) {
       }, 20);
     }
   }, [mode, isEditing, content, editor, fieldId, setActiveField, handleClose]);
-  const handleKeyDown = useCallback9(
+  const handleKeyDown = useCallback10(
     (event) => {
       if (!isEditing) return;
       if (event.key === "Enter" && !event.shiftKey) {
@@ -3331,7 +3731,7 @@ function YaText({ fieldId, className, as: Component = "span", children }) {
     },
     [isEditing, handleSave, handleCancel]
   );
-  const handleLink = useCallback9(() => {
+  const handleLink = useCallback10(() => {
     if (!editor) return;
     const previousUrl = editor.getAttributes("link").href;
     const url = window.prompt("Enter URL:", previousUrl || "https://");
@@ -3342,7 +3742,7 @@ function YaText({ fieldId, className, as: Component = "span", children }) {
       editor.chain().focus().extendMarkRange("link").setLink({ href: url }).run();
     }
   }, [editor]);
-  const handleFontSizeChange = useCallback9(
+  const handleFontSizeChange = useCallback10(
     (size) => {
       if (!editor) return;
       if (size === "") {
@@ -3353,7 +3753,7 @@ function YaText({ fieldId, className, as: Component = "span", children }) {
     },
     [editor]
   );
-  const handleFontWeightChange = useCallback9(
+  const handleFontWeightChange = useCallback10(
     (weight) => {
       if (!editor) return;
       if (weight === "") {
@@ -3398,14 +3798,14 @@ function YaText({ fieldId, className, as: Component = "span", children }) {
     return "";
   };
   if (mode === "read-only") {
-    return /* @__PURE__ */ jsx10(
+    return /* @__PURE__ */ jsx11(
       Component,
       {
         ref: containerRef,
         className,
         "data-ya-restricted": "true",
         "data-field-id": fieldId,
-        children: /* @__PURE__ */ jsx10(SafeHtml, { content, mode })
+        children: /* @__PURE__ */ jsx11(SafeHtml, { content, mode })
       }
     );
   }
@@ -3418,7 +3818,7 @@ function YaText({ fieldId, className, as: Component = "span", children }) {
     wrapperClassName
   ].filter(Boolean).join(" ");
   const EditSafeComponent = isEditing && Component === "p" ? "div" : Component;
-  return /* @__PURE__ */ jsx10(
+  return /* @__PURE__ */ jsx11(
     EditSafeComponent,
     {
       ref: containerRef,
@@ -3436,7 +3836,7 @@ function YaText({ fieldId, className, as: Component = "span", children }) {
             open: showBubbleMenu,
             className: "ya-bubble-menu",
             children: [
-              /* @__PURE__ */ jsx10(
+              /* @__PURE__ */ jsx11(
                 "button",
                 {
                   type: "button",
@@ -3444,10 +3844,10 @@ function YaText({ fieldId, className, as: Component = "span", children }) {
                   onMouseDown: (e) => e.preventDefault(),
                   className: `ya-bubble-btn ${editor.isActive("bold") ? "is-active" : ""}`,
                   title: "Bold",
-                  children: /* @__PURE__ */ jsx10(BoldIcon, { size: 16 })
+                  children: /* @__PURE__ */ jsx11(BoldIcon, { size: 16 })
                 }
               ),
-              /* @__PURE__ */ jsx10(
+              /* @__PURE__ */ jsx11(
                 "button",
                 {
                   type: "button",
@@ -3455,10 +3855,10 @@ function YaText({ fieldId, className, as: Component = "span", children }) {
                   onMouseDown: (e) => e.preventDefault(),
                   className: `ya-bubble-btn ${editor.isActive("italic") ? "is-active" : ""}`,
                   title: "Italic",
-                  children: /* @__PURE__ */ jsx10(ItalicIcon, { size: 16 })
+                  children: /* @__PURE__ */ jsx11(ItalicIcon, { size: 16 })
                 }
               ),
-              /* @__PURE__ */ jsx10(
+              /* @__PURE__ */ jsx11(
                 "button",
                 {
                   type: "button",
@@ -3466,17 +3866,17 @@ function YaText({ fieldId, className, as: Component = "span", children }) {
                   onMouseDown: (e) => e.preventDefault(),
                   className: `ya-bubble-btn ${editor.isActive("link") ? "is-active" : ""}`,
                   title: "Link",
-                  children: /* @__PURE__ */ jsx10(LinkIcon2, { size: 16 })
+                  children: /* @__PURE__ */ jsx11(LinkIcon2, { size: 16 })
                 }
               ),
-              /* @__PURE__ */ jsx10("span", { className: "ya-bubble-divider" }),
-              /* @__PURE__ */ jsx10(
+              /* @__PURE__ */ jsx11("span", { className: "ya-bubble-divider" }),
+              /* @__PURE__ */ jsx11(
                 BubbleDropdown,
                 {
                   label: getFontSizeLabel(getCurrentFontSize()),
                   open: fontSizeOpen,
                   onOpenChange: setFontSizeOpen,
-                  children: /* @__PURE__ */ jsx10(
+                  children: /* @__PURE__ */ jsx11(
                     FontSizePicker,
                     {
                       value: getCurrentFontSize(),
@@ -3486,13 +3886,13 @@ function YaText({ fieldId, className, as: Component = "span", children }) {
                   )
                 }
               ),
-              /* @__PURE__ */ jsx10(
+              /* @__PURE__ */ jsx11(
                 BubbleDropdown,
                 {
                   label: getFontWeightLabel(getCurrentFontWeight()),
                   open: fontWeightOpen,
                   onOpenChange: setFontWeightOpen,
-                  children: /* @__PURE__ */ jsx10(
+                  children: /* @__PURE__ */ jsx11(
                     FontWeightPicker,
                     {
                       value: getCurrentFontWeight(),
@@ -3506,7 +3906,7 @@ function YaText({ fieldId, className, as: Component = "span", children }) {
           }
         ),
         isEditing ? /* @__PURE__ */ jsxs5(Fragment3, { children: [
-          /* @__PURE__ */ jsx10(EditorContent, { editor }),
+          /* @__PURE__ */ jsx11(EditorContent, { editor }),
           actionButtonsPos && createPortal4(
             /* @__PURE__ */ jsxs5(
               "div",
@@ -3520,7 +3920,7 @@ function YaText({ fieldId, className, as: Component = "span", children }) {
                   // Right edge aligns with text end
                 },
                 children: [
-                  /* @__PURE__ */ jsx10(
+                  /* @__PURE__ */ jsx11(
                     "button",
                     {
                       type: "button",
@@ -3529,7 +3929,7 @@ function YaText({ fieldId, className, as: Component = "span", children }) {
                       children: "Cancel"
                     }
                   ),
-                  /* @__PURE__ */ jsx10(
+                  /* @__PURE__ */ jsx11(
                     "button",
                     {
                       type: "button",
@@ -3544,19 +3944,19 @@ function YaText({ fieldId, className, as: Component = "span", children }) {
             document.body
           )
         ] }) : /* @__PURE__ */ jsxs5(Fragment3, { children: [
-          /* @__PURE__ */ jsx10(SafeHtml, { content: displayContent, mode }),
-          isAnimating && /* @__PURE__ */ jsx10("span", { className: "ya-typing-cursor" })
+          /* @__PURE__ */ jsx11(SafeHtml, { content: displayContent, mode }),
+          isAnimating && /* @__PURE__ */ jsx11("span", { className: "ya-typing-cursor" })
         ] })
       ] }) : /* @__PURE__ */ jsxs5(Fragment3, { children: [
-        /* @__PURE__ */ jsx10(SafeHtml, { content: displayContent, mode }),
-        isAnimating && /* @__PURE__ */ jsx10("span", { className: "ya-typing-cursor" })
+        /* @__PURE__ */ jsx11(SafeHtml, { content: displayContent, mode }),
+        isAnimating && /* @__PURE__ */ jsx11("span", { className: "ya-typing-cursor" })
       ] })
     }
   );
 }
 
 // src/components/YaImage.tsx
-import { useCallback as useCallback12, useEffect as useEffect10, useRef as useRef11, useState as useState10 } from "react";
+import { useCallback as useCallback13, useEffect as useEffect11, useRef as useRef12, useState as useState11 } from "react";
 
 // src/lib/asset-resolver.ts
 var assetResolver = (path) => path;
@@ -3572,25 +3972,25 @@ function resolveAssetUrl(path) {
 }
 
 // src/components/YaTooltip.tsx
-import { useEffect as useEffect8, useRef as useRef9, useState as useState8, useCallback as useCallback10 } from "react";
+import { useEffect as useEffect9, useRef as useRef10, useState as useState9, useCallback as useCallback11 } from "react";
 import { createPortal as createPortal5 } from "react-dom";
 
 // src/components/ya-tooltip.css
 styleInject('.ya-tooltip {\n  position: fixed;\n  z-index: 9999;\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 8px 12px;\n  background: #1a1a1a;\n  color: white;\n  border-radius: 6px;\n  font-size: 13px;\n  font-weight: 500;\n  font-family:\n    system-ui,\n    -apple-system,\n    BlinkMacSystemFont,\n    "Segoe UI",\n    sans-serif;\n  white-space: nowrap;\n  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);\n  animation: ya-tooltip-fade-in 0.15s ease;\n  pointer-events: none;\n}\n@keyframes ya-tooltip-fade-in {\n  from {\n    transform: scale(0.95);\n  }\n  to {\n    transform: scale(1);\n  }\n}\n.ya-tooltip svg {\n  width: 16px;\n  height: 16px;\n  flex-shrink: 0;\n}\n.ya-tooltip-bottom {\n  transform: translateX(-50%);\n}\n.ya-tooltip-bottom::before {\n  content: "";\n  position: absolute;\n  bottom: 100%;\n  left: 50%;\n  transform: translateX(-50%);\n  border: 6px solid transparent;\n  border-bottom-color: #1a1a1a;\n}\n.ya-tooltip-top {\n  transform: translateX(-50%);\n}\n.ya-tooltip-top::before {\n  content: "";\n  position: absolute;\n  top: 100%;\n  left: 50%;\n  transform: translateX(-50%);\n  border: 6px solid transparent;\n  border-top-color: #1a1a1a;\n}\n.ya-tooltip-right {\n  transform: translateY(-50%);\n}\n.ya-tooltip-right::before {\n  content: "";\n  position: absolute;\n  right: 100%;\n  top: 50%;\n  transform: translateY(-50%);\n  border: 6px solid transparent;\n  border-right-color: #1a1a1a;\n}\n.ya-tooltip-left {\n  transform: translateY(-50%);\n}\n.ya-tooltip-left::before {\n  content: "";\n  position: absolute;\n  left: 100%;\n  top: 50%;\n  transform: translateY(-50%);\n  border: 6px solid transparent;\n  border-left-color: #1a1a1a;\n}\n');
 
 // src/components/YaTooltip.tsx
-import { jsx as jsx11 } from "react/jsx-runtime";
+import { jsx as jsx12 } from "react/jsx-runtime";
 function YaTooltip({
   anchorRef,
   children,
   show,
   preferredPosition = "bottom"
 }) {
-  const [position, setPosition] = useState8(preferredPosition);
-  const [coords, setCoords] = useState8({ top: 0, left: 0 });
-  const [isPositioned, setIsPositioned] = useState8(false);
-  const tooltipRef = useRef9(null);
-  const calculatePosition = useCallback10(() => {
+  const [position, setPosition] = useState9(preferredPosition);
+  const [coords, setCoords] = useState9({ top: 0, left: 0 });
+  const [isPositioned, setIsPositioned] = useState9(false);
+  const tooltipRef = useRef10(null);
+  const calculatePosition = useCallback11(() => {
     if (!anchorRef.current) return;
     const anchor = anchorRef.current.getBoundingClientRect();
     const tooltip = tooltipRef.current?.getBoundingClientRect();
@@ -3665,7 +4065,7 @@ function YaTooltip({
     setCoords({ top, left });
     setIsPositioned(true);
   }, [anchorRef, preferredPosition]);
-  useEffect8(() => {
+  useEffect9(() => {
     if (!show) {
       setIsPositioned(false);
       return;
@@ -3678,14 +4078,14 @@ function YaTooltip({
       window.removeEventListener("resize", calculatePosition);
     };
   }, [show, calculatePosition]);
-  useEffect8(() => {
+  useEffect9(() => {
     if (show && tooltipRef.current) {
       calculatePosition();
     }
   }, [show, children, calculatePosition]);
   if (!show) return null;
   return createPortal5(
-    /* @__PURE__ */ jsx11(
+    /* @__PURE__ */ jsx12(
       "div",
       {
         ref: tooltipRef,
@@ -3704,7 +4104,7 @@ function YaTooltip({
 }
 
 // src/hooks/useImageShaderTransition.ts
-import { useCallback as useCallback11, useEffect as useEffect9, useRef as useRef10, useState as useState9 } from "react";
+import { useCallback as useCallback12, useEffect as useEffect10, useRef as useRef11, useState as useState10 } from "react";
 
 // src/lib/image-shader-transition.ts
 var VERTEX_SHADER = `
@@ -3964,14 +4364,14 @@ function preloadImage(src) {
 var TRANSITION_DURATION = 500;
 function useImageShaderTransition(options = {}) {
   const { duration = TRANSITION_DURATION, onComplete } = options;
-  const canvasRef = useRef10(null);
-  const rendererRef = useRef10(null);
-  const rafRef = useRef10(null);
-  const startTimeRef = useRef10(0);
-  const newSrcRef = useRef10("");
-  const [isTransitioning, setIsTransitioning] = useState9(false);
-  const [webglAvailable] = useState9(() => isWebGLAvailable());
-  useEffect9(() => {
+  const canvasRef = useRef11(null);
+  const rendererRef = useRef11(null);
+  const rafRef = useRef11(null);
+  const startTimeRef = useRef11(0);
+  const newSrcRef = useRef11("");
+  const [isTransitioning, setIsTransitioning] = useState10(false);
+  const [webglAvailable] = useState10(() => isWebGLAvailable());
+  useEffect10(() => {
     return () => {
       if (rafRef.current) {
         cancelAnimationFrame(rafRef.current);
@@ -3979,7 +4379,7 @@ function useImageShaderTransition(options = {}) {
       rendererRef.current?.destroy();
     };
   }, []);
-  const animate = useCallback11(() => {
+  const animate = useCallback12(() => {
     const renderer = rendererRef.current;
     if (!renderer) return;
     const elapsed = performance.now() - startTimeRef.current;
@@ -3994,7 +4394,7 @@ function useImageShaderTransition(options = {}) {
       });
     }
   }, [duration, onComplete]);
-  const startTransition = useCallback11(
+  const startTransition = useCallback12(
     (oldSrc, newSrc) => {
       if (!webglAvailable) {
         return;
@@ -4026,7 +4426,7 @@ function useImageShaderTransition(options = {}) {
     },
     [webglAvailable, animate]
   );
-  const cancelTransition = useCallback11(() => {
+  const cancelTransition = useCallback12(() => {
     if (rafRef.current) {
       cancelAnimationFrame(rafRef.current);
       rafRef.current = null;
@@ -4046,7 +4446,7 @@ function useImageShaderTransition(options = {}) {
 styleInject('.ya-image-container {\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  min-width: 45px;\n  min-height: 45px;\n  cursor: pointer;\n  transition: outline 0.15s ease;\n}\n.ya-image-container img {\n  display: block;\n}\n.ya-image-editable {\n  cursor: pointer;\n}\n.ya-image-editable:hover {\n  outline: 2px dashed var(--color-primary, #D4A574);\n  outline-offset: 4px;\n}\n.ya-image-selected {\n  outline: 3px solid var(--color-primary, #D4A574);\n  outline-offset: 4px;\n}\n.ya-image-overlay {\n  position: absolute;\n  inset: 0;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 8px;\n  background: rgba(0, 0, 0, 0.5);\n  opacity: 0;\n  transition: opacity 0.2s ease;\n  pointer-events: none;\n  border-radius: inherit;\n}\n.ya-image-editable:hover .ya-image-overlay {\n  opacity: 1;\n}\n.ya-image-selected .ya-image-overlay {\n  opacity: 0;\n}\n.ya-image-edit-icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 48px;\n  height: 48px;\n  background: white;\n  border-radius: 50%;\n  color: #1a1a1a;\n  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);\n}\n.ya-image-edit-icon svg {\n  width: 24px;\n  height: 24px;\n}\n.ya-image-edit-label {\n  color: white;\n  font-size: 14px;\n  font-weight: 500;\n  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);\n}\n@keyframes ya-image-success {\n  0% {\n    outline-color: var(--color-primary, #D4A574);\n  }\n  50% {\n    outline-color: #22c55e;\n    outline-width: 4px;\n  }\n  100% {\n    outline-color: var(--color-primary, #D4A574);\n    outline-width: 2px;\n  }\n}\n.ya-image-success {\n  animation: ya-image-success 0.4s ease;\n}\n.ya-image-loading::after {\n  content: "";\n  position: absolute;\n  inset: 0;\n  background:\n    linear-gradient(\n      90deg,\n      rgba(255, 255, 255, 0) 0%,\n      rgba(255, 255, 255, 0.3) 50%,\n      rgba(255, 255, 255, 0) 100%);\n  background-size: 200% 100%;\n  animation: ya-image-shimmer 1.5s infinite;\n}\n@keyframes ya-image-shimmer {\n  0% {\n    background-position: -200% 0;\n  }\n  100% {\n    background-position: 200% 0;\n  }\n}\n.ya-image-container:focus {\n  outline: 3px solid var(--color-primary, #D4A574);\n  outline-offset: 4px;\n}\n.ya-image-container:focus:not(:focus-visible) {\n  outline: none;\n}\n.ya-image-container:focus-visible {\n  outline: 3px solid var(--color-primary, #D4A574);\n  outline-offset: 4px;\n}\n.ya-image-small .ya-image-overlay {\n  display: none;\n}\n.ya-image-drop-target {\n  outline: 2px dashed var(--ya-drop-color, #3b82f6) !important;\n  outline-offset: 4px;\n}\n.ya-image-drop-target .ya-image-overlay {\n  display: none !important;\n}\n.ya-image-drop-hover {\n  outline: 3px solid var(--ya-drop-color, #3b82f6) !important;\n  outline-offset: 4px;\n  background-color: rgba(59, 130, 246, 0.1);\n}\n.ya-image-drop-hover::before {\n  content: "";\n  position: absolute;\n  inset: -4px;\n  border: 2px solid var(--ya-drop-color, #3b82f6);\n  border-radius: inherit;\n  animation: ya-drop-pulse 1s ease-in-out infinite;\n  pointer-events: none;\n}\n@keyframes ya-drop-pulse {\n  0%, 100% {\n    opacity: 0.4;\n    transform: scale(1);\n  }\n  50% {\n    opacity: 0.8;\n    transform: scale(1.02);\n  }\n}\n');
 
 // src/components/YaImage.tsx
-import { jsx as jsx12, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx13, jsxs as jsxs6 } from "react/jsx-runtime";
 function parseImageValue(value) {
   if (!value) {
     return { src: "" };
@@ -4090,17 +4490,18 @@ function YaImage({
   fallbackSrc,
   fallbackAlt
 }) {
-  const { getValue, setValue, mode, getChangeSource, clearChangeSource } = useContentStore();
-  const containerRef = useRef11(null);
-  const imgRef = useRef11(null);
-  const [isSelected, setIsSelected] = useState10(false);
-  const [isHovered, setIsHovered] = useState10(false);
-  const [isSmallImage, setIsSmallImage] = useState10(false);
-  const [isDropMode, setIsDropMode] = useState10(false);
-  const [isDropHover, setIsDropHover] = useState10(false);
-  const [previewOverride, setPreviewOverride] = useState10(null);
-  const prevSrcRef = useRef11(null);
-  const rawValue = getValue(fieldId);
+  const content = useContent(fieldId);
+  const { mode } = content;
+  const containerRef = useRef12(null);
+  const imgRef = useRef12(null);
+  const [isSelected, setIsSelected] = useState11(false);
+  const [isHovered, setIsHovered] = useState11(false);
+  const [isSmallImage, setIsSmallImage] = useState11(false);
+  const [isDropMode, setIsDropMode] = useState11(false);
+  const [isDropHover, setIsDropHover] = useState11(false);
+  const [previewOverride, setPreviewOverride] = useState11(null);
+  const prevSrcRef = useRef12(null);
+  const rawValue = content.get();
   const imageData = parseImageValue(rawValue);
   const displayData = previewOverride || imageData;
   const src = displayData.src || fallbackSrc || PLACEHOLDER_SVG;
@@ -4116,36 +4517,34 @@ function YaImage({
   } = useImageShaderTransition({
     duration: 500,
     onComplete: () => {
-      clearChangeSource(fieldId);
+      content.clearChangeSource();
     }
   });
-  useEffect10(() => {
-    const changeSource = getChangeSource(fieldId);
+  useEffect11(() => {
+    const changeSource = content.changeSource;
     const resolvedSrc = resolveAssetUrl(src);
     const prevResolvedSrc = prevSrcRef.current;
     if (changeSource === "ai") {
       if (prevResolvedSrc !== null && prevResolvedSrc !== resolvedSrc && webglAvailable) {
         startTransition(prevResolvedSrc, resolvedSrc);
       } else {
-        clearChangeSource(fieldId);
+        content.clearChangeSource();
       }
     }
     prevSrcRef.current = resolvedSrc;
   }, [
     rawValue,
     src,
-    fieldId,
-    getChangeSource,
-    clearChangeSource,
+    content,
     startTransition,
     webglAvailable
   ]);
-  useEffect10(() => {
+  useEffect11(() => {
     return () => {
       cancelTransition();
     };
   }, [cancelTransition]);
-  const handleClick = useCallback12(() => {
+  const handleClick = useCallback13(() => {
     if (mode !== "inline-edit") return;
     if (document.body.classList.contains("builder-selector-active")) return;
     setIsSelected(true);
@@ -4173,12 +4572,14 @@ function YaImage({
       "*"
     );
   }, [mode, fieldId, imageData, src, altText, objectFit, objectPosition]);
-  useEffect10(() => {
+  useEffect11(() => {
     if (mode !== "inline-edit") return;
     const handleMessage2 = (event) => {
       if (event.data?.type === "YA_IMAGE_EDIT_COMPLETE" && event.data.fieldId === fieldId) {
         const value = event.data.value;
-        setValue(fieldId, serializeImageValue(value), "user");
+        const serializedValue = serializeImageValue(value);
+        content.set(serializedValue, "user");
+        content.save();
         setPreviewOverride(null);
         setIsSelected(false);
       }
@@ -4193,8 +4594,8 @@ function YaImage({
     };
     window.addEventListener("message", handleMessage2);
     return () => window.removeEventListener("message", handleMessage2);
-  }, [mode, fieldId, setValue]);
-  useEffect10(() => {
+  }, [mode, fieldId, content]);
+  useEffect11(() => {
     if (mode !== "inline-edit") return;
     const handleDropModeMessage = (event) => {
       if (event.data?.type === "DROP_MODE_START") {
@@ -4208,7 +4609,7 @@ function YaImage({
     window.addEventListener("message", handleDropModeMessage);
     return () => window.removeEventListener("message", handleDropModeMessage);
   }, [mode]);
-  const handleDragEnter = useCallback12(
+  const handleDragEnter = useCallback13(
     (e) => {
       if (!isDropMode) return;
       e.preventDefault();
@@ -4232,7 +4633,7 @@ function YaImage({
     },
     [isDropMode, fieldId]
   );
-  const handleDragOver = useCallback12(
+  const handleDragOver = useCallback13(
     (e) => {
       if (!isDropMode) return;
       e.preventDefault();
@@ -4240,7 +4641,7 @@ function YaImage({
     },
     [isDropMode]
   );
-  const handleDragLeave = useCallback12(
+  const handleDragLeave = useCallback13(
     (e) => {
       if (!isDropMode) return;
       e.preventDefault();
@@ -4254,7 +4655,7 @@ function YaImage({
     },
     [isDropMode]
   );
-  const handleDrop = useCallback12(
+  const handleDrop = useCallback13(
     (e) => {
       if (!isDropMode) return;
       e.preventDefault();
@@ -4272,7 +4673,7 @@ function YaImage({
     },
     [isDropMode, fieldId]
   );
-  useEffect10(() => {
+  useEffect11(() => {
     if (mode !== "inline-edit") return;
     const checkSize = () => {
       if (imgRef.current) {
@@ -4294,7 +4695,7 @@ function YaImage({
       window.removeEventListener("resize", checkSize);
     };
   }, [mode]);
-  useEffect10(() => {
+  useEffect11(() => {
     if (!isSelected || mode !== "inline-edit") return;
     let lastRectKey = "";
     let lastTime = 0;
@@ -4336,7 +4737,7 @@ function YaImage({
         "data-ya-restricted": "true",
         "data-field-id": fieldId,
         children: [
-          /* @__PURE__ */ jsx12(
+          /* @__PURE__ */ jsx13(
             "img",
             {
               src: resolveAssetUrl(src),
@@ -4352,7 +4753,7 @@ function YaImage({
               loading
             }
           ),
-          /* @__PURE__ */ jsx12(
+          /* @__PURE__ */ jsx13(
             "canvas",
             {
               ref: canvasRef,
@@ -4386,9 +4787,9 @@ function YaImage({
       strokeLinecap: "round",
       strokeLinejoin: "round",
       children: [
-        /* @__PURE__ */ jsx12("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2", ry: "2" }),
-        /* @__PURE__ */ jsx12("circle", { cx: "8.5", cy: "8.5", r: "1.5" }),
-        /* @__PURE__ */ jsx12("polyline", { points: "21 15 16 10 5 21" })
+        /* @__PURE__ */ jsx13("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2", ry: "2" }),
+        /* @__PURE__ */ jsx13("circle", { cx: "8.5", cy: "8.5", r: "1.5" }),
+        /* @__PURE__ */ jsx13("polyline", { points: "21 15 16 10 5 21" })
       ]
     }
   );
@@ -4424,7 +4825,7 @@ function YaImage({
         }
       },
       children: [
-        /* @__PURE__ */ jsx12(
+        /* @__PURE__ */ jsx13(
           "img",
           {
             ref: imgRef,
@@ -4441,7 +4842,7 @@ function YaImage({
             loading
           }
         ),
-        /* @__PURE__ */ jsx12(
+        /* @__PURE__ */ jsx13(
           "canvas",
           {
             ref: canvasRef,
@@ -4461,12 +4862,12 @@ function YaImage({
         ),
         isSmallImage ? /* @__PURE__ */ jsxs6(YaTooltip, { anchorRef: containerRef, show: isHovered && !isSelected, children: [
           editIcon,
-          /* @__PURE__ */ jsx12("span", { children: "Click to edit" })
+          /* @__PURE__ */ jsx13("span", { children: "Click to edit" })
         ] }) : (
           /* For large images: show overlay inside the image */
           /* @__PURE__ */ jsxs6("div", { className: "ya-image-overlay", children: [
-            /* @__PURE__ */ jsx12("div", { className: "ya-image-edit-icon", children: editIcon }),
-            /* @__PURE__ */ jsx12("span", { className: "ya-image-edit-label", children: "Click to edit" })
+            /* @__PURE__ */ jsx13("div", { className: "ya-image-edit-icon", children: editIcon }),
+            /* @__PURE__ */ jsx13("span", { className: "ya-image-edit-label", children: "Click to edit" })
           ] })
         )
       ]
@@ -4475,13 +4876,13 @@ function YaImage({
 }
 
 // src/components/YaVideo.tsx
-import { useCallback as useCallback13, useEffect as useEffect11, useRef as useRef12, useState as useState11 } from "react";
+import { useCallback as useCallback14, useEffect as useEffect12, useRef as useRef13, useState as useState12 } from "react";
 
 // src/components/ya-video.css
 styleInject('.ya-video-wrapper {\n  position: relative;\n  display: block;\n  width: 100%;\n}\n.ya-video-wrapper video,\n.ya-video-wrapper iframe {\n  display: block;\n  width: 100%;\n  height: 100%;\n}\n.ya-video-container {\n  position: relative;\n  display: block;\n  width: 100%;\n  min-width: 80px;\n  min-height: 45px;\n  cursor: pointer;\n  transition: outline 0.15s ease;\n}\n.ya-video-container video,\n.ya-video-container iframe {\n  display: block;\n  width: 100%;\n  height: 100%;\n  pointer-events: none;\n}\n.ya-video-editable {\n  cursor: pointer;\n}\n.ya-video-editable:hover {\n  outline: 2px dashed var(--color-primary, #D4A574);\n  outline-offset: 4px;\n}\n.ya-video-selected {\n  outline: 3px solid var(--color-primary, #D4A574);\n  outline-offset: 4px;\n}\n.ya-video-overlay {\n  position: absolute;\n  inset: 0;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 8px;\n  background: rgba(0, 0, 0, 0.5);\n  opacity: 0;\n  transition: opacity 0.2s ease;\n  pointer-events: none;\n  border-radius: inherit;\n}\n.ya-video-editable:hover .ya-video-overlay {\n  opacity: 1;\n}\n.ya-video-selected .ya-video-overlay {\n  opacity: 0;\n}\n.ya-video-edit-icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 48px;\n  height: 48px;\n  background: white;\n  border-radius: 50%;\n  color: #1a1a1a;\n  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);\n}\n.ya-video-edit-icon svg {\n  width: 24px;\n  height: 24px;\n}\n.ya-video-edit-label {\n  color: white;\n  font-size: 14px;\n  font-weight: 500;\n  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);\n}\n.ya-video-placeholder {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 8px;\n  width: 100%;\n  height: 100%;\n  min-height: 120px;\n  background: #f3f4f6;\n  border: 2px dashed #d1d5db;\n  border-radius: 8px;\n  color: #6b7280;\n  font-size: 14px;\n}\n.ya-video-placeholder img {\n  width: 64px;\n  height: auto;\n  opacity: 0.5;\n}\n@keyframes ya-video-success {\n  0% {\n    outline-color: var(--color-primary, #D4A574);\n  }\n  50% {\n    outline-color: #22c55e;\n    outline-width: 4px;\n  }\n  100% {\n    outline-color: var(--color-primary, #D4A574);\n    outline-width: 2px;\n  }\n}\n.ya-video-success {\n  animation: ya-video-success 0.4s ease;\n}\n.ya-video-loading::after {\n  content: "";\n  position: absolute;\n  inset: 0;\n  background:\n    linear-gradient(\n      90deg,\n      rgba(255, 255, 255, 0) 0%,\n      rgba(255, 255, 255, 0.3) 50%,\n      rgba(255, 255, 255, 0) 100%);\n  background-size: 200% 100%;\n  animation: ya-video-shimmer 1.5s infinite;\n}\n@keyframes ya-video-shimmer {\n  0% {\n    background-position: -200% 0;\n  }\n  100% {\n    background-position: 200% 0;\n  }\n}\n.ya-video-container:focus {\n  outline: 3px solid var(--color-primary, #D4A574);\n  outline-offset: 4px;\n}\n.ya-video-container:focus:not(:focus-visible) {\n  outline: none;\n}\n.ya-video-container:focus-visible {\n  outline: 3px solid var(--color-primary, #D4A574);\n  outline-offset: 4px;\n}\n.ya-video-small .ya-video-overlay {\n  display: none;\n}\n.ya-video-background {\n  position: absolute;\n  inset: 0;\n  z-index: -1;\n}\n.ya-video-background video {\n  width: 100%;\n  height: 100%;\n  object-fit: cover;\n}\n');
 
 // src/components/YaVideo.tsx
-import { jsx as jsx13, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx14, jsxs as jsxs7 } from "react/jsx-runtime";
 function parseVideoValue(value) {
   if (!value) {
     return { type: "upload", src: "" };
@@ -4553,14 +4954,15 @@ function YaVideo({
   fallbackSrc,
   fallbackPoster
 }) {
-  const { getValue, mode } = useContentStore();
-  const containerRef = useRef12(null);
-  const videoRef = useRef12(null);
-  const [isSelected, setIsSelected] = useState11(false);
-  const [isHovered, setIsHovered] = useState11(false);
-  const [isSmallVideo, setIsSmallVideo] = useState11(false);
-  const [isInView, setIsInView] = useState11(loading === "eager");
-  const rawValue = getValue(fieldId);
+  const content = useContent(fieldId);
+  const { mode } = content;
+  const containerRef = useRef13(null);
+  const videoRef = useRef13(null);
+  const [isSelected, setIsSelected] = useState12(false);
+  const [isHovered, setIsHovered] = useState12(false);
+  const [isSmallVideo, setIsSmallVideo] = useState12(false);
+  const [isInView, setIsInView] = useState12(loading === "eager");
+  const rawValue = content.get();
   const parsedValue = parseVideoValue(rawValue);
   const videoData = parsedValue.src ? parsedValue : defaultValue || parsedValue;
   const src = videoData.src || fallbackSrc || "";
@@ -4573,8 +4975,8 @@ function YaVideo({
   const controls = videoData.controls ?? true;
   const playsinline = videoData.playsinline ?? true;
   const preload = videoData.preload ?? "metadata";
-  const [prefersReducedMotion, setPrefersReducedMotion] = useState11(false);
-  useEffect11(() => {
+  const [prefersReducedMotion, setPrefersReducedMotion] = useState12(false);
+  useEffect12(() => {
     const mediaQuery = window.matchMedia("(prefers-reduced-motion: reduce)");
     setPrefersReducedMotion(mediaQuery.matches);
     const handleChange = (e) => {
@@ -4584,7 +4986,7 @@ function YaVideo({
     return () => mediaQuery.removeEventListener("change", handleChange);
   }, []);
   const effectiveAutoplay = autoplay && !prefersReducedMotion;
-  useEffect11(() => {
+  useEffect12(() => {
     if (loading === "eager" || isInView) return;
     const observer = new IntersectionObserver(
       (entries) => {
@@ -4601,7 +5003,7 @@ function YaVideo({
     }
     return () => observer.disconnect();
   }, [loading, isInView]);
-  const handleKeyDown = useCallback13(
+  const handleKeyDown = useCallback14(
     (e) => {
       if ((e.key === " " || e.key === "Enter") && videoData.type === "upload" && controls) {
         e.preventDefault();
@@ -4617,7 +5019,7 @@ function YaVideo({
     },
     [videoData.type, controls]
   );
-  const handleClick = useCallback13(() => {
+  const handleClick = useCallback14(() => {
     if (mode !== "inline-edit") return;
     if (document.body.classList.contains("builder-selector-active")) return;
     setIsSelected(true);
@@ -4637,7 +5039,7 @@ function YaVideo({
       "*"
     );
   }, [mode, fieldId, videoData]);
-  useEffect11(() => {
+  useEffect12(() => {
     if (mode !== "inline-edit") return;
     const handleMessage2 = (event) => {
       if (event.data?.type === "YA_VIDEO_EDIT_COMPLETE" && event.data.fieldId === fieldId) {
@@ -4650,7 +5052,7 @@ function YaVideo({
     window.addEventListener("message", handleMessage2);
     return () => window.removeEventListener("message", handleMessage2);
   }, [mode, fieldId]);
-  useEffect11(() => {
+  useEffect12(() => {
     if (mode !== "inline-edit") return;
     const checkSize = () => {
       if (containerRef.current) {
@@ -4662,7 +5064,7 @@ function YaVideo({
     window.addEventListener("resize", checkSize);
     return () => window.removeEventListener("resize", checkSize);
   }, [mode]);
-  useEffect11(() => {
+  useEffect12(() => {
     if (!isSelected || mode !== "inline-edit") return;
     let lastRectKey = "";
     let lastTime = 0;
@@ -4699,23 +5101,23 @@ function YaVideo({
   const renderVideo = (isReadOnly) => {
     if (!src && !isReadOnly) {
       return /* @__PURE__ */ jsxs7("div", { className: "ya-video-placeholder", children: [
-        /* @__PURE__ */ jsx13("img", { src: PLACEHOLDER_SVG2, alt: "" }),
-        /* @__PURE__ */ jsx13("span", { children: "No video selected" })
+        /* @__PURE__ */ jsx14("img", { src: PLACEHOLDER_SVG2, alt: "" }),
+        /* @__PURE__ */ jsx14("span", { children: "No video selected" })
       ] });
     }
     if (!isInView && loading === "lazy" && !isReadOnly) {
-      return /* @__PURE__ */ jsx13(
+      return /* @__PURE__ */ jsx14(
         "div",
         {
           className: "ya-video-placeholder",
           style: { aspectRatio },
-          children: /* @__PURE__ */ jsx13("img", { src: PLACEHOLDER_SVG2, alt: "" })
+          children: /* @__PURE__ */ jsx14("img", { src: PLACEHOLDER_SVG2, alt: "" })
         }
       );
     }
     if (videoData.type === "youtube" && src) {
       const embedUrl = buildYouTubeEmbedUrl(src, videoData);
-      return /* @__PURE__ */ jsx13(
+      return /* @__PURE__ */ jsx14(
         "iframe",
         {
           src: embedUrl,
@@ -4735,7 +5137,7 @@ function YaVideo({
     }
     if (videoData.type === "vimeo" && src) {
       const embedUrl = buildVimeoEmbedUrl(src, videoData);
-      return /* @__PURE__ */ jsx13(
+      return /* @__PURE__ */ jsx14(
         "iframe",
         {
           src: embedUrl,
@@ -4755,7 +5157,7 @@ function YaVideo({
     }
     const resolvedSrc = resolveAssetUrl(src);
     const resolvedPoster = poster ? resolveAssetUrl(poster) : void 0;
-    return /* @__PURE__ */ jsx13(
+    return /* @__PURE__ */ jsx14(
       "video",
       {
         ref: videoRef,
@@ -4790,7 +5192,7 @@ function YaVideo({
     );
   };
   if (mode === "read-only") {
-    return /* @__PURE__ */ jsx13(
+    return /* @__PURE__ */ jsx14(
       "div",
       {
         ref: containerRef,
@@ -4818,8 +5220,8 @@ function YaVideo({
       strokeLinecap: "round",
       strokeLinejoin: "round",
       children: [
-        /* @__PURE__ */ jsx13("rect", { x: "2", y: "4", width: "15", height: "13", rx: "2", ry: "2" }),
-        /* @__PURE__ */ jsx13("polygon", { points: "22 7 15 12 22 17 22 7", fill: "currentColor" })
+        /* @__PURE__ */ jsx14("rect", { x: "2", y: "4", width: "15", height: "13", rx: "2", ry: "2" }),
+        /* @__PURE__ */ jsx14("polygon", { points: "22 7 15 12 22 17 22 7", fill: "currentColor" })
       ]
     }
   );
@@ -4848,12 +5250,12 @@ function YaVideo({
         renderVideo(false),
         isSmallVideo ? /* @__PURE__ */ jsxs7(YaTooltip, { anchorRef: containerRef, show: isHovered && !isSelected, children: [
           videoIcon,
-          /* @__PURE__ */ jsx13("span", { children: "Click to edit" })
+          /* @__PURE__ */ jsx14("span", { children: "Click to edit" })
         ] }) : (
           /* For large videos: show overlay inside the container */
           /* @__PURE__ */ jsxs7("div", { className: "ya-video-overlay", children: [
-            /* @__PURE__ */ jsx13("div", { className: "ya-video-edit-icon", children: videoIcon }),
-            /* @__PURE__ */ jsx13("span", { className: "ya-video-edit-label", children: "Click to edit" })
+            /* @__PURE__ */ jsx14("div", { className: "ya-video-edit-icon", children: videoIcon }),
+            /* @__PURE__ */ jsx14("span", { className: "ya-video-edit-label", children: "Click to edit" })
           ] })
         )
       ]
@@ -4862,13 +5264,13 @@ function YaVideo({
 }
 
 // src/components/YaEmbed.tsx
-import { useCallback as useCallback14, useEffect as useEffect12, useRef as useRef13, useState as useState12 } from "react";
+import { useCallback as useCallback15, useEffect as useEffect13, useRef as useRef14, useState as useState13 } from "react";
 
 // src/components/ya-embed.css
 styleInject('.ya-embed-wrapper {\n  position: relative;\n  display: block;\n  width: 100%;\n}\n.ya-embed-wrapper iframe {\n  display: block;\n  width: 100%;\n  height: 100%;\n}\n.ya-embed-container {\n  position: relative;\n  display: block;\n  width: 100%;\n  min-width: 80px;\n  min-height: 80px;\n  cursor: pointer;\n  transition: outline 0.15s ease;\n}\n.ya-embed-container iframe {\n  display: block;\n  width: 100%;\n  height: 100%;\n  pointer-events: none;\n}\n.ya-embed-editable {\n  cursor: pointer;\n}\n.ya-embed-editable:hover {\n  outline: 2px dashed var(--color-primary, #d4a574);\n  outline-offset: 4px;\n}\n.ya-embed-selected {\n  outline: 3px solid var(--color-primary, #d4a574);\n  outline-offset: 4px;\n}\n.ya-embed-overlay {\n  position: absolute;\n  inset: 0;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 8px;\n  background: rgba(0, 0, 0, 0.5);\n  opacity: 0;\n  transition: opacity 0.2s ease;\n  pointer-events: none;\n  border-radius: inherit;\n}\n.ya-embed-editable:hover .ya-embed-overlay {\n  opacity: 1;\n}\n.ya-embed-selected .ya-embed-overlay {\n  opacity: 0;\n}\n.ya-embed-edit-icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 48px;\n  height: 48px;\n  background: white;\n  border-radius: 50%;\n  color: #1a1a1a;\n  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);\n}\n.ya-embed-edit-icon svg {\n  width: 24px;\n  height: 24px;\n}\n.ya-embed-edit-label {\n  color: white;\n  font-size: 14px;\n  font-weight: 500;\n  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);\n}\n.ya-embed-placeholder {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  gap: 8px;\n  width: 100%;\n  height: 100%;\n  min-height: 120px;\n  background: #f3f4f6;\n  border: 2px dashed #d1d5db;\n  border-radius: 8px;\n  color: #6b7280;\n  font-size: 14px;\n}\n.ya-embed-placeholder img {\n  width: 64px;\n  height: auto;\n  opacity: 0.5;\n}\n@keyframes ya-embed-success {\n  0% {\n    outline-color: var(--color-primary, #d4a574);\n  }\n  50% {\n    outline-color: #22c55e;\n    outline-width: 4px;\n  }\n  100% {\n    outline-color: var(--color-primary, #d4a574);\n    outline-width: 2px;\n  }\n}\n.ya-embed-success {\n  animation: ya-embed-success 0.4s ease;\n}\n.ya-embed-loading::after {\n  content: "";\n  position: absolute;\n  inset: 0;\n  background:\n    linear-gradient(\n      90deg,\n      rgba(255, 255, 255, 0) 0%,\n      rgba(255, 255, 255, 0.3) 50%,\n      rgba(255, 255, 255, 0) 100%);\n  background-size: 200% 100%;\n  animation: ya-embed-shimmer 1.5s infinite;\n}\n@keyframes ya-embed-shimmer {\n  0% {\n    background-position: -200% 0;\n  }\n  100% {\n    background-position: 200% 0;\n  }\n}\n.ya-embed-container:focus {\n  outline: 3px solid var(--color-primary, #d4a574);\n  outline-offset: 4px;\n}\n.ya-embed-container:focus:not(:focus-visible) {\n  outline: none;\n}\n.ya-embed-container:focus-visible {\n  outline: 3px solid var(--color-primary, #d4a574);\n  outline-offset: 4px;\n}\n.ya-embed-small .ya-embed-overlay {\n  display: none;\n}\n.ya-embed-twitter {\n  min-height: 200px;\n}\n.ya-embed-twitter .twitter-tweet {\n  margin: 0 auto !important;\n}\n.ya-embed-wrapper[data-embed-type=spotify],\n.ya-embed-container[data-embed-type=spotify] {\n  min-height: 80px;\n}\n.ya-embed-wrapper[data-embed-type=soundcloud],\n.ya-embed-container[data-embed-type=soundcloud] {\n  min-height: 166px;\n}\n.ya-embed-wrapper[data-embed-type=instagram] iframe,\n.ya-embed-container[data-embed-type=instagram] iframe {\n  min-height: 400px;\n}\n');
 
 // src/components/YaEmbed.tsx
-import { jsx as jsx14, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx15, jsxs as jsxs8 } from "react/jsx-runtime";
 function parseEmbedUrl(url) {
   if (!url) return null;
   const trimmedUrl = url.trim();
@@ -4981,20 +5383,21 @@ function YaEmbed({
   loading = "lazy",
   defaultValue
 }) {
-  const { getValue, mode } = useContentStore();
-  const containerRef = useRef13(null);
-  const [isSelected, setIsSelected] = useState12(false);
-  const [isHovered, setIsHovered] = useState12(false);
-  const [isSmallEmbed, setIsSmallEmbed] = useState12(false);
-  const [isInView, setIsInView] = useState12(loading === "eager");
-  const rawValue = getValue(fieldId);
+  const content = useContent(fieldId);
+  const { mode } = content;
+  const containerRef = useRef14(null);
+  const [isSelected, setIsSelected] = useState13(false);
+  const [isHovered, setIsHovered] = useState13(false);
+  const [isSmallEmbed, setIsSmallEmbed] = useState13(false);
+  const [isInView, setIsInView] = useState13(loading === "eager");
+  const rawValue = content.get();
   const parsedValue = parseEmbedValue(rawValue);
   const embedData = parsedValue.src ? parsedValue : defaultValue || parsedValue;
   const src = embedData.src || "";
   const embedType = embedData.type || "custom";
   const height = embedData.height;
   const aspectRatio = embedData.aspectRatio || propAspectRatio || "16/9";
-  useEffect12(() => {
+  useEffect13(() => {
     if (loading === "eager" || isInView) return;
     const observer = new IntersectionObserver(
       (entries) => {
@@ -5011,7 +5414,7 @@ function YaEmbed({
     }
     return () => observer.disconnect();
   }, [loading, isInView]);
-  const handleClick = useCallback14(() => {
+  const handleClick = useCallback15(() => {
     if (mode !== "inline-edit") return;
     if (document.body.classList.contains("builder-selector-active")) return;
     setIsSelected(true);
@@ -5031,7 +5434,7 @@ function YaEmbed({
       "*"
     );
   }, [mode, fieldId, embedData]);
-  useEffect12(() => {
+  useEffect13(() => {
     if (mode !== "inline-edit") return;
     const handleMessage2 = (event) => {
       if (event.data?.type === "YA_EMBED_EDIT_COMPLETE" && event.data.fieldId === fieldId) {
@@ -5044,7 +5447,7 @@ function YaEmbed({
     window.addEventListener("message", handleMessage2);
     return () => window.removeEventListener("message", handleMessage2);
   }, [mode, fieldId]);
-  useEffect12(() => {
+  useEffect13(() => {
     if (mode !== "inline-edit") return;
     const checkSize = () => {
       if (containerRef.current) {
@@ -5056,7 +5459,7 @@ function YaEmbed({
     window.addEventListener("resize", checkSize);
     return () => window.removeEventListener("resize", checkSize);
   }, [mode]);
-  useEffect12(() => {
+  useEffect13(() => {
     if (!isSelected || mode !== "inline-edit") return;
     let lastRectKey = "";
     let lastTime = 0;
@@ -5093,16 +5496,16 @@ function YaEmbed({
   const renderEmbed = (isReadOnly) => {
     if (!src && !isReadOnly) {
       return /* @__PURE__ */ jsxs8("div", { className: "ya-embed-placeholder", children: [
-        /* @__PURE__ */ jsx14("img", { src: PLACEHOLDER_SVG3, alt: "" }),
-        /* @__PURE__ */ jsx14("span", { children: "No embed selected" })
+        /* @__PURE__ */ jsx15("img", { src: PLACEHOLDER_SVG3, alt: "" }),
+        /* @__PURE__ */ jsx15("span", { children: "No embed selected" })
       ] });
     }
     if (!isInView && loading === "lazy" && !isReadOnly) {
-      return /* @__PURE__ */ jsx14("div", { className: "ya-embed-placeholder", style: { aspectRatio }, children: /* @__PURE__ */ jsx14("img", { src: PLACEHOLDER_SVG3, alt: "" }) });
+      return /* @__PURE__ */ jsx15("div", { className: "ya-embed-placeholder", style: { aspectRatio }, children: /* @__PURE__ */ jsx15("img", { src: PLACEHOLDER_SVG3, alt: "" }) });
     }
     if (embedType === "spotify" && src) {
       const embedUrl = buildSpotifyEmbedUrl(src);
-      return /* @__PURE__ */ jsx14(
+      return /* @__PURE__ */ jsx15(
         "iframe",
         {
           src: embedUrl,
@@ -5120,7 +5523,7 @@ function YaEmbed({
     }
     if (embedType === "soundcloud" && src) {
       const embedUrl = buildSoundCloudEmbedUrl(src);
-      return /* @__PURE__ */ jsx14(
+      return /* @__PURE__ */ jsx15(
         "iframe",
         {
           src: embedUrl,
@@ -5137,13 +5540,13 @@ function YaEmbed({
     }
     if (embedType === "twitter" && src) {
       return /* @__PURE__ */ jsxs8("div", { className: "ya-embed-twitter", children: [
-        /* @__PURE__ */ jsx14("blockquote", { className: "twitter-tweet", "data-dnt": "true", children: /* @__PURE__ */ jsx14("a", { href: embedData.originalUrl || `https://twitter.com/i/status/${src}`, children: "Loading tweet..." }) }),
-        /* @__PURE__ */ jsx14(TwitterWidgetLoader, {})
+        /* @__PURE__ */ jsx15("blockquote", { className: "twitter-tweet", "data-dnt": "true", children: /* @__PURE__ */ jsx15("a", { href: embedData.originalUrl || `https://twitter.com/i/status/${src}`, children: "Loading tweet..." }) }),
+        /* @__PURE__ */ jsx15(TwitterWidgetLoader, {})
       ] });
     }
     if (embedType === "instagram" && src) {
       const embedUrl = buildInstagramEmbedUrl(src);
-      return /* @__PURE__ */ jsx14(
+      return /* @__PURE__ */ jsx15(
         "iframe",
         {
           src: embedUrl,
@@ -5161,7 +5564,7 @@ function YaEmbed({
       );
     }
     if (embedType === "custom" && src) {
-      return /* @__PURE__ */ jsx14(
+      return /* @__PURE__ */ jsx15(
         "iframe",
         {
           src,
@@ -5185,7 +5588,7 @@ function YaEmbed({
     maxWidth: maxWidth ? `${maxWidth}px` : void 0
   };
   if (mode === "read-only") {
-    return /* @__PURE__ */ jsx14(
+    return /* @__PURE__ */ jsx15(
       "div",
       {
         ref: containerRef,
@@ -5209,8 +5612,8 @@ function YaEmbed({
       strokeLinecap: "round",
       strokeLinejoin: "round",
       children: [
-        /* @__PURE__ */ jsx14("polyline", { points: "16 18 22 12 16 6" }),
-        /* @__PURE__ */ jsx14("polyline", { points: "8 6 2 12 8 18" })
+        /* @__PURE__ */ jsx15("polyline", { points: "16 18 22 12 16 6" }),
+        /* @__PURE__ */ jsx15("polyline", { points: "8 6 2 12 8 18" })
       ]
     }
   );
@@ -5239,12 +5642,12 @@ function YaEmbed({
         renderEmbed(false),
         isSmallEmbed ? /* @__PURE__ */ jsxs8(YaTooltip, { anchorRef: containerRef, show: isHovered && !isSelected, children: [
           embedIcon,
-          /* @__PURE__ */ jsx14("span", { children: "Click to edit" })
+          /* @__PURE__ */ jsx15("span", { children: "Click to edit" })
         ] }) : (
           /* For large embeds: show overlay inside the container */
           /* @__PURE__ */ jsxs8("div", { className: "ya-embed-overlay", children: [
-            /* @__PURE__ */ jsx14("div", { className: "ya-embed-edit-icon", children: embedIcon }),
-            /* @__PURE__ */ jsx14("span", { className: "ya-embed-edit-label", children: "Click to edit" })
+            /* @__PURE__ */ jsx15("div", { className: "ya-embed-edit-icon", children: embedIcon }),
+            /* @__PURE__ */ jsx15("span", { className: "ya-embed-edit-label", children: "Click to edit" })
           ] })
         )
       ]
@@ -5252,7 +5655,7 @@ function YaEmbed({
   );
 }
 function TwitterWidgetLoader() {
-  useEffect12(() => {
+  useEffect13(() => {
     if (window.twttr?.widgets) {
       ;
       window.twttr.widgets.load();
@@ -5273,7 +5676,7 @@ function TwitterWidgetLoader() {
 }
 
 // src/components/YaLink.tsx
-import { useEffect as useEffect15, useLayoutEffect as useLayoutEffect3, useRef as useRef16, useState as useState15, useCallback as useCallback17, useId } from "react";
+import { useEffect as useEffect16, useLayoutEffect as useLayoutEffect3, useRef as useRef17, useState as useState16, useCallback as useCallback18, useId } from "react";
 import { createPortal as createPortal6 } from "react-dom";
 import { useEditor as useEditor2, EditorContent as EditorContent2 } from "@tiptap/react";
 import { BubbleMenu } from "@tiptap/react/menus";
@@ -5283,7 +5686,7 @@ import { Extension as Extension2 } from "@tiptap/core";
 import { Link as WouterLink, useLocation } from "wouter";
 
 // src/components/SafeTriangleBelow.tsx
-import { useEffect as useEffect13, useState as useState13, useRef as useRef14, useCallback as useCallback15 } from "react";
+import { useEffect as useEffect14, useState as useState14, useRef as useRef15, useCallback as useCallback16 } from "react";
 function SafeTriangleBelow({
   triggerRef,
   popoverRef,
@@ -5291,10 +5694,10 @@ function SafeTriangleBelow({
   onLeave,
   onStayInside
 }) {
-  const [bounds, setBounds] = useState13(null);
-  const boundsRef = useRef14(bounds);
+  const [bounds, setBounds] = useState14(null);
+  const boundsRef = useRef15(bounds);
   boundsRef.current = bounds;
-  useEffect13(() => {
+  useEffect14(() => {
     if (!isVisible || !triggerRef.current || !popoverRef.current) {
       setBounds(null);
       return;
@@ -5312,7 +5715,7 @@ function SafeTriangleBelow({
     }, 10);
     return () => clearTimeout(timer);
   }, [isVisible, triggerRef, popoverRef]);
-  const checkMousePosition = useCallback15((e) => {
+  const checkMousePosition = useCallback16((e) => {
     const b = boundsRef.current;
     if (!b) return;
     const { clientX: x, clientY: y } = e;
@@ -5324,7 +5727,7 @@ function SafeTriangleBelow({
       onStayInside?.();
     }
   }, [onLeave, onStayInside]);
-  useEffect13(() => {
+  useEffect14(() => {
     if (!isVisible || !bounds) return;
     document.addEventListener("mousemove", checkMousePosition);
     return () => document.removeEventListener("mousemove", checkMousePosition);
@@ -5333,22 +5736,22 @@ function SafeTriangleBelow({
 }
 
 // src/hooks/useSafeTriangle.ts
-import { useState as useState14, useRef as useRef15, useCallback as useCallback16, useEffect as useEffect14 } from "react";
+import { useState as useState15, useRef as useRef16, useCallback as useCallback17, useEffect as useEffect15 } from "react";
 function useSafeTriangle(options = {}) {
   const { showDelay = 0, hideDelay = 150, enabled = true } = options;
-  const [isVisible, setIsVisible] = useState14(false);
-  const [isHovering, setIsHovering] = useState14(false);
-  const triggerRef = useRef15(null);
-  const popoverRef = useRef15(null);
-  const showTimeoutRef = useRef15(null);
-  const hideTimeoutRef = useRef15(null);
-  useEffect14(() => {
+  const [isVisible, setIsVisible] = useState15(false);
+  const [isHovering, setIsHovering] = useState15(false);
+  const triggerRef = useRef16(null);
+  const popoverRef = useRef16(null);
+  const showTimeoutRef = useRef16(null);
+  const hideTimeoutRef = useRef16(null);
+  useEffect15(() => {
     return () => {
       if (showTimeoutRef.current) clearTimeout(showTimeoutRef.current);
       if (hideTimeoutRef.current) clearTimeout(hideTimeoutRef.current);
     };
   }, []);
-  const show = useCallback16(() => {
+  const show = useCallback17(() => {
     if (!enabled) return;
     if (hideTimeoutRef.current) {
       clearTimeout(hideTimeoutRef.current);
@@ -5356,7 +5759,7 @@ function useSafeTriangle(options = {}) {
     }
     setIsVisible(true);
   }, [enabled]);
-  const hide = useCallback16(() => {
+  const hide = useCallback17(() => {
     if (showTimeoutRef.current) {
       clearTimeout(showTimeoutRef.current);
       showTimeoutRef.current = null;
@@ -5364,7 +5767,7 @@ function useSafeTriangle(options = {}) {
     setIsVisible(false);
     setIsHovering(false);
   }, []);
-  const handleMouseEnter = useCallback16(() => {
+  const handleMouseEnter = useCallback17(() => {
     if (!enabled) return;
     setIsHovering(true);
     if (hideTimeoutRef.current) {
@@ -5379,7 +5782,7 @@ function useSafeTriangle(options = {}) {
       setIsVisible(true);
     }
   }, [showDelay, enabled]);
-  const handleMouseLeave = useCallback16(() => {
+  const handleMouseLeave = useCallback17(() => {
     setIsHovering(false);
     if (showTimeoutRef.current) {
       clearTimeout(showTimeoutRef.current);
@@ -5389,16 +5792,16 @@ function useSafeTriangle(options = {}) {
       setIsVisible(false);
     }, hideDelay);
   }, [hideDelay]);
-  const handleFocus = useCallback16(() => {
+  const handleFocus = useCallback17(() => {
     if (!enabled) return;
     setIsVisible(true);
   }, [enabled]);
-  const handleTriangleLeave = useCallback16(() => {
+  const handleTriangleLeave = useCallback17(() => {
     if (!isHovering) {
       setIsVisible(false);
     }
   }, [isHovering]);
-  const handleStayInside = useCallback16(() => {
+  const handleStayInside = useCallback17(() => {
     if (hideTimeoutRef.current) {
       clearTimeout(hideTimeoutRef.current);
       hideTimeoutRef.current = null;
@@ -5429,7 +5832,7 @@ function useSafeTriangle(options = {}) {
 styleInject('.ya-link-wrapper {\n  position: relative;\n  display: inline;\n}\n.ya-link-editable {\n  cursor: pointer;\n  transition: outline 0.15s ease;\n}\n.ya-link-editable:hover {\n  outline: 2px dashed var(--color-primary, #D4A574);\n  outline-offset: 4px;\n  border-radius: 4px;\n}\nbody.builder-selector-active .ya-link-editable:hover {\n  outline: none;\n  cursor: inherit;\n}\n.ya-link-editing {\n  outline: 2px solid var(--color-primary, #D4A574);\n  outline-offset: 4px;\n  border-radius: 4px;\n  position: relative;\n}\n.ya-link-editing .ProseMirror {\n  color: #1a1a1a !important;\n  caret-color: #1a1a1a;\n}\n.ya-link-editing .ProseMirror p::selection,\n.ya-link-editing .ProseMirror::selection {\n  background-color: rgba(212, 165, 116, 0.4);\n  color: inherit;\n}\n.ya-link-editing .ProseMirror p::-moz-selection,\n.ya-link-editing .ProseMirror::-moz-selection {\n  background-color: rgba(212, 165, 116, 0.4);\n  color: inherit;\n}\n.ProseMirror-gapcursor {\n  display: none !important;\n}\n.ProseMirror .ProseMirror-dropcursor {\n  display: none !important;\n}\nbody.builder-selector-active .ya-link-editable:not(.ya-link-editing)::selection,\nbody.builder-selector-active .ya-link-editable:not(.ya-link-editing) *::selection {\n  color: inherit;\n}\nbody.builder-selector-active .ya-link-editable:not(.ya-link-editing)::-moz-selection,\nbody.builder-selector-active .ya-link-editable:not(.ya-link-editing) *::-moz-selection {\n  color: inherit;\n}\n.ya-link-actions {\n  display: flex;\n  gap: 8px;\n  z-index: 9999;\n  background: rgba(26, 26, 26, 0.95);\n  padding: 8px 10px;\n  border-radius: 8px;\n  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);\n  font-family:\n    system-ui,\n    -apple-system,\n    BlinkMacSystemFont,\n    "Segoe UI",\n    sans-serif;\n}\n.ya-link-btn {\n  padding: 6px 14px;\n  font-size: 12px;\n  font-weight: 500;\n  border-radius: 6px;\n  cursor: pointer;\n  transition: all 0.15s ease;\n  border: none;\n}\n.ya-link-btn-cancel {\n  background: #333333;\n  color: #ffffff;\n  border: 1px solid #555555;\n}\n.ya-link-btn-cancel:hover {\n  background: #444444;\n  color: #ffffff;\n  border-color: #666666;\n}\n.ya-link-btn-save {\n  background: #D4A574;\n  color: #1a1a1a;\n}\n.ya-link-btn-save:hover {\n  background: #c4956a;\n}\n.ya-href-popover {\n  position: fixed;\n  z-index: 10000;\n  min-width: 280px;\n  max-width: 320px;\n  background: #1a1a1a;\n  border-radius: 12px;\n  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);\n  animation: ya-href-popover-fade-in 0.15s ease;\n  overflow: hidden;\n  font-family:\n    system-ui,\n    -apple-system,\n    BlinkMacSystemFont,\n    "Segoe UI",\n    sans-serif;\n}\n@keyframes ya-href-popover-fade-in {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n.ya-href-popover::before {\n  content: "";\n  position: absolute;\n  top: -6px;\n  left: 50%;\n  transform: translateX(-50%);\n  border-left: 8px solid transparent;\n  border-right: 8px solid transparent;\n  border-bottom: 8px solid #1a1a1a;\n}\n.ya-href-popover-header {\n  padding: 12px 16px;\n  font-size: 13px;\n  font-weight: 600;\n  color: #ffffff;\n  border-bottom: 1px solid rgba(255, 255, 255, 0.1);\n}\n.ya-href-popover-section {\n  padding: 12px 16px;\n}\n.ya-href-popover-label {\n  display: block;\n  font-size: 11px;\n  font-weight: 500;\n  color: rgba(255, 255, 255, 0.6);\n  text-transform: uppercase;\n  letter-spacing: 0.5px;\n  margin-bottom: 8px;\n}\n.ya-href-collapsible-header {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  width: 100%;\n  padding: 0;\n  background: transparent;\n  border: none;\n  cursor: pointer;\n  transition: color 0.15s ease;\n}\n.ya-href-collapsible-header:hover {\n  color: rgba(255, 255, 255, 0.8);\n}\n.ya-href-chevron {\n  font-size: 8px;\n  color: rgba(255, 255, 255, 0.4);\n}\n.ya-href-popover-pages {\n  display: flex;\n  flex-direction: column;\n  gap: 4px;\n  max-height: 200px;\n  overflow-y: auto;\n}\n.ya-href-page-btn {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  gap: 4px;\n  width: 100%;\n  padding: 10px 12px;\n  background: rgba(255, 255, 255, 0.05);\n  border: 1px solid transparent;\n  border-radius: 8px;\n  color: #e0e0e0;\n  font-size: 13px;\n  font-weight: 500;\n  text-align: left;\n  cursor: pointer;\n  transition: all 0.15s ease;\n}\n.ya-href-page-btn:hover {\n  background: rgba(255, 255, 255, 0.1);\n  border-color: rgba(255, 255, 255, 0.2);\n}\n.ya-href-page-btn.is-selected {\n  background: #D4A574;\n  color: #1a1a1a;\n}\n.ya-href-page-btn.is-selected .ya-href-page-path {\n  color: rgba(26, 26, 26, 0.6);\n}\n.ya-href-page-path {\n  font-size: 11px;\n  color: rgba(255, 255, 255, 0.4);\n  font-family: monospace;\n  word-break: break-all;\n}\n.ya-href-external-toggle {\n  display: block;\n  width: 100%;\n  padding: 10px 16px;\n  background: transparent;\n  border: none;\n  border-top: 1px solid rgba(255, 255, 255, 0.1);\n  color: #D4A574;\n  font-size: 12px;\n  font-weight: 500;\n  text-align: center;\n  cursor: pointer;\n  transition: background 0.15s ease;\n}\n.ya-href-external-toggle:hover {\n  background: rgba(255, 255, 255, 0.05);\n}\n.ya-href-url-input {\n  width: 100%;\n  padding: 10px 12px;\n  background: rgba(255, 255, 255, 0.05);\n  border: 1px solid rgba(255, 255, 255, 0.2);\n  border-radius: 8px;\n  color: #ffffff;\n  font-size: 13px;\n  outline: none;\n  transition: border-color 0.15s ease;\n}\n.ya-href-url-input::placeholder {\n  color: rgba(255, 255, 255, 0.4);\n}\n.ya-href-url-input:focus {\n  border-color: var(--color-primary, #D4A574);\n}\n.ya-href-popover-actions {\n  display: flex;\n  justify-content: flex-end;\n  gap: 8px;\n  padding: 12px 16px;\n  border-top: 1px solid rgba(255, 255, 255, 0.1);\n}\n.ya-href-popover--above {\n  animation: ya-href-popover-fade-in-above 0.15s ease;\n}\n@keyframes ya-href-popover-fade-in-above {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n.ya-href-popover--above::before {\n  top: auto;\n  bottom: -6px;\n  border-bottom: none;\n  border-top: 8px solid #1a1a1a;\n}\n.ya-link-edit-popover {\n  position: fixed;\n  z-index: 10000;\n  background: #2a2a2a;\n  border-radius: 6px;\n  padding: 4px;\n  display: flex;\n  gap: 4px;\n  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);\n  transition: opacity 100ms ease;\n  font-family:\n    system-ui,\n    -apple-system,\n    BlinkMacSystemFont,\n    "Segoe UI",\n    sans-serif;\n  white-space: nowrap;\n}\n.ya-link-edit-popover::before {\n  content: "";\n  position: absolute;\n  top: -5px;\n  left: 50%;\n  transform: translateX(-50%);\n  border-left: 6px solid transparent;\n  border-right: 6px solid transparent;\n  border-bottom: 6px solid #2a2a2a;\n}\n.ya-link-edit-popover button {\n  background: #3a3a3a;\n  border: none;\n  color: #fff;\n  padding: 6px 12px;\n  border-radius: 4px;\n  cursor: pointer;\n  font-size: 13px;\n  font-weight: 500;\n  transition: background 0.15s ease;\n}\n.ya-link-edit-popover button:hover {\n  background: #4a4a4a;\n}\n');
 
 // src/components/YaLink.tsx
-import { Fragment as Fragment4, jsx as jsx15, jsxs as jsxs9 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx16, jsxs as jsxs9 } from "react/jsx-runtime";
 function isInternalPath(path) {
   if (!path) return false;
   if (path.startsWith("#")) return false;
@@ -5527,37 +5930,40 @@ function discoverSectionsFromDOM() {
   return sections;
 }
 function YaLink({ fieldId, href: defaultHref = "#", className, wrapperClassName, style, as: Component = "a", children, availablePages, onClick, target, rel }) {
-  const { getValue, setValue, mode, saveToWorker, getPages } = useContentStore();
-  const [, navigate] = useLocation();
-  const pages = availablePages ?? getPages();
-  const [sections, setSections] = useState15([]);
-  const [sectionsExpanded, setSectionsExpanded] = useState15(false);
   const textFieldId = `${fieldId}.text`;
   const hrefFieldId = `${fieldId}.href`;
-  const storeText = getValue(textFieldId);
-  const storeHref = getValue(hrefFieldId);
+  const textContent = useContent(textFieldId);
+  const hrefContent = useContent(hrefFieldId);
+  const { mode } = textContent;
+  const { getPages } = useContentStore();
+  const [, navigate] = useLocation();
+  const pages = availablePages ?? getPages();
+  const [sections, setSections] = useState16([]);
+  const [sectionsExpanded, setSectionsExpanded] = useState16(false);
+  const storeText = textContent.get();
+  const storeHref = hrefContent.get();
   const isIconMode = children != null && typeof children !== "string";
   const text2 = storeText || (typeof children === "string" ? children : "");
   const href = storeHref || defaultHref;
   const isExternal = isExternalHref(href);
   const effectiveTarget = target ?? (isExternal ? "_blank" : void 0);
   const effectiveRel = rel ?? (isExternal ? "noopener noreferrer" : void 0);
-  const [editingMode, setEditingMode] = useState15(null);
-  const [originalText, setOriginalText] = useState15(text2);
-  const [originalHref, setOriginalHref] = useState15(href);
-  const [currentHref, setCurrentHref] = useState15(href);
-  const [isExternalUrl, setIsExternalUrl] = useState15(false);
-  const [externalUrl, setExternalUrl] = useState15("");
-  const containerRef = useRef16(null);
-  const hrefPopoverRef = useRef16(null);
-  const [actionButtonsPos, setActionButtonsPos] = useState15(null);
-  const [editPopoverPos, setEditPopoverPos] = useState15(null);
-  const [editPopoverVisible, setEditPopoverVisible] = useState15(false);
-  const [editPopoverMounted, setEditPopoverMounted] = useState15(false);
-  const [hrefPopoverPos, setHrefPopoverPos] = useState15(null);
-  const handleSaveTextRef = useRef16(() => {
+  const [editingMode, setEditingMode] = useState16(null);
+  const [originalText, setOriginalText] = useState16(text2);
+  const [originalHref, setOriginalHref] = useState16(href);
+  const [currentHref, setCurrentHref] = useState16(href);
+  const [isExternalUrl, setIsExternalUrl] = useState16(false);
+  const [externalUrl, setExternalUrl] = useState16("");
+  const containerRef = useRef17(null);
+  const hrefPopoverRef = useRef17(null);
+  const [actionButtonsPos, setActionButtonsPos] = useState16(null);
+  const [editPopoverPos, setEditPopoverPos] = useState16(null);
+  const [editPopoverVisible, setEditPopoverVisible] = useState16(false);
+  const [editPopoverMounted, setEditPopoverMounted] = useState16(false);
+  const [hrefPopoverPos, setHrefPopoverPos] = useState16(null);
+  const handleSaveTextRef = useRef17(() => {
   });
-  const handleCancelTextRef = useRef16(() => {
+  const handleCancelTextRef = useRef17(() => {
   });
   const {
     popoverRef: editPopoverRef,
@@ -5571,12 +5977,12 @@ function YaLink({ fieldId, href: defaultHref = "#", className, wrapperClassName,
   });
   const triggerRef = containerRef;
   const instanceId = useId();
-  useEffect15(() => {
+  useEffect16(() => {
     if (showEditPopover && mode === "inline-edit" && !editingMode) {
       window.dispatchEvent(new CustomEvent("yalink:popover-open", { detail: { id: instanceId } }));
     }
   }, [showEditPopover, mode, editingMode, instanceId]);
-  useEffect15(() => {
+  useEffect16(() => {
     const handleOtherPopoverOpen = (event) => {
       const customEvent = event;
       if (customEvent.detail.id !== instanceId && showEditPopover) {
@@ -5630,19 +6036,19 @@ function YaLink({ fieldId, href: defaultHref = "#", className, wrapperClassName,
       }
     }
   });
-  useEffect15(() => {
+  useEffect16(() => {
     if (editor && editingMode !== "text") {
       if (editor.getHTML() !== text2) {
         editor.commands.setContent(text2);
       }
     }
   }, [text2, editor, editingMode]);
-  useEffect15(() => {
+  useEffect16(() => {
     if (editingMode !== "link") {
       setCurrentHref(href);
     }
   }, [href, editingMode]);
-  useEffect15(() => {
+  useEffect16(() => {
     if (editingMode !== "text" || !containerRef.current) {
       setActionButtonsPos(null);
       return;
@@ -5663,7 +6069,7 @@ function YaLink({ fieldId, href: defaultHref = "#", className, wrapperClassName,
       window.removeEventListener("resize", updatePosition);
     };
   }, [editingMode]);
-  useEffect15(() => {
+  useEffect16(() => {
     const shouldShow = showEditPopover && !editingMode && mode === "inline-edit";
     if (shouldShow) {
       setEditPopoverMounted(true);
@@ -5725,7 +6131,7 @@ function YaLink({ fieldId, href: defaultHref = "#", className, wrapperClassName,
       window.removeEventListener("resize", updatePosition);
     };
   }, [editingMode]);
-  useEffect15(() => {
+  useEffect16(() => {
     if (editingMode !== "link") return;
     const handleClickOutside = (event) => {
       const target2 = event.target;
@@ -5739,38 +6145,38 @@ function YaLink({ fieldId, href: defaultHref = "#", className, wrapperClassName,
     document.addEventListener("mousedown", handleClickOutside);
     return () => document.removeEventListener("mousedown", handleClickOutside);
   }, [editingMode, originalHref]);
-  const handleSaveText = useCallback17(() => {
+  const handleSaveText = useCallback18(() => {
     if (!editor) return;
     let html = editor.getHTML();
     html = html.replace(/<\/p><p>/g, "<br><br>").replace(/^<p>/, "").replace(/<\/p>$/, "");
-    setValue(textFieldId, html, "user");
-    saveToWorker?.(textFieldId, html);
+    textContent.set(html, "user");
+    textContent.save();
     setEditingMode(null);
-  }, [editor, textFieldId, setValue, saveToWorker]);
-  const handleSaveLink = useCallback17(() => {
-    setValue(hrefFieldId, currentHref, "user");
-    saveToWorker?.(hrefFieldId, currentHref);
+  }, [editor, textContent]);
+  const handleSaveLink = useCallback18(() => {
+    hrefContent.set(currentHref, "user");
+    hrefContent.save();
     setEditingMode(null);
     setIsExternalUrl(false);
     setExternalUrl("");
-  }, [hrefFieldId, currentHref, setValue, saveToWorker]);
-  const handleCancelText = useCallback17(() => {
+  }, [currentHref, hrefContent]);
+  const handleCancelText = useCallback18(() => {
     if (editor) {
       editor.commands.setContent(originalText);
     }
     setEditingMode(null);
   }, [editor, originalText]);
-  const handleCancelLink = useCallback17(() => {
+  const handleCancelLink = useCallback18(() => {
     setCurrentHref(originalHref);
     setEditingMode(null);
     setIsExternalUrl(false);
     setExternalUrl("");
   }, [originalHref]);
-  useEffect15(() => {
+  useEffect16(() => {
     handleSaveTextRef.current = handleSaveText;
     handleCancelTextRef.current = handleCancelText;
   }, [handleSaveText, handleCancelText]);
-  const handleClick = useCallback17(
+  const handleClick = useCallback18(
     (e) => {
       const selectModeEnabled = window.__builderSelectModeEnabled;
       if (selectModeEnabled) {
@@ -5802,7 +6208,7 @@ function YaLink({ fieldId, href: defaultHref = "#", className, wrapperClassName,
     },
     [href, navigate, onClick]
   );
-  const startEditText = useCallback17(() => {
+  const startEditText = useCallback18(() => {
     hideEditPopover();
     if (isIconMode) {
       window.dispatchEvent(new CustomEvent("yatext:edit-mode", {
@@ -5816,14 +6222,14 @@ function YaLink({ fieldId, href: defaultHref = "#", className, wrapperClassName,
       }, 20);
     }
   }, [text2, editor, hideEditPopover, isIconMode, fieldId]);
-  const startEditLink = useCallback17(() => {
+  const startEditLink = useCallback18(() => {
     hideEditPopover();
     setEditingMode("link");
     setOriginalHref(href);
     setCurrentHref(href);
     setSections(discoverSectionsFromDOM());
   }, [href, hideEditPopover]);
-  const handleKeyDown = useCallback17(
+  const handleKeyDown = useCallback18(
     (event) => {
       if (editingMode !== "text") return;
       if (event.key === "Enter" && !event.shiftKey) {
@@ -5844,7 +6250,7 @@ function YaLink({ fieldId, href: defaultHref = "#", className, wrapperClassName,
     },
     [editingMode, handleSaveText, handleCancelText]
   );
-  const handleFontSizeChange = useCallback17(
+  const handleFontSizeChange = useCallback18(
     (e) => {
       if (!editor) return;
       const size = e.target.value;
@@ -5856,7 +6262,7 @@ function YaLink({ fieldId, href: defaultHref = "#", className, wrapperClassName,
     },
     [editor]
   );
-  const handleFontWeightChange = useCallback17(
+  const handleFontWeightChange = useCallback18(
     (e) => {
       if (!editor) return;
       const weight = e.target.value;
@@ -5868,11 +6274,11 @@ function YaLink({ fieldId, href: defaultHref = "#", className, wrapperClassName,
     },
     [editor]
   );
-  const handlePageSelect = useCallback17((path) => {
+  const handlePageSelect = useCallback18((path) => {
     setCurrentHref(path);
     setIsExternalUrl(false);
   }, []);
-  const handleExternalUrlApply = useCallback17(() => {
+  const handleExternalUrlApply = useCallback18(() => {
     if (externalUrl) {
       setCurrentHref(externalUrl);
     }
@@ -5888,9 +6294,9 @@ function YaLink({ fieldId, href: defaultHref = "#", className, wrapperClassName,
     return attrs.fontWeight || "";
   };
   if (mode === "read-only") {
-    const content = isIconMode ? children : /* @__PURE__ */ jsx15(SafeHtml, { content: text2, mode });
+    const content = isIconMode ? children : /* @__PURE__ */ jsx16(SafeHtml, { content: text2, mode });
     if (isInternalPath(href)) {
-      return /* @__PURE__ */ jsx15(
+      return /* @__PURE__ */ jsx16(
         WouterLink,
         {
           href,
@@ -5902,7 +6308,7 @@ function YaLink({ fieldId, href: defaultHref = "#", className, wrapperClassName,
         }
       );
     }
-    return /* @__PURE__ */ jsx15(
+    return /* @__PURE__ */ jsx16(
       Component,
       {
         ref: containerRef,
@@ -5918,7 +6324,7 @@ function YaLink({ fieldId, href: defaultHref = "#", className, wrapperClassName,
     );
   }
   return /* @__PURE__ */ jsxs9("span", { className: `ya-link-wrapper ${wrapperClassName || ""}`, children: [
-    /* @__PURE__ */ jsx15(
+    /* @__PURE__ */ jsx16(
       Component,
       {
         ref: containerRef,
@@ -5947,27 +6353,27 @@ function YaLink({ fieldId, href: defaultHref = "#", className, wrapperClassName,
                 options: { offset: 6, placement: "top" },
                 className: "ya-bubble-menu",
                 children: [
-                  /* @__PURE__ */ jsx15(
+                  /* @__PURE__ */ jsx16(
                     "button",
                     {
                       type: "button",
                       onClick: () => editor.chain().focus().toggleBold().run(),
                       className: `ya-bubble-btn ${editor.isActive("bold") ? "is-active" : ""}`,
                       title: "Bold",
-                      children: /* @__PURE__ */ jsx15("strong", { children: "B" })
+                      children: /* @__PURE__ */ jsx16("strong", { children: "B" })
                     }
                   ),
-                  /* @__PURE__ */ jsx15(
+                  /* @__PURE__ */ jsx16(
                     "button",
                     {
                       type: "button",
                       onClick: () => editor.chain().focus().toggleItalic().run(),
                       className: `ya-bubble-btn ${editor.isActive("italic") ? "is-active" : ""}`,
                       title: "Italic",
-                      children: /* @__PURE__ */ jsx15("em", { children: "I" })
+                      children: /* @__PURE__ */ jsx16("em", { children: "I" })
                     }
                   ),
-                  /* @__PURE__ */ jsx15("span", { className: "ya-bubble-divider" }),
+                  /* @__PURE__ */ jsx16("span", { className: "ya-bubble-divider" }),
                   /* @__PURE__ */ jsxs9(
                     "select",
                     {
@@ -5976,8 +6382,8 @@ function YaLink({ fieldId, href: defaultHref = "#", className, wrapperClassName,
                       className: "ya-bubble-select",
                       title: "Font Size",
                       children: [
-                        /* @__PURE__ */ jsx15("option", { value: "", children: "Size" }),
-                        Object.entries(SIZE_PRESETS2).map(([name, size]) => /* @__PURE__ */ jsx15("option", { value: size, children: name }, name))
+                        /* @__PURE__ */ jsx16("option", { value: "", children: "Size" }),
+                        Object.entries(SIZE_PRESETS2).map(([name, size]) => /* @__PURE__ */ jsx16("option", { value: size, children: name }, name))
                       ]
                     }
                   ),
@@ -5989,8 +6395,8 @@ function YaLink({ fieldId, href: defaultHref = "#", className, wrapperClassName,
                       className: "ya-bubble-select",
                       title: "Font Weight",
                       children: [
-                        /* @__PURE__ */ jsx15("option", { value: "", children: "Weight" }),
-                        Object.entries(WEIGHT_PRESETS2).map(([name, weight]) => /* @__PURE__ */ jsx15("option", { value: weight, children: name }, name))
+                        /* @__PURE__ */ jsx16("option", { value: "", children: "Weight" }),
+                        Object.entries(WEIGHT_PRESETS2).map(([name, weight]) => /* @__PURE__ */ jsx16("option", { value: weight, children: name }, name))
                       ]
                     }
                   )
@@ -6000,7 +6406,7 @@ function YaLink({ fieldId, href: defaultHref = "#", className, wrapperClassName,
             document.body
           ),
           editingMode === "text" ? /* @__PURE__ */ jsxs9(Fragment4, { children: [
-            /* @__PURE__ */ jsx15(EditorContent2, { editor }),
+            /* @__PURE__ */ jsx16(EditorContent2, { editor }),
             actionButtonsPos && createPortal6(
               /* @__PURE__ */ jsxs9(
                 "div",
@@ -6012,15 +6418,15 @@ function YaLink({ fieldId, href: defaultHref = "#", className, wrapperClassName,
                     right: actionButtonsPos.right
                   },
                   children: [
-                    /* @__PURE__ */ jsx15("button", { type: "button", onClick: handleCancelText, className: "ya-link-btn ya-link-btn-cancel", children: "Cancel" }),
-                    /* @__PURE__ */ jsx15("button", { type: "button", onClick: handleSaveText, className: "ya-link-btn ya-link-btn-save", children: "Save" })
+                    /* @__PURE__ */ jsx16("button", { type: "button", onClick: handleCancelText, className: "ya-link-btn ya-link-btn-cancel", children: "Cancel" }),
+                    /* @__PURE__ */ jsx16("button", { type: "button", onClick: handleSaveText, className: "ya-link-btn ya-link-btn-save", children: "Save" })
                   ]
                 }
               ),
               document.body
             )
-          ] }) : /* @__PURE__ */ jsx15(SafeHtml, { content: text2, mode })
-        ] }) : /* @__PURE__ */ jsx15(SafeHtml, { content: text2, mode })
+          ] }) : /* @__PURE__ */ jsx16(SafeHtml, { content: text2, mode })
+        ] }) : /* @__PURE__ */ jsx16(SafeHtml, { content: text2, mode })
       }
     ),
     editPopoverMounted && editPopoverPos && createPortal6(
@@ -6038,14 +6444,14 @@ function YaLink({ fieldId, href: defaultHref = "#", className, wrapperClassName,
           onMouseEnter: safeTriangleHandlers.onMouseEnter,
           onMouseLeave: safeTriangleHandlers.onMouseLeave,
           children: [
-            /* @__PURE__ */ jsx15("button", { type: "button", onClick: startEditText, children: "Edit text" }),
-            /* @__PURE__ */ jsx15("button", { type: "button", onClick: startEditLink, children: "Edit link" })
+            /* @__PURE__ */ jsx16("button", { type: "button", onClick: startEditText, children: "Edit text" }),
+            /* @__PURE__ */ jsx16("button", { type: "button", onClick: startEditLink, children: "Edit link" })
           ]
         }
       ),
       document.body
     ),
-    /* @__PURE__ */ jsx15(
+    /* @__PURE__ */ jsx16(
       SafeTriangleBelow,
       {
         triggerRef,
@@ -6068,7 +6474,7 @@ function YaLink({ fieldId, href: defaultHref = "#", className, wrapperClassName,
             transform: "translateX(-50%)"
           },
           children: [
-            /* @__PURE__ */ jsx15("div", { className: "ya-href-popover-header", children: "Link destination" }),
+            /* @__PURE__ */ jsx16("div", { className: "ya-href-popover-header", children: "Link destination" }),
             !isExternalUrl ? /* @__PURE__ */ jsxs9(Fragment4, { children: [
               sections.length > 0 && /* @__PURE__ */ jsxs9("div", { className: "ya-href-popover-section", children: [
                 /* @__PURE__ */ jsxs9(
@@ -6078,14 +6484,14 @@ function YaLink({ fieldId, href: defaultHref = "#", className, wrapperClassName,
                     className: "ya-href-popover-label ya-href-collapsible-header",
                     onClick: () => setSectionsExpanded(!sectionsExpanded),
                     children: [
-                      /* @__PURE__ */ jsx15("span", { className: "ya-href-chevron", children: sectionsExpanded ? "\u25BC" : "\u25B6" }),
+                      /* @__PURE__ */ jsx16("span", { className: "ya-href-chevron", children: sectionsExpanded ? "\u25BC" : "\u25B6" }),
                       "Scroll to section (",
                       sections.length,
                       ")"
                     ]
                   }
                 ),
-                sectionsExpanded && /* @__PURE__ */ jsx15("div", { className: "ya-href-popover-pages", children: sections.map((section) => /* @__PURE__ */ jsxs9(
+                sectionsExpanded && /* @__PURE__ */ jsx16("div", { className: "ya-href-popover-pages", children: sections.map((section) => /* @__PURE__ */ jsxs9(
                   "button",
                   {
                     type: "button",
@@ -6093,15 +6499,15 @@ function YaLink({ fieldId, href: defaultHref = "#", className, wrapperClassName,
                     onClick: () => handlePageSelect(section.path),
                     children: [
                       section.label,
-                      /* @__PURE__ */ jsx15("span", { className: "ya-href-page-path", children: section.path })
+                      /* @__PURE__ */ jsx16("span", { className: "ya-href-page-path", children: section.path })
                     ]
                   },
                   section.path
                 )) })
               ] }),
               pages.length > 0 && /* @__PURE__ */ jsxs9("div", { className: "ya-href-popover-section", children: [
-                /* @__PURE__ */ jsx15("label", { className: "ya-href-popover-label", children: "Navigate to page" }),
-                /* @__PURE__ */ jsx15("div", { className: "ya-href-popover-pages", children: pages.map((page) => /* @__PURE__ */ jsxs9(
+                /* @__PURE__ */ jsx16("label", { className: "ya-href-popover-label", children: "Navigate to page" }),
+                /* @__PURE__ */ jsx16("div", { className: "ya-href-popover-pages", children: pages.map((page) => /* @__PURE__ */ jsxs9(
                   "button",
                   {
                     type: "button",
@@ -6109,13 +6515,13 @@ function YaLink({ fieldId, href: defaultHref = "#", className, wrapperClassName,
                     onClick: () => handlePageSelect(page.path),
                     children: [
                       page.label,
-                      /* @__PURE__ */ jsx15("span", { className: "ya-href-page-path", children: page.path })
+                      /* @__PURE__ */ jsx16("span", { className: "ya-href-page-path", children: page.path })
                     ]
                   },
                   page.path
                 )) })
               ] }),
-              /* @__PURE__ */ jsx15(
+              /* @__PURE__ */ jsx16(
                 "button",
                 {
                   type: "button",
@@ -6129,8 +6535,8 @@ function YaLink({ fieldId, href: defaultHref = "#", className, wrapperClassName,
               )
             ] }) : /* @__PURE__ */ jsxs9(Fragment4, { children: [
               /* @__PURE__ */ jsxs9("div", { className: "ya-href-popover-section", children: [
-                /* @__PURE__ */ jsx15("label", { className: "ya-href-popover-label", children: "External URL" }),
-                /* @__PURE__ */ jsx15(
+                /* @__PURE__ */ jsx16("label", { className: "ya-href-popover-label", children: "External URL" }),
+                /* @__PURE__ */ jsx16(
                   "input",
                   {
                     type: "url",
@@ -6142,11 +6548,11 @@ function YaLink({ fieldId, href: defaultHref = "#", className, wrapperClassName,
                   }
                 )
               ] }),
-              /* @__PURE__ */ jsx15("button", { type: "button", className: "ya-href-external-toggle", onClick: () => setIsExternalUrl(false), children: "\u2190 Back to pages" })
+              /* @__PURE__ */ jsx16("button", { type: "button", className: "ya-href-external-toggle", onClick: () => setIsExternalUrl(false), children: "\u2190 Back to pages" })
             ] }),
             /* @__PURE__ */ jsxs9("div", { className: "ya-href-popover-actions", children: [
-              /* @__PURE__ */ jsx15("button", { type: "button", className: "ya-link-btn ya-link-btn-cancel", onClick: handleCancelLink, children: "Cancel" }),
-              isExternalUrl ? /* @__PURE__ */ jsx15("button", { type: "button", className: "ya-link-btn ya-link-btn-save", onClick: handleExternalUrlApply, children: "Apply" }) : /* @__PURE__ */ jsx15("button", { type: "button", className: "ya-link-btn ya-link-btn-save", onClick: handleSaveLink, children: "Save" })
+              /* @__PURE__ */ jsx16("button", { type: "button", className: "ya-link-btn ya-link-btn-cancel", onClick: handleCancelLink, children: "Cancel" }),
+              isExternalUrl ? /* @__PURE__ */ jsx16("button", { type: "button", className: "ya-link-btn ya-link-btn-save", onClick: handleExternalUrlApply, children: "Apply" }) : /* @__PURE__ */ jsx16("button", { type: "button", className: "ya-link-btn ya-link-btn-save", onClick: handleSaveLink, children: "Save" })
             ] })
           ]
         }
@@ -6157,34 +6563,34 @@ function YaLink({ fieldId, href: defaultHref = "#", className, wrapperClassName,
 }
 
 // src/components/YaContainer.tsx
-import { useCallback as useCallback19, useEffect as useEffect17, useRef as useRef18, useState as useState17 } from "react";
+import { useCallback as useCallback20, useEffect as useEffect18, useRef as useRef19, useState as useState18 } from "react";
 import { createPortal as createPortal8 } from "react-dom";
 
 // src/components/Tooltip.tsx
-import { useState as useState16, useRef as useRef17, useEffect as useEffect16, useLayoutEffect as useLayoutEffect4, useCallback as useCallback18 } from "react";
+import { useState as useState17, useRef as useRef18, useEffect as useEffect17, useLayoutEffect as useLayoutEffect4, useCallback as useCallback19 } from "react";
 import { createPortal as createPortal7 } from "react-dom";
 
 // src/components/tooltip.css
 styleInject('.ya-tooltip-trigger {\n  display: inline-flex;\n}\n.ya-tooltip-v2 {\n  position: fixed;\n  z-index: 10000;\n  padding: 8px 12px;\n  background: #1a1a1a;\n  color: white;\n  font-size: 13px;\n  font-weight: 500;\n  font-family:\n    system-ui,\n    -apple-system,\n    BlinkMacSystemFont,\n    "Segoe UI",\n    sans-serif;\n  border-radius: 6px;\n  white-space: nowrap;\n  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);\n  pointer-events: none;\n  animation: ya-tooltip-v2-fade-in 0.15s ease-out;\n}\n@keyframes ya-tooltip-v2-fade-in {\n  from {\n    opacity: 0;\n  }\n  to {\n    opacity: 1;\n  }\n}\n.ya-tooltip-v2-arrow {\n  position: absolute;\n  width: 0;\n  height: 0;\n  left: 50%;\n  transform: translateX(-50%);\n}\n.ya-tooltip-v2-bottom .ya-tooltip-v2-arrow {\n  top: -6px;\n  border-left: 6px solid transparent;\n  border-right: 6px solid transparent;\n  border-bottom: 6px solid #1a1a1a;\n}\n.ya-tooltip-v2-top .ya-tooltip-v2-arrow {\n  bottom: -6px;\n  border-left: 6px solid transparent;\n  border-right: 6px solid transparent;\n  border-top: 6px solid #1a1a1a;\n}\n.ya-tooltip-v2-left .ya-tooltip-v2-arrow {\n  right: -6px;\n  left: auto;\n  top: 50%;\n  transform: translateY(-50%);\n  border-top: 6px solid transparent;\n  border-bottom: 6px solid transparent;\n  border-left: 6px solid #1a1a1a;\n}\n.ya-tooltip-v2-right .ya-tooltip-v2-arrow {\n  left: -6px;\n  top: 50%;\n  transform: translateY(-50%);\n  border-top: 6px solid transparent;\n  border-bottom: 6px solid transparent;\n  border-right: 6px solid #1a1a1a;\n}\n');
 
 // src/components/Tooltip.tsx
-import { Fragment as Fragment5, jsx as jsx16, jsxs as jsxs10 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx17, jsxs as jsxs10 } from "react/jsx-runtime";
 function Tooltip({
   content,
   children,
   position = "bottom",
   delay = 0
 }) {
-  const [isVisible, setIsVisible] = useState16(false);
-  const [tooltipPosition, setTooltipPosition] = useState16(null);
-  const [isMounted, setIsMounted] = useState16(false);
-  const triggerRef = useRef17(null);
-  const tooltipRef = useRef17(null);
-  const timeoutRef = useRef17(null);
-  useEffect16(() => {
+  const [isVisible, setIsVisible] = useState17(false);
+  const [tooltipPosition, setTooltipPosition] = useState17(null);
+  const [isMounted, setIsMounted] = useState17(false);
+  const triggerRef = useRef18(null);
+  const tooltipRef = useRef18(null);
+  const timeoutRef = useRef18(null);
+  useEffect17(() => {
     setIsMounted(true);
   }, []);
-  const calculatePosition = useCallback18(() => {
+  const calculatePosition = useCallback19(() => {
     if (!triggerRef.current) return null;
     const triggerRect = triggerRef.current.getBoundingClientRect();
     const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
@@ -6269,7 +6675,7 @@ function Tooltip({
     setIsVisible(false);
     setTooltipPosition(null);
   };
-  useEffect16(() => {
+  useEffect17(() => {
     return () => {
       if (timeoutRef.current) {
         clearTimeout(timeoutRef.current);
@@ -6342,7 +6748,7 @@ function Tooltip({
         role: "tooltip",
         children: [
           content,
-          /* @__PURE__ */ jsx16(
+          /* @__PURE__ */ jsx17(
             "div",
             {
               className: "ya-tooltip-v2-arrow",
@@ -6355,7 +6761,7 @@ function Tooltip({
     document.body
   ) : null;
   return /* @__PURE__ */ jsxs10(Fragment5, { children: [
-    /* @__PURE__ */ jsx16(
+    /* @__PURE__ */ jsx17(
       "div",
       {
         ref: triggerRef,
@@ -6373,7 +6779,7 @@ function Tooltip({
 styleInject('.ya-container {\n  position: relative;\n}\n.ya-container-has-overlay::after {\n  content: "";\n  position: absolute;\n  inset: 0;\n  background: var(--ya-overlay-color, transparent);\n  opacity: var(--ya-overlay-opacity, 0);\n  pointer-events: none;\n  z-index: 0;\n}\n.ya-container > *:not(.ya-container-toolbar) {\n  position: relative;\n  z-index: 1;\n}\n.ya-container-editable {\n  transition: outline 0.15s ease;\n  pointer-events: none;\n}\n.ya-container-editable > * {\n  pointer-events: auto;\n}\n.ya-container-editable:hover {\n  outline: 2px dashed var(--color-primary, #D4A574);\n  outline-offset: -2px;\n}\nbody.builder-selector-active .ya-container-editable:hover {\n  outline: none;\n}\n.ya-container-selected {\n  outline: 3px solid var(--color-primary, #D4A574);\n  outline-offset: -3px;\n}\n.ya-container-toolbar {\n  display: flex;\n  gap: 4px;\n  background: rgba(26, 26, 26, 0.95);\n  padding: 6px 8px;\n  border-radius: 8px;\n  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);\n  z-index: 9999;\n  animation: ya-container-toolbar-fade-in 0.15s ease;\n}\n@keyframes ya-container-toolbar-fade-in {\n  from {\n    opacity: 0;\n    transform: translateY(-4px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n.ya-container-toolbar button {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 36px;\n  height: 36px;\n  background: #3a3a3a;\n  border: none;\n  border-radius: 6px;\n  color: #ffffff;\n  cursor: pointer;\n  transition: background 0.15s ease, transform 0.1s ease;\n}\n.ya-container-toolbar button:hover {\n  background: #4a4a4a;\n  transform: scale(1.05);\n}\n.ya-container-toolbar button:active {\n  transform: scale(0.98);\n}\n.ya-container-toolbar button.active {\n  background: var(--color-primary, #D4A574);\n  color: #1a1a1a;\n}\n.ya-container-toolbar button svg {\n  width: 18px;\n  height: 18px;\n}\n.ya-container-toolbar button[aria-label="Clear background"] {\n  background: #3a2a2a;\n}\n.ya-container-toolbar button[aria-label="Clear background"]:hover {\n  background: #5a3a3a;\n}\n.ya-container:focus-visible {\n  outline: 3px solid var(--color-primary, #D4A574);\n  outline-offset: -3px;\n}\n.ya-container-toolbar button:focus-visible {\n  outline: 2px solid var(--color-primary, #D4A574);\n  outline-offset: 2px;\n}\n.ya-container-drop-target {\n  outline: 2px dashed var(--ya-drop-color, #3b82f6) !important;\n  outline-offset: -2px;\n  pointer-events: auto !important;\n}\n.ya-container-drop-target .ya-container-toolbar {\n  display: none !important;\n}\n.ya-container-drop-hover {\n  outline: 3px solid var(--ya-drop-color, #3b82f6) !important;\n  outline-offset: -3px;\n}\n.ya-container-drop-hover::before {\n  content: "";\n  position: absolute;\n  inset: 0;\n  background: rgba(59, 130, 246, 0.08);\n  pointer-events: none;\n  z-index: 10;\n  animation: ya-container-drop-pulse 1s ease-in-out infinite;\n}\n@keyframes ya-container-drop-pulse {\n  0%, 100% {\n    background: rgba(59, 130, 246, 0.05);\n  }\n  50% {\n    background: rgba(59, 130, 246, 0.12);\n  }\n}\n.ya-container-tooltip {\n  background: #1a1a1a;\n  color: white;\n  padding: 8px 12px;\n  border-radius: 6px;\n  font-size: 13px;\n  font-weight: 500;\n  font-family:\n    system-ui,\n    -apple-system,\n    BlinkMacSystemFont,\n    "Segoe UI",\n    sans-serif;\n  white-space: nowrap;\n  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);\n  z-index: 10000;\n  pointer-events: none;\n  animation: ya-container-tooltip-fade-in 0.1s ease;\n}\n@keyframes ya-container-tooltip-fade-in {\n  from {\n    opacity: 0;\n    transform: scale(0.95);\n  }\n  to {\n    opacity: 1;\n    transform: scale(1);\n  }\n}\n');
 
 // src/components/YaContainer.tsx
-import { jsx as jsx17, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx18, jsxs as jsxs11 } from "react/jsx-runtime";
 function parseBackgroundConfig(value) {
   if (!value) {
     return { type: "none" };
@@ -6415,8 +6821,8 @@ function deriveContainerLabel(element) {
   return tagLabels[tagName] || "Section";
 }
 function Toolbar({ containerRef, onImageClick, onColorClick, onAIClick: _onAIClick, onClearClick, hasBackground }) {
-  const [position, setPosition] = useState17(null);
-  useEffect17(() => {
+  const [position, setPosition] = useState18(null);
+  useEffect18(() => {
     const updatePosition = () => {
       if (containerRef.current) {
         const rect = containerRef.current.getBoundingClientRect();
@@ -6447,40 +6853,40 @@ function Toolbar({ containerRef, onImageClick, onColorClick, onAIClick: _onAICli
         },
         onClick: (e) => e.stopPropagation(),
         children: [
-          /* @__PURE__ */ jsx17(Tooltip, { content: "Background Image", position: "bottom", children: /* @__PURE__ */ jsx17(
+          /* @__PURE__ */ jsx18(Tooltip, { content: "Background Image", position: "bottom", children: /* @__PURE__ */ jsx18(
             "button",
             {
               type: "button",
               onClick: onImageClick,
               "aria-label": "Edit background image",
               children: /* @__PURE__ */ jsxs11("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
-                /* @__PURE__ */ jsx17("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2", ry: "2" }),
-                /* @__PURE__ */ jsx17("circle", { cx: "8.5", cy: "8.5", r: "1.5" }),
-                /* @__PURE__ */ jsx17("polyline", { points: "21 15 16 10 5 21" })
+                /* @__PURE__ */ jsx18("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2", ry: "2" }),
+                /* @__PURE__ */ jsx18("circle", { cx: "8.5", cy: "8.5", r: "1.5" }),
+                /* @__PURE__ */ jsx18("polyline", { points: "21 15 16 10 5 21" })
               ] })
             }
           ) }),
-          /* @__PURE__ */ jsx17(Tooltip, { content: "Background Color", position: "bottom", children: /* @__PURE__ */ jsx17(
+          /* @__PURE__ */ jsx18(Tooltip, { content: "Background Color", position: "bottom", children: /* @__PURE__ */ jsx18(
             "button",
             {
               type: "button",
               onClick: onColorClick,
               "aria-label": "Edit background color",
               children: /* @__PURE__ */ jsxs11("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
-                /* @__PURE__ */ jsx17("circle", { cx: "12", cy: "12", r: "10" }),
-                /* @__PURE__ */ jsx17("path", { d: "M12 2a10 10 0 0 1 0 20", fill: "currentColor" })
+                /* @__PURE__ */ jsx18("circle", { cx: "12", cy: "12", r: "10" }),
+                /* @__PURE__ */ jsx18("path", { d: "M12 2a10 10 0 0 1 0 20", fill: "currentColor" })
               ] })
             }
           ) }),
-          hasBackground && /* @__PURE__ */ jsx17(Tooltip, { content: "Remove Background", position: "bottom", children: /* @__PURE__ */ jsx17(
+          hasBackground && /* @__PURE__ */ jsx18(Tooltip, { content: "Remove Background", position: "bottom", children: /* @__PURE__ */ jsx18(
             "button",
             {
               type: "button",
               onClick: onClearClick,
               "aria-label": "Clear background",
               children: /* @__PURE__ */ jsxs11("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
-                /* @__PURE__ */ jsx17("circle", { cx: "12", cy: "12", r: "10" }),
-                /* @__PURE__ */ jsx17("line", { x1: "4.93", y1: "4.93", x2: "19.07", y2: "19.07" })
+                /* @__PURE__ */ jsx18("circle", { cx: "12", cy: "12", r: "10" }),
+                /* @__PURE__ */ jsx18("line", { x1: "4.93", y1: "4.93", x2: "19.07", y2: "19.07" })
               ] })
             }
           ) })
@@ -6499,13 +6905,13 @@ function YaContainer({
   defaultBackground
 }) {
   const { getValue, setValue, saveToWorker, mode } = useContentStore();
-  const containerRef = useRef18(null);
-  const [isHovered, setIsHovered] = useState17(false);
-  const [isSelected, setIsSelected] = useState17(false);
-  const [isDropMode, setIsDropMode] = useState17(false);
-  const [isDropHover, setIsDropHover] = useState17(false);
-  const [previewConfig, setPreviewConfig] = useState17(null);
-  useEffect17(() => {
+  const containerRef = useRef19(null);
+  const [isHovered, setIsHovered] = useState18(false);
+  const [isSelected, setIsSelected] = useState18(false);
+  const [isDropMode, setIsDropMode] = useState18(false);
+  const [isDropHover, setIsDropHover] = useState18(false);
+  const [previewConfig, setPreviewConfig] = useState18(null);
+  useEffect18(() => {
     if (mode !== "inline-edit") return;
     const containerEl = containerRef.current;
     if (!containerEl) return;
@@ -6548,7 +6954,7 @@ function YaContainer({
     overlayCustomProps["--ya-overlay-color"] = displayConfig.overlay.color;
     overlayCustomProps["--ya-overlay-opacity"] = displayConfig.overlay.opacity;
   }
-  const handleImageClick = useCallback19(() => {
+  const handleImageClick = useCallback20(() => {
     if (mode !== "inline-edit") return;
     setIsSelected(true);
     const rect = containerRef.current?.getBoundingClientRect();
@@ -6568,7 +6974,7 @@ function YaContainer({
       "*"
     );
   }, [mode, fieldId, backgroundConfig]);
-  const handleColorClick = useCallback19(() => {
+  const handleColorClick = useCallback20(() => {
     if (mode !== "inline-edit") return;
     setIsSelected(true);
     const rect = containerRef.current?.getBoundingClientRect();
@@ -6588,7 +6994,7 @@ function YaContainer({
       "*"
     );
   }, [mode, fieldId, backgroundConfig]);
-  const handleAIClick = useCallback19(() => {
+  const handleAIClick = useCallback20(() => {
     if (mode !== "inline-edit") return;
     const label = deriveContainerLabel(containerRef.current);
     window.parent.postMessage(
@@ -6601,14 +7007,14 @@ function YaContainer({
       "*"
     );
   }, [mode, fieldId, backgroundConfig]);
-  const handleClearClick = useCallback19(() => {
+  const handleClearClick = useCallback20(() => {
     if (mode !== "inline-edit") return;
     const clearedConfig = { type: "none" };
     const serialized = serializeBackgroundConfig(clearedConfig);
     setValue(fieldId, serialized);
     saveToWorker?.(fieldId, serialized);
   }, [mode, fieldId, setValue, saveToWorker]);
-  useEffect17(() => {
+  useEffect18(() => {
     if (mode !== "inline-edit") return;
     const handleMessage2 = (event) => {
       if (event.data?.type === "YA_CONTAINER_UPDATE_PREVIEW" && event.data.fieldId === fieldId) {
@@ -6629,7 +7035,7 @@ function YaContainer({
     window.addEventListener("message", handleMessage2);
     return () => window.removeEventListener("message", handleMessage2);
   }, [mode, fieldId]);
-  useEffect17(() => {
+  useEffect18(() => {
     if (mode !== "inline-edit") return;
     const handleDropModeMessage = (event) => {
       if (event.data?.type === "DROP_MODE_START") {
@@ -6643,7 +7049,7 @@ function YaContainer({
     window.addEventListener("message", handleDropModeMessage);
     return () => window.removeEventListener("message", handleDropModeMessage);
   }, [mode]);
-  const handleDragEnter = useCallback19(
+  const handleDragEnter = useCallback20(
     (e) => {
       if (!isDropMode) return;
       e.preventDefault();
@@ -6667,7 +7073,7 @@ function YaContainer({
     },
     [isDropMode, fieldId]
   );
-  const handleDragOver = useCallback19(
+  const handleDragOver = useCallback20(
     (e) => {
       if (!isDropMode) return;
       e.preventDefault();
@@ -6675,7 +7081,7 @@ function YaContainer({
     },
     [isDropMode]
   );
-  const handleDragLeave = useCallback19(
+  const handleDragLeave = useCallback20(
     (e) => {
       if (!isDropMode) return;
       e.preventDefault();
@@ -6689,7 +7095,7 @@ function YaContainer({
     },
     [isDropMode]
   );
-  const handleDrop = useCallback19(
+  const handleDrop = useCallback20(
     (e) => {
       if (!isDropMode) return;
       e.preventDefault();
@@ -6707,7 +7113,7 @@ function YaContainer({
     },
     [isDropMode, fieldId]
   );
-  useEffect17(() => {
+  useEffect18(() => {
     if (!isSelected || mode !== "inline-edit") return;
     let lastRectKey = "";
     let lastTime = 0;
@@ -6742,7 +7148,7 @@ function YaContainer({
     return () => cancelAnimationFrame(rafId);
   }, [isSelected, fieldId, mode]);
   if (mode === "read-only") {
-    return /* @__PURE__ */ jsx17(
+    return /* @__PURE__ */ jsx18(
       Tag,
       {
         className: `ya-container ${className || ""}`,
@@ -6785,7 +7191,7 @@ function YaContainer({
       onDrop: handleDrop,
       children: [
         children,
-        mode === "inline-edit" && (isHovered || isSelected) && !document.body.classList.contains("builder-selector-active") && /* @__PURE__ */ jsx17(
+        mode === "inline-edit" && (isHovered || isSelected) && !document.body.classList.contains("builder-selector-active") && /* @__PURE__ */ jsx18(
           Toolbar,
           {
             containerRef,
@@ -6802,10 +7208,10 @@ function YaContainer({
 }
 
 // src/components/StaticText.tsx
-import { jsx as jsx18 } from "react/jsx-runtime";
+import { jsx as jsx19 } from "react/jsx-runtime";
 function MpText({ fieldId, className, as: Component = "span", children }) {
   const content = getContent(fieldId) || (typeof children === "string" ? children : "");
-  return /* @__PURE__ */ jsx18(
+  return /* @__PURE__ */ jsx19(
     Component,
     {
       className,
@@ -6816,7 +7222,7 @@ function MpText({ fieldId, className, as: Component = "span", children }) {
 }
 
 // src/components/StaticImage.tsx
-import { jsx as jsx19 } from "react/jsx-runtime";
+import { jsx as jsx20 } from "react/jsx-runtime";
 function parseImageValue2(value) {
   if (!value) {
     return { src: "" };
@@ -6852,7 +7258,7 @@ function MpImage({
   const altText = imageData.alt || alt || fallbackAlt || "";
   const objectFit = imageData.objectFit || propObjectFit || "cover";
   const objectPosition = getObjectPosition3(imageData) || propObjectPosition || "50% 50%";
-  return /* @__PURE__ */ jsx19(
+  return /* @__PURE__ */ jsx20(
     "img",
     {
       src: resolveAssetUrl(src),
@@ -6870,7 +7276,7 @@ function MpImage({
 
 // src/components/MarkdownText.tsx
 import { Fragment as Fragment6 } from "react";
-import { jsx as jsx20 } from "react/jsx-runtime";
+import { jsx as jsx21 } from "react/jsx-runtime";
 function tokenize(text2) {
   const tokens = [];
   let remaining = text2;
@@ -6932,13 +7338,13 @@ function tokensToElements(tokens) {
   return tokens.map((token, index) => {
     switch (token.type) {
       case "text":
-        return /* @__PURE__ */ jsx20(Fragment6, { children: token.content }, index);
+        return /* @__PURE__ */ jsx21(Fragment6, { children: token.content }, index);
       case "bold":
-        return /* @__PURE__ */ jsx20("strong", { children: token.content }, index);
+        return /* @__PURE__ */ jsx21("strong", { children: token.content }, index);
       case "italic":
-        return /* @__PURE__ */ jsx20("em", { children: token.content }, index);
+        return /* @__PURE__ */ jsx21("em", { children: token.content }, index);
       case "link":
-        return /* @__PURE__ */ jsx20(
+        return /* @__PURE__ */ jsx21(
           "a",
           {
             href: token.url,
@@ -6950,7 +7356,7 @@ function tokensToElements(tokens) {
           index
         );
       case "newline":
-        return /* @__PURE__ */ jsx20("br", {}, index);
+        return /* @__PURE__ */ jsx21("br", {}, index);
       default:
         return null;
     }
@@ -6962,15 +7368,480 @@ function parseMarkdownToElements(content) {
 }
 function MarkdownText({ content, className }) {
   const elements = parseMarkdownToElements(content);
-  return /* @__PURE__ */ jsx20("span", { className, children: elements });
+  return /* @__PURE__ */ jsx21("span", { className, children: elements });
+}
+
+// src/components/CollectionPage.tsx
+import { useParams } from "wouter";
+
+// src/hooks/useCollection.ts
+import { useState as useState19, useEffect as useEffect19, useCallback as useCallback21, useRef as useRef20 } from "react";
+
+// src/lib/collection-client.ts
+function getEnvVar(key) {
+  try {
+    const env = import.meta.env;
+    return env?.[key];
+  } catch {
+    return void 0;
+  }
+}
+function getConfig() {
+  if (typeof window === "undefined") {
+    throw new Error("CollectionClient requires browser environment");
+  }
+  const runtimeConfig = window.YOAMIGO_CONFIG;
+  const appId = runtimeConfig?.appId || runtimeConfig?.siteId || getEnvVar("YA_APP_ID") || getEnvVar("YA_SITE_ID");
+  const apiUrl = runtimeConfig?.apiUrl || getEnvVar("YA_API_URL");
+  if (!appId) {
+    throw new Error("App ID not configured (check YOAMIGO_CONFIG.appId or YA_APP_ID)");
+  }
+  if (!apiUrl) {
+    throw new Error("API URL not configured (check YOAMIGO_CONFIG.apiUrl or YA_API_URL)");
+  }
+  return { apiUrl, appId };
+}
+var CollectionClient = class {
+  apiUrl;
+  appId;
+  constructor(config) {
+    this.apiUrl = config.apiUrl;
+    this.appId = config.appId;
+  }
+  /**
+   * List records from a collection with optional filtering, pagination, and sorting.
+   */
+  async list(collection, options = {}) {
+    const { filters, limit, offset, orderBy, orderDir } = options;
+    const url = new URL(`${this.apiUrl}/api/apps/${this.appId}/collections/${collection}/records`);
+    if (filters && filters.length > 0) {
+      url.searchParams.set("filters", JSON.stringify(filters));
+    }
+    if (limit !== void 0) {
+      url.searchParams.set("limit", String(limit));
+    }
+    if (offset !== void 0) {
+      url.searchParams.set("offset", String(offset));
+    }
+    if (orderBy) {
+      url.searchParams.set("orderBy", orderBy);
+    }
+    if (orderDir) {
+      url.searchParams.set("orderDir", orderDir);
+    }
+    try {
+      const response = await fetch(url.toString(), {
+        method: "GET",
+        headers: {
+          "Content-Type": "application/json"
+        }
+      });
+      const result = await response.json();
+      if (!response.ok) {
+        return {
+          success: false,
+          error: result.error || `HTTP ${response.status}`,
+          errorCode: result.errorCode
+        };
+      }
+      return {
+        success: true,
+        data: result.data,
+        totalCount: result.totalCount
+      };
+    } catch (error) {
+      return {
+        success: false,
+        error: error instanceof Error ? error.message : "Network error"
+      };
+    }
+  }
+  /**
+   * Get a single record by its ID.
+   */
+  async getById(collection, id) {
+    const url = `${this.apiUrl}/api/apps/${this.appId}/collections/${collection}/records/${id}`;
+    try {
+      const response = await fetch(url, {
+        method: "GET",
+        headers: {
+          "Content-Type": "application/json"
+        }
+      });
+      const result = await response.json();
+      if (!response.ok) {
+        return {
+          success: false,
+          error: result.error || `HTTP ${response.status}`,
+          errorCode: result.errorCode
+        };
+      }
+      return {
+        success: true,
+        data: result.data
+      };
+    } catch (error) {
+      return {
+        success: false,
+        error: error instanceof Error ? error.message : "Network error"
+      };
+    }
+  }
+  /**
+   * Get a single record by a slug field value.
+   * Convenience method that uses list with a filter.
+   */
+  async getBySlug(collection, slugField, slugValue) {
+    const result = await this.list(collection, {
+      filters: [
+        { field: slugField, operator: "eq", value: slugValue }
+      ],
+      limit: 1
+    });
+    if (!result.success) {
+      return {
+        success: false,
+        error: result.error,
+        errorCode: result.errorCode
+      };
+    }
+    if (!result.data || result.data.length === 0) {
+      return {
+        success: false,
+        error: "Record not found",
+        errorCode: "NOT_FOUND"
+      };
+    }
+    return {
+      success: true,
+      data: result.data[0]
+    };
+  }
+};
+var cachedClient = null;
+function getCollectionClient() {
+  if (!cachedClient) {
+    const config = getConfig();
+    cachedClient = new CollectionClient(config);
+  }
+  return cachedClient;
+}
+function resetCollectionClient() {
+  cachedClient = null;
+}
+
+// src/hooks/useCollection.ts
+function useCollectionList(options) {
+  const {
+    collection,
+    filters,
+    page = 1,
+    pageSize = 10,
+    orderBy,
+    orderDir,
+    enabled = true
+  } = options;
+  const [data, setData] = useState19(null);
+  const [isLoading, setIsLoading] = useState19(true);
+  const [error, setError] = useState19(null);
+  const [totalCount, setTotalCount] = useState19(0);
+  const [currentPage, setCurrentPage] = useState19(page);
+  const fetchVersion = useRef20(0);
+  const fetchData = useCallback21(async (pageNum) => {
+    if (!enabled) {
+      setIsLoading(false);
+      return;
+    }
+    setIsLoading(true);
+    setError(null);
+    const version = ++fetchVersion.current;
+    try {
+      const client = getCollectionClient();
+      const offset = (pageNum - 1) * pageSize;
+      const result = await client.list(collection, {
+        filters,
+        limit: pageSize,
+        offset,
+        orderBy,
+        orderDir
+      });
+      if (version !== fetchVersion.current) return;
+      if (!result.success) {
+        setError(result.error || "Failed to fetch collection");
+        setData(null);
+        setTotalCount(0);
+      } else {
+        setData(result.data || []);
+        setTotalCount(result.totalCount || 0);
+        setCurrentPage(pageNum);
+      }
+    } catch (err) {
+      if (version !== fetchVersion.current) return;
+      setError(err instanceof Error ? err.message : "Unknown error");
+      setData(null);
+    } finally {
+      if (version === fetchVersion.current) {
+        setIsLoading(false);
+      }
+    }
+  }, [collection, JSON.stringify(filters), pageSize, orderBy, orderDir, enabled]);
+  useEffect19(() => {
+    fetchData(page);
+  }, [fetchData, page]);
+  const totalPages = Math.ceil(totalCount / pageSize);
+  const hasMore = currentPage < totalPages;
+  const refetch = useCallback21(() => {
+    fetchData(currentPage);
+  }, [fetchData, currentPage]);
+  const goToPage = useCallback21((newPage) => {
+    if (newPage >= 1 && newPage <= Math.max(1, totalPages)) {
+      fetchData(newPage);
+    }
+  }, [fetchData, totalPages]);
+  return {
+    data,
+    isLoading,
+    error,
+    totalCount,
+    hasMore,
+    currentPage,
+    totalPages,
+    refetch,
+    goToPage
+  };
+}
+function useCollectionRecord(options) {
+  const {
+    collection,
+    slugField,
+    slugValue,
+    enabled = true
+  } = options;
+  const [data, setData] = useState19(null);
+  const [isLoading, setIsLoading] = useState19(true);
+  const [error, setError] = useState19(null);
+  const [notFound, setNotFound] = useState19(false);
+  const fetchVersion = useRef20(0);
+  const fetchData = useCallback21(async () => {
+    if (!enabled || !slugValue) {
+      setIsLoading(false);
+      return;
+    }
+    setIsLoading(true);
+    setError(null);
+    setNotFound(false);
+    const version = ++fetchVersion.current;
+    try {
+      const client = getCollectionClient();
+      const result = await client.getBySlug(
+        collection,
+        slugField,
+        slugValue
+      );
+      if (version !== fetchVersion.current) return;
+      if (!result.success) {
+        if (result.errorCode === "NOT_FOUND") {
+          setNotFound(true);
+          setData(null);
+        } else {
+          setError(result.error || "Failed to fetch record");
+          setData(null);
+        }
+      } else {
+        setData(result.data || null);
+      }
+    } catch (err) {
+      if (version !== fetchVersion.current) return;
+      setError(err instanceof Error ? err.message : "Unknown error");
+      setData(null);
+    } finally {
+      if (version === fetchVersion.current) {
+        setIsLoading(false);
+      }
+    }
+  }, [collection, slugField, slugValue, enabled]);
+  useEffect19(() => {
+    fetchData();
+  }, [fetchData]);
+  const refetch = useCallback21(() => {
+    fetchData();
+  }, [fetchData]);
+  return {
+    data,
+    isLoading,
+    error,
+    notFound,
+    refetch
+  };
+}
+
+// src/components/CollectionPage.tsx
+function CollectionListPage({
+  collection,
+  pageSize = 10,
+  page = 1,
+  filters,
+  orderBy,
+  orderDir,
+  enabled = true,
+  render
+}) {
+  const result = useCollectionList({
+    collection,
+    pageSize,
+    page,
+    filters,
+    orderBy,
+    orderDir,
+    enabled
+  });
+  return render(result);
+}
+function CollectionDetailPage({
+  collection,
+  slugField = "slug",
+  slugParam = "slug",
+  slug: slugOverride,
+  enabled = true,
+  render
+}) {
+  const params = useParams();
+  const slug = slugOverride || params[slugParam] || "";
+  const result = useCollectionRecord({
+    collection,
+    slugField,
+    slugValue: slug,
+    enabled: enabled && Boolean(slug)
+  });
+  return render({
+    ...result,
+    slug
+  });
+}
+
+// src/components/CollectionList.tsx
+import { Fragment as Fragment7, jsx as jsx22, jsxs as jsxs12 } from "react/jsx-runtime";
+function CollectionList({
+  collection,
+  prefix,
+  filters,
+  page,
+  pageSize,
+  orderBy,
+  orderDir,
+  children,
+  skeleton,
+  empty,
+  error,
+  appId,
+  enabled = true,
+  pagination,
+  wrapper: Wrapper
+}) {
+  const result = useCollectionList({
+    collection,
+    filters,
+    page,
+    pageSize,
+    orderBy,
+    orderDir,
+    enabled
+  });
+  if (result.isLoading) {
+    const skeletonCount = pageSize || 10;
+    const skeletonItems = Array.from(
+      { length: skeletonCount },
+      (_, index) => skeleton({ index })
+    );
+    return Wrapper ? /* @__PURE__ */ jsx22(Wrapper, { children: skeletonItems }) : /* @__PURE__ */ jsx22(Fragment7, { children: skeletonItems });
+  }
+  if (result.error) {
+    return error?.(result.error) ?? null;
+  }
+  if (!result.data || result.data.length === 0) {
+    return empty ?? null;
+  }
+  const items = result.data.map((record, index) => {
+    const fieldPrefix = `${prefix}.${record.id}`;
+    return /* @__PURE__ */ jsx22(
+      CollectionContentProvider,
+      {
+        record: record.data,
+        prefix: fieldPrefix,
+        recordId: record.id,
+        collectionSlug: collection,
+        appId,
+        children: children({ record, index, fieldPrefix })
+      },
+      record.id
+    );
+  });
+  const content = Wrapper ? /* @__PURE__ */ jsx22(Wrapper, { children: items }) : /* @__PURE__ */ jsx22(Fragment7, { children: items });
+  if (pagination) {
+    return /* @__PURE__ */ jsxs12(Fragment7, { children: [
+      content,
+      pagination({
+        currentPage: result.currentPage,
+        totalPages: result.totalPages,
+        totalCount: result.totalCount,
+        hasMore: result.hasMore,
+        goToPage: result.goToPage
+      })
+    ] });
+  }
+  return content;
+}
+
+// src/components/CollectionItem.tsx
+import { jsx as jsx23 } from "react/jsx-runtime";
+function CollectionItem({
+  collection,
+  prefix,
+  slugField = "slug",
+  slugValue,
+  children,
+  skeleton,
+  appId,
+  enabled = true
+}) {
+  const result = useCollectionRecord({
+    collection,
+    slugField,
+    slugValue,
+    enabled: enabled && Boolean(slugValue)
+  });
+  const renderProps = {
+    record: result.data,
+    isLoading: result.isLoading,
+    notFound: result.notFound,
+    error: result.error,
+    refetch: result.refetch
+  };
+  if (result.isLoading) {
+    return skeleton;
+  }
+  if (result.error || result.notFound || !result.data) {
+    return children(renderProps);
+  }
+  return /* @__PURE__ */ jsx23(
+    CollectionContentProvider,
+    {
+      record: result.data.data,
+      prefix,
+      recordId: result.data.id,
+      collectionSlug: collection,
+      appId,
+      children: children(renderProps)
+    }
+  );
 }
 
 // src/router/Link.tsx
 import { Link as WouterLink2 } from "wouter";
-import { jsx as jsx21 } from "react/jsx-runtime";
+import { jsx as jsx24 } from "react/jsx-runtime";
 function Link2({ to, href, children, className, onClick, replace, ...props }) {
   const target = href ?? to ?? "/";
-  return /* @__PURE__ */ jsx21(WouterLink2, { href: target, className, onClick, replace, ...props, children });
+  return /* @__PURE__ */ jsx24(WouterLink2, { href: target, className, onClick, replace, ...props, children });
 }
 
 // src/router/useNavigate.ts
@@ -6989,7 +7860,7 @@ function useNavigate() {
 
 // src/router/Router.tsx
 import { Router as WouterRouter } from "wouter";
-import { jsx as jsx22 } from "react/jsx-runtime";
+import { jsx as jsx25 } from "react/jsx-runtime";
 function detectBasename() {
   if (typeof window === "undefined") return "";
   const sessionMatch = window.location.pathname.match(/^\/session\/[^/]+/);
@@ -7004,11 +7875,11 @@ function detectBasename() {
 }
 function Router({ children, base }) {
   const basename = base ?? detectBasename();
-  return /* @__PURE__ */ jsx22(WouterRouter, { base: basename, children });
+  return /* @__PURE__ */ jsx25(WouterRouter, { base: basename, children });
 }
 
 // src/router/ScrollRestoration.tsx
-import { useEffect as useEffect18, useRef as useRef19 } from "react";
+import { useEffect as useEffect20, useRef as useRef21 } from "react";
 import { useLocation as useLocation3 } from "wouter";
 var SCROLL_POSITIONS_KEY = "yoamigo-scroll-positions";
 var HISTORY_INDEX_KEY = "yoamigo-history-index";
@@ -7044,10 +7915,10 @@ function setHistoryIndex(index) {
 var globalHistoryIndex = 0;
 function ScrollRestoration() {
   const [location] = useLocation3();
-  const previousLocation = useRef19(location);
-  const isPopState = useRef19(false);
-  const scrollPositionsRef = useRef19({});
-  useEffect18(() => {
+  const previousLocation = useRef21(location);
+  const isPopState = useRef21(false);
+  const scrollPositionsRef = useRef21({});
+  useEffect20(() => {
     if (typeof history !== "undefined" && "scrollRestoration" in history) {
       history.scrollRestoration = "manual";
     }
@@ -7065,7 +7936,7 @@ function ScrollRestoration() {
     window.addEventListener("popstate", handlePopState);
     return () => window.removeEventListener("popstate", handlePopState);
   }, []);
-  useEffect18(() => {
+  useEffect20(() => {
     if (previousLocation.current === location) return;
     const prevHistoryIndex = globalHistoryIndex;
     const currentScrollY = window.scrollY;
@@ -7085,7 +7956,7 @@ function ScrollRestoration() {
     }
     previousLocation.current = location;
   }, [location]);
-  useEffect18(() => {
+  useEffect20(() => {
     let timeoutId;
     const handleScroll = () => {
       clearTimeout(timeoutId);
@@ -7104,7 +7975,74 @@ function ScrollRestoration() {
 }
 
 // src/router/index.ts
-import { Route, Switch, useParams } from "wouter";
+import { Route, Switch, useParams as useParams2, useLocation as useLocation4 } from "wouter";
+
+// src/router/route-utils.ts
+function filePathToRoutePath(filePath, options = {}) {
+  const {
+    pagesDir = "/src/pages",
+    extensions = [".tsx", ".ts", ".jsx", ".js"]
+  } = options;
+  let path = filePath;
+  if (path.startsWith(pagesDir)) {
+    path = path.slice(pagesDir.length);
+  }
+  for (const ext of extensions) {
+    if (path.endsWith(ext)) {
+      path = path.slice(0, -ext.length);
+      break;
+    }
+  }
+  if (path.endsWith("/index")) {
+    path = path.slice(0, -6) || "/";
+  }
+  path = path.replace(/\[\.\.\.([^\]]+)\]/g, ":$1*");
+  path = path.replace(/\[([^\]]+)\]/g, ":$1");
+  if (!path.startsWith("/")) {
+    path = "/" + path;
+  }
+  if (path === "" || path === "/index") {
+    return "/";
+  }
+  return path;
+}
+function extractRouteParams(filePath) {
+  const matches = filePath.matchAll(/\[\.\.\.([^\]]+)\]|\[([^\]]+)\]/g);
+  const params = [];
+  for (const match of matches) {
+    params.push(match[1] || match[2]);
+  }
+  return params;
+}
+function createRouteDefinition(filePath, options) {
+  const path = filePathToRoutePath(filePath, options);
+  const params = extractRouteParams(filePath);
+  return {
+    path,
+    filePath,
+    params,
+    isDynamic: params.length > 0
+  };
+}
+function sortRoutesBySpecificity(routes) {
+  return [...routes].sort((a, b) => {
+    if (!a.isDynamic && b.isDynamic) return -1;
+    if (a.isDynamic && !b.isDynamic) return 1;
+    const aSegments = a.path.split("/").filter(Boolean);
+    const bSegments = b.path.split("/").filter(Boolean);
+    if (aSegments.length !== bSegments.length) {
+      return bSegments.length - aSegments.length;
+    }
+    return a.params.length - b.params.length;
+  });
+}
+function generatePath(routePath, params) {
+  let path = routePath;
+  for (const [key, value] of Object.entries(params)) {
+    path = path.replace(new RegExp(`:${key}\\*?`, "g"), encodeURIComponent(value));
+  }
+  return path;
+}
 
 // src/lib/content-helpers.ts
 function text(content) {
@@ -7122,8 +8060,952 @@ function video(config) {
 function embed(config) {
   return JSON.stringify(config);
 }
+
+// src/contexts/CartContext.tsx
+import { createContext as createContext5, useContext as useContext5, useEffect as useEffect22 } from "react";
+
+// src/hooks/useCart.ts
+import { useState as useState20, useEffect as useEffect21, useCallback as useCallback22, useRef as useRef22 } from "react";
+
+// src/lib/cart-storage.ts
+var CART_STORAGE_KEY_PREFIX = "yoamigo_cart_";
+var SESSION_ID_KEY = "yoamigo_cart_session";
+var CART_EXPIRY_DAYS = 7;
+function generateSessionId() {
+  return `session_${Date.now()}_${Math.random().toString(36).substring(2, 15)}`;
+}
+function getSessionId() {
+  if (typeof window === "undefined") {
+    throw new Error("getSessionId requires browser environment");
+  }
+  let sessionId = localStorage.getItem(SESSION_ID_KEY);
+  if (!sessionId) {
+    sessionId = generateSessionId();
+    localStorage.setItem(SESSION_ID_KEY, sessionId);
+  }
+  return sessionId;
+}
+function clearSessionId() {
+  if (typeof window === "undefined") return;
+  localStorage.removeItem(SESSION_ID_KEY);
+}
+function getStorageKey(appId) {
+  return `${CART_STORAGE_KEY_PREFIX}${appId}`;
+}
+function getLocalCart(appId) {
+  if (typeof window === "undefined") return null;
+  try {
+    const key = getStorageKey(appId);
+    const data = localStorage.getItem(key);
+    if (!data) return null;
+    const cart = JSON.parse(data);
+    const updatedAt = new Date(cart.updatedAt);
+    const expiryDate = /* @__PURE__ */ new Date();
+    expiryDate.setDate(expiryDate.getDate() - CART_EXPIRY_DAYS);
+    if (updatedAt < expiryDate) {
+      localStorage.removeItem(key);
+      return null;
+    }
+    return cart;
+  } catch (error) {
+    console.warn("Failed to read cart from localStorage:", error);
+    return null;
+  }
+}
+function saveLocalCart(appId, items) {
+  if (typeof window === "undefined") return;
+  try {
+    const key = getStorageKey(appId);
+    const cart = {
+      sessionId: getSessionId(),
+      items,
+      updatedAt: (/* @__PURE__ */ new Date()).toISOString()
+    };
+    localStorage.setItem(key, JSON.stringify(cart));
+  } catch (error) {
+    console.warn("Failed to save cart to localStorage:", error);
+  }
+}
+function clearLocalCart(appId) {
+  if (typeof window === "undefined") return;
+  try {
+    const key = getStorageKey(appId);
+    localStorage.removeItem(key);
+  } catch (error) {
+    console.warn("Failed to clear cart from localStorage:", error);
+  }
+}
+function getLocalCartItems(appId) {
+  const cart = getLocalCart(appId);
+  return cart?.items || [];
+}
+function addLocalCartItem(appId, productId, collectionSlug, quantity = 1, variantId, data) {
+  const items = getLocalCartItems(appId);
+  const existingIndex = items.findIndex(
+    (item) => item.productId === productId && item.variantId === variantId
+  );
+  if (existingIndex >= 0) {
+    items[existingIndex].quantity += quantity;
+  } else {
+    items.push({
+      id: `local_${Date.now()}_${Math.random().toString(36).substring(2, 9)}`,
+      productId,
+      collectionSlug,
+      quantity,
+      variantId,
+      addedAt: (/* @__PURE__ */ new Date()).toISOString(),
+      data
+    });
+  }
+  saveLocalCart(appId, items);
+  return items;
+}
+function updateLocalCartItem(appId, itemId, quantity) {
+  const items = getLocalCartItems(appId);
+  const itemIndex = items.findIndex((item) => item.id === itemId);
+  if (itemIndex < 0) return items;
+  if (quantity === 0) {
+    items.splice(itemIndex, 1);
+  } else {
+    items[itemIndex].quantity = quantity;
+  }
+  saveLocalCart(appId, items);
+  return items;
+}
+function removeLocalCartItem(appId, itemId) {
+  const items = getLocalCartItems(appId);
+  const filteredItems = items.filter((item) => item.id !== itemId);
+  saveLocalCart(appId, filteredItems);
+  return filteredItems;
+}
+function getLocalCartItemCount(appId) {
+  const items = getLocalCartItems(appId);
+  return items.reduce((sum, item) => sum + item.quantity, 0);
+}
+
+// src/hooks/useCart.ts
+function getConfig2(options) {
+  if (typeof window === "undefined") {
+    throw new Error("useCart requires browser environment");
+  }
+  const runtimeConfig = window.YOAMIGO_CONFIG;
+  const appId = options.appId || runtimeConfig?.appId;
+  const apiUrl = options.apiUrl || runtimeConfig?.apiUrl;
+  if (!appId) {
+    throw new Error("App ID not configured (provide appId option or set YOAMIGO_CONFIG.appId)");
+  }
+  if (!apiUrl) {
+    throw new Error("API URL not configured (provide apiUrl option or set YOAMIGO_CONFIG.apiUrl)");
+  }
+  return { appId, apiUrl };
+}
+function useCart(options = {}) {
+  const { userToken } = options;
+  const [items, setItems] = useState20([]);
+  const [isLoading, setIsLoading] = useState20(true);
+  const [error, setError] = useState20(null);
+  const fetchVersion = useRef22(0);
+  const configRef = useRef22(null);
+  if (!configRef.current && typeof window !== "undefined") {
+    try {
+      configRef.current = getConfig2(options);
+    } catch {
+    }
+  }
+  const isAuthenticated = !!userToken;
+  const sessionId = typeof window !== "undefined" ? getSessionId() : null;
+  const apiCall = useCallback22(async (endpoint, method = "GET", body) => {
+    const config = configRef.current;
+    if (!config) throw new Error("Cart not configured");
+    const headers = {
+      "Content-Type": "application/json"
+    };
+    if (isAuthenticated) {
+      headers["X-App-User-Token"] = userToken;
+    } else if (sessionId) {
+      headers["X-Session-Id"] = sessionId;
+    }
+    const response = await fetch(
+      `${config.apiUrl}/api/apps/${config.appId}/cart${endpoint}`,
+      {
+        method,
+        headers,
+        body: body ? JSON.stringify(body) : void 0
+      }
+    );
+    return response.json();
+  }, [userToken, isAuthenticated, sessionId]);
+  const fetchCart = useCallback22(async () => {
+    const config = configRef.current;
+    if (!config) {
+      setIsLoading(false);
+      setError("Cart not configured");
+      return;
+    }
+    const version = ++fetchVersion.current;
+    setIsLoading(true);
+    setError(null);
+    try {
+      if (isAuthenticated || sessionId) {
+        const result = await apiCall("");
+        if (version !== fetchVersion.current) return;
+        if (result.success && result.data) {
+          setItems(result.data.items);
+        } else {
+          if (!isAuthenticated) {
+            setItems(getLocalCartItems(config.appId));
+          } else {
+            setError(result.error || "Failed to fetch cart");
+          }
+        }
+      } else {
+        setItems(getLocalCartItems(config.appId));
+      }
+    } catch (err) {
+      if (version !== fetchVersion.current) return;
+      if (!isAuthenticated) {
+        setItems(getLocalCartItems(config.appId));
+      } else {
+        setError(err instanceof Error ? err.message : "Failed to fetch cart");
+      }
+    } finally {
+      if (version === fetchVersion.current) {
+        setIsLoading(false);
+      }
+    }
+  }, [apiCall, isAuthenticated, sessionId]);
+  useEffect21(() => {
+    fetchCart();
+  }, [fetchCart]);
+  const addItem = useCallback22(async (productId, collectionSlug, quantity = 1, variantId, data) => {
+    const config = configRef.current;
+    if (!config) throw new Error("Cart not configured");
+    setError(null);
+    try {
+      if (isAuthenticated || sessionId) {
+        const result = await apiCall("/items", "POST", {
+          productId,
+          collectionSlug,
+          quantity,
+          variantId,
+          data
+        });
+        if (result.success && result.data) {
+          setItems(result.data.items);
+        } else {
+          throw new Error(result.error || "Failed to add item");
+        }
+      } else {
+        const newItems = addLocalCartItem(config.appId, productId, collectionSlug, quantity, variantId, data);
+        setItems(newItems);
+      }
+    } catch (err) {
+      const message = err instanceof Error ? err.message : "Failed to add item";
+      setError(message);
+      throw err;
+    }
+  }, [apiCall, isAuthenticated, sessionId]);
+  const updateQuantity = useCallback22(async (itemId, quantity) => {
+    const config = configRef.current;
+    if (!config) throw new Error("Cart not configured");
+    setError(null);
+    try {
+      if (isAuthenticated || sessionId) {
+        const result = await apiCall(`/items/${itemId}`, "PATCH", { quantity });
+        if (result.success && result.data) {
+          setItems(result.data.items);
+        } else {
+          throw new Error(result.error || "Failed to update item");
+        }
+      } else {
+        const newItems = updateLocalCartItem(config.appId, itemId, quantity);
+        setItems(newItems);
+      }
+    } catch (err) {
+      const message = err instanceof Error ? err.message : "Failed to update item";
+      setError(message);
+      throw err;
+    }
+  }, [apiCall, isAuthenticated, sessionId]);
+  const removeItem = useCallback22(async (itemId) => {
+    const config = configRef.current;
+    if (!config) throw new Error("Cart not configured");
+    setError(null);
+    try {
+      if (isAuthenticated || sessionId) {
+        const result = await apiCall(`/items/${itemId}`, "DELETE");
+        if (result.success && result.data) {
+          setItems(result.data.items);
+        } else {
+          throw new Error(result.error || "Failed to remove item");
+        }
+      } else {
+        const newItems = removeLocalCartItem(config.appId, itemId);
+        setItems(newItems);
+      }
+    } catch (err) {
+      const message = err instanceof Error ? err.message : "Failed to remove item";
+      setError(message);
+      throw err;
+    }
+  }, [apiCall, isAuthenticated, sessionId]);
+  const clearCart = useCallback22(async () => {
+    const config = configRef.current;
+    if (!config) throw new Error("Cart not configured");
+    setError(null);
+    try {
+      if (isAuthenticated || sessionId) {
+        const result = await apiCall("", "DELETE");
+        if (result.success) {
+          setItems([]);
+        } else {
+          throw new Error(result.error || "Failed to clear cart");
+        }
+      } else {
+        clearLocalCart(config.appId);
+        setItems([]);
+      }
+    } catch (err) {
+      const message = err instanceof Error ? err.message : "Failed to clear cart";
+      setError(message);
+      throw err;
+    }
+  }, [apiCall, isAuthenticated, sessionId]);
+  const mergeGuestCart = useCallback22(async () => {
+    if (!isAuthenticated || !sessionId) return;
+    setError(null);
+    try {
+      const result = await apiCall("/merge", "POST", {
+        guestSessionId: sessionId,
+        mergeStrategy: "sum"
+      });
+      if (result.success && result.data) {
+        setItems(result.data.items);
+        if (configRef.current) {
+          clearLocalCart(configRef.current.appId);
+        }
+      } else {
+        throw new Error(result.error || "Failed to merge cart");
+      }
+    } catch (err) {
+      const message = err instanceof Error ? err.message : "Failed to merge cart";
+      setError(message);
+    }
+  }, [apiCall, isAuthenticated, sessionId]);
+  const itemCount = items.reduce((sum, item) => sum + item.quantity, 0);
+  return {
+    items,
+    itemCount,
+    isLoading,
+    error,
+    addItem,
+    updateQuantity,
+    removeItem,
+    clearCart,
+    mergeGuestCart,
+    refresh: fetchCart
+  };
+}
+
+// src/contexts/CartContext.tsx
+import { jsx as jsx26 } from "react/jsx-runtime";
+var CartContext = createContext5(null);
+function CartProvider({
+  children,
+  userToken,
+  onUserTokenChange,
+  ...options
+}) {
+  const cart = useCart({ ...options, userToken });
+  useEffect22(() => {
+    if (userToken) {
+      cart.mergeGuestCart();
+    }
+    onUserTokenChange?.(!!userToken);
+  }, [userToken]);
+  return /* @__PURE__ */ jsx26(CartContext.Provider, { value: cart, children });
+}
+function useCartContext() {
+  const context = useContext5(CartContext);
+  if (!context) {
+    throw new Error("useCartContext must be used within a CartProvider");
+  }
+  return context;
+}
+function useOptionalCartContext() {
+  return useContext5(CartContext);
+}
+
+// src/hooks/useCheckout.ts
+import { useState as useState21, useCallback as useCallback23, useRef as useRef23 } from "react";
+function getConfig3(options) {
+  if (typeof window === "undefined") {
+    throw new Error("useCheckout requires browser environment");
+  }
+  const runtimeConfig = window.YOAMIGO_CONFIG;
+  const appId = options.appId || runtimeConfig?.appId;
+  const apiUrl = options.apiUrl || runtimeConfig?.apiUrl;
+  if (!appId) {
+    throw new Error("App ID not configured (provide appId option or set YOAMIGO_CONFIG.appId)");
+  }
+  if (!apiUrl) {
+    throw new Error("API URL not configured (provide apiUrl option or set YOAMIGO_CONFIG.apiUrl)");
+  }
+  return { appId, apiUrl };
+}
+function useCheckout(options = {}) {
+  const { userToken } = options;
+  const [isLoading, setIsLoading] = useState21(false);
+  const [error, setError] = useState21(null);
+  const configRef = useRef23(null);
+  if (!configRef.current && typeof window !== "undefined") {
+    try {
+      configRef.current = getConfig3(options);
+    } catch {
+    }
+  }
+  const isAuthenticated = !!userToken;
+  const sessionId = typeof window !== "undefined" ? getSessionId() : null;
+  const initiateCheckout = useCallback23(async (checkoutOptions) => {
+    const config = configRef.current;
+    if (!config) {
+      throw new Error("Checkout not configured");
+    }
+    setIsLoading(true);
+    setError(null);
+    try {
+      const headers = {
+        "Content-Type": "application/json"
+      };
+      if (isAuthenticated) {
+        headers["X-App-User-Token"] = userToken;
+      } else if (sessionId) {
+        headers["X-Session-Id"] = sessionId;
+      }
+      const response = await fetch(
+        `${config.apiUrl}/api/apps/${config.appId}/checkout/session`,
+        {
+          method: "POST",
+          headers,
+          body: JSON.stringify(checkoutOptions)
+        }
+      );
+      const result = await response.json();
+      if (!result.success || !result.data) {
+        throw new Error(result.error || "Failed to create checkout session");
+      }
+      return result.data;
+    } catch (err) {
+      const message = err instanceof Error ? err.message : "Failed to initiate checkout";
+      setError(message);
+      throw err;
+    } finally {
+      setIsLoading(false);
+    }
+  }, [userToken, isAuthenticated, sessionId]);
+  return {
+    initiateCheckout,
+    isLoading,
+    error
+  };
+}
+function useCheckoutStatus(options) {
+  const { userToken, sessionId: checkoutSessionId, poll = false, pollInterval = 2e3 } = options;
+  const [status, setStatus] = useState21(null);
+  const [isLoading, setIsLoading] = useState21(true);
+  const [error, setError] = useState21(null);
+  const configRef = useRef23(null);
+  if (!configRef.current && typeof window !== "undefined") {
+    try {
+      configRef.current = getConfig3(options);
+    } catch {
+    }
+  }
+  const isAuthenticated = !!userToken;
+  const guestSessionId = typeof window !== "undefined" ? getSessionId() : null;
+  const fetchStatus = useCallback23(async () => {
+    const config = configRef.current;
+    if (!config || !checkoutSessionId) {
+      setIsLoading(false);
+      return;
+    }
+    try {
+      const headers = {
+        "Content-Type": "application/json"
+      };
+      if (isAuthenticated) {
+        headers["X-App-User-Token"] = userToken;
+      } else if (guestSessionId) {
+        headers["X-Session-Id"] = guestSessionId;
+      }
+      const response = await fetch(
+        `${config.apiUrl}/api/apps/${config.appId}/checkout/session/${checkoutSessionId}/status`,
+        { headers }
+      );
+      const result = await response.json();
+      if (result.success && result.data) {
+        setStatus(result.data);
+        setError(null);
+      } else {
+        setError(result.error || "Failed to fetch status");
+      }
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to fetch status");
+    } finally {
+      setIsLoading(false);
+    }
+  }, [checkoutSessionId, userToken, isAuthenticated, guestSessionId]);
+  useState21(() => {
+    fetchStatus();
+    if (poll) {
+      const interval = setInterval(() => {
+        if (status?.paymentStatus === "paid" || status?.status === "expired") {
+          return;
+        }
+        fetchStatus();
+      }, pollInterval);
+      return () => clearInterval(interval);
+    }
+  });
+  return {
+    status,
+    isLoading,
+    error,
+    refresh: fetchStatus
+  };
+}
+
+// src/hooks/useProducts.ts
+function useProducts(options = {}) {
+  const {
+    collection = "products",
+    activeOnly = true,
+    category,
+    productType,
+    filters = [],
+    page,
+    pageSize,
+    orderBy = "createdAt",
+    orderDir = "desc",
+    enabled
+  } = options;
+  const allFilters = [...filters];
+  if (activeOnly) {
+    allFilters.push({
+      field: "status",
+      operator: "eq",
+      value: "active"
+    });
+  }
+  if (category) {
+    allFilters.push({
+      field: "category",
+      operator: "eq",
+      value: category
+    });
+  }
+  if (productType) {
+    allFilters.push({
+      field: "productType",
+      operator: "eq",
+      value: productType
+    });
+  }
+  const result = useCollectionList({
+    collection,
+    filters: allFilters,
+    page,
+    pageSize,
+    orderBy,
+    orderDir,
+    enabled
+  });
+  return {
+    ...result,
+    products: result.data
+  };
+}
+function useProduct(options) {
+  const { collection = "products", slug, enabled = true } = options;
+  const result = useCollectionList({
+    collection,
+    filters: [
+      { field: "slug", operator: "eq", value: slug }
+    ],
+    pageSize: 1,
+    enabled: enabled && !!slug
+  });
+  const product = result.data?.[0] || null;
+  const notFound = !result.isLoading && !product && !result.error;
+  return {
+    product,
+    isLoading: result.isLoading,
+    error: result.error,
+    notFound,
+    refetch: result.refetch
+  };
+}
+
+// src/hooks/useSubscription.ts
+import { useState as useState22, useCallback as useCallback24, useRef as useRef24 } from "react";
+function getConfig4(options) {
+  if (typeof window === "undefined") {
+    throw new Error("useSubscription requires browser environment");
+  }
+  const runtimeConfig = window.YOAMIGO_CONFIG;
+  const appId = options.appId || runtimeConfig?.appId;
+  const apiUrl = options.apiUrl || runtimeConfig?.apiUrl;
+  if (!appId) {
+    throw new Error("App ID not configured (provide appId option or set YOAMIGO_CONFIG.appId)");
+  }
+  if (!apiUrl) {
+    throw new Error("API URL not configured (provide apiUrl option or set YOAMIGO_CONFIG.apiUrl)");
+  }
+  return { appId, apiUrl };
+}
+function useSubscription(options = {}) {
+  const { userToken } = options;
+  const [isLoading, setIsLoading] = useState22(false);
+  const [error, setError] = useState22(null);
+  const configRef = useRef24(null);
+  if (!configRef.current && typeof window !== "undefined") {
+    try {
+      configRef.current = getConfig4(options);
+    } catch {
+    }
+  }
+  const subscribe = useCallback24(async (params) => {
+    const config = configRef.current;
+    if (!config) {
+      return {
+        success: false,
+        error: "Subscription not configured"
+      };
+    }
+    setIsLoading(true);
+    setError(null);
+    try {
+      const headers = {
+        "Content-Type": "application/json"
+      };
+      if (userToken) {
+        headers["X-App-User-Token"] = userToken;
+      }
+      const response = await fetch(
+        `${config.apiUrl}/api/apps/${config.appId}/subscriptions/checkout`,
+        {
+          method: "POST",
+          headers,
+          body: JSON.stringify({
+            tierSlug: params.tierSlug,
+            successUrl: params.successUrl,
+            cancelUrl: params.cancelUrl,
+            quantity: params.quantity,
+            trialDays: params.trialDays,
+            customerEmail: params.customerEmail,
+            metadata: params.metadata
+          })
+        }
+      );
+      const result = await response.json();
+      if (!result.success || !result.data) {
+        const errorMessage = result.error || "Failed to create subscription checkout";
+        setError(errorMessage);
+        return {
+          success: false,
+          error: errorMessage
+        };
+      }
+      return {
+        success: true,
+        checkoutUrl: result.data.url,
+        sessionId: result.data.sessionId
+      };
+    } catch (err) {
+      const message = err instanceof Error ? err.message : "Failed to create subscription checkout";
+      setError(message);
+      return {
+        success: false,
+        error: message
+      };
+    } finally {
+      setIsLoading(false);
+    }
+  }, [userToken]);
+  return {
+    subscribe,
+    isLoading,
+    error
+  };
+}
+
+// src/hooks/useSubscriptionTiers.ts
+import { useState as useState23, useCallback as useCallback25, useEffect as useEffect23, useRef as useRef25 } from "react";
+function getConfig5(options) {
+  if (typeof window === "undefined") {
+    throw new Error("useSubscriptionTiers requires browser environment");
+  }
+  const runtimeConfig = window.YOAMIGO_CONFIG;
+  const appId = options.appId || runtimeConfig?.appId;
+  const apiUrl = options.apiUrl || runtimeConfig?.apiUrl;
+  if (!appId) {
+    throw new Error(
+      "App ID not configured (provide appId option or set YOAMIGO_CONFIG.appId)"
+    );
+  }
+  if (!apiUrl) {
+    throw new Error(
+      "API URL not configured (provide apiUrl option or set YOAMIGO_CONFIG.apiUrl)"
+    );
+  }
+  return { appId, apiUrl };
+}
+function useSubscriptionTiers(options = {}) {
+  const { fetchOnMount = true } = options;
+  const [tiers, setTiers] = useState23([]);
+  const [isLoading, setIsLoading] = useState23(false);
+  const [error, setError] = useState23(null);
+  const configRef = useRef25(null);
+  if (!configRef.current && typeof window !== "undefined") {
+    try {
+      configRef.current = getConfig5(options);
+    } catch {
+    }
+  }
+  const refresh = useCallback25(async () => {
+    const config = configRef.current;
+    if (!config) {
+      setError("Subscription tiers not configured");
+      return;
+    }
+    setIsLoading(true);
+    setError(null);
+    try {
+      const response = await fetch(
+        `${config.apiUrl}/api/apps/${config.appId}/subscriptions/tiers`,
+        {
+          method: "GET",
+          headers: {
+            "Content-Type": "application/json"
+          }
+        }
+      );
+      const result = await response.json();
+      if (!result.success || !result.data) {
+        const errorMessage = result.error || "Failed to fetch subscription tiers";
+        setError(errorMessage);
+        return;
+      }
+      setTiers(result.data.tiers);
+    } catch (err) {
+      const message = err instanceof Error ? err.message : "Failed to fetch subscription tiers";
+      setError(message);
+    } finally {
+      setIsLoading(false);
+    }
+  }, []);
+  useEffect23(() => {
+    if (fetchOnMount && configRef.current) {
+      refresh();
+    }
+  }, [fetchOnMount, refresh]);
+  return {
+    tiers,
+    isLoading,
+    error,
+    refresh
+  };
+}
+
+// src/hooks/useCustomerPortal.ts
+import { useState as useState24, useCallback as useCallback26, useRef as useRef26 } from "react";
+function getConfig6(options) {
+  if (typeof window === "undefined") {
+    throw new Error("useCustomerPortal requires browser environment");
+  }
+  const runtimeConfig = window.YOAMIGO_CONFIG;
+  const appId = options.appId || runtimeConfig?.appId;
+  const apiUrl = options.apiUrl || runtimeConfig?.apiUrl;
+  if (!appId) {
+    throw new Error("App ID not configured (provide appId option or set YOAMIGO_CONFIG.appId)");
+  }
+  if (!apiUrl) {
+    throw new Error("API URL not configured (provide apiUrl option or set YOAMIGO_CONFIG.apiUrl)");
+  }
+  return { appId, apiUrl };
+}
+function useCustomerPortal(options) {
+  const { userToken } = options;
+  const [isLoading, setIsLoading] = useState24(false);
+  const [error, setError] = useState24(null);
+  const configRef = useRef26(null);
+  if (!configRef.current && typeof window !== "undefined") {
+    try {
+      configRef.current = getConfig6(options);
+    } catch {
+    }
+  }
+  const openPortal = useCallback26(async (params) => {
+    const config = configRef.current;
+    if (!config) {
+      return {
+        success: false,
+        error: "Customer portal not configured"
+      };
+    }
+    if (!userToken) {
+      return {
+        success: false,
+        error: "Authentication required to access customer portal"
+      };
+    }
+    setIsLoading(true);
+    setError(null);
+    try {
+      const response = await fetch(
+        `${config.apiUrl}/api/apps/${config.appId}/subscriptions/portal`,
+        {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+            "X-App-User-Token": userToken
+          },
+          body: JSON.stringify({
+            returnUrl: params.returnUrl
+          })
+        }
+      );
+      const result = await response.json();
+      if (!result.success || !result.data) {
+        const errorMessage = result.error || "Failed to create portal session";
+        setError(errorMessage);
+        return {
+          success: false,
+          error: errorMessage
+        };
+      }
+      return {
+        success: true,
+        portalUrl: result.data.portalUrl
+      };
+    } catch (err) {
+      const message = err instanceof Error ? err.message : "Failed to create portal session";
+      setError(message);
+      return {
+        success: false,
+        error: message
+      };
+    } finally {
+      setIsLoading(false);
+    }
+  }, [userToken]);
+  return {
+    openPortal,
+    isLoading,
+    error
+  };
+}
+
+// src/hooks/useSubscriptionStatus.ts
+import { useState as useState25, useCallback as useCallback27, useRef as useRef27, useEffect as useEffect24 } from "react";
+function getConfig7(options) {
+  if (typeof window === "undefined") {
+    throw new Error("useSubscriptionStatus requires browser environment");
+  }
+  const runtimeConfig = window.YOAMIGO_CONFIG;
+  const appId = options.appId || runtimeConfig?.appId;
+  const apiUrl = options.apiUrl || runtimeConfig?.apiUrl;
+  if (!appId) {
+    throw new Error("App ID not configured (provide appId option or set YOAMIGO_CONFIG.appId)");
+  }
+  if (!apiUrl) {
+    throw new Error("API URL not configured (provide apiUrl option or set YOAMIGO_CONFIG.apiUrl)");
+  }
+  return { appId, apiUrl };
+}
+function useSubscriptionStatus(options) {
+  const { userToken, autoFetch = true, pollInterval = 0 } = options;
+  const [status, setStatus] = useState25(null);
+  const [subscriptions, setSubscriptions] = useState25([]);
+  const [isLoading, setIsLoading] = useState25(autoFetch);
+  const [error, setError] = useState25(null);
+  const configRef = useRef27(null);
+  if (!configRef.current && typeof window !== "undefined") {
+    try {
+      configRef.current = getConfig7(options);
+    } catch {
+    }
+  }
+  const fetchStatus = useCallback27(async () => {
+    const config = configRef.current;
+    if (!config) {
+      setError("Subscription status not configured");
+      setIsLoading(false);
+      return;
+    }
+    if (!userToken) {
+      setStatus("none");
+      setSubscriptions([]);
+      setIsLoading(false);
+      return;
+    }
+    setIsLoading(true);
+    try {
+      const response = await fetch(
+        `${config.apiUrl}/api/apps/${config.appId}/subscriptions/status`,
+        {
+          method: "GET",
+          headers: {
+            "Content-Type": "application/json",
+            "X-App-User-Token": userToken
+          }
+        }
+      );
+      const result = await response.json();
+      if (!result.success) {
+        setError(result.error || "Failed to fetch subscription status");
+        return;
+      }
+      setStatus(result.data?.status ?? "none");
+      setSubscriptions(result.data?.subscriptions ?? []);
+      setError(null);
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Failed to fetch subscription status");
+    } finally {
+      setIsLoading(false);
+    }
+  }, [userToken]);
+  useEffect24(() => {
+    if (autoFetch && userToken) {
+      fetchStatus();
+    }
+  }, [autoFetch, userToken, fetchStatus]);
+  useEffect24(() => {
+    if (pollInterval <= 0 || !userToken) {
+      return;
+    }
+    const interval = setInterval(() => {
+      fetchStatus();
+    }, pollInterval);
+    return () => clearInterval(interval);
+  }, [pollInterval, userToken, fetchStatus]);
+  return {
+    status,
+    subscriptions,
+    isLoading,
+    error,
+    refresh: fetchStatus
+  };
+}
 export {
   AIEditProvider,
+  CartProvider,
+  CollectionClient,
+  CollectionContentProvider,
+  CollectionDetailPage,
+  CollectionItem,
+  CollectionList,
+  CollectionListPage,
   ContentStoreProvider,
   ContentStoreProvider2 as ContentStoreProviderProd,
   Link2 as Link,
@@ -7146,12 +9028,21 @@ export {
   background,
   buildIntermediateText,
   calculateAnimationTiming,
+  clearSessionId,
   computeTextDiff,
   containsHtml,
   contentRegistry,
+  createRouteDefinition,
   embed,
+  extractRouteParams,
+  filePathToRoutePath,
+  generatePath,
   getAllContent,
+  getCollectionClient,
   getContent,
+  getLocalCartItemCount,
+  getLocalCartItems,
+  getSessionId,
   getTextCursorPosition,
   hasContent,
   image,
@@ -7160,13 +9051,17 @@ export {
   linkTransitionStrategy,
   parseBackgroundConfig,
   parseEmbedUrl,
+  parseFieldValue,
   registerContent,
+  resetCollectionClient,
   resolveAssetUrl,
   serializeBackgroundConfig,
   serializeEmbedValue,
   serializeImageValue,
   serializeVideoValue,
   setAssetResolver,
+  sortRoutesBySpecificity,
+  stringifyFieldValue,
   stripHtml,
   text,
   textTypingStrategy,
@@ -7174,10 +9069,26 @@ export {
   useAIEditContext,
   useAIEditContextOptional,
   useAnimatedText,
+  useCart,
+  useCartContext,
+  useCheckout,
+  useCheckoutStatus,
+  useCollectionContent,
+  useCollectionList,
+  useCollectionRecord,
+  useContent,
   useContentStore,
   useContentStore2 as useContentStoreProd,
+  useCustomerPortal,
+  useLocation4 as useLocation,
   useNavigate,
-  useParams,
+  useOptionalCartContext,
+  useParams2 as useParams,
+  useProduct,
+  useProducts,
   useSafeTriangle,
+  useSubscription,
+  useSubscriptionStatus,
+  useSubscriptionTiers,
   video
 };