@pixelated-tech/components 3.5.12 → 3.5.14

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

@@ -3,7 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { useCallback } from 'react';
 import PropTypes from 'prop-types';
 import { SiteHealthTemplate } from './site-health-template';
-import { getScoreIndicator } from './site-health-indicators';
+import { formatAuditItem, getAuditScoreIcon, getScoreColor } from './site-health-utils';
 SiteHealthSecurity.propTypes = {
     siteName: PropTypes.string.isRequired,
 };
@@ -17,143 +17,6 @@ export function SiteHealthSecurity({ siteName }) {
         };
     }, []);
     return (_jsx(SiteHealthTemplate, { siteName: siteName, title: "PageSpeed - Site Security", fetchData: fetchSecurityData, 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 more context
-                if (item.duration && typeof item.duration === 'number') {
-                    const duration = item.duration;
-                    let context = '';
-                    if (item.url && typeof item.url === 'string') {
-                        context = ` for ${item.url}`;
-                    }
-                    else if (item.source && typeof item.source === 'string') {
-                        context = ` for ${item.source}`;
-                    }
-                    else if (item.name && typeof item.name === 'string') {
-                        context = ` for ${item.name}`;
-                    }
-                    return `${duration.toFixed(2)}ms${context}`;
-                }
-                // Handle response times
-                if (item.responseTime && typeof item.responseTime === 'number') {
-                    const url = (item.url && typeof item.url === 'string') ? ` (${item.url})` : '';
-                    return `${item.responseTime.toFixed(2)}ms response time${url}`;
-                }
-                // Handle start/end times
-                if ((item.startTime || item.endTime) && typeof (item.startTime || item.endTime) === 'number') {
-                    const start = item.startTime && typeof item.startTime === 'number' ? item.startTime.toFixed(2) : '?';
-                    const end = item.endTime && typeof item.endTime === 'number' ? item.endTime.toFixed(2) : '?';
-                    const url = (item.url && typeof item.url === 'string') ? ` for ${item.url}` : '';
-                    return `${start}ms - ${end}ms${url}`;
-                }
-                // Handle transfer size with timing
-                if (item.transferSize && typeof item.transferSize === 'number' && item.duration && typeof item.duration === 'number') {
-                    const size = (item.transferSize / 1024).toFixed(1);
-                    const time = item.duration.toFixed(2);
-                    const url = (item.url && typeof item.url === 'string') ? ` (${item.url})` : '';
-                    return `${size} KB in ${time}ms${url}`;
-                }
-                // Handle main thread time
-                if (item.mainThreadTime && typeof item.mainThreadTime === 'number') {
-                    return `${item.mainThreadTime.toFixed(1)}ms`;
-                }
-                // For other objects, try to find a meaningful display
-                if (item.group && typeof item.group === 'string') {
-                    return item.group;
-                }
-                if (item.type && typeof item.type === 'string') {
-                    return item.type;
-                }
-                // If we can't find anything meaningful, provide a generic description
-                // This handles raw timing data that might be from various performance metrics
-                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}`;
-                }
-                return 'Details available';
-            };
             const psiData = data?.psiData?.data?.[0];
             if (!psiData) {
                 return (_jsx("p", { style: { color: '#6b7280' }, children: "No security data available for this site." }));
@@ -164,7 +27,7 @@ export function SiteHealthSecurity({ siteName }) {
             return (_jsxs(_Fragment, { children: [_jsx("h4", { className: "health-site-name", children: siteName.replace('-', ' ') }), _jsxs("p", { className: "health-site-url", children: ["URL: ", psiData.url] }), psiData.scores['best-practices'] !== null && (_jsx("div", { className: "health-score-container", children: _jsxs("div", { className: "health-score-item", children: [_jsx("div", { className: "health-score-label", children: "Best Practices Score" }), _jsxs("div", { className: "health-score-value", style: { color: getScoreColor(psiData.scores['best-practices']) }, children: [Math.round((psiData.scores['best-practices'] || 0) * 100), "%"] }), _jsx("div", { className: "health-score-bar", children: _jsx("div", { className: "health-score-fill", style: {
                                             width: `${(psiData.scores['best-practices'] || 0) * 100}%`,
                                             backgroundColor: getScoreColor(psiData.scores['best-practices'])
-                                        } }) })] }) })), psiData.categories['best-practices'] && psiData.categories['best-practices'].audits.length > 0 && (_jsxs("div", { children: [_jsx("h5", { style: { fontSize: '1rem', fontWeight: '600', marginBottom: '1rem' }, children: "Security Best Practices" }), _jsx("div", { className: "space-y-2", children: psiData.categories['best-practices'].audits
+                                        } }) })] }) })), psiData.categories['best-practices'] && psiData.categories['best-practices'].audits.length > 0 && (_jsxs("div", { children: [_jsx("h5", { style: { fontSize: '1rem', fontWeight: '600', marginBottom: '1rem' }, children: "Security Best Practices" }), _jsx("div", { className: "health-audit-list", children: psiData.categories['best-practices'].audits
                                     .filter((audit) => audit.scoreDisplayMode !== 'notApplicable')
                                     .sort((a, b) => (b.score || 0) - (a.score || 0))
                                     .slice(0, 20)

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

@@ -3,7 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { useCallback } from 'react';
 import PropTypes from 'prop-types';
 import { SiteHealthTemplate } from './site-health-template';
-import { getScoreIndicator } from './site-health-indicators';
+import { formatAuditItem, getAuditScoreIcon, getScoreColor } from './site-health-utils';
 SiteHealthSEO.propTypes = {
     siteName: PropTypes.string.isRequired,
 };
@@ -17,98 +17,6 @@ export function SiteHealthSEO({ siteName }) {
         return result;
     }, []);
     return (_jsx(SiteHealthTemplate, { siteName: siteName, title: "PageSpeed - SEO", fetchData: fetchSEOData, 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 SEO data available for this site." }));
             }
@@ -119,7 +27,7 @@ export function SiteHealthSEO({ siteName }) {
             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.seo !== null && (_jsx("div", { className: "health-score-container", children: _jsxs("div", { className: "health-score-item", children: [_jsx("div", { className: "health-score-label", children: "SEO Score" }), _jsxs("div", { className: "health-score-value", style: { color: getScoreColor(siteData.scores.seo) }, children: [Math.round((siteData.scores.seo || 0) * 100), "%"] }), _jsx("div", { className: "health-score-bar", children: _jsx("div", { className: "health-score-fill", style: {
                                             width: `${(siteData.scores.seo || 0) * 100}%`,
                                             backgroundColor: getScoreColor(siteData.scores.seo)
-                                        } }) })] }) })), siteData.categories.seo && siteData.categories.seo.audits.length > 0 && (_jsxs("div", { children: [_jsx("h5", { style: { fontSize: '1rem', fontWeight: '600', marginBottom: '1rem' }, children: "SEO Issues & Recommendations" }), _jsx("div", { className: "space-y-2", children: siteData.categories.seo.audits
+                                        } }) })] }) })), siteData.categories.seo && siteData.categories.seo.audits.length > 0 && (_jsxs("div", { children: [_jsx("h5", { style: { fontSize: '1rem', fontWeight: '600', marginBottom: '1rem' }, children: "SEO Issues & Recommendations" }), _jsx("div", { className: "health-audit-list", children: siteData.categories.seo.audits
                                     .filter((audit) => audit.scoreDisplayMode !== 'notApplicable')
                                     .sort((a, b) => (b.score || 0) - (a.score || 0))
                                     .slice(0, 20)

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

@@ -0,0 +1,170 @@
+// Shared utilities for site-health components
+// This file contains common functions used across multiple site-health components
+import { getScoreIndicator } from './site-health-indicators';
+/**
+ * Gets the icon for a score
+ */
+export function getAuditScoreIcon(score) {
+    return getScoreIndicator(score).icon;
+}
+/**
+ * Gets the color for a score
+ */
+export function getScoreColor(score) {
+    return getScoreIndicator(score).color;
+}
+/**
+ * Formats a score for display
+ */
+export function formatScore(score) {
+    if (score === null)
+        return 'N/A';
+    return `${Math.round(score * 100)}%`;
+}
+/**
+ * Formats audit item details for display
+ */
+export function 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}`;
+    }
+    // Handle timing data with more context
+    if (item.duration && typeof item.duration === 'number') {
+        const duration = item.duration;
+        let context = '';
+        if (item.url && typeof item.url === 'string') {
+            context = ` for ${item.url}`;
+        }
+        else if (item.source && typeof item.source === 'string') {
+            context = ` for ${item.source}`;
+        }
+        else if (item.name && typeof item.name === 'string') {
+            context = ` for ${item.name}`;
+        }
+        else if (item.path && typeof item.path === 'string') {
+            context = ` for ${item.path}`;
+        }
+        else if (item.request && typeof item.request === 'string') {
+            context = ` for ${item.request}`;
+        }
+        return `${duration.toFixed(2)}ms${context}`;
+    }
+    // Handle response times
+    if (item.responseTime && typeof item.responseTime === 'number') {
+        const url = (item.url && typeof item.url === 'string') ? ` (${item.url})` : '';
+        return `${item.responseTime.toFixed(2)}ms response time${url}`;
+    }
+    // Handle start/end times
+    if ((item.startTime || item.endTime) && typeof (item.startTime || item.endTime) === 'number') {
+        const start = item.startTime && typeof item.startTime === 'number' ? item.startTime.toFixed(2) : '?';
+        const end = item.endTime && typeof item.endTime === 'number' ? item.endTime.toFixed(2) : '?';
+        const url = (item.url && typeof item.url === 'string') ? ` for ${item.url}` : '';
+        return `${start}ms - ${end}ms${url}`;
+    }
+    // Handle transfer size with timing
+    if (item.transferSize && typeof item.transferSize === 'number' && item.duration && typeof item.duration === 'number') {
+        const size = (item.transferSize / 1024).toFixed(1);
+        const time = item.duration.toFixed(2);
+        const url = (item.url && typeof item.url === 'string') ? ` (${item.url})` : '';
+        return `${size} KB in ${time}ms${url}`;
+    }
+    // Handle main thread time
+    if (item.mainThreadTime && typeof item.mainThreadTime === 'number') {
+        return `${item.mainThreadTime.toFixed(1)}ms`;
+    }
+    // For other objects, try to find a meaningful display
+    if (item.group && typeof item.group === 'string') {
+        return item.group;
+    }
+    if (item.type && typeof item.type === 'string') {
+        return item.type;
+    }
+    // If we can't find anything meaningful, provide a generic description
+    // This handles raw timing data that might be from various performance metrics
+    if (typeof item === 'number') {
+        return `${item.toFixed(2)}ms`;
+    }
+    if (item.value && typeof item.value === 'number') {
+        const unit = item.unit || 'ms';
+        return `${item.value.toFixed(2)}${unit}`;
+    }
+    return 'Performance metric data available';
+}

