@momentumcms/plugins-analytics 0.2.0 → 0.4.0

package/lib/analytics-admin-routes.js

@@ -0,0 +1,2130 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __esm = (fn, res) => function __init() {
+  return fn && (res = (0, fn[__getOwnPropNames(fn)[0]])(fn = 0)), res;
+};
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result)
+    __defProp(target, key, result);
+  return result;
+};
+
+// libs/plugins/analytics/src/lib/dashboard/analytics.service.ts
+import { Injectable, signal } from "@angular/core";
+var AnalyticsService;
+var init_analytics_service = __esm({
+  "libs/plugins/analytics/src/lib/dashboard/analytics.service.ts"() {
+    "use strict";
+    AnalyticsService = class {
+      constructor() {
+        /** Loading state */
+        this.loading = signal(false);
+        /** Error state */
+        this.error = signal(null);
+        /** Summary data */
+        this.summary = signal(null);
+        /** Events query result */
+        this.events = signal(null);
+      }
+      /**
+       * Fetch the analytics summary.
+       */
+      async fetchSummary(params = {}) {
+        this.loading.set(true);
+        this.error.set(null);
+        try {
+          const searchParams = new URLSearchParams();
+          if (params.from)
+            searchParams.set("from", params.from);
+          if (params.to)
+            searchParams.set("to", params.to);
+          const query = searchParams.toString();
+          const url = query ? `/api/analytics/summary?${query}` : "/api/analytics/summary";
+          const response = await fetch(url);
+          if (!response.ok) {
+            throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+          }
+          const data = await response.json();
+          this.summary.set(data);
+        } catch (err) {
+          const message = err instanceof Error ? err.message : String(err);
+          this.error.set(message);
+        } finally {
+          this.loading.set(false);
+        }
+      }
+      /**
+       * Query analytics events.
+       */
+      async queryEvents(params = {}) {
+        this.loading.set(true);
+        this.error.set(null);
+        try {
+          const searchParams = new URLSearchParams();
+          if (params.category)
+            searchParams.set("category", params.category);
+          if (params.name)
+            searchParams.set("name", params.name);
+          if (params.collection)
+            searchParams.set("collection", params.collection);
+          if (params.search)
+            searchParams.set("search", params.search);
+          if (params.from)
+            searchParams.set("from", params.from);
+          if (params.to)
+            searchParams.set("to", params.to);
+          if (params.limit)
+            searchParams.set("limit", String(params.limit));
+          if (params.page)
+            searchParams.set("page", String(params.page));
+          const query = searchParams.toString();
+          const url = query ? `/api/analytics/query?${query}` : "/api/analytics/query";
+          const response = await fetch(url);
+          if (!response.ok) {
+            throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+          }
+          const data = await response.json();
+          this.events.set(data);
+        } catch (err) {
+          const message = err instanceof Error ? err.message : String(err);
+          this.error.set(message);
+        } finally {
+          this.loading.set(false);
+        }
+      }
+    };
+    AnalyticsService = __decorateClass([
+      Injectable({ providedIn: "root" })
+    ], AnalyticsService);
+  }
+});
+
+// libs/plugins/analytics/src/lib/utils/type-guards.ts
+function isRecord(val) {
+  return val != null && typeof val === "object" && !Array.isArray(val);
+}
+var init_type_guards = __esm({
+  "libs/plugins/analytics/src/lib/utils/type-guards.ts"() {
+    "use strict";
+  }
+});
+
+// libs/plugins/analytics/src/lib/dashboard/widgets/block-analytics-widget.component.ts
+import {
+  Component,
+  ChangeDetectionStrategy,
+  signal as signal2,
+  computed,
+  inject,
+  PLATFORM_ID
+} from "@angular/core";
+import { isPlatformBrowser } from "@angular/common";
+import { Card, CardHeader, CardTitle, CardContent, Badge, Skeleton } from "@momentumcms/ui";
+import { NgIcon, provideIcons } from "@ng-icons/core";
+import { heroCubeTransparent } from "@ng-icons/heroicons/outline";
+function parseEventEntries(data) {
+  if (!isRecord(data) || !Array.isArray(data["events"]))
+    return [];
+  const result = [];
+  for (const item of data["events"]) {
+    if (isRecord(item) && isRecord(item["properties"])) {
+      result.push({ properties: item["properties"] });
+    }
+  }
+  return result;
+}
+var BlockAnalyticsWidgetComponent;
+var init_block_analytics_widget_component = __esm({
+  "libs/plugins/analytics/src/lib/dashboard/widgets/block-analytics-widget.component.ts"() {
+    "use strict";
+    init_type_guards();
+    BlockAnalyticsWidgetComponent = class {
+      constructor() {
+        this.platformId = inject(PLATFORM_ID);
+        this.loading = signal2(false);
+        this.metrics = signal2([]);
+        this.maxCount = computed(() => {
+          const all = this.metrics();
+          if (all.length === 0)
+            return 1;
+          return Math.max(...all.map((m) => m.impressions), 1);
+        });
+      }
+      ngOnInit() {
+        if (!isPlatformBrowser(this.platformId))
+          return;
+        void this.fetchBlockMetrics();
+      }
+      barWidth(count) {
+        return Math.max(2, count / this.maxCount() * 100);
+      }
+      async fetchBlockMetrics() {
+        this.loading.set(true);
+        try {
+          const [impressionRes, hoverRes] = await Promise.all([
+            fetch("/api/analytics/query?name=block_impression&limit=500"),
+            fetch("/api/analytics/query?name=block_hover&limit=500")
+          ]);
+          const impressionEvents = impressionRes.ok ? parseEventEntries(await impressionRes.json()) : [];
+          const hoverEvents = hoverRes.ok ? parseEventEntries(await hoverRes.json()) : [];
+          const impressionMap = /* @__PURE__ */ new Map();
+          for (const event of impressionEvents) {
+            const bt = String(event.properties["blockType"] ?? "unknown");
+            impressionMap.set(bt, (impressionMap.get(bt) ?? 0) + 1);
+          }
+          const hoverMap = /* @__PURE__ */ new Map();
+          for (const event of hoverEvents) {
+            const bt = String(event.properties["blockType"] ?? "unknown");
+            hoverMap.set(bt, (hoverMap.get(bt) ?? 0) + 1);
+          }
+          const allTypes = /* @__PURE__ */ new Set([...impressionMap.keys(), ...hoverMap.keys()]);
+          const result = [];
+          for (const blockType of allTypes) {
+            const impressions = impressionMap.get(blockType) ?? 0;
+            const hovers = hoverMap.get(blockType) ?? 0;
+            const hoverRate = impressions > 0 ? hovers / impressions * 100 : 0;
+            result.push({ blockType, impressions, hovers, hoverRate });
+          }
+          result.sort((a, b) => b.impressions - a.impressions);
+          this.metrics.set(result);
+        } catch {
+        } finally {
+          this.loading.set(false);
+        }
+      }
+    };
+    BlockAnalyticsWidgetComponent = __decorateClass([
+      Component({
+        selector: "mcms-block-analytics-widget",
+        imports: [Card, CardHeader, CardTitle, CardContent, Badge, Skeleton, NgIcon],
+        providers: [provideIcons({ heroCubeTransparent })],
+        changeDetection: ChangeDetectionStrategy.OnPush,
+        host: { class: "block" },
+        template: `
+		<mcms-card>
+			<mcms-card-header>
+				<div class="flex items-center gap-2">
+					<ng-icon
+						name="heroCubeTransparent"
+						class="text-muted-foreground"
+						size="18"
+						aria-hidden="true"
+					/>
+					<mcms-card-title>Block Engagement</mcms-card-title>
+				</div>
+			</mcms-card-header>
+			<mcms-card-content>
+				@if (loading() && metrics().length === 0) {
+					<div class="space-y-3">
+						@for (i of [1, 2, 3]; track i) {
+							<mcms-skeleton class="h-8 w-full" />
+						}
+					</div>
+				} @else if (metrics().length > 0) {
+					<div class="space-y-3">
+						@for (m of metrics(); track m.blockType) {
+							<div class="flex items-center justify-between gap-4">
+								<div class="flex items-center gap-2 min-w-0">
+									<mcms-badge variant="outline">{{ m.blockType }}</mcms-badge>
+								</div>
+								<div class="flex items-center gap-4 text-sm text-muted-foreground shrink-0">
+									<span title="Impressions">{{ m.impressions }} views</span>
+									<span title="Hovers">{{ m.hovers }} hovers</span>
+									<mcms-badge [variant]="m.hoverRate > 5 ? 'success' : 'secondary'">
+										{{ m.hoverRate.toFixed(1) }}% hover
+									</mcms-badge>
+								</div>
+							</div>
+							<!-- Bar visualization -->
+							<div
+								class="flex gap-1 h-2"
+								role="group"
+								[attr.aria-label]="m.blockType + ' engagement bars'"
+							>
+								<div
+									class="bg-primary/60 rounded-full"
+									role="meter"
+									[attr.aria-valuenow]="m.impressions"
+									[attr.aria-valuemin]="0"
+									[attr.aria-label]="'Impressions: ' + m.impressions"
+									[style.width.%]="barWidth(m.impressions)"
+								></div>
+								<div
+									class="bg-primary rounded-full"
+									role="meter"
+									[attr.aria-valuenow]="m.hovers"
+									[attr.aria-valuemin]="0"
+									[attr.aria-label]="'Hovers: ' + m.hovers"
+									[style.width.%]="barWidth(m.hovers)"
+								></div>
+							</div>
+						}
+					</div>
+				} @else {
+					<p class="text-sm text-muted-foreground text-center py-4">
+						No block tracking data yet. Enable tracking on blocks to see engagement.
+					</p>
+				}
+			</mcms-card-content>
+		</mcms-card>
+	`
+      })
+    ], BlockAnalyticsWidgetComponent);
+  }
+});
+
+// libs/plugins/analytics/src/lib/dashboard/analytics-dashboard.page.ts
+var analytics_dashboard_page_exports = {};
+__export(analytics_dashboard_page_exports, {
+  AnalyticsDashboardPage: () => AnalyticsDashboardPage
+});
+import {
+  Component as Component2,
+  ChangeDetectionStrategy as ChangeDetectionStrategy2,
+  inject as inject2,
+  computed as computed2,
+  signal as signal3,
+  PLATFORM_ID as PLATFORM_ID2
+} from "@angular/core";
+import { isPlatformBrowser as isPlatformBrowser2 } from "@angular/common";
+import {
+  Card as Card2,
+  CardHeader as CardHeader2,
+  CardTitle as CardTitle2,
+  CardDescription,
+  CardContent as CardContent2,
+  Badge as Badge2,
+  Skeleton as Skeleton2
+} from "@momentumcms/ui";
+import { NgIcon as NgIcon2, provideIcons as provideIcons2 } from "@ng-icons/core";
+import {
+  heroChartBarSquare,
+  heroArrowTrendingUp,
+  heroClock,
+  heroUsers,
+  heroDocumentText,
+  heroArrowPath,
+  heroMagnifyingGlass,
+  heroDevicePhoneMobile,
+  heroGlobeAlt,
+  heroChevronLeft,
+  heroChevronRight
+} from "@ng-icons/heroicons/outline";
+var AnalyticsDashboardPage;
+var init_analytics_dashboard_page = __esm({
+  "libs/plugins/analytics/src/lib/dashboard/analytics-dashboard.page.ts"() {
+    "use strict";
+    init_analytics_service();
+    init_block_analytics_widget_component();
+    AnalyticsDashboardPage = class {
+      constructor() {
+        this.analytics = inject2(AnalyticsService);
+        this.platformId = inject2(PLATFORM_ID2);
+        /** Date range options */
+        this.dateRanges = [
+          {
+            label: "24h",
+            value: "24h",
+            getFrom: () => new Date(Date.now() - 24 * 60 * 60 * 1e3).toISOString()
+          },
+          {
+            label: "7d",
+            value: "7d",
+            getFrom: () => new Date(Date.now() - 7 * 24 * 60 * 60 * 1e3).toISOString()
+          },
+          {
+            label: "30d",
+            value: "30d",
+            getFrom: () => new Date(Date.now() - 30 * 24 * 60 * 60 * 1e3).toISOString()
+          },
+          { label: "All", value: "all", getFrom: () => void 0 }
+        ];
+        /** Category filter options */
+        this.categoryFilters = [
+          { value: "all", label: "All" },
+          { value: "content", label: "Content" },
+          { value: "api", label: "API" },
+          { value: "page", label: "Page" },
+          { value: "custom", label: "Custom" }
+        ];
+        /** Selected date range */
+        this.selectedRange = signal3("all");
+        /** Selected category filter */
+        this.selectedCategory = signal3("all");
+        /** Search term */
+        this.searchTerm = signal3("");
+        /** Current page for pagination */
+        this.currentPage = signal3(1);
+        /** Events per page */
+        this.pageSize = 20;
+        /** Filtered events based on selected category (client-side filter on top of server query) */
+        this.filteredEvents = computed2(() => {
+          const result = this.analytics.events();
+          if (!result)
+            return [];
+          const cat = this.selectedCategory();
+          if (cat === "all")
+            return result.events;
+          return result.events.filter((e) => e.category === cat);
+        });
+        /** Total pages for pagination */
+        this.totalPages = computed2(() => {
+          const result = this.analytics.events();
+          if (!result)
+            return 1;
+          return Math.max(1, Math.ceil(result.total / result.limit));
+        });
+        /** Collection breakdown entries */
+        this.collectionEntries = computed2(() => {
+          const s = this.analytics.summary();
+          if (!s)
+            return [];
+          return Object.entries(s.byCollection).map(([name, count]) => ({ name, count })).sort((a, b) => b.count - a.count);
+        });
+      }
+      ngOnInit() {
+        if (!isPlatformBrowser2(this.platformId))
+          return;
+        void this.refresh();
+      }
+      /**
+       * Refresh all analytics data.
+       */
+      async refresh() {
+        const dateRange = this.dateRanges.find((r) => r.value === this.selectedRange());
+        const from = dateRange?.getFrom();
+        const search = this.searchTerm() || void 0;
+        const page = this.currentPage();
+        await Promise.all([
+          this.analytics.fetchSummary({ from }),
+          this.analytics.queryEvents({
+            limit: this.pageSize,
+            page,
+            from,
+            search
+          })
+        ]);
+      }
+      /**
+       * Set date range and refresh.
+       */
+      setDateRange(range) {
+        this.selectedRange.set(range.value);
+        this.currentPage.set(1);
+        void this.refresh();
+      }
+      /**
+       * Set category filter.
+       */
+      setCategory(category) {
+        this.selectedCategory.set(category);
+      }
+      /**
+       * Handle search input.
+       */
+      onSearch(event) {
+        const target = event.target;
+        if (target instanceof HTMLInputElement) {
+          this.searchTerm.set(target.value);
+          this.currentPage.set(1);
+          void this.refresh();
+        }
+      }
+      /**
+       * Navigate to a specific page.
+       */
+      goToPage(page) {
+        this.currentPage.set(page);
+        void this.refresh();
+      }
+      /**
+       * Get total content operations count.
+       */
+      contentOpsTotal(s) {
+        return s.contentOperations.created + s.contentOperations.updated + s.contentOperations.deleted;
+      }
+      /**
+       * Check if summary has device/browser data.
+       */
+      hasDeviceData(s) {
+        return Object.keys(s.deviceBreakdown ?? {}).length > 0 || Object.keys(s.browserBreakdown ?? {}).length > 0;
+      }
+      /**
+       * Get device entries sorted by count.
+       */
+      deviceEntries(s) {
+        return Object.entries(s.deviceBreakdown ?? {}).map(([name, count]) => ({ name, count })).sort((a, b) => b.count - a.count);
+      }
+      /**
+       * Get browser entries sorted by count.
+       */
+      browserEntries(s) {
+        return Object.entries(s.browserBreakdown ?? {}).map(([name, count]) => ({ name, count })).sort((a, b) => b.count - a.count);
+      }
+      /**
+       * Truncate URL for display.
+       */
+      truncateUrl(url) {
+        try {
+          const parsed = new URL(url, "http://localhost");
+          return parsed.pathname + parsed.search;
+        } catch {
+          return url.length > 50 ? url.slice(0, 47) + "..." : url;
+        }
+      }
+      /**
+       * Format timestamp to relative time.
+       */
+      formatTime(timestamp) {
+        const now = Date.now();
+        const then = new Date(timestamp).getTime();
+        const diff = now - then;
+        if (diff < 6e4)
+          return "Just now";
+        if (diff < 36e5)
+          return `${Math.floor(diff / 6e4)}m ago`;
+        if (diff < 864e5)
+          return `${Math.floor(diff / 36e5)}h ago`;
+        return `${Math.floor(diff / 864e5)}d ago`;
+      }
+      /**
+       * Get badge variant for event category.
+       */
+      getCategoryVariant(category) {
+        switch (category) {
+          case "content":
+            return "default";
+          case "api":
+            return "secondary";
+          case "admin":
+            return "warning";
+          case "page":
+            return "success";
+          case "custom":
+            return "outline";
+          default:
+            return "secondary";
+        }
+      }
+      /**
+       * Humanize event name (e.g., 'content_created' -> 'Content Created').
+       */
+      humanizeEventName(name) {
+        return name.split(/[_-]/).map((word) => word.charAt(0).toUpperCase() + word.slice(1)).join(" ");
+      }
+    };
+    AnalyticsDashboardPage = __decorateClass([
+      Component2({
+        selector: "mcms-analytics-dashboard",
+        imports: [
+          Card2,
+          CardHeader2,
+          CardTitle2,
+          CardDescription,
+          CardContent2,
+          Badge2,
+          Skeleton2,
+          NgIcon2,
+          BlockAnalyticsWidgetComponent
+        ],
+        providers: [
+          provideIcons2({
+            heroChartBarSquare,
+            heroArrowTrendingUp,
+            heroClock,
+            heroUsers,
+            heroDocumentText,
+            heroArrowPath,
+            heroMagnifyingGlass,
+            heroDevicePhoneMobile,
+            heroGlobeAlt,
+            heroChevronLeft,
+            heroChevronRight
+          })
+        ],
+        changeDetection: ChangeDetectionStrategy2.OnPush,
+        host: { class: "block max-w-6xl" },
+        template: `
+		<header class="mb-10">
+			<div class="flex items-center justify-between">
+				<div>
+					<h1 class="text-4xl font-bold tracking-tight text-foreground">Analytics</h1>
+					<p class="text-muted-foreground mt-3 text-lg">
+						Monitor content activity and site performance
+					</p>
+				</div>
+				<button
+					class="inline-flex items-center gap-2 px-4 py-2 text-sm font-medium rounded-md
+						bg-primary text-primary-foreground hover:bg-primary/90 transition-colors cursor-pointer"
+					(click)="refresh()"
+					aria-label="Refresh analytics data"
+				>
+					<ng-icon name="heroArrowPath" size="16" aria-hidden="true" />
+					Refresh
+				</button>
+			</div>
+		</header>
+
+		<!-- Date Range Selector -->
+		<div class="flex gap-2 mb-6">
+			@for (range of dateRanges; track range.value) {
+				<button
+					class="px-3 py-1.5 text-sm rounded-md transition-colors cursor-pointer border
+						focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50 focus-visible:ring-offset-2"
+					[class]="
+						selectedRange() === range.value
+							? 'bg-primary text-primary-foreground border-primary'
+							: 'bg-background text-foreground border-border hover:bg-muted'
+					"
+					(click)="setDateRange(range)"
+				>
+					{{ range.label }}
+				</button>
+			}
+		</div>
+
+		<!-- Overview Cards -->
+		<section class="mb-10">
+			<h2 class="text-sm font-semibold uppercase tracking-wider text-muted-foreground mb-4">
+				Overview
+			</h2>
+			@if (analytics.loading() && !analytics.summary()) {
+				<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
+					@for (i of [1, 2, 3, 4]; track i) {
+						<mcms-card>
+							<mcms-card-header>
+								<mcms-skeleton class="h-4 w-24" />
+								<mcms-skeleton class="h-8 w-16 mt-2" />
+							</mcms-card-header>
+						</mcms-card>
+					}
+				</div>
+			} @else if (analytics.summary(); as s) {
+				<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
+					<!-- Total Events -->
+					<mcms-card>
+						<mcms-card-header>
+							<div class="flex items-center justify-between">
+								<mcms-card-description>Total Events</mcms-card-description>
+								<ng-icon
+									name="heroChartBarSquare"
+									class="text-muted-foreground"
+									size="20"
+									aria-hidden="true"
+								/>
+							</div>
+							<mcms-card-title>
+								<span class="text-3xl font-bold">{{ s.totalEvents }}</span>
+							</mcms-card-title>
+						</mcms-card-header>
+					</mcms-card>
+
+					<!-- Content Operations -->
+					<mcms-card>
+						<mcms-card-header>
+							<div class="flex items-center justify-between">
+								<mcms-card-description>Content Operations</mcms-card-description>
+								<ng-icon
+									name="heroDocumentText"
+									class="text-muted-foreground"
+									size="20"
+									aria-hidden="true"
+								/>
+							</div>
+							<mcms-card-title>
+								<span class="text-3xl font-bold">{{ contentOpsTotal(s) }}</span>
+							</mcms-card-title>
+							<p class="text-xs text-muted-foreground mt-1">
+								{{ s.contentOperations.created }} created /
+								{{ s.contentOperations.updated }} updated /
+								{{ s.contentOperations.deleted }} deleted
+							</p>
+						</mcms-card-header>
+					</mcms-card>
+
+					<!-- API Requests -->
+					<mcms-card>
+						<mcms-card-header>
+							<div class="flex items-center justify-between">
+								<mcms-card-description>API Requests</mcms-card-description>
+								<ng-icon
+									name="heroArrowTrendingUp"
+									class="text-muted-foreground"
+									size="20"
+									aria-hidden="true"
+								/>
+							</div>
+							<mcms-card-title>
+								<span class="text-3xl font-bold">{{ s.apiMetrics.totalRequests }}</span>
+							</mcms-card-title>
+							@if (s.apiMetrics.avgDuration > 0) {
+								<p class="text-xs text-muted-foreground mt-1">
+									Avg. {{ s.apiMetrics.avgDuration }}ms response time
+								</p>
+							}
+						</mcms-card-header>
+					</mcms-card>
+
+					<!-- Active Sessions -->
+					<mcms-card>
+						<mcms-card-header>
+							<div class="flex items-center justify-between">
+								<mcms-card-description>Active Sessions</mcms-card-description>
+								<ng-icon
+									name="heroUsers"
+									class="text-muted-foreground"
+									size="20"
+									aria-hidden="true"
+								/>
+							</div>
+							<mcms-card-title>
+								<span class="text-3xl font-bold">{{ s.activeSessions }}</span>
+							</mcms-card-title>
+							<p class="text-xs text-muted-foreground mt-1">
+								{{ s.activeVisitors }} unique visitors
+							</p>
+						</mcms-card-header>
+					</mcms-card>
+				</div>
+			} @else if (analytics.error(); as err) {
+				<mcms-card>
+					<mcms-card-header>
+						<mcms-card-title>Error loading analytics</mcms-card-title>
+						<mcms-card-description>{{ err }}</mcms-card-description>
+					</mcms-card-header>
+					<mcms-card-content>
+						<button class="text-sm text-primary hover:underline cursor-pointer" (click)="refresh()">
+							Try again
+						</button>
+					</mcms-card-content>
+				</mcms-card>
+			}
+		</section>
+
+		<!-- Recent Activity -->
+		<section class="mb-10">
+			<h2 class="text-sm font-semibold uppercase tracking-wider text-muted-foreground mb-4">
+				Recent Activity
+			</h2>
+
+			<!-- Search + Category filter row -->
+			<div class="flex flex-col sm:flex-row gap-3 mb-4">
+				<div class="relative flex-1 max-w-sm">
+					<ng-icon
+						name="heroMagnifyingGlass"
+						class="absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground"
+						size="16"
+						aria-hidden="true"
+					/>
+					<input
+						type="text"
+						placeholder="Search events..."
+						class="w-full pl-9 pr-3 py-2 text-sm rounded-md border border-border bg-background
+							text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2
+							focus:ring-primary/50"
+						[value]="searchTerm()"
+						(input)="onSearch($event)"
+						aria-label="Search analytics events"
+					/>
+				</div>
+				<div class="flex gap-2">
+					@for (cat of categoryFilters; track cat.value) {
+						<button
+							class="px-3 py-1.5 text-sm rounded-md transition-colors cursor-pointer border
+								focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50 focus-visible:ring-offset-2"
+							[class]="
+								selectedCategory() === cat.value
+									? 'bg-primary text-primary-foreground border-primary'
+									: 'bg-background text-foreground border-border hover:bg-muted'
+							"
+							(click)="setCategory(cat.value)"
+						>
+							{{ cat.label }}
+						</button>
+					}
+				</div>
+			</div>
+
+			@if (analytics.loading() && !analytics.events()) {
+				<div class="space-y-3">
+					@for (i of [1, 2, 3, 4, 5]; track i) {
+						<mcms-skeleton class="h-12 w-full" />
+					}
+				</div>
+			} @else if (filteredEvents().length > 0) {
+				<div class="border border-border rounded-lg overflow-hidden">
+					<div class="overflow-x-auto">
+						<table class="w-full text-sm" role="table">
+							<thead>
+								<tr class="border-b border-border bg-muted/50">
+									<th scope="col" class="px-4 py-3 text-left font-medium text-muted-foreground">
+										Time
+									</th>
+									<th scope="col" class="px-4 py-3 text-left font-medium text-muted-foreground">
+										Category
+									</th>
+									<th scope="col" class="px-4 py-3 text-left font-medium text-muted-foreground">
+										Event
+									</th>
+									<th scope="col" class="px-4 py-3 text-left font-medium text-muted-foreground">
+										URL
+									</th>
+									<th scope="col" class="px-4 py-3 text-left font-medium text-muted-foreground">
+										Collection
+									</th>
+									<th scope="col" class="px-4 py-3 text-left font-medium text-muted-foreground">
+										Device
+									</th>
+									<th scope="col" class="px-4 py-3 text-left font-medium text-muted-foreground">
+										Source
+									</th>
+								</tr>
+							</thead>
+							<tbody>
+								@for (event of filteredEvents(); track event.id) {
+									<tr
+										class="border-b border-border last:border-0 hover:bg-muted/30 transition-colors"
+									>
+										<td class="px-4 py-3 text-muted-foreground whitespace-nowrap">
+											{{ formatTime(event.timestamp) }}
+										</td>
+										<td class="px-4 py-3">
+											<mcms-badge [variant]="getCategoryVariant(event.category)">
+												{{ event.category }}
+											</mcms-badge>
+										</td>
+										<td class="px-4 py-3 font-medium">{{ humanizeEventName(event.name) }}</td>
+										<td
+											class="px-4 py-3 text-muted-foreground max-w-48 truncate"
+											[title]="event.context.url ?? ''"
+										>
+											@if (event.context.url) {
+												{{ truncateUrl(event.context.url) }}
+											} @else {
+												<span class="text-muted-foreground/50">\u2014</span>
+											}
+										</td>
+										<td class="px-4 py-3 text-muted-foreground">
+											@if (event.context.collection) {
+												<mcms-badge variant="outline">{{ event.context.collection }}</mcms-badge>
+											} @else {
+												<span class="text-muted-foreground/50">\u2014</span>
+											}
+										</td>
+										<td class="px-4 py-3 text-muted-foreground whitespace-nowrap">
+											@if (event.context.device) {
+												{{ event.context.device }}
+											} @else {
+												<span class="text-muted-foreground/50">\u2014</span>
+											}
+										</td>
+										<td class="px-4 py-3 text-muted-foreground capitalize">
+											{{ event.context.source }}
+										</td>
+									</tr>
+								}
+							</tbody>
+						</table>
+					</div>
+				</div>
+
+				<!-- Pagination -->
+				@if (totalPages() > 1) {
+					<div class="flex items-center justify-between mt-4">
+						<p class="text-sm text-muted-foreground">
+							Page {{ currentPage() }} of {{ totalPages() }} ({{ analytics.events()?.total ?? 0 }}
+							total)
+						</p>
+						<div class="flex gap-2">
+							<button
+								class="inline-flex items-center gap-1 px-3 py-1.5 text-sm rounded-md border
+									border-border bg-background hover:bg-muted transition-colors cursor-pointer
+									disabled:opacity-50 disabled:cursor-not-allowed"
+								[disabled]="currentPage() <= 1"
+								(click)="goToPage(currentPage() - 1)"
+								aria-label="Previous page"
+							>
+								<ng-icon name="heroChevronLeft" size="14" aria-hidden="true" />
+								Prev
+							</button>
+							<button
+								class="inline-flex items-center gap-1 px-3 py-1.5 text-sm rounded-md border
+									border-border bg-background hover:bg-muted transition-colors cursor-pointer
+									disabled:opacity-50 disabled:cursor-not-allowed"
+								[disabled]="currentPage() >= totalPages()"
+								(click)="goToPage(currentPage() + 1)"
+								aria-label="Next page"
+							>
+								Next
+								<ng-icon name="heroChevronRight" size="14" aria-hidden="true" />
+							</button>
+						</div>
+					</div>
+				}
+			} @else {
+				<mcms-card>
+					<mcms-card-content>
+						<div class="flex flex-col items-center justify-center py-12 text-center">
+							<ng-icon
+								name="heroChartBarSquare"
+								class="text-muted-foreground mb-4"
+								size="40"
+								aria-hidden="true"
+							/>
+							<p class="text-foreground font-medium">No events recorded</p>
+							<p class="text-sm text-muted-foreground mt-1">
+								Events will appear here as they are tracked
+							</p>
+						</div>
+					</mcms-card-content>
+				</mcms-card>
+			}
+		</section>
+
+		<!-- Top Pages + Device Breakdown side by side -->
+		@if (analytics.summary(); as s) {
+			@if (s.topPages.length > 0 || hasDeviceData(s)) {
+				<section class="mb-10 grid grid-cols-1 lg:grid-cols-2 gap-6">
+					<!-- Top Pages -->
+					@if (s.topPages.length > 0) {
+						<mcms-card>
+							<mcms-card-header>
+								<div class="flex items-center gap-2">
+									<ng-icon
+										name="heroGlobeAlt"
+										class="text-muted-foreground"
+										size="18"
+										aria-hidden="true"
+									/>
+									<mcms-card-title>Top Pages</mcms-card-title>
+								</div>
+							</mcms-card-header>
+							<mcms-card-content>
+								<div class="space-y-3">
+									@for (page of s.topPages; track page.url) {
+										<div class="flex items-center justify-between">
+											<span class="text-sm text-foreground truncate max-w-64" [title]="page.url">
+												{{ truncateUrl(page.url) }}
+											</span>
+											<mcms-badge variant="secondary">{{ page.count }}</mcms-badge>
+										</div>
+									}
+								</div>
+							</mcms-card-content>
+						</mcms-card>
+					}
+
+					<!-- Device Breakdown -->
+					@if (hasDeviceData(s)) {
+						<mcms-card>
+							<mcms-card-header>
+								<div class="flex items-center gap-2">
+									<ng-icon
+										name="heroDevicePhoneMobile"
+										class="text-muted-foreground"
+										size="18"
+										aria-hidden="true"
+									/>
+									<mcms-card-title>Devices & Browsers</mcms-card-title>
+								</div>
+							</mcms-card-header>
+							<mcms-card-content>
+								@if (deviceEntries(s).length > 0) {
+									<h3
+										class="text-xs font-semibold uppercase tracking-wider text-muted-foreground mb-2"
+									>
+										Devices
+									</h3>
+									<div class="space-y-2 mb-4">
+										@for (entry of deviceEntries(s); track entry.name) {
+											<div class="flex items-center justify-between">
+												<span class="text-sm text-foreground capitalize">{{ entry.name }}</span>
+												<mcms-badge variant="outline">{{ entry.count }}</mcms-badge>
+											</div>
+										}
+									</div>
+								}
+								@if (browserEntries(s).length > 0) {
+									<h3
+										class="text-xs font-semibold uppercase tracking-wider text-muted-foreground mb-2"
+									>
+										Browsers
+									</h3>
+									<div class="space-y-2">
+										@for (entry of browserEntries(s); track entry.name) {
+											<div class="flex items-center justify-between">
+												<span class="text-sm text-foreground">{{ entry.name }}</span>
+												<mcms-badge variant="outline">{{ entry.count }}</mcms-badge>
+											</div>
+										}
+									</div>
+								}
+							</mcms-card-content>
+						</mcms-card>
+					}
+				</section>
+			}
+		}
+
+		<!-- Content Breakdown -->
+		@if (collectionEntries().length > 0) {
+			<section>
+				<h2 class="text-sm font-semibold uppercase tracking-wider text-muted-foreground mb-4">
+					Content Breakdown
+				</h2>
+				<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
+					@for (entry of collectionEntries(); track entry.name) {
+						<mcms-card>
+							<mcms-card-header>
+								<div class="flex items-center justify-between">
+									<mcms-card-title>{{ entry.name }}</mcms-card-title>
+									<mcms-badge variant="secondary">{{ entry.count }} events</mcms-badge>
+								</div>
+							</mcms-card-header>
+						</mcms-card>
+					}
+				</div>
+			</section>
+		}
+
+		<!-- Block Engagement -->
+		<section class="mt-10">
+			<mcms-block-analytics-widget />
+		</section>
+	`
+      })
+    ], AnalyticsDashboardPage);
+  }
+});
+
+// libs/plugins/analytics/src/lib/dashboard/content-performance.service.ts
+import { Injectable as Injectable2, signal as signal4 } from "@angular/core";
+function isQueryResult(val) {
+  if (val == null || typeof val !== "object")
+    return false;
+  if (!("events" in val))
+    return false;
+  return Array.isArray(val.events);
+}
+function extractPathname(url) {
+  try {
+    return new URL(url).pathname;
+  } catch {
+    return url;
+  }
+}
+var ContentPerformanceService;
+var init_content_performance_service = __esm({
+  "libs/plugins/analytics/src/lib/dashboard/content-performance.service.ts"() {
+    "use strict";
+    ContentPerformanceService = class {
+      constructor() {
+        /** Loading state for top pages */
+        this.loading = signal4(false);
+        /** Error state */
+        this.error = signal4(null);
+        /** Aggregated top pages data */
+        this.topPages = signal4([]);
+        /** Loading state for per-document performance */
+        this.detailLoading = signal4(false);
+        /** Per-document performance data */
+        this.detail = signal4(null);
+      }
+      /**
+       * Fetch top pages by aggregating page_view events.
+       */
+      async fetchTopPages(params = {}) {
+        this.loading.set(true);
+        this.error.set(null);
+        try {
+          const searchParams = new URLSearchParams();
+          searchParams.set("name", "page_view");
+          searchParams.set("limit", "1000");
+          if (params.from)
+            searchParams.set("from", params.from);
+          if (params.to)
+            searchParams.set("to", params.to);
+          const response = await fetch(`/api/analytics/query?${searchParams.toString()}`);
+          if (!response.ok) {
+            throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+          }
+          const raw = await response.json();
+          if (!isQueryResult(raw)) {
+            this.topPages.set([]);
+            return;
+          }
+          const urlMap = /* @__PURE__ */ new Map();
+          for (const event of raw.events) {
+            const rawUrl = event.context.url;
+            if (!rawUrl || typeof rawUrl !== "string")
+              continue;
+            const pathname = extractPathname(rawUrl);
+            let entry = urlMap.get(pathname);
+            if (!entry) {
+              entry = { views: 0, visitors: /* @__PURE__ */ new Set(), referrers: /* @__PURE__ */ new Map() };
+              urlMap.set(pathname, entry);
+            }
+            entry.views++;
+            const visitorKey = event.visitorId ?? event.sessionId;
+            if (visitorKey)
+              entry.visitors.add(visitorKey);
+            const ref = event.context.referrer;
+            if (ref && typeof ref === "string") {
+              entry.referrers.set(ref, (entry.referrers.get(ref) ?? 0) + 1);
+            }
+          }
+          const pages = [];
+          for (const [url, entry] of urlMap) {
+            const referrers = [];
+            for (const [referrer, count] of entry.referrers) {
+              referrers.push({ referrer, count });
+            }
+            referrers.sort((a, b) => b.count - a.count);
+            pages.push({
+              url,
+              pageViews: entry.views,
+              uniqueVisitors: entry.visitors.size,
+              referrers
+            });
+          }
+          pages.sort((a, b) => b.pageViews - a.pageViews);
+          this.topPages.set(pages);
+        } catch (err) {
+          const message = err instanceof Error ? err.message : String(err);
+          this.error.set(message);
+        } finally {
+          this.loading.set(false);
+        }
+      }
+      /**
+       * Fetch per-document performance data.
+       */
+      async fetchPerformance(params) {
+        this.detailLoading.set(true);
+        try {
+          const searchParams = new URLSearchParams();
+          searchParams.set("collection", params.collection);
+          searchParams.set("documentId", params.documentId);
+          if (params.from)
+            searchParams.set("from", params.from);
+          if (params.to)
+            searchParams.set("to", params.to);
+          const url = `/api/analytics/content-performance?${searchParams.toString()}`;
+          const response = await fetch(url);
+          if (!response.ok) {
+            throw new Error(`HTTP ${response.status}: ${response.statusText}`);
+          }
+          const data = await response.json();
+          this.detail.set(data);
+        } catch {
+          this.detail.set(null);
+        } finally {
+          this.detailLoading.set(false);
+        }
+      }
+    };
+    ContentPerformanceService = __decorateClass([
+      Injectable2({ providedIn: "root" })
+    ], ContentPerformanceService);
+  }
+});
+
+// libs/plugins/analytics/src/lib/dashboard/content-performance.page.ts
+var content_performance_page_exports = {};
+__export(content_performance_page_exports, {
+  ContentPerformancePage: () => ContentPerformancePage
+});
+import {
+  Component as Component3,
+  ChangeDetectionStrategy as ChangeDetectionStrategy3,
+  inject as inject3,
+  signal as signal5,
+  computed as computed3,
+  PLATFORM_ID as PLATFORM_ID3
+} from "@angular/core";
+import { isPlatformBrowser as isPlatformBrowser3 } from "@angular/common";
+import {
+  Card as Card3,
+  CardHeader as CardHeader3,
+  CardTitle as CardTitle3,
+  CardDescription as CardDescription2,
+  CardContent as CardContent3,
+  Badge as Badge3,
+  Skeleton as Skeleton3
+} from "@momentumcms/ui";
+import { NgIcon as NgIcon3, provideIcons as provideIcons3 } from "@ng-icons/core";
+import {
+  heroGlobeAlt as heroGlobeAlt2,
+  heroUsers as heroUsers2,
+  heroEye,
+  heroDocumentText as heroDocumentText2,
+  heroMagnifyingGlass as heroMagnifyingGlass2,
+  heroChevronDown,
+  heroChevronUp
+} from "@ng-icons/heroicons/outline";
+var ContentPerformancePage;
+var init_content_performance_page = __esm({
+  "libs/plugins/analytics/src/lib/dashboard/content-performance.page.ts"() {
+    "use strict";
+    init_content_performance_service();
+    ContentPerformancePage = class {
+      constructor() {
+        this.service = inject3(ContentPerformanceService);
+        this.platformId = inject3(PLATFORM_ID3);
+        this.dateRanges = [
+          {
+            label: "24h",
+            value: "24h",
+            getFrom: () => new Date(Date.now() - 24 * 60 * 60 * 1e3).toISOString()
+          },
+          {
+            label: "7d",
+            value: "7d",
+            getFrom: () => new Date(Date.now() - 7 * 24 * 60 * 60 * 1e3).toISOString()
+          },
+          {
+            label: "30d",
+            value: "30d",
+            getFrom: () => new Date(Date.now() - 30 * 24 * 60 * 60 * 1e3).toISOString()
+          },
+          { label: "All", value: "all", getFrom: () => void 0 }
+        ];
+        this.selectedRange = signal5("all");
+        this.searchTerm = signal5("");
+        this.expandedRow = signal5(null);
+        this.filteredPages = computed3(() => {
+          const pages = this.service.topPages();
+          const term = this.searchTerm().toLowerCase().trim();
+          if (!term)
+            return pages;
+          return pages.filter((p) => p.url.toLowerCase().includes(term));
+        });
+        this.totalViews = computed3(() => {
+          const pages = this.service.topPages();
+          let total = 0;
+          for (const p of pages) {
+            total += p.pageViews;
+          }
+          return total;
+        });
+        this.totalVisitors = computed3(() => {
+          const pages = this.service.topPages();
+          let total = 0;
+          for (const p of pages) {
+            total += p.uniqueVisitors;
+          }
+          return total;
+        });
+        this.totalPages = computed3(() => this.service.topPages().length);
+      }
+      ngOnInit() {
+        if (!isPlatformBrowser3(this.platformId))
+          return;
+        void this.fetchData();
+      }
+      setDateRange(range) {
+        this.selectedRange.set(range.value);
+        this.expandedRow.set(null);
+        void this.fetchData();
+      }
+      onSearch(event) {
+        if (event.target instanceof HTMLInputElement) {
+          this.searchTerm.set(event.target.value);
+        }
+      }
+      toggleRow(url) {
+        this.expandedRow.set(this.expandedRow() === url ? null : url);
+      }
+      async fetchData() {
+        const range = this.dateRanges.find((r) => r.value === this.selectedRange());
+        const from = range?.getFrom();
+        await this.service.fetchTopPages({ from });
+      }
+    };
+    ContentPerformancePage = __decorateClass([
+      Component3({
+        selector: "mcms-content-performance-page",
+        imports: [Card3, CardHeader3, CardTitle3, CardDescription2, CardContent3, Badge3, Skeleton3, NgIcon3],
+        providers: [
+          provideIcons3({
+            heroGlobeAlt: heroGlobeAlt2,
+            heroUsers: heroUsers2,
+            heroEye,
+            heroDocumentText: heroDocumentText2,
+            heroMagnifyingGlass: heroMagnifyingGlass2,
+            heroChevronDown,
+            heroChevronUp
+          })
+        ],
+        changeDetection: ChangeDetectionStrategy3.OnPush,
+        host: { class: "block max-w-6xl" },
+        template: `
+		<header class="mb-10">
+			<div class="flex items-center justify-between">
+				<div>
+					<h1 class="text-4xl font-bold tracking-tight text-foreground">Content Performance</h1>
+					<p class="text-muted-foreground mt-3 text-lg">See which content gets the most traffic</p>
+				</div>
+			</div>
+		</header>
+
+		<!-- Date Range Selector -->
+		<div class="flex gap-2 mb-6">
+			@for (range of dateRanges; track range.value) {
+				<button
+					class="px-3 py-1.5 text-sm rounded-md transition-colors cursor-pointer border
+					focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50 focus-visible:ring-offset-2"
+					[class]="
+						selectedRange() === range.value
+							? 'bg-primary text-primary-foreground border-primary'
+							: 'bg-background text-foreground border-border hover:bg-muted'
+					"
+					(click)="setDateRange(range)"
+				>
+					{{ range.label }}
+				</button>
+			}
+		</div>
+
+		<!-- Summary Cards -->
+		<section class="mb-8">
+			@if (service.loading() && service.topPages().length === 0) {
+				<div class="grid grid-cols-1 sm:grid-cols-3 gap-6">
+					@for (i of [1, 2, 3]; track i) {
+						<mcms-card>
+							<mcms-card-header>
+								<mcms-skeleton class="h-4 w-24" />
+								<mcms-skeleton class="h-8 w-16 mt-2" />
+							</mcms-card-header>
+						</mcms-card>
+					}
+				</div>
+			} @else {
+				<div class="grid grid-cols-1 sm:grid-cols-3 gap-6">
+					<mcms-card>
+						<mcms-card-header>
+							<div class="flex items-center justify-between">
+								<mcms-card-description>Total Views</mcms-card-description>
+								<ng-icon
+									name="heroEye"
+									class="text-muted-foreground"
+									size="20"
+									aria-hidden="true"
+								/>
+							</div>
+							<mcms-card-title>
+								<span class="text-3xl font-bold">{{ totalViews() }}</span>
+							</mcms-card-title>
+						</mcms-card-header>
+					</mcms-card>
+
+					<mcms-card>
+						<mcms-card-header>
+							<div class="flex items-center justify-between">
+								<mcms-card-description>Unique Visitors</mcms-card-description>
+								<ng-icon
+									name="heroUsers"
+									class="text-muted-foreground"
+									size="20"
+									aria-hidden="true"
+								/>
+							</div>
+							<mcms-card-title>
+								<span class="text-3xl font-bold">{{ totalVisitors() }}</span>
+							</mcms-card-title>
+						</mcms-card-header>
+					</mcms-card>
+
+					<mcms-card>
+						<mcms-card-header>
+							<div class="flex items-center justify-between">
+								<mcms-card-description>Pages</mcms-card-description>
+								<ng-icon
+									name="heroDocumentText"
+									class="text-muted-foreground"
+									size="20"
+									aria-hidden="true"
+								/>
+							</div>
+							<mcms-card-title>
+								<span class="text-3xl font-bold">{{ totalPages() }}</span>
+							</mcms-card-title>
+						</mcms-card-header>
+					</mcms-card>
+				</div>
+			}
+		</section>
+
+		<!-- Search -->
+		<div class="relative max-w-sm mb-4">
+			<ng-icon
+				name="heroMagnifyingGlass"
+				class="absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground"
+				size="16"
+				aria-hidden="true"
+			/>
+			<input
+				type="text"
+				placeholder="Search pages..."
+				class="w-full pl-9 pr-3 py-2 text-sm rounded-md border border-border bg-background
+					text-foreground placeholder:text-muted-foreground focus:outline-none focus:ring-2
+					focus:ring-primary/50"
+				[value]="searchTerm()"
+				(input)="onSearch($event)"
+				aria-label="Search content pages"
+			/>
+		</div>
+
+		<!-- Pages Table -->
+		@if (service.loading() && service.topPages().length === 0) {
+			<div class="space-y-3">
+				@for (i of [1, 2, 3, 4, 5]; track i) {
+					<mcms-skeleton class="h-12 w-full" />
+				}
+			</div>
+		} @else if (service.error(); as err) {
+			<mcms-card>
+				<mcms-card-content>
+					<p class="text-sm text-destructive">{{ err }}</p>
+				</mcms-card-content>
+			</mcms-card>
+		} @else if (filteredPages().length > 0) {
+			<div class="border border-border rounded-lg overflow-hidden">
+				<div class="overflow-x-auto">
+					<table class="w-full text-sm" role="table">
+						<thead>
+							<tr class="border-b border-border bg-muted/50">
+								<th scope="col" class="px-4 py-3 text-left font-medium text-muted-foreground w-12">
+									#
+								</th>
+								<th scope="col" class="px-4 py-3 text-left font-medium text-muted-foreground">
+									Page
+								</th>
+								<th scope="col" class="px-4 py-3 text-right font-medium text-muted-foreground">
+									Views
+								</th>
+								<th scope="col" class="px-4 py-3 text-right font-medium text-muted-foreground">
+									Visitors
+								</th>
+								<th
+									scope="col"
+									class="px-4 py-3 text-center font-medium text-muted-foreground w-12"
+								>
+									<span class="sr-only">Expand</span>
+								</th>
+							</tr>
+						</thead>
+						<tbody>
+							@for (page of filteredPages(); track page.url; let idx = $index) {
+								<tr
+									class="border-b border-border last:border-0 hover:bg-muted/30 transition-colors cursor-pointer
+										focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary"
+									tabindex="0"
+									role="row"
+									[attr.aria-label]="'Show referrers for ' + page.url"
+									[attr.aria-expanded]="expandedRow() === page.url"
+									(click)="toggleRow(page.url)"
+									(keydown.enter)="toggleRow(page.url)"
+									(keydown.space)="$event.preventDefault(); toggleRow(page.url)"
+								>
+									<td class="px-4 py-3 text-muted-foreground">
+										{{ idx + 1 }}
+									</td>
+									<td class="px-4 py-3 font-medium" [title]="page.url">
+										{{ page.url }}
+									</td>
+									<td class="px-4 py-3 text-right text-muted-foreground">
+										{{ page.pageViews }}
+									</td>
+									<td class="px-4 py-3 text-right text-muted-foreground">
+										{{ page.uniqueVisitors }}
+									</td>
+									<td class="px-4 py-3 text-center">
+										<ng-icon
+											[name]="expandedRow() === page.url ? 'heroChevronUp' : 'heroChevronDown'"
+											size="16"
+											class="text-muted-foreground"
+											aria-hidden="true"
+										/>
+									</td>
+								</tr>
+								@if (expandedRow() === page.url) {
+									<tr class="bg-muted/20">
+										<td colspan="5" class="px-4 py-4">
+											@if (page.referrers.length > 0) {
+												<div>
+													<h4
+														class="text-xs font-semibold uppercase tracking-wider text-muted-foreground mb-2"
+													>
+														Top Referrers
+													</h4>
+													<div class="flex flex-wrap gap-2">
+														@for (ref of page.referrers; track ref.referrer) {
+															<div
+																class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-md bg-background border border-border text-sm"
+															>
+																<span class="truncate max-w-48" [title]="ref.referrer">
+																	{{ ref.referrer }}
+																</span>
+																<mcms-badge variant="secondary">
+																	{{ ref.count }}
+																</mcms-badge>
+															</div>
+														}
+													</div>
+												</div>
+											} @else {
+												<p class="text-sm text-muted-foreground">No referrer data available</p>
+											}
+										</td>
+									</tr>
+								}
+							}
+						</tbody>
+					</table>
+				</div>
+			</div>
+		} @else {
+			<mcms-card>
+				<mcms-card-content>
+					<div class="flex flex-col items-center justify-center py-12 text-center">
+						<ng-icon
+							name="heroGlobeAlt"
+							class="text-muted-foreground mb-4"
+							size="40"
+							aria-hidden="true"
+						/>
+						<p class="text-foreground font-medium">No page views recorded</p>
+						<p class="text-sm text-muted-foreground mt-1">
+							Page view events will appear here as visitors browse your site
+						</p>
+					</div>
+				</mcms-card-content>
+			</mcms-card>
+		}
+	`
+      })
+    ], ContentPerformancePage);
+  }
+});
+
+// libs/plugins/analytics/src/lib/dashboard/tracking-rule-form.dialog.ts
+import {
+  Component as Component4,
+  ChangeDetectionStrategy as ChangeDetectionStrategy4,
+  inject as inject4,
+  signal as signal6,
+  computed as computed4,
+  PLATFORM_ID as PLATFORM_ID4
+} from "@angular/core";
+import { isPlatformBrowser as isPlatformBrowser4 } from "@angular/common";
+import {
+  Dialog,
+  DialogHeader,
+  DialogTitle,
+  DialogContent,
+  DialogFooter,
+  DialogClose,
+  DIALOG_DATA,
+  DialogRef,
+  Input,
+  Select,
+  Switch,
+  Button,
+  McmsFormField
+} from "@momentumcms/ui";
+var EVENT_TYPE_OPTIONS, TrackingRuleFormDialog;
+var init_tracking_rule_form_dialog = __esm({
+  "libs/plugins/analytics/src/lib/dashboard/tracking-rule-form.dialog.ts"() {
+    "use strict";
+    init_type_guards();
+    EVENT_TYPE_OPTIONS = [
+      { label: "Click", value: "click" },
+      { label: "Submit", value: "submit" },
+      { label: "Scroll Into View", value: "scroll-into-view" },
+      { label: "Hover", value: "hover" },
+      { label: "Focus", value: "focus" }
+    ];
+    TrackingRuleFormDialog = class {
+      constructor() {
+        this.data = inject4(DIALOG_DATA);
+        this.dialogRef = inject4(DialogRef);
+        this.platformId = inject4(PLATFORM_ID4);
+        this.name = signal6(this.data.rule?.name ?? "");
+        this.selector = signal6(this.data.rule?.selector ?? "");
+        this.eventType = signal6(this.data.rule?.eventType ?? "click");
+        this.eventName = signal6(this.data.rule?.eventName ?? "");
+        this.urlPattern = signal6(this.data.rule?.urlPattern ?? "*");
+        this.active = signal6(this.data.rule?.active ?? true);
+        this.rateLimitStr = signal6(this.data.rule?.rateLimit?.toString() ?? "");
+        this.propertiesStr = signal6(
+          this.data.rule?.properties && Object.keys(this.data.rule.properties).length > 0 ? JSON.stringify(this.data.rule.properties) : ""
+        );
+        this.saving = signal6(false);
+        this.submitted = signal6(false);
+        this.eventTypeOptions = EVENT_TYPE_OPTIONS;
+        this.isValid = computed4(
+          () => this.name().trim().length > 0 && this.selector().trim().length > 0 && this.eventName().trim().length > 0
+        );
+      }
+      async save() {
+        this.submitted.set(true);
+        if (!this.isValid() || this.saving())
+          return;
+        if (!isPlatformBrowser4(this.platformId))
+          return;
+        this.saving.set(true);
+        let properties = {};
+        const propsStr = this.propertiesStr().trim();
+        if (propsStr) {
+          try {
+            const parsed = JSON.parse(propsStr);
+            if (isRecord(parsed)) {
+              properties = parsed;
+            }
+          } catch {
+          }
+        }
+        const rateLimitVal = this.rateLimitStr().trim();
+        const body = {
+          name: this.name().trim(),
+          selector: this.selector().trim(),
+          eventType: this.eventType(),
+          eventName: this.eventName().trim(),
+          urlPattern: this.urlPattern().trim() || "*",
+          active: this.active(),
+          properties
+        };
+        if (rateLimitVal && !Number.isNaN(Number(rateLimitVal))) {
+          body["rateLimit"] = Number(rateLimitVal);
+        }
+        try {
+          if (this.data.mode === "edit" && this.data.rule) {
+            await fetch(`/api/tracking-rules/${this.data.rule.id}`, {
+              method: "PATCH",
+              headers: { "Content-Type": "application/json" },
+              body: JSON.stringify(body)
+            });
+          } else {
+            await fetch("/api/tracking-rules", {
+              method: "POST",
+              headers: { "Content-Type": "application/json" },
+              body: JSON.stringify(body)
+            });
+          }
+          this.dialogRef.close("saved");
+        } finally {
+          this.saving.set(false);
+        }
+      }
+    };
+    TrackingRuleFormDialog = __decorateClass([
+      Component4({
+        selector: "mcms-tracking-rule-form-dialog",
+        imports: [
+          Dialog,
+          DialogHeader,
+          DialogTitle,
+          DialogContent,
+          DialogFooter,
+          DialogClose,
+          Input,
+          Select,
+          Switch,
+          Button,
+          McmsFormField
+        ],
+        changeDetection: ChangeDetectionStrategy4.OnPush,
+        template: `
+		<mcms-dialog>
+			<mcms-dialog-header>
+				<mcms-dialog-title>
+					{{ data.mode === 'create' ? 'Create Tracking Rule' : 'Edit Tracking Rule' }}
+				</mcms-dialog-title>
+			</mcms-dialog-header>
+
+			<mcms-dialog-content>
+				<div class="space-y-4">
+					<mcms-form-field id="rule-name" [required]="true">
+						<span mcmsLabel>Rule Name</span>
+						<mcms-input
+							[(value)]="name"
+							placeholder="e.g. CTA Button Click"
+							id="rule-name"
+							[attr.aria-invalid]="submitted() && name().trim().length === 0"
+							[attr.aria-describedby]="
+								submitted() && name().trim().length === 0 ? 'rule-name-error' : null
+							"
+						/>
+						@if (submitted() && name().trim().length === 0) {
+							<span id="rule-name-error" class="text-sm text-destructive mt-1"
+								>Rule Name is required</span
+							>
+						}
+					</mcms-form-field>
+
+					<mcms-form-field id="rule-selector" [required]="true">
+						<span mcmsLabel>CSS Selector</span>
+						<mcms-input
+							[(value)]="selector"
+							placeholder="e.g. .cta-button, #signup-form"
+							id="rule-selector"
+							[attr.aria-invalid]="submitted() && selector().trim().length === 0"
+							[attr.aria-describedby]="
+								submitted() && selector().trim().length === 0 ? 'rule-selector-error' : null
+							"
+						/>
+						@if (submitted() && selector().trim().length === 0) {
+							<span id="rule-selector-error" class="text-sm text-destructive mt-1"
+								>CSS Selector is required</span
+							>
+						}
+					</mcms-form-field>
+
+					<mcms-form-field id="rule-event-type" [required]="true">
+						<span mcmsLabel>Event Type</span>
+						<mcms-select [(value)]="eventType" [options]="eventTypeOptions" id="rule-event-type" />
+					</mcms-form-field>
+
+					<mcms-form-field id="rule-event-name" [required]="true">
+						<span mcmsLabel>Event Name</span>
+						<mcms-input
+							[(value)]="eventName"
+							placeholder="e.g. cta_click"
+							id="rule-event-name"
+							[attr.aria-invalid]="submitted() && eventName().trim().length === 0"
+							[attr.aria-describedby]="
+								submitted() && eventName().trim().length === 0 ? 'rule-event-name-error' : null
+							"
+						/>
+						@if (submitted() && eventName().trim().length === 0) {
+							<span id="rule-event-name-error" class="text-sm text-destructive mt-1"
+								>Event Name is required</span
+							>
+						}
+					</mcms-form-field>
+
+					<mcms-form-field id="rule-url-pattern" [hint]="'Use * for wildcards, e.g. /blog/*'">
+						<span mcmsLabel>URL Pattern</span>
+						<mcms-input [(value)]="urlPattern" placeholder="*" id="rule-url-pattern" />
+					</mcms-form-field>
+
+					<mcms-form-field
+						id="rule-rate-limit"
+						[hint]="'Max events per minute per visitor. Leave empty for unlimited.'"
+					>
+						<span mcmsLabel>Rate Limit</span>
+						<mcms-input
+							[(value)]="rateLimitStr"
+							type="number"
+							placeholder="Optional"
+							id="rule-rate-limit"
+						/>
+					</mcms-form-field>
+
+					<mcms-form-field
+						id="rule-properties"
+						[hint]="'JSON object, e.g. {&quot;category&quot;: &quot;cta&quot;}'"
+					>
+						<span mcmsLabel>Static Properties</span>
+						<mcms-input [(value)]="propertiesStr" placeholder="{}" id="rule-properties" />
+					</mcms-form-field>
+
+					<div class="pt-2">
+						<mcms-switch [(value)]="active">Active</mcms-switch>
+					</div>
+				</div>
+			</mcms-dialog-content>
+
+			<mcms-dialog-footer>
+				<button mcms-button variant="outline" mcmsDialogClose>Cancel</button>
+				<button mcms-button [disabled]="!isValid()" [loading]="saving()" (click)="save()">
+					{{ data.mode === 'create' ? 'Create' : 'Save' }}
+				</button>
+			</mcms-dialog-footer>
+		</mcms-dialog>
+	`
+      })
+    ], TrackingRuleFormDialog);
+  }
+});
+
+// libs/plugins/analytics/src/lib/dashboard/tracking-rules.page.ts
+var tracking_rules_page_exports = {};
+__export(tracking_rules_page_exports, {
+  TrackingRulesPage: () => TrackingRulesPage
+});
+import {
+  Component as Component5,
+  ChangeDetectionStrategy as ChangeDetectionStrategy5,
+  inject as inject5,
+  signal as signal7,
+  computed as computed5,
+  PLATFORM_ID as PLATFORM_ID5
+} from "@angular/core";
+import { isPlatformBrowser as isPlatformBrowser5 } from "@angular/common";
+import {
+  Card as Card4,
+  CardHeader as CardHeader4,
+  CardTitle as CardTitle4,
+  CardDescription as CardDescription3,
+  Badge as Badge4,
+  Skeleton as Skeleton4,
+  Button as Button2,
+  Switch as Switch2,
+  DialogService,
+  DropdownMenu,
+  DropdownTrigger,
+  DropdownMenuItem,
+  DropdownSeparator
+} from "@momentumcms/ui";
+import { ConfirmationService } from "@momentumcms/ui";
+import { NgIcon as NgIcon4, provideIcons as provideIcons4 } from "@ng-icons/core";
+import {
+  heroCursorArrowRays,
+  heroArrowPath as heroArrowPath2,
+  heroPlus,
+  heroEllipsisVertical
+} from "@ng-icons/heroicons/outline";
+function parseRuleEntry(doc) {
+  if (!isRecord(doc))
+    return null;
+  if (typeof doc["id"] !== "string")
+    return null;
+  return {
+    id: doc["id"],
+    name: typeof doc["name"] === "string" ? doc["name"] : "(unnamed)",
+    selector: typeof doc["selector"] === "string" ? doc["selector"] : "",
+    eventType: typeof doc["eventType"] === "string" ? doc["eventType"] : "click",
+    eventName: typeof doc["eventName"] === "string" ? doc["eventName"] : "",
+    urlPattern: typeof doc["urlPattern"] === "string" ? doc["urlPattern"] : "*",
+    active: doc["active"] === true,
+    rateLimit: typeof doc["rateLimit"] === "number" ? doc["rateLimit"] : void 0,
+    properties: isRecord(doc["properties"]) ? doc["properties"] : void 0
+  };
+}
+var TrackingRulesPage;
+var init_tracking_rules_page = __esm({
+  "libs/plugins/analytics/src/lib/dashboard/tracking-rules.page.ts"() {
+    "use strict";
+    init_tracking_rule_form_dialog();
+    init_type_guards();
+    TrackingRulesPage = class {
+      constructor() {
+        this.platformId = inject5(PLATFORM_ID5);
+        this.dialog = inject5(DialogService);
+        this.confirmation = inject5(ConfirmationService);
+        this.loading = signal7(false);
+        this.rules = signal7([]);
+        this.totalRules = computed5(() => this.rules().length);
+        this.activeRules = computed5(() => this.rules().filter((r) => r.active).length);
+        this.inactiveRules = computed5(() => this.rules().filter((r) => !r.active).length);
+      }
+      ngOnInit() {
+        if (!isPlatformBrowser5(this.platformId))
+          return;
+        void this.fetchRules();
+      }
+      refresh() {
+        void this.fetchRules();
+      }
+      openCreateDialog() {
+        const data = { mode: "create" };
+        const ref = this.dialog.open(TrackingRuleFormDialog, { data, width: "32rem" });
+        ref.afterClosed.subscribe((result) => {
+          if (result === "saved")
+            void this.fetchRules();
+        });
+      }
+      openEditDialog(rule) {
+        const data = { mode: "edit", rule };
+        const ref = this.dialog.open(TrackingRuleFormDialog, { data, width: "32rem" });
+        ref.afterClosed.subscribe((result) => {
+          if (result === "saved")
+            void this.fetchRules();
+        });
+      }
+      async toggleActive(rule) {
+        if (!isPlatformBrowser5(this.platformId))
+          return;
+        const newActive = !rule.active;
+        this.rules.update(
+          (rules) => rules.map((r) => r.id === rule.id ? { ...r, active: newActive } : r)
+        );
+        try {
+          await fetch(`/api/tracking-rules/${rule.id}`, {
+            method: "PATCH",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify({ active: newActive })
+          });
+        } catch {
+          this.rules.update(
+            (rules) => rules.map((r) => r.id === rule.id ? { ...r, active: rule.active } : r)
+          );
+        }
+      }
+      async deleteRule(rule) {
+        if (!isPlatformBrowser5(this.platformId))
+          return;
+        const confirmed = await this.confirmation.delete(rule.name);
+        if (!confirmed)
+          return;
+        try {
+          await fetch(`/api/tracking-rules/${rule.id}`, { method: "DELETE" });
+          void this.fetchRules();
+        } catch {
+        }
+      }
+      async fetchRules() {
+        this.loading.set(true);
+        try {
+          const res = await fetch("/api/tracking-rules?limit=100");
+          if (!res.ok)
+            return;
+          const data = await res.json();
+          if (!isRecord(data) || !Array.isArray(data["docs"]))
+            return;
+          const entries = data["docs"].map(parseRuleEntry).filter((entry) => entry != null);
+          this.rules.set(entries);
+        } catch {
+        } finally {
+          this.loading.set(false);
+        }
+      }
+    };
+    TrackingRulesPage = __decorateClass([
+      Component5({
+        selector: "mcms-tracking-rules-page",
+        imports: [
+          Card4,
+          CardHeader4,
+          CardTitle4,
+          CardDescription3,
+          Badge4,
+          Skeleton4,
+          Button2,
+          Switch2,
+          NgIcon4,
+          DropdownMenu,
+          DropdownTrigger,
+          DropdownMenuItem,
+          DropdownSeparator
+        ],
+        providers: [provideIcons4({ heroCursorArrowRays, heroArrowPath: heroArrowPath2, heroPlus, heroEllipsisVertical })],
+        changeDetection: ChangeDetectionStrategy5.OnPush,
+        host: { class: "block max-w-6xl" },
+        template: `
+		<header class="mb-10">
+			<div class="flex items-center justify-between">
+				<div>
+					<h1 class="text-4xl font-bold tracking-tight text-foreground">Tracking Rules</h1>
+					<p class="text-muted-foreground mt-3 text-lg">
+						Manage CSS selector-based event tracking rules
+					</p>
+				</div>
+				<div class="flex items-center gap-2">
+					<button
+						mcms-button
+						variant="outline"
+						size="sm"
+						(click)="refresh()"
+						ariaLabel="Refresh tracking rules"
+					>
+						<ng-icon name="heroArrowPath" size="16" aria-hidden="true" />
+						Refresh
+					</button>
+					<button mcms-button size="sm" (click)="openCreateDialog()" ariaLabel="New Rule">
+						<ng-icon name="heroPlus" size="16" aria-hidden="true" />
+						New Rule
+					</button>
+				</div>
+			</div>
+		</header>
+
+		<!-- Summary Cards -->
+		<div class="grid grid-cols-1 sm:grid-cols-3 gap-6 mb-8">
+			<mcms-card>
+				<mcms-card-header>
+					<div class="flex items-center justify-between">
+						<mcms-card-description>Total Rules</mcms-card-description>
+						<ng-icon
+							name="heroCursorArrowRays"
+							class="text-muted-foreground"
+							size="20"
+							aria-hidden="true"
+						/>
+					</div>
+					<mcms-card-title>
+						<span class="text-3xl font-bold">{{ totalRules() }}</span>
+					</mcms-card-title>
+				</mcms-card-header>
+			</mcms-card>
+			<mcms-card>
+				<mcms-card-header>
+					<mcms-card-description>Active</mcms-card-description>
+					<mcms-card-title>
+						<span class="text-3xl font-bold text-emerald-600">{{ activeRules() }}</span>
+					</mcms-card-title>
+				</mcms-card-header>
+			</mcms-card>
+			<mcms-card>
+				<mcms-card-header>
+					<mcms-card-description>Inactive</mcms-card-description>
+					<mcms-card-title>
+						<span class="text-3xl font-bold text-muted-foreground">{{ inactiveRules() }}</span>
+					</mcms-card-title>
+				</mcms-card-header>
+			</mcms-card>
+		</div>
+
+		<!-- Rules Table -->
+		@if (loading() && rules().length === 0) {
+			<div class="space-y-3">
+				@for (i of [1, 2, 3]; track i) {
+					<mcms-skeleton class="h-14 w-full" />
+				}
+			</div>
+		} @else if (rules().length > 0) {
+			<div class="border border-border rounded-lg overflow-hidden">
+				<div class="overflow-x-auto">
+					<table class="w-full text-sm" role="table">
+						<thead>
+							<tr class="border-b border-border bg-muted/50">
+								<th scope="col" class="px-4 py-3 text-left font-medium text-muted-foreground">
+									Name
+								</th>
+								<th scope="col" class="px-4 py-3 text-left font-medium text-muted-foreground">
+									Selector
+								</th>
+								<th scope="col" class="px-4 py-3 text-left font-medium text-muted-foreground">
+									Event
+								</th>
+								<th scope="col" class="px-4 py-3 text-left font-medium text-muted-foreground">
+									URL Pattern
+								</th>
+								<th scope="col" class="px-4 py-3 text-center font-medium text-muted-foreground">
+									Active
+								</th>
+								<th scope="col" class="px-4 py-3 text-right font-medium text-muted-foreground">
+									Actions
+								</th>
+							</tr>
+						</thead>
+						<tbody>
+							@for (rule of rules(); track rule.id) {
+								<tr
+									class="border-b border-border last:border-0 hover:bg-muted/30
+										transition-colors"
+								>
+									<td class="px-4 py-3 font-medium text-foreground">
+										{{ rule.name }}
+									</td>
+									<td
+										class="px-4 py-3 font-mono text-xs text-muted-foreground max-w-48 truncate"
+										[title]="rule.selector"
+									>
+										{{ rule.selector }}
+									</td>
+									<td class="px-4 py-3">
+										<mcms-badge variant="outline">{{ rule.eventType }}</mcms-badge>
+										<span class="text-muted-foreground ml-1">\u2192</span>
+										<span class="ml-1 text-foreground">{{ rule.eventName }}</span>
+									</td>
+									<td class="px-4 py-3 text-muted-foreground">
+										{{ rule.urlPattern }}
+									</td>
+									<td class="px-4 py-3 text-center">
+										<mcms-switch
+											[value]="rule.active"
+											(valueChange)="toggleActive(rule)"
+											ariaLabel="Toggle active"
+										/>
+									</td>
+									<td class="px-4 py-3 text-right">
+										<button
+											mcms-button
+											variant="ghost"
+											size="icon"
+											[mcmsDropdownTrigger]="ruleMenu"
+											ariaLabel="Rule actions"
+										>
+											<ng-icon name="heroEllipsisVertical" size="16" aria-hidden="true" />
+										</button>
+										<ng-template #ruleMenu>
+											<mcms-dropdown-menu>
+												<button mcms-dropdown-item value="edit" (selected)="openEditDialog(rule)">
+													Edit
+												</button>
+												<mcms-dropdown-separator />
+												<button mcms-dropdown-item value="delete" (selected)="deleteRule(rule)">
+													Delete
+												</button>
+											</mcms-dropdown-menu>
+										</ng-template>
+									</td>
+								</tr>
+							}
+						</tbody>
+					</table>
+				</div>
+			</div>
+		} @else {
+			<div class="flex flex-col items-center justify-center py-16 text-center">
+				<ng-icon
+					name="heroCursorArrowRays"
+					class="text-muted-foreground mb-4"
+					size="40"
+					aria-hidden="true"
+				/>
+				<p class="text-foreground font-medium">No tracking rules defined</p>
+				<p class="text-sm text-muted-foreground mt-1 mb-6">
+					Create your first tracking rule to start tracking element interactions
+				</p>
+				<button mcms-button size="sm" (click)="openCreateDialog()">
+					<ng-icon name="heroPlus" size="16" aria-hidden="true" />
+					New Rule
+				</button>
+			</div>
+		}
+	`
+      })
+    ], TrackingRulesPage);
+  }
+});
+
+// libs/plugins/analytics/src/lib/analytics-admin-routes.ts
+var analyticsAdminRoutes = [
+  {
+    path: "analytics",
+    label: "Analytics",
+    icon: "heroChartBarSquare",
+    loadComponent: () => Promise.resolve().then(() => (init_analytics_dashboard_page(), analytics_dashboard_page_exports)).then((m) => m.AnalyticsDashboardPage),
+    group: "Analytics"
+  },
+  {
+    path: "analytics/content",
+    label: "Content Perf.",
+    icon: "heroDocumentText",
+    loadComponent: () => Promise.resolve().then(() => (init_content_performance_page(), content_performance_page_exports)).then((m) => m.ContentPerformancePage),
+    group: "Analytics"
+  },
+  {
+    path: "analytics/tracking-rules",
+    label: "Tracking Rules",
+    icon: "heroCursorArrowRays",
+    loadComponent: () => Promise.resolve().then(() => (init_tracking_rules_page(), tracking_rules_page_exports)).then((m) => m.TrackingRulesPage),
+    group: "Analytics"
+  }
+];
+export {
+  analyticsAdminRoutes
+};