@orion-studios/payload-seo-audit 1.0.0

package/dist/components/views/SeoSnapshotReport.js

@@ -0,0 +1,224 @@
+"use strict";
+'use client';
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SeoSnapshotReport = void 0;
+const react_1 = __importStar(require("react"));
+const ScoreGauge_1 = require("../visualization/ScoreGauge");
+const MetricCard_1 = require("../visualization/MetricCard");
+const CategoryScoreGrid_1 = require("../visualization/CategoryScoreGrid");
+const IssueCategoryChart_1 = require("../visualization/IssueCategoryChart");
+const SeverityBadge_1 = require("../visualization/SeverityBadge");
+const IssueTable_1 = require("../tables/IssueTable");
+const PageResultsTable_1 = require("../tables/PageResultsTable");
+const SeoReportShell_1 = require("../layout/SeoReportShell");
+const SeoReportHeader_1 = require("../layout/SeoReportHeader");
+const PdfDownloadButton_1 = require("../pdf/PdfDownloadButton");
+const formatters_1 = require("../utils/formatters");
+const scoreHelpers_1 = require("../utils/scoreHelpers");
+const types_1 = require("../types");
+const getIdFromPath = () => {
+    if (typeof window === 'undefined')
+        return null;
+    const segments = window.location.pathname.split('/');
+    const idx = segments.indexOf('seo-snapshots');
+    if (idx >= 0 && segments[idx + 1]) {
+        return segments[idx + 1];
+    }
+    return null;
+};
+const SeoSnapshotReport = () => {
+    const [reportData, setReportData] = (0, react_1.useState)(null);
+    const [loading, setLoading] = (0, react_1.useState)(true);
+    const [error, setError] = (0, react_1.useState)(null);
+    const [pageResultsDocs, setPageResultsDocs] = (0, react_1.useState)([]);
+    const [pageResultsPagination, setPageResultsPagination] = (0, react_1.useState)({
+        totalDocs: 0,
+        totalPages: 0,
+        page: 1,
+        hasNextPage: false,
+        hasPrevPage: false,
+    });
+    const [pageResultsLoading, setPageResultsLoading] = (0, react_1.useState)(false);
+    const [activeTab, setActiveTab] = (0, react_1.useState)('overview');
+    const snapshotId = (0, react_1.useMemo)(() => getIdFromPath(), []);
+    const fetchReport = (0, react_1.useCallback)(async () => {
+        if (!snapshotId) {
+            setError('Could not determine snapshot ID.');
+            setLoading(false);
+            return;
+        }
+        setLoading(true);
+        setError(null);
+        try {
+            const response = await fetch(`/api/seo/snapshot-report?snapshot=${snapshotId}`, {
+                credentials: 'include',
+            });
+            if (!response.ok) {
+                const body = (await response.json().catch(() => ({})));
+                throw new Error(body.error || `Request failed with ${response.status}`);
+            }
+            const data = (await response.json());
+            setReportData(data);
+            setPageResultsDocs(data.pageResults.slice(0, 50));
+            setPageResultsPagination({
+                totalDocs: data.pageResults.length,
+                totalPages: Math.ceil(data.pageResults.length / 50),
+                page: 1,
+                hasNextPage: data.pageResults.length > 50,
+                hasPrevPage: false,
+            });
+        }
+        catch (err) {
+            setError(err instanceof Error ? err.message : 'Failed to load snapshot report.');
+        }
+        finally {
+            setLoading(false);
+        }
+    }, [snapshotId]);
+    (0, react_1.useEffect)(() => {
+        void fetchReport();
+    }, [fetchReport]);
+    const handlePageResultsPageChange = (0, react_1.useCallback)((page) => {
+        if (!reportData)
+            return;
+        const start = (page - 1) * 50;
+        const end = start + 50;
+        setPageResultsDocs(reportData.pageResults.slice(start, end));
+        setPageResultsPagination((prev) => ({
+            ...prev,
+            page,
+            hasNextPage: end < reportData.pageResults.length,
+            hasPrevPage: page > 1,
+        }));
+    }, [reportData]);
+    const handleSelectPage = (0, react_1.useCallback)((pageResult) => {
+        window.location.href = `/admin/collections/seo-page-results/${pageResult.id}`;
+    }, []);
+    const allIssues = (0, react_1.useMemo)(() => {
+        if (!reportData)
+            return [];
+        return reportData.pageResults.flatMap((pr) => (pr.issues || []).map((issue) => ({ ...issue, url: pr.url })));
+    }, [reportData]);
+    const severityTotal = (0, react_1.useMemo)(() => {
+        if (!reportData?.aggregated?.severityDistribution)
+            return 0;
+        return Object.values(reportData.aggregated.severityDistribution).reduce((a, b) => a + b, 0);
+    }, [reportData]);
+    if (loading) {
+        return (react_1.default.createElement(SeoReportShell_1.SeoReportShell, null,
+            react_1.default.createElement("div", { className: "flex items-center gap-3 py-12" },
+                react_1.default.createElement("div", { className: "h-5 w-5 animate-spin rounded-full border-2 border-slate-300 border-t-slate-600 dark:border-slate-600 dark:border-t-slate-300" }),
+                react_1.default.createElement("p", { className: "text-sm text-slate-500 dark:text-slate-400" }, "Loading snapshot report..."))));
+    }
+    if (error || !reportData) {
+        return (react_1.default.createElement(SeoReportShell_1.SeoReportShell, { onBack: () => window.history.back(), backLabel: "Back to Snapshots" },
+            react_1.default.createElement("div", { className: "rounded-md border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700 dark:border-red-800 dark:bg-red-900/30 dark:text-red-300" }, error || 'No data available.')));
+    }
+    const { snapshot, aggregated } = reportData;
+    const scores = snapshot.scores || {};
+    const metrics = snapshot.metrics || {};
+    const issueCounts = snapshot.issueCounts || {};
+    const overallScore = scores.overall ?? 0;
+    return (react_1.default.createElement(SeoReportShell_1.SeoReportShell, { onBack: () => window.history.back(), backLabel: "Back to Snapshots" },
+        react_1.default.createElement("div", { className: "space-y-6", id: "seo-snapshot-report" },
+            react_1.default.createElement(SeoReportHeader_1.SeoReportHeader, { title: snapshot.runLabel || 'SEO Audit Report', subtitle: (0, formatters_1.formatTimestamp)(snapshot.startedAt), actions: react_1.default.createElement(PdfDownloadButton_1.PdfDownloadButton, { targetId: "seo-snapshot-report", filename: `seo-report-${snapshot.runLabel || snapshotId}` }), badges: react_1.default.createElement(react_1.default.Fragment, null,
+                    react_1.default.createElement("span", { className: "inline-flex items-center rounded-full border border-slate-200 bg-slate-50 px-2.5 py-0.5 text-xs font-medium text-slate-600 dark:border-slate-700 dark:bg-slate-800 dark:text-slate-400" }, snapshot.runType || 'manual'),
+                    react_1.default.createElement("span", { className: `inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-medium ${snapshot.status === 'completed'
+                            ? 'border-green-200 bg-green-50 text-green-700 dark:border-green-800 dark:bg-green-900/30 dark:text-green-400'
+                            : snapshot.status === 'failed'
+                                ? 'border-red-200 bg-red-50 text-red-700 dark:border-red-800 dark:bg-red-900/30 dark:text-red-300'
+                                : 'border-amber-200 bg-amber-50 text-amber-700 dark:border-amber-800 dark:bg-amber-900/30 dark:text-amber-400'}` }, snapshot.status)) }),
+            react_1.default.createElement("div", { className: "grid grid-cols-1 gap-6 md:grid-cols-3" },
+                react_1.default.createElement("div", { className: "flex flex-col items-center justify-center gap-2 rounded-lg border border-slate-200 bg-gradient-to-br from-slate-50 to-white py-8 dark:border-slate-700 dark:from-slate-800/50 dark:to-slate-900/50" },
+                    react_1.default.createElement(ScoreGauge_1.ScoreGauge, { score: overallScore, size: 140, showGrade: true })),
+                react_1.default.createElement("div", { className: "col-span-2 grid grid-cols-2 gap-3 sm:grid-cols-3" },
+                    react_1.default.createElement(MetricCard_1.MetricCard, { label: "Pages Checked", value: (0, formatters_1.formatNumber)(metrics.pagesChecked) }),
+                    react_1.default.createElement(MetricCard_1.MetricCard, { label: "Critical", value: issueCounts.critical ?? 0, valueClassName: (issueCounts.critical ?? 0) > 0 ? 'text-red-600 dark:text-red-400' : 'text-slate-900 dark:text-slate-100' }),
+                    react_1.default.createElement(MetricCard_1.MetricCard, { label: "High", value: issueCounts.high ?? 0, valueClassName: (issueCounts.high ?? 0) > 0 ? 'text-orange-600 dark:text-orange-400' : 'text-slate-900 dark:text-slate-100' }),
+                    react_1.default.createElement(MetricCard_1.MetricCard, { label: "Medium", value: issueCounts.medium ?? 0 }),
+                    react_1.default.createElement(MetricCard_1.MetricCard, { label: "Lighthouse", value: metrics.avgLighthousePerformance != null
+                            ? (0, formatters_1.formatScore)(metrics.avgLighthousePerformance)
+                            : '-', subtext: "Avg Performance" }),
+                    react_1.default.createElement(MetricCard_1.MetricCard, { label: "Avg LCP", value: (0, formatters_1.formatMs)(metrics.avgLCPMs) }))),
+            react_1.default.createElement("div", null,
+                react_1.default.createElement("h2", { className: "mb-3 text-sm font-semibold text-slate-900 dark:text-slate-100" }, "Category Scores"),
+                react_1.default.createElement(CategoryScoreGrid_1.CategoryScoreGrid, { scores: scores })),
+            severityTotal > 0 && (react_1.default.createElement("div", null,
+                react_1.default.createElement("h2", { className: "mb-3 text-sm font-semibold text-slate-900 dark:text-slate-100" }, "Issue Severity Distribution"),
+                react_1.default.createElement("div", { className: "overflow-hidden rounded-lg border border-slate-200 dark:border-slate-700" },
+                    react_1.default.createElement("div", { className: "flex h-8" }, types_1.SEVERITY_ORDER.map((severity) => {
+                        const count = reportData.aggregated.severityDistribution[severity] || 0;
+                        if (count === 0)
+                            return null;
+                        const pct = (count / severityTotal) * 100;
+                        return (react_1.default.createElement("div", { key: severity, className: `flex items-center justify-center text-xs font-medium text-white ${(0, scoreHelpers_1.getSeverityBarColor)(severity)}`, style: { width: `${pct}%` }, title: `${severity}: ${count}` }, pct >= 10 ? `${severity} (${count})` : count > 0 ? count : ''));
+                    })),
+                    react_1.default.createElement("div", { className: "flex flex-wrap gap-3 border-t border-slate-200 bg-slate-50 px-3 py-2 dark:border-slate-700 dark:bg-slate-800" }, types_1.SEVERITY_ORDER.map((severity) => {
+                        const count = reportData.aggregated.severityDistribution[severity] || 0;
+                        if (count === 0)
+                            return null;
+                        return (react_1.default.createElement("div", { key: severity, className: "flex items-center gap-1.5" },
+                            react_1.default.createElement(SeverityBadge_1.SeverityBadge, { severity: severity }),
+                            react_1.default.createElement("span", { className: "text-xs text-slate-600 dark:text-slate-400" }, count)));
+                    }))))),
+            react_1.default.createElement("div", { className: "border-b border-slate-200 dark:border-slate-700" },
+                react_1.default.createElement("div", { className: "flex gap-6" }, ['overview', 'pages', 'issues'].map((tab) => (react_1.default.createElement("button", { key: tab, type: "button", onClick: () => setActiveTab(tab), className: `border-b-2 pb-2 text-sm font-medium transition-colors ${activeTab === tab
+                        ? 'border-slate-900 text-slate-900 dark:border-slate-100 dark:text-slate-100'
+                        : 'border-transparent text-slate-500 hover:text-slate-700 dark:text-slate-400 dark:hover:text-slate-200'}` },
+                    tab === 'overview' && 'Overview',
+                    tab === 'pages' && `Pages (${reportData.pageResults.length})`,
+                    tab === 'issues' && `Issues (${allIssues.length})`))))),
+            activeTab === 'overview' && (react_1.default.createElement("div", { className: "space-y-6" },
+                react_1.default.createElement("div", null,
+                    react_1.default.createElement("h2", { className: "mb-3 text-sm font-semibold text-slate-900 dark:text-slate-100" }, "Issues by Category"),
+                    react_1.default.createElement(IssueCategoryChart_1.IssueCategoryChart, { categoryDistribution: aggregated.categoryDistribution })),
+                aggregated.worstPages.length > 0 && (react_1.default.createElement("div", null,
+                    react_1.default.createElement("h2", { className: "mb-3 text-sm font-semibold text-slate-900 dark:text-slate-100" }, "Pages Needing Attention"),
+                    react_1.default.createElement("div", { className: "overflow-x-auto rounded-lg border border-slate-200 dark:border-slate-700" },
+                        react_1.default.createElement("table", { className: "w-full text-sm" },
+                            react_1.default.createElement("thead", null,
+                                react_1.default.createElement("tr", { className: "border-b border-slate-200 bg-slate-50 dark:border-slate-700 dark:bg-slate-800" },
+                                    react_1.default.createElement("th", { className: "px-3 py-2 text-left font-medium text-slate-600 dark:text-slate-400" }, "URL"),
+                                    react_1.default.createElement("th", { className: "px-3 py-2 text-center font-medium text-slate-600 dark:text-slate-400" }, "Score"),
+                                    react_1.default.createElement("th", { className: "px-3 py-2 text-center font-medium text-slate-600 dark:text-slate-400" }, "Issues"))),
+                            react_1.default.createElement("tbody", null, aggregated.worstPages.map((page) => (react_1.default.createElement("tr", { key: page.url, className: "border-b border-slate-100 dark:border-slate-700" },
+                                react_1.default.createElement("td", { className: "px-3 py-2 text-blue-600 dark:text-blue-400" }, page.url),
+                                react_1.default.createElement("td", { className: "px-3 py-2 text-center font-medium text-slate-900 dark:text-slate-100" }, page.score),
+                                react_1.default.createElement("td", { className: "px-3 py-2 text-center text-slate-600 dark:text-slate-400" }, page.issueCount))))))))))),
+            activeTab === 'pages' && (react_1.default.createElement(PageResultsTable_1.PageResultsTable, { docs: pageResultsDocs, pagination: pageResultsPagination, loading: pageResultsLoading, onPageChange: handlePageResultsPageChange, onSelectPage: handleSelectPage })),
+            activeTab === 'issues' && react_1.default.createElement(IssueTable_1.IssueTable, { issues: allIssues, pageSize: 20 }))));
+};
+exports.SeoSnapshotReport = SeoSnapshotReport;

