@geenius/seo 0.1.0 → 0.3.0

package/packages/react/dist/index.js

@@ -0,0 +1,567 @@
+import { calcSEOScore, generateSitemapXml, buildCanonical, breadcrumbSchema, articleSchema } from '@geenius/seo-shared';
+export * from '@geenius/seo-shared';
+import { createContext, useContext, useState, useCallback, useEffect, useMemo } from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+// src/index.ts
+var SeoContext = createContext(null);
+function SeoProvider({ config, children }) {
+  return /* @__PURE__ */ jsx(SeoContext.Provider, { value: { config }, children });
+}
+function useSEOContext() {
+  const ctx = useContext(SeoContext);
+  if (!ctx) {
+    throw new Error("useSEOContext must be used within a <SeoProvider>");
+  }
+  return ctx;
+}
+function useSEO(options) {
+  const [meta, setMeta] = useState(options?.initialMeta ?? null);
+  const [isLoading, setIsLoading] = useState(false);
+  const updateMeta = useCallback((newMeta) => {
+    setMeta(newMeta);
+  }, []);
+  useEffect(() => {
+    if (!options?.path) return;
+    setIsLoading(false);
+  }, [options?.path]);
+  return { meta, updateMeta, isLoading };
+}
+function useSEOAdmin(options) {
+  const [pages, setPages] = useState(options?.initialPages ?? []);
+  const [isLoading, setIsLoading] = useState(false);
+  useEffect(() => {
+    if (options?.initialPages) {
+      setPages(options.initialPages);
+    }
+  }, [options?.initialPages]);
+  const upsertMeta = useCallback(async (path, meta) => {
+    if (options?.onUpsert) {
+      await options.onUpsert(path, meta);
+    }
+    setPages((prev) => {
+      const existing = prev.findIndex((p) => p.path === path);
+      if (existing >= 0) {
+        const next = [...prev];
+        next[existing] = { path, meta };
+        return next;
+      }
+      return [...prev, { path, meta }];
+    });
+  }, [options?.onUpsert]);
+  const deleteMeta = useCallback(async (path) => {
+    if (options?.onDelete) {
+      await options.onDelete(path);
+    }
+    setPages((prev) => prev.filter((p) => p.path !== path));
+  }, [options?.onDelete]);
+  return { pages, upsertMeta, deleteMeta, isLoading };
+}
+function useSEOScore(meta) {
+  return useMemo(() => calcSEOScore(meta), [meta]);
+}
+function useSitemap(entries) {
+  const xml = useMemo(() => generateSitemapXml(entries), [entries]);
+  return { xml };
+}
+function useCanonical(path) {
+  const { config } = useSEOContext();
+  return useMemo(() => {
+    const resolvedPath = path ?? (typeof window !== "undefined" ? window.location.pathname : "/");
+    return buildCanonical(resolvedPath, config.siteUrl);
+  }, [path, config.siteUrl]);
+}
+function useStructuredData(data) {
+  useEffect(() => {
+    if (!data || Array.isArray(data) && data.length === 0) return;
+    const items = Array.isArray(data) ? data : [data];
+    const scripts = [];
+    for (const item of items) {
+      const script = document.createElement("script");
+      script.type = "application/ld+json";
+      script.textContent = JSON.stringify(item);
+      document.head.appendChild(script);
+      scripts.push(script);
+    }
+    return () => {
+      for (const script of scripts) {
+        script.remove();
+      }
+    };
+  }, [data]);
+}
+function SEOHead({ meta }) {
+  useEffect(() => {
+    document.title = meta.title;
+    const setMetaTag = (name, content, isProperty = false) => {
+      let tag = document.querySelector(
+        `meta[${isProperty ? "property" : "name"}="${name}"]`
+      );
+      if (!tag) {
+        tag = document.createElement("meta");
+        isProperty ? tag.setAttribute("property", name) : tag.setAttribute("name", name);
+        document.head.appendChild(tag);
+      }
+      tag.content = content;
+    };
+    setMetaTag("description", meta.description);
+    if (meta.keywords.length > 0) {
+      setMetaTag("keywords", meta.keywords.join(", "));
+    }
+    if (meta.robots) {
+      setMetaTag("robots", meta.robots);
+    }
+    setMetaTag("og:title", meta.og.title, true);
+    setMetaTag("og:description", meta.og.description, true);
+    if (meta.og.image) {
+      setMetaTag("og:image", meta.og.image, true);
+      if (meta.og.imageAlt) {
+        setMetaTag("og:image:alt", meta.og.imageAlt, true);
+      }
+    }
+    setMetaTag("og:type", meta.og.type, true);
+    setMetaTag("og:url", meta.og.url, true);
+    if (meta.og.siteName) {
+      setMetaTag("og:site_name", meta.og.siteName, true);
+    }
+    setMetaTag("twitter:card", meta.twitter.card);
+    setMetaTag("twitter:title", meta.twitter.title);
+    setMetaTag("twitter:description", meta.twitter.description);
+    if (meta.twitter.image) {
+      setMetaTag("twitter:image", meta.twitter.image);
+    }
+    if (meta.twitter.creator) {
+      setMetaTag("twitter:creator", meta.twitter.creator);
+    }
+    if (meta.canonical) {
+      let canonicalLink = document.querySelector('link[rel="canonical"]');
+      if (!canonicalLink) {
+        canonicalLink = document.createElement("link");
+        canonicalLink.rel = "canonical";
+        document.head.appendChild(canonicalLink);
+      }
+      canonicalLink.href = meta.canonical;
+    }
+    if (meta.alternates) {
+      Object.entries(meta.alternates).forEach(([lang, url]) => {
+        let altLink = document.querySelector(
+          `link[rel="alternate"][hreflang="${lang}"]`
+        );
+        if (!altLink) {
+          altLink = document.createElement("link");
+          altLink.rel = "alternate";
+          altLink.setAttribute("hreflang", lang);
+          document.head.appendChild(altLink);
+        }
+        altLink.href = url;
+      });
+    }
+    if (meta.jsonLd && meta.jsonLd.length > 0) {
+      meta.jsonLd.forEach((schema) => {
+        let script = document.querySelector('script[type="application/ld+json"]');
+        if (!script) {
+          script = document.createElement("script");
+          script.type = "application/ld+json";
+          document.head.appendChild(script);
+        }
+        script.textContent = JSON.stringify(schema);
+      });
+    }
+  }, [meta]);
+  return null;
+}
+function SEOPreview({ meta }) {
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-6", children: [
+    /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+      /* @__PURE__ */ jsx("h3", { className: "text-sm font-semibold text-gray-700", children: "Google Search Preview" }),
+      /* @__PURE__ */ jsxs("div", { className: "bg-white p-4 rounded border border-gray-200", children: [
+        /* @__PURE__ */ jsx("div", { className: "text-xs text-green-700", children: new URL(meta.og.url).hostname }),
+        /* @__PURE__ */ jsx("div", { className: "text-lg text-blue-600 hover:underline cursor-pointer truncate", children: meta.title }),
+        /* @__PURE__ */ jsx("div", { className: "text-sm text-gray-600 line-clamp-2", children: meta.description })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+      /* @__PURE__ */ jsx("h3", { className: "text-sm font-semibold text-gray-700", children: "Social Media Preview" }),
+      /* @__PURE__ */ jsxs("div", { className: "bg-gray-900 rounded overflow-hidden max-w-sm", children: [
+        meta.og.image && /* @__PURE__ */ jsx(
+          "img",
+          {
+            src: meta.og.image,
+            alt: meta.og.imageAlt || meta.og.title,
+            className: "w-full h-48 object-cover"
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "p-3 text-white", children: [
+          /* @__PURE__ */ jsx("div", { className: "font-semibold text-sm truncate", children: meta.og.title }),
+          /* @__PURE__ */ jsx("div", { className: "text-xs text-gray-400 line-clamp-2", children: meta.og.description }),
+          /* @__PURE__ */ jsx("div", { className: "text-xs text-gray-500 mt-1 truncate", children: meta.og.url })
+        ] })
+      ] })
+    ] })
+  ] });
+}
+function SEOScoreCard({ meta }) {
+  const { score, issues } = useSEOScore(meta);
+  const getScoreColor = () => {
+    if (score >= 80) return "text-green-600";
+    if (score >= 50) return "text-yellow-600";
+    return "text-red-600";
+  };
+  const getBarColor = () => {
+    if (score >= 80) return "bg-green-500";
+    if (score >= 50) return "bg-yellow-500";
+    return "bg-red-500";
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-4 p-4 border border-gray-200 rounded", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+      /* @__PURE__ */ jsx("h3", { className: "font-semibold text-gray-900", children: "SEO Score" }),
+      /* @__PURE__ */ jsxs("span", { className: `text-2xl font-bold ${getScoreColor()}`, children: [
+        score,
+        "/100"
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "space-y-2", children: /* @__PURE__ */ jsx("div", { className: "h-2 bg-gray-200 rounded overflow-hidden", children: /* @__PURE__ */ jsx("div", { className: `h-full ${getBarColor()} transition-all`, style: { width: `${score}%` } }) }) }),
+    issues.length > 0 && /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+      /* @__PURE__ */ jsx("h4", { className: "text-sm font-semibold text-gray-700", children: "Issues Found" }),
+      /* @__PURE__ */ jsx("ul", { className: "space-y-1", children: issues.map((issue, i) => /* @__PURE__ */ jsxs("li", { className: "text-sm text-red-600 flex items-start", children: [
+        /* @__PURE__ */ jsx("span", { className: "mr-2", children: "\u2022" }),
+        issue
+      ] }, i)) })
+    ] })
+  ] });
+}
+function MetaEditor({ meta, onChange }) {
+  const [localMeta, setLocalMeta] = useState(meta);
+  const handleChange = (updates) => {
+    const updated = { ...localMeta, ...updates };
+    setLocalMeta(updated);
+    onChange(updated);
+  };
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-6 p-4 border border-gray-200 rounded", children: [
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsxs("label", { className: "block text-sm font-semibold text-gray-900 mb-1", children: [
+        "Title ",
+        localMeta.title.length,
+        "/60"
+      ] }),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "text",
+          value: localMeta.title,
+          onChange: (e) => handleChange({
+            title: e.target.value.slice(0, 60)
+          }),
+          className: "w-full px-3 py-2 border border-gray-300 rounded text-sm",
+          placeholder: "Page title"
+        }
+      ),
+      /* @__PURE__ */ jsx("p", { className: "text-xs text-gray-500 mt-1", children: localMeta.title.length < 30 ? "Too short" : localMeta.title.length > 60 ? "Too long" : "Good length" })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsxs("label", { className: "block text-sm font-semibold text-gray-900 mb-1", children: [
+        "Description ",
+        localMeta.description.length,
+        "/160"
+      ] }),
+      /* @__PURE__ */ jsx(
+        "textarea",
+        {
+          value: localMeta.description,
+          onChange: (e) => handleChange({
+            description: e.target.value.slice(0, 160)
+          }),
+          className: "w-full px-3 py-2 border border-gray-300 rounded text-sm",
+          rows: 3,
+          placeholder: "Page description"
+        }
+      ),
+      /* @__PURE__ */ jsx("p", { className: "text-xs text-gray-500 mt-1", children: localMeta.description.length < 50 ? "Too short" : localMeta.description.length > 160 ? "Too long" : "Good length" })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx("label", { className: "block text-sm font-semibold text-gray-900 mb-1", children: "Keywords" }),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "text",
+          value: localMeta.keywords.join(", "),
+          onChange: (e) => handleChange({
+            keywords: e.target.value.split(",").map((k) => k.trim())
+          }),
+          className: "w-full px-3 py-2 border border-gray-300 rounded text-sm",
+          placeholder: "keyword1, keyword2, keyword3"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx("label", { className: "block text-sm font-semibold text-gray-900 mb-1", children: "Canonical URL" }),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "url",
+          value: localMeta.canonical || "",
+          onChange: (e) => handleChange({
+            canonical: e.target.value
+          }),
+          className: "w-full px-3 py-2 border border-gray-300 rounded text-sm",
+          placeholder: "https://example.com/page"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx("label", { className: "block text-sm font-semibold text-gray-900 mb-1", children: "OG Image URL" }),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "url",
+          value: localMeta.og.image || "",
+          onChange: (e) => handleChange({
+            og: { ...localMeta.og, image: e.target.value }
+          }),
+          className: "w-full px-3 py-2 border border-gray-300 rounded text-sm",
+          placeholder: "https://example.com/image.jpg"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx("label", { className: "block text-sm font-semibold text-gray-900 mb-1", children: "Twitter Card Type" }),
+      /* @__PURE__ */ jsxs(
+        "select",
+        {
+          value: localMeta.twitter.card,
+          onChange: (e) => handleChange({
+            twitter: {
+              ...localMeta.twitter,
+              card: e.target.value
+            }
+          }),
+          className: "w-full px-3 py-2 border border-gray-300 rounded text-sm",
+          children: [
+            /* @__PURE__ */ jsx("option", { value: "summary", children: "Summary" }),
+            /* @__PURE__ */ jsx("option", { value: "summary_large_image", children: "Summary Large Image" })
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs("div", { children: [
+      /* @__PURE__ */ jsx("label", { className: "block text-sm font-semibold text-gray-900 mb-1", children: "Robots Directive" }),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          type: "text",
+          value: localMeta.robots || "",
+          onChange: (e) => handleChange({
+            robots: e.target.value
+          }),
+          className: "w-full px-3 py-2 border border-gray-300 rounded text-sm",
+          placeholder: "index, follow"
+        }
+      )
+    ] })
+  ] });
+}
+function SitemapViewer({ entries }) {
+  return /* @__PURE__ */ jsx("div", { className: "overflow-x-auto", children: /* @__PURE__ */ jsxs("table", { className: "w-full text-sm", children: [
+    /* @__PURE__ */ jsx("thead", { className: "bg-gray-100 border-b", children: /* @__PURE__ */ jsxs("tr", { children: [
+      /* @__PURE__ */ jsx("th", { className: "text-left p-3", children: "URL" }),
+      /* @__PURE__ */ jsx("th", { className: "text-left p-3", children: "Last Modified" }),
+      /* @__PURE__ */ jsx("th", { className: "text-left p-3", children: "Change Frequency" }),
+      /* @__PURE__ */ jsx("th", { className: "text-left p-3", children: "Priority" })
+    ] }) }),
+    /* @__PURE__ */ jsx("tbody", { children: entries.map((entry, i) => /* @__PURE__ */ jsxs("tr", { className: "border-b hover:bg-gray-50", children: [
+      /* @__PURE__ */ jsx("td", { className: "p-3 font-mono text-xs text-blue-600 break-all", children: /* @__PURE__ */ jsx("a", { href: entry.url, target: "_blank", rel: "noopener noreferrer", className: "hover:underline", children: entry.url }) }),
+      /* @__PURE__ */ jsx("td", { className: "p-3 text-gray-600", children: entry.lastmod || "-" }),
+      /* @__PURE__ */ jsx("td", { className: "p-3 text-gray-600", children: entry.changefreq || "-" }),
+      /* @__PURE__ */ jsx("td", { className: "p-3 text-gray-600", children: entry.priority || "-" })
+    ] }, i)) })
+  ] }) });
+}
+function BreadcrumbsJsonLd({ items }) {
+  useEffect(() => {
+    const script = document.createElement("script");
+    script.type = "application/ld+json";
+    script.textContent = JSON.stringify(breadcrumbSchema(items));
+    document.head.appendChild(script);
+    return () => {
+      document.head.removeChild(script);
+    };
+  }, [items]);
+  return null;
+}
+function ArticleJsonLd({
+  title,
+  description,
+  author,
+  datePublished,
+  url,
+  image
+}) {
+  useEffect(() => {
+    const script = document.createElement("script");
+    script.type = "application/ld+json";
+    script.textContent = JSON.stringify(
+      articleSchema({
+        title,
+        description,
+        author,
+        datePublished,
+        url,
+        image
+      })
+    );
+    document.head.appendChild(script);
+    return () => {
+      document.head.removeChild(script);
+    };
+  }, [title, description, author, datePublished, url, image]);
+  return null;
+}
+
+// src/components/JsonLd.tsx
+function JsonLd({ type, data }) {
+  const schema = {
+    "@context": "https://schema.org",
+    "@type": type,
+    ...data
+  };
+  useStructuredData(schema);
+  return null;
+}
+function SEOAdminPage() {
+  const { pages, upsertMeta, deleteMeta, isLoading } = useSEOAdmin();
+  const [selectedPath, setSelectedPath] = useState(null);
+  const [editingMeta, setEditingMeta] = useState(null);
+  const currentPage = pages.find((p) => p.path === selectedPath);
+  const handleSave = async () => {
+    if (selectedPath && editingMeta) {
+      await upsertMeta(selectedPath, editingMeta);
+      setEditingMeta(null);
+    }
+  };
+  const handleDelete = async () => {
+    if (selectedPath) {
+      await deleteMeta(selectedPath);
+      setSelectedPath(null);
+      setEditingMeta(null);
+    }
+  };
+  if (isLoading) return /* @__PURE__ */ jsx("div", { className: "p-4", children: "Loading..." });
+  return /* @__PURE__ */ jsxs("div", { className: "max-w-6xl mx-auto p-6", children: [
+    /* @__PURE__ */ jsx("h1", { className: "text-3xl font-bold mb-6", children: "SEO Admin" }),
+    /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 lg:grid-cols-4 gap-6", children: [
+      /* @__PURE__ */ jsxs("div", { className: "lg:col-span-1 border border-gray-200 rounded p-4", children: [
+        /* @__PURE__ */ jsx("h2", { className: "font-semibold mb-4", children: "Pages" }),
+        /* @__PURE__ */ jsx("div", { className: "space-y-2", children: pages.map((page) => /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: () => {
+              setSelectedPath(page.path);
+              setEditingMeta(page.meta);
+            },
+            className: `w-full text-left p-2 rounded text-sm transition ${selectedPath === page.path ? "bg-blue-100 text-blue-900" : "hover:bg-gray-100"}`,
+            children: page.path || "/"
+          },
+          page.path
+        )) })
+      ] }),
+      currentPage && editingMeta && /* @__PURE__ */ jsxs("div", { className: "lg:col-span-3 space-y-6", children: [
+        /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 lg:grid-cols-2 gap-6", children: [
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("h2", { className: "font-semibold mb-4", children: "Edit Metadata" }),
+            /* @__PURE__ */ jsx(
+              MetaEditor,
+              {
+                meta: editingMeta,
+                onChange: setEditingMeta
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "space-y-6", children: [
+            /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsx("h2", { className: "font-semibold mb-4", children: "Preview" }),
+              /* @__PURE__ */ jsx(SEOPreview, { meta: editingMeta })
+            ] }),
+            /* @__PURE__ */ jsx(SEOScoreCard, { meta: editingMeta })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              onClick: handleSave,
+              className: "px-4 py-2 bg-green-600 text-white rounded hover:bg-green-700",
+              children: "Save"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              onClick: handleDelete,
+              className: "px-4 py-2 bg-red-600 text-white rounded hover:bg-red-700",
+              children: "Delete"
+            }
+          )
+        ] })
+      ] })
+    ] })
+  ] });
+}
+function SEOAnalyticsPage() {
+  const [topPages, setTopPages] = useState([]);
+  const [isLoading, setIsLoading] = useState(false);
+  useEffect(() => {
+    setIsLoading(true);
+    setIsLoading(false);
+  }, []);
+  if (isLoading) return /* @__PURE__ */ jsx("div", { className: "p-4", children: "Loading..." });
+  return /* @__PURE__ */ jsxs("div", { className: "max-w-6xl mx-auto p-6", children: [
+    /* @__PURE__ */ jsx("h1", { className: "text-3xl font-bold mb-6", children: "SEO Analytics" }),
+    /* @__PURE__ */ jsxs("div", { className: "space-y-6", children: [
+      /* @__PURE__ */ jsxs("div", { className: "border border-gray-200 rounded p-4", children: [
+        /* @__PURE__ */ jsx("h2", { className: "font-semibold mb-4", children: "Top Pages by Views" }),
+        /* @__PURE__ */ jsx("div", { className: "overflow-x-auto", children: /* @__PURE__ */ jsxs("table", { className: "w-full text-sm", children: [
+          /* @__PURE__ */ jsx("thead", { className: "bg-gray-100 border-b", children: /* @__PURE__ */ jsxs("tr", { children: [
+            /* @__PURE__ */ jsx("th", { className: "text-left p-3", children: "Page" }),
+            /* @__PURE__ */ jsx("th", { className: "text-right p-3", children: "Views" }),
+            /* @__PURE__ */ jsx("th", { className: "text-right p-3", children: "Avg Time (s)" }),
+            /* @__PURE__ */ jsx("th", { className: "text-right p-3", children: "Bounce Rate" })
+          ] }) }),
+          /* @__PURE__ */ jsx("tbody", { children: topPages.map((page, i) => /* @__PURE__ */ jsxs("tr", { className: "border-b hover:bg-gray-50", children: [
+            /* @__PURE__ */ jsx("td", { className: "p-3 font-mono text-xs", children: page.path }),
+            /* @__PURE__ */ jsx("td", { className: "p-3 text-right", children: page.views.toLocaleString() }),
+            /* @__PURE__ */ jsx("td", { className: "p-3 text-right", children: page.avgTimeOnPage.toFixed(1) }),
+            /* @__PURE__ */ jsxs("td", { className: "p-3 text-right", children: [
+              (page.bounceRate * 100).toFixed(1),
+              "%"
+            ] })
+          ] }, i)) })
+        ] }) }),
+        topPages.length === 0 && /* @__PURE__ */ jsx("p", { className: "text-center text-gray-500 py-8", children: "No analytics data available" })
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-4", children: [
+        /* @__PURE__ */ jsxs("div", { className: "border border-gray-200 rounded p-4", children: [
+          /* @__PURE__ */ jsx("h3", { className: "text-sm text-gray-600 mb-1", children: "Total Views" }),
+          /* @__PURE__ */ jsx("p", { className: "text-2xl font-bold", children: topPages.reduce((sum, p) => sum + p.views, 0).toLocaleString() })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "border border-gray-200 rounded p-4", children: [
+          /* @__PURE__ */ jsx("h3", { className: "text-sm text-gray-600 mb-1", children: "Average Time on Page" }),
+          /* @__PURE__ */ jsxs("p", { className: "text-2xl font-bold", children: [
+            topPages.length > 0 ? (topPages.reduce((sum, p) => sum + p.avgTimeOnPage, 0) / topPages.length).toFixed(1) : "0",
+            "s"
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "border border-gray-200 rounded p-4", children: [
+          /* @__PURE__ */ jsx("h3", { className: "text-sm text-gray-600 mb-1", children: "Average Bounce Rate" }),
+          /* @__PURE__ */ jsxs("p", { className: "text-2xl font-bold", children: [
+            topPages.length > 0 ? (topPages.reduce((sum, p) => sum + p.bounceRate, 0) / topPages.length * 100).toFixed(1) : "0",
+            "%"
+          ] })
+        ] })
+      ] })
+    ] })
+  ] });
+}
+
+export { ArticleJsonLd, BreadcrumbsJsonLd, JsonLd, MetaEditor, SEOAdminPage, SEOAnalyticsPage, SEOHead, SEOPreview, SEOScoreCard, SeoProvider, SitemapViewer, useCanonical, useSEO, useSEOAdmin, useSEOContext, useSEOScore, useSitemap, useStructuredData };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map