@foxpixel/react 0.2.0 → 0.2.2

package/dist/index.js

@@ -40,6 +40,7 @@ __export(index_exports, {
   ProtectedRoute: () => ProtectedRoute,
   SITE_CONTENT_QUERY_KEY: () => SITE_CONTENT_QUERY_KEY,
   getBlogPostSchemaLd: () => getBlogPostSchemaLd,
+  prefetchSiteContent: () => prefetchSiteContent,
   useAdminBlogAnalytics: () => useAdminBlogAnalytics,
   useAdminBlogCategories: () => useAdminBlogCategories,
   useAdminBlogComments: () => useAdminBlogComments,
@@ -76,7 +77,7 @@ __export(index_exports, {
 module.exports = __toCommonJS(index_exports);
 
 // src/context/FoxPixelContext.tsx
-var import_react = require("react");
+var import_react = __toESM(require("react"));
 
 // src/client/http.ts
 var import_axios = __toESM(require("axios"));
@@ -188,15 +189,21 @@ var FoxPixelHttpClient = class {
 
 // src/context/FoxPixelContext.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
+if (!import_react.default || typeof import_react.default.useMemo !== "function") {
+  throw new Error(
+    '@foxpixel/react: React is not available. Ensure your app uses a single React instance and the SDK is not bundled with a different React. In Next.js use transpilePackages: ["@foxpixel/react"] and ensure react/react-dom resolve to one module (see next.config.js).'
+  );
+}
 var FoxPixelContext = (0, import_react.createContext)(null);
-function FoxPixelProvider({ children, config = {} }) {
+function FoxPixelProvider({ children, config = {}, queryClient }) {
   const client = (0, import_react.useMemo)(() => {
     return new FoxPixelHttpClient(config);
   }, [config.apiUrl, config.apiKey, config.tenantId]);
   const value = (0, import_react.useMemo)(() => ({
     client,
-    config
-  }), [client, config]);
+    config,
+    queryClient: queryClient ?? null
+  }), [client, config, queryClient]);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(FoxPixelContext.Provider, { value, children });
 }
 function useFoxPixelContext() {
@@ -423,12 +430,33 @@ function withAuth(Component, options = {}) {
 }
 
 // src/components/Editable.tsx
-var import_react7 = require("react");
+var import_react8 = require("react");
 
 // src/hooks/useEditMode.ts
 var import_react6 = require("react");
-var import_react_query = require("@tanstack/react-query");
 var SITE_CONTENT_QUERY_KEY = "siteContent";
+var contentKeysOnPage = /* @__PURE__ */ new Set();
+var flushTimer = null;
+function scheduleFlushContentKeys() {
+  if (flushTimer) return;
+  flushTimer = setTimeout(() => {
+    flushTimer = null;
+    if (typeof window !== "undefined" && window.parent !== window) {
+      window.parent.postMessage(
+        { type: "FOXPIXEL_READY", payload: { contentKeys: Array.from(contentKeysOnPage) } },
+        "*"
+      );
+    }
+  }, 150);
+}
+function registerContentKey(key) {
+  contentKeysOnPage.add(key);
+  scheduleFlushContentKeys();
+}
+function unregisterContentKey(key) {
+  contentKeysOnPage.delete(key);
+  scheduleFlushContentKeys();
+}
 function useEditMode() {
   const [isEditMode, setIsEditMode] = (0, import_react6.useState)(false);
   (0, import_react6.useEffect)(() => {
@@ -439,18 +467,29 @@ function useEditMode() {
   return isEditMode;
 }
 function useEditModeMessaging() {
-  const queryClient = (0, import_react_query.useQueryClient)();
+  const ctx = useFoxPixelContext();
+  const queryClient = ctx?.queryClient ?? null;
   const isEditMode = useEditMode();
   (0, import_react6.useEffect)(() => {
     if (!isEditMode || typeof window === "undefined") return;
     window.parent.postMessage({ type: "FOXPIXEL_READY" }, "*");
     const handleMessage = (event) => {
+      if (!queryClient) return;
       const { type, payload } = event.data || {};
-      if (type === "FOXPIXEL_CONTENT_UPDATED" && payload?.contentKey) {
-        queryClient.invalidateQueries({
-          queryKey: [SITE_CONTENT_QUERY_KEY, payload.contentKey]
-        });
+      if (type !== "FOXPIXEL_CONTENT_UPDATED" || !payload?.contentKey) return;
+      const { contentKey, newValue } = payload;
+      if (typeof newValue === "string") {
+        queryClient.setQueryData(
+          [SITE_CONTENT_QUERY_KEY, contentKey],
+          (prev) => ({
+            value: newValue,
+            contentType: prev?.contentType ?? "TEXT"
+          })
+        );
       }
+      queryClient.invalidateQueries({
+        queryKey: [SITE_CONTENT_QUERY_KEY, contentKey]
+      });
     };
     window.addEventListener("message", handleMessage);
     return () => window.removeEventListener("message", handleMessage);
@@ -483,16 +522,40 @@ function useSendEditRequest() {
 }
 
 // src/hooks/useSiteContentQuery.ts
-var import_react_query2 = require("@tanstack/react-query");
+var import_react7 = require("react");
+function getCached(queryClient, contentKey) {
+  const data = queryClient.getQueryData([
+    SITE_CONTENT_QUERY_KEY,
+    contentKey
+  ]);
+  if (data == null) return void 0;
+  return { value: data.value ?? "", contentType: data.contentType ?? "TEXT" };
+}
 function useSiteContentQuery(contentKey, options) {
   const { defaultValue } = options;
-  const { client } = useFoxPixelContext();
-  const { data, isLoading } = (0, import_react_query2.useQuery)({
-    queryKey: [SITE_CONTENT_QUERY_KEY, contentKey],
-    queryFn: async () => {
+  const { client, queryClient } = useFoxPixelContext();
+  const [state, setState] = (0, import_react7.useState)(() => {
+    if (queryClient) {
+      const cached = getCached(queryClient, contentKey);
+      if (cached) {
+        return { value: cached.value, isLoading: false, contentType: cached.contentType };
+      }
+    }
+    return { value: defaultValue, isLoading: true, contentType: "TEXT" };
+  });
+  const contentKeyRef = (0, import_react7.useRef)(contentKey);
+  contentKeyRef.current = contentKey;
+  (0, import_react7.useEffect)(() => {
+    if (!queryClient) {
+      setState((s) => ({ ...s, value: defaultValue, isLoading: false }));
+      return;
+    }
+    const key = contentKeyRef.current;
+    const queryKey = [SITE_CONTENT_QUERY_KEY, key];
+    const queryFn = async () => {
       try {
         const content = await client.get(
-          `/api/site/content/${encodeURIComponent(contentKey)}`
+          `/api/site/content/${encodeURIComponent(key)}`
         );
         if (!content) return null;
         return {
@@ -500,23 +563,50 @@ function useSiteContentQuery(contentKey, options) {
           contentType: content.contentType ?? "TEXT"
         };
       } catch (err) {
-        const status = err?.status;
+        const status = err?.response?.status;
         if (status === 404) return null;
         throw err;
       }
-    },
-    staleTime: 1e3 * 60 * 5,
-    retry: 1
-  });
-  return {
-    value: data?.value ?? defaultValue,
-    isLoading,
-    contentType: data?.contentType ?? "TEXT"
-  };
+    };
+    let cancelled = false;
+    queryClient.fetchQuery({
+      queryKey,
+      queryFn,
+      staleTime: 1e3 * 60 * 5,
+      retry: 1
+    }).then((data) => {
+      if (cancelled) return;
+      setState({
+        value: data?.value ?? defaultValue,
+        isLoading: false,
+        contentType: data?.contentType ?? "TEXT"
+      });
+    }).catch(() => {
+      if (cancelled) return;
+      setState((s) => ({ ...s, value: defaultValue, isLoading: false }));
+    });
+    const unsub = queryClient.getQueryCache().subscribe((event) => {
+      if (event?.type === "updated" && event?.query?.queryKey[1] === key) {
+        const cached = getCached(queryClient, key);
+        if (cached && !cancelled) {
+          setState({
+            value: cached.value,
+            isLoading: false,
+            contentType: cached.contentType
+          });
+        }
+      }
+    });
+    return () => {
+      cancelled = true;
+      unsub();
+    };
+  }, [queryClient, contentKey, defaultValue, client]);
+  return state;
 }
 
 // src/utils/sanitize.ts
-var import_isomorphic_dompurify = __toESM(require("isomorphic-dompurify"));
+var import_sanitize_html = __toESM(require("sanitize-html"));
 var DEFAULT_ALLOWED_TAGS = [
   "p",
   "br",
@@ -547,13 +637,16 @@ var DEFAULT_ALLOWED_TAGS = [
   "th",
   "td"
 ];
-var DEFAULT_ALLOWED_ATTR = ["href", "target", "rel", "src", "alt", "title", "class"];
+var DEFAULT_ALLOWED_ATTR = {
+  a: ["href", "target", "rel", "title"],
+  img: ["src", "alt", "title", "width", "height"],
+  "*": ["class"]
+};
 function sanitizeHtml(html) {
   if (typeof html !== "string") return "";
-  return import_isomorphic_dompurify.default.sanitize(html, {
-    ALLOWED_TAGS: DEFAULT_ALLOWED_TAGS,
-    ALLOWED_ATTR: DEFAULT_ALLOWED_ATTR,
-    ADD_ATTR: ["target"]
+  return (0, import_sanitize_html.default)(html, {
+    allowedTags: DEFAULT_ALLOWED_TAGS,
+    allowedAttributes: DEFAULT_ALLOWED_ATTR
   });
 }
 
@@ -564,6 +657,23 @@ function cn(...args) {
 
 // src/components/Editable.tsx
 var import_jsx_runtime6 = require("react/jsx-runtime");
+var EDIT_MODE_TOOLTIP_STYLE = {
+  position: "absolute",
+  top: "-28px",
+  left: "50%",
+  transform: "translateX(-50%)",
+  fontSize: "10px",
+  fontFamily: "system-ui, sans-serif",
+  padding: "4px 8px",
+  backgroundColor: "rgb(37 99 235)",
+  color: "white",
+  borderRadius: "4px",
+  whiteSpace: "nowrap",
+  pointerEvents: "none",
+  zIndex: 100,
+  boxShadow: "0 1px 3px rgba(0,0,0,0.2)",
+  transition: "opacity 0.15s ease"
+};
 function Editable({
   contentKey,
   defaultValue,
@@ -571,13 +681,20 @@ function Editable({
   multiline = false,
   className
 }) {
+  const [isHovered, setIsHovered] = (0, import_react8.useState)(false);
   const isEditMode = useEditModeMessaging();
   const sendEditRequest = useSendEditRequest();
   const { value, isLoading, contentType } = useSiteContentQuery(contentKey, {
     defaultValue
   });
   const section = contentKey.includes(".") ? contentKey.split(".")[0] : void 0;
-  const handleClick = (0, import_react7.useCallback)(
+  (0, import_react8.useEffect)(() => {
+    if (isEditMode) {
+      registerContentKey(contentKey);
+      return () => unregisterContentKey(contentKey);
+    }
+  }, [isEditMode, contentKey]);
+  const handleClick = (0, import_react8.useCallback)(
     (e) => {
       if (isEditMode) {
         e.preventDefault();
@@ -593,7 +710,7 @@ function Editable({
     [isEditMode, contentKey, value, contentType, section, sendEditRequest]
   );
   if (isLoading) {
-    return (0, import_react7.createElement)(as, {
+    return (0, import_react8.createElement)(as, {
       className: cn(
         "animate-pulse bg-muted rounded",
         multiline ? "h-20" : "h-6",
@@ -604,36 +721,59 @@ function Editable({
       "aria-label": "Loading content..."
     });
   }
-  const editModeStyles = isEditMode ? cn(
-    "cursor-pointer transition-all duration-200",
-    "hover:ring-2 hover:ring-blue-500 hover:ring-offset-2",
-    "hover:bg-blue-50/50 dark:hover:bg-blue-950/30",
-    "relative group"
-  ) : "";
+  const editModeWrapperStyle = isEditMode ? {
+    position: "relative",
+    display: "inline",
+    cursor: "pointer",
+    borderRadius: "2px",
+    outline: isHovered ? "2px solid rgb(59 130 246)" : "none",
+    outlineOffset: "2px",
+    backgroundColor: isHovered ? "rgba(59 130 246 / 0.08)" : void 0
+  } : {};
+  const tooltipSpan = isEditMode ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    "span",
+    {
+      style: {
+        ...EDIT_MODE_TOOLTIP_STYLE,
+        opacity: isHovered ? 1 : 0
+      },
+      "aria-hidden": true,
+      children: "Click to edit"
+    }
+  ) : null;
+  const hoverHandlers = isEditMode ? {
+    onMouseEnter: () => setIsHovered(true),
+    onMouseLeave: () => setIsHovered(false)
+  } : {};
   if (multiline && value.includes("\n")) {
     const safeBr = sanitizeHtml(value.replace(/\n/g, "<br />"));
-    return (0, import_react7.createElement)(as, {
-      className: cn(className, editModeStyles),
-      "data-content-key": contentKey,
-      "data-editable": isEditMode ? "true" : void 0,
-      onClick: isEditMode ? handleClick : void 0,
-      dangerouslySetInnerHTML: { __html: safeBr },
-      title: isEditMode ? "Click to edit" : void 0
-    });
+    return (0, import_react8.createElement)(
+      "span",
+      { style: editModeWrapperStyle, ...hoverHandlers },
+      (0, import_react8.createElement)(as, {
+        className,
+        "data-content-key": contentKey,
+        "data-editable": isEditMode ? "true" : void 0,
+        onClick: isEditMode ? handleClick : void 0,
+        dangerouslySetInnerHTML: { __html: safeBr }
+      }),
+      tooltipSpan
+    );
   }
-  return (0, import_react7.createElement)(
-    as,
-    {
-      className: cn(className, editModeStyles),
-      "data-content-key": contentKey,
-      "data-editable": isEditMode ? "true" : void 0,
-      onClick: isEditMode ? handleClick : void 0,
-      title: isEditMode ? "Click to edit" : void 0
-    },
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
-      value,
-      isEditMode && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "absolute -top-6 left-1/2 -translate-x-1/2 px-2 py-0.5 bg-blue-600 text-white text-[10px] rounded opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap pointer-events-none z-50", children: "Click to edit" })
-    ] })
+  return (0, import_react8.createElement)(
+    "span",
+    { style: editModeWrapperStyle, ...hoverHandlers },
+    (0, import_react8.createElement)(
+      as,
+      {
+        className,
+        "data-content-key": contentKey,
+        "data-editable": isEditMode ? "true" : void 0,
+        onClick: isEditMode ? handleClick : void 0
+      },
+      value
+    ),
+    tooltipSpan
   );
 }
 function EditableHTML({
@@ -642,13 +782,20 @@ function EditableHTML({
   as = "div",
   className
 }) {
+  const [isHovered, setIsHovered] = (0, import_react8.useState)(false);
   const isEditMode = useEditModeMessaging();
   const sendEditRequest = useSendEditRequest();
   const { value, isLoading } = useSiteContentQuery(contentKey, {
     defaultValue
   });
   const section = contentKey.includes(".") ? contentKey.split(".")[0] : void 0;
-  const handleClick = (0, import_react7.useCallback)(
+  (0, import_react8.useEffect)(() => {
+    if (isEditMode) {
+      registerContentKey(contentKey);
+      return () => unregisterContentKey(contentKey);
+    }
+  }, [isEditMode, contentKey]);
+  const handleClick = (0, import_react8.useCallback)(
     (e) => {
       if (isEditMode) {
         e.preventDefault();
@@ -659,26 +806,44 @@ function EditableHTML({
     [isEditMode, contentKey, value, section, sendEditRequest]
   );
   if (isLoading) {
-    return (0, import_react7.createElement)(as, {
+    return (0, import_react8.createElement)(as, {
       className: cn("animate-pulse bg-muted rounded h-32", className),
       "aria-busy": true
     });
   }
-  const editModeStyles = isEditMode ? cn(
-    "cursor-pointer transition-all duration-200",
-    "hover:ring-2 hover:ring-blue-500 hover:ring-offset-2",
-    "hover:bg-blue-50/50 dark:hover:bg-blue-950/30",
-    "relative group"
-  ) : "";
+  const wrapperStyle = isEditMode ? {
+    position: "relative",
+    cursor: "pointer",
+    borderRadius: "2px",
+    outline: isHovered ? "2px solid rgb(59 130 246)" : "none",
+    outlineOffset: "2px",
+    backgroundColor: isHovered ? "rgba(59 130 246 / 0.08)" : void 0
+  } : {};
   const safeHtml = sanitizeHtml(value);
-  return (0, import_react7.createElement)(as, {
-    className: cn("prose prose-slate dark:prose-invert", className, editModeStyles),
-    "data-content-key": contentKey,
-    "data-editable": isEditMode ? "true" : void 0,
-    onClick: isEditMode ? handleClick : void 0,
-    title: isEditMode ? "Click to edit" : void 0,
-    dangerouslySetInnerHTML: { __html: safeHtml }
-  });
+  const hoverHandlers = isEditMode ? { onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false) } : {};
+  return (0, import_react8.createElement)(
+    "div",
+    { style: wrapperStyle, ...hoverHandlers },
+    (0, import_react8.createElement)(as, {
+      className: cn("prose prose-slate dark:prose-invert", className),
+      "data-content-key": contentKey,
+      "data-editable": isEditMode ? "true" : void 0,
+      onClick: isEditMode ? handleClick : void 0,
+      dangerouslySetInnerHTML: { __html: safeHtml }
+    }),
+    isEditMode && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      "span",
+      {
+        style: {
+          ...EDIT_MODE_TOOLTIP_STYLE,
+          top: "-24px",
+          opacity: isHovered ? 1 : 0
+        },
+        "aria-hidden": true,
+        children: "Click to edit"
+      }
+    )
+  );
 }
 function EditableImage({
   contentKey,
@@ -689,13 +854,20 @@ function EditableImage({
   height,
   priority = false
 }) {
+  const [isHovered, setIsHovered] = (0, import_react8.useState)(false);
   const isEditMode = useEditModeMessaging();
   const sendEditRequest = useSendEditRequest();
   const { value: src, isLoading } = useSiteContentQuery(contentKey, {
     defaultValue
   });
   const section = contentKey.includes(".") ? contentKey.split(".")[0] : void 0;
-  const handleClick = (0, import_react7.useCallback)(
+  (0, import_react8.useEffect)(() => {
+    if (isEditMode) {
+      registerContentKey(contentKey);
+      return () => unregisterContentKey(contentKey);
+    }
+  }, [isEditMode, contentKey]);
+  const handleClick = (0, import_react8.useCallback)(
     (e) => {
       if (isEditMode) {
         e.preventDefault();
@@ -715,39 +887,55 @@ function EditableImage({
       }
     );
   }
-  const editModeStyles = isEditMode ? cn(
-    "cursor-pointer transition-all duration-200",
-    "hover:ring-2 hover:ring-blue-500 hover:ring-offset-2",
-    "hover:opacity-90",
-    "relative group"
-  ) : "";
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: cn("relative", isEditMode && "group"), children: [
+  const wrapperStyle = isEditMode ? {
+    position: "relative",
+    display: "inline-block",
+    cursor: "pointer",
+    borderRadius: "2px",
+    outline: isHovered ? "2px solid rgb(59 130 246)" : "none",
+    outlineOffset: "2px"
+  } : {};
+  const hoverHandlers = isEditMode ? { onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false) } : {};
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { style: wrapperStyle, ...hoverHandlers, children: [
     /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
       "img",
       {
         src,
         alt,
-        className: cn(className, editModeStyles),
+        className,
+        style: isEditMode && isHovered ? { opacity: 0.95 } : void 0,
         width,
         height,
         loading: priority ? "eager" : "lazy",
         "data-content-key": contentKey,
         "data-editable": isEditMode ? "true" : void 0,
-        onClick: isEditMode ? handleClick : void 0,
-        title: isEditMode ? "Click to edit image" : void 0
+        onClick: isEditMode ? handleClick : void 0
       }
     ),
-    isEditMode && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "absolute top-2 left-2 px-2 py-0.5 bg-blue-600 text-white text-[10px] rounded opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none", children: "Click to edit image" })
+    isEditMode && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      "span",
+      {
+        style: {
+          ...EDIT_MODE_TOOLTIP_STYLE,
+          top: "8px",
+          left: "8px",
+          transform: "none",
+          opacity: isHovered ? 1 : 0
+        },
+        "aria-hidden": true,
+        children: "Click to edit image"
+      }
+    )
   ] });
 }
 
 // src/hooks/useServices.ts
-var import_react8 = require("react");
+var import_react9 = require("react");
 function useServices(options = {}) {
   const { client } = useFoxPixelContext();
-  const [services, setServices] = (0, import_react8.useState)(null);
-  const [isLoading, setIsLoading] = (0, import_react8.useState)(true);
-  const [error, setError] = (0, import_react8.useState)(null);
+  const [services, setServices] = (0, import_react9.useState)(null);
+  const [isLoading, setIsLoading] = (0, import_react9.useState)(true);
+  const [error, setError] = (0, import_react9.useState)(null);
   const fetchServices = async () => {
     try {
       setIsLoading(true);
@@ -765,7 +953,7 @@ function useServices(options = {}) {
       setIsLoading(false);
     }
   };
-  (0, import_react8.useEffect)(() => {
+  (0, import_react9.useEffect)(() => {
     fetchServices();
   }, [options.category, options.active]);
   return {
@@ -777,11 +965,11 @@ function useServices(options = {}) {
 }
 
 // src/hooks/useLeadCapture.ts
-var import_react9 = require("react");
+var import_react10 = require("react");
 function useLeadCapture() {
   const { client } = useFoxPixelContext();
-  const [isLoading, setIsLoading] = (0, import_react9.useState)(false);
-  const [error, setError] = (0, import_react9.useState)(null);
+  const [isLoading, setIsLoading] = (0, import_react10.useState)(false);
+  const [error, setError] = (0, import_react10.useState)(null);
   const captureLead = async (data) => {
     try {
       setIsLoading(true);
@@ -804,11 +992,11 @@ function useLeadCapture() {
 }
 
 // src/hooks/useContactCapture.ts
-var import_react10 = require("react");
+var import_react11 = require("react");
 function useContactCapture() {
   const { client } = useFoxPixelContext();
-  const [isLoading, setIsLoading] = (0, import_react10.useState)(false);
-  const [error, setError] = (0, import_react10.useState)(null);
+  const [isLoading, setIsLoading] = (0, import_react11.useState)(false);
+  const [error, setError] = (0, import_react11.useState)(null);
   const captureContact = async (data) => {
     try {
       setIsLoading(true);
@@ -831,16 +1019,16 @@ function useContactCapture() {
 }
 
 // src/hooks/useSiteContent.ts
-var import_react11 = require("react");
+var import_react12 = require("react");
 function useSiteContent(contentKey, options = {}) {
   const { defaultValue = "", fetchOnMount = true } = options;
   const { client } = useFoxPixelContext();
   const { user, hasPermission } = useAuth();
-  const [data, setData] = (0, import_react11.useState)(null);
-  const [isLoading, setIsLoading] = (0, import_react11.useState)(fetchOnMount);
-  const [error, setError] = (0, import_react11.useState)(null);
+  const [data, setData] = (0, import_react12.useState)(null);
+  const [isLoading, setIsLoading] = (0, import_react12.useState)(fetchOnMount);
+  const [error, setError] = (0, import_react12.useState)(null);
   const canEdit = user !== null && hasPermission("site:content:update");
-  const fetchContent = (0, import_react11.useCallback)(async () => {
+  const fetchContent = (0, import_react12.useCallback)(async () => {
     try {
       setIsLoading(true);
       setError(null);
@@ -858,7 +1046,7 @@ function useSiteContent(contentKey, options = {}) {
       setIsLoading(false);
     }
   }, [client, contentKey]);
-  const updateContent = (0, import_react11.useCallback)(async (newValue) => {
+  const updateContent = (0, import_react12.useCallback)(async (newValue) => {
     try {
       setError(null);
       const updated = await client.put(
@@ -871,7 +1059,7 @@ function useSiteContent(contentKey, options = {}) {
       throw err;
     }
   }, [client, contentKey]);
-  (0, import_react11.useEffect)(() => {
+  (0, import_react12.useEffect)(() => {
     if (fetchOnMount) {
       fetchContent();
     }
@@ -890,10 +1078,10 @@ function useSiteContent(contentKey, options = {}) {
 function useSiteContents(contentKeys, options = {}) {
   const { defaults = {} } = options;
   const { client } = useFoxPixelContext();
-  const [data, setData] = (0, import_react11.useState)({});
-  const [isLoading, setIsLoading] = (0, import_react11.useState)(true);
-  const [error, setError] = (0, import_react11.useState)(null);
-  const fetchContents = (0, import_react11.useCallback)(async () => {
+  const [data, setData] = (0, import_react12.useState)({});
+  const [isLoading, setIsLoading] = (0, import_react12.useState)(true);
+  const [error, setError] = (0, import_react12.useState)(null);
+  const fetchContents = (0, import_react12.useCallback)(async () => {
     if (contentKeys.length === 0) {
       setData({});
       setIsLoading(false);
@@ -913,10 +1101,10 @@ function useSiteContents(contentKeys, options = {}) {
       setIsLoading(false);
     }
   }, [client, contentKeys.join(",")]);
-  (0, import_react11.useEffect)(() => {
+  (0, import_react12.useEffect)(() => {
     fetchContents();
   }, [fetchContents]);
-  const getValue = (0, import_react11.useCallback)((key, defaultValue) => {
+  const getValue = (0, import_react12.useCallback)((key, defaultValue) => {
     const content = data[key];
     if (content?.value) {
       return content.value;
@@ -933,10 +1121,10 @@ function useSiteContents(contentKeys, options = {}) {
 }
 function useSiteContentSection(section) {
   const { client } = useFoxPixelContext();
-  const [contents, setContents] = (0, import_react11.useState)([]);
-  const [isLoading, setIsLoading] = (0, import_react11.useState)(true);
-  const [error, setError] = (0, import_react11.useState)(null);
-  const fetchContents = (0, import_react11.useCallback)(async () => {
+  const [contents, setContents] = (0, import_react12.useState)([]);
+  const [isLoading, setIsLoading] = (0, import_react12.useState)(true);
+  const [error, setError] = (0, import_react12.useState)(null);
+  const fetchContents = (0, import_react12.useCallback)(async () => {
     try {
       setIsLoading(true);
       setError(null);
@@ -950,7 +1138,7 @@ function useSiteContentSection(section) {
       setIsLoading(false);
     }
   }, [client, section]);
-  (0, import_react11.useEffect)(() => {
+  (0, import_react12.useEffect)(() => {
     fetchContents();
   }, [fetchContents]);
   return {
@@ -961,13 +1149,43 @@ function useSiteContentSection(section) {
   };
 }
 
+// src/prefetchSiteContent.ts
+async function prefetchSiteContent(queryClient, options) {
+  const { apiUrl, apiKey, tenantId, contentKeys } = options;
+  const client = new FoxPixelHttpClient({ apiUrl, apiKey, tenantId });
+  await Promise.all(
+    contentKeys.map(async (contentKey) => {
+      try {
+        const content = await client.get(
+          `/api/site/content/${encodeURIComponent(contentKey)}`
+        );
+        queryClient.setQueryData(
+          [SITE_CONTENT_QUERY_KEY, contentKey],
+          {
+            value: content?.value ?? "",
+            contentType: content?.contentType ?? "TEXT"
+          }
+        );
+      } catch (err) {
+        const status = err?.response?.status;
+        if (status === 404) {
+          queryClient.setQueryData([SITE_CONTENT_QUERY_KEY, contentKey], {
+            value: "",
+            contentType: "TEXT"
+          });
+        }
+      }
+    })
+  );
+}
+
 // src/blog/hooks.ts
-var import_react12 = require("react");
+var import_react13 = require("react");
 function useBlogPosts(options = {}) {
   const { client } = useFoxPixelContext();
-  const [data, setData] = (0, import_react12.useState)(null);
-  const [isLoading, setIsLoading] = (0, import_react12.useState)(true);
-  const [error, setError] = (0, import_react12.useState)(null);
+  const [data, setData] = (0, import_react13.useState)(null);
+  const [isLoading, setIsLoading] = (0, import_react13.useState)(true);
+  const [error, setError] = (0, import_react13.useState)(null);
   const page = options.page ?? 0;
   const limit = options.limit ?? 10;
   const fetchPosts = async () => {
@@ -987,7 +1205,7 @@ function useBlogPosts(options = {}) {
       setIsLoading(false);
     }
   };
-  (0, import_react12.useEffect)(() => {
+  (0, import_react13.useEffect)(() => {
     fetchPosts();
   }, [page, limit]);
   return {
@@ -999,9 +1217,9 @@ function useBlogPosts(options = {}) {
 }
 function useBlogPost(slug) {
   const { client } = useFoxPixelContext();
-  const [data, setData] = (0, import_react12.useState)(null);
-  const [isLoading, setIsLoading] = (0, import_react12.useState)(!!slug);
-  const [error, setError] = (0, import_react12.useState)(null);
+  const [data, setData] = (0, import_react13.useState)(null);
+  const [isLoading, setIsLoading] = (0, import_react13.useState)(!!slug);
+  const [error, setError] = (0, import_react13.useState)(null);
   const fetchPost = async () => {
     if (!slug) {
       setData(null);
@@ -1020,7 +1238,7 @@ function useBlogPost(slug) {
       setIsLoading(false);
     }
   };
-  (0, import_react12.useEffect)(() => {
+  (0, import_react13.useEffect)(() => {
     fetchPost();
   }, [slug]);
   return {
@@ -1032,9 +1250,9 @@ function useBlogPost(slug) {
 }
 function useBlogCategories() {
   const { client } = useFoxPixelContext();
-  const [data, setData] = (0, import_react12.useState)(null);
-  const [isLoading, setIsLoading] = (0, import_react12.useState)(true);
-  const [error, setError] = (0, import_react12.useState)(null);
+  const [data, setData] = (0, import_react13.useState)(null);
+  const [isLoading, setIsLoading] = (0, import_react13.useState)(true);
+  const [error, setError] = (0, import_react13.useState)(null);
   const fetchCategories = async () => {
     try {
       setIsLoading(true);
@@ -1048,7 +1266,7 @@ function useBlogCategories() {
       setIsLoading(false);
     }
   };
-  (0, import_react12.useEffect)(() => {
+  (0, import_react13.useEffect)(() => {
     fetchCategories();
   }, []);
   return {
@@ -1060,9 +1278,9 @@ function useBlogCategories() {
 }
 function useBlogTags() {
   const { client } = useFoxPixelContext();
-  const [data, setData] = (0, import_react12.useState)(null);
-  const [isLoading, setIsLoading] = (0, import_react12.useState)(true);
-  const [error, setError] = (0, import_react12.useState)(null);
+  const [data, setData] = (0, import_react13.useState)(null);
+  const [isLoading, setIsLoading] = (0, import_react13.useState)(true);
+  const [error, setError] = (0, import_react13.useState)(null);
   const fetchTags = async () => {
     try {
       setIsLoading(true);
@@ -1076,7 +1294,7 @@ function useBlogTags() {
       setIsLoading(false);
     }
   };
-  (0, import_react12.useEffect)(() => {
+  (0, import_react13.useEffect)(() => {
     fetchTags();
   }, []);
   return {
@@ -1088,9 +1306,9 @@ function useBlogTags() {
 }
 function useBlogComments(slug) {
   const { client } = useFoxPixelContext();
-  const [data, setData] = (0, import_react12.useState)(null);
-  const [isLoading, setIsLoading] = (0, import_react12.useState)(!!slug);
-  const [error, setError] = (0, import_react12.useState)(null);
+  const [data, setData] = (0, import_react13.useState)(null);
+  const [isLoading, setIsLoading] = (0, import_react13.useState)(!!slug);
+  const [error, setError] = (0, import_react13.useState)(null);
   const fetchComments = async () => {
     if (!slug) {
       setData(null);
@@ -1111,7 +1329,7 @@ function useBlogComments(slug) {
       setIsLoading(false);
     }
   };
-  (0, import_react12.useEffect)(() => {
+  (0, import_react13.useEffect)(() => {
     fetchComments();
   }, [slug]);
   return {
@@ -1123,8 +1341,8 @@ function useBlogComments(slug) {
 }
 function useBlogCommentSubmit(slug) {
   const { client } = useFoxPixelContext();
-  const [isSubmitting, setIsSubmitting] = (0, import_react12.useState)(false);
-  const [error, setError] = (0, import_react12.useState)(null);
+  const [isSubmitting, setIsSubmitting] = (0, import_react13.useState)(false);
+  const [error, setError] = (0, import_react13.useState)(null);
   const submit = async (payload) => {
     if (!slug) return null;
     try {
@@ -1152,9 +1370,9 @@ function useBlogCommentSubmit(slug) {
 }
 function useBlogFeaturedPosts(limit = 6) {
   const { client } = useFoxPixelContext();
-  const [data, setData] = (0, import_react12.useState)(null);
-  const [isLoading, setIsLoading] = (0, import_react12.useState)(true);
-  const [error, setError] = (0, import_react12.useState)(null);
+  const [data, setData] = (0, import_react13.useState)(null);
+  const [isLoading, setIsLoading] = (0, import_react13.useState)(true);
+  const [error, setError] = (0, import_react13.useState)(null);
   const fetchFeatured = async () => {
     try {
       setIsLoading(true);
@@ -1172,7 +1390,7 @@ function useBlogFeaturedPosts(limit = 6) {
       setIsLoading(false);
     }
   };
-  (0, import_react12.useEffect)(() => {
+  (0, import_react13.useEffect)(() => {
     fetchFeatured();
   }, [limit]);
   return {
@@ -1184,9 +1402,9 @@ function useBlogFeaturedPosts(limit = 6) {
 }
 function useNewsletterSubscribe() {
   const { client } = useFoxPixelContext();
-  const [isSubmitting, setIsSubmitting] = (0, import_react12.useState)(false);
-  const [error, setError] = (0, import_react12.useState)(null);
-  const [success, setSuccess] = (0, import_react12.useState)(false);
+  const [isSubmitting, setIsSubmitting] = (0, import_react13.useState)(false);
+  const [error, setError] = (0, import_react13.useState)(null);
+  const [success, setSuccess] = (0, import_react13.useState)(false);
   const subscribe = async (payload) => {
     try {
       setIsSubmitting(true);
@@ -1219,9 +1437,9 @@ function useNewsletterSubscribe() {
 }
 function useNewsletterUnsubscribe() {
   const { client } = useFoxPixelContext();
-  const [isSubmitting, setIsSubmitting] = (0, import_react12.useState)(false);
-  const [error, setError] = (0, import_react12.useState)(null);
-  const [success, setSuccess] = (0, import_react12.useState)(false);
+  const [isSubmitting, setIsSubmitting] = (0, import_react13.useState)(false);
+  const [error, setError] = (0, import_react13.useState)(null);
+  const [success, setSuccess] = (0, import_react13.useState)(false);
   const unsubscribe = async (email) => {
     try {
       setIsSubmitting(true);
@@ -1266,15 +1484,15 @@ function useNewsletterUnsubscribe() {
 }
 
 // src/blog/admin-hooks.ts
-var import_react13 = require("react");
+var import_react14 = require("react");
 function useAdminBlogPosts(options = {}) {
   const { client } = useFoxPixelContext();
-  const [data, setData] = (0, import_react13.useState)(null);
-  const [isLoading, setIsLoading] = (0, import_react13.useState)(true);
-  const [error, setError] = (0, import_react13.useState)(null);
+  const [data, setData] = (0, import_react14.useState)(null);
+  const [isLoading, setIsLoading] = (0, import_react14.useState)(true);
+  const [error, setError] = (0, import_react14.useState)(null);
   const page = options.page ?? 0;
   const size = options.size ?? 20;
-  const fetchPosts = (0, import_react13.useCallback)(async () => {
+  const fetchPosts = (0, import_react14.useCallback)(async () => {
     try {
       setIsLoading(true);
       setError(null);
@@ -1289,17 +1507,17 @@ function useAdminBlogPosts(options = {}) {
       setIsLoading(false);
     }
   }, [client, page, size]);
-  (0, import_react13.useEffect)(() => {
+  (0, import_react14.useEffect)(() => {
     fetchPosts();
   }, [fetchPosts]);
   return { data, isLoading, error, refetch: fetchPosts };
 }
 function useAdminBlogPost(id) {
   const { client } = useFoxPixelContext();
-  const [data, setData] = (0, import_react13.useState)(null);
-  const [isLoading, setIsLoading] = (0, import_react13.useState)(!!id);
-  const [error, setError] = (0, import_react13.useState)(null);
-  const fetchPost = (0, import_react13.useCallback)(async () => {
+  const [data, setData] = (0, import_react14.useState)(null);
+  const [isLoading, setIsLoading] = (0, import_react14.useState)(!!id);
+  const [error, setError] = (0, import_react14.useState)(null);
+  const fetchPost = (0, import_react14.useCallback)(async () => {
     if (!id) {
       setData(null);
       setIsLoading(false);
@@ -1316,15 +1534,15 @@ function useAdminBlogPost(id) {
       setIsLoading(false);
     }
   }, [client, id]);
-  (0, import_react13.useEffect)(() => {
+  (0, import_react14.useEffect)(() => {
     fetchPost();
   }, [fetchPost]);
   return { data, isLoading, error, refetch: fetchPost };
 }
 function useAdminBlogPostMutations() {
   const { client } = useFoxPixelContext();
-  const [isLoading, setIsLoading] = (0, import_react13.useState)(false);
-  const [error, setError] = (0, import_react13.useState)(null);
+  const [isLoading, setIsLoading] = (0, import_react14.useState)(false);
+  const [error, setError] = (0, import_react14.useState)(null);
   const create = async (payload) => {
     try {
       setIsLoading(true);
@@ -1368,10 +1586,10 @@ function useAdminBlogPostMutations() {
 }
 function useAdminBlogCategories() {
   const { client } = useFoxPixelContext();
-  const [data, setData] = (0, import_react13.useState)(null);
-  const [isLoading, setIsLoading] = (0, import_react13.useState)(true);
-  const [error, setError] = (0, import_react13.useState)(null);
-  const fetchCategories = (0, import_react13.useCallback)(async () => {
+  const [data, setData] = (0, import_react14.useState)(null);
+  const [isLoading, setIsLoading] = (0, import_react14.useState)(true);
+  const [error, setError] = (0, import_react14.useState)(null);
+  const fetchCategories = (0, import_react14.useCallback)(async () => {
     try {
       setIsLoading(true);
       setError(null);
@@ -1383,7 +1601,7 @@ function useAdminBlogCategories() {
       setIsLoading(false);
     }
   }, [client]);
-  (0, import_react13.useEffect)(() => {
+  (0, import_react14.useEffect)(() => {
     fetchCategories();
   }, [fetchCategories]);
   const create = async (payload) => {
@@ -1420,10 +1638,10 @@ function useAdminBlogCategories() {
 }
 function useAdminBlogTags() {
   const { client } = useFoxPixelContext();
-  const [data, setData] = (0, import_react13.useState)(null);
-  const [isLoading, setIsLoading] = (0, import_react13.useState)(true);
-  const [error, setError] = (0, import_react13.useState)(null);
-  const fetchTags = (0, import_react13.useCallback)(async () => {
+  const [data, setData] = (0, import_react14.useState)(null);
+  const [isLoading, setIsLoading] = (0, import_react14.useState)(true);
+  const [error, setError] = (0, import_react14.useState)(null);
+  const fetchTags = (0, import_react14.useCallback)(async () => {
     try {
       setIsLoading(true);
       setError(null);
@@ -1435,7 +1653,7 @@ function useAdminBlogTags() {
       setIsLoading(false);
     }
   }, [client]);
-  (0, import_react13.useEffect)(() => {
+  (0, import_react14.useEffect)(() => {
     fetchTags();
   }, [fetchTags]);
   const create = async (payload) => {
@@ -1472,11 +1690,11 @@ function useAdminBlogTags() {
 }
 function useAdminBlogComments(options = {}) {
   const { client } = useFoxPixelContext();
-  const [data, setData] = (0, import_react13.useState)(null);
-  const [isLoading, setIsLoading] = (0, import_react13.useState)(true);
-  const [error, setError] = (0, import_react13.useState)(null);
+  const [data, setData] = (0, import_react14.useState)(null);
+  const [isLoading, setIsLoading] = (0, import_react14.useState)(true);
+  const [error, setError] = (0, import_react14.useState)(null);
   const { status, postId, page = 0, size = 20 } = options;
-  const fetchComments = (0, import_react13.useCallback)(async () => {
+  const fetchComments = (0, import_react14.useCallback)(async () => {
     try {
       setIsLoading(true);
       setError(null);
@@ -1493,7 +1711,7 @@ function useAdminBlogComments(options = {}) {
       setIsLoading(false);
     }
   }, [client, status, postId, page, size]);
-  (0, import_react13.useEffect)(() => {
+  (0, import_react14.useEffect)(() => {
     fetchComments();
   }, [fetchComments]);
   const updateStatus = async (id, newStatus) => {
@@ -1520,11 +1738,11 @@ function useAdminBlogComments(options = {}) {
 }
 function useAdminNewsletterSubscribers(options = {}) {
   const { client } = useFoxPixelContext();
-  const [data, setData] = (0, import_react13.useState)(null);
-  const [isLoading, setIsLoading] = (0, import_react13.useState)(true);
-  const [error, setError] = (0, import_react13.useState)(null);
+  const [data, setData] = (0, import_react14.useState)(null);
+  const [isLoading, setIsLoading] = (0, import_react14.useState)(true);
+  const [error, setError] = (0, import_react14.useState)(null);
   const { status, page = 0, size = 20 } = options;
-  const fetchSubscribers = (0, import_react13.useCallback)(async () => {
+  const fetchSubscribers = (0, import_react14.useCallback)(async () => {
     try {
       setIsLoading(true);
       setError(null);
@@ -1540,7 +1758,7 @@ function useAdminNewsletterSubscribers(options = {}) {
       setIsLoading(false);
     }
   }, [client, status, page, size]);
-  (0, import_react13.useEffect)(() => {
+  (0, import_react14.useEffect)(() => {
     fetchSubscribers();
   }, [fetchSubscribers]);
   const remove = async (id) => {
@@ -1557,10 +1775,10 @@ function useAdminNewsletterSubscribers(options = {}) {
 }
 function useAdminNewsletterStats() {
   const { client } = useFoxPixelContext();
-  const [data, setData] = (0, import_react13.useState)(null);
-  const [isLoading, setIsLoading] = (0, import_react13.useState)(true);
-  const [error, setError] = (0, import_react13.useState)(null);
-  const fetchStats = (0, import_react13.useCallback)(async () => {
+  const [data, setData] = (0, import_react14.useState)(null);
+  const [isLoading, setIsLoading] = (0, import_react14.useState)(true);
+  const [error, setError] = (0, import_react14.useState)(null);
+  const fetchStats = (0, import_react14.useCallback)(async () => {
     try {
       setIsLoading(true);
       setError(null);
@@ -1572,17 +1790,17 @@ function useAdminNewsletterStats() {
       setIsLoading(false);
     }
   }, [client]);
-  (0, import_react13.useEffect)(() => {
+  (0, import_react14.useEffect)(() => {
     fetchStats();
   }, [fetchStats]);
   return { data, isLoading, error, refetch: fetchStats };
 }
 function useAdminBlogSettings() {
   const { client } = useFoxPixelContext();
-  const [data, setData] = (0, import_react13.useState)(null);
-  const [isLoading, setIsLoading] = (0, import_react13.useState)(true);
-  const [error, setError] = (0, import_react13.useState)(null);
-  const fetchSettings = (0, import_react13.useCallback)(async () => {
+  const [data, setData] = (0, import_react14.useState)(null);
+  const [isLoading, setIsLoading] = (0, import_react14.useState)(true);
+  const [error, setError] = (0, import_react14.useState)(null);
+  const fetchSettings = (0, import_react14.useCallback)(async () => {
     try {
       setIsLoading(true);
       setError(null);
@@ -1594,7 +1812,7 @@ function useAdminBlogSettings() {
       setIsLoading(false);
     }
   }, [client]);
-  (0, import_react13.useEffect)(() => {
+  (0, import_react14.useEffect)(() => {
     fetchSettings();
   }, [fetchSettings]);
   const update = async (settings) => {
@@ -1611,10 +1829,10 @@ function useAdminBlogSettings() {
 }
 function useAdminBlogAnalytics() {
   const { client } = useFoxPixelContext();
-  const [data, setData] = (0, import_react13.useState)(null);
-  const [isLoading, setIsLoading] = (0, import_react13.useState)(true);
-  const [error, setError] = (0, import_react13.useState)(null);
-  const fetchAnalytics = (0, import_react13.useCallback)(async () => {
+  const [data, setData] = (0, import_react14.useState)(null);
+  const [isLoading, setIsLoading] = (0, import_react14.useState)(true);
+  const [error, setError] = (0, import_react14.useState)(null);
+  const fetchAnalytics = (0, import_react14.useCallback)(async () => {
     try {
       setIsLoading(true);
       setError(null);
@@ -1626,7 +1844,7 @@ function useAdminBlogAnalytics() {
       setIsLoading(false);
     }
   }, [client]);
-  (0, import_react13.useEffect)(() => {
+  (0, import_react14.useEffect)(() => {
     fetchAnalytics();
   }, [fetchAnalytics]);
   return { data, isLoading, error, refetch: fetchAnalytics };
@@ -1675,6 +1893,7 @@ function getBlogPostSchemaLd(post, options) {
   ProtectedRoute,
   SITE_CONTENT_QUERY_KEY,
   getBlogPostSchemaLd,
+  prefetchSiteContent,
   useAdminBlogAnalytics,
   useAdminBlogCategories,
   useAdminBlogComments,