package/dist/components/visualization/CategoryScoreCard.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import type { SEOIssueCategory } from '../types';
+type CategoryScoreCardProps = {
+    category: SEOIssueCategory;
+    score: number;
+    previousScore?: number | null;
+    icon?: React.ReactNode;
+};
+export declare const CategoryScoreCard: React.FC<CategoryScoreCardProps>;
+export {};
+//# sourceMappingURL=CategoryScoreCard.d.ts.map

package/dist/components/visualization/CategoryScoreCard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CategoryScoreCard.d.ts","sourceRoot":"","sources":["../../../src/components/visualization/CategoryScoreCard.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAA;AAGhD,KAAK,sBAAsB,GAAG;IAC5B,QAAQ,EAAE,gBAAgB,CAAA;IAC1B,KAAK,EAAE,MAAM,CAAA;IACb,aAAa,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAC7B,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CACvB,CAAA;AAED,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CAoB9D,CAAA"}

package/dist/components/visualization/CategoryScoreCard.js

@@ -0,0 +1,17 @@
+"use strict";
+'use client';
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CategoryScoreCard = void 0;
+const react_1 = __importDefault(require("react"));
+const ScoreBar_1 = require("./ScoreBar");
+const types_1 = require("../types");
+const CategoryScoreCard = ({ category, score, previousScore, icon, }) => {
+    const label = types_1.CATEGORY_LABELS[category];
+    const weight = `${Math.round(types_1.CATEGORY_WEIGHTS[category] * 100)}%`;
+    return (react_1.default.createElement("div", { className: "rounded-lg border border-slate-200 bg-white p-4 dark:border-slate-700 dark:bg-slate-800/50" },
+        react_1.default.createElement(ScoreBar_1.ScoreBar, { label: label, score: score, weight: weight, previousScore: previousScore, icon: icon })));
+};
+exports.CategoryScoreCard = CategoryScoreCard;

