@pixelated-tech/components 3.3.0 → 3.3.1

package/README.COMPONENTS.md

@@ -2,13 +2,26 @@
 
 This guide provides detailed API documentation and usage examples for all Pixelated Components.
 
-## 📋 Table of Contents
+## � Reference Implementation
+
+For a complete working example of Pixelated Components in action, check out the [pixelated-admin](https://github.com/brianwhaley/pixelated-admin) project. This admin interface demonstrates real-world usage of all components with:
+
+- **Component Integration**: Live examples of component combinations
+- **Configuration Management**: Dynamic site configuration with ConfigBuilder
+- **Page Building**: Visual page construction workflows
+- **Authentication**: Secure admin access patterns
+- **Production Setup**: HTTPS, optimization, and deployment configurations
+
+## �📋 Table of Contents
 
 ### General Components
 - [Accordion](#accordion)
 - [Callout](#callout)
+- [CSS](#css)
 - [Loading](#loading)
+- [MicroInteractions](#microinteractions)
 - [Modal](#modal)
+- [Semantic](#semantic)
 - [SidePanel](#sidepanel)
 - [SmartImage](#smartimage)
 - [Tab](#tab)
@@ -312,6 +325,76 @@ import { SmartImage } from '@pixelated-tech/components';
 | `width` | `number` | - | Image width |
 | `height` | `number` | - | Image height |
 
+### CSS
+
+Utility functions for CSS optimization and loading.
+
+```tsx
+import { deferAllCSS, preloadAllCSS } from '@pixelated-tech/components';
+
+// Defer CSS loading for better performance
+deferAllCSS();
+
+// Preload all CSS files
+preloadAllCSS();
+```
+
+#### Functions
+- **`deferAllCSS()`**: Defers loading of all CSS stylesheets for improved page load performance
+- **`preloadAllCSS()`**: Preloads all CSS files with high priority
+
+### MicroInteractions
+
+Component for adding subtle CSS animations and interactions to page elements.
+
+```tsx
+import { MicroInteractions } from '@pixelated-tech/components';
+
+<MicroInteractions
+  buttonring={true}
+  cartpulse={true}
+  formglow={true}
+  imgscale={true}
+  scrollfadeElements=".fade-on-scroll"
+/>
+```
+
+#### Props
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `buttonring` | `boolean` | - | Add ring animation to buttons |
+| `cartpulse` | `boolean` | - | Pulse animation for cart elements |
+| `formglow` | `boolean` | - | Glow effect for form inputs |
+| `grayscalehover` | `boolean` | - | Grayscale to color transition on hover |
+| `imgscale` | `boolean` | - | Scale animation for images |
+| `imgtwist` | `boolean` | - | Twist animation for images |
+| `imghue` | `boolean` | - | Hue rotation for images |
+| `simplemenubutton` | `boolean` | - | Animation for simple menu buttons |
+| `scrollfadeElements` | `string` | - | CSS selector for elements to fade on scroll |
+
+### Semantic
+
+Semantic HTML layout components for structured content.
+
+```tsx
+import { PageSection, PageTitleHeader, GridContainer } from '@pixelated-tech/components';
+
+<PageSection layoutType="grid" autoFlow="row">
+  <PageTitleHeader title="Welcome" />
+  <GridContainer columns={3} gap="1rem">
+    <div>Content 1</div>
+    <div>Content 2</div>
+    <div>Content 3</div>
+  </GridContainer>
+</PageSection>
+```
+
+#### Components
+- **`PageSection`**: Semantic section with configurable layout
+- **`PageTitleHeader`**: H1 title with optional link
+- **`GridContainer`**: CSS Grid container with responsive columns
+- **`FlexContainer`**: Flexbox container with alignment options
+
 ---
 
 ## CMS Integration
@@ -1113,13 +1196,42 @@ interface SiteConfig {
     title?: string;
     description?: string;
   }>;
+  visualdesign?: {
+    'primary-color': string;
+    'secondary-color': string;
+    'accent1-color': string;
+    'accent2-color': string;
+    'bg-color': string;
+    'text-color': string;
+    'header-font-primary': string;
+    'header-font-fallback': string;
+    'header-font-generic': string;
+    'body-font-primary': string;
+    'body-font-fallback': string;
+    'body-font-generic': string;
+    'font-size1-min': string;
+    'font-size1-max': string;
+    'font-size2-min': string;
+    'font-size2-max': string;
+    'font-size3-min': string;
+    'font-size3-max': string;
+    'font-size4-min': string;
+    'font-size4-max': string;
+    'font-size5-min': string;
+    'font-size5-max': string;
+    'font-size6-min': string;
+    'font-size6-max': string;
+    'font-min-screen': string;
+    'font-max-screen': string;
+  };
 }
 ```
 
 #### Features
-- **Tabbed Interface**: Organized into "Site Info" and "Routes" tabs
+- **Tabbed Interface**: Organized into "Site Info", "Routes", and "Visual Design" tabs
 - **Comprehensive Site Info Management**: Edit all standard site metadata fields including PWA settings, contact info, and address
 - **Route Management**: Add, edit, and remove page routes with component mapping
+- **Visual Design Configuration**: Manage design tokens like colors, fonts, and spacing through a form-based interface
 - **Real-time Preview**: JSON preview of current configuration
 - **Save Functionality**: Callback-based configuration persistence with form validation enforcement
 - **Form Validation**: Required field validation for essential site information with visual feedback
@@ -1133,6 +1245,124 @@ The "Save Config" button enforces form validation before allowing configuration
 - **Save Prevention**: Save action is blocked until all required validations pass
 - **Real-time Validation**: Form validates as you type with immediate feedback
 
+#### Visual Design Tab
+
+The Visual Design tab provides a form-based interface for configuring visual design tokens. These tokens are stored in the `visualdesign` object of the site configuration and can be used to maintain consistent theming across your application.
+
+**Supported Design Tokens:**
+- **Colors**: Primary, secondary, accent, text, and background colors
+- **Typography**: Header and body fonts with primary Google Fonts, web-safe fallbacks, and generic family fallbacks
+- **Layout**: Border radius, box shadows, transition durations
+
+**Usage in Components:**
+```tsx
+// Access visual design tokens from config
+const config = useConfig();
+const primaryColor = config.visualdesign?.['primary-color'] || '#369';
+```
+
+### FontSelector
+
+Autocomplete input component for selecting fonts with support for Google Fonts, web-safe fonts, and generic font families.
+
+```tsx
+import { FontSelector } from '@pixelated-tech/components';
+
+<FontSelector
+  id="header-font-primary"
+  name="header-font-primary"
+  label="Header Font (Google Fonts)"
+  fontType="google"
+  value="Montserrat"
+  onChange={(font) => console.log('Selected font:', font)}
+/>
+```
+
+#### Props
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `id` | `string` | - | Unique identifier for the input |
+| `name` | `string` | - | Name attribute for form submission |
+| `label` | `string` | - | Display label for the input |
+| `fontType` | `'google' \| 'websafe' \| 'generic'` | - | Type of fonts to show in autocomplete |
+| `value` | `string` | `''` | Current selected font value |
+| `onChange` | `function` | - | Callback when font selection changes |
+| `required` | `boolean` | `false` | Whether the field is required |
+| `placeholder` | `string` | - | Placeholder text (auto-generated based on fontType) |
+
+#### Font Types
+
+- **`google`**: Shows Google Fonts with live preview links
+- **`websafe`**: Shows common web-safe fonts (Arial, Helvetica, etc.)
+- **`generic`**: Shows CSS generic font families (serif, sans-serif, etc.)
+
+#### Features
+
+- **Autocomplete**: Intelligent font suggestions as you type
+- **Google Fonts Integration**: Direct links to Google Fonts preview pages
+- **Web-safe Fallbacks**: Ensures font availability across devices
+- **Generic Families**: CSS generic font family support
+- **Accessibility**: Proper labeling and keyboard navigation
+
+### ConfigEngine
+
+Components for rendering visual design styles and Google Fonts imports from configuration data.
+
+#### VisualDesignStyles
+
+Renders CSS custom properties from visual design configuration tokens.
+
+```tsx
+import { VisualDesignStyles } from '@pixelated-tech/components';
+
+<VisualDesignStyles visualdesign={{
+  'primary-color': '#007bff',
+  'header-font-primary': 'Montserrat',
+  'header-font-fallback': 'Arial',
+  'header-font-generic': 'sans-serif',
+  'font-size1-min': '14px',
+  'font-size1-max': '18px'
+}} />
+```
+
+**Generated CSS:**
+```css
+:root {
+  --primary-color: #007bff;
+  --header-font-family: "Montserrat", "Arial", "sans-serif";
+  --font-size1: clamp(var(--font-size1-min), calc(var(--font-size1-min) + ((var(--font-size1-max) - var(--font-size1-min)) * ((100vw - var(--font-min-screen)) / (var(--font-max-screen) - var(--font-min-screen))))), var(--font-size1-max));
+}
+h1 { font-size: var(--font-size1); }
+```
+
+#### GoogleFontsImports
+
+Automatically generates Google Fonts link tags for fonts specified in visual design configuration.
+
+```tsx
+import { GoogleFontsImports } from '@pixelated-tech/components';
+
+<GoogleFontsImports visualdesign={{
+  'header-font-primary': 'Montserrat',
+  'body-font-primary': 'Open Sans'
+}} />
+```
+
+**Generated HTML:**
+```html
+<link rel="preconnect" href="https://fonts.googleapis.com">
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link href="https://fonts.googleapis.com/css2?family=Montserrat|Open+Sans&display=swap" rel="stylesheet">
+```
+
+#### Features
+
+- **Font Stack Generation**: Automatically builds CSS font-family stacks from 3-field font configuration
+- **Responsive Typography**: Generates fluid font sizes using CSS clamp() for responsive design
+- **Google Fonts Integration**: Automatically imports only the Google Fonts used in the design
+- **Web-safe Font Filtering**: Excludes web-safe fonts from Google Fonts imports to reduce loading
+- **Server-safe**: Both components are safe to use in server components and API routes
+
 ---
 
 ## SEO & Schema

package/README.md

@@ -18,7 +18,7 @@
 <h3 align="center">Pixelated Components</h3>
 
   <p align="center">
-    A comprehensive React component library for modern web development, featuring CMS integrations, UI components, and SEO optimization tools.
+    A comprehensive React component library for modern web development, featuring CMS integrations, UI components, SEO optimization tools, and accessibility-first design.
     <br />
     <a href="https://github.com/brianwhaley/pixelated-components"><strong>Explore the docs »</strong></a>
     <br />
@@ -60,6 +60,27 @@ This is a library of components I have found useful to build web sites quickly.
 
 
 
+## ♿ Accessibility
+
+Pixelated Components is committed to creating inclusive web experiences. All components are built with accessibility in mind and include:
+
+- **WCAG 2.1 AA compliance** - Components meet web accessibility guidelines
+- **Keyboard navigation** - Full keyboard support for all interactive elements
+- **Screen reader support** - Proper ARIA labels, roles, and semantic HTML
+- **Focus management** - Clear focus indicators and logical tab order
+- **Color contrast** - High contrast ratios for text and interactive elements
+- **Semantic HTML** - Proper use of headings, landmarks, and structural elements
+
+### Accessibility Features
+- Automatic ARIA label generation
+- Focus trap management for modals and overlays
+- Skip links for keyboard users
+- Reduced motion support for users with vestibular disorders
+- High contrast mode compatibility
+
+
+
+
 ## 📦 Installation & Setup
 
 ### Requirements
@@ -93,53 +114,125 @@ npm install react react-dom prop-types
 
 This library is written in TypeScript and provides full type definitions. No additional setup required.
 
+### Reference Implementation
 
+For a complete working example of Pixelated Components in action, check out the [pixelated-admin](https://github.com/brianwhaley/pixelated-admin) project. This admin interface demonstrates:
 
-## 🧩 Component Categories
+- **Component Integration**: Real-world usage of all major components
+- **Configuration Management**: Dynamic site configuration with ConfigBuilder
+- **Page Building**: Visual page construction with PageBuilderUI
+- **Authentication**: NextAuth.js integration for secure admin access
+- **Deployment Ready**: Production-ready setup with HTTPS and optimized builds
+
+```bash
+# Clone the reference implementation
+git clone https://github.com/brianwhaley/pixelated-admin.git
+cd pixelated-admin
+npm install
+npm run dev
+```
+
+Visit `http://localhost:3006` to explore the admin interface and see components in action.
 
 ### General Components
 Reusable UI components for common patterns:
 - **Accordion** - Expandable content sections using native `<details>` elements
 - **Callout** - Flexible content highlight blocks with image support
-- **Modal** - Dialog overlays and popups
+- **CSS** - Dynamic CSS utilities and styling helpers
+- **Image** - Advanced image component with lazy loading and optimization
 - **Loading** - Progress indicators and loading states
-- **Panel** - Content containers with various layouts
+- **MicroInteractions** - Subtle animations and interaction effects
+- **Modal** - Dialog overlays and popups
+- **Semantic** - Semantic HTML structure components
+- **SidePanel** - Slide-out panel component for additional content
+- **Table** - Data display and table components
 
 ### CMS Integration
 Headless CMS and content management components:
 - **WordPress** - Blog post integration and display with automatic Photon CDN URL processing
-- **Contentful** - Headless CMS components and utilities
+- **Contentful** - Headless CMS components and utilities with delivery and management APIs
 - **PageBuilder** - Dynamic page construction from JSON
 - **PageEngine** - Advanced page rendering with Contentful integration
 
 ### UI Components
 User interface and interaction components:
 - **Carousel** - Image and content sliders (Hero, Reviews, Portfolio)
-- **Forms** - Form builder and validation components
+- **Forms** - Form builder, validation, and emailer components
+- **FormBuilder** - Advanced form construction and configuration
+- **FormComponents** - Individual form field components and utilities
+- **FormEngine** - Form rendering and processing engine
 - **Menu** - Navigation components (Simple, Accordion, Expando)
-- **Tables** - Data display and table components
+- **Tab** - Tabbed interface component for organizing content
 - **Tiles** - Image grid and tile layouts
 
+### Development Tools
+Components for development, configuration, and site building:
+- **ComponentPropertiesForm** - Form for editing component properties
+- **ComponentSelector** - Component selection interface
+- **ComponentTree** - Visual component hierarchy display
+- **ConfigBuilder** - Interactive configuration builder for site settings, metadata, routes, and visual design tokens
+- **PageBuilderUI** - User interface for page building
+- **SaveLoadSection** - Save and load functionality for configurations
+
 ### SEO & Schema
 Search engine optimization and structured data:
+- **404** - Custom 404 error page component
+- **GoogleAnalytics** - Google Analytics integration
+- **GoogleMap** - Interactive Google Maps component
+- **GoogleSearch** - Google Custom Search integration
 - **JSON-LD** - Structured data schemas (LocalBusiness, Recipe, BlogPosting, etc.)
+- **Manifest** - Web app manifest generation
 - **MetaTags** - Dynamic meta tag injection
+- **SchemaBlogPosting** - Blog post structured data
+- **SchemaLocalBusiness** - Local business structured data
+- **SchemaRecipe** - Recipe structured data
+- **SchemaServices** - Services structured data
+- **SchemaWebsite** - Website structured data
 - **Sitemap** - XML sitemap generation
 - **Social Cards** - Open Graph and Twitter card generation
+- **BuzzwordBingo** - Interactive buzzword bingo game
+- **Markdown** - Markdown rendering component
+- **Recipe** - Recipe display component
+- **Resume** - Resume/CV display component
+- **Timeline** - Timeline visualization component
 
 ### Third-Party Integrations
 External service integrations:
 - **Calendly** - Scheduling and appointment booking
 - **Cloudinary** - Image optimization and delivery
+- **GoogleReviews** - Google business reviews integration
+- **Gravatar** - User avatar integration
 - **HubSpot** - CRM and marketing automation
-- **PayPal** - Payment processing
 - **Instagram** - Social media image integration
 - **Flickr** - Photo sharing integration
-- **Gravatar** - User avatar integration
-- **Google** - Analytics, Maps, and Search integration
+- **PayPal** - Payment processing
+- **ShoppingCart** - E-commerce shopping cart functionality
 - **eBay** - Store listings and shopping cart
 - **NerdJokes** - Entertainment content integration
+- **Yelp** - Business reviews and ratings
+
+
+## 🎨 Visual Design Configuration
+
+The ConfigBuilder now includes a **Visual Design** tab that allows users to configure visual design tokens such as colors, fonts, spacing, and other design system variables. These tokens are stored in the `routes.json` file under the `visualdesign` object and can be used throughout your application for consistent theming.
+
+### Features:
+- **Color Management**: Primary, secondary, accent colors with color picker inputs
+- **Typography**: Font family and base font size settings
+- **Spacing & Layout**: Border radius, box shadows, transitions
+- **Form-Based Editing**: User-friendly form interface powered by FormEngine
+- **JSON Storage**: Design tokens stored as flattened key-value pairs in routes.json
+
+### Usage:
+```tsx
+import { ConfigBuilder } from '@pixelated-tech/components';
+
+function MyConfigPage() {
+  return <ConfigBuilder />;
+}
+```
 
+The visual design tokens can be accessed in your components via the config context or directly from the routes.json file.
 
 
 ## � Quick Start
@@ -182,7 +275,7 @@ npm run storybook
 - [ ] Buffer Integration (or Sendible, Sprout Social, Hootsuite)
 - [ ] Zapier Integration
 - [ ] Hero Banner: headline, subtext, CTA, background image/video, overlay.
-- [ ] Accessibility Enhancer: wrapper component that automatically improves accessibility across Pixelated sites by adding ARIA labels, roles, and states to existing components. Includes color contrast checking, keyboard navigation helpers, and alt-text suggestions for images.
+- [ ] Accessibility Enhancer: wrapper component that automatically improves accessibility across Pixelated sites by adding ARIA labels, roles, and states to existing components. Includes color contrast checking, keyboard navigation helpers, alt-text suggestions for images, and automated accessibility audits.
 - [ ] SEO Dashboard with AI Integration: component that analyzes site content, suggests optimizations, integrates with AI for meta descriptions and keyword research.
 
 ### CI / CD Improvements
@@ -197,22 +290,35 @@ npm run storybook
 - [ ] find a better solution than to generate image via build script in amplify for json for sitemap creation
 - [ ] **SocialCards Component**: Fix state initialization to track prop changes properly.
 - [ ] **Modal Component**: Clarify content source pattern (accepts both `modalContent` and `children`).
-- [ ] **Form Components**: Fix validation state reset when input props change.
 - [ ] **Carousel Component**: Fix active card state reset when `props.cards` changes.
 - [ ] **NerdJoke Component**: Add props to useEffect dependencies if endpoint becomes configurable.
 - [ ] **GoogleReviews Component**: Add carousel/grid display modes.
 - [ ] **GoogleReviews Component**: Add API key to config provider instead of hardcoding.
 - [ ] **Instagram Component**: Add accessToken and userId to config provider for centralized API credentials.
+- [ ] **Critters Integration**: Explore adding critters CSS inlining tool for improved page load performance and critical CSS optimization.
+
+### Platform Enhancements
+- [ ] **Project Scaffolding CLI**: Interactive CLI tool that generates complete Next.js projects with pixelated-components pre-configured, including routes.json, layout.tsx, package.json, and basic page structure
+- [ ] **Template Marketplace**: Pre-built industry-specific templates (restaurant, law firm, contractor, etc.) that users can clone and customize
+- [ ] **Configuration Wizard**: Step-by-step setup wizard that collects business info, generates site configuration, and creates initial content structure
+- [ ] **Centralized Site Manager**: Web dashboard for managing multiple pixelated sites, with bulk updates, version control, and deployment status monitoring
+- [ ] **Site Health Monitoring**: Automated monitoring dashboard that checks site performance, broken links, SEO scores, and security vulnerabilities across all sites
+- [ ] **Content Migration Tools**: Automated importers for WordPress, Squarespace, Wix, and other platforms to migrate content to pixelated sites
+- [ ] **A/B Testing Framework**: Built-in experimentation system for testing different layouts, content, and CTAs with automatic winner selection
+- [ ] **Personalization Engine**: Dynamic content delivery based on user behavior, location, and preferences
+- [ ] **Hot Module Replacement for Configs**: Live preview of configuration changes without full rebuilds
+- [ ] **Automated Dependency Updates**: Smart update system that tests component changes across all sites before deployment
+- [ ] **Rollback System**: One-click rollback to previous versions with automatic database and asset restoration
+- [ ] **Performance Budget Tracker**: Automated monitoring of Core Web Vitals with alerts when sites exceed performance budgets
+- [ ] **ConfigBuilder SEO Enhancement**: Upgrade ConfigBuilder with AI-powered meta description generation, keyword optimization suggestions, and automated schema markup
+- [ ] **Conversion Funnel Builder**: Visual funnel creation with automated tracking, A/B testing, and optimization recommendations
+- [ ] **Automated Security Scanner**: Regular security audits with vulnerability detection and automated fixes
+- [ ] **GDPR Compliance Toolkit**: Automated cookie consent, data mapping, and privacy policy generation
+- [ ] **API Gateway**: Unified API management for connecting to CRM, email marketing, payment processors, and other business tools
+- [ ] **Webhook Automation**: Event-driven automation for form submissions, new content, user registrations, and business workflows
+- [ ] **Third-Party Sync Engine**: Bidirectional sync with tools like HubSpot, Mailchimp, QuickBooks, and project management systems
+- [ ] **Documentation Auto-Generator**: Automatically generated API docs, component usage guides, and deployment instructions
 
-### SSR Fixes
-- [ ] **cloudinary.image.tsx** (`SmartImage`): Add `"use client"` or refactor to avoid `usePixelatedConfig` in server contexts
-- [ ] **wordpress.components.tsx** (`BlogPostList`, etc.): Add `"use client"` or refactor to avoid `usePixelatedConfig` in server contexts  
-- [ ] **pagebuilder/form/formcomponents.tsx**: Add `"use client"` or refactor to avoid `usePixelatedConfig` in server contexts
-- [ ] **cms/hubspot.components.tsx**: Add `"use client"` or refactor to avoid `usePixelatedConfig` in server contexts
-- [ ] **cms/gravatar.components.tsx**: Add `"use client"` or refactor to avoid `usePixelatedConfig` in server contexts
-- [ ] **structured/recipe.tsx**: Add `"use client"` or refactor to avoid `usePixelatedConfig` in server contexts
-- [ ] **structured/timeline.tsx**: Add `"use client"` or refactor to avoid `usePixelatedConfig` in server contexts
-- [ ] **structured/markdown.tsx**: Add `"use client"` or refactor to avoid `usePixelatedConfig` in server contexts
 
 See the [open issues](https://github.com/brianwhaley/pixelated-components/issues) for a full list of proposed features (and known issues).
 
@@ -270,16 +376,16 @@ Project Link: [https://github.com/brianwhaley/pixelated-components](https://gith
 
 ### Overview
 
-**Current Status**: ✅ 2,244 tests passing across 67 test files
+**Current Status**: ✅ 2,246 tests passing across 67 test files
 
 | Metric | Value |
 |--------|-------|
 | Test Files | 67 |
-| Total Tests | 2,244 |
-| Coverage (Statements) | 76.59% |
-| Coverage (Lines) | 79.45% |
-| Coverage (Functions) | 78.33% |
-| Coverage (Branches) | 66.79% |
+| Total Tests | 2,246 |
+| Coverage (Statements) | 76.11% |
+| Coverage (Lines) | 78.91% |
+| Coverage (Functions) | 77.95% |
+| Coverage (Branches) | 66.58% |
 | Test Framework | Vitest 4.x |
 | Testing Library | @testing-library/react + jsdom |
 

package/dist/components/cms/cloudinary.image.js

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

package/dist/components/cms/wordpress.components.js

@@ -1,3 +1,4 @@
+'use client';
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useState } from 'react';
 import { usePixelatedConfig } from "../config/config.client";

package/dist/components/general/sidepanel.js

@@ -4,7 +4,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
 import './sidepanel.css';
-export default function SidePanel({ isOpen, onClose, onToggle, position = 'left', width = '300px', showOverlay = true, showTab = false, tabIcon, tabLabel, children, className = '' }) {
+export default function SidePanel({ isOpen, onClose, onToggle, position = 'left', width = '300px', showOverlay = true, showTab = false, tabIcon /* = "≡" */, tabLabel, children, className = '' }) {
     const portalRootRef = useRef(null);
     const wrapperRef = useRef(null);
     const [hasMounted, setHasMounted] = useState(false);

package/dist/components/menu/menu-accordion.css

@@ -24,6 +24,15 @@
 
 
 .panelMenuButton .hamburger{
+    cursor: pointer;
+   	font-family: Verdana;
+	font-size: 1.5rem;
+    color: #CCC;
+
+}
+
+.panelMenuButton .hamburger2{
+	/* 3 lines instead of unicode hamburger (U+2261) */
     /* the tricks */
 	/* display: block; */
 	/* display inline-block is fine too */
@@ -40,6 +49,7 @@
 	padding-top: 5px;
 
 }
+
 /* hamburger hover style */
 /* .accordionMenu .hamburger:hover {
     color: #FFC75F;

package/dist/components/menu/menu-accordion.js

@@ -3,6 +3,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { useEffect, useRef } from 'react';
 import PropTypes from 'prop-types';
 import './menu-accordion.css';
+const hamburgerIcon = "≡"; /* (U+2261) */ /* ||| */
 function generateMenuItems({ menuData, state = "hide" }) {
     const myItems = [];
     let index = 0;
@@ -174,5 +175,5 @@ export function MenuAccordionButton() {
         }
     }
     // suppressHydrationWarning suppresses hydration mismatch warnings for this button
-    return (_jsx("button", { className: "panelMenuButton", id: "panelMenuButton", onClick: slideMobilePanel, suppressHydrationWarning: true, children: _jsx("span", { className: "hamburger text-outline", children: "|||" }) }));
+    return (_jsx("button", { className: "panelMenuButton", id: "panelMenuButton", onClick: slideMobilePanel, suppressHydrationWarning: true, children: _jsx("span", { className: "hamburger text-outline", children: hamburgerIcon }) }));
 }

package/dist/components/menu/menu-simple.css

@@ -3,13 +3,6 @@
 ============  SIMPLE MENU   ============
 ======================================== */
 
-:root {
-	--primary-color: #369;
-	--secondary-color: #BCD;
-	--accent1-color: #CCC;
-	--accent2-color: #EEE;	
-}
-
 .menu-wrapper {
 	height: 100%;
 }

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

@@ -0,0 +1,25 @@
+.compound-font-selector {
+  margin-bottom: 1rem;
+}
+
+.compound-font-selector label {
+  display: block;
+  margin-bottom: 0.5rem;
+  font-weight: 500;
+}
+
+.compound-container {
+  display: flex;
+  gap: 1rem;
+  align-items: flex-start;
+}
+
+.compound-container > .font-selector {
+  flex: 1;
+  margin-bottom: 0;
+}
+
+.compound-container > .font-selector label {
+  font-size: 0.875rem;
+  margin-bottom: 0.25rem;
+}

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

@@ -0,0 +1,41 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import { FontSelector } from './FontSelector';
+import './CompoundFontSelector.css';
+export function CompoundFontSelector({ id, name, label, required = false, value = '', onChange }) {
+    // Parse the compound value into primary, fallback, generic parts
+    const parseCompoundValue = (val) => {
+        const parts = val.split(',').map(s => s.trim());
+        return {
+            primary: parts[0] || '',
+            fallback: parts[1] || '',
+            generic: parts[2] || ''
+        };
+    };
+    const [fonts, setFonts] = useState(parseCompoundValue(value));
+    // Update fonts when value changes externally
+    useEffect(() => {
+        setFonts(parseCompoundValue(value));
+    }, [value]);
+    // Combine fonts into a single font stack value
+    const combineFonts = (fontParts) => {
+        return [fontParts.primary, fontParts.fallback, fontParts.generic].filter(Boolean).join(', ');
+    };
+    // Handle changes from individual font selectors
+    const handleFontChange = (type, newValue) => {
+        const updatedFonts = { ...fonts, [type]: newValue };
+        setFonts(updatedFonts);
+        const combinedValue = combineFonts(updatedFonts);
+        onChange?.(combinedValue);
+    };
+    return (_jsxs("div", { className: "compound-font-selector", children: [_jsx("label", { children: label }), _jsxs("div", { className: "compound-container", children: [_jsx(FontSelector, { id: `${id}-primary`, name: `${name}-primary`, label: "Primary Font", fontType: "google", required: required, placeholder: "Select Google Font", value: fonts.primary, onChange: (val) => handleFontChange('primary', val) }), _jsx(FontSelector, { id: `${id}-fallback`, name: `${name}-fallback`, label: "Fallback Font", fontType: "websafe", required: false, placeholder: "Select web-safe font", value: fonts.fallback, onChange: (val) => handleFontChange('fallback', val) }), _jsx(FontSelector, { id: `${id}-generic`, name: `${name}-generic`, label: "Generic Family", fontType: "generic", required: false, placeholder: "Select generic family", value: fonts.generic, onChange: (val) => handleFontChange('generic', val) })] })] }));
+}
+CompoundFontSelector.propTypes = {
+    id: PropTypes.string.isRequired,
+    name: PropTypes.string.isRequired,
+    label: PropTypes.string.isRequired,
+    required: PropTypes.bool,
+    value: PropTypes.string,
+    onChange: PropTypes.func,
+};