@pixelated-tech/components 3.4.3 → 3.5.1

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

@@ -162,8 +162,6 @@
 }
 
 .route-item {
-  display: grid;
-  grid-template-columns: 2fr 2fr 2fr 2fr auto;
   gap: 10px;
   align-items: center;
   padding: 10px;
@@ -172,11 +170,18 @@
   margin-bottom: 10px;
 }
 
-.route-item input {
+.route-item input,
+.route-item select,
+.route-item textarea {
   padding: 6px 8px;
   border: 1px solid #ddd;
   border-radius: 3px;
-  font-size: 14px;
+  font-size: var(--font-size5);
+}
+
+.route-item label {
+  font-size: var(--font-size5);
+  font-weight: bold;
 }
 
 .route-item button {
@@ -274,4 +279,188 @@
   font-size: 14px;
   margin-top: 8px;
   font-weight: 500;
-}
+}
+/* AI Recommendations Modal */
+.ai-recommendations-modal {
+  max-width: 600px;
+}
+
+.ai-recommendations-modal h3 {
+  margin-top: 0;
+  color: #333;
+}
+
+.ai-loading {
+  text-align: center;
+  padding: 20px;
+}
+
+.loading-spinner {
+  border: 4px solid #f3f3f3;
+  border-top: 4px solid #007acc;
+  border-radius: 50%;
+  width: 30px;
+  height: 30px;
+  animation: spin 1s linear infinite;
+  margin: 10px auto;
+}
+
+@keyframes spin {
+  0% { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}
+
+.ai-error {
+  color: #dc3545;
+  padding: 10px;
+  background-color: #f8d7da;
+  border-radius: 4px;
+  margin: 10px 0;
+}
+
+.ai-recommendations {
+  margin: 20px 0;
+}
+
+.recommendation-item {
+  margin-bottom: 20px;
+  padding: 15px;
+  background-color: #f8f9fa;
+  border-radius: 6px;
+  border-left: 4px solid #007acc;
+}
+
+.recommendation-item label {
+  display: block;
+  font-weight: bold;
+  margin-bottom: 8px;
+  cursor: pointer;
+}
+
+.recommendation-item input[type="checkbox"] {
+  margin-right: 8px;
+  accent-color: #007acc;
+}
+
+.recommendation-item label {
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  padding: 5px;
+  border-radius: 4px;
+  transition: background-color 0.2s;
+}
+
+.recommendation-item label:hover {
+  background-color: #f0f8ff;
+}
+
+.recommendation-content {
+  margin-left: 20px;
+}
+
+.current-value {
+  color: #666;
+  font-size: 0.9em;
+  margin-bottom: 5px;
+}
+
+.suggested-value {
+  color: #007acc;
+  font-weight: 500;
+  line-height: 1.4;
+}
+
+.modal-actions {
+  display: flex;
+  gap: 10px;
+  justify-content: flex-end;
+  margin-top: 20px;
+  padding-top: 15px;
+  border-top: 1px solid #dee2e6;
+}
+
+.modal-actions button {
+  padding: 8px 16px;
+  border: 1px solid #dee2e6;
+  border-radius: 4px;
+  background-color: #fff;
+  cursor: pointer;
+  font-size: 14px;
+}
+
+.modal-actions button:hover {
+  background-color: #f8f9fa;
+}
+
+.accept-button {
+  background-color: #28a745 !important;
+  color: white !important;
+  border-color: #28a745 !important;
+}
+
+.accept-button:hover {
+  background-color: #218838 !important;
+}
+
+.accept-button:disabled {
+  background-color: #6c757d !important;
+  border-color: #6c757d !important;
+  cursor: not-allowed;
+  color: white !important;
+}
+
+/* Route management buttons */
+.route-buttons {
+  display: flex;
+  gap: 8px;
+  margin-top: 10px;
+}
+
+.route-button {
+  min-height: 32px;
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 6px 12px;
+  border: 1px solid #ced4da;
+  border-radius: 4px;
+  background-color: #fff;
+  color: #495057;
+  font-size: 14px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.route-button:hover {
+  background-color: #f8f9fa;
+  border-color: #adb5bd;
+}
+
+.route-button.ai-recommend {
+  background-color: #4285f4;
+  color: #fff;
+  border-color: #4285f4;
+}
+
+.route-button.ai-recommend:hover {
+  background-color: #3367d6;
+  border-color: #3367d6;
+}
+
+.route-button.remove {
+  background-color: #dc3545;
+  color: #fff;
+  border-color: #dc3545;
+}
+
+.route-button.remove:hover {
+  background-color: #c82333;
+  border-color: #c82333;
+}
+
+.ai-icon {
+  font-size: 14px;
+  font-weight: bold;
+  color: #fff;
+}

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

@@ -2,18 +2,25 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
+import { Modal } from '../../general/modal';
 import { Tab } from '../../general/tab';
 import { Accordion } from '../../general/accordion';
+import { createGeminiApiService } from '../../utilities/gemini-api.client';
 import { FormEngine } from '../form/formengine';
+import { FormValidationProvider } from '../form/formvalidator';
+import * as FC from '../form/formcomponents';
 import siteInfoForm from './siteinfo-form.json';
 import visualDesignForm from './visualdesignform.json';
+import routesForm from './routes-form.json';
 import defaultConfigData from '../../../data/routes.json';
 import './ConfigBuilder.css';
 const RoutePropTypes = {
+    name: PropTypes.string,
     path: PropTypes.string.isRequired,
-    component: PropTypes.string.isRequired,
     title: PropTypes.string,
     description: PropTypes.string,
+    keywords: PropTypes.arrayOf(PropTypes.string),
+    hidden: PropTypes.bool,
 };
 const SiteInfoPropTypes = {
     name: PropTypes.string.isRequired,
@@ -78,7 +85,7 @@ const SiteConfigPropTypes = {
     routes: PropTypes.arrayOf(PropTypes.shape(RoutePropTypes).isRequired).isRequired,
     visualdesign: PropTypes.shape(VisualDesignPropTypes).isRequired,
 };
-const ConfigBuilderPropTypes = {
+ConfigBuilder.propTypes = {
     initialConfig: PropTypes.shape(SiteConfigPropTypes),
     onSave: PropTypes.func,
 };
@@ -98,18 +105,38 @@ export function ConfigBuilder(props) {
     });
     const [socialLinks, setSocialLinks] = useState(initialConfig?.siteInfo?.sameAs || ['']);
     const [isFormValid, setIsFormValid] = useState(false);
+    // AI Recommendations state
+    const [aiModalOpen, setAiModalOpen] = useState(false);
+    const [currentRouteIndex, setCurrentRouteIndex] = useState(null);
+    const [aiRecommendations, setAiRecommendations] = useState(null);
+    const [aiLoading, setAiLoading] = useState(false);
+    const [acceptTitle, setAcceptTitle] = useState(false);
+    const [acceptKeywords, setAcceptKeywords] = useState(false);
+    const [acceptDescription, setAcceptDescription] = 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() !== '' &&
+        const isValid = String(siteInfo.name || '').trim() !== '' &&
+            String(siteInfo.author || '').trim() !== '' &&
+            String(siteInfo.description || '').trim() !== '' &&
+            String(siteInfo.url || '').trim() !== '' &&
+            String(siteInfo.email || '').trim() !== '' &&
             // Basic email validation
             /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(siteInfo.email || '');
         setIsFormValid(isValid);
     }, [config]);
+    // Handle AI modal visibility - now handled by Modal component isOpen prop
+    // useEffect(() => {
+    // 	console.log('AI modal effect running, aiModalOpen:', aiModalOpen);
+    // 	if (aiModalOpen) {
+    // 		const modal = document.getElementById('myModalai-recommendations');
+    // 		console.log('Modal element found:', modal);
+    // 		if (modal) {
+    // 			modal.style.display = 'block';
+    // 			console.log('Set modal display to block');
+    // 		}
+    // 	}
+    // }, [aiModalOpen]);
     const handleFileUpload = (event) => {
         const file = event.target.files?.[0];
         if (!file)
@@ -121,7 +148,19 @@ export function ConfigBuilder(props) {
                 const parsedConfig = JSON.parse(jsonContent);
                 // Validate the structure
                 if (parsedConfig.siteInfo && parsedConfig.routes) {
-                    setConfig(parsedConfig);
+                    // Ensure keywords are arrays for all routes
+                    const normalizedRoutes = parsedConfig.routes.map((route) => ({
+                        ...route,
+                        keywords: Array.isArray(route.keywords)
+                            ? route.keywords
+                            : (typeof route.keywords === 'string'
+                                ? route.keywords.split(',').map((k) => k.trim()).filter((k) => k.length > 0)
+                                : [])
+                    }));
+                    setConfig({
+                        ...parsedConfig,
+                        routes: normalizedRoutes
+                    });
                     setSocialLinks(parsedConfig.siteInfo.sameAs || ['']);
                 }
                 else {
@@ -138,9 +177,18 @@ export function ConfigBuilder(props) {
     };
     useEffect(() => {
         if (initialConfig) {
+            // Ensure keywords are arrays for all routes
+            const normalizedRoutes = (initialConfig.routes || []).map((route) => ({
+                ...route,
+                keywords: Array.isArray(route.keywords)
+                    ? route.keywords
+                    : (typeof route.keywords === 'string'
+                        ? route.keywords.split(',').map((k) => k.trim()).filter((k) => k.length > 0)
+                        : [])
+            }));
             setConfig((prev) => ({
                 siteInfo: { ...prev.siteInfo, ...initialConfig.siteInfo },
-                routes: initialConfig.routes || [],
+                routes: normalizedRoutes,
                 visualdesign: initialConfig.visualdesign || prev.visualdesign || {}
             }));
             setSocialLinks(initialConfig.siteInfo?.sameAs || ['']);
@@ -155,11 +203,18 @@ export function ConfigBuilder(props) {
                 value: config.siteInfo[field.props.name] || '',
                 defaultValue: config.siteInfo[field.props.name] || field.props.defaultValue || '',
                 onChange: (value) => {
+                    // Handle both direct values and event objects
+                    let actualValue = value;
+                    if (value && typeof value === 'object' && value.target) {
+                        // It's an event object, extract the value
+                        const target = value.target;
+                        actualValue = target.type === 'checkbox' ? (target.checked ? target.value : '') : target.value;
+                    }
                     setConfig((prev) => ({
                         ...prev,
                         siteInfo: {
                             ...prev.siteInfo,
-                            [field.props.name]: value
+                            [field.props.name]: actualValue
                         }
                     }));
                 }
@@ -174,7 +229,8 @@ 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: (value) => {
+                onChange: (event) => {
+                    const value = event.target.value;
                     setConfig((prev) => ({
                         ...prev,
                         visualdesign: {
@@ -228,13 +284,18 @@ export function ConfigBuilder(props) {
     const addRoute = () => {
         setConfig(prev => ({
             ...prev,
-            routes: [...prev.routes, { path: '', component: '', title: '', description: '' }]
+            routes: [...prev.routes, { name: '', path: '', title: '', description: '', keywords: [], hidden: false }]
         }));
     };
     const updateRoute = (index, field, value) => {
+        // Special handling for keywords field - convert comma-separated string to array
+        let processedValue = value;
+        if (field === 'keywords' && typeof value === 'string') {
+            processedValue = value.split(',').map((k) => k.trim()).filter((k) => k.length > 0);
+        }
         setConfig(prev => ({
             ...prev,
-            routes: prev.routes.map((route, i) => i === index ? { ...route, [field]: value } : route)
+            routes: prev.routes.map((route, i) => i === index ? { ...route, [field]: processedValue } : route)
         }));
     };
     const removeRoute = (index) => {
@@ -250,6 +311,60 @@ export function ConfigBuilder(props) {
         }
         onSave?.(config);
     };
+    const handleAiRecommendations = async (routeIndex) => {
+        console.log('handleAiRecommendations called with routeIndex:', routeIndex);
+        setCurrentRouteIndex(routeIndex);
+        setAiLoading(true);
+        setAiModalOpen(true);
+        setAcceptTitle(false);
+        setAcceptKeywords(false);
+        setAcceptDescription(false);
+        try {
+            const geminiService = createGeminiApiService('dummy-key'); // API key handled server-side
+            const route = config.routes[routeIndex];
+            const result = await geminiService.generateRouteRecommendations({
+                route,
+                siteInfo: config.siteInfo,
+                baseUrl: config.siteInfo.url
+            });
+            if (result.success && result.data) {
+                setAiRecommendations(result.data);
+            }
+            else {
+                setAiRecommendations({ error: result.error || 'Failed to generate recommendations' });
+            }
+        }
+        catch (error) {
+            console.error('AI recommendation error:', error);
+            setAiRecommendations({ error: 'Failed to generate AI recommendations' });
+        }
+        finally {
+            setAiLoading(false);
+        }
+    };
+    const handleAcceptAiRecommendations = () => {
+        if (currentRouteIndex === null || !aiRecommendations)
+            return;
+        const updates = {};
+        if (acceptTitle && aiRecommendations.title) {
+            updates.title = aiRecommendations.title;
+        }
+        if (acceptKeywords && aiRecommendations.keywords) {
+            updates.keywords = aiRecommendations.keywords;
+        }
+        if (acceptDescription && aiRecommendations.description) {
+            updates.description = aiRecommendations.description;
+        }
+        if (Object.keys(updates).length > 0) {
+            setConfig(prev => ({
+                ...prev,
+                routes: prev.routes.map((route, i) => i === currentRouteIndex ? { ...route, ...updates } : route)
+            }));
+        }
+        setAiModalOpen(false);
+        setAiRecommendations(null);
+        setCurrentRouteIndex(null);
+    };
     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',
@@ -259,7 +374,41 @@ export function ConfigBuilder(props) {
                     {
                         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" })] }))
+                        content: (_jsx(FormValidationProvider, { children: _jsxs("div", { className: "routes-section", children: [_jsx("div", { className: "routes-list", children: config.routes.map((route, index) => (_jsxs("div", { className: "route-item", children: [routesForm.fields.map((field) => {
+                                                    const Component = FC[field.component];
+                                                    if (!Component)
+                                                        return null;
+                                                    let fieldValue = route[field.props.name];
+                                                    if (field.props.name === 'keywords' && Array.isArray(fieldValue)) {
+                                                        fieldValue = fieldValue.join(', ');
+                                                    }
+                                                    const fieldProps = {
+                                                        ...field.props,
+                                                        id: `${field.props.id}-${index}`,
+                                                        ...(field.component === 'FormTextarea'
+                                                            ? { defaultValue: fieldValue || '' }
+                                                            : field.props.type === 'checkbox'
+                                                                ? { checked: fieldValue || false }
+                                                                : { value: fieldValue || '' }),
+                                                        onChange: (e) => {
+                                                            let value;
+                                                            if (field.props.type === 'checkbox') {
+                                                                value = e.target.checked;
+                                                            }
+                                                            else if (field.props.name === 'keywords') {
+                                                                value = e.target.value.split(',').map((s) => s.trim()).filter((s) => s);
+                                                            }
+                                                            else {
+                                                                value = e.target.value;
+                                                            }
+                                                            updateRoute(index, field.props.name, value);
+                                                        }
+                                                    };
+                                                    return _jsx(Component, { ...fieldProps }, fieldProps.id);
+                                                }), _jsxs("div", { className: "route-buttons", children: [_jsxs("button", { onClick: () => {
+                                                                console.log('AI Recommend button clicked for route:', index);
+                                                                handleAiRecommendations(index);
+                                                            }, className: "route-button ai-recommend", children: [_jsx("span", { className: "ai-icon", children: "\u2728" }), " Recommend"] }), _jsx("button", { onClick: () => removeRoute(index), className: "route-button remove", children: "Remove" })] })] }, index))) }), _jsx("button", { onClick: addRoute, children: "Add Route" })] }) }))
                     },
                     {
                         id: 'visualdesign',
@@ -269,8 +418,25 @@ export function ConfigBuilder(props) {
                 ], 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) })
+                        content: _jsx("pre", { children: (() => {
+                                try {
+                                    return JSON.stringify(config, null, 2);
+                                }
+                                catch (e) {
+                                    // Simple fallback that doesn't try to analyze the object deeply
+                                    const errorMessage = e instanceof Error ? e.message : String(e);
+                                    return `Configuration contains non-serializable data (functions, circular references, or DOM elements).\n\nError: ${errorMessage}\n\nTo debug, check the config object in browser dev tools for functions or complex objects.`;
+                                }
+                            })() })
                     }
-                ] })] }));
+                ] }), _jsx(Modal, { modalID: "ai-recommendations", isOpen: aiModalOpen, handleCloseEvent: () => setAiModalOpen(false), modalContent: _jsxs("div", { className: "ai-recommendations-modal", children: [_jsx("h3", { children: "AI SEO Recommendations" }), currentRouteIndex !== null && (_jsxs("p", { children: [_jsx("strong", { children: "Route:" }), " ", config.routes[currentRouteIndex].name || config.routes[currentRouteIndex].path] })), aiLoading ? (_jsxs("div", { className: "ai-loading", children: [_jsx("p", { children: "Generating AI recommendations..." }), _jsx("div", { className: "loading-spinner" })] })) : aiRecommendations?.error ? (_jsx("div", { className: "ai-error", children: _jsxs("p", { children: ["Error: ", aiRecommendations.error] }) })) : aiRecommendations ? (_jsxs("div", { className: "ai-recommendations", children: [_jsxs("div", { className: "recommendation-item", children: [_jsxs("label", { children: [_jsx("input", { type: "checkbox", checked: acceptTitle, onChange: (e) => setAcceptTitle(e.target.checked) }), _jsx("strong", { children: "Title:" })] }), _jsxs("div", { className: "recommendation-content", children: [_jsx("div", { className: "current-value", children: _jsxs("small", { children: ["Current: ", config.routes[currentRouteIndex]?.title || 'None'] }) }), _jsx("div", { className: "suggested-value", children: aiRecommendations.title })] })] }), _jsxs("div", { className: "recommendation-item", children: [_jsxs("label", { children: [_jsx("input", { type: "checkbox", checked: acceptKeywords, onChange: (e) => setAcceptKeywords(e.target.checked) }), _jsx("strong", { children: "Keywords:" })] }), _jsxs("div", { className: "recommendation-content", children: [_jsx("div", { className: "current-value", children: _jsxs("small", { children: ["Current: ", (() => {
+                                                                const keywords = config.routes[currentRouteIndex]?.keywords;
+                                                                if (Array.isArray(keywords)) {
+                                                                    return keywords.join(', ') || 'None';
+                                                                }
+                                                                else if (typeof keywords === 'string') {
+                                                                    return keywords || 'None';
+                                                                }
+                                                                return 'None';
+                                                            })()] }) }), _jsx("div", { className: "suggested-value", children: aiRecommendations.keywords?.join(', ') })] })] }), _jsxs("div", { className: "recommendation-item", children: [_jsxs("label", { children: [_jsx("input", { type: "checkbox", checked: acceptDescription, onChange: (e) => setAcceptDescription(e.target.checked) }), _jsx("strong", { children: "Description:" })] }), _jsxs("div", { className: "recommendation-content", children: [_jsx("div", { className: "current-value", children: _jsxs("small", { children: ["Current: ", config.routes[currentRouteIndex]?.description || 'None'] }) }), _jsx("div", { className: "suggested-value", children: aiRecommendations.description })] })] })] })) : null, _jsxs("div", { className: "modal-actions", children: [_jsx("button", { onClick: () => setAiModalOpen(false), children: "Cancel" }), _jsx("button", { onClick: handleAcceptAiRecommendations, disabled: !acceptTitle && !acceptKeywords && !acceptDescription, className: "accept-button", children: "Accept Selected" })] })] }) })] }));
 }
