@orion-studios/payload-seo-audit 1.0.0

package/dist/components/utils/scoreHelpers.js

@@ -0,0 +1,139 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getDeltaDisplay = exports.getSeverityBarColor = exports.getSeverityColorClasses = exports.getGradeColorClass = exports.getScoreGrade = exports.getScoreBarColorClass = exports.getScoreTextClass = exports.getScoreBgClass = exports.getScoreColor = void 0;
+const getScoreColor = (score) => {
+    if (score >= 90)
+        return '#059669';
+    if (score >= 80)
+        return '#16a34a';
+    if (score >= 60)
+        return '#d97706';
+    if (score >= 40)
+        return '#ea580c';
+    return '#dc2626';
+};
+exports.getScoreColor = getScoreColor;
+const getScoreBgClass = (score) => {
+    if (score >= 90)
+        return 'bg-emerald-50 border-emerald-200';
+    if (score >= 80)
+        return 'bg-green-50 border-green-200';
+    if (score >= 60)
+        return 'bg-amber-50 border-amber-200';
+    if (score >= 40)
+        return 'bg-orange-50 border-orange-200';
+    return 'bg-red-50 border-red-200';
+};
+exports.getScoreBgClass = getScoreBgClass;
+const getScoreTextClass = (score) => {
+    if (score >= 90)
+        return 'text-emerald-700';
+    if (score >= 80)
+        return 'text-green-700';
+    if (score >= 60)
+        return 'text-amber-700';
+    if (score >= 40)
+        return 'text-orange-700';
+    return 'text-red-700';
+};
+exports.getScoreTextClass = getScoreTextClass;
+const getScoreBarColorClass = (score) => {
+    if (score >= 90)
+        return 'bg-emerald-500';
+    if (score >= 80)
+        return 'bg-green-500';
+    if (score >= 60)
+        return 'bg-amber-500';
+    if (score >= 40)
+        return 'bg-orange-500';
+    return 'bg-red-500';
+};
+exports.getScoreBarColorClass = getScoreBarColorClass;
+const getScoreGrade = (score) => {
+    if (score >= 90)
+        return 'A';
+    if (score >= 80)
+        return 'B';
+    if (score >= 60)
+        return 'C';
+    if (score >= 40)
+        return 'D';
+    return 'F';
+};
+exports.getScoreGrade = getScoreGrade;
+const getGradeColorClass = (grade) => {
+    switch (grade) {
+        case 'A':
+            return 'text-emerald-600';
+        case 'B':
+            return 'text-green-600';
+        case 'C':
+            return 'text-amber-600';
+        case 'D':
+            return 'text-orange-600';
+        default:
+            return 'text-red-600';
+    }
+};
+exports.getGradeColorClass = getGradeColorClass;
+const getSeverityColorClasses = (severity) => {
+    switch (severity) {
+        case 'critical':
+            return {
+                badge: 'bg-red-100 text-red-700 border-red-200',
+                text: 'text-red-700',
+                bg: 'bg-red-50',
+            };
+        case 'high':
+            return {
+                badge: 'bg-orange-100 text-orange-700 border-orange-200',
+                text: 'text-orange-700',
+                bg: 'bg-orange-50',
+            };
+        case 'medium':
+            return {
+                badge: 'bg-amber-100 text-amber-700 border-amber-200',
+                text: 'text-amber-700',
+                bg: 'bg-amber-50',
+            };
+        case 'low':
+            return {
+                badge: 'bg-blue-100 text-blue-700 border-blue-200',
+                text: 'text-blue-700',
+                bg: 'bg-blue-50',
+            };
+        default:
+            return {
+                badge: 'bg-slate-100 text-slate-600 border-slate-200',
+                text: 'text-slate-600',
+                bg: 'bg-slate-50',
+            };
+    }
+};
+exports.getSeverityColorClasses = getSeverityColorClasses;
+const getSeverityBarColor = (severity) => {
+    switch (severity) {
+        case 'critical':
+            return 'bg-red-500';
+        case 'high':
+            return 'bg-orange-500';
+        case 'medium':
+            return 'bg-amber-500';
+        case 'low':
+            return 'bg-blue-500';
+        default:
+            return 'bg-slate-400';
+    }
+};
+exports.getSeverityBarColor = getSeverityBarColor;
+const getDeltaDisplay = (current, previous) => {
+    if (previous == null)
+        return null;
+    const delta = current - previous;
+    if (delta === 0)
+        return { text: '0', className: 'text-slate-500' };
+    if (delta > 0)
+        return { text: `+${delta}`, className: 'text-green-600' };
+    return { text: `${delta}`, className: 'text-red-600' };
+};
+exports.getDeltaDisplay = getDeltaDisplay;

