@tpitre/story-ui 2.7.1 → 2.8.1

package/dist/visual-builder/components/CodeExporter/codeGenerator.js

@@ -1,99 +0,0 @@
-export const generateJSXCode = (components) => {
-    if (components.length === 0) {
-        return `import React from 'react';
-import { Box } from '@mantine/core';
-
-export const GeneratedComponent = () => {
-  return (
-    <Box>
-      {/* Add your components here */}
-    </Box>
-  );
-};`;
-    }
-    const imports = generateImports(components);
-    const componentCode = generateComponentCode(components);
-    return `import React from 'react';
-${imports}
-
-export const GeneratedComponent = () => {
-  return (
-    <>
-${componentCode.split('\n').map(line => line ? `      ${line}` : '').join('\n')}
-    </>
-  );
-};`;
-};
-const generateImports = (components) => {
-    const usedComponents = new Set();
-    const collectComponents = (comps) => {
-        comps.forEach(comp => {
-            usedComponents.add(comp.type);
-            if (comp.children) {
-                collectComponents(comp.children);
-            }
-        });
-    };
-    collectComponents(components);
-    const sortedComponents = Array.from(usedComponents).sort();
-    return `import { ${sortedComponents.join(', ')} } from '@mantine/core';`;
-};
-const generateComponentCode = (components, indent = 0) => {
-    const indentStr = '  '.repeat(indent);
-    return components.map(component => {
-        const { type, props, children } = component;
-        const hasChildren = children && children.length > 0;
-        const hasTextContent = props.children && typeof props.children === 'string';
-        // Generate props string
-        const propsString = generatePropsString(props, type);
-        if (hasChildren) {
-            // Component with children
-            return `${indentStr}<${type}${propsString}>
-${generateComponentCode(children, indent + 1)}
-${indentStr}</${type}>`;
-        }
-        else if (hasTextContent) {
-            // Component with text content
-            return `${indentStr}<${type}${propsString}>
-${indentStr}  ${props.children}
-${indentStr}</${type}>`;
-        }
-        else {
-            // Self-closing component
-            return `${indentStr}<${type}${propsString} />`;
-        }
-    }).join('\n');
-};
-const generatePropsString = (props, componentType) => {
-    const propEntries = Object.entries(props);
-    // Filter out children prop for components that don't use it as text content
-    const filteredProps = propEntries.filter(([key, value]) => {
-        if (key === 'children') {
-            // Keep children prop only for text-based components
-            return ['Button', 'Text', 'Title'].includes(componentType) && typeof value === 'string';
-        }
-        // Filter out undefined, null, empty string, and default values
-        if (value === undefined || value === null || value === '')
-            return false;
-        return true;
-    });
-    if (filteredProps.length === 0)
-        return '';
-    const propsString = filteredProps
-        .map(([key, value]) => {
-        if (typeof value === 'boolean') {
-            return value ? key : `${key}={false}`;
-        }
-        else if (typeof value === 'string') {
-            return `${key}="${value}"`;
-        }
-        else if (typeof value === 'number') {
-            return `${key}={${value}}`;
-        }
-        else {
-            return `${key}={${JSON.stringify(value)}}`;
-        }
-    })
-        .join(' ');
-    return propsString ? ` ${propsString}` : '';
-};

package/dist/visual-builder/components/ComponentPalette/ComponentPalette.js

@@ -1,8 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Box, Text, Accordion } from '@mantine/core';
-import { ComponentPaletteItem } from './ComponentPaletteItem';
-import { getComponentsByCategory } from '../../config/componentRegistry';
-export const ComponentPalette = () => {
-    const componentsByCategory = getComponentsByCategory();
-    return (_jsx(Box, { p: "sm", children: _jsx(Accordion, { defaultValue: ['Layout', 'Inputs', 'Typography'], multiple: true, children: Object.entries(componentsByCategory).map(([category, components]) => (_jsxs(Accordion.Item, { value: category, children: [_jsx(Accordion.Control, { children: _jsx(Text, { fw: 500, size: "sm", children: category }) }), _jsx(Accordion.Panel, { children: _jsx(Box, { style: { display: 'flex', flexDirection: 'column', gap: '0.5rem' }, children: components.map((component) => (_jsx(ComponentPaletteItem, { config: component }, component.type))) }) })] }, category))) }) }));
-};

package/dist/visual-builder/components/ComponentPalette/ComponentPaletteItem.js

