@pixelated-tech/components 3.3.6 → 3.4.0

package/dist/components/admin/site-health/seo-metrics.config.json

@@ -0,0 +1,265 @@
+{
+  "categories": {
+    "on-page": {
+      "name": "On-Page SEO",
+      "description": "Elements within individual page content",
+      "priority": 1,
+      "metrics": {
+        "semantic-tags": {
+          "id": "semantic-tags",
+          "title": "Semantic HTML Tags",
+          "description": "Checks for proper semantic HTML structure",
+          "scoreDisplayMode": "binary",
+          "dataCollector": "collectSemanticTagsData",
+          "scorer": "calculateSemanticTagsScore"
+        },
+        "title-tags": {
+          "id": "title-tags",
+          "title": "Title Tags",
+          "description": "Validates title tag presence and optimal length",
+          "scoreDisplayMode": "binary",
+          "dataCollector": "collectTitleTagsData",
+          "scorer": "calculateTitleTagsScore"
+        },
+        "meta-keywords": {
+          "id": "meta-keywords",
+          "title": "Meta Keywords",
+          "description": "Checks for meta keywords tag presence",
+          "scoreDisplayMode": "binary",
+          "dataCollector": "collectMetaKeywordsData",
+          "scorer": "calculateMetaKeywordsScore"
+        },
+        "meta-descriptions": {
+          "id": "meta-descriptions",
+          "title": "Meta Descriptions",
+          "description": "Validates meta description presence and length",
+          "scoreDisplayMode": "binary",
+          "dataCollector": "collectMetaDescriptionsData",
+          "scorer": "calculateMetaDescriptionsScore"
+        },
+        "content-type-charset": {
+          "id": "content-type-charset",
+          "title": "Content-Type and Charset",
+          "description": "Checks for proper content-type/charset declaration",
+          "scoreDisplayMode": "binary",
+          "pattern": "(<meta[^>]*http-equiv=[\"']content-type[\"'][^>]*>)|(<meta[^>]*charset=[\"'][^\"']*[\"'][^>]*>)",
+          "countLogic": "or",
+          "scoreLogic": "present",
+          "displayTemplate": "{{count}} content-type/charset declaration(s) found"
+        },
+        "viewport-tags": {
+          "id": "viewport-tags",
+          "title": "Viewport Tags",
+          "description": "Checks for viewport meta tag on mobile pages",
+          "scoreDisplayMode": "binary",
+          "pattern": "<meta[^>]*name=[\"']viewport[\"'][^>]*content=[\"'][^\"']*[\"'][^>]*>",
+          "countLogic": "count",
+          "scoreLogic": "present",
+          "displayTemplate": "{{count}} viewport tag(s) found"
+        },
+        "opengraph-tags": {
+          "id": "opengraph-tags",
+          "title": "OpenGraph Tags",
+          "description": "Checks for OpenGraph meta tags for social sharing",
+          "scoreDisplayMode": "binary",
+          "pattern": "<meta[^>]*property=[\"']og:[^\"']*[\"'][^>]*content=[\"'][^\"']*[\"'][^>]*>",
+          "countLogic": "count",
+          "scoreLogic": "present",
+          "displayTemplate": "{{count}} OpenGraph tag(s) found"
+        },
+        "preconnect-tags": {
+          "id": "preconnect-tags",
+          "title": "Preconnect Tags",
+          "description": "Checks for preconnect link tags for performance",
+          "scoreDisplayMode": "binary",
+          "pattern": "<link[^>]*rel=[\"']preconnect[\"'][^>]*>",
+          "countLogic": "count",
+          "scoreLogic": "present",
+          "displayTemplate": "{{count}} preconnect link(s) found"
+        },
+        "h1-tags": {
+          "id": "h1-tags",
+          "title": "H1 Tags",
+          "description": "Checks for proper H1 tag usage",
+          "scoreDisplayMode": "binary",
+          "pattern": "<h1[^>]*>[^<]*</h1>",
+          "countLogic": "exact",
+          "expectedCount": 1,
+          "scoreLogic": "exact",
+          "displayTemplate": "{{count}} H1 tag(s) found"
+        },
+        "h2-tags": {
+          "id": "h2-tags",
+          "title": "H2 Tags",
+          "description": "Checks for H2 tag usage",
+          "scoreDisplayMode": "binary",
+          "pattern": "<h2[^>]*>[^<]*</h2>",
+          "countLogic": "count",
+          "scoreLogic": "present",
+          "displayTemplate": "{{count}} H2 tag(s) found"
+        },
+        "canonical-urls": {
+          "id": "canonical-urls",
+          "title": "Canonical URLs",
+          "description": "Checks for canonical URL tags",
+          "scoreDisplayMode": "binary",
+          "pattern": "<link[^>]*rel=[\"']canonical[\"'][^>]*href=[\"'][^\"']*[\"'][^>]*>",
+          "countLogic": "count",
+          "scoreLogic": "present",
+          "displayTemplate": "{{count}} canonical URL(s) found"
+        },
+        "language-tags": {
+          "id": "language-tags",
+          "title": "Language Tags",
+          "description": "Checks for lang attribute on html element",
+          "scoreDisplayMode": "binary",
+          "pattern": "<html[^>]*lang=[\"'][^\"']*[\"'][^>]*>",
+          "countLogic": "count",
+          "scoreLogic": "present",
+          "displayTemplate": "{{count}} language tag(s) found"
+        },
+        "icon-tags": {
+          "id": "icon-tags",
+          "title": "Icon Tags",
+          "description": "Checks for icon link tags for browser tabs",
+          "scoreDisplayMode": "binary",
+          "pattern": "<link[^>]*rel=[\"']icon[\"'][^>]*>",
+          "countLogic": "count",
+          "scoreLogic": "present",
+          "displayTemplate": "{{count}} icon link(s) found"
+        },
+        "shortcut-icon-tags": {
+          "id": "shortcut-icon-tags",
+          "title": "Shortcut Icon Tags",
+          "description": "Checks for shortcut icon link tags for browser tabs",
+          "scoreDisplayMode": "binary",
+          "pattern": "<link[^>]*rel=[\"']shortcut icon[\"'][^>]*>",
+          "countLogic": "count",
+          "scoreLogic": "present",
+          "displayTemplate": "{{count}} shortcut icon link(s) found"
+        },
+        "manifest-tag": {
+          "id": "manifest-tag",
+          "title": "Manifest Tag",
+          "description": "Checks for manifest link tag to direct crawlers to WebManifest file",
+          "scoreDisplayMode": "binary",
+          "pattern": "<link[^>]*rel=[\"']manifest[\"'][^>]*href=[\"'][^\"']*[\"'][^>]*>",
+          "countLogic": "count",
+          "scoreLogic": "present",
+          "displayTemplate": "{{count}} manifest link(s) found"
+        },
+        "schema-markup": {
+          "id": "schema-markup",
+          "title": "Schema Markup",
+          "description": "Checks for structured data markup",
+          "scoreDisplayMode": "binary",
+          "pattern": "(<script[^>]*type=[\"']application/ld\\+json[\"'][^>]*>[^<]*</script>)|(<[^>]*itemtype=[\"'][^\"']*[\"'][^>]*>)",
+          "countLogic": "count",
+          "scoreLogic": "present",
+          "displayTemplate": "{{count}} schema markup element(s) found"
+        },
+        "twitter-cards": {
+          "id": "twitter-cards",
+          "title": "Twitter Cards",
+          "description": "Checks for Twitter Card meta tags",
+          "scoreDisplayMode": "binary",
+          "pattern": "<meta[^>]*name=[\"']twitter:[^\"']*[\"'][^>]*content=[\"'][^\"']*[\"'][^>]*>",
+          "countLogic": "count",
+          "scoreLogic": "present",
+          "displayTemplate": "{{count}} Twitter Card tag(s) found"
+        },
+        "image-alt-text": {
+          "id": "image-alt-text",
+          "title": "Image Alt Text",
+          "description": "Checks for alt text on images",
+          "scoreDisplayMode": "binary",
+          "pattern": "<img[^>]*alt=[\"'][^\"']*[\"'][^>]*>",
+          "countLogic": "count",
+          "scoreLogic": "present",
+          "displayTemplate": "{{count}} image(s) with alt text found"
+        },
+        "itemprop-tags": {
+          "id": "itemprop-tags",
+          "title": "ItemProp Tags",
+          "description": "Checks for ItemProp microdata tags for social media sharing",
+          "scoreDisplayMode": "binary",
+          "pattern": "<[^>]*itemprop=[\"'][^\"']*[\"'][^>]*>",
+          "countLogic": "count",
+          "scoreLogic": "present",
+          "displayTemplate": "{{count}} ItemProp tag(s) found"
+        }
+      }
+    },
+    "on-site": {
+      "name": "On-Site SEO",
+      "description": "Site-wide technical and structural elements",
+      "priority": 2,
+      "metrics": {
+        "https": {
+          "id": "https",
+          "title": "HTTPS",
+          "description": "Checks if site uses secure HTTPS protocol",
+          "scoreDisplayMode": "binary",
+          "dataCollector": null,
+          "scorer": null
+        },
+        "url-structure": {
+          "id": "url-structure",
+          "title": "URL Structure",
+          "description": "Checks for clean URL structure without excessive parameters",
+          "scoreDisplayMode": "binary",
+          "dataCollector": null,
+          "scorer": null
+        },
+        "robots-txt": {
+          "id": "robots-txt",
+          "title": "Robots.txt",
+          "description": "Checks for robots.txt file accessibility",
+          "scoreDisplayMode": "binary",
+          "dataCollector": null,
+          "scorer": null
+        },
+        "sitemap-xml": {
+          "id": "sitemap-xml",
+          "title": "Sitemap.xml",
+          "description": "Checks for sitemap.xml file accessibility",
+          "scoreDisplayMode": "binary",
+          "dataCollector": null,
+          "scorer": null
+        },
+        "internal-linking": {
+          "id": "internal-linking",
+          "title": "Internal Linking",
+          "description": "Checks for proper internal linking structure",
+          "scoreDisplayMode": "binary",
+          "dataCollector": null,
+          "scorer": null
+        },
+        "navigation": {
+          "id": "navigation",
+          "title": "Navigation",
+          "description": "Checks for proper navigation structure",
+          "scoreDisplayMode": "binary",
+          "dataCollector": null,
+          "scorer": null
+        },
+        "broken-links": {
+          "id": "broken-links",
+          "title": "Broken Links / 404s",
+          "description": "Checks for broken internal links",
+          "scoreDisplayMode": "binary",
+          "dataCollector": null,
+          "scorer": null
+        },
+        "manifest-file": {
+          "id": "manifest-file",
+          "title": "Manifest File",
+          "description": "Checks for manifest.webmanifest file accessibility",
+          "scoreDisplayMode": "binary",
+          "dataCollector": null,
+          "scorer": null
+        }
+      }
+    }
+  }
+}

