@foxpixel/react 0.1.1 → 0.2.1

package/dist/index.mjs

@@ -1,5 +1,5 @@
 // src/context/FoxPixelContext.tsx
-import { createContext, useContext, useMemo } from "react";
+import React, { createContext, useContext, useMemo } from "react";
 
 // src/client/http.ts
 import axios from "axios";
@@ -111,15 +111,21 @@ var FoxPixelHttpClient = class {
 
 // src/context/FoxPixelContext.tsx
 import { jsx } from "react/jsx-runtime";
+if (!React || typeof React.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 = createContext(null);
-function FoxPixelProvider({ children, config = {} }) {
+function FoxPixelProvider({ children, config = {}, queryClient }) {
   const client = useMemo(() => {
     return new FoxPixelHttpClient(config);
   }, [config.apiUrl, config.apiKey, config.tenantId]);
   const value = useMemo(() => ({
     client,
-    config
-  }), [client, config]);
+    config,
+    queryClient: queryClient ?? null
+  }), [client, config, queryClient]);
   return /* @__PURE__ */ jsx(FoxPixelContext.Provider, { value, children });
 }
 function useFoxPixelContext() {
@@ -238,7 +244,8 @@ function AuthProvider({
     logout,
     register,
     updateProfile,
-    refetch: fetchCurrentUser
+    refetch: fetchCurrentUser,
+    hasPermission: (permission) => user !== null && permission === "site:content:update"
   };
   return /* @__PURE__ */ jsx2(AuthContext.Provider, { value, children });
 }
@@ -344,13 +351,473 @@ function withAuth(Component, options = {}) {
   };
 }
 