package/dist/components/visualization/CategoryScoreGrid.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { SEOScores } from '../types';
+type CategoryScoreGridProps = {
+    scores: SEOScores;
+    previousScores?: SEOScores | null;
+};
+export declare const CategoryScoreGrid: React.FC<CategoryScoreGridProps>;
+export {};
+//# sourceMappingURL=CategoryScoreGrid.d.ts.map

package/dist/components/visualization/CategoryScoreGrid.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CategoryScoreGrid.d.ts","sourceRoot":"","sources":["../../../src/components/visualization/CategoryScoreGrid.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AAWzB,OAAO,KAAK,EAAoB,SAAS,EAAE,MAAM,UAAU,CAAA;AAE3D,KAAK,sBAAsB,GAAG;IAC5B,MAAM,EAAE,SAAS,CAAA;IACjB,cAAc,CAAC,EAAE,SAAS,GAAG,IAAI,CAAA;CAClC,CAAA;AAsBD,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,sBAAsB,CAiB9D,CAAA"}

package/dist/components/visualization/CategoryScoreGrid.js

@@ -0,0 +1,32 @@
+"use strict";
+'use client';
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CategoryScoreGrid = void 0;
+const react_1 = __importDefault(require("react"));
+const lucide_react_1 = require("lucide-react");
+const CategoryScoreCard_1 = require("./CategoryScoreCard");
+const CATEGORY_ICONS = {
+    metadata: react_1.default.createElement(lucide_react_1.FileText, { size: 16 }),
+    indexability: react_1.default.createElement(lucide_react_1.Search, { size: 16 }),
+    structure: react_1.default.createElement(lucide_react_1.LayoutGrid, { size: 16 }),
+    links: react_1.default.createElement(lucide_react_1.Link2, { size: 16 }),
+    media: react_1.default.createElement(lucide_react_1.ImageIcon, { size: 16 }),
+    structuredData: react_1.default.createElement(lucide_react_1.Code2, { size: 16 }),
+    performance: react_1.default.createElement(lucide_react_1.Gauge, { size: 16 }),
+};
+const CATEGORIES = [
+    'metadata',
+    'indexability',
+    'structure',
+    'links',
+    'media',
+    'structuredData',
+    'performance',
+];
+const CategoryScoreGrid = ({ scores, previousScores, }) => {
+    return (react_1.default.createElement("div", { className: "grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4" }, CATEGORIES.map((category) => (react_1.default.createElement(CategoryScoreCard_1.CategoryScoreCard, { key: category, category: category, score: scores[category] ?? 0, previousScore: previousScores?.[category], icon: CATEGORY_ICONS[category] })))));
+};
+exports.CategoryScoreGrid = CategoryScoreGrid;