-ConfigBuilder.propTypes = ConfigBuilderPropTypes;

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

@@ -4,7 +4,18 @@ 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 }) {
+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,
+};
+export function FontSelector(props) {
+    const { id, name, label, fontType, required = false, placeholder, value = '', onChange } = props;
     const [inputValue, setInputValue] = useState(value);
     const [googleFonts, setGoogleFonts] = useState([]);
     const [isLoading, setIsLoading] = useState(false);
@@ -67,7 +78,7 @@ export function FontSelector({ id, name, label, fontType, required = false, plac
         }
         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) => {
+    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 ?? undefined, required: required ?? false, 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);

package/dist/components/sitebuilder/config/routes-form.json

@@ -0,0 +1,67 @@
+{
+  "fields": [
+    {
+      "component": "FormInput",
+      "props": {
+        "type": "text",
+        "id": "name",
+        "name": "name",
+        "label": "Route Name",
+        "required": true,
+        "placeholder": "e.g., Home Page",
+        "size": "40"
+      }
+    },
+    {
+      "component": "FormInput",
+      "props": {
+        "type": "text",
+        "id": "path",
+        "name": "path",
+        "label": "Path",
+        "required": true,
+        "placeholder": "e.g., /",
+        "size": "40"
+      }
+    },
+    {
+      "component": "FormInput",
+      "props": {
+        "type": "text",
+        "id": "title",
+        "name": "title",
+        "label": "Title",
+        "placeholder": "Page title for SEO",
+        "size": "40"
+      }
+    },
+    {
+      "component": "FormTextarea",
+      "props": {
+        "id": "description",
+        "name": "description",
+        "label": "Description",
+        "placeholder": "Meta description for SEO"
+      }
+    },
+    {
+      "component": "FormTextarea",
+      "props": {
+        "id": "keywords",
+        "name": "keywords",
+        "label": "Keywords",
+        "placeholder": "Comma-separated keywords for SEO",
+        "cols": "40"
+      }
+    },
+    {
+      "component": "FormInput",
+      "props": {
+        "type": "checkbox",
+        "id": "hidden",
+        "name": "hidden",
+        "label": "Hidden Route"
+      }
+    }
+  ]
+}