@pixelated-tech/components 3.1.4

package/dist/components/pagebuilder/components/ComponentSelector.js

@@ -0,0 +1,67 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import PropTypes from 'prop-types';
+// import { FormEngine } from '../../form/pixelated.form';
+import { componentMap /* , componentTypes */ } from '../lib/componentMap';
+import { generateFieldJSON } from '../lib/componentGeneration';
+/**
+ * ComponentSelector - Two-phase component selection
+ * Phase 1: Select component type
+ * Phase 2: Auto-generate property form based on PropTypes
+ */
+ComponentSelector.propTypes = {
+    setEditableComponent: PropTypes.func.isRequired,
+    parentPath: PropTypes.string,
+    editMode: PropTypes.shape({
+        component: PropTypes.string,
+        props: PropTypes.object
+    }),
+};
+export function ComponentSelector(props) {
+    const { setEditableComponent, parentPath, editMode } = props;
+    const [lastEditMode, setLastEditMode] = useState('');
+    const [selectedValue, setSelectedValue] = useState('');
+    // If in edit mode, auto-generate form on mount
+    useEffect(() => {
+        if (editMode && editMode.component) {
+            // Create a stable key to track if this is a new edit mode
+            const editKey = `${editMode.component}-${JSON.stringify(editMode.props)}`;
+            if (editKey !== lastEditMode) {
+                const componentJSON = generateFieldJSON(editMode.component, editMode.props, parentPath || undefined);
+                setEditableComponent(componentJSON);
+                setLastEditMode(editKey);
+                setSelectedValue(editMode.component);
+            }
+        }
+        else if (lastEditMode !== '') {
+            // Reset when exiting edit mode
+            setLastEditMode('');
+            setSelectedValue('');
+        }
+    }, [editMode, lastEditMode, setEditableComponent, parentPath]);
+    function handleComponentChange(event) {
+        const selectedComponent = event.target.value;
+        setSelectedValue(selectedComponent);
+        if (selectedComponent) {
+            const componentJSON = generateFieldJSON(selectedComponent, undefined, parentPath || undefined);
+            setEditableComponent(componentJSON);
+        }
+    }
+    const componentOptions = Object.keys(componentMap).map((name) => ({
+        value: name,
+        text: name
+    }));
+    return (_jsxs("div", { children: [parentPath && (_jsxs("div", { style: {
+                    background: '#e3f2fd',
+                    border: '1px solid #2196F3',
+                    borderRadius: '4px',
+                    padding: '0.75rem',
+                    marginBottom: '1rem',
+                    color: '#0d47a1'
+                }, children: [_jsx("strong", { children: "\u2795 Adding child component" }), _jsx("div", { style: { fontSize: '0.875rem', marginTop: '0.25rem' }, children: "Select a component type to add as a child" })] })), _jsx("label", { htmlFor: "component-type-selector", style: { display: 'block', marginBottom: '0.5rem', fontWeight: 'bold' }, children: "Component Type:" }), _jsxs("select", { id: "component-type-selector", onChange: handleComponentChange, value: selectedValue, style: {
+                    marginBottom: '1rem',
+                    fontSize: '1rem',
+                    border: '1px solid #ccc',
+                    borderRadius: '4px'
+                }, children: [_jsx("option", { value: "", disabled: true, children: "Select a component..." }), componentOptions.map(option => (_jsx("option", { value: option.value, children: option.text }, option.value)))] })] }));
+}

package/dist/components/pagebuilder/components/ComponentTree.js