package/dist/components/visualization/IssueCategoryChart.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+type IssueCategoryChartProps = {
+    categoryDistribution: Record<string, number>;
+    height?: number;
+};
+export declare const IssueCategoryChart: React.FC<IssueCategoryChartProps>;
+export {};
+//# sourceMappingURL=IssueCategoryChart.d.ts.map

package/dist/components/visualization/IssueCategoryChart.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"IssueCategoryChart.d.ts","sourceRoot":"","sources":["../../../src/components/visualization/IssueCategoryChart.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AAczB,KAAK,uBAAuB,GAAG;IAC7B,oBAAoB,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAA;IAC5C,MAAM,CAAC,EAAE,MAAM,CAAA;CAChB,CAAA;AAYD,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC,uBAAuB,CA2DhE,CAAA"}

package/dist/components/visualization/IssueCategoryChart.js

@@ -0,0 +1,47 @@
+"use strict";
+'use client';
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.IssueCategoryChart = void 0;
+const react_1 = __importDefault(require("react"));
+const recharts_1 = require("recharts");
+const types_1 = require("../types");
+const CATEGORY_COLORS = {
+    metadata: '#6366f1',
+    indexability: '#8b5cf6',
+    structure: '#06b6d4',
+    links: '#0ea5e9',
+    media: '#f59e0b',
+    structuredData: '#10b981',
+    performance: '#ef4444',
+};
+const IssueCategoryChart = ({ categoryDistribution, height = 240, }) => {
+    const chartData = Object.entries(categoryDistribution)
+        .map(([key, value]) => ({
+        category: types_1.CATEGORY_LABELS[key] || key,
+        key,
+        count: value,
+    }))
+        .sort((a, b) => b.count - a.count);
+    if (chartData.length === 0) {
+        return (react_1.default.createElement("div", { className: "flex h-40 items-center justify-center rounded-lg border border-slate-200 bg-slate-50" },
+            react_1.default.createElement("p", { className: "text-sm text-slate-500" }, "No issues to display.")));
+    }
+    return (react_1.default.createElement("div", { style: { width: '100%', height } },
+        react_1.default.createElement(recharts_1.ResponsiveContainer, null,
+            react_1.default.createElement(recharts_1.BarChart, { data: chartData, margin: { top: 5, right: 20, left: 0, bottom: 5 }, layout: "vertical" },
+                react_1.default.createElement(recharts_1.CartesianGrid, { strokeDasharray: "3 3", stroke: "#e2e8f0", horizontal: false }),
+                react_1.default.createElement(recharts_1.XAxis, { type: "number", tick: { fontSize: 11, fill: '#64748b' }, tickLine: false, axisLine: { stroke: '#e2e8f0' } }),
+                react_1.default.createElement(recharts_1.YAxis, { type: "category", dataKey: "category", width: 110, tick: { fontSize: 11, fill: '#64748b' }, tickLine: false, axisLine: { stroke: '#e2e8f0' } }),
+                react_1.default.createElement(recharts_1.Tooltip, { contentStyle: {
+                        backgroundColor: '#fff',
+                        border: '1px solid #e2e8f0',
+                        borderRadius: '8px',
+                        fontSize: '12px',
+                        boxShadow: '0 4px 6px -1px rgba(0,0,0,0.1)',
+                    }, formatter: ((value) => [value ?? 0, 'Issues']) }),
+                react_1.default.createElement(recharts_1.Bar, { dataKey: "count", radius: [0, 4, 4, 0], maxBarSize: 28 }, chartData.map((entry) => (react_1.default.createElement(recharts_1.Cell, { key: entry.key, fill: CATEGORY_COLORS[entry.key] || '#94a3b8' }))))))));
+};
+exports.IssueCategoryChart = IssueCategoryChart;