@@ -1,51 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useDraggable } from '@dnd-kit/core';
-import { Box, Text } from '@mantine/core';
-export const ComponentPaletteItem = ({ config }) => {
-    const { attributes, listeners, setNodeRef, transform, isDragging, } = useDraggable({
-        id: `palette-${config.type}`,
-        data: {
-            isFromPalette: true,
-            componentType: config.type,
-            config
-        }
-    });
-    const style = transform ? {
-        transform: `translate3d(${transform.x}px, ${transform.y}px, 0)`,
-        opacity: isDragging ? 0.5 : 1,
-        zIndex: isDragging ? 1000 : 1,
-    } : undefined;
-    return (_jsxs(Box, { ref: setNodeRef, style: {
-            ...style,
-            padding: '.75rem',
-            backgroundColor: '#f8f9fa',
-            borderRadius: '6px',
-            border: '1px solid #e9ecef',
-            cursor: 'grab',
-            userSelect: 'none',
-            transition: 'all 0.2s ease',
-            ':hover': {
-                backgroundColor: '#e9ecef',
-                borderColor: '#dee2e6'
-            }
-        }, ...attributes, ...listeners, onMouseEnter: (e) => {
-            e.currentTarget.style.backgroundColor = '#e9ecef';
-            e.currentTarget.style.borderColor = '#dee2e6';
-        }, onMouseLeave: (e) => {
-            e.currentTarget.style.backgroundColor = '#f8f9fa';
-            e.currentTarget.style.borderColor = '#e9ecef';
-        }, children: [_jsx(Text, { size: "sm", fw: 500, children: config.displayName }), _jsx(Text, { size: "xs", c: "dimmed", mt: 2, children: getComponentDescription(config.type) })] }));
-};
-const getComponentDescription = (type) => {
-    const descriptions = {
-        Button: 'Interactive button element',
-        TextInput: 'Text input field',
-        Text: 'Text display element',
-        Title: 'Heading element',
-        Container: 'Layout container',
-        Group: 'Horizontal layout',
-        Stack: 'Vertical layout',
-        Card: 'Card container'
-    };
-    return descriptions[type] || 'Component';
-};

package/dist/visual-builder/components/EmbeddedVisualBuilder.js

