@pixelated-tech/components 3.2.14 → 3.3.1

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

@@ -0,0 +1,380 @@
+"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,
+    author: PropTypes.string.isRequired,
+    description: PropTypes.string.isRequired,
+    url: PropTypes.string.isRequired,
+    email: PropTypes.string.isRequired,
+    favicon: PropTypes.string.isRequired,
+    favicon_sizes: PropTypes.string.isRequired,
+    favicon_type: PropTypes.string.isRequired,
+    theme_color: PropTypes.string.isRequired,
+    background_color: PropTypes.string.isRequired,
+    default_locale: PropTypes.string.isRequired,
+    display: PropTypes.string.isRequired,
+    image: PropTypes.string,
+    image_height: PropTypes.string,
+    image_width: PropTypes.string,
+    telephone: PropTypes.string,
+    address: PropTypes.shape({
+        streetAddress: PropTypes.string.isRequired,
+        addressLocality: PropTypes.string.isRequired,
+        addressRegion: PropTypes.string.isRequired,
+        postalCode: PropTypes.string.isRequired,
+        addressCountry: PropTypes.string.isRequired,
+    }),
+    priceRange: PropTypes.string,
+    sameAs: PropTypes.arrayOf(PropTypes.string.isRequired),
+    keywords: PropTypes.string,
+};
+const RoutePropTypes = {
+    path: PropTypes.string.isRequired,
+    component: PropTypes.string.isRequired,
+    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(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);
+    // Validate form whenever config changes
+    useEffect(() => {
+        const siteInfo = config.siteInfo || {};
+        const isValid = (siteInfo.name || '').trim() !== '' &&
+            (siteInfo.author || '').trim() !== '' &&
+            (siteInfo.description || '').trim() !== '' &&
+            (siteInfo.url || '').trim() !== '' &&
+            (siteInfo.email || '').trim() !== '' &&
+            // Basic email validation
+            /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(siteInfo.email || '');
+        setIsFormValid(isValid);
+    }, [config]);
+    const handleFileUpload = (event) => {
+        const file = event.target.files?.[0];
+        if (!file)
+            return;
+        const reader = new FileReader();
+        reader.onload = (e) => {
+            try {
+                const jsonContent = e.target?.result;
+                const parsedConfig = JSON.parse(jsonContent);
+                // Validate the structure
+                if (parsedConfig.siteInfo && parsedConfig.routes) {
+                    setConfig(parsedConfig);
+                    setSocialLinks(parsedConfig.siteInfo.sameAs || ['']);
+                }
+                else {
+                    alert('Invalid configuration file. Expected siteInfo and routes properties.');
+                }
+            }
+            catch {
+                alert('Error parsing JSON file. Please ensure it contains valid JSON.');
+            }
+        };
+        reader.readAsText(file);
+        // Reset the input
+        event.target.value = '';
+    };
+    useEffect(() => {
+        if (initialConfig) {
+            setConfig((prev) => ({
+                siteInfo: { ...prev.siteInfo, ...initialConfig.siteInfo },
+                routes: initialConfig.routes || [],
+                visualdesign: initialConfig.visualdesign || prev.visualdesign || {}
+            }));
+            setSocialLinks(initialConfig.siteInfo?.sameAs || ['']);
+        }
+    }, [initialConfig]);
+    // Prepare form data for FormEngine with current values
+    const formData = {
+        fields: siteInfoForm.fields.map(field => ({
+            ...field,
+            props: {
+                ...field.props,
+                value: config.siteInfo[field.props.name] || '',
+                defaultValue: config.siteInfo[field.props.name] || field.props.defaultValue || '',
+                onChange: (value) => {
+                    setConfig((prev) => ({
+                        ...prev,
+                        siteInfo: {
+                            ...prev.siteInfo,
+                            [field.props.name]: value
+                        }
+                    }));
+                }
+            }
+        }))
+    };
+    // 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);
+        const siteInfoData = {};
+        // Extract form data
+        for (const [key, value] of formData.entries()) {
+            siteInfoData[key] = value;
+        }
+        // Update config with form data
+        setConfig(prev => ({
+            ...prev,
+            siteInfo: {
+                ...prev.siteInfo,
+                ...siteInfoData,
+                sameAs: socialLinks.filter(link => link.trim() !== '')
+            }
+        }));
+    };
+    const updateAddress = (field, value) => {
+        setConfig(prev => ({
+            ...prev,
+            siteInfo: {
+                ...prev.siteInfo,
+                address: {
+                    ...(prev.siteInfo.address || {}),
+                    [field]: value
+                }
+            }
+        }));
+    };
+    const addSocialLink = () => {
+        setSocialLinks(prev => [...prev, '']);
+    };
+    const updateSocialLink = (index, value) => {
+        setSocialLinks(prev => prev.map((link, i) => i === index ? value : link));
+    };
+    const removeSocialLink = (index) => {
+        setSocialLinks(prev => prev.filter((_, i) => i !== index));
+    };
+    const addRoute = () => {
+        setConfig(prev => ({
+            ...prev,
+            routes: [...prev.routes, { path: '', component: '', title: '', description: '' }]
+        }));
+    };
+    const updateRoute = (index, field, value) => {
+        setConfig(prev => ({
+            ...prev,
+            routes: prev.routes.map((route, i) => i === index ? { ...route, [field]: value } : route)
+        }));
+    };
+    const removeRoute = (index) => {
+        setConfig(prev => ({
+            ...prev,
+            routes: prev.routes.filter((_, i) => i !== index)
+        }));
+    };
+    const handleSave = () => {
+        if (!isFormValid) {
+            alert('Please fill in all required fields correctly before saving.');
+            return;
+        }
+        onSave?.(config);
+    };
+    return (_jsxs("div", { className: "config-builder", children: [_jsx("h2", { children: "Config Builder" }), _jsxs("div", { className: "file-upload-section", children: [_jsx("label", { htmlFor: "config-file-upload", className: "file-upload-label", children: "Load Configuration File:" }), _jsx("input", { id: "config-file-upload", type: "file", accept: ".json", onChange: handleFileUpload, className: "file-upload-input" })] }), _jsx(Tab, { tabs: [
+                    {
+                        id: 'siteinfo',
+                        label: 'Site Info',
+                        content: (_jsxs("div", { className: "site-info-section", children: [_jsx(FormEngine, { formData: formData, onSubmitHandler: handleFormSubmit, name: "siteinfo", id: "siteinfo" }), _jsxs("div", { className: "address-section", children: [_jsx("h4", { children: "Address" }), _jsxs("div", { className: "field-group", children: [_jsx("label", { htmlFor: "street-address", children: "Street Address" }), _jsx("input", { id: "street-address", type: "text", placeholder: "Street Address", value: config.siteInfo.address?.streetAddress || '', onChange: (e) => updateAddress('streetAddress', e.target.value) })] }), _jsxs("div", { className: "field-group", children: [_jsx("label", { htmlFor: "city", children: "City" }), _jsx("input", { id: "city", type: "text", placeholder: "City", value: config.siteInfo.address?.addressLocality || '', onChange: (e) => updateAddress('addressLocality', e.target.value) })] }), _jsxs("div", { className: "field-group", children: [_jsx("label", { htmlFor: "state-region", children: "State/Region" }), _jsx("input", { id: "state-region", type: "text", placeholder: "State/Region", value: config.siteInfo.address?.addressRegion || '', onChange: (e) => updateAddress('addressRegion', e.target.value) })] }), _jsxs("div", { className: "field-group", children: [_jsx("label", { htmlFor: "postal-code", children: "Postal Code" }), _jsx("input", { id: "postal-code", type: "text", placeholder: "Postal Code", value: config.siteInfo.address?.postalCode || '', onChange: (e) => updateAddress('postalCode', e.target.value) })] }), _jsxs("div", { className: "field-group", children: [_jsx("label", { htmlFor: "country", children: "Country" }), _jsx("input", { id: "country", type: "text", placeholder: "Country", value: config.siteInfo.address?.addressCountry || '', onChange: (e) => updateAddress('addressCountry', e.target.value) })] })] }), _jsxs("div", { className: "social-links-section", children: [_jsx("h4", { children: "Social Links" }), socialLinks.map((link, index) => (_jsxs("div", { className: "field-group social-link-item", children: [_jsx("input", { type: "url", placeholder: "https://social-link.com", value: link, onChange: (e) => updateSocialLink(index, e.target.value) }), _jsx("button", { type: "button", onClick: () => removeSocialLink(index), children: "Remove" })] }, index))), _jsx("button", { type: "button", onClick: addSocialLink, children: "Add Social Link" })] })] }))
+                    },
+                    {
+                        id: 'routes',
+                        label: 'Routes',
+                        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) })
+                    }
+                ] })] }));
+}
+ConfigBuilder.propTypes = ConfigBuilderPropTypes;

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