package/dist/components/visualization/MetricCard.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+type MetricCardProps = {
+    label: string;
+    value: string | number;
+    subtext?: string;
+    icon?: React.ReactNode;
+    valueClassName?: string;
+};
+export declare const MetricCard: React.FC<MetricCardProps>;
+export {};
+//# sourceMappingURL=MetricCard.d.ts.map

package/dist/components/visualization/MetricCard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MetricCard.d.ts","sourceRoot":"","sources":["../../../src/components/visualization/MetricCard.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,KAAK,eAAe,GAAG;IACrB,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,GAAG,MAAM,CAAA;IACtB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB,cAAc,CAAC,EAAE,MAAM,CAAA;CACxB,CAAA;AAED,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAiBhD,CAAA"}

package/dist/components/visualization/MetricCard.js

@@ -0,0 +1,17 @@
+"use strict";
+'use client';
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MetricCard = void 0;
+const react_1 = __importDefault(require("react"));
+const MetricCard = ({ label, value, subtext, icon, valueClassName = 'text-slate-900 dark:text-slate-100', }) => {
+    return (react_1.default.createElement("div", { className: "rounded-lg border border-slate-200 bg-white p-4 dark:border-slate-700 dark:bg-slate-800/50" },
+        react_1.default.createElement("div", { className: "flex items-start justify-between" },
+            react_1.default.createElement("p", { className: "text-xs font-medium uppercase tracking-wide text-slate-500 dark:text-slate-400" }, label),
+            icon && react_1.default.createElement("span", { className: "text-slate-400 dark:text-slate-500" }, icon)),
+        react_1.default.createElement("p", { className: `mt-1 text-2xl font-semibold ${valueClassName}` }, value),
+        subtext && react_1.default.createElement("p", { className: "mt-0.5 text-xs text-slate-500 dark:text-slate-400" }, subtext)));
+};
+exports.MetricCard = MetricCard;