@@ -1,107 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useEffect, useState } from 'react';
-import { DndContext } from '@dnd-kit/core';
-import { Box, Group, Button, Alert, Text, Modal, Stack } from '@mantine/core';
-import { Canvas } from './Canvas/Canvas';
-import { ComponentPalette } from './ComponentPalette/ComponentPalette';
-import { PropertyEditor } from './PropertyEditor/PropertyEditor';
-import { CodeExporter } from './CodeExporter/CodeExporter';
-import { useDragAndDrop } from '../hooks/useDragAndDrop';
-import { useVisualBuilderStore } from '../store/visualBuilderStore';
-import { parseAIGeneratedCode } from '../utils/aiParser';
-export const EmbeddedVisualBuilder = ({ initialCode, height = '600px', showPalette = true, showProperties = true, onCodeExport, compact = false, storyMetadata }) => {
-    const { sensors, handleDragStart, handleDragOver, handleDragEnd, handleDragCancel } = useDragAndDrop();
-    const { components, clearCanvas, openCodeModal, loadFromCode, loadFromAI, importFromStoryUI, setCurrentStoryName } = useVisualBuilderStore();
-    const [loadError, setLoadError] = useState(null);
-    const [loadWarnings, setLoadWarnings] = useState([]);
-    const [showLoadDialog, setShowLoadDialog] = useState(false);
-    // Load initial code if provided
-    useEffect(() => {
-        if (initialCode) {
-            handleLoadCode(initialCode);
-        }
-    }, [initialCode]);
-    const handleLoadCode = async (code) => {
-        setLoadError(null);
-        setLoadWarnings([]);
-        try {
-            // First try to parse as Story UI content
-            if (code.includes('render:') || code.includes('.stories.')) {
-                const storyResult = await importFromStoryUI(code);
-                if (storyResult.success) {
-                    // Use story metadata if available and story name extraction failed
-                    if (storyMetadata?.title && storyMetadata.isExisting) {
-                        const { currentStoryName } = useVisualBuilderStore.getState();
-                        if (currentStoryName === 'Imported Story') {
-                            setCurrentStoryName(storyMetadata.title);
-                        }
-                    }
-                    if (storyResult.warnings.length > 0) {
-                        setLoadWarnings(storyResult.warnings);
-                        setShowLoadDialog(true);
-                    }
-                    return;
-                }
-                else {
-                    // If Story UI parsing fails, fall back to AI parser
-                    console.warn('Story UI parsing failed, falling back to AI parser:', storyResult.errors);
-                }
-            }
-            // Fall back to AI generated code parser
-            const result = parseAIGeneratedCode(code);
-            if (result.errors.length > 0) {
-                setLoadError(result.errors.join(', '));
-                return;
-            }
-            if (result.warnings.length > 0) {
-                setLoadWarnings(result.warnings);
-            }
-            loadFromAI(result.components);
-            if (result.warnings.length > 0) {
-                setShowLoadDialog(true);
-            }
-        }
-        catch (error) {
-            setLoadError(error instanceof Error ? error.message : 'Failed to parse code');
-        }
-    };
-    const handleExport = async () => {
-        if (onCodeExport && components.length > 0) {
-            try {
-                // Generate code and pass to callback
-                const { generateJSXCode } = await import('./CodeExporter/codeGenerator');
-                const code = generateJSXCode(components);
-                onCodeExport(code);
-            }
-            catch (error) {
-                console.error('Failed to generate code:', error);
-                openCodeModal();
-            }
-        }
-        else {
-            openCodeModal();
-        }
-    };
-    const paletteWidth = showPalette ? (compact ? 240 : 280) : 0;
-    const propertiesWidth = showProperties ? (compact ? 280 : 320) : 0;
-    return (_jsxs(_Fragment, { children: [_jsx(DndContext, { sensors: sensors, onDragStart: handleDragStart, onDragOver: handleDragOver, onDragEnd: handleDragEnd, onDragCancel: handleDragCancel, children: _jsxs(Box, { style: {
-                        display: 'flex',
-                        height,
-                        backgroundColor: '#f8f9fa',
-                        border: '1px solid #e9ecef',
-                        borderRadius: compact ? '8px' : '12px',
-                        overflow: 'hidden'
-                    }, children: [showPalette && (_jsxs(Box, { style: {
-                                width: paletteWidth,
-                                backgroundColor: 'white',
-                                borderRight: '1px solid #e9ecef',
-                                display: 'flex',
-                                flexDirection: 'column'
-                            }, children: [_jsxs(Box, { p: compact ? 'sm' : 'md', style: { borderBottom: '1px solid #e9ecef' }, children: [_jsx(Group, { justify: "space-between", mb: "xs", children: _jsx(Text, { size: compact ? 'sm' : 'md', fw: 600, children: "Components" }) }), _jsxs(Group, { gap: "xs", children: [_jsx(Button, { size: "xs", variant: "outline", onClick: clearCanvas, children: "Clear" }), _jsx(Button, { size: "xs", variant: "filled", onClick: handleExport, children: "Export" })] })] }), _jsx(Box, { style: { flex: 1, overflow: 'auto' }, children: _jsx(ComponentPalette, {}) })] })), _jsxs(Box, { style: { flex: 1, display: 'flex', flexDirection: 'column' }, children: [_jsx(Box, { p: compact ? 'sm' : 'md', style: { borderBottom: '1px solid #e9ecef', backgroundColor: 'white' }, children: _jsxs(Group, { justify: "space-between", children: [_jsx(Text, { size: compact ? 'sm' : 'md', fw: 600, children: "Canvas" }), !showPalette && (_jsxs(Group, { gap: "xs", children: [_jsx(Button, { size: "xs", variant: "outline", onClick: clearCanvas, children: "Clear" }), _jsx(Button, { size: "xs", variant: "filled", onClick: handleExport, children: "Export" })] }))] }) }), loadError && (_jsx(Box, { p: "sm", children: _jsx(Alert, { color: "red", title: "Parse Error", children: loadError }) })), _jsx(Box, { style: { flex: 1, overflow: 'auto' }, children: _jsx(Canvas, {}) })] }), showProperties && (_jsxs(Box, { style: {
-                                width: propertiesWidth,
-                                backgroundColor: 'white',
-                                borderLeft: '1px solid #e9ecef',
-                                display: 'flex',
-                                flexDirection: 'column'
-                            }, children: [_jsx(Box, { p: compact ? 'sm' : 'md', style: { borderBottom: '1px solid #e9ecef' }, children: _jsx(Text, { size: compact ? 'sm' : 'md', fw: 600, children: "Properties" }) }), _jsx(Box, { style: { flex: 1, overflow: 'auto' }, children: _jsx(PropertyEditor, {}) })] })), _jsx(CodeExporter, {})] }) }), _jsx(Modal, { opened: showLoadDialog, onClose: () => setShowLoadDialog(false), title: "Code Loaded with Warnings", size: "md", children: _jsxs(Stack, { gap: "md", children: [_jsx(Text, { children: "The code was successfully loaded into the Visual Builder, but there were some warnings:" }), _jsx(Box, { p: "md", style: { backgroundColor: '#fff3cd', borderRadius: '4px' }, children: loadWarnings.map((warning, index) => (_jsxs(Text, { size: "sm", c: "orange.8", children: ["\u2022 ", warning] }, index))) }), _jsx(Text, { size: "sm", c: "dimmed", children: "These warnings don't prevent you from editing the component, but you may want to review them." }), _jsx(Group, { justify: "flex-end", children: _jsx(Button, { onClick: () => setShowLoadDialog(false), children: "Continue Editing" }) })] }) })] }));
-};