@@ -0,0 +1,95 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import PropTypes from 'prop-types';
+import { layoutComponents } from '../lib/componentMap';
+/**
+ * ComponentTree - Displays hierarchical tree of components
+ * Shows Edit and Child buttons for each component
+ */
+ComponentTree.propTypes = {
+    components: PropTypes.array.isRequired,
+    onSelectComponent: PropTypes.func.isRequired,
+    onEditComponent: PropTypes.func.isRequired,
+    onDeleteComponent: PropTypes.func.isRequired,
+    onMoveUp: PropTypes.func.isRequired,
+    onMoveDown: PropTypes.func.isRequired,
+    selectedPath: PropTypes.string,
+    editPath: PropTypes.string,
+};
+export function ComponentTree({ components, onSelectComponent, onEditComponent, onDeleteComponent, onMoveUp, onMoveDown, selectedPath, editPath }) {
+    function renderTreeNode(component, index, path) {
+        const isLayout = layoutComponents.includes(component.component);
+        const currentPath = `${path}[${index}]`;
+        const isSelected = currentPath === selectedPath;
+        const isEditing = currentPath === editPath;
+        const hasChildren = component.children && component.children.length > 0;
+        return (_jsxs("div", { style: { marginLeft: path === 'root' ? 0 : '20px' }, children: [_jsxs("div", { style: {
+                        padding: '0.5rem',
+                        margin: '0.25rem 0',
+                        background: isEditing ? '#FFA726' : isSelected ? '#4CAF50' : isLayout ? '#e3f2fd' : '#f5f5f5',
+                        color: isEditing || isSelected ? 'white' : 'black',
+                        borderRadius: '4px',
+                        border: isLayout ? '2px solid #2196F3' : '1px solid #ddd',
+                        display: 'flex',
+                        alignItems: 'center',
+                        gap: '0.5rem',
+                    }, children: [_jsxs("div", { style: { flex: 1 }, children: [_jsx("strong", { children: component.component }), hasChildren && ` (${component.children.length} children)`, isLayout && ' 📦'] }), _jsxs("div", { style: { display: 'flex', gap: '0.25rem', alignItems: 'center' }, children: [_jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: '2px' }, children: [_jsx("button", { onClick: (e) => {
+                                                e.stopPropagation();
+                                                onMoveUp(currentPath);
+                                            }, style: {
+                                                padding: '2px 6px',
+                                                background: '#757575',
+                                                color: 'white',
+                                                border: 'none',
+                                                borderRadius: '2px',
+                                                cursor: 'pointer',
+                                                fontSize: '0.65rem',
+                                                lineHeight: '1',
+                                            }, title: "Move up", children: "\u25B2" }), _jsx("button", { onClick: (e) => {
+                                                e.stopPropagation();
+                                                onMoveDown(currentPath);
+                                            }, style: {
+                                                padding: '2px 6px',
+                                                background: '#757575',
+                                                color: 'white',
+                                                border: 'none',
+                                                borderRadius: '2px',
+                                                cursor: 'pointer',
+                                                fontSize: '0.65rem',
+                                                lineHeight: '1',
+                                            }, title: "Move down", children: "\u25BC" })] }), _jsx("button", { onClick: (e) => {
+                                        e.stopPropagation();
+                                        onEditComponent(component, currentPath);
+                                    }, style: {
+                                        padding: '0.25rem 0.5rem',
+                                        background: '#2196F3',
+                                        color: 'white',
+                                        border: 'none',
+                                        borderRadius: '3px',
+                                        cursor: 'pointer',
+                                        fontSize: '0.75rem',
+                                    }, title: "Edit properties", children: "\u270F\uFE0F Edit" }), isLayout && (_jsx("button", { onClick: (e) => {
+                                        e.stopPropagation();
+                                        onSelectComponent(component, currentPath);
+                                    }, style: {
+                                        padding: '0.25rem 0.5rem',
+                                        background: '#4CAF50',
+                                        color: 'white',
+                                        border: 'none',
+                                        borderRadius: '3px',
+                                        cursor: 'pointer',
+                                        fontSize: '0.75rem',
+                                    }, title: "Add child component", children: "\u2795 Child" })), _jsx("button", { onClick: (e) => {
+                                        e.stopPropagation();
+                                        onDeleteComponent(currentPath);
+                                    }, style: {
+                                        padding: '0.25rem 0.5rem',
+                                        background: '#f44336',
+                                        color: 'white',
+                                        border: 'none',
+                                        borderRadius: '3px',
+                                        cursor: 'pointer',
+                                        fontSize: '0.75rem',
+                                    }, title: "Delete component", children: "\uD83D\uDDD1\uFE0F Delete" })] })] }), hasChildren && (_jsx("div", { children: component.children.map((child, childIndex) => renderTreeNode(child, childIndex, `${currentPath}.children`)) }))] }, currentPath));
+    }
+    return (_jsx("div", { children: components.map((component, index) => renderTreeNode(component, index, 'root')) }));
+}