package/dist/components/admin/site-health/site-health-accessibility.js

@@ -0,0 +1,158 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useCallback } from 'react';
+import { SiteHealthTemplate } from './site-health-template';
+import { getScoreIndicator } from './site-health-indicators';
+export function SiteHealthAccessibility({ siteName }) {
+    const fetchAccessibilityData = useCallback(async (site) => {
+        const response = await fetch(`/api/site-health/core-web-vitals?siteName=${encodeURIComponent(site)}`);
+        const result = await response.json();
+        if (!result.success) {
+            throw new Error(result.error || 'Failed to fetch accessibility data');
+        }
+        return result;
+    }, []);
+    return (_jsx(SiteHealthTemplate, { siteName: siteName, title: "PageSpeed - Accessibility", fetchData: fetchAccessibilityData, children: (data) => {
+            const getScoreColor = (score) => {
+                return getScoreIndicator(score).color;
+            };
+            const getAuditScoreIcon = (score) => {
+                return getScoreIndicator(score).icon;
+            };
+            // Helper function to display audit item details
+            const formatAuditItem = (item, auditTitle) => {
+                // Handle URLs
+                if (item.url && typeof item.url === 'string') {
+                    return item.url;
+                }
+                // Handle sources (like JavaScript files)
+                if (item.source && typeof item.source === 'string') {
+                    return item.source;
+                }
+                // Handle text descriptions
+                if (item.text && typeof item.text === 'string') {
+                    return item.text;
+                }
+                // Handle entities (like "Google Tag Manager")
+                if (item.entity && typeof item.entity === 'string') {
+                    return item.entity;
+                }
+                // Handle nodes with selectors
+                if (item.node && typeof item.node === 'object' && 'selector' in item.node) {
+                    return `Element: ${item.node.selector}`;
+                }
+                // Handle nodes with snippets
+                if (item.node && typeof item.node === 'object' && 'snippet' in item.node) {
+                    const snippet = item.node.snippet;
+                    return `Element: ${snippet.length > 50 ? snippet.substring(0, 50) + '...' : snippet}`;
+                }
+                // Handle origins (like domains)
+                if (item.origin && typeof item.origin === 'string') {
+                    return item.origin;
+                }
+                // Handle labels
+                if (item.label && typeof item.label === 'string') {
+                    return item.label;
+                }
+                // Handle numeric values with units
+                if (item.value && typeof item.value === 'object' && 'type' in item.value && item.value.type === 'numeric') {
+                    const value = item.value;
+                    return `${value.value}${item.unit || ''}`;
+                }
+                // Handle statistics
+                if (item.statistic && typeof item.statistic === 'string' && item.value) {
+                    if (typeof item.value === 'object' && 'type' in item.value && item.value.type === 'numeric') {
+                        const value = item.value;
+                        return `${item.statistic}: ${value.value}`;
+                    }
+                    return item.statistic;
+                }
+                // Handle timing data with audit context
+                if (typeof item === 'number') {
+                    let context = '';
+                    if (auditTitle) {
+                        if (auditTitle.toLowerCase().includes('server') || auditTitle.toLowerCase().includes('backend')) {
+                            context = ' server response';
+                        }
+                        else if (auditTitle.toLowerCase().includes('network') || auditTitle.toLowerCase().includes('request')) {
+                            context = ' network request';
+                        }
+                        else if (auditTitle.toLowerCase().includes('render') || auditTitle.toLowerCase().includes('blocking')) {
+                            context = ' render blocking';
+                        }
+                        else if (auditTitle.toLowerCase().includes('javascript') || auditTitle.toLowerCase().includes('js')) {
+                            context = ' JavaScript';
+                        }
+                        else if (auditTitle.toLowerCase().includes('image') || auditTitle.toLowerCase().includes('media')) {
+                            context = ' media resource';
+                        }
+                    }
+                    return `${item.toFixed(2)}ms${context}`;
+                }
+                if (item.value && typeof item.value === 'number') {
+                    const unit = item.unit || 'ms';
+                    let context = '';
+                    if (auditTitle && unit === 'ms') {
+                        if (auditTitle.toLowerCase().includes('server')) {
+                            context = ' server time';
+                        }
+                        else if (auditTitle.toLowerCase().includes('network')) {
+                            context = ' network time';
+                        }
+                    }
+                    return `${item.value.toFixed(2)}${unit}${context}`;
+                }
+                // If we can't find anything meaningful, show a generic message
+                return 'Details available';
+            };
+            if (!data?.data || data.data.length === 0) {
+                return (_jsx("p", { style: { color: '#6b7280' }, children: "No accessibility data available for this site." }));
+            }
+            const siteData = data.data[0];
+            if (siteData.status === 'error') {
+                return (_jsxs("p", { style: { color: '#ef4444', fontSize: '0.875rem' }, children: ["Error: ", siteData.error] }));
+            }
+            return (_jsxs(_Fragment, { children: [_jsx("h4", { className: "health-site-name", children: siteData.site.replace('-', ' ') }), _jsxs("p", { className: "health-site-url", children: ["URL: ", siteData.url] }), siteData.scores.accessibility !== null && (_jsx("div", { className: "health-score-container", children: _jsxs("div", { className: "health-score-item", children: [_jsx("div", { className: "health-score-label", children: "Accessibility Score" }), _jsxs("div", { className: "health-score-value", style: { color: getScoreColor(siteData.scores.accessibility) }, children: [Math.round((siteData.scores.accessibility || 0) * 100), "%"] }), _jsx("div", { className: "health-score-bar", children: _jsx("div", { className: "health-score-fill", style: {
+                                            width: `${(siteData.scores.accessibility || 0) * 100}%`,
+                                            backgroundColor: getScoreColor(siteData.scores.accessibility)
+                                        } }) })] }) })), siteData.categories.accessibility && siteData.categories.accessibility.audits.length > 0 && (_jsxs("div", { children: [_jsx("h5", { style: { fontSize: '1rem', fontWeight: '600', marginBottom: '1rem' }, children: "Accessibility Issues & Recommendations" }), _jsx("div", { className: "space-y-2", children: siteData.categories.accessibility.audits
+                                    .filter(audit => audit.scoreDisplayMode !== 'notApplicable')
+                                    .sort((a, b) => {
+                                    // Prioritize specific important accessibility audits
+                                    const priorityAudits = [
+                                        'color-contrast',
+                                        'image-alt',
+                                        'label',
+                                        'button-name',
+                                        'link-name',
+                                        'heading-order',
+                                        'focusable-controls',
+                                        'interactive-element-affordance',
+                                        'logical-tab-order',
+                                        'focus-traps',
+                                        'bypass',
+                                        'landmark-one-main',
+                                        'meta-viewport',
+                                        'html-has-lang',
+                                        'html-lang-valid',
+                                        'video-caption',
+                                        'audio-caption'
+                                    ];
+                                    const aPriority = priorityAudits.indexOf(a.id);
+                                    const bPriority = priorityAudits.indexOf(b.id);
+                                    // If both are priority audits, sort by priority order
+                                    if (aPriority !== -1 && bPriority !== -1) {
+                                        return aPriority - bPriority;
+                                    }
+                                    // If only one is priority, put it first
+                                    if (aPriority !== -1)
+                                        return -1;
+                                    if (bPriority !== -1)
+                                        return 1;
+                                    // Otherwise sort by score
+                                    return (b.score || 0) - (a.score || 0);
+                                })
+                                    .slice(0, 20)
+                                    .map((audit) => (_jsxs("div", { className: "health-audit-item", children: [_jsx("span", { className: "health-audit-icon", children: getAuditScoreIcon(audit.score) }), _jsxs("div", { className: "health-audit-content", children: [_jsxs("span", { className: "health-audit-title", children: ["(", Math.round((audit.score || 0) * 100), "%) ", audit.title] }), audit.displayValue && (_jsx("p", { className: "health-audit-description", children: audit.displayValue })), audit.details?.items && Array.isArray(audit.details.items) && audit.details.items.length > 0 && (audit.score || 0) < 0.9 && (_jsx("div", { className: "health-audit-details", children: _jsx("div", { style: { fontSize: '0.75rem', color: '#6b7280', marginTop: '0.25rem' }, children: audit.details.items.map((item, idx) => (_jsx("div", { style: { marginBottom: '0.125rem' }, children: formatAuditItem(item, audit.title) }, idx))) }) }))] })] }, audit.id))) })] })), _jsxs("p", { className: "health-timestamp", children: ["Last checked: ", new Date(siteData.timestamp).toLocaleString()] })] }));
+        } }));
+}