package/dist/components/visualization/MetricCardRow.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+type MetricCardRowProps = {
+    children: React.ReactNode;
+};
+export declare const MetricCardRow: React.FC<MetricCardRowProps>;
+export {};
+//# sourceMappingURL=MetricCardRow.d.ts.map

package/dist/components/visualization/MetricCardRow.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MetricCardRow.d.ts","sourceRoot":"","sources":["../../../src/components/visualization/MetricCardRow.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,KAAK,kBAAkB,GAAG;IACxB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B,CAAA;AAED,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAItD,CAAA"}

package/dist/components/visualization/MetricCardRow.js

@@ -0,0 +1,12 @@
+"use strict";
+'use client';
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MetricCardRow = void 0;
+const react_1 = __importDefault(require("react"));
+const MetricCardRow = ({ children }) => {
+    return (react_1.default.createElement("div", { className: "grid grid-cols-2 gap-3 md:grid-cols-3 lg:grid-cols-6" }, children));
+};
+exports.MetricCardRow = MetricCardRow;

package/dist/components/visualization/ScoreBar.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+type ScoreBarProps = {
+    label: string;
+    score: number;
+    weight?: string;
+    previousScore?: number | null;
+    icon?: React.ReactNode;
+};
+export declare const ScoreBar: React.FC<ScoreBarProps>;
+export {};
+//# sourceMappingURL=ScoreBar.d.ts.map

package/dist/components/visualization/ScoreBar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScoreBar.d.ts","sourceRoot":"","sources":["../../../src/components/visualization/ScoreBar.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,KAAK,aAAa,GAAG;IACnB,KAAK,EAAE,MAAM,CAAA;IACb,KAAK,EAAE,MAAM,CAAA;IACb,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,aAAa,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAC7B,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CACvB,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAsC5C,CAAA"}

package/dist/components/visualization/ScoreBar.js

@@ -0,0 +1,34 @@
+"use strict";
+'use client';
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ScoreBar = void 0;
+const react_1 = __importDefault(require("react"));
+const scoreHelpers_1 = require("../utils/scoreHelpers");
+const formatters_1 = require("../utils/formatters");
+const ScoreBar = ({ label, score, weight, previousScore, icon, }) => {
+    const clampedScore = Math.max(0, Math.min(100, Math.round(score)));
+    const barColor = (0, scoreHelpers_1.getScoreBarColorClass)(clampedScore);
+    const textColor = (0, scoreHelpers_1.getScoreTextClass)(clampedScore);
+    const delta = (0, scoreHelpers_1.getDeltaDisplay)(clampedScore, previousScore);
+    return (react_1.default.createElement("div", { className: "space-y-1.5" },
+        react_1.default.createElement("div", { className: "flex items-center justify-between" },
+            react_1.default.createElement("div", { className: "flex items-center gap-2" },
+                icon && react_1.default.createElement("span", { className: "text-slate-400 dark:text-slate-500" }, icon),
+                react_1.default.createElement("span", { className: "text-sm font-medium text-slate-700 dark:text-slate-300" }, label),
+                weight && react_1.default.createElement("span", { className: "text-xs text-slate-400 dark:text-slate-500" },
+                    "(",
+                    weight,
+                    ")")),
+            react_1.default.createElement("div", { className: "flex items-center gap-2" },
+                react_1.default.createElement("span", { className: `text-sm font-semibold ${textColor}` }, (0, formatters_1.formatScore)(clampedScore)),
+                delta && (react_1.default.createElement("span", { className: `text-xs font-medium ${delta.className}` }, delta.text)))),
+        react_1.default.createElement("div", { className: "h-2 w-full overflow-hidden rounded-full bg-slate-100 dark:bg-slate-700" },
+            react_1.default.createElement("div", { className: `h-full rounded-full ${barColor}`, style: {
+                    width: `${clampedScore}%`,
+                    transition: 'width 0.6s ease-out',
+                } }))));
+};
+exports.ScoreBar = ScoreBar;