package/dist/components/pagebuilder/components/PageBuilderUI.js

@@ -0,0 +1,48 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { PageSectionHeader } from '../../general/headers';
+import { usePageBuilder } from '../lib/usePageBuilder';
+import { ComponentSelector } from '../components/ComponentSelector';
+import { ComponentPropertiesForm } from '../components/ComponentPropertiesForm';
+import { PageEngine } from '../components/PageEngine';
+import { SaveLoadSection } from '../components/SaveLoadSection';
+import "../../../css/pixelated.global.css";
+import './pagebuilder.scss';
+/**
+ * PageBuilderUI - Main orchestrator component
+ * Composes all sub-components and manages layout with inline editing
+ */
+export function PageBuilderUI({ apiEndpoint = '/api/pagebuilder' } = {}) {
+    const { pageJSON, setPageJSON, editableComponent, selectedPath, editMode, setEditableComponent, setSelectedPath, setEditMode, handleAddNewComponent, handleSelectComponent, handleEditComponent, cancelEdit, handleDeleteComponent, handleMoveUp, handleMoveDown, } = usePageBuilder();
+    const [selectorKey, setSelectorKey] = React.useState(0);
+    // Handle loading a saved page
+    function handleLoadPage(data) {
+        setPageJSON(data);
+        setEditableComponent({});
+        setSelectedPath('');
+        setEditMode(null);
+        setSelectorKey(prev => prev + 1);
+    }
+    // Wrap handleAddNewComponent to reset selector after adding
+    function handleAddWithReset(component) {
+        handleAddNewComponent(component);
+        setSelectorKey(prev => prev + 1);
+        setEditableComponent({});
+    }
+    return (_jsxs("div", { className: "row-2col", style: { gridTemplateColumns: "1fr 3fr", alignItems: "start" }, children: [_jsxs("div", { className: "gridItem", children: [_jsx(PageSectionHeader, { title: "Component Editor" }), _jsx(SaveLoadSection, { pageData: pageJSON, onLoad: handleLoadPage, apiEndpoint: apiEndpoint }), _jsx(ComponentSelector, { setEditableComponent: setEditableComponent, parentPath: selectedPath || undefined, editMode: editMode ? {
+                            component: editMode.component.component,
+                            props: editMode.component.props
+                        } : undefined }, selectorKey), _jsx("br", {}), _jsx(ComponentPropertiesForm, { editableComponent: editableComponent, onSubmit: handleAddWithReset }), editMode && (_jsx("div", { children: _jsx("button", { onClick: cancelEdit, type: "button", className: "button", style: {
+                                background: '#FFA726',
+                                color: 'white',
+                                transition: 'all 0.2s ease',
+                            }, onMouseEnter: (e) => e.currentTarget.style.background = '#FB8C00', onMouseLeave: (e) => e.currentTarget.style.background = '#FFA726', children: "Cancel Edit" }) }))] }), _jsxs("div", { className: "gridItem", children: [_jsx(PageSectionHeader, { title: "Page Preview" }), _jsx("section", { id: "preview-section", children: _jsxs("div", { className: "section-container", children: [pageJSON.components.length > 0 ? (_jsx(PageEngine, { pageData: pageJSON, editMode: true, selectedPath: selectedPath, onEditComponent: handleEditComponent, onSelectComponent: handleSelectComponent, onDeleteComponent: handleDeleteComponent, onMoveUp: handleMoveUp, onMoveDown: handleMoveDown })) : (_jsx("p", { style: { color: '#666', fontStyle: 'italic', padding: '2rem', textAlign: 'center' }, children: "No components yet. Start by selecting a component above and adding it to your page." })), _jsxs("details", { style: { marginTop: '1rem' }, children: [_jsx("summary", { style: { cursor: 'pointer', userSelect: 'none' }, children: _jsx("strong", { children: "Page JSON" }) }), _jsx("pre", { style: {
+                                                maxHeight: '400px',
+                                                overflow: 'auto',
+                                                fontSize: '0.875rem',
+                                                background: '#f5f5f5',
+                                                padding: '1rem',
+                                                borderRadius: '4px',
+                                            }, children: JSON.stringify(pageJSON, null, 2) })] })] }) })] })] }));
+}

