@pixelated-tech/components 3.3.0 → 3.3.2

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

@@ -150,6 +150,17 @@
   margin-bottom: 15px;
 }
 
+.route-headers {
+  display: grid;
+  grid-template-columns: 2fr 2fr 2fr 2fr auto;
+  gap: 10px;
+  align-items: center;
+  padding: 10px;
+  font-weight: bold;
+  color: #333;
+  margin-bottom: 10px;
+}
+
 .route-item {
   display: grid;
   grid-template-columns: 2fr 2fr 2fr 2fr auto;

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

@@ -1,9 +1,13 @@
+"use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { Tab } from '../../general/tab';
+import { Accordion } from '../../general/accordion';
 import { FormEngine } from '../form/formengine';
 import siteInfoForm from '../../../data/siteinfo-form.json';
+import visualDesignForm from '../../../data/visualdesignform.json';
+import defaultConfigData from '../../../data/routes.json';
 import './ConfigBuilder.css';
 const SiteInfoPropTypes = {
     name: PropTypes.string.isRequired,
@@ -39,38 +43,162 @@ const RoutePropTypes = {
     title: PropTypes.string,
     description: PropTypes.string,
 };
+const VisualDesignPropTypes = {
+    'primary-color': PropTypes.shape({
+        value: PropTypes.string.isRequired,
+        type: PropTypes.string.isRequired,
+        group: PropTypes.string.isRequired,
+        label: PropTypes.string.isRequired
+    }).isRequired,
+    'secondary-color': PropTypes.shape({
+        value: PropTypes.string.isRequired,
+        type: PropTypes.string.isRequired,
+        group: PropTypes.string.isRequired,
+        label: PropTypes.string.isRequired
+    }).isRequired,
+    'accent1-color': PropTypes.shape({
+        value: PropTypes.string.isRequired,
+        type: PropTypes.string.isRequired,
+        group: PropTypes.string.isRequired,
+        label: PropTypes.string.isRequired
+    }).isRequired,
+    'accent2-color': PropTypes.shape({
+        value: PropTypes.string.isRequired,
+        type: PropTypes.string.isRequired,
+        group: PropTypes.string.isRequired,
+        label: PropTypes.string.isRequired
+    }).isRequired,
+    'bg-color': PropTypes.shape({
+        value: PropTypes.string.isRequired,
+        type: PropTypes.string.isRequired,
+        group: PropTypes.string.isRequired,
+        label: PropTypes.string.isRequired
+    }).isRequired,
+    'text-color': PropTypes.shape({
+        value: PropTypes.string.isRequired,
+        type: PropTypes.string.isRequired,
+        group: PropTypes.string.isRequired,
+        label: PropTypes.string.isRequired
+    }).isRequired,
+    'header-font': PropTypes.shape({
+        value: PropTypes.string.isRequired,
+        type: PropTypes.string.isRequired,
+        group: PropTypes.string.isRequired,
+        label: PropTypes.string.isRequired
+    }).isRequired,
+    'body-font': PropTypes.shape({
+        value: PropTypes.string.isRequired,
+        type: PropTypes.string.isRequired,
+        group: PropTypes.string.isRequired,
+        label: PropTypes.string.isRequired
+    }).isRequired,
+    'font-size1-min': PropTypes.shape({
+        value: PropTypes.string.isRequired,
+        type: PropTypes.string.isRequired,
+        group: PropTypes.string.isRequired,
+        label: PropTypes.string.isRequired
+    }).isRequired,
+    'font-size1-max': PropTypes.shape({
+        value: PropTypes.string.isRequired,
+        type: PropTypes.string.isRequired,
+        group: PropTypes.string.isRequired,
+        label: PropTypes.string.isRequired
+    }).isRequired,
+    'font-size2-min': PropTypes.shape({
+        value: PropTypes.string.isRequired,
+        type: PropTypes.string.isRequired,
+        group: PropTypes.string.isRequired,
+        label: PropTypes.string.isRequired
+    }).isRequired,
+    'font-size2-max': PropTypes.shape({
+        value: PropTypes.string.isRequired,
+        type: PropTypes.string.isRequired,
+        group: PropTypes.string.isRequired,
+        label: PropTypes.string.isRequired
+    }).isRequired,
+    'font-size3-min': PropTypes.shape({
+        value: PropTypes.string.isRequired,
+        type: PropTypes.string.isRequired,
+        group: PropTypes.string.isRequired,
+        label: PropTypes.string.isRequired
+    }).isRequired,
+    'font-size3-max': PropTypes.shape({
+        value: PropTypes.string.isRequired,
+        type: PropTypes.string.isRequired,
+        group: PropTypes.string.isRequired,
+        label: PropTypes.string.isRequired
+    }).isRequired,
+    'font-size4-min': PropTypes.shape({
+        value: PropTypes.string.isRequired,
+        type: PropTypes.string.isRequired,
+        group: PropTypes.string.isRequired,
+        label: PropTypes.string.isRequired
+    }).isRequired,
+    'font-size4-max': PropTypes.shape({
+        value: PropTypes.string.isRequired,
+        type: PropTypes.string.isRequired,
+        group: PropTypes.string.isRequired,
+        label: PropTypes.string.isRequired
+    }).isRequired,
+    'font-size5-min': PropTypes.shape({
+        value: PropTypes.string.isRequired,
+        type: PropTypes.string.isRequired,
+        group: PropTypes.string.isRequired,
+        label: PropTypes.string.isRequired
+    }).isRequired,
+    'font-size5-max': PropTypes.shape({
+        value: PropTypes.string.isRequired,
+        type: PropTypes.string.isRequired,
+        group: PropTypes.string.isRequired,
+        label: PropTypes.string.isRequired
+    }).isRequired,
+    'font-size6-min': PropTypes.shape({
+        value: PropTypes.string.isRequired,
+        type: PropTypes.string.isRequired,
+        group: PropTypes.string.isRequired,
+        label: PropTypes.string.isRequired
+    }).isRequired,
+    'font-size6-max': PropTypes.shape({
+        value: PropTypes.string.isRequired,
+        type: PropTypes.string.isRequired,
+        group: PropTypes.string.isRequired,
+        label: PropTypes.string.isRequired
+    }).isRequired,
+    'font-min-screen': PropTypes.shape({
+        value: PropTypes.string.isRequired,
+        type: PropTypes.string.isRequired,
+        group: PropTypes.string.isRequired,
+        label: PropTypes.string.isRequired
+    }).isRequired,
+    'font-max-screen': PropTypes.shape({
+        value: PropTypes.string.isRequired,
+        type: PropTypes.string.isRequired,
+        group: PropTypes.string.isRequired,
+        label: PropTypes.string.isRequired
+    }).isRequired,
+};
 const SiteConfigPropTypes = {
     siteInfo: PropTypes.shape(SiteInfoPropTypes).isRequired,
     routes: PropTypes.arrayOf(PropTypes.shape(RoutePropTypes).isRequired).isRequired,
+    visualdesign: PropTypes.shape(VisualDesignPropTypes),
 };
 const ConfigBuilderPropTypes = {
     initialConfig: PropTypes.shape(SiteConfigPropTypes),
     onSave: PropTypes.func,
 };
-export function ConfigBuilder({ initialConfig, onSave }) {
-    const [config, setConfig] = useState(initialConfig || {
-        siteInfo: {
-            name: '',
-            author: '',
-            description: '',
-            url: '',
-            email: '',
-            favicon: '/favicon.ico',
-            favicon_sizes: '64x64 32x32 24x24 16x16',
-            favicon_type: 'image/x-icon',
-            theme_color: '#ffffff',
-            background_color: '#ffffff',
-            default_locale: 'en',
-            display: 'standalone',
-            address: {
-                streetAddress: '',
-                addressLocality: '',
-                addressRegion: '',
-                postalCode: '',
-                addressCountry: ''
-            }
-        },
-        routes: []
+export function ConfigBuilder(props) {
+    const { initialConfig, onSave } = props;
+    const defaultConfig = {
+        siteInfo: defaultConfigData.siteInfo,
+        routes: [], // Start with empty routes, the JSON structure is different
+        visualdesign: defaultConfigData.visualdesign
+    };
+    const [config, setConfig] = useState({
+        ...defaultConfig,
+        ...initialConfig,
+        siteInfo: { ...defaultConfig.siteInfo, ...initialConfig?.siteInfo },
+        routes: initialConfig?.routes || [],
+        visualdesign: { ...defaultConfig.visualdesign, ...initialConfig?.visualdesign }
     });
     const [socialLinks, setSocialLinks] = useState(initialConfig?.siteInfo?.sameAs || ['']);
     const [isFormValid, setIsFormValid] = useState(false);
@@ -114,9 +242,10 @@ export function ConfigBuilder({ initialConfig, onSave }) {
     };
     useEffect(() => {
         if (initialConfig) {
-            setConfig(prev => ({
+            setConfig((prev) => ({
                 siteInfo: { ...prev.siteInfo, ...initialConfig.siteInfo },
-                routes: initialConfig.routes || []
+                routes: initialConfig.routes || [],
+                visualdesign: initialConfig.visualdesign || prev.visualdesign || {}
             }));
             setSocialLinks(initialConfig.siteInfo?.sameAs || ['']);
         }
@@ -130,7 +259,7 @@ export function ConfigBuilder({ initialConfig, onSave }) {
                 value: config.siteInfo[field.props.name] || '',
                 defaultValue: config.siteInfo[field.props.name] || field.props.defaultValue || '',
                 onChange: (value) => {
-                    setConfig(prev => ({
+                    setConfig((prev) => ({
                         ...prev,
                         siteInfo: {
                             ...prev.siteInfo,
@@ -141,6 +270,26 @@ export function ConfigBuilder({ initialConfig, onSave }) {
             }
         }))
     };
+    // Visual Design form data
+    const visualFormData = {
+        fields: (visualDesignForm.fields || []).map((field) => ({
+            ...field,
+            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: (value) => {
+                    setConfig((prev) => ({
+                        ...prev,
+                        visualdesign: {
+                            ...(prev.visualdesign || {}),
+                            [field.props.name]: { value }
+                        }
+                    }));
+                }
+            }
+        }))
+    };
     const handleFormSubmit = (event) => {
         event.preventDefault();
         const formData = new FormData(event.target);
@@ -214,8 +363,18 @@ export function ConfigBuilder({ initialConfig, onSave }) {
                     {
                         id: 'routes',
                         label: 'Routes',
-                        content: (_jsxs("div", { className: "routes-section", children: [_jsx("div", { className: "routes-list", children: config.routes.map((route, index) => (_jsxs("div", { className: "route-item", children: [_jsx("input", { type: "text", placeholder: "Path", value: route.path, onChange: (e) => updateRoute(index, 'path', e.target.value) }), _jsx("input", { type: "text", placeholder: "Component", value: route.component, onChange: (e) => updateRoute(index, 'component', e.target.value) }), _jsx("input", { type: "text", placeholder: "Title", value: route.title || '', onChange: (e) => updateRoute(index, 'title', e.target.value) }), _jsx("input", { type: "text", placeholder: "Description", value: route.description || '', onChange: (e) => updateRoute(index, 'description', e.target.value) }), _jsx("button", { onClick: () => removeRoute(index), children: "Remove" })] }, index))) }), _jsx("button", { onClick: addRoute, children: "Add Route" })] }))
+                        content: (_jsxs("div", { className: "routes-section", children: [_jsxs("div", { className: "routes-list", children: [_jsxs("div", { className: "route-headers", children: [_jsx("span", { children: "Path" }), _jsx("span", { children: "Component" }), _jsx("span", { children: "Title" }), _jsx("span", { children: "Description" }), _jsx("span", { children: "Actions" })] }), config.routes.map((route, index) => (_jsxs("div", { className: "route-item", children: [_jsx("input", { type: "text", placeholder: "Path", value: route.path, onChange: (e) => updateRoute(index, 'path', e.target.value) }), _jsx("input", { type: "text", placeholder: "Component", value: route.component, onChange: (e) => updateRoute(index, 'component', e.target.value) }), _jsx("input", { type: "text", placeholder: "Title", value: route.title || '', onChange: (e) => updateRoute(index, 'title', e.target.value) }), _jsx("input", { type: "text", placeholder: "Description", value: route.description || '', onChange: (e) => updateRoute(index, 'description', e.target.value) }), _jsx("button", { onClick: () => removeRoute(index), children: "Remove" })] }, index)))] }), _jsx("button", { onClick: addRoute, children: "Add Route" })] }))
+                    },
+                    {
+                        id: 'visualdesign',
+                        label: 'Visual Design',
+                        content: (_jsx("div", { className: "visual-design-section", children: _jsx(FormEngine, { formData: visualFormData, name: "visualdesign", id: "visualdesign" }) }))
+                    }
+                ], orientation: "top" }), _jsx("button", { onClick: handleSave, disabled: !isFormValid, className: isFormValid ? 'save-button-valid' : 'save-button-invalid', children: "Save Config" }), !isFormValid && (_jsx("div", { className: "validation-message", children: "Please fill in all required fields (marked with *) before saving." })), _jsx(Accordion, { items: [
+                    {
+                        title: 'Configuration Preview',
+                        content: _jsx("pre", { children: JSON.stringify(config, null, 2) })
                     }
-                ], orientation: "top" }), _jsx("button", { onClick: handleSave, disabled: !isFormValid, className: isFormValid ? 'save-button-valid' : 'save-button-invalid', children: "Save Config" }), !isFormValid && (_jsx("div", { className: "validation-message", children: "Please fill in all required fields (marked with *) before saving." })), _jsx("pre", { children: JSON.stringify(config, null, 2) })] }));
+                ] })] }));
 }
 ConfigBuilder.propTypes = ConfigBuilderPropTypes;

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

@@ -0,0 +1,99 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { generateGoogleFontsUrl } from './google-fonts';
+import { ALL_WEBSAFE_FONTS } from './fonts';
+export function VisualDesignStyles({ visualdesign }) {
+    const tokens = visualdesign || {};
+    const resolveValue = (v) => (v && typeof v === 'object' && 'value' in v) ? v.value : v;
+    // Check if Google Fonts are being used
+    const hasGoogleFonts = () => {
+        for (const [key, val] of Object.entries(tokens)) {
+            const value = resolveValue(val);
+            if ((key === 'header-font' || key === 'body-font') && typeof value === 'string') {
+                // Check if the font stack contains non-web-safe fonts
+                const fonts = value.split(',').map((f) => f.trim().replace(/["']/g, ''));
+                for (const font of fonts) {
+                    if (!ALL_WEBSAFE_FONTS.some(f => f.value === font)) {
+                        return true;
+                    }
+                }
+            }
+        }
+        return false;
+    };
+    const varLines = [];
+    // Always include base font sizing first (from pixelated.visualdesign.scss)
+    varLines.push('--font-size1-min: 2.00rem;', '--font-size1-max: 3.00rem;', '--font-size2-min: 1.35rem;', '--font-size2-max: 1.75rem;', '--font-size3-min: 1.17rem;', '--font-size3-max: 1.35rem;', '--font-size4-min: 1.00rem;', '--font-size4-max: 1.25rem;', '--font-size5-min: 0.83rem;', '--font-size5-max: 1.00rem;', '--font-size6-min: 0.67rem;', '--font-size6-max: 0.85rem;', '--font-min-screen: 375px;', '--font-max-screen: 1440px;');
+    for (const [key, val] of Object.entries(tokens)) {
+        const value = resolveValue(val);
+        if (value === undefined || value === null)
+            continue;
+        // Handle font family construction from 3-field structure (legacy)
+        if (key.endsWith('-primary')) {
+            const baseKey = key.replace('-primary', '');
+            const primary = value;
+            const fallback = resolveValue(tokens[`${baseKey}-fallback`]);
+            const generic = resolveValue(tokens[`${baseKey}-generic`]);
+            // Build font stack: "Primary Font", Fallback, generic
+            const fontStack = [primary, fallback, generic].filter(Boolean).map(f => `"${f}"`).join(', ');
+            varLines.push(`--${baseKey}-family: ${fontStack};`);
+        }
+        else if (key === 'header-font' || key === 'body-font') {
+            // Handle compound font values (new format)
+            varLines.push(`--${key}: ${value};`);
+        }
+        else if (!key.endsWith('-fallback') && !key.endsWith('-generic')) {
+            // Skip fallback and generic fields as they're handled above
+            varLines.push(`--${key}: ${value};`);
+        }
+    }
+    const fontLines = [];
+    // Generate clamp calculations for font sizes
+    for (let i = 1; i <= 6; i++) {
+        varLines.push(`--font-size${i}: clamp(var(--font-size${i}-min), calc(var(--font-size${i}-min) + ((var(--font-size${i}-max) - var(--font-size${i}-min)) * ((100vw - var(--font-min-screen)) / (var(--font-max-screen) - var(--font-min-screen))))), var(--font-size${i}-max));`);
+    }
+    // Generate h1-h6 font-size rules
+    for (let i = 1; i <= 6; i++) {
+        fontLines.push(`h${i} { font-size: var(--font-size${i}); }`);
+    }
+    const css = [
+        ':root {',
+        ...varLines.map(l => `  ${l}`),
+        '}',
+        '',
+        '/* Base visual design styles */',
+        'body {',
+        '  background-color: var(--bg-color) !important;',
+        '  color: var(--text-color);',
+        '  font-family: var(--body-font);',
+        '}',
+        'h1, h2, h3, h4, h5, h6 {',
+        '  line-height: 1.1;',
+        '  font-family: var(--header-font);',
+        '}',
+        'html { font-size: 1.0rem; /* 16px; */ }',
+        '',
+        ...fontLines
+    ].join('\n');
+    const googleFontsUsed = hasGoogleFonts();
+    return (_jsxs(_Fragment, { children: [googleFontsUsed && (_jsxs(_Fragment, { children: [_jsx("link", { rel: "preconnect", href: "https://fonts.googleapis.com" }), _jsx("link", { rel: "preconnect", href: "https://fonts.gstatic.com", crossOrigin: "anonymous" })] })), _jsx("style", { dangerouslySetInnerHTML: { __html: css } })] }));
+}
+/**
+ * Component to handle Google Fonts imports - should be used in the document head
+ */
+export function GoogleFontsImports({ visualdesign }) {
+    const tokens = visualdesign || {};
+    const fonts = [];
+    // Extract Google font names from the new 3-field font structure
+    for (const [key, val] of Object.entries(tokens)) {
+        if (key.endsWith('-primary') && typeof val === 'string' && val.trim()) {
+            // Only include fonts that are not web-safe (web-safe fonts don't need Google Fonts import)
+            if (!ALL_WEBSAFE_FONTS.some(f => f.value === val.trim())) {
+                fonts.push(val.trim());
+            }
+        }
+    }
+    const googleFontsUrl = generateGoogleFontsUrl(fonts);
+    if (!googleFontsUrl)
+        return null;
+    return (_jsxs(_Fragment, { children: [_jsx("link", { rel: "preconnect", href: "https://fonts.googleapis.com" }), _jsx("link", { rel: "preconnect", href: "https://fonts.gstatic.com", crossOrigin: "anonymous" }), _jsx("link", { href: googleFontsUrl, rel: "stylesheet" })] }));
+}

package/dist/components/sitebuilder/config/FontSelector.css

@@ -0,0 +1,82 @@
+.font-selector-container {
+  margin-bottom: 1rem;
+}
+
+.font-selector-label {
+  display: block;
+  margin-bottom: 0.5rem;
+  font-weight: 500;
+}
+
+.font-selector-required {
+  color: #e53e3e;
+  margin-left: 0.25rem;
+}
+
+.font-selector-tooltip {
+  margin-left: 0.5rem;
+  cursor: help;
+  opacity: 0.7;
+}
+
+.font-selector-input-container {
+  position: relative;
+}
+
+.font-selector-input {
+  width: 100%;
+  padding: 0.5rem;
+  border: 1px solid #d1d5db;
+  border-radius: 0.375rem;
+  font-size: 0.875rem;
+}
+
+.font-selector-input:focus {
+  outline: none;
+  border-color: #3b82f6;
+  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
+}
+
+.font-selector-dropdown {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  right: 0;
+  background: white;
+  border: 1px solid #d1d5db;
+  border-radius: 0.375rem;
+  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+  max-height: 200px;
+  overflow-y: auto;
+  z-index: 1000;
+}
+
+.font-selector-option {
+  padding: 0.5rem;
+  cursor: pointer;
+  border-bottom: 1px solid #f3f4f6;
+}
+
+.font-selector-option:hover {
+  background-color: #f9fafb;
+}
+
+.font-selector-option:last-child {
+  border-bottom: none;
+}
+
+.font-selector-loading {
+  padding: 0.5rem;
+  color: #6b7280;
+  font-style: italic;
+}
+
+.font-selector-font-name {
+  font-weight: 500;
+}
+
+.font-selector-font-category {
+  color: #6b7280;
+  font-size: 0.875rem;
+  margin-left: 0.5rem;
+}

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

@@ -0,0 +1,86 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect, useMemo } from 'react';
+import PropTypes from 'prop-types';
+import { getFontOptions } from './google-fonts';
+import { WEB_SAFE_FONTS, GENERIC_FAMILIES } from './fonts';
+import './FontSelector.css';
+export function FontSelector({ id, name, label, fontType, required = false, placeholder, value = '', onChange }) {
+    const [inputValue, setInputValue] = useState(value);
+    const [googleFonts, setGoogleFonts] = useState([]);
+    const [isLoading, setIsLoading] = useState(false);
+    const [showDropdown, setShowDropdown] = useState(false);
+    // Load Google Fonts for autocomplete
+    useEffect(() => {
+        if (fontType === 'google') {
+            setIsLoading(true);
+            getFontOptions().then(options => {
+                setGoogleFonts(options);
+                setIsLoading(false);
+            }).catch(() => {
+                setIsLoading(false);
+            });
+        }
+    }, [fontType]);
+    // Get options based on font type
+    const options = useMemo(() => {
+        switch (fontType) {
+            case 'google':
+                return googleFonts;
+            case 'websafe':
+                return WEB_SAFE_FONTS;
+            case 'generic':
+                return GENERIC_FAMILIES;
+            default:
+                return [];
+        }
+    }, [fontType, googleFonts]);
+    // Filter options based on input
+    const filteredOptions = useMemo(() => {
+        if (!inputValue)
+            return options.slice(0, 10); // Show first 10 when no input
+        return options.filter(option => option.label.toLowerCase().includes(inputValue.toLowerCase()) ||
+            option.value.toLowerCase().includes(inputValue.toLowerCase())).slice(0, 10); // Limit to 10 results
+    }, [options, inputValue]);
+    const handleInputChange = (e) => {
+        const newValue = e.target.value;
+        setInputValue(newValue);
+        setShowDropdown(true);
+        onChange?.(newValue);
+    };
+    const handleOptionSelect = (option) => {
+        setInputValue(option.value);
+        setShowDropdown(false);
+        onChange?.(option.value);
+    };
+    const handleFocus = () => {
+        setShowDropdown(true);
+    };
+    const handleBlur = () => {
+        // Delay hiding dropdown to allow clicks on options
+        setTimeout(() => setShowDropdown(false), 200);
+    };
+    // Generate tooltip with Google Fonts link for Google fonts
+    const getTooltip = () => {
+        if (fontType === 'google' && inputValue) {
+            const fontName = inputValue.replace(/\s+/g, '+');
+            return `👁️ [Preview ${inputValue} on Google Fonts](https://fonts.google.com/specimen/${fontName})`;
+        }
+        return null;
+    };
+    return (_jsxs("div", { className: "font-selector-container", children: [_jsxs("label", { htmlFor: id, className: "font-selector-label", children: [label, required && _jsx("span", { className: "font-selector-required", children: "*" }), getTooltip() && (_jsx("span", { className: "font-selector-tooltip", title: getTooltip().replace(/\[([^\]]+)\]\([^)]+\)/, '$1'), children: "\uD83D\uDC41\uFE0F" }))] }), _jsxs("div", { className: "font-selector-input-container", children: [_jsx("input", { type: "text", id: id, name: name, value: inputValue, onChange: handleInputChange, onFocus: handleFocus, onBlur: handleBlur, placeholder: placeholder, required: required, autoComplete: "off", className: "font-selector-input" }), showDropdown && filteredOptions.length > 0 && (_jsx("div", { className: "font-selector-dropdown", children: isLoading ? (_jsx("div", { className: "font-selector-loading", children: "Loading fonts..." })) : (filteredOptions.map((option) => (_jsxs("div", { className: "font-selector-option", onClick: () => handleOptionSelect(option), onKeyDown: (e) => {
+                                if (e.key === 'Enter' || e.key === ' ') {
+                                    e.preventDefault();
+                                    handleOptionSelect(option);
+                                }
+                            }, tabIndex: 0, role: "option", "aria-selected": inputValue === option.value, children: [_jsx("span", { className: "font-selector-font-name", children: option.label }), option.category && (_jsxs("span", { className: "font-selector-font-category", children: ["(", option.category, ")"] }))] }, option.value)))) }))] })] }));
+}
+FontSelector.propTypes = {
+    id: PropTypes.string.isRequired,
+    name: PropTypes.string.isRequired,
+    label: PropTypes.string.isRequired,
+    fontType: PropTypes.oneOf(['google', 'websafe', 'generic']).isRequired,
+    required: PropTypes.bool,
+    placeholder: PropTypes.string,
+    value: PropTypes.string,
+    onChange: PropTypes.func,
+};

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

@@ -0,0 +1,51 @@
+// Web-safe fonts available on most operating systems
+export const WEB_SAFE_FONTS = [
+    { value: 'Arial', label: 'Arial' },
+    { value: 'Bookman', label: 'Bookman' },
+    { value: 'Comic Sans MS', label: 'Comic Sans MS' },
+    { value: 'Courier', label: 'Courier' },
+    { value: 'Courier New', label: 'Courier New' },
+    { value: 'Garamond', label: 'Garamond' },
+    { value: 'Geneva', label: 'Geneva' },
+    { value: 'Georgia', label: 'Georgia' },
+    { value: 'Helvetica', label: 'Helvetica' },
+    { value: 'Helvetica Neue', label: 'Helvetica Neue' },
+    { value: 'Impact', label: 'Impact' },
+    { value: 'Lucida Console', label: 'Lucida Console' },
+    { value: 'Monaco', label: 'Monaco' },
+    { value: 'Palatino', label: 'Palatino' },
+    { value: 'Roboto', label: 'Roboto' },
+    { value: 'Segoe UI', label: 'Segoe UI' },
+    { value: 'System', label: 'System' },
+    { value: 'Apple System', label: 'Apple System' },
+    { value: 'BlinkMacSystemFont', label: 'BlinkMacSystemFont' },
+    { value: 'Tahoma', label: 'Tahoma' },
+    { value: 'Times', label: 'Times' },
+    { value: 'Times New Roman', label: 'Times New Roman' },
+    { value: 'Trebuchet MS', label: 'Trebuchet MS' },
+    { value: 'Verdana', label: 'Verdana' },
+    { value: 'New York', label: 'New York' },
+    { value: 'Oxygen', label: 'Oxygen' },
+    { value: 'Ubuntu', label: 'Ubuntu' },
+    { value: 'Cantarell', label: 'Cantarell' },
+    { value: 'Fira Sans', label: 'Fira Sans' },
+    { value: 'Droid Sans', label: 'Droid Sans' },
+];
+// Generic font families that work across all systems
+export const GENERIC_FAMILIES = [
+    { value: 'cursive', label: 'cursive' },
+    { value: 'fantasy', label: 'fantasy' },
+    { value: 'monospace', label: 'monospace' },
+    { value: 'sans-serif', label: 'sans-serif' },
+    { value: 'serif', label: 'serif' },
+    { value: 'system-ui', label: 'system-ui' },
+    { value: 'ui-monospace', label: 'ui-monospace' },
+    { value: 'ui-rounded', label: 'ui-rounded' },
+    { value: 'ui-sans-serif', label: 'ui-sans-serif' },
+    { value: 'ui-serif', label: 'ui-serif' },
+];
+// Combined list of all web-safe fonts and generic families
+export const ALL_WEBSAFE_FONTS = [
+    ...WEB_SAFE_FONTS,
+    ...GENERIC_FAMILIES
+];