package/dist/components/visualization/ScoreGauge.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+type ScoreGaugeProps = {
+    score: number;
+    size?: number;
+    strokeWidth?: number;
+    label?: string;
+    showGrade?: boolean;
+};
+export declare const ScoreGauge: React.FC<ScoreGaugeProps>;
+export {};
+//# sourceMappingURL=ScoreGauge.d.ts.map

package/dist/components/visualization/ScoreGauge.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScoreGauge.d.ts","sourceRoot":"","sources":["../../../src/components/visualization/ScoreGauge.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,KAAK,eAAe,GAAG;IACrB,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB,CAAA;AAED,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CA+DhD,CAAA"}

package/dist/components/visualization/ScoreGauge.js

@@ -0,0 +1,28 @@
+"use strict";
+'use client';
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ScoreGauge = void 0;
+const react_1 = __importDefault(require("react"));
+const scoreHelpers_1 = require("../utils/scoreHelpers");
+const ScoreGauge = ({ score, size = 120, strokeWidth = 10, label, showGrade = false, }) => {
+    const radius = (size - strokeWidth) / 2;
+    const circumference = 2 * Math.PI * radius;
+    const clampedScore = Math.max(0, Math.min(100, Math.round(score)));
+    const offset = circumference - (clampedScore / 100) * circumference;
+    const color = (0, scoreHelpers_1.getScoreColor)(clampedScore);
+    const grade = (0, scoreHelpers_1.getScoreGrade)(clampedScore);
+    const center = size / 2;
+    return (react_1.default.createElement("div", { className: "inline-flex flex-col items-center gap-1" },
+        react_1.default.createElement("div", { className: "relative", style: { width: size, height: size } },
+            react_1.default.createElement("svg", { width: size, height: size, className: "transform -rotate-90" },
+                react_1.default.createElement("circle", { cx: center, cy: center, r: radius, fill: "none", stroke: "currentColor", strokeWidth: strokeWidth, className: "text-slate-200 dark:text-slate-700" }),
+                react_1.default.createElement("circle", { cx: center, cy: center, r: radius, fill: "none", stroke: color, strokeWidth: strokeWidth, strokeDasharray: circumference, strokeDashoffset: offset, strokeLinecap: "round", style: { transition: 'stroke-dashoffset 0.6s ease-out, stroke 0.3s ease' } })),
+            react_1.default.createElement("div", { className: "absolute inset-0 flex flex-col items-center justify-center" },
+                react_1.default.createElement("span", { className: "font-bold text-slate-900 dark:text-slate-100", style: { fontSize: size * 0.22 } }, clampedScore),
+                showGrade && (react_1.default.createElement("span", { className: `font-semibold ${(0, scoreHelpers_1.getGradeColorClass)(grade)}`, style: { fontSize: size * 0.14 } }, grade)))),
+        label && (react_1.default.createElement("span", { className: "text-xs font-medium uppercase tracking-wide text-slate-500 dark:text-slate-400" }, label))));
+};
+exports.ScoreGauge = ScoreGauge;

package/dist/components/visualization/ScoreTrendChart.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { SEOTrendPoint } from '../types';
+type ScoreTrendChartProps = {
+    points: SEOTrendPoint[];
+    height?: number;
+};
+export declare const ScoreTrendChart: React.FC<ScoreTrendChartProps>;
+export {};
+//# sourceMappingURL=ScoreTrendChart.d.ts.map

package/dist/components/visualization/ScoreTrendChart.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScoreTrendChart.d.ts","sourceRoot":"","sources":["../../../src/components/visualization/ScoreTrendChart.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AAUzB,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,UAAU,CAAA;AAI7C,KAAK,oBAAoB,GAAG;IAC1B,MAAM,EAAE,aAAa,EAAE,CAAA;IACvB,MAAM,CAAC,EAAE,MAAM,CAAA;CAChB,CAAA;AAED,eAAO,MAAM,eAAe,EAAE,KAAK,CAAC,EAAE,CAAC,oBAAoB,CA+D1D,CAAA"}