package/dist/components/pagebuilder/components/PageEngine.js

@@ -0,0 +1,97 @@
+import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import React from 'react';
+import PropTypes from 'prop-types';
+import { generateKey } from '../../utilities/functions';
+import { componentMap, layoutComponents } from '../lib/componentMap';
+import './pagebuilder.scss';
+/**
+ * PageEngine - Renders components with optional inline editing
+ * When editMode is true, shows borders, hover effects, and action buttons
+ * When editMode is false (default), renders clean components without edit UI
+ */
+PageEngine.propTypes = {
+    pageData: PropTypes.shape({
+        components: PropTypes.arrayOf(PropTypes.shape({
+            component: PropTypes.string.isRequired,
+            props: PropTypes.object.isRequired,
+            children: PropTypes.array,
+        })).isRequired,
+    }).isRequired,
+    editMode: PropTypes.bool,
+    selectedPath: PropTypes.string,
+    onEditComponent: PropTypes.func,
+    onSelectComponent: PropTypes.func,
+    onDeleteComponent: PropTypes.func,
+    onMoveUp: PropTypes.func,
+    onMoveDown: PropTypes.func,
+};
+export function PageEngine(props) {
+    const { editMode = false, selectedPath, onEditComponent, onSelectComponent, onDeleteComponent, onMoveUp, onMoveDown } = props;
+    // Recursive function to render components with children
+    function renderComponent(componentData, index, path = 'root') {
+        const componentName = componentData.component;
+        const componentProps = { ...componentData.props };
+        delete componentProps.type;
+        const componentType = componentMap[componentName];
+        const currentPath = `${path}[${index}]`;
+        const isLayout = layoutComponents.includes(componentName);
+        if (!componentType) {
+            return _jsxs("div", { children: ["Unknown component: ", componentName] }, index);
+        }
+        // If component has children, recursively render them
+        let children = null;
+        if (componentData.children && componentData.children.length > 0) {
+            children = componentData.children.map((child, childIndex) => renderComponent(child, childIndex, `${currentPath}.children`));
+        }
+        componentProps.key = generateKey();
+        const element = children
+            ? React.createElement(componentType, componentProps, children)
+            : React.createElement(componentType, componentProps);
+        // If not in edit mode, return element directly without wrapper
+        if (!editMode) {
+            return _jsx(React.Fragment, { children: element }, `fragment-${index}`);
+        }
+        // Edit mode: Wrap with hover effect and action buttons
+        const isSelected = selectedPath === currentPath;
+        return (_jsxs("div", { className: `pagebuilder-component-wrapper ${isSelected ? 'selected' : ''}`, onMouseOver: (e) => {
+                if (e.target === e.currentTarget || !e.currentTarget.querySelector('.pagebuilder-component-wrapper:hover')) {
+                    // Remove hover-active from all wrappers
+                    document.querySelectorAll('.pagebuilder-component-wrapper.hover-active').forEach(el => {
+                        el.classList.remove('hover-active');
+                    });
+                    // Add to current
+                    e.currentTarget.classList.add('hover-active');
+                }
+                e.stopPropagation();
+            }, onMouseOut: (e) => {
+                const relatedTarget = e.relatedTarget;
+                // Only remove if leaving to somewhere outside this wrapper entirely
+                if (!e.currentTarget.contains(relatedTarget)) {
+                    e.currentTarget.classList.remove('hover-active');
+                }
+            }, children: [element, _jsxs("div", { className: "pagebuilder-actions", children: [_jsxs("div", { className: "move-buttons", children: [_jsx("button", { className: "move-btn move-up", onClick: (e) => {
+                                        e.stopPropagation();
+                                        onMoveUp?.(currentPath);
+                                    }, title: "Move up", children: "\u25B2" }), _jsx("button", { className: "move-btn move-down", onClick: (e) => {
+                                        e.stopPropagation();
+                                        onMoveDown?.(currentPath);
+                                    }, title: "Move down", children: "\u25BC" })] }), _jsx("button", { className: "edit-btn", onClick: (e) => {
+                                e.stopPropagation();
+                                onEditComponent?.(componentData, currentPath);
+                            }, title: "Edit properties", children: "\u270F\uFE0F" }), isLayout && (_jsx("button", { className: "child-btn", onClick: (e) => {
+                                e.stopPropagation();
+                                onSelectComponent?.(componentData, currentPath);
+                            }, title: "Add child component", children: "\u2795" })), _jsx("button", { className: "delete-btn", onClick: (e) => {
+                                e.stopPropagation();
+                                onDeleteComponent?.(currentPath);
+                            }, title: "Delete component", children: "\uD83D\uDDD1\uFE0F" })] })] }, `wrapper-${index}`));
+    }
+    const components = [];
+    const pageComponents = props?.pageData?.components;
+    if (pageComponents) {
+        pageComponents.forEach((component, index) => {
+            components.push(renderComponent(component, index));
+        });
+    }
+    return _jsx(_Fragment, { children: components });
+}