package/dist/visual-builder/components/PropertyEditor/PropertyEditor.js

@@ -1,16 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Box, Text, Button, Group } from '@mantine/core';
-import { PropertyForm } from './PropertyForm';
-import { useVisualBuilderStore } from '../../store/visualBuilderStore';
-export const PropertyEditor = () => {
-    const { selectedComponent, removeComponent } = useVisualBuilderStore();
-    if (!selectedComponent) {
-        return (_jsx(Box, { p: "sm", children: _jsx(Text, { c: "dimmed", ta: "center", mt: "xl", children: "Select a component to edit its properties" }) }));
-    }
-    const handleDelete = () => {
-        if (selectedComponent) {
-            removeComponent(selectedComponent.id);
-        }
-    };
-    return (_jsxs(Box, { p: "sm", children: [_jsxs(Box, { mb: "lg", children: [_jsxs(Group, { justify: "space-between", align: "center", mb: "sm", children: [_jsx(Text, { fw: 600, size: "sm", children: selectedComponent.type }), _jsx(Button, { size: "xs", variant: "light", color: "red", onClick: handleDelete, children: "Delete" })] }), _jsxs(Text, { size: "xs", c: "dimmed", children: ["Component ID: ", selectedComponent.id] })] }), _jsx(PropertyForm, { componentId: selectedComponent.id, componentType: selectedComponent.type, currentProps: selectedComponent.props })] }));
-};

package/dist/visual-builder/components/PropertyEditor/PropertyForm.js