package/dist/components/admin/site-health/site-health-axe-core.integration.js

@@ -0,0 +1,119 @@
+"use server";
+import puppeteer from 'puppeteer';
+export async function performAxeCoreAnalysis(url) {
+    try {
+        // Run axe-core analysis
+        const axeResult = await runAxeCoreAnalysis(url);
+        // Calculate summary
+        const summary = {
+            violations: axeResult.violations.length,
+            passes: axeResult.passes.length,
+            incomplete: axeResult.incomplete.length,
+            inapplicable: axeResult.inapplicable.length,
+            critical: axeResult.violations.filter(v => v.impact === 'critical').length,
+            serious: axeResult.violations.filter(v => v.impact === 'serious').length,
+            moderate: axeResult.violations.filter(v => v.impact === 'moderate').length,
+            minor: axeResult.violations.filter(v => v.impact === 'minor').length,
+        };
+        return {
+            site: '', // Will be set by the caller
+            url: url,
+            result: axeResult,
+            summary,
+            timestamp: new Date().toISOString(),
+            status: 'success',
+        };
+    }
+    catch (error) {
+        console.error('Axe-core analysis failed:', error);
+        return {
+            site: '', // Will be set by the caller
+            url: url,
+            result: {
+                violations: [],
+                passes: [],
+                incomplete: [],
+                inapplicable: [],
+                testEngine: { name: 'axe-core', version: 'unknown' },
+                testRunner: { name: 'unknown' },
+                testEnvironment: {
+                    userAgent: 'unknown',
+                    windowWidth: 0,
+                    windowHeight: 0,
+                },
+                timestamp: new Date().toISOString(),
+                url: url,
+            },
+            summary: {
+                violations: 0,
+                passes: 0,
+                incomplete: 0,
+                inapplicable: 0,
+                critical: 0,
+                serious: 0,
+                moderate: 0,
+                minor: 0,
+            },
+            timestamp: new Date().toISOString(),
+            status: 'error',
+            error: error instanceof Error ? error.message : 'Unknown error occurred during axe-core analysis',
+        };
+    }
+}
+async function runAxeCoreAnalysis(url) {
+    let browser;
+    try {
+        // Launch browser with options for better compatibility
+        browser = await puppeteer.launch({
+            headless: true,
+            args: [
+                '--no-sandbox',
+                '--disable-setuid-sandbox',
+                '--disable-dev-shm-usage',
+                '--disable-accelerated-2d-canvas',
+                '--no-first-run',
+                '--no-zygote',
+                '--single-process', // <- this one doesn't work in Windows
+                '--disable-gpu'
+            ]
+        });
+        const page = await browser.newPage();
+        // Set viewport for consistent results
+        await page.setViewport({ width: 1280, height: 720 });
+        // Set user agent to avoid bot detection
+        await page.setUserAgent('Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.124 Safari/537.36');
+        // Navigate to the page with timeout
+        await page.goto(url, {
+            waitUntil: 'networkidle2',
+            timeout: 30000
+        });
+        // Wait a bit for dynamic content to load
+        await new Promise(resolve => setTimeout(resolve, 2000));
+        // Inject axe-core by adding the script tag
+        await page.addScriptTag({
+            url: 'https://cdn.jsdelivr.net/npm/axe-core@4.8.2/axe.min.js'
+        });
+        // Wait a bit for axe to load
+        await new Promise(resolve => setTimeout(resolve, 1000));
+        // Run axe-core analysis
+        const result = await page.evaluate(async () => {
+            // Check if axe is available
+            if (typeof window.axe === 'undefined') {
+                throw new Error('axe-core not loaded');
+            }
+            // Run axe with all rules enabled
+            const axeResults = await window.axe.run(document, {
+                rules: {}, // Run all rules
+                runOnly: undefined, // Don't restrict to specific rule sets
+                reporter: 'v2'
+            });
+            return axeResults;
+        });
+        return result;
+    }
+    finally {
+        if (browser) {
+            await browser.close();
+        }
+    }
+}

