@pixelated-tech/components 3.3.0 → 3.3.1

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,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,
+};