package/dist/components/admin/site-health/site-health.css

@@ -67,8 +67,7 @@
 
 .site-health-select select:focus {
   outline: none;
-  ring: 2px;
-  ring-color: var(--color-primary);
+  box-shadow: 0 0 0 2px var(--color-primary);
   border-color: var(--color-primary);
 }
 
@@ -418,10 +417,41 @@ td {
 
 table {
   width: 100%;
-  table-layout: fixed;
 }
 
 th, td {
   word-wrap: break-word;
   overflow-wrap: break-word;
 }
+
+/* Helper & Semantic classes */
+.health-audit-list > * + * { margin-top: 0.0rem; }
+.health-section-list > * + * { margin-top: 1rem; }
+
+.health-text-muted { color: #9ca3af; }
+.health-text-secondary { color: var(--color-text-secondary); }
+.health-text-error { color: var(--color-error); }
+
+.health-visualization-placeholder {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 16rem;
+}
+
+.health-version-tag {
+  display: inline-block;
+  padding: 0.25rem 0.5rem;
+  font-size: 0.75rem;
+  line-height: 1;
+  background-color: #dcfce7;
+  color: #166534;
+  border-radius: 0.25rem;
+  font-weight: 500;
+}
+
+.health-empty-state {
+  text-align: center;
+  padding: 1rem 0;
+  color: var(--color-text-secondary);
+}

package/dist/components/cms/smartimage.js

@@ -1,6 +1,6 @@
 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
-import React from 'react';
+import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import Image from 'next/image';
 import { buildCloudinaryUrl } from './cloudinary';
@@ -67,8 +67,27 @@ SmartImage.propTypes = {
 export function SmartImage(props) {
     const config = usePixelatedConfig();
     const cloudCfg = config?.cloudinary;
-    const variant = props.variant || 'cloudinary';
+    // State to track current variant - only changes on actual errors (rare)
+    const [currentVariant, setCurrentVariant] = useState(props.variant || 'cloudinary');
+    const handleError = (error) => {
+        if (currentVariant === 'cloudinary') {
+            console.warn(`SmartImage: Cloudinary variant failed for "${props.src}", falling back to Next.js Image`, error);
+            setCurrentVariant('nextjs');
+        }
+        else if (currentVariant === 'nextjs') {
+            console.warn(`SmartImage: Next.js Image variant failed for "${props.src}", falling back to HTML img`, error);
+            setCurrentVariant('img');
+        }
+        // No more fallbacks after 'img'
+    };
+    // Reset variant if props change (different image)
+    React.useEffect(() => {
+        setCurrentVariant(props.variant || 'cloudinary');
+    }, [props.src, props.variant]);
+    const variant = currentVariant;
     const newProps = { ...props };
+    // Always create ref to maintain consistent hook count across re-renders
+    const imgRef = React.useRef(null);
     newProps.cloudinaryEnv = safeString(props.cloudinaryEnv ?? cloudCfg?.product_env);
     newProps.cloudinaryDomain = safeString(cloudCfg?.baseUrl ?? CLOUDINARY_DOMAIN);
     newProps.cloudinaryTransforms = safeString(CLOUDINARY_TRANSFORMS ?? cloudCfg?.transforms);
@@ -102,7 +121,7 @@ export function SmartImage(props) {
         });
         if (newProps.width) {
             const widths = [Math.ceil(newProps.width * 0.5), newProps.width, Math.ceil(newProps.width * 1.5), Math.ceil(newProps.width * 2)];
-            newProps.srcSet = generateSrcSet(String(newProps.src), newProps.cloudinaryEnv, widths, {
+            newProps.srcSet = generateSrcSet(newProps.src, newProps.cloudinaryEnv, widths, {
                 quality: newProps.quality,
                 transforms: newProps.cloudinaryTransforms ?? undefined,
                 cloudinaryDomain: newProps.cloudinaryDomain
@@ -111,7 +130,7 @@ export function SmartImage(props) {
         }
         else {
             const breakpoints = [320, 640, 768, 1024, 1280, 1536];
-            newProps.srcSet = generateSrcSet(String(newProps.src), newProps.cloudinaryEnv, breakpoints, {
+            newProps.srcSet = generateSrcSet(newProps.src, newProps.cloudinaryEnv, breakpoints, {
                 quality: newProps.quality,
                 transforms: newProps.cloudinaryTransforms ?? undefined,
                 cloudinaryDomain: newProps.cloudinaryDomain
@@ -135,13 +154,14 @@ export function SmartImage(props) {
     delete newProps.cloudinaryTransforms;
     if (variant !== 'img') {
         try {
-            return (_jsx(Image, { ...newProps, src: newProps.src, alt: newProps.alt }));
+            return (_jsx(Image, { ...newProps, src: newProps.src, alt: newProps.alt, onError: handleError }));
         }
         catch (e) {
-            if (typeof console !== 'undefined')
-                console.warn('next/image unavailable, falling back to <img>', e);
+            console.warn(`SmartImage: Next.js Image threw exception for "${props.src}", falling back to plain img`, e);
+            // Force fallback to img variant
+            setCurrentVariant('img');
         }
     }
     /* ===== IMG VARIANT ===== */
-    return (_jsx("img", { ...newProps, ref: React.useRef(null), alt: newProps.alt }));
+    return (_jsx("img", { ...newProps, ref: imgRef, alt: newProps.alt }));
 }

package/dist/components/general/table.js

@@ -25,8 +25,8 @@ export function Table(props) {
     function getHeadings(data) {
         const headings = Object.keys(data[0]).map((key, i) => {
             return (props.sortable && props.sortable == true)
-                ? _jsxs("th", { onClick: () => { sortTable(key); }, children: [key, " ", _jsx("span", { className: "sortArrow" })] }, i)
-                : _jsx("th", { children: key }, i);
+                ? _jsxs("th", { onClick: () => { sortTable(key); }, children: [_jsx("span", { children: key }), " ", _jsx("span", { className: "sortArrow" })] }, i)
+                : _jsx("th", { children: _jsx("span", { children: key }) }, i);
         });
         return _jsx("tr", { children: headings });
     }

package/dist/components/sitebuilder/config/ConfigBuilder.js

@@ -229,13 +229,22 @@ export function ConfigBuilder(props) {
                 ...field.props,
                 value: (config.visualdesign && config.visualdesign[field.props.name]) ? (config.visualdesign[field.props.name].value ?? config.visualdesign[field.props.name]) : '',
                 defaultValue: (config.visualdesign && config.visualdesign[field.props.name]) ? (config.visualdesign[field.props.name].value ?? config.visualdesign[field.props.name]) : field.props.defaultValue || '',
-                onChange: (event) => {
-                    const value = event.target.value;
+                onChange: (value) => {
+                    // Handle both direct values and event objects
+                    let actualValue = value;
+                    if (value && typeof value === 'object' && value.target) {
+                        actualValue = value.target.value;
+                    }
                     setConfig((prev) => ({
                         ...prev,
                         visualdesign: {
                             ...(prev.visualdesign || {}),
-                            [field.props.name]: { value }
+                            [field.props.name]: {
+                                ...(prev.visualdesign && prev.visualdesign[field.props.name]
+                                    ? prev.visualdesign[field.props.name]
+                                    : {}),
+                                value: actualValue
+                            }
                         }
                     }));
                 }

package/dist/index.adminclient.js

@@ -23,6 +23,7 @@ export * from './components/admin/site-health/site-health-indicators';
 export * from './components/admin/site-health/site-health-on-site-seo.integration';
 export * from './components/admin/site-health/site-health-types';
 export * from './components/admin/site-health/site-health-performance';
+export * from './components/admin/site-health/site-health-utils';
 export * from './components/admin/site-health/site-health-cache';
 export * from './components/admin/site-health/site-health-indicators';
 export * from './components/admin/site-health/site-health-on-site-seo.integration';

package/dist/index.adminserver.js

@@ -14,6 +14,7 @@ export * from './components/admin/site-health/site-health-cloudwatch.integration
 export * from './components/admin/site-health/seo-constants';
 export * from './components/admin/site-health/site-health-security.integration';
 export * from './components/admin/site-health/site-health-types';
+export * from './components/admin/site-health/site-health-utils';
 export * from './components/admin/site-health/site-health-uptime.integration';
 export * from './components/admin/sites/sites.integration';
 export * from './components/cms/contentful.management';

package/dist/types/components/admin/site-health/site-health-accessibility.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"site-health-accessibility.d.ts","sourceRoot":"","sources":["../../../../../src/components/admin/site-health/site-health-accessibility.tsx"],"names":[],"mappings":"AAGA,OAAO,SAAS,EAAE,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAQnD,MAAM,MAAM,2BAA2B,GAAG,UAAU,CAAC,OAAO,uBAAuB,CAAC,SAAS,CAAC,CAAC;AAC/F,wBAAgB,uBAAuB,CAAC,EAAE,QAAQ,EAAE,EAAE,2BAA2B,2CA4PhF;yBA5Pe,uBAAuB"}
+{"version":3,"file":"site-health-accessibility.d.ts","sourceRoot":"","sources":["../../../../../src/components/admin/site-health/site-health-accessibility.tsx"],"names":[],"mappings":"AAGA,OAAO,SAAS,EAAE,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AASnD,MAAM,MAAM,2BAA2B,GAAG,UAAU,CAAC,OAAO,uBAAuB,CAAC,SAAS,CAAC,CAAC;AAC/F,wBAAgB,uBAAuB,CAAC,EAAE,QAAQ,EAAE,EAAE,2BAA2B,2CAsJhF;yBAtJe,uBAAuB"}

package/dist/types/components/admin/site-health/site-health-on-site-seo.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"site-health-on-site-seo.d.ts","sourceRoot":"","sources":["../../../../../src/components/admin/site-health/site-health-on-site-seo.tsx"],"names":[],"mappings":"AAGA,OAAO,SAAS,EAAE,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAqJnD,MAAM,MAAM,uBAAuB,GAAG,UAAU,CAAC,OAAO,mBAAmB,CAAC,SAAS,CAAC,CAAC;AACvF,wBAAgB,mBAAmB,CAAC,EAAE,QAAQ,EAAE,EAAE,uBAAuB,2CA8PxE;yBA9Pe,mBAAmB"}
+{"version":3,"file":"site-health-on-site-seo.d.ts","sourceRoot":"","sources":["../../../../../src/components/admin/site-health/site-health-on-site-seo.tsx"],"names":[],"mappings":"AAGA,OAAO,SAAS,EAAE,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAsJnD,MAAM,MAAM,uBAAuB,GAAG,UAAU,CAAC,OAAO,mBAAmB,CAAC,SAAS,CAAC,CAAC;AACvF,wBAAgB,mBAAmB,CAAC,EAAE,QAAQ,EAAE,EAAE,uBAAuB,2CAgIxE;yBAhIe,mBAAmB"}