package/dist/components/admin/site-health/site-health-axe-core.js

@@ -0,0 +1,53 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useCallback } from 'react';
+import { SiteHealthTemplate } from './site-health-template';
+import { getImpactIndicator, getIncompleteIndicator, getPassingIndicator } from './site-health-indicators';
+export function SiteHealthAxeCore({ siteName }) {
+    const fetchAxeCoreData = useCallback(async (site) => {
+        const response = await fetch(`/api/site-health/axe-core?siteName=${encodeURIComponent(site)}`);
+        const result = await response.json();
+        if (!result.success) {
+            throw new Error(result.error || 'Failed to fetch axe-core data');
+        }
+        return result;
+    }, []);
+    const getImpactColor = (impact) => {
+        return getImpactIndicator(impact).color;
+    };
+    const getImpactIcon = (impact) => {
+        return getImpactIndicator(impact).icon;
+    };
+    const formatNodeInfo = (node) => {
+        if (node.target && Array.isArray(node.target) && node.target.length > 0) {
+            // Return the CSS selector
+            return node.target.join(', ');
+        }
+        if (node.html) {
+            // Return a truncated version of the HTML
+            const html = node.html;
+            return html.length > 100 ? html.substring(0, 100) + '...' : html;
+        }
+        return 'Unknown element';
+    };
+    return (_jsx(SiteHealthTemplate, { siteName: siteName, title: "Axe-Core Accessibility", fetchData: fetchAxeCoreData, children: (data) => {
+            if (!data?.data || data.data.length === 0) {
+                return (_jsx("p", { style: { color: '#6b7280' }, children: "No axe-core data available for this site." }));
+            }
+            const siteData = data.data[0];
+            if (siteData.status === 'error') {
+                return (_jsxs("p", { style: { color: '#ef4444', fontSize: '0.875rem' }, children: ["Error: ", siteData.error] }));
+            }
+            const { result, summary } = siteData;
+            return (_jsxs(_Fragment, { children: [_jsx("h4", { className: "health-site-name", children: siteData.site.replace('-', ' ') }), _jsxs("p", { className: "health-site-url", children: ["URL: ", siteData.url] }), _jsx("div", { className: "health-score-container", children: _jsxs("div", { className: "health-score-item", children: [_jsx("div", { className: "health-score-label", children: "Accessibility Summary" }), _jsxs("div", { className: "health-score-grid", children: [_jsxs("div", { className: "health-stat-item", children: [_jsx("span", { className: "health-stat-label", children: "Violations : " }), _jsx("span", { className: "health-stat-value", style: { color: summary.violations > 0 ? '#ef4444' : '#10b981' }, children: summary.violations })] }), _jsxs("div", { className: "health-stat-item", children: [_jsx("span", { className: "health-stat-label", children: "Passes : " }), _jsx("span", { className: "health-stat-value", style: { color: '#10b981' }, children: summary.passes })] }), _jsxs("div", { className: "health-stat-item", children: [_jsx("span", { className: "health-stat-label", children: "Incomplete : " }), _jsx("span", { className: "health-stat-value", style: { color: '#f59e0b' }, children: summary.incomplete })] })] })] }) }), summary.violations > 0 && (_jsx("div", { className: "health-score-container", children: _jsxs("div", { className: "health-score-item", children: [_jsx("div", { className: "health-score-label", children: "Violation Impact Levels" }), _jsxs("div", { className: "health-score-grid", children: [_jsxs("div", { className: "health-stat-item", children: [_jsx("span", { className: "health-stat-label", children: "Critical : " }), _jsx("span", { className: "health-stat-value", style: { color: getImpactColor('critical') }, children: summary.critical })] }), _jsxs("div", { className: "health-stat-item", children: [_jsx("span", { className: "health-stat-label", children: "Serious : " }), _jsx("span", { className: "health-stat-value", style: { color: getImpactColor('serious') }, children: summary.serious })] }), _jsxs("div", { className: "health-stat-item", children: [_jsx("span", { className: "health-stat-label", children: "Moderate : " }), _jsx("span", { className: "health-stat-value", style: { color: getImpactColor('moderate') }, children: summary.moderate })] }), _jsxs("div", { className: "health-stat-item", children: [_jsx("span", { className: "health-stat-label", children: "Minor : " }), _jsx("span", { className: "health-stat-value", style: { color: getImpactColor('minor') }, children: summary.minor })] })] })] }) })), result.violations.length > 0 && (_jsxs("div", { children: [_jsx("h5", { style: { fontSize: '1rem', fontWeight: '600', marginBottom: '1rem' }, children: "Accessibility Violations" }), _jsx("div", { className: "space-y-2", children: result.violations
+                                    .sort((a, b) => {
+                                    const impactOrder = { critical: 4, serious: 3, moderate: 2, minor: 1 };
+                                    return impactOrder[b.impact] - impactOrder[a.impact];
+                                })
+                                    .slice(0, 20)
+                                    .map((violation) => (_jsxs("div", { className: "health-audit-item", children: [_jsx("span", { className: "health-audit-icon", children: getImpactIcon(violation.impact) }), _jsxs("div", { className: "health-audit-content", children: [_jsxs("span", { className: "health-audit-title", children: [violation.help, " (", violation.impact, ")"] }), _jsx("p", { className: "health-audit-description", children: violation.description }), violation.nodes && violation.nodes.length > 0 && (_jsx("div", { className: "health-audit-details", children: _jsxs("div", { style: { fontSize: '0.75rem', color: '#6b7280', marginTop: '0.25rem' }, children: ["Affected elements (", violation.nodes.length, "):", violation.nodes.map((node, idx) => (_jsx("div", { style: { marginBottom: '0.125rem' }, children: formatNodeInfo(node) }, idx)))] }) })), _jsx("div", { style: { fontSize: '0.75rem', color: '#6b7280', marginTop: '0.25rem' }, children: _jsx("a", { href: violation.helpUrl, target: "_blank", rel: "noopener noreferrer", style: { color: '#3b82f6', textDecoration: 'underline' }, children: "Learn more about this rule" }) })] })] }, violation.id))) })] })), result.passes.length > 0 && result.violations.length === 0 && (_jsxs("div", { children: [_jsxs("h5", { style: { fontSize: '1rem', fontWeight: '600', marginBottom: '1rem', color: '#10b981' }, children: [getPassingIndicator().icon, " All Accessibility Checks Passed"] }), _jsxs("p", { style: { color: '#6b7280', fontSize: '0.875rem' }, children: [result.passes.length, " accessibility rules were successfully validated."] })] })), result.incomplete.length > 0 && (_jsxs("div", { style: { marginTop: '15px' }, children: [_jsxs("h5", { style: { fontSize: '1rem', fontWeight: '600', marginBottom: '1rem', color: '#f59e0b' }, children: ["Incomplete Tests (", result.incomplete.length, ")"] }), _jsx("div", { className: "space-y-2", children: result.incomplete
+                                    .sort((a, b) => a.id.localeCompare(b.id))
+                                    .slice(0, 10)
+                                    .map((incomplete) => (_jsxs("div", { className: "health-audit-item", children: [_jsx("span", { className: "health-audit-icon", children: getIncompleteIndicator().icon }), _jsxs("div", { className: "health-audit-content", children: [_jsx("span", { className: "health-audit-title", children: incomplete.help }), _jsx("p", { className: "health-audit-description", children: incomplete.description }), incomplete.nodes && incomplete.nodes.length > 0 && (_jsx("div", { className: "health-audit-details", children: _jsxs("div", { style: { fontSize: '0.75rem', color: '#6b7280', marginTop: '0.25rem' }, children: ["Elements tested (", incomplete.nodes.length, "):", incomplete.nodes.slice(0, 3).map((node, idx) => (_jsx("div", { style: { marginBottom: '0.125rem' }, children: formatNodeInfo(node) }, idx))), incomplete.nodes.length > 3 && (_jsxs("div", { style: { marginTop: '0.25rem', fontStyle: 'italic' }, children: ["... and ", incomplete.nodes.length - 3, " more elements"] }))] }) })), _jsx("div", { style: { fontSize: '0.75rem', color: '#6b7280', marginTop: '0.25rem' }, children: _jsx("a", { href: incomplete.helpUrl, target: "_blank", rel: "noopener noreferrer", style: { color: '#3b82f6', textDecoration: 'underline' }, children: "Learn more about this rule" }) })] })] }, incomplete.id))) })] })), _jsxs("div", { className: "health-timestamp", children: [_jsxs("div", { children: ["Tested with axe-core ", result.testEngine?.version || 'unknown'] }), _jsxs("div", { children: ["Last checked: ", new Date(siteData.timestamp).toLocaleString()] })] })] }));
+        } }));
+}

package/dist/components/admin/site-health/site-health-cache.js

@@ -0,0 +1,23 @@
+/**
+ * Shared caching utilities for Site Health components
+ */
+export class RouteCache {
+    cache = new Map();
+    duration;
+    constructor(durationMs = 60 * 60 * 1000) {
+        this.duration = durationMs;
+    }
+    get(key) {
+        const cached = this.cache.get(key);
+        if (cached && Date.now() - cached.timestamp < this.duration) {
+            return cached.data;
+        }
+        return null;
+    }
+    set(key, data) {
+        this.cache.set(key, { data, timestamp: Date.now() });
+    }
+    clear() {
+        this.cache.clear();
+    }
+}