@oneclick.dev/cms-core-modules 0.0.109 → 0.0.111

package/dist/SeoHealth-bVQj_Xgm.mjs

@@ -0,0 +1,615 @@
+import { defineComponent as w, resolveComponent as M, openBlock as a, createElementBlock as m, createVNode as n, withCtx as v, createElementVNode as e, unref as s, createTextVNode as x, toDisplayString as d, normalizeClass as b, computed as T, createBlock as k, normalizeStyle as z, createCommentVNode as $, Fragment as R, renderList as B, ref as _, watch as te, onMounted as se } from "vue";
+import { useModule as oe, useModuleRoute as ne, useModuleBreadcrumbs as re } from "@oneclick.dev/cms-kit";
+import { MousePointerClick as K, Eye as q, TrendingUp as le, Hash as ae, RefreshCw as ie, AlertTriangle as de, Loader2 as ue, Search as ce, FileText as me, ArrowUpRight as xe } from "lucide-vue-next";
+import "./index-CkVwMqpn.mjs";
+import { componentToString as V, ChartTooltipContent as X } from "@oneclick.dev/cms-kit/charts";
+import { $ as j, O as U, A as G, z as J } from "./index-BIF2RB7k.mjs";
+import { P as Q, S as W } from "./index-B8GvmAwh.mjs";
+function S(t) {
+  return t >= 1e6 ? `${(t / 1e6).toFixed(1)}M` : t >= 1e3 ? `${(t / 1e3).toFixed(1)}K` : Math.round(t).toString();
+}
+function E(t) {
+  return `${(t * 100).toFixed(1)}%`;
+}
+function O(t) {
+  return t.toFixed(1);
+}
+function pe(t) {
+  return t <= 3 ? "text-emerald-600 dark:text-emerald-400" : t <= 10 ? "text-blue-600 dark:text-blue-400" : t <= 20 ? "text-amber-600 dark:text-amber-400" : "text-red-600 dark:text-red-400";
+}
+function I(t) {
+  return t <= 3 ? "bg-emerald-500/10 text-emerald-600 dark:text-emerald-400" : t <= 10 ? "bg-blue-500/10 text-blue-600 dark:text-blue-400" : t <= 20 ? "bg-amber-500/10 text-amber-600 dark:text-amber-400" : "bg-red-500/10 text-red-600 dark:text-red-400";
+}
+function Y(t) {
+  try {
+    return new URL(t).pathname;
+  } catch {
+    return t;
+  }
+}
+const fe = { class: "grid grid-cols-2 @3xl:grid-cols-4 gap-4" }, ge = { class: "flex items-center flex-wrap gap-2 text-xs text-muted-foreground" }, ve = { class: "text-2xl font-bold tabular-nums" }, ye = { class: "flex items-center flex-wrap gap-2 text-xs text-muted-foreground" }, he = { class: "text-2xl font-bold tabular-nums" }, _e = { class: "flex items-center flex-wrap gap-2 text-xs text-muted-foreground" }, ke = { class: "text-2xl font-bold tabular-nums" }, be = { class: "flex items-center flex-wrap gap-2 text-xs text-muted-foreground" }, $e = /* @__PURE__ */ w({
+  __name: "SeoKpiCards",
+  props: {
+    totals: {}
+  },
+  setup(t) {
+    return (p, c) => {
+      const r = M("Card");
+      return a(), m("div", fe, [
+        n(r, { class: "p-4 space-y-1" }, {
+          default: v(() => [
+            e("div", ge, [
+              n(s(K), { class: "size-3.5 shrink-0" }),
+              c[0] || (c[0] = x(" Total Clicks ", -1))
+            ]),
+            e("p", ve, d(s(S)(t.totals.clicks)), 1)
+          ]),
+          _: 1
+        }),
+        n(r, { class: "p-4 space-y-1" }, {
+          default: v(() => [
+            e("div", ye, [
+              n(s(q), { class: "size-3.5 shrink-0" }),
+              c[1] || (c[1] = x(" Total Impressions ", -1))
+            ]),
+            e("p", he, d(s(S)(t.totals.impressions)), 1)
+          ]),
+          _: 1
+        }),
+        n(r, { class: "p-4 space-y-1" }, {
+          default: v(() => [
+            e("div", _e, [
+              n(s(le), { class: "size-3.5 shrink-0" }),
+              c[2] || (c[2] = x(" Average CTR ", -1))
+            ]),
+            e("p", ke, d(s(E)(t.totals.ctr)), 1)
+          ]),
+          _: 1
+        }),
+        n(r, { class: "p-4 space-y-1" }, {
+          default: v(() => [
+            e("div", be, [
+              n(s(ae), { class: "size-3.5 shrink-0" }),
+              c[3] || (c[3] = x(" Avg Position ", -1))
+            ]),
+            e("p", {
+              class: b(["text-2xl font-bold tabular-nums", s(pe)(t.totals.avgPosition)])
+            }, d(s(O)(t.totals.avgPosition)), 3)
+          ]),
+          _: 1
+        })
+      ]);
+    };
+  }
+}), we = { class: "flex items-center gap-4" }, Ce = { class: "flex items-center gap-2" }, Te = { class: "text-xs" }, Se = { class: "flex items-center gap-2" }, Pe = { class: "text-xs" }, De = { class: "flex items-center gap-2" }, ze = { class: "text-xs" }, Me = { class: "flex items-center gap-2" }, Re = { class: "text-xs" }, Fe = {
+  key: 0,
+  class: "flex h-3 rounded-full overflow-hidden mt-3"
+}, Le = /* @__PURE__ */ w({
+  __name: "SeoRankingDistribution",
+  props: {
+    keywords: {}
+  },
+  setup(t) {
+    const p = t, c = T(() => p.keywords.filter((l) => l.position <= 3).length), r = T(() => p.keywords.filter((l) => l.position <= 10).length), f = T(() => p.keywords.filter((l) => l.position <= 20).length);
+    return (l, o) => {
+      const u = M("Card");
+      return a(), k(u, { class: "p-4" }, {
+        default: v(() => [
+          o[8] || (o[8] = e("h3", { class: "text-sm font-medium mb-3" }, "Keyword Ranking Distribution", -1)),
+          e("div", we, [
+            e("div", Ce, [
+              o[1] || (o[1] = e("span", { class: "inline-block w-3 h-3 rounded-full bg-emerald-500" }, null, -1)),
+              e("span", Te, [
+                o[0] || (o[0] = x("Top 3: ", -1)),
+                e("strong", null, d(c.value), 1)
+              ])
+            ]),
+            e("div", Se, [
+              o[3] || (o[3] = e("span", { class: "inline-block w-3 h-3 rounded-full bg-blue-500" }, null, -1)),
+              e("span", Pe, [
+                o[2] || (o[2] = x("Top 10: ", -1)),
+                e("strong", null, d(r.value), 1)
+              ])
+            ]),
+            e("div", De, [
+              o[5] || (o[5] = e("span", { class: "inline-block w-3 h-3 rounded-full bg-amber-500" }, null, -1)),
+              e("span", ze, [
+                o[4] || (o[4] = x("Top 20: ", -1)),
+                e("strong", null, d(f.value), 1)
+              ])
+            ]),
+            e("div", Me, [
+              o[7] || (o[7] = e("span", { class: "inline-block w-3 h-3 rounded-full bg-red-500" }, null, -1)),
+              e("span", Re, [
+                o[6] || (o[6] = x("20+: ", -1)),
+                e("strong", null, d(t.keywords.length - f.value), 1)
+              ])
+            ])
+          ]),
+          t.keywords.length > 0 ? (a(), m("div", Fe, [
+            e("div", {
+              class: "bg-emerald-500 transition-all",
+              style: z({ width: `${c.value / t.keywords.length * 100}%` })
+            }, null, 4),
+            e("div", {
+              class: "bg-blue-500 transition-all",
+              style: z({ width: `${(r.value - c.value) / t.keywords.length * 100}%` })
+            }, null, 4),
+            e("div", {
+              class: "bg-amber-500 transition-all",
+              style: z({ width: `${(f.value - r.value) / t.keywords.length * 100}%` })
+            }, null, 4),
+            e("div", {
+              class: "bg-red-500 transition-all",
+              style: z({ width: `${(t.keywords.length - f.value) / t.keywords.length * 100}%` })
+            }, null, 4)
+          ])) : $("", !0)
+        ]),
+        _: 1
+      });
+    };
+  }
+}), Ae = {
+  key: 0,
+  class: "h-48"
+}, Ne = {
+  key: 1,
+  class: "text-xs text-muted-foreground text-center py-10"
+}, Ue = /* @__PURE__ */ w({
+  __name: "SeoClicksChart",
+  props: {
+    trends: {}
+  },
+  setup(t) {
+    const p = t, c = (o, u) => u, r = (o) => o.clicks || 0, f = (o) => {
+      const u = p.trends[Math.round(o)];
+      if (!u) return "";
+      const g = new Date(u.date);
+      return `${g.getDate()}/${g.getMonth() + 1}`;
+    }, l = (o) => {
+      const u = p.trends[Math.round(Number(o))];
+      return u ? new Date(u.date).toLocaleDateString(void 0, { weekday: "short", month: "short", day: "numeric" }) : "";
+    };
+    return (o, u) => {
+      const g = M("Card");
+      return a(), k(g, { class: "p-4" }, {
+        default: v(() => [
+          u[0] || (u[0] = e("h3", { class: "text-sm font-medium mb-3" }, "Clicks Over Time", -1)),
+          t.trends.length > 1 ? (a(), m("div", Ae, [
+            n(s(j), {
+              data: t.trends,
+              height: 180
+            }, {
+              default: v(() => [
+                n(s(Q), {
+                  x: c,
+                  y: r,
+                  color: "#3b82f6",
+                  opacity: 0.1,
+                  curveType: "monotoneX"
+                }),
+                n(s(W), {
+                  x: c,
+                  y: r,
+                  color: "#3b82f6",
+                  curveType: "monotoneX"
+                }),
+                n(s(U), {
+                  type: "x",
+                  tickFormat: f,
+                  numTicks: 5,
+                  gridLine: !1
+                }),
+                n(s(U), {
+                  type: "y",
+                  gridLine: !0,
+                  numTicks: 4
+                }),
+                n(s(G), {
+                  template: (P) => s(V)(s(X), { namePayload: [{ name: "Clicks", value: P.clicks, color: "#3b82f6" }], labelFormatter: l })
+                }, null, 8, ["template"]),
+                n(s(J))
+              ]),
+              _: 1
+            }, 8, ["data"])
+          ])) : (a(), m("p", Ne, "Not enough data for chart"))
+        ]),
+        _: 1
+      });
+    };
+  }
+}), Be = {
+  key: 0,
+  class: "h-48"
+}, Ke = {
+  key: 1,
+  class: "text-xs text-muted-foreground text-center py-10"
+}, Oe = /* @__PURE__ */ w({
+  __name: "SeoImpressionsChart",
+  props: {
+    trends: {}
+  },
+  setup(t) {
+    const p = t, c = (o, u) => u, r = (o) => o.impressions || 0, f = (o) => {
+      const u = p.trends[Math.round(o)];
+      if (!u) return "";
+      const g = new Date(u.date);
+      return `${g.getDate()}/${g.getMonth() + 1}`;
+    }, l = (o) => {
+      const u = p.trends[Math.round(Number(o))];
+      return u ? new Date(u.date).toLocaleDateString(void 0, { weekday: "short", month: "short", day: "numeric" }) : "";
+    };
+    return (o, u) => {
+      const g = M("Card");
+      return a(), k(g, { class: "p-4" }, {
+        default: v(() => [
+          u[0] || (u[0] = e("h3", { class: "text-sm font-medium mb-3" }, "Impressions Over Time", -1)),
+          t.trends.length > 1 ? (a(), m("div", Be, [
+            n(s(j), {
+              data: t.trends,
+              height: 180
+            }, {
+              default: v(() => [
+                n(s(Q), {
+                  x: c,
+                  y: r,
+                  color: "#8b5cf6",
+                  opacity: 0.1,
+                  curveType: "monotoneX"
+                }),
+                n(s(W), {
+                  x: c,
+                  y: r,
+                  color: "#8b5cf6",
+                  curveType: "monotoneX"
+                }),
+                n(s(U), {
+                  type: "x",
+                  tickFormat: f,
+                  numTicks: 5,
+                  gridLine: !1
+                }),
+                n(s(U), {
+                  type: "y",
+                  gridLine: !0,
+                  numTicks: 4
+                }),
+                n(s(G), {
+                  template: (P) => s(V)(s(X), { namePayload: [{ name: "Impressions", value: P.impressions, color: "#8b5cf6" }], labelFormatter: l })
+                }, null, 8, ["template"]),
+                n(s(J))
+              ]),
+              _: 1
+            }, 8, ["data"])
+          ])) : (a(), m("p", Ke, "Not enough data for chart"))
+        ]),
+        _: 1
+      });
+    };
+  }
+}), qe = { class: "divide-y" }, Ee = {
+  key: 0,
+  class: "p-8 text-center text-sm text-muted-foreground"
+}, Ie = { class: "flex items-start @sm:items-center gap-3" }, He = { class: "text-xs font-medium text-muted-foreground w-6 text-right shrink-0 mt-0.5 @sm:mt-0" }, Ve = { class: "flex-1 min-w-0" }, Xe = { class: "flex flex-col @sm:flex-row @sm:items-center gap-2 @sm:gap-3" }, je = { class: "flex-1 min-w-0" }, Ge = { class: "text-sm font-medium truncate" }, Je = { class: "h-1.5 rounded-full bg-muted overflow-hidden mt-1.5 max-w-xs" }, Qe = { class: "flex items-center gap-3 @sm:gap-4 text-xs text-muted-foreground @sm:shrink-0 flex-wrap" }, We = { class: "flex items-center gap-1" }, Ye = { class: "flex items-center gap-1" }, Ze = /* @__PURE__ */ w({
+  __name: "SeoKeywordsTab",
+  props: {
+    keywords: {}
+  },
+  setup(t) {
+    const p = t, c = T(() => Math.max(...p.keywords.map((r) => r.clicks), 1));
+    return (r, f) => (a(), m("div", qe, [
+      t.keywords.length === 0 ? (a(), m("div", Ee, " No keyword data found for this period. ")) : $("", !0),
+      (a(!0), m(R, null, B(t.keywords, (l, o) => (a(), m("div", {
+        key: o,
+        class: "px-4 py-3 hover:bg-muted/30 transition-colors"
+      }, [
+        e("div", Ie, [
+          e("span", He, d(o + 1) + ".", 1),
+          e("div", Ve, [
+            e("div", Xe, [
+              e("div", je, [
+                e("p", Ge, d(l.query), 1),
+                e("div", Je, [
+                  e("div", {
+                    class: "h-full rounded-full bg-blue-500/70",
+                    style: z({ width: `${l.clicks / c.value * 100}%` })
+                  }, null, 4)
+                ])
+              ]),
+              e("div", Qe, [
+                e("span", We, [
+                  n(s(K), { class: "size-3" }),
+                  x(" " + d(s(S)(l.clicks)), 1)
+                ]),
+                e("span", Ye, [
+                  n(s(q), { class: "size-3" }),
+                  x(" " + d(s(S)(l.impressions)), 1)
+                ]),
+                e("span", null, d(s(E)(l.ctr)), 1),
+                e("span", {
+                  class: b(["inline-flex items-center px-1.5 py-0.5 rounded text-xs font-medium", s(I)(l.position)])
+                }, " #" + d(s(O)(l.position)), 3)
+              ])
+            ])
+          ])
+        ])
+      ]))), 128))
+    ]));
+  }
+}), et = { class: "divide-y" }, tt = {
+  key: 0,
+  class: "p-8 text-center text-sm text-muted-foreground"
+}, st = { class: "flex items-start @sm:items-center gap-3" }, ot = { class: "text-xs font-medium text-muted-foreground w-6 text-right shrink-0 mt-0.5 @sm:mt-0" }, nt = { class: "flex-1 min-w-0" }, rt = { class: "flex flex-col @sm:flex-row @sm:items-center gap-2 @sm:gap-3" }, lt = { class: "flex-1 min-w-0" }, at = ["title"], it = { class: "h-1.5 rounded-full bg-muted overflow-hidden mt-1.5 max-w-xs" }, dt = { class: "flex items-center gap-3 @sm:gap-4 text-xs text-muted-foreground @sm:shrink-0 flex-wrap" }, ut = { class: "flex items-center gap-1" }, ct = { class: "flex items-center gap-1" }, mt = /* @__PURE__ */ w({
+  __name: "SeoPagesTab",
+  props: {
+    pages: {}
+  },
+  setup(t) {
+    const p = t, c = T(() => Math.max(...p.pages.map((r) => r.clicks), 1));
+    return (r, f) => (a(), m("div", et, [
+      t.pages.length === 0 ? (a(), m("div", tt, " No page data found for this period. ")) : $("", !0),
+      (a(!0), m(R, null, B(t.pages, (l, o) => (a(), m("div", {
+        key: o,
+        class: "px-4 py-3 hover:bg-muted/30 transition-colors"
+      }, [
+        e("div", st, [
+          e("span", ot, d(o + 1) + ".", 1),
+          e("div", nt, [
+            e("div", rt, [
+              e("div", lt, [
+                e("p", {
+                  class: "text-sm font-medium truncate",
+                  title: l.page
+                }, d(s(Y)(l.page)), 9, at),
+                e("div", it, [
+                  e("div", {
+                    class: "h-full rounded-full bg-violet-500/70",
+                    style: z({ width: `${l.clicks / c.value * 100}%` })
+                  }, null, 4)
+                ])
+              ]),
+              e("div", dt, [
+                e("span", ut, [
+                  n(s(K), { class: "size-3" }),
+                  x(" " + d(s(S)(l.clicks)), 1)
+                ]),
+                e("span", ct, [
+                  n(s(q), { class: "size-3" }),
+                  x(" " + d(s(S)(l.impressions)), 1)
+                ]),
+                e("span", null, d(s(E)(l.ctr)), 1),
+                e("span", {
+                  class: b(["inline-flex items-center px-1.5 py-0.5 rounded text-xs font-medium", s(I)(l.position)])
+                }, " #" + d(s(O)(l.position)), 3)
+              ])
+            ])
+          ])
+        ])
+      ]))), 128))
+    ]));
+  }
+}), xt = { class: "divide-y" }, pt = {
+  key: 0,
+  class: "p-8 text-center text-sm text-muted-foreground"
+}, ft = { class: "flex items-start gap-3" }, gt = { class: "text-xs font-medium text-muted-foreground w-6 text-right shrink-0 mt-0.5" }, vt = { class: "flex-1 min-w-0" }, yt = { class: "flex flex-col @sm:flex-row @sm:items-center gap-2 @sm:gap-3" }, ht = { class: "flex-1 min-w-0 space-y-0.5" }, _t = { class: "text-sm font-medium" }, kt = ["title"], bt = { class: "flex items-center gap-3 @sm:gap-4 text-xs text-muted-foreground @sm:shrink-0 flex-wrap" }, $t = { class: "flex items-center gap-1" }, wt = /* @__PURE__ */ w({
+  __name: "SeoMappingTab",
+  props: {
+    queryPages: {}
+  },
+  setup(t) {
+    return (p, c) => (a(), m("div", xt, [
+      t.queryPages.length === 0 ? (a(), m("div", pt, " No query-page data found for this period. ")) : $("", !0),
+      (a(!0), m(R, null, B(t.queryPages, (r, f) => (a(), m("div", {
+        key: f,
+        class: "px-4 py-3 hover:bg-muted/30 transition-colors"
+      }, [
+        e("div", ft, [
+          e("span", gt, d(f + 1) + ".", 1),
+          e("div", vt, [
+            e("div", yt, [
+              e("div", ht, [
+                e("p", _t, d(r.query), 1),
+                e("p", {
+                  class: "text-xs text-muted-foreground truncate",
+                  title: r.page
+                }, "→ " + d(s(Y)(r.page)), 9, kt)
+              ]),
+              e("div", bt, [
+                e("span", $t, [
+                  n(s(K), { class: "size-3" }),
+                  x(" " + d(s(S)(r.clicks)), 1)
+                ]),
+                e("span", {
+                  class: b(["inline-flex items-center px-1.5 py-0.5 rounded text-xs font-medium", s(I)(r.position)])
+                }, " #" + d(s(O)(r.position)), 3)
+              ])
+            ])
+          ])
+        ])
+      ]))), 128))
+    ]));
+  }
+}), Ct = { class: "flex flex-col gap-6 w-full max-w-7xl mx-auto py-8" }, Tt = { class: "flex justify-between gap-4 flex-col @lg:flex-row @lg:items-center" }, St = {
+  key: 0,
+  class: "flex items-center gap-2"
+}, Pt = { class: "flex items-center border rounded-lg overflow-hidden" }, Dt = ["onClick"], zt = { class: "text-sm text-destructive font-medium" }, Mt = {
+  key: 3,
+  class: "flex items-center justify-center py-20"
+}, Rt = { class: "grid grid-cols-1 @3xl:grid-cols-2 gap-4" }, Ft = { class: "border-b" }, Lt = { class: "flex" }, It = /* @__PURE__ */ w({
+  __name: "SeoHealth",
+  setup(t) {
+    const { config: p } = oe(), { moduleId: c } = ne();
+    re(() => [{ label: "SEO Health" }]);
+    const r = _(!0), f = _(null), l = _("30"), o = _([]), u = _({
+      clicks: 0,
+      impressions: 0,
+      ctr: 0,
+      avgPosition: 0
+    }), g = _([]), P = _([]), H = _([]), F = T(() => !!(p.serviceAccount && p.propertyId && p.siteUrl)), Z = T(() => !!p.siteUrl);
+    function L(C) {
+      return `/api/v1/modules/${c}${C}`;
+    }
+    const ee = [
+      { label: "7d", value: "7" },
+      { label: "14d", value: "14" },
+      { label: "30d", value: "30" },
+      { label: "90d", value: "90" }
+    ];
+    async function A() {
+      if (!F.value) return;
+      r.value = !0, f.value = null;
+      const C = `${l.value}daysAgo`;
+      try {
+        const [i, N, D, h] = await Promise.all([
+          $fetch(L(`/seo/trends?startDate=${C}&endDate=today`)),
+          $fetch(L(`/seo/keywords?startDate=${C}&endDate=today&limit=50`)),
+          $fetch(L(`/seo/pages?startDate=${C}&endDate=today&limit=30`)),
+          $fetch(L(`/seo/query-pages?startDate=${C}&endDate=today`))
+        ]);
+        o.value = i.rows || [], u.value = i.totals || { clicks: 0, impressions: 0, ctr: 0, avgPosition: 0 }, g.value = N.rows || [], P.value = D.rows || [], H.value = h.rows || [];
+      } catch (i) {
+        f.value = i?.data?.statusMessage || i?.message || "Failed to load SEO data";
+      } finally {
+        r.value = !1;
+      }
+    }
+    te(l, () => A()), se(() => {
+      F.value ? A() : r.value = !1;
+    });
+    const y = _("keywords");
+    return (C, i) => {
+      const N = M("Button"), D = M("Card");
+      return a(), m("div", Ct, [
+        e("div", Tt, [
+          i[3] || (i[3] = e("div", null, [
+            e("h1", { class: "text-2xl font-semibold" }, "SEO Health"),
+            e("p", { class: "text-muted-foreground text-sm mt-1" }, "Search Console performance & keyword rankings")
+          ], -1)),
+          F.value ? (a(), m("div", St, [
+            e("div", Pt, [
+              (a(), m(R, null, B(ee, (h) => e("button", {
+                key: h.value,
+                class: b(["px-3 py-1.5 text-xs font-medium transition-colors", l.value === h.value ? "bg-primary text-primary-foreground" : "text-muted-foreground hover:text-foreground hover:bg-muted"]),
+                onClick: (At) => l.value = h.value
+              }, d(h.label), 11, Dt)), 64))
+            ]),
+            n(N, {
+              variant: "outline",
+              size: "icon",
+              onClick: A,
+              disabled: r.value
+            }, {
+              default: v(() => [
+                n(s(ie), {
+                  class: b(["size-4", { "animate-spin": r.value }])
+                }, null, 8, ["class"])
+              ]),
+              _: 1
+            }, 8, ["disabled"])
+          ])) : $("", !0)
+        ]),
+        Z.value ? F.value ? f.value ? (a(), k(D, {
+          key: 2,
+          class: "p-6 border-destructive/50 bg-destructive/5"
+        }, {
+          default: v(() => [
+            e("p", zt, d(f.value), 1),
+            n(N, {
+              variant: "outline",
+              size: "sm",
+              class: "mt-3",
+              onClick: A
+            }, {
+              default: v(() => [...i[7] || (i[7] = [
+                x("Retry", -1)
+              ])]),
+              _: 1
+            })
+          ]),
+          _: 1
+        })) : r.value ? (a(), m("div", Mt, [
+          n(s(ue), { class: "size-8 animate-spin text-muted-foreground" })
+        ])) : (a(), m(R, { key: 4 }, [
+          n($e, { totals: u.value }, null, 8, ["totals"]),
+          n(Le, { keywords: g.value }, null, 8, ["keywords"]),
+          e("div", Rt, [
+            n(Ue, { trends: o.value }, null, 8, ["trends"]),
+            n(Oe, { trends: o.value }, null, 8, ["trends"])
+          ]),
+          n(D, { class: "overflow-hidden" }, {
+            default: v(() => [
+              e("div", Ft, [
+                e("div", Lt, [
+                  e("button", {
+                    class: b(["px-4 py-2.5 text-sm font-medium transition-colors border-b-2", y.value === "keywords" ? "border-primary text-primary" : "border-transparent text-muted-foreground hover:text-foreground"]),
+                    onClick: i[0] || (i[0] = (h) => y.value = "keywords")
+                  }, [
+                    n(s(ce), { class: "size-3.5 inline mr-1.5" }),
+                    i[8] || (i[8] = x(" Keywords ", -1))
+                  ], 2),
+                  e("button", {
+                    class: b(["px-4 py-2.5 text-sm font-medium transition-colors border-b-2", y.value === "pages" ? "border-primary text-primary" : "border-transparent text-muted-foreground hover:text-foreground"]),
+                    onClick: i[1] || (i[1] = (h) => y.value = "pages")
+                  }, [
+                    n(s(me), { class: "size-3.5 inline mr-1.5" }),
+                    i[9] || (i[9] = x(" Pages ", -1))
+                  ], 2),
+                  e("button", {
+                    class: b(["px-4 py-2.5 text-sm font-medium transition-colors border-b-2", y.value === "mapping" ? "border-primary text-primary" : "border-transparent text-muted-foreground hover:text-foreground"]),
+                    onClick: i[2] || (i[2] = (h) => y.value = "mapping")
+                  }, [
+                    n(s(xe), { class: "size-3.5 inline mr-1.5" }),
+                    i[10] || (i[10] = x(" Keyword → Page ", -1))
+                  ], 2)
+                ])
+              ]),
+              y.value === "keywords" ? (a(), k(Ze, {
+                key: 0,
+                keywords: g.value
+              }, null, 8, ["keywords"])) : $("", !0),
+              y.value === "pages" ? (a(), k(mt, {
+                key: 1,
+                pages: P.value
+              }, null, 8, ["pages"])) : $("", !0),
+              y.value === "mapping" ? (a(), k(wt, {
+                key: 2,
+                queryPages: H.value
+              }, null, 8, ["queryPages"])) : $("", !0)
+            ]),
+            _: 1
+          })
+        ], 64)) : (a(), k(D, {
+          key: 1,
+          class: "p-8 text-center"
+        }, {
+          default: v(() => [...i[6] || (i[6] = [
+            e("p", { class: "text-lg font-medium" }, "Setup required", -1),
+            e("p", { class: "text-sm text-muted-foreground mt-1" }, "Configure your service account, property ID, and site URL in module settings.", -1)
+          ])]),
+          _: 1
+        })) : (a(), k(D, {
+          key: 0,
+          class: "p-8 text-center space-y-3"
+        }, {
+          default: v(() => [
+            n(s(de), { class: "size-10 text-amber-500 mx-auto" }),
+            i[4] || (i[4] = e("p", { class: "text-lg font-medium" }, "Search Console not configured", -1)),
+            i[5] || (i[5] = e("p", { class: "text-sm text-muted-foreground max-w-md mx-auto" }, [
+              x(" Add your "),
+              e("strong", null, "Search Console Site URL"),
+              x(" in the module settings to enable SEO data. Use the exact format from Google Search Console (e.g. "),
+              e("code", null, "https://example.com"),
+              x(" or "),
+              e("code", null, "sc-domain:example.com"),
+              x("). ")
+            ], -1))
+          ]),
+          _: 1
+        }))
+      ]);
+    };
+  }
+});
+export {
+  It as default
+};