package/dist/components/visualization/ScoreTrendChart.js

@@ -0,0 +1,43 @@
+"use strict";
+'use client';
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ScoreTrendChart = void 0;
+const react_1 = __importDefault(require("react"));
+const recharts_1 = require("recharts");
+const formatters_1 = require("../utils/formatters");
+const scoreHelpers_1 = require("../utils/scoreHelpers");
+const ScoreTrendChart = ({ points, height = 280 }) => {
+    const chartData = [...points].reverse().map((point) => ({
+        date: (0, formatters_1.formatDate)(point.startedAt),
+        overall: point.scores.overall ?? 0,
+        metadata: point.scores.metadata ?? 0,
+        indexability: point.scores.indexability ?? 0,
+        structure: point.scores.structure ?? 0,
+        performance: point.scores.performance ?? 0,
+    }));
+    if (chartData.length === 0) {
+        return (react_1.default.createElement("div", { className: "flex h-40 items-center justify-center rounded-lg border border-slate-200 bg-slate-50 dark:border-slate-700 dark:bg-slate-800" },
+            react_1.default.createElement("p", { className: "text-sm text-slate-500 dark:text-slate-400" }, "No trend data available yet.")));
+    }
+    return (react_1.default.createElement("div", { style: { width: '100%', height } },
+        react_1.default.createElement(recharts_1.ResponsiveContainer, null,
+            react_1.default.createElement(recharts_1.LineChart, { data: chartData, margin: { top: 5, right: 20, left: 0, bottom: 5 } },
+                react_1.default.createElement(recharts_1.CartesianGrid, { strokeDasharray: "3 3", stroke: "#e2e8f0" }),
+                react_1.default.createElement(recharts_1.XAxis, { dataKey: "date", tick: { fontSize: 11, fill: '#64748b' }, tickLine: false, axisLine: { stroke: '#e2e8f0' } }),
+                react_1.default.createElement(recharts_1.YAxis, { domain: [0, 100], tick: { fontSize: 11, fill: '#64748b' }, tickLine: false, axisLine: { stroke: '#e2e8f0' }, width: 35 }),
+                react_1.default.createElement(recharts_1.Tooltip, { contentStyle: {
+                        backgroundColor: '#fff',
+                        border: '1px solid #e2e8f0',
+                        borderRadius: '8px',
+                        fontSize: '12px',
+                        boxShadow: '0 4px 6px -1px rgba(0,0,0,0.1)',
+                    }, formatter: ((value, name) => [
+                        value ?? 0,
+                        String(name ?? '').charAt(0).toUpperCase() + String(name ?? '').slice(1),
+                    ]) }),
+                react_1.default.createElement(recharts_1.Line, { type: "monotone", dataKey: "overall", stroke: (0, scoreHelpers_1.getScoreColor)(chartData[chartData.length - 1]?.overall ?? 50), strokeWidth: 2.5, dot: { fill: '#fff', stroke: (0, scoreHelpers_1.getScoreColor)(chartData[chartData.length - 1]?.overall ?? 50), strokeWidth: 2, r: 4 }, activeDot: { r: 6 } })))));
+};
+exports.ScoreTrendChart = ScoreTrendChart;

package/dist/components/visualization/SeverityBadge.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+type SeverityBadgeProps = {
+    severity: string;
+    className?: string;
+};
+export declare const SeverityBadge: React.FC<SeverityBadgeProps>;
+export {};
+//# sourceMappingURL=SeverityBadge.d.ts.map

package/dist/components/visualization/SeverityBadge.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SeverityBadge.d.ts","sourceRoot":"","sources":["../../../src/components/visualization/SeverityBadge.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,KAAK,kBAAkB,GAAG;IACxB,QAAQ,EAAE,MAAM,CAAA;IAChB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA;AAED,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,kBAAkB,CAUtD,CAAA"}

package/dist/components/visualization/SeverityBadge.js

@@ -0,0 +1,14 @@
+"use strict";
+'use client';
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SeverityBadge = void 0;
+const react_1 = __importDefault(require("react"));
+const scoreHelpers_1 = require("../utils/scoreHelpers");
+const SeverityBadge = ({ severity, className = '' }) => {
+    const { badge } = (0, scoreHelpers_1.getSeverityColorClasses)(severity);
+    return (react_1.default.createElement("span", { className: `inline-flex items-center rounded border px-2 py-0.5 text-xs font-medium ${badge} ${className}` }, severity.toUpperCase()));
+};
+exports.SeverityBadge = SeverityBadge;