@@ -0,0 +1,82 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { generateGoogleFontsUrl } from './google-fonts';
+export function VisualDesignStyles({ visualdesign }) {
+    const tokens = visualdesign || {};
+    const resolveValue = (v) => (v && typeof v === 'object' && 'value' in v) ? v.value : v;
+    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');
+    return _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)
+            const webSafeFonts = ['Arial', 'Helvetica', 'Times New Roman', 'Times', 'Courier New', 'Courier', 'Georgia', 'Palatino', 'Garamond', 'Bookman', 'Comic Sans MS', 'Trebuchet MS', 'Arial Black', 'Impact', 'Lucida Sans Unicode', 'Lucida Grande', 'MS Sans Serif', 'MS Serif', 'New York', 'System', 'Apple System', 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue'];
+            if (!webSafeFonts.includes(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,115 @@
+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 './FontSelector.css';
+const WEBSafe_FONTS = [
+    { value: 'Arial', label: 'Arial' },
+    { value: 'Bookman', label: 'Bookman' },
+    { value: 'Comic Sans MS', label: 'Comic Sans MS' },
+    { value: 'Courier New', label: 'Courier New' },
+    { value: 'Garamond', label: 'Garamond' },
+    { value: 'Geneva', label: 'Geneva' },
+    { value: 'Georgia', label: 'Georgia' },
+    { value: 'Helvetica', label: 'Helvetica' },
+    { value: 'Impact', label: 'Impact' },
+    { value: 'Lucida Console', label: 'Lucida Console' },
+    { value: 'Monaco', label: 'Monaco' },
+    { value: 'Palatino', label: 'Palatino' },
+    { value: 'Tahoma', label: 'Tahoma' },
+    { value: 'Times New Roman', label: 'Times New Roman' },
+    { value: 'Trebuchet MS', label: 'Trebuchet MS' },
+    { value: 'Verdana', label: 'Verdana' },
+];
+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' },
+];
+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 WEBSafe_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,
+};