@@ -1,88 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState, useEffect } from 'react';
-import { Box, TextInput, Select, Switch, Text, Divider, Accordion, Group, Badge } from '@mantine/core';
-import { useVisualBuilderStore } from '../../store/visualBuilderStore';
-import { getComponentConfig } from '../../config/componentRegistry';
-import { useDebouncedCallback } from '@mantine/hooks';
-import { SpacingControl } from './SpacingControl';
-export const PropertyForm = ({ componentId, componentType, currentProps }) => {
-    const { updateComponent } = useVisualBuilderStore();
-    const config = getComponentConfig(componentType);
-    // Local state for inputs to prevent focus loss
-    const [localValues, setLocalValues] = useState({});
-    // Sync local values when currentProps changes
-    useEffect(() => {
-        setLocalValues(currentProps);
-    }, [currentProps]);
-    if (!config) {
-        return (_jsx(Text, { c: "dimmed", ta: "center", children: "No properties available for this component" }));
-    }
-    // Debounced update to store for text inputs
-    const debouncedUpdate = useDebouncedCallback((propertyName, value) => {
-        updateComponent(componentId, {
-            props: {
-                ...currentProps,
-                [propertyName]: value
-            }
-        });
-    }, 300);
-    // Immediate update for non-text inputs
-    const handleImmediatePropertyChange = (propertyName, value) => {
-        const newProps = { ...currentProps, [propertyName]: value };
-        setLocalValues(newProps);
-        updateComponent(componentId, {
-            props: newProps
-        });
-    };
-    // Handle text input changes with debouncing
-    const handleTextPropertyChange = (propertyName, value) => {
-        const newProps = { ...currentProps, [propertyName]: value };
-        setLocalValues(newProps);
-        debouncedUpdate(propertyName, value);
-    };
-    // Handle blur events to ensure immediate update
-    const handleTextBlur = (propertyName, value) => {
-        updateComponent(componentId, {
-            props: {
-                ...currentProps,
-                [propertyName]: value
-            }
-        });
-    };
-    // Group properties by category
-    const groupedProperties = config.properties.reduce((acc, property) => {
-        const category = property.category || 'general';
-        if (!acc[category]) {
-            acc[category] = [];
-        }
-        acc[category].push(property);
-        return acc;
-    }, {});
-    const renderPropertyInput = (property) => {
-        // Skip individual spacing properties as they'll be handled by SpacingControl
-        const spacingProps = ['m', 'mt', 'mr', 'mb', 'ml', 'mx', 'my', 'p', 'pt', 'pr', 'pb', 'pl', 'px', 'py'];
-        if (spacingProps.includes(property.name)) {
-            return null;
-        }
-        return (_jsxs(Box, { mb: "xs", children: [_jsxs(Group, { justify: "space-between", mb: "xs", children: [_jsx(Text, { size: "sm", fw: 500, children: property.name.charAt(0).toUpperCase() + property.name.slice(1) }), property.category && (_jsx(Badge, { size: "xs", variant: "light", color: "gray", children: property.category }))] }), property.description && (_jsx(Text, { size: "xs", c: "dimmed", mb: "xs", children: property.description })), property.type === 'string' && (_jsx(TextInput, { value: localValues[property.name] || '', onChange: (e) => handleTextPropertyChange(property.name, e.target.value), onBlur: (e) => handleTextBlur(property.name, e.target.value), placeholder: `Enter ${property.name}...`, size: "sm" })), property.type === 'number' && (_jsx(TextInput, { type: "number", value: localValues[property.name] || 0, onChange: (e) => handleTextPropertyChange(property.name, Number(e.target.value)), onBlur: (e) => handleTextBlur(property.name, Number(e.target.value)), placeholder: `Enter ${property.name}...`, size: "sm" })), property.type === 'boolean' && (_jsx(Switch, { checked: Boolean(localValues[property.name]), onChange: (e) => handleImmediatePropertyChange(property.name, e.target.checked), label: property.description || `Enable ${property.name}`, size: "sm" })), property.type === 'select' && property.options && (_jsx(Select, { value: String(localValues[property.name] !== undefined ? localValues[property.name] : property.defaultValue), onChange: (value) => {
-                        // Convert back to number if needed
-                        const finalValue = property.name === 'order' && value ? Number(value) : value;
-                        handleImmediatePropertyChange(property.name, finalValue);
-                    }, data: property.options.map(option => ({
-                        value: String(option),
-                        label: String(option)
-                    })), placeholder: `Select ${property.name}...`, size: "sm", clearable: true, allowDeselect: true })), property.type === 'color' && (_jsx(TextInput, { value: localValues[property.name] || '', onChange: (e) => handleTextPropertyChange(property.name, e.target.value), onBlur: (e) => handleTextBlur(property.name, e.target.value), placeholder: "Enter color (hex, rgb, or name)...", size: "sm" }))] }, property.name));
-    };
-    const categoryOrder = ['content', 'appearance', 'spacing', 'behavior'];
-    const orderedCategories = categoryOrder.filter(cat => groupedProperties[cat]);
-    const remainingCategories = Object.keys(groupedProperties).filter(cat => !categoryOrder.includes(cat));
-    const allCategories = [...orderedCategories, ...remainingCategories];
-    return (_jsx(Box, { children: _jsx(Accordion, { multiple: true, defaultValue: ['content', 'appearance', 'spacing'], children: allCategories.map((category) => (_jsxs(Accordion.Item, { value: category, children: [_jsx(Accordion.Control, { children: _jsxs(Group, { justify: "space-between", children: [_jsx(Text, { fw: 600, tt: "capitalize", children: category }), _jsx(Badge, { size: "xs", variant: "light", children: groupedProperties[category].length })] }) }), _jsx(Accordion.Panel, { children: category === 'spacing' ? (_jsx(SpacingControl, { values: localValues, onChange: handleImmediatePropertyChange })) : (groupedProperties[category]
-                            .map((property, propertyIndex) => {
-                            const renderedInput = renderPropertyInput(property);
-                            if (!renderedInput)
-                                return null;
-                            return (_jsxs(Box, { children: [renderedInput, propertyIndex < groupedProperties[category].length - 1 && (_jsx(Divider, { mb: "xs" }))] }, property.name));
-                        })
-                            .filter(Boolean)) })] }, category))) }) }));
-};

package/dist/visual-builder/components/PropertyEditor/SpacingControl.js

