@pixelated-tech/components 3.3.0 → 3.3.2

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

@@ -0,0 +1,112 @@
+/**
+ * Google Fonts Integration
+ * Fetches and caches Google Fonts data for use in visual design forms
+ */
+// Cache for Google Fonts data
+let fontsCache = null;
+let cacheTimestamp = 0;
+const CACHE_DURATION = 24 * 60 * 60 * 1000; // 24 hours
+// Fallback Google fonts for when API is unavailable (sorted alphabetically)
+const FALLBACK_GOOGLE_FONTS = [
+    { family: 'Cairo', category: 'sans-serif', variants: [], subsets: [], version: '', lastModified: '', kind: '', menu: '', files: {} },
+    { family: 'Crimson Text', category: 'serif', variants: [], subsets: [], version: '', lastModified: '', kind: '', menu: '', files: {} },
+    { family: 'Fira Sans', category: 'sans-serif', variants: [], subsets: [], version: '', lastModified: '', kind: '', menu: '', files: {} },
+    { family: 'Inter', category: 'sans-serif', variants: [], subsets: [], version: '', lastModified: '', kind: '', menu: '', files: {} },
+    { family: 'Lato', category: 'sans-serif', variants: [], subsets: [], version: '', lastModified: '', kind: '', menu: '', files: {} },
+    { family: 'Libre Baskerville', category: 'serif', variants: [], subsets: [], version: '', lastModified: '', kind: '', menu: '', files: {} },
+    { family: 'Lora', category: 'serif', variants: [], subsets: [], version: '', lastModified: '', kind: '', menu: '', files: {} },
+    { family: 'Merriweather', category: 'serif', variants: [], subsets: [], version: '', lastModified: '', kind: '', menu: '', files: {} },
+    { family: 'Montserrat', category: 'sans-serif', variants: [], subsets: [], version: '', lastModified: '', kind: '', menu: '', files: {} },
+    { family: 'Nunito', category: 'sans-serif', variants: [], subsets: [], version: '', lastModified: '', kind: '', menu: '', files: {} },
+    { family: 'Open Sans', category: 'sans-serif', variants: [], subsets: [], version: '', lastModified: '', kind: '', menu: '', files: {} },
+    { family: 'Oswald', category: 'sans-serif', variants: [], subsets: [], version: '', lastModified: '', kind: '', menu: '', files: {} },
+    { family: 'Playfair Display', category: 'serif', variants: [], subsets: [], version: '', lastModified: '', kind: '', menu: '', files: {} },
+    { family: 'Poppins', category: 'sans-serif', variants: [], subsets: [], version: '', lastModified: '', kind: '', menu: '', files: {} },
+    { family: 'PT Sans', category: 'sans-serif', variants: [], subsets: [], version: '', lastModified: '', kind: '', menu: '', files: {} },
+    { family: 'Raleway', category: 'sans-serif', variants: [], subsets: [], version: '', lastModified: '', kind: '', menu: '', files: {} },
+    { family: 'Roboto', category: 'sans-serif', variants: [], subsets: [], version: '', lastModified: '', kind: '', menu: '', files: {} },
+    { family: 'Source Sans Pro', category: 'sans-serif', variants: [], subsets: [], version: '', lastModified: '', kind: '', menu: '', files: {} },
+    { family: 'Ubuntu', category: 'sans-serif', variants: [], subsets: [], version: '', lastModified: '', kind: '', menu: '', files: {} },
+    { family: 'Work Sans', category: 'sans-serif', variants: [], subsets: [], version: '', lastModified: '', kind: '', menu: '', files: {} },
+];
+/**
+ * Fetch Google Fonts list from API
+ * Note: Requires GOOGLE_FONTS_API_KEY environment variable
+ */
+export async function fetchGoogleFonts() {
+    // Check cache first
+    if (fontsCache && (Date.now() - cacheTimestamp) < CACHE_DURATION) {
+        return fontsCache;
+    }
+    const apiKey = process.env.GOOGLE_FONTS_API_KEY;
+    if (!apiKey) {
+        console.warn('GOOGLE_FONTS_API_KEY not set, returning empty fonts list');
+        return [];
+    }
+    try {
+        const response = await fetch(`https://www.googleapis.com/webfonts/v1/webfonts?key=${apiKey}&sort=popularity`);
+        if (!response.ok) {
+            throw new Error(`Google Fonts API error: ${response.status}`);
+        }
+        const data = await response.json();
+        // Cache the results
+        fontsCache = data.items;
+        cacheTimestamp = Date.now();
+        return data.items;
+    }
+    catch (error) {
+        console.error('Failed to fetch Google Fonts:', error);
+        return [];
+    }
+}
+/**
+ * Get font options for form dropdowns
+ */
+export async function getFontOptions() {
+    const fonts = await fetchGoogleFonts();
+    // If no fonts loaded from API, use fallback popular fonts
+    if (!fonts || fonts.length === 0) {
+        return FALLBACK_GOOGLE_FONTS
+            .sort((a, b) => a.family.localeCompare(b.family))
+            .map((font) => ({
+            value: font.family,
+            label: `${font.family} (${font.category})`,
+            category: font.category
+        }));
+    }
+    return fonts
+        .sort((a, b) => a.family.localeCompare(b.family))
+        .map((font) => ({
+        value: font.family,
+        label: `${font.family} (${font.category})`,
+        category: font.category
+    }));
+}
+/**
+ * Generate Google Fonts CSS import URL for given fonts
+ */
+export function generateGoogleFontsUrl(fonts) {
+    if (!fonts.length)
+        return '';
+    // Clean font names and create URL
+    const cleanFonts = fonts
+        .map(font => font.replace(/['"]/g, '').trim())
+        .filter(font => font.length > 0);
+    if (!cleanFonts.length)
+        return '';
+    const fontParam = cleanFonts
+        .map(font => font.replace(/\s+/g, '+'))
+        .join('|');
+    return `https://fonts.googleapis.com/css2?family=${fontParam}&display=swap`;
+}
+/**
+ * Generate HTML link tag for Google Fonts
+ */
+export function generateGoogleFontsLink(fonts) {
+    const url = generateGoogleFontsUrl(fonts);
+    if (!url)
+        return '';
+    return `<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="${url}" rel="stylesheet">`;
+}

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

@@ -1,3 +1,4 @@
+"use client";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useState } from 'react';
 import PropTypes from 'prop-types';

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

@@ -1,9 +1,12 @@
+'use client';
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useState } from "react";
 import PropTypes from "prop-types";
 import { validateField } from "./formvalidator";
 import { useFormValidation } from "./formvalidator";
 import * as FVF from "./formfieldvalidations";
+import { FontSelector } from "../config/FontSelector";
+import { CompoundFontSelector } from "../config/CompoundFontSelector";
 import "./form.css";
 /*
 InferProps to generate Types
@@ -288,9 +291,14 @@ FormRadioOption.propTypes = {
 };
 function FormRadioOption(props) {
     const inputProps = setupInputProps(props);
-    return (_jsxs("span", { className: props.parent.display == "vertical" ? "displayVertical" : "", children: [_jsx("input", { type: "radio", id: `${props.parent.name}-${props.value}`, name: props.parent.name, value: props.value, 
-                // defaultChecked={!!props.checked}
-                defaultChecked: props.checked, required: !!props.parent.required, ...inputProps }), _jsx("label", { htmlFor: `${props.parent.name}-${props.value}`, children: props.text })] }));
+    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);
+        }
+    };
+    return (_jsxs("span", { className: props.parent.display == "vertical" ? "displayVertical" : "", children: [_jsx("input", { type: "radio", id: `${props.parent.name}-${props.value}`, name: props.parent.name, value: props.value, checked: isChecked, onChange: handleChange, required: !!props.parent.required, ...inputProps }), _jsx("label", { htmlFor: `${props.parent.name}-${props.value}`, children: props.text })] }));
 }
 FormCheckbox.propTypes = {
     id: PropTypes.string.isRequired,
@@ -323,7 +331,21 @@ FormCheckboxOption.propTypes = {
 };
 function FormCheckboxOption(props) {
     const inputProps = setupInputProps(props);
-    return (_jsxs("span", { className: props.parent.display == "vertical" ? "displayVertical" : "", children: [_jsx("input", { type: "checkbox", id: props.parent.name + "_" + props.text, name: props.text, value: props.value, ...inputProps }), _jsx("label", { htmlFor: props.text, children: props.text })] }));
+    const isChecked = props.parent.checked ? props.parent.checked.includes(props.value) : false;
+    const handleChange = (e) => {
+        if (props.parent.onChange) {
+            const currentChecked = props.parent.checked || [];
+            let newChecked;
+            if (e.target.checked) {
+                newChecked = [...currentChecked, props.value];
+            }
+            else {
+                newChecked = currentChecked.filter((val) => val !== props.value);
+            }
+            props.parent.onChange(newChecked);
+        }
+    };
+    return (_jsxs("span", { className: props.parent.display == "vertical" ? "displayVertical" : "", children: [_jsx("input", { type: "checkbox", id: props.parent.name + "_" + props.text, name: props.text, value: props.value, checked: isChecked, onChange: handleChange, ...inputProps }), _jsx("label", { htmlFor: props.parent.name + "_" + props.text, children: props.text })] }));
 }
 FormButton.propTypes = {
     type: PropTypes.string,
@@ -354,3 +376,5 @@ FormFieldset.propTypes = {};
 export function FormFieldset() {
     return (_jsx(_Fragment, {}));
 }
+// Re-export FontSelector for use in forms
+export { FontSelector, CompoundFontSelector };

package/dist/components/structured/markdown.js

@@ -1,3 +1,4 @@
+'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
 import PropTypes from "prop-types";
 import { SmartImage } from "../cms/cloudinary.image";

package/dist/components/structured/recipe.js

@@ -1,3 +1,4 @@
+'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';

package/dist/components/structured/timeline.js

@@ -1,3 +1,4 @@
+'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import PropTypes from "prop-types";
 import { usePixelatedConfig } from '../config/config.client';

package/dist/css/pixelated.global.css

@@ -1,39 +1,4 @@
 
-/* ========================================
-========  DEFAULT COLOR STYLES   ==========
-======================================== */
-
-:root {
-  --primary-color: #369;
-  --secondary-color: #BCD;
-  --accent1-color: #CCC;
-  --accent2-color: #EEE;	
-  --bg-color: #fff;
-  --font-color: #000;
-}
-body{
-	background-color: var(--bg-color) !important;
-	color: var(--font-color);
-}
-
-
-/* ========================================
-========  DEFAULT FONT STYLES   ===========
-======================================== */
-
-:root {	
-	--header-font: "Montserrat", Verdana, sans-serif;
-	--body-font: "Roboto", Arial, sans-serif;
-}
-body { 
-	font-family: var(--body-font); 
-}
-h1, h2, h3, h4, h5, h6 {
-	line-height: 1.1;
-}
-html { font-size: 1.0rem; /* 16px; */ }
-
-
 /* ========================================
 ===========  DEFAULT STYLES   =============
 ======================================== */

package/dist/css/pixelated.grid.scss

@@ -1,4 +1,8 @@
 
+/* ========================================
+=============  GRID STYLES   ==============
+======================================== */
+
 @mixin rowBase {
     display: grid ;
     gap: 10px; /* Spacing between grid items */

package/dist/css/pixelated.visualdesign.scss

@@ -0,0 +1,88 @@
+/* ========================================
+========  DEFAULT COLOR STYLES   ==========
+======================================== */
+
+:root {
+  --primary-color: #369;
+  --secondary-color: #BCD;
+  --accent1-color: #CCC;
+  --accent2-color: #EEE;	
+  --bg-color: #fff;
+  --text-color: #000;
+}
+body{
+	background-color: var(--bg-color) !important;
+	color: var(--text-color);
+}
+
+/* ========================================
+======  DEFAULT FONT FACE STYLES   ========
+======================================== */
+
+:root {	
+	--header-font: "Montserrat", Verdana, sans-serif;
+	--body-font: "Roboto", Arial, sans-serif;
+}
+body { 
+	font-family: var(--body-font); 
+}
+h1, h2, h3, h4, h5, h6 {
+	line-height: 1.1;
+}
+html { font-size: 1.0rem; /* 16px; */ }
+
+/* ========================================
+=======  DEFAULT FONT SIZE STYLES   =======
+======================================== */
+
+/* 
+https://hanjing.medium.com/font-sizing-4259801c04c1
+https://www.learnui.design/blog/mobile-desktop-website-font-size-guidelines.html 
+https://www.smashingmagazine.com/2022/01/modern-fluid-typography-css-clamp/
+https://robertcelt95.medium.com/responsive-typography-that-actually-works-beyond-font-size-clamp-acf592b79774
+https://medium.com/better-web-type/the-state-of-fluid-web-typography-135cd26e0612
+*/
+
+/* --font-size1: font-size: 32px; 
+--font-size2: font-size: 24px; 
+--font-size3: font-size: 18.75px;
+--font-size4: font-size: 16px;
+--font-size5: font-size: 13.25px;
+--font-size6: font-size: 10.75px; */
+
+:root {
+  --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;
+}
+
+$minScreen: var(--font-min-screen);
+$maxScreen: var(--font-max-screen);
+:root { 
+	@for $i from 1 through 6 {
+		$min: var(--font-size#{$i}-min); 
+		$max: var(--font-size#{$i}-max); 
+		$preferred: calc(#{$min} + ((#{$max} - #{$min}) * ((100vw - #{$minScreen}) / #{($maxScreen - $minScreen)})));
+		--font-size#{$i}: clamp(#{$min}, #{$preferred}, #{$max});
+	}
+}
+@for $i from 1 through 6 {
+   	h#{$i} { font-size: var(--font-size#{$i}); }
+}

package/dist/data/routes.json

@@ -1,13 +1,21 @@
 {
     "siteInfo": {
         "name": "Pixelated Technologies",
+        "author": "Brian Whaley",
         "description": "Custom web development and digital design agency specializing in React, Next.js, and modern web technologies",
+        "keywords": "pixelated, web development, react, next.js, custom websites, digital design, small business",
         "url": "https://pixelated.tech",
         "email": "info@pixelated.tech",
+        "favicon": "/favicon.ico",
+        "favicon_sizes": "64x64 32x32 24x24 16x16",
+        "favicon_type": "image/x-icon",
+        "theme_color": "#369",
+        "background_color": "#ffffff",
+        "default_locale": "en",
+        "display": "standalone",
         "image": "/images/pix/pix-bg-512.gif",
         "image_height": "512",
         "image_width": "512",
-        "favicon": "/favicon.ico",
         "telephone": "+1-973-710-8008",
         "address": {
             "streetAddress": "10 Jade Circle",
@@ -21,8 +29,31 @@
             "https://www.linkedin.com/in/brianwhaley",
             "https://github.com/brianwhaley",
             "https://twitter.com/brianwhaley"
-        ],
-        "keywords": "pixelated, web development, react, next.js, custom websites, digital design, small business"
+        ]
+    },
+    "visualdesign": {
+        "primary-color": { "value": "#369", "type": "color", "group": "palette", "label": "Primary color" },
+        "secondary-color": { "value": "#BCD", "type": "color", "group": "palette", "label": "Secondary color" },
+        "accent1-color": { "value": "#CCC", "type": "color", "group": "palette", "label": "Accent color 1" },
+        "accent2-color": { "value": "#EEE", "type": "color", "group": "palette", "label": "Accent color 2" },
+        "bg-color": { "value": "#ffffff", "type": "color", "group": "palette", "label": "Background color" },
+        "text-color": { "value": "#000000", "type": "color", "group": "palette", "label": "Font color" },
+        "header-font": { "value": "\"Montserrat\", Verdana, sans-serif", "type": "font", "group": "typography", "label": "Header font" },
+        "body-font": { "value": "\"Roboto\", Arial, sans-serif", "type": "font", "group": "typography", "label": "Body font" },
+        "font-size1-min": { "value": "2.00rem", "type": "size", "group": "typography", "label": "Font size 1 min" },
+        "font-size1-max": { "value": "3.00rem", "type": "size", "group": "typography", "label": "Font size 1 max" },
+        "font-size2-min": { "value": "1.35rem", "type": "size", "group": "typography", "label": "Font size 2 min" },
+        "font-size2-max": { "value": "1.75rem", "type": "size", "group": "typography", "label": "Font size 2 max" },
+        "font-size3-min": { "value": "1.17rem", "type": "size", "group": "typography", "label": "Font size 3 min" },
+        "font-size3-max": { "value": "1.35rem", "type": "size", "group": "typography", "label": "Font size 3 max" },
+        "font-size4-min": { "value": "1.00rem", "type": "size", "group": "typography", "label": "Font size 4 min" },
+        "font-size4-max": { "value": "1.25rem", "type": "size", "group": "typography", "label": "Font size 4 max" },
+        "font-size5-min": { "value": "0.83rem", "type": "size", "group": "typography", "label": "Font size 5 min" },
+        "font-size5-max": { "value": "1.00rem", "type": "size", "group": "typography", "label": "Font size 5 max" },
+        "font-size6-min": { "value": "0.67rem", "type": "size", "group": "typography", "label": "Font size 6 min" },
+        "font-size6-max": { "value": "0.85rem", "type": "size", "group": "typography", "label": "Font size 6 max" },
+        "font-min-screen": { "value": "375px", "type": "size", "group": "typography", "label": "Font min screen" },
+        "font-max-screen": { "value": "1440px", "type": "size", "group": "typography", "label": "Font max screen" }
     },
     "routes": [
         {

package/dist/data/visualdesignform.json

@@ -0,0 +1,244 @@
+{
+    "fields": [
+        {
+            "component": "FormInput",
+            "props": {
+                "type": "color",
+                "id": "primary-color",
+                "name": "primary-color",
+                "label": "Primary color",
+                "required": true,
+                "placeholder": "#369"
+            }
+        },
+        {
+            "component": "FormInput",
+            "props": {
+                "type": "color",
+                "id": "secondary-color",
+                "name": "secondary-color",
+                "label": "Secondary color",
+                "required": true,
+                "placeholder": "#BCD"
+            }
+        },
+        {
+            "component": "FormInput",
+            "props": {
+                "type": "color",
+                "id": "accent1-color",
+                "name": "accent1-color",
+                "label": "Accent color 1",
+                "required": true,
+                "placeholder": "#CCC"
+            }
+        },
+        {
+            "component": "FormInput",
+            "props": {
+                "type": "color",
+                "id": "accent2-color",
+                "name": "accent2-color",
+                "label": "Accent color 2",
+                "required": true,
+                "placeholder": "#EEE"
+            }
+        },
+        {
+            "component": "FormInput",
+            "props": {
+                "type": "color",
+                "id": "bg-color",
+                "name": "bg-color",
+                "label": "Background color",
+                "required": true,
+                "placeholder": "#ffffff"
+            }
+        },
+        {
+            "component": "FormInput",
+            "props": {
+                "type": "color",
+                "id": "text-color",
+                "name": "text-color",
+                "label": "Font color",
+                "required": true,
+                "placeholder": "#000000"
+            }
+        },
+        {
+            "component": "CompoundFontSelector",
+            "props": {
+                "id": "header-font",
+                "name": "header-font",
+                "label": "Header Font Stack",
+                "required": true,
+                "value": "\"Montserrat\", Arial, sans-serif"
+            }
+        },
+        {
+            "component": "CompoundFontSelector",
+            "props": {
+                "id": "body-font",
+                "name": "body-font",
+                "label": "Body Font Stack",
+                "required": true,
+                "value": "\"Roboto\", Helvetica, sans-serif"
+            }
+        },
+        {
+            "component": "FormInput",
+            "props": {
+                "type": "text",
+                "id": "font-size1-min",
+                "name": "font-size1-min",
+                "label": "Font size 1 min",
+                "required": true,
+                "placeholder": "2.00rem"
+            }
+        },
+        {
+            "component": "FormInput",
+            "props": {
+                "type": "text",
+                "id": "font-size1-max",
+                "name": "font-size1-max",
+                "label": "Font size 1 max",
+                "required": true,
+                "placeholder": "3.00rem"
+            }
+        },
+        {
+            "component": "FormInput",
+            "props": {
+                "type": "text",
+                "id": "font-size2-min",
+                "name": "font-size2-min",
+                "label": "Font size 2 min",
+                "required": true,
+                "placeholder": "1.35rem"
+            }
+        },
+        {
+            "component": "FormInput",
+            "props": {
+                "type": "text",
+                "id": "font-size2-max",
+                "name": "font-size2-max",
+                "label": "Font size 2 max",
+                "required": true,
+                "placeholder": "1.75rem"
+            }
+        },
+        {
+            "component": "FormInput",
+            "props": {
+                "type": "text",
+                "id": "font-size3-min",
+                "name": "font-size3-min",
+                "label": "Font size 3 min",
+                "required": true,
+                "placeholder": "1.17rem"
+            }
+        },
+        {
+            "component": "FormInput",
+            "props": {
+                "type": "text",
+                "id": "font-size3-max",
+                "name": "font-size3-max",
+                "label": "Font size 3 max",
+                "required": true,
+                "placeholder": "1.35rem"
+            }
+        },
+        {
+            "component": "FormInput",
+            "props": {
+                "type": "text",
+                "id": "font-size4-min",
+                "name": "font-size4-min",
+                "label": "Font size 4 min",
+                "required": true,
+                "placeholder": "1.00rem"
+            }
+        },
+        {
+            "component": "FormInput",
+            "props": {
+                "type": "text",
+                "id": "font-size4-max",
+                "name": "font-size4-max",
+                "label": "Font size 4 max",
+                "required": true,
+                "placeholder": "1.25rem"
+            }
+        },
+        {
+            "component": "FormInput",
+            "props": {
+                "type": "text",
+                "id": "font-size5-min",
+                "name": "font-size5-min",
+                "label": "Font size 5 min",
+                "required": true,
+                "placeholder": "0.83rem"
+            }
+        },
+        {
+            "component": "FormInput",
+            "props": {
+                "type": "text",
+                "id": "font-size5-max",
+                "name": "font-size5-max",
+                "label": "Font size 5 max",
+                "required": true,
+                "placeholder": "1.00rem"
+            }
+        },
+        {
+            "component": "FormInput",
+            "props": {
+                "type": "text",
+                "id": "font-size6-min",
+                "name": "font-size6-min",
+                "label": "Font size 6 min",
+                "required": true,
+                "placeholder": "0.67rem"
+            }
+        },
+        {
+            "component": "FormInput",
+            "props": {
+                "type": "text",
+                "id": "font-size6-max",
+                "name": "font-size6-max",
+                "label": "Font size 6 max",
+                "required": true,
+                "placeholder": "0.85rem"
+            }
+        },
+        {
+            "component": "FormInput",
+            "props": {
+                "type": "text",
+                "id": "font-min-screen",
+                "name": "font-min-screen",
+                "label": "Font min screen",
+                "required": true,
+                "placeholder": "375px"
+            }
+        },
+        {
+            "component": "FormInput",
+            "props": {
+                "type": "text",
+                "id": "font-max-screen",
+                "name": "font-max-screen",
+                "label": "Font max screen",
+                "required": true,
+                "placeholder": "1440px"
+            }
+        }
+    ]
+}

package/dist/index.js

@@ -45,6 +45,11 @@ export * from './components/sitebuilder/page/components/PageBuilderUI';
 export * from './components/sitebuilder/page/components/PageEngine';
 export * from './components/sitebuilder/page/components/SaveLoadSection';
 export * from './components/sitebuilder/config/ConfigBuilder';
+export * from './components/sitebuilder/config/ConfigEngine';
+export * from './components/sitebuilder/config/FontSelector';
+export * from './components/sitebuilder/config/CompoundFontSelector';
+export * from './components/sitebuilder/config/fonts';
+export * from './components/sitebuilder/config/google-fonts';
 export * from './components/sitebuilder/form/formcomponents';
 export * from './components/sitebuilder/form/formtypes';
 export * from './components/sitebuilder/form/formutils';