package/dist/components/views/SeoDashboard.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+export declare const SeoDashboard: React.FC;
+//# sourceMappingURL=SeoDashboard.d.ts.map

package/dist/components/views/SeoDashboard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SeoDashboard.d.ts","sourceRoot":"","sources":["../../../src/components/views/SeoDashboard.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAoD,MAAM,OAAO,CAAA;AAqBxE,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAsShC,CAAA"}

package/dist/components/views/SeoDashboard.js

@@ -0,0 +1,239 @@
+"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.SeoDashboard = void 0;
+const react_1 = __importStar(require("react"));
+const ScoreGauge_1 = require("../visualization/ScoreGauge");
+const MetricCard_1 = require("../visualization/MetricCard");
+const MetricCardRow_1 = require("../visualization/MetricCardRow");
+const CategoryScoreGrid_1 = require("../visualization/CategoryScoreGrid");
+const ScoreTrendChart_1 = require("../visualization/ScoreTrendChart");
+const IssueTable_1 = require("../tables/IssueTable");
+const SeoReportHeader_1 = require("../layout/SeoReportHeader");
+const scoreHelpers_1 = require("../utils/scoreHelpers");
+const formatters_1 = require("../utils/formatters");
+const SeoDashboard = () => {
+    const [snapshots, setSnapshots] = (0, react_1.useState)([]);
+    const [latestIssues, setLatestIssues] = (0, react_1.useState)([]);
+    const [trendPoints, setTrendPoints] = (0, react_1.useState)([]);
+    const [loading, setLoading] = (0, react_1.useState)(true);
+    const [running, setRunning] = (0, react_1.useState)(false);
+    const [runningStep, setRunningStep] = (0, react_1.useState)('');
+    const [runningProgress, setRunningProgress] = (0, react_1.useState)(0);
+    const [error, setError] = (0, react_1.useState)(null);
+    const fetchData = (0, react_1.useCallback)(async () => {
+        setLoading(true);
+        setError(null);
+        try {
+            const [snapshotsRes, trendRes] = await Promise.all([
+                fetch('/api/seo/snapshots?limit=12', { credentials: 'include' }),
+                fetch('/api/seo/trend?limit=12', { credentials: 'include' }),
+            ]);
+            if (!snapshotsRes.ok)
+                throw new Error(`Snapshots request failed with ${snapshotsRes.status}`);
+            const snapshotsData = (await snapshotsRes.json());
+            setSnapshots(snapshotsData.snapshots || []);
+            setLatestIssues(snapshotsData.latestIssues || []);
+            if (trendRes.ok) {
+                const trendData = (await trendRes.json());
+                setTrendPoints(trendData.points || []);
+            }
+        }
+        catch (err) {
+            setError(err instanceof Error ? err.message : 'Failed to load SEO data.');
+        }
+        finally {
+            setLoading(false);
+        }
+    }, []);
+    (0, react_1.useEffect)(() => {
+        void fetchData();
+    }, [fetchData]);
+    const runAuditNow = (0, react_1.useCallback)(async () => {
+        setRunning(true);
+        setRunningStep('Starting audit...');
+        setRunningProgress(0);
+        setError(null);
+        try {
+            const response = await fetch('/api/seo/run-stream', {
+                method: 'POST',
+                credentials: 'include',
+                headers: { 'content-type': 'application/json' },
+                body: JSON.stringify({ runType: 'manual' }),
+            });
+            if (!response.ok || !response.body) {
+                throw new Error(`Request failed with ${response.status}`);
+            }
+            const reader = response.body.getReader();
+            const decoder = new TextDecoder();
+            let buffer = '';
+            while (true) {
+                const { done, value } = await reader.read();
+                if (done)
+                    break;
+                buffer += decoder.decode(value, { stream: true });
+                const events = buffer.split('\n\n');
+                buffer = events.pop() || '';
+                for (const event of events) {
+                    if (!event.trim())
+                        continue;
+                    const lines = event.split('\n');
+                    let eventType = '';
+                    let eventData = '';
+                    for (const line of lines) {
+                        if (line.startsWith('event:')) {
+                            eventType = line.substring(6).trim();
+                        }
+                        else if (line.startsWith('data:')) {
+                            eventData = line.substring(5).trim();
+                        }
+                    }
+                    if (eventType && eventData) {
+                        try {
+                            const data = JSON.parse(eventData);
+                            if (eventType === 'progress') {
+                                setRunningStep(data.message || 'Processing...');
+                                const step = data.step || '';
+                                if (step === 'auth')
+                                    setRunningProgress(5);
+                                else if (step === 'site')
+                                    setRunningProgress(10);
+                                else if (step === 'snapshot')
+                                    setRunningProgress(15);
+                                else if (step === 'crawl')
+                                    setRunningProgress(25);
+                                else if (step === 'crawl-complete')
+                                    setRunningProgress(40);
+                                else if (step === 'checks')
+                                    setRunningProgress(50);
+                                else if (step === 'checks-complete')
+                                    setRunningProgress(60);
+                                else if (step === 'pagespeed')
+                                    setRunningProgress(65);
+                                else if (step === 'pagespeed-complete' || step === 'pagespeed-skipped')
+                                    setRunningProgress(75);
+                                else if (step === 'gsc')
+                                    setRunningProgress(80);
+                                else if (step === 'gsc-complete' || step === 'gsc-skipped')
+                                    setRunningProgress(85);
+                                else if (step === 'saving')
+                                    setRunningProgress(90);
+                            }
+                            else if (eventType === 'complete') {
+                                setRunningProgress(100);
+                                setRunningStep('Audit complete!');
+                                await fetchData();
+                                setTimeout(() => setRunning(false), 1000);
+                                return;
+                            }
+                            else if (eventType === 'error') {
+                                throw new Error(data.message || 'Audit failed');
+                            }
+                        }
+                        catch (parseErr) {
+                        }
+                    }
+                }
+            }
+        }
+        catch (err) {
+            setError(err instanceof Error ? err.message : 'Failed to run SEO audit.');
+            setRunning(false);
+        }
+    }, [fetchData]);
+    const latest = snapshots[0];
+    const previous = snapshots[1];
+    const overallScore = latest?.scores?.overall ?? 0;
+    const previousOverall = previous?.scores?.overall;
+    const delta = (0, scoreHelpers_1.getDeltaDisplay)(overallScore, previousOverall);
+    const totalIssues = (0, react_1.useMemo)(() => {
+        if (!latest?.issueCounts)
+            return 0;
+        const c = latest.issueCounts;
+        return (c.critical ?? 0) + (c.high ?? 0) + (c.medium ?? 0) + (c.low ?? 0) + (c.info ?? 0);
+    }, [latest]);
+    if (loading) {
+        return (react_1.default.createElement("section", { className: "seo-report mb-6 rounded-xl border border-slate-200 bg-white p-6 dark:border-slate-700 dark:bg-slate-800" },
+            react_1.default.createElement("div", { className: "flex items-center gap-3" },
+                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 SEO data..."))));
+    }
+    return (react_1.default.createElement("section", { className: "seo-report mb-6 space-y-6 rounded-xl border border-slate-200 bg-white p-6 dark:border-slate-700 dark:bg-slate-800" },
+        react_1.default.createElement(SeoReportHeader_1.SeoReportHeader, { title: "SEO Health Report", subtitle: latest
+                ? `Last audit: ${(0, formatters_1.formatTimestamp)(latest.startedAt)}`
+                : 'No audits have been run yet.', actions: react_1.default.createElement(react_1.default.Fragment, null,
+                react_1.default.createElement("button", { type: "button", onClick: () => void fetchData(), className: "rounded-md border border-slate-300 bg-white px-3 py-2 text-sm text-slate-700 hover:bg-slate-50 dark:border-slate-600 dark:bg-slate-700 dark:text-slate-200 dark:hover:bg-slate-600" }, "Refresh"),
+                react_1.default.createElement("button", { type: "button", onClick: () => void runAuditNow(), disabled: running, className: "rounded-md bg-slate-900 px-3 py-2 text-sm text-white disabled:opacity-60 dark:bg-slate-100 dark:text-slate-900" }, running ? 'Running Audit...' : 'Run Audit Now')) }),
+        running && runningStep && (react_1.default.createElement("div", { className: "rounded-md border border-blue-200 bg-blue-50 px-4 py-3 dark:border-blue-800 dark:bg-blue-900/30" },
+            react_1.default.createElement("div", { className: "flex items-center gap-3 mb-2" },
+                react_1.default.createElement("div", { className: "h-4 w-4 animate-spin rounded-full border-2 border-blue-300 border-t-blue-600 dark:border-blue-700 dark:border-t-blue-400" }),
+                react_1.default.createElement("p", { className: "text-sm text-blue-700 dark:text-blue-300" }, runningStep),
+                react_1.default.createElement("span", { className: "ml-auto text-sm font-medium text-blue-700 dark:text-blue-300" },
+                    runningProgress,
+                    "%")),
+            react_1.default.createElement("div", { className: "h-2 w-full overflow-hidden rounded-full bg-blue-100 dark:bg-blue-900" },
+                react_1.default.createElement("div", { className: "h-full rounded-full bg-blue-600 transition-all duration-500 ease-out dark:bg-blue-400", style: { width: `${runningProgress}%` } })))),
+        error && (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)),
+        !latest ? (react_1.default.createElement("div", { className: "flex flex-col items-center justify-center gap-3 rounded-lg border-2 border-dashed border-slate-200 py-16 dark:border-slate-700" },
+            react_1.default.createElement("p", { className: "text-lg font-medium text-slate-600 dark:text-slate-300" }, "No SEO audits yet"),
+            react_1.default.createElement("p", { className: "text-sm text-slate-500 dark:text-slate-400" }, "Run your first audit to see your site's SEO health."))) : (react_1.default.createElement(react_1.default.Fragment, null,
+            react_1.default.createElement("div", { className: "flex flex-col items-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 }),
+                delta && (react_1.default.createElement("span", { className: `text-sm font-medium ${delta.className}` },
+                    delta.text,
+                    " from previous"))),
+            react_1.default.createElement(MetricCardRow_1.MetricCardRow, null,
+                react_1.default.createElement(MetricCard_1.MetricCard, { label: "Pages Crawled", value: (0, formatters_1.formatNumber)(latest.metrics?.pagesCrawled) }),
+                react_1.default.createElement(MetricCard_1.MetricCard, { label: "Critical Issues", value: latest.issueCounts?.critical ?? 0, valueClassName: (latest.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 Issues", value: latest.issueCounts?.high ?? 0, valueClassName: (latest.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: "Lighthouse", value: latest.metrics?.avgLighthousePerformance != null
+                        ? `${Math.round(latest.metrics.avgLighthousePerformance)}`
+                        : '-', subtext: "Performance" }),
+                react_1.default.createElement(MetricCard_1.MetricCard, { label: "Avg LCP", value: (0, formatters_1.formatMs)(latest.metrics?.avgLCPMs), subtext: "Largest Contentful Paint" }),
+                react_1.default.createElement(MetricCard_1.MetricCard, { label: "Avg CLS", value: (0, formatters_1.formatCLS)(latest.metrics?.avgCLS), subtext: "Cumulative Layout Shift" })),
+            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 Breakdown"),
+                react_1.default.createElement(CategoryScoreGrid_1.CategoryScoreGrid, { scores: latest.scores || {}, previousScores: previous?.scores })),
+            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" }, "Score Trend"),
+                react_1.default.createElement(ScoreTrendChart_1.ScoreTrendChart, { points: trendPoints })),
+            react_1.default.createElement("div", null,
+                react_1.default.createElement("div", { className: "mb-3 flex items-center justify-between" },
+                    react_1.default.createElement("h2", { className: "text-sm font-semibold text-slate-900 dark:text-slate-100" }, "Top Issues"),
+                    latest && (react_1.default.createElement("a", { href: `/admin/collections/seo-snapshots/${latest.id}`, className: "text-sm text-slate-500 hover:text-slate-700 dark:text-slate-400 dark:hover:text-slate-200" }, "View Full Report \u2192"))),
+                react_1.default.createElement(IssueTable_1.IssueTable, { issues: latestIssues, pageSize: 10 }))))));
+};
+exports.SeoDashboard = SeoDashboard;

package/dist/components/views/SeoPageReport.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+export declare const SeoPageReport: React.FC;
+//# sourceMappingURL=SeoPageReport.d.ts.map

package/dist/components/views/SeoPageReport.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SeoPageReport.d.ts","sourceRoot":"","sources":["../../../src/components/views/SeoPageReport.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAoD,MAAM,OAAO,CAAA;AAyDxE,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,EA8SjC,CAAA"}

package/dist/components/views/SeoPageReport.js

@@ -0,0 +1,234 @@
+"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.SeoPageReport = void 0;
+const react_1 = __importStar(require("react"));
+const lucide_react_1 = require("lucide-react");
+const ScoreGauge_1 = require("../visualization/ScoreGauge");
+const ScoreBar_1 = require("../visualization/ScoreBar");
+const MetricCard_1 = require("../visualization/MetricCard");
+const SeverityBadge_1 = require("../visualization/SeverityBadge");
+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 types_1 = require("../types");
+const getIdFromPath = () => {
+    if (typeof window === 'undefined')
+        return null;
+    const segments = window.location.pathname.split('/');
+    const idx = segments.indexOf('seo-page-results');
+    if (idx >= 0 && segments[idx + 1]) {
+        return segments[idx + 1];
+    }
+    return null;
+};
+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 CHAR_COUNT_STATUS_CLASS = {
+    good: 'text-green-600 bg-green-50 border-green-200',
+    warning: 'text-amber-600 bg-amber-50 border-amber-200',
+    error: 'text-red-600 bg-red-50 border-red-200',
+};
+const CATEGORIES = [
+    'metadata',
+    'indexability',
+    'structure',
+    'links',
+    'media',
+    'structuredData',
+    'performance',
+];
+const SeoPageReport = () => {
+    const [pageResult, setPageResult] = (0, react_1.useState)(null);
+    const [loading, setLoading] = (0, react_1.useState)(true);
+    const [error, setError] = (0, react_1.useState)(null);
+    const pageResultId = (0, react_1.useMemo)(() => getIdFromPath(), []);
+    const fetchPageResult = (0, react_1.useCallback)(async () => {
+        if (!pageResultId) {
+            setError('Could not determine page result ID.');
+            setLoading(false);
+            return;
+        }
+        setLoading(true);
+        setError(null);
+        try {
+            const response = await fetch(`/api/seo/page-result?id=${pageResultId}`, {
+                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());
+            setPageResult(data.pageResult);
+        }
+        catch (err) {
+            setError(err instanceof Error ? err.message : 'Failed to load page result.');
+        }
+        finally {
+            setLoading(false);
+        }
+    }, [pageResultId]);
+    (0, react_1.useEffect)(() => {
+        void fetchPageResult();
+    }, [fetchPageResult]);
+    const issuesByCategory = (0, react_1.useMemo)(() => {
+        if (!pageResult?.issues)
+            return {};
+        const groups = {};
+        for (const issue of pageResult.issues) {
+            const cat = issue.category || 'other';
+            if (!groups[cat])
+                groups[cat] = [];
+            groups[cat].push(issue);
+        }
+        const order = { critical: 0, high: 1, medium: 2, low: 3, info: 4 };
+        for (const cat of Object.keys(groups)) {
+            groups[cat].sort((a, b) => (order[a.severity] ?? 5) - (order[b.severity] ?? 5));
+        }
+        return groups;
+    }, [pageResult]);
+    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 page report..."))));
+    }
+    if (error || !pageResult) {
+        return (react_1.default.createElement(SeoReportShell_1.SeoReportShell, { onBack: () => window.history.back(), backLabel: "Back" },
+            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 overallScore = pageResult.overallScore ?? 0;
+    const titleInfo = (0, formatters_1.formatCharCount)(pageResult.title, 20, 65);
+    const descInfo = (0, formatters_1.formatCharCount)(pageResult.metaDescription, 70, 165);
+    return (react_1.default.createElement(SeoReportShell_1.SeoReportShell, { onBack: () => window.history.back(), backLabel: "Back to Snapshot" },
+        react_1.default.createElement("div", { className: "space-y-6", id: "seo-page-report" },
+            react_1.default.createElement(SeoReportHeader_1.SeoReportHeader, { title: "Page SEO Report", subtitle: pageResult.url, actions: react_1.default.createElement(PdfDownloadButton_1.PdfDownloadButton, { targetId: "seo-page-report", filename: `page-seo-${pageResult.path || pageResultId}` }), badges: pageResult.statusCode ? (react_1.default.createElement("span", { className: `inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-medium ${pageResult.statusCode === 200
+                        ? 'border-green-200 bg-green-50 text-green-700'
+                        : 'border-red-200 bg-red-50 text-red-700'}` }, pageResult.statusCode)) : undefined }),
+            react_1.default.createElement("div", { className: "flex flex-col items-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("p", { className: "mt-1 text-xs text-slate-500 dark:text-slate-400" },
+                    "Checked: ",
+                    (0, formatters_1.formatTimestamp)(pageResult.checkedAt))),
+            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" }, "Page Metadata"),
+                react_1.default.createElement("div", { className: "space-y-3 rounded-lg border border-slate-200 bg-white p-4 dark:border-slate-700 dark:bg-slate-800/50" },
+                    react_1.default.createElement("div", null,
+                        react_1.default.createElement("div", { className: "flex items-center justify-between" },
+                            react_1.default.createElement("span", { className: "text-xs font-medium uppercase tracking-wide text-slate-500 dark:text-slate-400" }, "Title Tag"),
+                            react_1.default.createElement("span", { className: `inline-flex items-center rounded-full border px-2 py-0.5 text-[10px] font-medium ${CHAR_COUNT_STATUS_CLASS[titleInfo.status]}` },
+                                titleInfo.count,
+                                " chars \u00B7 ",
+                                titleInfo.label)),
+                        react_1.default.createElement("p", { className: "mt-1 text-sm text-slate-800 dark:text-slate-200" }, pageResult.title || react_1.default.createElement("span", { className: "italic text-slate-400 dark:text-slate-500" }, "Missing"))),
+                    react_1.default.createElement("hr", { className: "border-slate-100 dark:border-slate-700" }),
+                    react_1.default.createElement("div", null,
+                        react_1.default.createElement("div", { className: "flex items-center justify-between" },
+                            react_1.default.createElement("span", { className: "text-xs font-medium uppercase tracking-wide text-slate-500 dark:text-slate-400" }, "Meta Description"),
+                            react_1.default.createElement("span", { className: `inline-flex items-center rounded-full border px-2 py-0.5 text-[10px] font-medium ${CHAR_COUNT_STATUS_CLASS[descInfo.status]}` },
+                                descInfo.count,
+                                " chars \u00B7 ",
+                                descInfo.label)),
+                        react_1.default.createElement("p", { className: "mt-1 text-sm text-slate-800 dark:text-slate-200" }, pageResult.metaDescription || (react_1.default.createElement("span", { className: "italic text-slate-400 dark:text-slate-500" }, "Missing")))),
+                    react_1.default.createElement("hr", { className: "border-slate-100 dark:border-slate-700" }),
+                    react_1.default.createElement("div", null,
+                        react_1.default.createElement("span", { className: "text-xs font-medium uppercase tracking-wide text-slate-500 dark:text-slate-400" }, "Canonical URL"),
+                        react_1.default.createElement("p", { className: "mt-1 text-sm text-slate-800 dark:text-slate-200" }, pageResult.canonical || react_1.default.createElement("span", { className: "italic text-slate-400 dark:text-slate-500" }, "Not set"))),
+                    pageResult.robotsMeta && (react_1.default.createElement(react_1.default.Fragment, null,
+                        react_1.default.createElement("hr", { className: "border-slate-100 dark:border-slate-700" }),
+                        react_1.default.createElement("div", null,
+                            react_1.default.createElement("span", { className: "text-xs font-medium uppercase tracking-wide text-slate-500 dark:text-slate-400" }, "Robots Meta"),
+                            react_1.default.createElement("p", { className: "mt-1 text-sm text-slate-800 dark:text-slate-200" }, pageResult.robotsMeta)))),
+                    react_1.default.createElement("hr", { className: "border-slate-100 dark:border-slate-700" }),
+                    react_1.default.createElement("div", null,
+                        react_1.default.createElement("span", { className: "text-xs font-medium uppercase tracking-wide text-slate-500 dark:text-slate-400" }, "H1 Tags"),
+                        react_1.default.createElement("p", { className: "mt-1 text-sm text-slate-800 dark:text-slate-200" },
+                            pageResult.h1Count ?? 0,
+                            ' ',
+                            react_1.default.createElement("span", { className: "text-xs text-slate-500 dark:text-slate-400" }, "(should be exactly 1)"))))),
+            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" }, "Score Breakdown"),
+                react_1.default.createElement("div", { className: "space-y-4 rounded-lg border border-slate-200 bg-white p-4 dark:border-slate-700 dark:bg-slate-800/50" }, CATEGORIES.map((category) => {
+                    const score = category === 'performance'
+                        ? overallScore
+                        : pageResult.scoreBreakdown?.[category] ?? 0;
+                    return (react_1.default.createElement(ScoreBar_1.ScoreBar, { key: category, label: types_1.CATEGORY_LABELS[category], score: score, icon: CATEGORY_ICONS[category] }));
+                }))),
+            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" }, "Page Statistics"),
+                react_1.default.createElement("div", { className: "grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-6" },
+                    react_1.default.createElement(MetricCard_1.MetricCard, { label: "Internal Links", value: (0, formatters_1.formatNumber)(pageResult.internalLinks) }),
+                    react_1.default.createElement(MetricCard_1.MetricCard, { label: "External Links", value: (0, formatters_1.formatNumber)(pageResult.externalLinks) }),
+                    react_1.default.createElement(MetricCard_1.MetricCard, { label: "Total Images", value: (0, formatters_1.formatNumber)(pageResult.imagesTotal) }),
+                    react_1.default.createElement(MetricCard_1.MetricCard, { label: "Missing Alt", value: (0, formatters_1.formatNumber)(pageResult.imagesMissingAlt), valueClassName: (pageResult.imagesMissingAlt ?? 0) > 0 ? 'text-orange-600 dark:text-orange-400' : 'text-slate-900 dark:text-slate-100' }),
+                    react_1.default.createElement(MetricCard_1.MetricCard, { label: "Structured Data", value: (0, formatters_1.formatNumber)(pageResult.structuredDataBlocks) }),
+                    react_1.default.createElement(MetricCard_1.MetricCard, { label: "Heading Issues", value: (0, formatters_1.formatNumber)(pageResult.headingOrderIssues), valueClassName: (pageResult.headingOrderIssues ?? 0) > 0 ? 'text-amber-600 dark:text-amber-400' : 'text-slate-900 dark:text-slate-100' }))),
+            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 (",
+                    (pageResult.issues || []).length,
+                    ")"),
+                (pageResult.issues || []).length === 0 ? (react_1.default.createElement("div", { className: "flex h-24 items-center justify-center rounded-lg border border-slate-200 bg-green-50 dark:border-green-800 dark:bg-green-900/30" },
+                    react_1.default.createElement("p", { className: "text-sm text-green-700 dark:text-green-300" }, "No issues found on this page. Great job!"))) : (react_1.default.createElement("div", { className: "space-y-4" }, CATEGORIES.map((category) => {
+                    const issues = issuesByCategory[category];
+                    if (!issues || issues.length === 0)
+                        return null;
+                    return (react_1.default.createElement("div", { key: category, className: "rounded-lg border border-slate-200 bg-white dark:border-slate-700 dark:bg-slate-800/50" },
+                        react_1.default.createElement("div", { className: "flex items-center gap-2 border-b border-slate-100 px-4 py-3 dark:border-slate-700" },
+                            react_1.default.createElement("span", { className: "text-slate-400 dark:text-slate-500" }, CATEGORY_ICONS[category]),
+                            react_1.default.createElement("h3", { className: "text-sm font-medium text-slate-900 dark:text-slate-100" }, types_1.CATEGORY_LABELS[category]),
+                            react_1.default.createElement("span", { className: "text-xs text-slate-500 dark:text-slate-400" },
+                                "(",
+                                issues.length,
+                                ")")),
+                        react_1.default.createElement("div", { className: "divide-y divide-slate-100 dark:divide-slate-700" }, issues.map((issue, idx) => (react_1.default.createElement("div", { key: `${issue.fingerprint || issue.ruleID}-${idx}`, className: "px-4 py-3" },
+                            react_1.default.createElement("div", { className: "flex items-start gap-2" },
+                                react_1.default.createElement(SeverityBadge_1.SeverityBadge, { severity: issue.severity }),
+                                react_1.default.createElement("div", { className: "flex-1" },
+                                    react_1.default.createElement("p", { className: "text-sm text-slate-800 dark:text-slate-200" }, issue.message),
+                                    issue.recommendation && (react_1.default.createElement("p", { className: "mt-1.5 rounded bg-blue-50 px-3 py-2 text-xs text-blue-800 dark:bg-blue-900/30 dark:text-blue-300" }, issue.recommendation))))))))));
+                })))))));
+};
+exports.SeoPageReport = SeoPageReport;

package/dist/components/views/SeoSnapshotReport.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+export declare const SeoSnapshotReport: React.FC;
+//# sourceMappingURL=SeoSnapshotReport.d.ts.map

package/dist/components/views/SeoSnapshotReport.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SeoSnapshotReport.d.ts","sourceRoot":"","sources":["../../../src/components/views/SeoSnapshotReport.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAoD,MAAM,OAAO,CAAA;AAgCxE,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EA0UrC,CAAA"}