@@ -1,145 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from 'react';
-import { Box, Group, Text, ActionIcon, NumberInput, Select, Stack, Paper, Tooltip, Switch } from '@mantine/core';
-const SPACING_OPTIONS = ['0', 'xs', 'sm', 'md', 'lg', 'xl', 'auto'];
-export const SpacingControl = ({ values, onChange }) => {
-    const [marginLocked, setMarginLocked] = useState(false);
-    const [paddingLocked, setPaddingLocked] = useState(false);
-    const [marginXLocked, setMarginXLocked] = useState(false);
-    const [marginYLocked, setMarginYLocked] = useState(false);
-    const [paddingXLocked, setPaddingXLocked] = useState(false);
-    const [paddingYLocked, setPaddingYLocked] = useState(false);
-    const [useNumbers, setUseNumbers] = useState(false);
-    const handleChange = (property, value) => {
-        const finalValue = value === null || value === '' ? undefined : value;
-        onChange(property, finalValue);
-        // Handle locked states
-        if (marginLocked && property.startsWith('m') && !property.includes('x') && !property.includes('y')) {
-            const props = ['mt', 'mr', 'mb', 'ml'];
-            props.forEach(prop => {
-                if (prop !== property)
-                    onChange(prop, finalValue);
-            });
-        }
-        if (paddingLocked && property.startsWith('p') && !property.includes('x') && !property.includes('y')) {
-            const props = ['pt', 'pr', 'pb', 'pl'];
-            props.forEach(prop => {
-                if (prop !== property)
-                    onChange(prop, finalValue);
-            });
-        }
-        // Handle axis-specific locks
-        if (marginXLocked && (property === 'ml' || property === 'mr')) {
-            if (property === 'ml')
-                onChange('mr', finalValue);
-            if (property === 'mr')
-                onChange('ml', finalValue);
-        }
-        if (marginYLocked && (property === 'mt' || property === 'mb')) {
-            if (property === 'mt')
-                onChange('mb', finalValue);
-            if (property === 'mb')
-                onChange('mt', finalValue);
-        }
-        if (paddingXLocked && (property === 'pl' || property === 'pr')) {
-            if (property === 'pl')
-                onChange('pr', finalValue);
-            if (property === 'pr')
-                onChange('pl', finalValue);
-        }
-        if (paddingYLocked && (property === 'pt' || property === 'pb')) {
-            if (property === 'pt')
-                onChange('pb', finalValue);
-            if (property === 'pb')
-                onChange('pt', finalValue);
-        }
-    };
-    const renderSpacingInput = (property, placeholder) => {
-        const value = values[property];
-        if (useNumbers) {
-            return (_jsxs(Group, { gap: 2, children: [_jsx(NumberInput, { value: typeof value === 'number' ? value : undefined, onChange: (val) => handleChange(property, val), placeholder: placeholder, size: "xs", w: 50, min: 0, hideControls: true }), _jsx(ActionIcon, { size: "xs", variant: "light", onClick: () => {
-                            const currentVal = typeof value === 'number' ? value : 0;
-                            handleChange(property, currentVal + 4);
-                        }, children: "+" }), _jsx(ActionIcon, { size: "xs", variant: "light", onClick: () => {
-                            const currentVal = typeof value === 'number' ? value : 0;
-                            handleChange(property, Math.max(0, currentVal - 4));
-                        }, children: "-" })] }));
-        }
-        return (_jsx(Select, { value: value ? String(value) : null, onChange: (val) => handleChange(property, val), data: SPACING_OPTIONS, placeholder: placeholder, size: "xs", w: 75, clearable: true, allowDeselect: true, styles: {
-                dropdown: { zIndex: 1000 }
-            } }));
-    };
-    return (_jsxs(Stack, { gap: "xs", children: [_jsxs(Group, { justify: "space-between", gap: "xs", children: [_jsx(Text, { size: "xs", fw: 500, children: "Spacing" }), _jsx(Switch, { label: "Numbers", size: "xs", checked: useNumbers, onChange: (event) => setUseNumbers(event.currentTarget.checked) })] }), _jsxs(Paper, { p: 4, withBorder: true, children: [_jsxs(Group, { justify: "space-between", mb: 4, gap: "xs", children: [_jsx(Text, { size: "xs", fw: 500, c: "blue", children: "Margin" }), _jsxs(Group, { gap: 2, children: [_jsx(Tooltip, { label: "Lock X-axis (left & right)", children: _jsx(ActionIcon, { size: "xs", variant: marginXLocked ? "filled" : "light", color: "blue", onClick: () => setMarginXLocked(!marginXLocked), children: marginXLocked ? '🔒' : '🔓' }) }), _jsx(Tooltip, { label: "Lock Y-axis (top & bottom)", children: _jsx(ActionIcon, { size: "xs", variant: marginYLocked ? "filled" : "light", color: "blue", onClick: () => setMarginYLocked(!marginYLocked), children: marginYLocked ? '🔒' : '🔓' }) }), _jsx(Tooltip, { label: "Lock all sides", children: _jsx(ActionIcon, { size: "xs", variant: marginLocked ? "filled" : "light", color: "blue", onClick: () => setMarginLocked(!marginLocked), children: marginLocked ? '🔒' : '🔓' }) })] })] }), _jsxs(Box, { style: {
-                            position: 'relative',
-                            border: '1px dashed #228be6',
-                            borderRadius: '4px',
-                            padding: '25px',
-                            minHeight: '140px'
-                        }, children: [_jsx(Box, { style: {
-                                    position: 'absolute',
-                                    top: '-8px',
-                                    left: '50%',
-                                    transform: 'translateX(-50%)',
-                                    zIndex: 2
-                                }, children: renderSpacingInput('mt', 'top') }), _jsx(Box, { style: {
-                                    position: 'absolute',
-                                    right: '-20px',
-                                    top: '50%',
-                                    transform: 'translateY(-50%)',
-                                    zIndex: 2
-                                }, children: renderSpacingInput('mr', 'right') }), _jsx(Box, { style: {
-                                    position: 'absolute',
-                                    bottom: '-4px',
-                                    left: '50%',
-                                    transform: 'translateX(-50%)',
-                                    zIndex: 2
-                                }, children: renderSpacingInput('mb', 'bottom') }), _jsx(Box, { style: {
-                                    position: 'absolute',
-                                    left: '-20px',
-                                    top: '50%',
-                                    transform: 'translateY(-50%)',
-                                    zIndex: 2
-                                }, children: renderSpacingInput('ml', 'left') }), _jsxs(Box, { style: {
-                                    position: 'absolute',
-                                    top: '26%',
-                                    left: '50%',
-                                    transform: 'translateX(-50%)',
-                                    textAlign: 'center'
-                                }, children: [_jsx(Text, { size: "xs", c: "dimmed", mb: 2, children: "All" }), renderSpacingInput('m', 'all')] })] }), _jsxs(Group, { justify: "center", mt: 10, gap: "xs", children: [_jsxs(Box, { ta: "center", children: [_jsx(Text, { size: "xs", c: "dimmed", children: "X" }), renderSpacingInput('mx', 'x')] }), _jsxs(Box, { ta: "center", children: [_jsx(Text, { size: "xs", c: "dimmed", children: "Y" }), renderSpacingInput('my', 'y')] })] })] }), _jsxs(Paper, { p: 4, withBorder: true, children: [_jsxs(Group, { justify: "space-between", mb: 4, gap: "xs", children: [_jsx(Text, { size: "xs", fw: 500, c: "green", children: "Padding" }), _jsxs(Group, { gap: 2, children: [_jsx(Tooltip, { label: "Lock X-axis (left & right)", children: _jsx(ActionIcon, { size: "xs", variant: paddingXLocked ? "filled" : "light", color: "green", onClick: () => setPaddingXLocked(!paddingXLocked), children: paddingXLocked ? '🔒' : '🔓' }) }), _jsx(Tooltip, { label: "Lock Y-axis (top & bottom)", children: _jsx(ActionIcon, { size: "xs", variant: paddingYLocked ? "filled" : "light", color: "green", onClick: () => setPaddingYLocked(!paddingYLocked), children: paddingYLocked ? '🔒' : '🔓' }) }), _jsx(Tooltip, { label: "Lock all sides", children: _jsx(ActionIcon, { size: "xs", variant: paddingLocked ? "filled" : "light", color: "green", onClick: () => setPaddingLocked(!paddingLocked), children: paddingLocked ? '🔒' : '🔓' }) })] })] }), _jsxs(Box, { style: {
-                            position: 'relative',
-                            border: '1px dashed #40c057',
-                            borderRadius: '4px',
-                            padding: '25px',
-                            minHeight: '140px'
-                        }, children: [_jsx(Box, { style: {
-                                    position: 'absolute',
-                                    top: '-8px',
-                                    left: '50%',
-                                    transform: 'translateX(-50%)',
-                                    zIndex: 2
-                                }, children: renderSpacingInput('pt', 'top') }), _jsx(Box, { style: {
-                                    position: 'absolute',
-                                    right: '-20px',
-                                    top: '50%',
-                                    transform: 'translateY(-50%)',
-                                    zIndex: 2
-                                }, children: renderSpacingInput('pr', 'right') }), _jsx(Box, { style: {
-                                    position: 'absolute',
-                                    bottom: '-4px',
-                                    left: '50%',
-                                    transform: 'translateX(-50%)',
-                                    zIndex: 2
-                                }, children: renderSpacingInput('pb', 'bottom') }), _jsx(Box, { style: {
-                                    position: 'absolute',
-                                    left: '-20px',
-                                    top: '50%',
-                                    transform: 'translateY(-50%)',
-                                    zIndex: 2
-                                }, children: renderSpacingInput('pl', 'left') }), _jsxs(Box, { style: {
-                                    position: 'absolute',
-                                    top: '26%',
-                                    left: '50%',
-                                    transform: 'translateX(-50%)',
-                                    textAlign: 'center'
-                                }, children: [_jsx(Text, { size: "xs", c: "dimmed", mb: 2, children: "All" }), renderSpacingInput('p', 'all')] })] }), _jsxs(Group, { justify: "center", mt: 10, gap: "xs", children: [_jsxs(Box, { ta: "center", children: [_jsx(Text, { size: "xs", c: "dimmed", children: "X" }), renderSpacingInput('px', 'x')] }), _jsxs(Box, { ta: "center", children: [_jsx(Text, { size: "xs", c: "dimmed", children: "Y" }), renderSpacingInput('py', 'y')] })] })] })] }));
-};