package/dist/components/pagebuilder/components/SaveLoadSection.js

@@ -0,0 +1,168 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect } from 'react';
+import PropTypes from 'prop-types';
+SaveLoadSection.propTypes = {
+    pageData: PropTypes.object.isRequired,
+    onLoad: PropTypes.func.isRequired,
+    apiEndpoint: PropTypes.string,
+};
+export function SaveLoadSection({ pageData, onLoad, apiEndpoint = '/api/pagebuilder' }) {
+    const [pageName, setPageName] = useState('');
+    const [savedPages, setSavedPages] = useState([]);
+    const [message, setMessage] = useState('');
+    const [isLoading, setIsLoading] = useState(false);
+    const [showLoadList, setShowLoadList] = useState(false);
+    // Fetch list of saved pages on mount
+    useEffect(() => {
+        fetchPages();
+    }, []);
+    async function fetchPages() {
+        try {
+            const response = await fetch(`${apiEndpoint}/list`);
+            const result = await response.json();
+            if (result.success) {
+                setSavedPages(result.pages);
+            }
+        }
+        catch (error) {
+            console.error('Failed to fetch pages:', error);
+        }
+    }
+    async function handleSave() {
+        if (!pageName.trim()) {
+            setMessage('Please enter a page name');
+            return;
+        }
+        setIsLoading(true);
+        setMessage('');
+        try {
+            const response = await fetch(`${apiEndpoint}/save`, {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ name: pageName, data: pageData })
+            });
+            const result = await response.json();
+            if (result.success) {
+                setMessage(`✓ ${result.message}`);
+                fetchPages(); // Refresh list
+                setTimeout(() => setMessage(''), 3000);
+            }
+            else {
+                setMessage(`✗ ${result.message}`);
+            }
+        }
+        catch (error) {
+            setMessage(`✗ Failed to save: ${error}`);
+        }
+        finally {
+            setIsLoading(false);
+        }
+    }
+    async function handleLoad(name) {
+        setIsLoading(true);
+        setMessage('');
+        try {
+            const response = await fetch(`${apiEndpoint}/load?name=${encodeURIComponent(name)}`);
+            const result = await response.json();
+            if (result.success && result.data) {
+                onLoad(result.data);
+                setPageName(name);
+                setShowLoadList(false);
+                setMessage(`✓ Loaded "${name}"`);
+                setTimeout(() => setMessage(''), 3000);
+            }
+            else {
+                setMessage(`✗ ${result.message}`);
+            }
+        }
+        catch (error) {
+            setMessage(`✗ Failed to load: ${error}`);
+        }
+        finally {
+            setIsLoading(false);
+        }
+    }
+    async function handleDelete(name) {
+        if (!confirm(`Delete page "${name}"? This cannot be undone.`)) {
+            return;
+        }
+        setIsLoading(true);
+        setMessage('');
+        try {
+            const response = await fetch(`${apiEndpoint}/delete?name=${encodeURIComponent(name)}`, {
+                method: 'DELETE'
+            });
+            const result = await response.json();
+            if (result.success) {
+                setMessage(`✓ ${result.message}`);
+                fetchPages(); // Refresh list
+                setTimeout(() => setMessage(''), 3000);
+            }
+            else {
+                setMessage(`✗ ${result.message}`);
+            }
+        }
+        catch (error) {
+            setMessage(`✗ Failed to delete: ${error}`);
+        }
+        finally {
+            setIsLoading(false);
+        }
+    }
+    return (_jsxs("div", { style: { marginBottom: '1rem', padding: '1rem', background: '#f9f9f9', borderRadius: '4px' }, children: [_jsxs("div", { style: { marginBottom: '0.5rem' }, children: [_jsx("label", { htmlFor: "page-name", style: { display: 'block', fontWeight: 'bold', marginBottom: '0.25rem' }, children: "Page Name:" }), _jsx("input", { id: "page-name", type: "text", value: pageName, onChange: (e) => setPageName(e.target.value), placeholder: "my-landing-page", disabled: isLoading, style: {
+                            width: '100%',
+                            padding: '0.5rem',
+                            border: '1px solid #ccc',
+                            borderRadius: '4px',
+                            fontSize: '1rem'
+                        } })] }), _jsxs("div", { style: { display: 'flex', gap: '0.5rem', marginBottom: '0.5rem' }, children: [_jsx("button", { onClick: handleSave, disabled: isLoading || !pageName.trim(), className: "button", style: {
+                            flex: 1,
+                            background: '#4CAF50',
+                            color: 'white',
+                            opacity: isLoading || !pageName.trim() ? 0.5 : 1
+                        }, children: "\uD83D\uDCBE Save Page" }), _jsxs("button", { onClick: () => setShowLoadList(!showLoadList), disabled: isLoading, className: "button", style: {
+                            flex: 1,
+                            background: '#2196F3',
+                            color: 'white',
+                            opacity: isLoading ? 0.5 : 1
+                        }, children: ["\uD83D\uDCC1 ", showLoadList ? 'Hide' : 'Load Page'] })] }), showLoadList && (_jsx("div", { style: {
+                    marginTop: '0.5rem',
+                    padding: '0.5rem',
+                    border: '1px solid #ddd',
+                    borderRadius: '4px',
+                    background: 'white',
+                    maxHeight: '200px',
+                    overflowY: 'auto'
+                }, children: savedPages.length === 0 ? (_jsx("p", { style: { color: '#666', fontStyle: 'italic' }, children: "No saved pages" })) : (_jsx("ul", { style: { listStyle: 'none', padding: 0, margin: 0 }, children: savedPages.map(page => (_jsxs("li", { style: {
+                            display: 'flex',
+                            justifyContent: 'space-between',
+                            alignItems: 'center',
+                            padding: '0.5rem',
+                            borderBottom: '1px solid #eee'
+                        }, children: [_jsx("button", { onClick: () => handleLoad(page), style: {
+                                    flex: 1,
+                                    textAlign: 'left',
+                                    background: 'none',
+                                    border: 'none',
+                                    color: '#2196F3',
+                                    cursor: 'pointer',
+                                    padding: '0.25rem',
+                                    fontSize: '1rem'
+                                }, children: page }), _jsx("button", { onClick: () => handleDelete(page), style: {
+                                    background: '#f44336',
+                                    color: 'white',
+                                    border: 'none',
+                                    borderRadius: '4px',
+                                    padding: '0.25rem 0.5rem',
+                                    cursor: 'pointer',
+                                    fontSize: '0.875rem'
+                                }, children: "\uD83D\uDDD1\uFE0F" })] }, page))) })) })), message && (_jsx("div", { style: {
+                    marginTop: '0.5rem',
+                    padding: '0.5rem',
+                    borderRadius: '4px',
+                    background: message.startsWith('✓') ? '#d4edda' : '#f8d7da',
+                    color: message.startsWith('✓') ? '#155724' : '#721c24',
+                    fontSize: '0.875rem'
+                }, children: message }))] }));
+}