+// src/components/Editable.tsx
+import { createElement, useCallback as useCallback3, useState as useState7 } from "react";
+
+// src/hooks/useEditMode.ts
+import { useEffect as useEffect5, useState as useState5, useCallback as useCallback2 } from "react";
+var SITE_CONTENT_QUERY_KEY = "siteContent";
+function useEditMode() {
+  const [isEditMode, setIsEditMode] = useState5(false);
+  useEffect5(() => {
+    if (typeof window === "undefined") return;
+    const params = new URLSearchParams(window.location.search);
+    setIsEditMode(params.get("edit-mode") === "true");
+  }, []);
+  return isEditMode;
+}
+function useEditModeMessaging() {
+  const ctx = useFoxPixelContext();
+  const queryClient = ctx?.queryClient ?? null;
+  const isEditMode = useEditMode();
+  useEffect5(() => {
+    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) 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);
+  }, [isEditMode, queryClient]);
+  return isEditMode;
+}
+function useSendEditRequest() {
+  const isEditMode = useEditMode();
+  return useCallback2(
+    (contentKey, currentValue, contentType = "text", section, description) => {
+      if (!isEditMode) return;
+      if (typeof window !== "undefined" && window.parent !== window) {
+        window.parent.postMessage(
+          {
+            type: "FOXPIXEL_EDIT_CONTENT",
+            payload: {
+              contentKey,
+              currentValue,
+              contentType,
+              section,
+              description
+            }
+          },
+          "*"
+        );
+      }
+    },
+    [isEditMode]
+  );
+}
+
+// src/hooks/useSiteContentQuery.ts
+import { useState as useState6, useEffect as useEffect6, useRef } from "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, queryClient } = useFoxPixelContext();
+  const [state, setState] = useState6(() => {
+    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 = useRef(contentKey);
+  contentKeyRef.current = contentKey;
+  useEffect6(() => {
+    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(key)}`
+        );
+        if (!content) return null;
+        return {
+          value: content.value ?? "",
+          contentType: content.contentType ?? "TEXT"
+        };
+      } catch (err) {
+        const status = err?.response?.status;
+        if (status === 404) return null;
+        throw err;
+      }
+    };
+    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
+import sanitizeHtmlLib from "sanitize-html";
+var DEFAULT_ALLOWED_TAGS = [
+  "p",
+  "br",
+  "strong",
+  "em",
+  "u",
+  "s",
+  "a",
+  "ul",
+  "ol",
+  "li",
+  "h1",
+  "h2",
+  "h3",
+  "h4",
+  "h5",
+  "h6",
+  "blockquote",
+  "code",
+  "pre",
+  "span",
+  "div",
+  "img",
+  "table",
+  "thead",
+  "tbody",
+  "tr",
+  "th",
+  "td"
+];
+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 sanitizeHtmlLib(html, {
+    allowedTags: DEFAULT_ALLOWED_TAGS,
+    allowedAttributes: DEFAULT_ALLOWED_ATTR
+  });
+}
+
+// src/utils/cn.ts
+function cn(...args) {
+  return args.filter(Boolean).join(" ");
+}
+
+// src/components/Editable.tsx
+import { jsx as jsx6, jsxs } from "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,
+  as = "span",
+  multiline = false,
+  className
+}) {
+  const [isHovered, setIsHovered] = useState7(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 = useCallback3(
+    (e) => {
+      if (isEditMode) {
+        e.preventDefault();
+        e.stopPropagation();
+        sendEditRequest(
+          contentKey,
+          value,
+          contentType?.toLowerCase() || "text",
+          section
+        );
+      }
+    },
+    [isEditMode, contentKey, value, contentType, section, sendEditRequest]
+  );
+  if (isLoading) {
+    return createElement(as, {
+      className: cn(
+        "animate-pulse bg-muted rounded",
+        multiline ? "h-20" : "h-6",
+        "inline-block min-w-[100px]",
+        className
+      ),
+      "aria-busy": true,
+      "aria-label": "Loading content..."
+    });
+  }
+  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__ */ jsx6(
+    "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 createElement(
+      "span",
+      { style: editModeWrapperStyle, ...hoverHandlers },
+      createElement(as, {
+        className,
+        "data-content-key": contentKey,
+        "data-editable": isEditMode ? "true" : void 0,
+        onClick: isEditMode ? handleClick : void 0,
+        dangerouslySetInnerHTML: { __html: safeBr }
+      }),
+      tooltipSpan
+    );
+  }
+  return createElement(
+    "span",
+    { style: editModeWrapperStyle, ...hoverHandlers },
+    createElement(
+      as,
+      {
+        className,
+        "data-content-key": contentKey,
+        "data-editable": isEditMode ? "true" : void 0,
+        onClick: isEditMode ? handleClick : void 0
+      },
+      value
+    ),
+    tooltipSpan
+  );
+}
+function EditableHTML({
+  contentKey,
+  defaultValue,
+  as = "div",
+  className
+}) {
+  const [isHovered, setIsHovered] = useState7(false);
+  const isEditMode = useEditModeMessaging();
+  const sendEditRequest = useSendEditRequest();
+  const { value, isLoading } = useSiteContentQuery(contentKey, {
+    defaultValue
+  });
+  const section = contentKey.includes(".") ? contentKey.split(".")[0] : void 0;
+  const handleClick = useCallback3(
+    (e) => {
+      if (isEditMode) {
+        e.preventDefault();
+        e.stopPropagation();
+        sendEditRequest(contentKey, value, "html", section);
+      }
+    },
+    [isEditMode, contentKey, value, section, sendEditRequest]
+  );
+  if (isLoading) {
+    return createElement(as, {
+      className: cn("animate-pulse bg-muted rounded h-32", className),
+      "aria-busy": true
+    });
+  }
+  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);
+  const hoverHandlers = isEditMode ? { onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false) } : {};
+  return createElement(
+    "div",
+    { style: wrapperStyle, ...hoverHandlers },
+    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__ */ jsx6(
+      "span",
+      {
+        style: {
+          ...EDIT_MODE_TOOLTIP_STYLE,
+          top: "-24px",
+          opacity: isHovered ? 1 : 0
+        },
+        "aria-hidden": true,
+        children: "Click to edit"
+      }
+    )
+  );
+}
+function EditableImage({
+  contentKey,
+  defaultValue,
+  alt,
+  className,
+  width,
+  height,
+  priority = false
+}) {
+  const [isHovered, setIsHovered] = useState7(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 = useCallback3(
+    (e) => {
+      if (isEditMode) {
+        e.preventDefault();
+        e.stopPropagation();
+        sendEditRequest(contentKey, src, "image", section);
+      }
+    },
+    [isEditMode, contentKey, src, section, sendEditRequest]
+  );
+  if (isLoading) {
+    return /* @__PURE__ */ jsx6(
+      "div",
+      {
+        className: cn("animate-pulse bg-muted rounded", className),
+        style: { width, height },
+        "aria-busy": "true"
+      }
+    );
+  }
+  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__ */ jsxs("div", { style: wrapperStyle, ...hoverHandlers, children: [
+    /* @__PURE__ */ jsx6(
+      "img",
+      {
+        src,
+        alt,
+        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
+      }
+    ),
+    isEditMode && /* @__PURE__ */ jsx6(
+      "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
-import { useState as useState5, useEffect as useEffect5 } from "react";
+import { useState as useState8, useEffect as useEffect7 } from "react";
 function useServices(options = {}) {
   const { client } = useFoxPixelContext();
-  const [services, setServices] = useState5(null);
-  const [isLoading, setIsLoading] = useState5(true);
-  const [error, setError] = useState5(null);
+  const [services, setServices] = useState8(null);
+  const [isLoading, setIsLoading] = useState8(true);
+  const [error, setError] = useState8(null);
   const fetchServices = async () => {
     try {
       setIsLoading(true);
@@ -368,7 +835,7 @@ function useServices(options = {}) {
       setIsLoading(false);
     }
   };
-  useEffect5(() => {
+  useEffect7(() => {
     fetchServices();
   }, [options.category, options.active]);
   return {
@@ -380,11 +847,11 @@ function useServices(options = {}) {
 }
 
 // src/hooks/useLeadCapture.ts
-import { useState as useState6 } from "react";
+import { useState as useState9 } from "react";
 function useLeadCapture() {
   const { client } = useFoxPixelContext();
-  const [isLoading, setIsLoading] = useState6(false);
-  const [error, setError] = useState6(null);
+  const [isLoading, setIsLoading] = useState9(false);
+  const [error, setError] = useState9(null);
   const captureLead = async (data) => {
     try {
       setIsLoading(true);
@@ -407,11 +874,11 @@ function useLeadCapture() {
 }
 
 // src/hooks/useContactCapture.ts
-import { useState as useState7 } from "react";
+import { useState as useState10 } from "react";
 function useContactCapture() {
   const { client } = useFoxPixelContext();
-  const [isLoading, setIsLoading] = useState7(false);
-  const [error, setError] = useState7(null);
+  const [isLoading, setIsLoading] = useState10(false);
+  const [error, setError] = useState10(null);
   const captureContact = async (data) => {
     try {
       setIsLoading(true);
@@ -433,13 +900,174 @@ function useContactCapture() {
   };
 }
 
+// src/hooks/useSiteContent.ts
+import { useState as useState11, useEffect as useEffect8, useCallback as useCallback4 } from "react";
+function useSiteContent(contentKey, options = {}) {
+  const { defaultValue = "", fetchOnMount = true } = options;
+  const { client } = useFoxPixelContext();
+  const { user, hasPermission } = useAuth();
+  const [data, setData] = useState11(null);
+  const [isLoading, setIsLoading] = useState11(fetchOnMount);
+  const [error, setError] = useState11(null);
+  const canEdit = user !== null && hasPermission("site:content:update");
+  const fetchContent = useCallback4(async () => {
+    try {
+      setIsLoading(true);
+      setError(null);
+      const content = await client.get(
+        `/api/site/content/${encodeURIComponent(contentKey)}`
+      );
+      setData(content);
+    } catch (err) {
+      if (err?.status === 404) {
+        setData(null);
+      } else {
+        setError(err);
+      }
+    } finally {
+      setIsLoading(false);
+    }
+  }, [client, contentKey]);
+  const updateContent = useCallback4(async (newValue) => {
+    try {
+      setError(null);
+      const updated = await client.put(
+        `/api/site/content/${encodeURIComponent(contentKey)}`,
+        { value: newValue }
+      );
+      setData(updated);
+    } catch (err) {
+      setError(err);
+      throw err;
+    }
+  }, [client, contentKey]);
+  useEffect8(() => {
+    if (fetchOnMount) {
+      fetchContent();
+    }
+  }, [contentKey, fetchOnMount]);
+  const value = data?.value ?? defaultValue;
+  return {
+    data,
+    value,
+    isLoading,
+    error,
+    canEdit,
+    update: updateContent,
+    refetch: fetchContent
+  };
+}
+function useSiteContents(contentKeys, options = {}) {
+  const { defaults = {} } = options;
+  const { client } = useFoxPixelContext();
+  const [data, setData] = useState11({});
+  const [isLoading, setIsLoading] = useState11(true);
+  const [error, setError] = useState11(null);
+  const fetchContents = useCallback4(async () => {
+    if (contentKeys.length === 0) {
+      setData({});
+      setIsLoading(false);
+      return;
+    }
+    try {
+      setIsLoading(true);
+      setError(null);
+      const contents = await client.post(
+        "/api/site/content/batch",
+        contentKeys
+      );
+      setData(contents);
+    } catch (err) {
+      setError(err);
+    } finally {
+      setIsLoading(false);
+    }
+  }, [client, contentKeys.join(",")]);
+  useEffect8(() => {
+    fetchContents();
+  }, [fetchContents]);
+  const getValue = useCallback4((key, defaultValue) => {
+    const content = data[key];
+    if (content?.value) {
+      return content.value;
+    }
+    return defaultValue ?? defaults[key] ?? "";
+  }, [data, defaults]);
+  return {
+    data,
+    getValue,
+    isLoading,
+    error,
+    refetch: fetchContents
+  };
+}
+function useSiteContentSection(section) {
+  const { client } = useFoxPixelContext();
+  const [contents, setContents] = useState11([]);
+  const [isLoading, setIsLoading] = useState11(true);
+  const [error, setError] = useState11(null);
+  const fetchContents = useCallback4(async () => {
+    try {
+      setIsLoading(true);
+      setError(null);
+      const data = await client.get(
+        `/api/site/content/section/${encodeURIComponent(section)}`
+      );
+      setContents(data);
+    } catch (err) {
+      setError(err);
+    } finally {
+      setIsLoading(false);
+    }
+  }, [client, section]);
+  useEffect8(() => {
+    fetchContents();
+  }, [fetchContents]);
+  return {
+    contents,
+    isLoading,
+    error,
+    refetch: fetchContents
+  };
+}
+
+// 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
-import { useState as useState8, useEffect as useEffect6 } from "react";
+import { useState as useState12, useEffect as useEffect9 } from "react";
 function useBlogPosts(options = {}) {
   const { client } = useFoxPixelContext();
-  const [data, setData] = useState8(null);
-  const [isLoading, setIsLoading] = useState8(true);
-  const [error, setError] = useState8(null);
+  const [data, setData] = useState12(null);
+  const [isLoading, setIsLoading] = useState12(true);
+  const [error, setError] = useState12(null);
   const page = options.page ?? 0;
   const limit = options.limit ?? 10;
   const fetchPosts = async () => {
@@ -459,7 +1087,7 @@ function useBlogPosts(options = {}) {
       setIsLoading(false);
     }
   };
-  useEffect6(() => {
+  useEffect9(() => {
     fetchPosts();
   }, [page, limit]);
   return {
@@ -471,9 +1099,9 @@ function useBlogPosts(options = {}) {
 }
 function useBlogPost(slug) {
   const { client } = useFoxPixelContext();
-  const [data, setData] = useState8(null);
-  const [isLoading, setIsLoading] = useState8(!!slug);
-  const [error, setError] = useState8(null);
+  const [data, setData] = useState12(null);
+  const [isLoading, setIsLoading] = useState12(!!slug);
+  const [error, setError] = useState12(null);
   const fetchPost = async () => {
     if (!slug) {
       setData(null);
@@ -492,7 +1120,7 @@ function useBlogPost(slug) {
       setIsLoading(false);
     }
   };
-  useEffect6(() => {
+  useEffect9(() => {
     fetchPost();
   }, [slug]);
   return {
@@ -504,9 +1132,9 @@ function useBlogPost(slug) {
 }
 function useBlogCategories() {
   const { client } = useFoxPixelContext();
-  const [data, setData] = useState8(null);
-  const [isLoading, setIsLoading] = useState8(true);
-  const [error, setError] = useState8(null);
+  const [data, setData] = useState12(null);
+  const [isLoading, setIsLoading] = useState12(true);
+  const [error, setError] = useState12(null);
   const fetchCategories = async () => {
     try {
       setIsLoading(true);
@@ -520,7 +1148,7 @@ function useBlogCategories() {
       setIsLoading(false);
     }
   };
-  useEffect6(() => {
+  useEffect9(() => {
     fetchCategories();
   }, []);
   return {
@@ -532,9 +1160,9 @@ function useBlogCategories() {
 }
 function useBlogTags() {
   const { client } = useFoxPixelContext();
-  const [data, setData] = useState8(null);
-  const [isLoading, setIsLoading] = useState8(true);
-  const [error, setError] = useState8(null);
+  const [data, setData] = useState12(null);
+  const [isLoading, setIsLoading] = useState12(true);
+  const [error, setError] = useState12(null);
   const fetchTags = async () => {
     try {
       setIsLoading(true);
@@ -548,7 +1176,7 @@ function useBlogTags() {
       setIsLoading(false);
     }
   };
-  useEffect6(() => {
+  useEffect9(() => {
     fetchTags();
   }, []);
   return {
@@ -560,9 +1188,9 @@ function useBlogTags() {
 }
 function useBlogComments(slug) {
   const { client } = useFoxPixelContext();
-  const [data, setData] = useState8(null);
-  const [isLoading, setIsLoading] = useState8(!!slug);
-  const [error, setError] = useState8(null);
+  const [data, setData] = useState12(null);
+  const [isLoading, setIsLoading] = useState12(!!slug);
+  const [error, setError] = useState12(null);
   const fetchComments = async () => {
     if (!slug) {
       setData(null);
@@ -583,7 +1211,7 @@ function useBlogComments(slug) {
       setIsLoading(false);
     }
   };
-  useEffect6(() => {
+  useEffect9(() => {
     fetchComments();
   }, [slug]);
   return {
@@ -595,8 +1223,8 @@ function useBlogComments(slug) {
 }
 function useBlogCommentSubmit(slug) {
   const { client } = useFoxPixelContext();
-  const [isSubmitting, setIsSubmitting] = useState8(false);
-  const [error, setError] = useState8(null);
+  const [isSubmitting, setIsSubmitting] = useState12(false);
+  const [error, setError] = useState12(null);
   const submit = async (payload) => {
     if (!slug) return null;
     try {
@@ -624,9 +1252,9 @@ function useBlogCommentSubmit(slug) {
 }
 function useBlogFeaturedPosts(limit = 6) {
   const { client } = useFoxPixelContext();
-  const [data, setData] = useState8(null);
-  const [isLoading, setIsLoading] = useState8(true);
-  const [error, setError] = useState8(null);
+  const [data, setData] = useState12(null);
+  const [isLoading, setIsLoading] = useState12(true);
+  const [error, setError] = useState12(null);
   const fetchFeatured = async () => {
     try {
       setIsLoading(true);
@@ -644,7 +1272,7 @@ function useBlogFeaturedPosts(limit = 6) {
       setIsLoading(false);
     }
   };
-  useEffect6(() => {
+  useEffect9(() => {
     fetchFeatured();
   }, [limit]);
   return {
@@ -656,9 +1284,9 @@ function useBlogFeaturedPosts(limit = 6) {
 }
 function useNewsletterSubscribe() {
   const { client } = useFoxPixelContext();
-  const [isSubmitting, setIsSubmitting] = useState8(false);
-  const [error, setError] = useState8(null);
-  const [success, setSuccess] = useState8(false);
+  const [isSubmitting, setIsSubmitting] = useState12(false);
+  const [error, setError] = useState12(null);
+  const [success, setSuccess] = useState12(false);
   const subscribe = async (payload) => {
     try {
       setIsSubmitting(true);
@@ -691,9 +1319,9 @@ function useNewsletterSubscribe() {
 }
 function useNewsletterUnsubscribe() {
   const { client } = useFoxPixelContext();
-  const [isSubmitting, setIsSubmitting] = useState8(false);
-  const [error, setError] = useState8(null);
-  const [success, setSuccess] = useState8(false);
+  const [isSubmitting, setIsSubmitting] = useState12(false);
+  const [error, setError] = useState12(null);
+  const [success, setSuccess] = useState12(false);
   const unsubscribe = async (email) => {
     try {
       setIsSubmitting(true);
@@ -711,8 +1339,26 @@ function useNewsletterUnsubscribe() {
       setIsSubmitting(false);
     }
   };
+  const unsubscribeByToken = async (token) => {
+    try {
+      setIsSubmitting(true);
+      setError(null);
+      setSuccess(false);
+      await client.get("/api/v1/blog/newsletter/unsubscribe", {
+        params: { token }
+      });
+      setSuccess(true);
+      return true;
+    } catch (err) {
+      setError(err);
+      return false;
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
   return {
     unsubscribe,
+    unsubscribeByToken,
     isSubmitting,
     error,
     success
@@ -720,15 +1366,15 @@ function useNewsletterUnsubscribe() {
 }
 
 // src/blog/admin-hooks.ts
-import { useState as useState9, useEffect as useEffect7, useCallback as useCallback2 } from "react";
+import { useState as useState13, useEffect as useEffect10, useCallback as useCallback5 } from "react";
 function useAdminBlogPosts(options = {}) {
   const { client } = useFoxPixelContext();
-  const [data, setData] = useState9(null);
-  const [isLoading, setIsLoading] = useState9(true);
-  const [error, setError] = useState9(null);
+  const [data, setData] = useState13(null);
+  const [isLoading, setIsLoading] = useState13(true);
+  const [error, setError] = useState13(null);
   const page = options.page ?? 0;
   const size = options.size ?? 20;
-  const fetchPosts = useCallback2(async () => {
+  const fetchPosts = useCallback5(async () => {
     try {
       setIsLoading(true);
       setError(null);
@@ -743,17 +1389,17 @@ function useAdminBlogPosts(options = {}) {
       setIsLoading(false);
     }
   }, [client, page, size]);
-  useEffect7(() => {
+  useEffect10(() => {
     fetchPosts();
   }, [fetchPosts]);
   return { data, isLoading, error, refetch: fetchPosts };
 }
 function useAdminBlogPost(id) {
   const { client } = useFoxPixelContext();
-  const [data, setData] = useState9(null);
-  const [isLoading, setIsLoading] = useState9(!!id);
-  const [error, setError] = useState9(null);
-  const fetchPost = useCallback2(async () => {
+  const [data, setData] = useState13(null);
+  const [isLoading, setIsLoading] = useState13(!!id);
+  const [error, setError] = useState13(null);
+  const fetchPost = useCallback5(async () => {
     if (!id) {
       setData(null);
       setIsLoading(false);
@@ -770,15 +1416,15 @@ function useAdminBlogPost(id) {
       setIsLoading(false);
     }
   }, [client, id]);
-  useEffect7(() => {
+  useEffect10(() => {
     fetchPost();
   }, [fetchPost]);
   return { data, isLoading, error, refetch: fetchPost };
 }
 function useAdminBlogPostMutations() {
   const { client } = useFoxPixelContext();
-  const [isLoading, setIsLoading] = useState9(false);
-  const [error, setError] = useState9(null);
+  const [isLoading, setIsLoading] = useState13(false);
+  const [error, setError] = useState13(null);
   const create = async (payload) => {
     try {
       setIsLoading(true);
@@ -822,10 +1468,10 @@ function useAdminBlogPostMutations() {
 }
 function useAdminBlogCategories() {
   const { client } = useFoxPixelContext();
-  const [data, setData] = useState9(null);
-  const [isLoading, setIsLoading] = useState9(true);
-  const [error, setError] = useState9(null);
-  const fetchCategories = useCallback2(async () => {
+  const [data, setData] = useState13(null);
+  const [isLoading, setIsLoading] = useState13(true);
+  const [error, setError] = useState13(null);
+  const fetchCategories = useCallback5(async () => {
     try {
       setIsLoading(true);
       setError(null);
@@ -837,7 +1483,7 @@ function useAdminBlogCategories() {
       setIsLoading(false);
     }
   }, [client]);
-  useEffect7(() => {
+  useEffect10(() => {
     fetchCategories();
   }, [fetchCategories]);
   const create = async (payload) => {
@@ -874,10 +1520,10 @@ function useAdminBlogCategories() {
 }
 function useAdminBlogTags() {
   const { client } = useFoxPixelContext();
-  const [data, setData] = useState9(null);
-  const [isLoading, setIsLoading] = useState9(true);
-  const [error, setError] = useState9(null);
-  const fetchTags = useCallback2(async () => {
+  const [data, setData] = useState13(null);
+  const [isLoading, setIsLoading] = useState13(true);
+  const [error, setError] = useState13(null);
+  const fetchTags = useCallback5(async () => {
     try {
       setIsLoading(true);
       setError(null);
@@ -889,7 +1535,7 @@ function useAdminBlogTags() {
       setIsLoading(false);
     }
   }, [client]);
-  useEffect7(() => {
+  useEffect10(() => {
     fetchTags();
   }, [fetchTags]);
   const create = async (payload) => {
@@ -926,11 +1572,11 @@ function useAdminBlogTags() {
 }
 function useAdminBlogComments(options = {}) {
   const { client } = useFoxPixelContext();
-  const [data, setData] = useState9(null);
-  const [isLoading, setIsLoading] = useState9(true);
-  const [error, setError] = useState9(null);
+  const [data, setData] = useState13(null);
+  const [isLoading, setIsLoading] = useState13(true);
+  const [error, setError] = useState13(null);
   const { status, postId, page = 0, size = 20 } = options;
-  const fetchComments = useCallback2(async () => {
+  const fetchComments = useCallback5(async () => {
     try {
       setIsLoading(true);
       setError(null);
@@ -947,7 +1593,7 @@ function useAdminBlogComments(options = {}) {
       setIsLoading(false);
     }
   }, [client, status, postId, page, size]);
-  useEffect7(() => {
+  useEffect10(() => {
     fetchComments();
   }, [fetchComments]);
   const updateStatus = async (id, newStatus) => {
@@ -974,11 +1620,11 @@ function useAdminBlogComments(options = {}) {
 }
 function useAdminNewsletterSubscribers(options = {}) {
   const { client } = useFoxPixelContext();
-  const [data, setData] = useState9(null);
-  const [isLoading, setIsLoading] = useState9(true);
-  const [error, setError] = useState9(null);
+  const [data, setData] = useState13(null);
+  const [isLoading, setIsLoading] = useState13(true);
+  const [error, setError] = useState13(null);
   const { status, page = 0, size = 20 } = options;
-  const fetchSubscribers = useCallback2(async () => {
+  const fetchSubscribers = useCallback5(async () => {
     try {
       setIsLoading(true);
       setError(null);
@@ -994,7 +1640,7 @@ function useAdminNewsletterSubscribers(options = {}) {
       setIsLoading(false);
     }
   }, [client, status, page, size]);
-  useEffect7(() => {
+  useEffect10(() => {
     fetchSubscribers();
   }, [fetchSubscribers]);
   const remove = async (id) => {
@@ -1011,10 +1657,10 @@ function useAdminNewsletterSubscribers(options = {}) {
 }
 function useAdminNewsletterStats() {
   const { client } = useFoxPixelContext();
-  const [data, setData] = useState9(null);
-  const [isLoading, setIsLoading] = useState9(true);
-  const [error, setError] = useState9(null);
-  const fetchStats = useCallback2(async () => {
+  const [data, setData] = useState13(null);
+  const [isLoading, setIsLoading] = useState13(true);
+  const [error, setError] = useState13(null);
+  const fetchStats = useCallback5(async () => {
     try {
       setIsLoading(true);
       setError(null);
@@ -1026,17 +1672,17 @@ function useAdminNewsletterStats() {
       setIsLoading(false);
     }
   }, [client]);
-  useEffect7(() => {
+  useEffect10(() => {
     fetchStats();
   }, [fetchStats]);
   return { data, isLoading, error, refetch: fetchStats };
 }
 function useAdminBlogSettings() {
   const { client } = useFoxPixelContext();
-  const [data, setData] = useState9(null);
-  const [isLoading, setIsLoading] = useState9(true);
-  const [error, setError] = useState9(null);
-  const fetchSettings = useCallback2(async () => {
+  const [data, setData] = useState13(null);
+  const [isLoading, setIsLoading] = useState13(true);
+  const [error, setError] = useState13(null);
+  const fetchSettings = useCallback5(async () => {
     try {
       setIsLoading(true);
       setError(null);
@@ -1048,7 +1694,7 @@ function useAdminBlogSettings() {
       setIsLoading(false);
     }
   }, [client]);
-  useEffect7(() => {
+  useEffect10(() => {
     fetchSettings();
   }, [fetchSettings]);
   const update = async (settings) => {
@@ -1065,10 +1711,10 @@ function useAdminBlogSettings() {
 }
 function useAdminBlogAnalytics() {
   const { client } = useFoxPixelContext();
-  const [data, setData] = useState9(null);
-  const [isLoading, setIsLoading] = useState9(true);
-  const [error, setError] = useState9(null);
-  const fetchAnalytics = useCallback2(async () => {
+  const [data, setData] = useState13(null);
+  const [isLoading, setIsLoading] = useState13(true);
+  const [error, setError] = useState13(null);
+  const fetchAnalytics = useCallback5(async () => {
     try {
       setIsLoading(true);
       setError(null);
@@ -1080,7 +1726,7 @@ function useAdminBlogAnalytics() {
       setIsLoading(false);
     }
   }, [client]);
-  useEffect7(() => {
+  useEffect10(() => {
     fetchAnalytics();
   }, [fetchAnalytics]);
   return { data, isLoading, error, refetch: fetchAnalytics };
@@ -1119,11 +1765,16 @@ function getBlogPostSchemaLd(post, options) {
 }
 export {
   AuthProvider,
+  Editable,
+  EditableHTML,
+  EditableImage,
   FoxPixelHttpClient,
   FoxPixelProvider,
   GuestOnlyRoute,
   ProtectedRoute,
+  SITE_CONTENT_QUERY_KEY,
   getBlogPostSchemaLd,
+  prefetchSiteContent,
   useAdminBlogAnalytics,
   useAdminBlogCategories,
   useAdminBlogComments,
@@ -1143,11 +1794,18 @@ export {
   useBlogPosts,
   useBlogTags,
   useContactCapture,
+  useEditMode,
+  useEditModeMessaging,
   useFoxPixelContext,
   useLeadCapture,
   useNewsletterSubscribe,
   useNewsletterUnsubscribe,
+  useSendEditRequest,
   useServices,
+  useSiteContent,
+  useSiteContentQuery,
+  useSiteContentSection,
+  useSiteContents,
   withAuth
 };
 //# sourceMappingURL=index.mjs.map