@pixelated-tech/components 3.4.3 → 3.5.0

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"
+      }
+    }
+  ]
+}

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

@@ -8,7 +8,8 @@
         "name": "name",
         "label": "Site Name",
         "required": true,
-        "placeholder": "Enter site name"
+        "placeholder": "Enter site name",
+        "size": "40"
       }
     },
     {
@@ -19,7 +20,8 @@
         "name": "author",
         "label": "Author",
         "required": true,
-        "placeholder": "Enter author name"
+        "placeholder": "Enter author name",
+        "size": "40"
       }
     },
     {
@@ -41,7 +43,8 @@
         "name": "url",
         "label": "Site URL",
         "required": true,
-        "placeholder": "https://example.com"
+        "placeholder": "https://example.com",
+        "size": "40"
       }
     },
     {
@@ -52,7 +55,8 @@
         "name": "email",
         "label": "Email",
         "required": true,
-        "placeholder": "contact@example.com"
+        "placeholder": "contact@example.com",
+        "size": "40"
       }
     },
     {
@@ -63,7 +67,8 @@
         "name": "favicon",
         "label": "Favicon",
         "required": true,
-        "placeholder": "/favicon.ico"
+        "placeholder": "/favicon.ico",
+        "size": "40"
       }
     },
     {
@@ -74,7 +79,8 @@
         "name": "favicon_sizes",
         "label": "Favicon Sizes",
         "required": true,
-        "placeholder": "64x64 32x32 24x24 16x16"
+        "placeholder": "64x64 32x32 24x24 16x16",
+        "size": "40"
       }
     },
     {
@@ -85,7 +91,8 @@
         "name": "favicon_type",
         "label": "Favicon Type",
         "required": true,
-        "placeholder": "image/x-icon"
+        "placeholder": "image/x-icon",
+        "size": "40"
       }
     },
     {
@@ -118,7 +125,8 @@
         "name": "default_locale",
         "label": "Default Locale",
         "required": true,
-        "placeholder": "en"
+        "placeholder": "en",
+        "size": "40"
       }
     },
     {
@@ -143,7 +151,8 @@
         "id": "image",
         "name": "image",
         "label": "Site Image",
-        "placeholder": "/images/site-image.jpg"
+        "placeholder": "/images/site-image.jpg",
+        "size": "40"
       }
     },
     {
@@ -153,7 +162,8 @@
         "id": "image_height",
         "name": "image_height",
         "label": "Image Height",
-        "placeholder": "512"
+        "placeholder": "512",
+        "size": "40"
       }
     },
     {
@@ -163,7 +173,8 @@
         "id": "image_width",
         "name": "image_width",
         "label": "Image Width",
-        "placeholder": "512"
+        "placeholder": "512",
+        "size": "40"
       }
     },
     {
@@ -173,7 +184,8 @@
         "id": "telephone",
         "name": "telephone",
         "label": "Telephone",
-        "placeholder": "+1-555-123-4567"
+        "placeholder": "+1-555-123-4567",
+        "size": "40"
       }
     },
     {
@@ -183,7 +195,8 @@
         "id": "priceRange",
         "name": "priceRange",
         "label": "Price Range",
-        "placeholder": "$$"
+        "placeholder": "$$",
+        "size": "40"
       }
     },
     {
@@ -193,7 +206,8 @@
         "id": "keywords",
         "name": "keywords",
         "label": "Keywords",
-        "placeholder": "web development, design, services"
+        "placeholder": "web development, design, services",
+        "size": "40"
       }
     }
   ]

package/dist/components/sitebuilder/config/visualdesignform.json

@@ -8,7 +8,7 @@
 				"name": "primary-color",
 				"label": "Primary color",
 				"required": true,
-				"placeholder": "#369"
+				"placeholder": "#336699"
 			}
 		},
 		{
@@ -19,7 +19,7 @@
 				"name": "secondary-color",
 				"label": "Secondary color",
 				"required": true,
-				"placeholder": "#BCD"
+				"placeholder": "#BBCCDD"
 			}
 		},
 		{
@@ -30,7 +30,7 @@
 				"name": "accent1-color",
 				"label": "Accent color 1",
 				"required": true,
-				"placeholder": "#CCC"
+				"placeholder": "#CCCCCC"
 			}
 		},
 		{
@@ -41,7 +41,7 @@
 				"name": "accent2-color",
 				"label": "Accent color 2",
 				"required": true,
-				"placeholder": "#EEE"
+				"placeholder": "#EEEEEE"
 			}
 		},
 		{

package/dist/components/sitebuilder/form/formbuilder.js

@@ -8,6 +8,7 @@ import { FormEngine } from './formengine';
 /* =====  FORM BUILDER =====
 Display all the components for a Form Builder -
 Element Buttons, Element Details, and the Form */
+FormBuilder.propTypes = {};
 export function FormBuilder() {
     const [formData, setFormData] = useState({ fields: [] });
     const [fieldFormData, setFieldFormData] = useState({ fields: [] });

package/dist/components/sitebuilder/form/formcomponents.js

@@ -53,7 +53,7 @@ const useFormComponent = (props) => {
         const customOnChange = props.onChange || (props.parent && props.parent.onChange);
         if (customOnChange) {
             try {
-                customOnChange(value);
+                customOnChange(event);
             }
             catch {
                 // swallow handler errors to avoid breaking validation flow
@@ -293,7 +293,6 @@ FormRadioOption.propTypes = {
 function FormRadioOption(props) {
     const inputProps = setupInputProps(props);
     const isChecked = props.parent.checked === props.value;
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
     const handleChange = (e) => {
         if (props.parent.onChange) {
             props.parent.onChange(props.value);
@@ -374,7 +373,7 @@ export function FormDataList(props) {
     return (_jsx("datalist", { id: props.id, children: options }));
 }
 FormFieldset.propTypes = {};
-export function FormFieldset() {
+export function FormFieldset(props) {
     return (_jsx(_Fragment, {}));
 }
 // Re-export FontSelector for use in forms

package/dist/components/sitebuilder/form/formengine.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
 import PropTypes from 'prop-types';
@@ -14,14 +15,17 @@ FormEngine.propTypes = {
     onSubmitHandler: PropTypes.func,
     formData: PropTypes.object.isRequired
 };
+export function FormEngine(props) {
+    return (_jsx(FormValidationProvider, { children: _jsx(FormEngineInner, { ...props }) }));
+}
 function FormEngineInner(props) {
     const { validateAllFields } = useFormValidation();
     function generateFormProps(props) {
         // GENERATE PROPS TO RENDER THE FORM CONTAINER, INTERNAL FUNCTION
         if (debug)
             console.log("Generating Form Props");
-        const formProps = JSON.parse(JSON.stringify(props));
-        ['formData', 'onSubmitHandler'].forEach(e => delete formProps[e]);
+        // Create a clean copy without non-serializable properties
+        const { formData, onSubmitHandler, ...formProps } = props;
         return formProps;
     }
     generateNewFields.propTypes = {
@@ -77,6 +81,3 @@ function FormEngineInner(props) {
     }
     return (_jsx("form", { ...generateFormProps(props), onSubmit: (event) => { handleSubmit(event); }, suppressHydrationWarning: true, children: generateNewFields(props) }));
 }
-export function FormEngine(props) {
-    return (_jsx(FormValidationProvider, { children: _jsx(FormEngineInner, { ...props }) }));
-}