package/dist/components/pagebuilder/components/pagebuilder.scss

@@ -0,0 +1,123 @@
+/**
+ * PageBuilder Component Styles
+ * Hover effects for editable components in the preview
+ */
+
+.pagebuilder-component-wrapper {
+	position: relative;
+	transition: all 0.2s ease;
+	padding: 10px;
+	border: 2px solid #ccc;
+	border-radius: 5px;
+	margin: 5px 0;
+	box-sizing: border-box;
+	
+	&.selected {
+		border-color: #4CAF50;
+		border-width: 3px;
+		background: rgba(76, 175, 80, 0.05);
+		box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.2);
+	}
+	
+	/* Only apply hover to active hover state (set via JS) */
+	&.hover-active {
+		border-color: #2196F3;
+		cursor: pointer;
+		box-shadow: 0 2px 8px rgba(33, 150, 243, 0.3);
+	}
+	
+	/* Smooth micro-interaction similar to button hover */
+	&.hover-active::after {
+		content: '';
+		position: absolute;
+		top: -2px;
+		left: -2px;
+		right: -2px;
+		bottom: -2px;
+		border-radius: 4px;
+		pointer-events: none;
+		animation: pulseOutline 0.6s ease-out;
+	}
+}
+
+@keyframes pulseOutline {
+	0% {
+		box-shadow: 0 0 0 0 rgba(33, 150, 243, 0.4);
+	}
+	100% {
+		box-shadow: 0 0 0 8px rgba(33, 150, 243, 0);
+	}
+}
+
+/* Floating Action Menu */
+.pagebuilder-actions {
+	position: absolute;
+	top: 5px;
+	right: 5px;
+	display: flex;
+	gap: 4px;
+	align-items: flex-start;
+	opacity: 0;
+	transition: opacity 0.2s ease;
+	z-index: 10;
+	pointer-events: none;
+	
+	button {
+		pointer-events: auto;
+	}
+	
+	.pagebuilder-component-wrapper.hover-active > & {
+		opacity: 1;
+	}
+	
+	.move-buttons {
+		display: flex;
+		flex-direction: column;
+		gap: 2px;
+	}
+	
+	button {
+		width: 28px;
+		height: 28px;
+		border: none;
+		border-radius: 50%;
+		cursor: pointer;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		transition: all 0.2s ease;
+		box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+		
+		&:hover {
+			transform: scale(1.1);
+			box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);
+		}
+		
+		&:active {
+			transform: scale(0.95);
+		}
+		
+		&.move-btn {
+			width: 14px;
+			height: 14px;
+			font-size: 8px;
+			background: #757575;
+			color: white;
+		}
+		
+		&.edit-btn {
+			background: #2196F3;
+			color: white;
+		}
+		
+		&.child-btn {
+			background: #4CAF50;
+			color: white;
+		}
+		
+		&.delete-btn {
+			background: #f44336;
+			color: white;
+		}
+	}
+}