package/dist/visual-builder/components/PropertyEditor/SpacingEditor.js

@@ -1,32 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from 'react';
-import { Box, Text, NumberInput, SegmentedControl, Switch, Group, Stack, Paper } from '@mantine/core';
-export const SpacingEditor = ({ type, values = {}, onChange }) => {
-    const [unit, setUnit] = useState('px');
-    const [useUniform, setUseUniform] = useState(true);
-    const handleValueChange = (side, value) => {
-        if (useUniform && side === 'all') {
-            onChange({
-                top: value,
-                right: value,
-                bottom: value,
-                left: value,
-                all: value
-            });
-        }
-        else {
-            onChange({
-                ...values,
-                [side]: value
-            });
-        }
-    };
-    const currentValue = useUniform
-        ? values.all || values.top || 0
-        : null;
-    return (_jsx(Paper, { p: "xs", withBorder: true, children: _jsxs(Stack, { gap: "xs", children: [_jsxs(Group, { justify: "space-between", children: [_jsx(Text, { size: "sm", fw: 500, c: type === 'margin' ? 'blue.6' : 'green.6', children: type.charAt(0).toUpperCase() + type.slice(1) }), _jsx(SegmentedControl, { size: "xs", value: unit, onChange: (value) => setUnit(value), data: [
-                                { label: 'px', value: 'px' },
-                                { label: 'rem', value: 'rem' },
-                                { label: '%', value: '%' }
-                            ] })] }), _jsx(Switch, { size: "xs", label: "Uniform spacing", checked: useUniform, onChange: (e) => setUseUniform(e.currentTarget.checked) }), useUniform ? (_jsx(NumberInput, { size: "xs", label: "All sides", value: currentValue, onChange: (value) => handleValueChange('all', value), suffix: unit, min: 0 })) : (_jsxs(Box, { children: [_jsxs(Group, { gap: "xs", mb: "xs", children: [_jsx(NumberInput, { size: "xs", label: "Top", value: values.top || 0, onChange: (value) => handleValueChange('top', value), suffix: unit, min: 0, style: { flex: 1 } }), _jsx(NumberInput, { size: "xs", label: "Right", value: values.right || 0, onChange: (value) => handleValueChange('right', value), suffix: unit, min: 0, style: { flex: 1 } })] }), _jsxs(Group, { gap: "xs", children: [_jsx(NumberInput, { size: "xs", label: "Bottom", value: values.bottom || 0, onChange: (value) => handleValueChange('bottom', value), suffix: unit, min: 0, style: { flex: 1 } }), _jsx(NumberInput, { size: "xs", label: "Left", value: values.left || 0, onChange: (value) => handleValueChange('left', value), suffix: unit, min: 0, style: { flex: 1 } })] })] }))] }) }));
-};