@stormlmd/form-builder 0.1.0

package/src/components/builder/SortableNode.tsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import { useSortable } from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+import { Box, type SxProps, type Theme } from '@mui/material';
+
+import { observer } from 'mobx-react-lite';
+import { formStore } from '../../store/FormStore';
+
+interface SortableNodeProps {
+    id: string;
+    children: React.ReactNode;
+    sx?: SxProps<Theme>;
+}
+
+export const SortableNode: React.FC<SortableNodeProps> = observer(({ id, children, sx }) => {
+    const {
+        attributes,
+        listeners,
+        setNodeRef,
+        transform,
+        transition,
+        isDragging,
+        isOver
+    } = useSortable({ id });
+
+    const style = {
+        transform: CSS.Transform.toString(transform),
+        transition,
+    };
+
+    return (
+        <Box
+            ref={setNodeRef}
+            style={style}
+            {...attributes}
+            {...listeners}
+            sx={{
+                display: 'flex',
+                flexDirection: 'column',
+                opacity: isDragging ? 0.5 : 1,
+                position: 'relative',
+                zIndex: isDragging ? 999 : 'auto',
+                boxSizing: 'border-box',
+                minHeight: '20px',
+                height: '100%', // Allow stretching
+                outline: isOver && !isDragging && !formStore.dropIndicator ? '1px dashed #4caf50' : undefined,
+                ...sx
+            }}
+        >
+            {children}
+        </Box>
+    );
+});

package/src/components/builder/Toolbox.tsx

@@ -0,0 +1,123 @@
+import React, { useState } from 'react';
+import { Box, List, ListItem, Tabs, Tab } from '@mui/material';
+import { formStore, type NodeType } from '../../store/FormStore';
+import { generateId } from '../../utils/idGenerator';
+import { DraggableTool } from './DraggableTool';
+import { useTranslation } from 'react-i18next';
+import TextFieldsIcon from '@mui/icons-material/TextFields';
+import NumbersIcon from '@mui/icons-material/Numbers';
+import CheckBoxIcon from '@mui/icons-material/CheckBox';
+import ArrowDropDownCircleIcon from '@mui/icons-material/ArrowDropDownCircle';
+import CalendarTodayIcon from '@mui/icons-material/CalendarToday';
+import CloudUploadIcon from '@mui/icons-material/CloudUpload';
+import FormatQuoteIcon from '@mui/icons-material/FormatQuote';
+import LabelIcon from '@mui/icons-material/Label';
+import HorizontalRuleIcon from '@mui/icons-material/HorizontalRule';
+import ViewColumnIcon from '@mui/icons-material/ViewColumn';
+import TabIcon from '@mui/icons-material/Tab';
+import RepeatIcon from '@mui/icons-material/Repeat';
+import TableChartIcon from '@mui/icons-material/TableChart';
+import LayersIcon from '@mui/icons-material/Layers';
+
+interface ToolItem {
+    type: NodeType;
+    label: string;
+    icon: React.ReactNode;
+    defaultProps?: Record<string, any>;
+}
+
+const TOOLS: ToolItem[] = [
+    { type: 'text', label: 'Text Field', icon: <TextFieldsIcon />, defaultProps: { label: 'New Text Field', width: 6 } },
+    { type: 'number', label: 'Number Field', icon: <NumbersIcon />, defaultProps: { label: 'New Number Field', width: 6 } },
+    { type: 'checkbox', label: 'Checkbox', icon: <CheckBoxIcon />, defaultProps: { label: 'New Checkbox', width: 6 } },
+    { type: 'select', label: 'Select', icon: <ArrowDropDownCircleIcon />, defaultProps: { label: 'New Select', width: 6, options: [{ label: 'Option 1', value: '1' }] } },
+    { type: 'date', label: 'Date Picker', icon: <CalendarTodayIcon />, defaultProps: { label: 'New Date', width: 6 } },
+    { type: 'file', label: 'File Upload', icon: <CloudUploadIcon />, defaultProps: { label: 'New File Upload', width: 6 } },
+    { type: 'richtext', label: 'Rich Text', icon: <FormatQuoteIcon />, defaultProps: { label: 'New Rich Text', width: 6 } },
+    { type: 'label', label: 'Label', icon: <LabelIcon />, defaultProps: { text: 'Static Tex', variant: 'body1', width: 6 } },
+];
+
+const LAYOUT_TOOLS: ToolItem[] = [
+    { type: 'divider', label: 'Divider', icon: <HorizontalRuleIcon />, defaultProps: { text: '' } },
+    { type: 'col', label: 'Column', icon: <ViewColumnIcon />, defaultProps: { cols: 6 } },
+    { type: 'tabs', label: 'Tabs', icon: <TabIcon />, defaultProps: {} },
+    { type: 'repeater', label: 'Repeater', icon: <RepeatIcon />, defaultProps: { label: 'Repeater', addLabel: 'addItem' } },
+    { type: 'table', label: 'Table', icon: <TableChartIcon />, defaultProps: { rows: 2, cols: 2, width: 12 } },
+    { type: 'paper', label: 'Paper', icon: <LayersIcon />, defaultProps: { label: 'Paper Group', padding: 2, variant: 'elevation', elevation: 1 } },
+];
+
+export const Toolbox: React.FC = () => {
+    const { t } = useTranslation();
+    const [activeTab, setActiveTab] = useState(0);
+
+    const handleAdd = (tool: ToolItem) => {
+        const parentId = formStore.selectedNodeId || 'root';
+        const newNode = {
+            id: generateId(tool.type),
+            type: tool.type,
+            props: { ...tool.defaultProps, name: generateId('field'), label: t(`toolbox.${tool.type}`) },
+            children: [] as any[]
+        };
+
+        // Special initialization for Table
+        if (tool.type === 'table') {
+            const rows = tool.defaultProps?.rows || 2;
+            const cols = tool.defaultProps?.cols || 2;
+            const cells = [];
+            for (let i = 0; i < rows * cols; i++) {
+                cells.push({
+                    id: generateId('cell'),
+                    type: 'cell',
+                    children: []
+                });
+            }
+            newNode.children = cells;
+        }
+
+        console.log('Toolbox adding node:', newNode);
+        formStore.addNode(parentId, newNode as any);
+    };
+
+    return (
+        <Box display="flex" flexDirection="column" height="100%">
+            <Box borderBottom={1} borderColor="divider">
+                <Tabs value={activeTab} onChange={(_, v) => setActiveTab(v)} variant="fullWidth">
+                    <Tab label={t("toolbox.fields")} sx={{ textTransform: 'none', minHeight: 48 }} />
+                    <Tab label={t("toolbox.layout")} sx={{ textTransform: 'none', minHeight: 48 }} />
+                </Tabs>
+            </Box>
+            <Box flexGrow={1} overflow="auto">
+                {activeTab === 0 && (
+                    <List sx={{ pt: 1 }}>
+                        {TOOLS.map((tool) => (
+                            <ListItem key={tool.type} disablePadding sx={{ px: 2, py: 0.5 }}>
+                                <DraggableTool
+                                    type={tool.type}
+                                    label={t(`toolbox.${tool.type}`)}
+                                    icon={tool.icon}
+                                    defaultProps={tool.defaultProps}
+                                    onClick={() => handleAdd(tool)}
+                                />
+                            </ListItem>
+                        ))}
+                    </List>
+                )}
+                {activeTab === 1 && (
+                    <List sx={{ pt: 1 }}>
+                        {LAYOUT_TOOLS.map((tool) => (
+                            <ListItem key={tool.type} disablePadding sx={{ px: 2, py: 0.5 }}>
+                                <DraggableTool
+                                    type={tool.type}
+                                    label={t(`toolbox.${tool.type}`)}
+                                    icon={tool.icon}
+                                    defaultProps={tool.defaultProps}
+                                    onClick={() => handleAdd(tool)}
+                                />
+                            </ListItem>
+                        ))}
+                    </List>
+                )}
+            </Box>
+        </Box>
+    );
+};

package/src/components/fields/CheckboxField.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import { Checkbox, FormControlLabel, FormGroup, Box, Typography } from '@mui/material';
+import { observer } from 'mobx-react-lite';
+import { formStore } from '../../store/FormStore';
+import type { FieldProps } from '../FieldRegistry';
+
+export const CheckboxField: React.FC<FieldProps> = observer(({ node, path, isEditing }) => {
+    const { name, label } = node.props || {};
+    const fullPath = path && name ? `${path}.${name}` : name;
+    const value = fullPath ? formStore.getValue(fullPath) : false;
+
+    return (
+        <Box mb={0.5}>
+            {isEditing && (
+                <Typography variant="caption" color="text.secondary" display="block" mb={0.2} ml={0.5}>
+                    {label || 'Checkbox'} ({name})
+                </Typography>
+            )}
+            <FormGroup>
+                <FormControlLabel
+                    control={
+                        <Checkbox
+                            size="small"
+                            checked={!!value}
+                            onChange={(e) => {
+                                if (fullPath) formStore.updateValue(fullPath, e.target.checked);
+                            }}
+                            disabled={isEditing || !!node.calculation?.formula}
+                        />
+                    }
+                    label={
+                        <Typography variant="body2" color="text.primary">
+                            {label || name || 'Checkbox'}
+                            {node.validation?.required && <span style={{ color: 'red' }}> *</span>}
+                        </Typography>
+                    }
+                />
+            </FormGroup>
+        </Box>
+    );
+});

package/src/components/fields/DateField.tsx

@@ -0,0 +1,56 @@
+import React from 'react';
+import { DatePicker } from '@mui/x-date-pickers/DatePicker';
+import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
+import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
+import { observer } from 'mobx-react-lite';
+import { formStore } from '../../store/FormStore';
+import type { FieldProps } from '../FieldRegistry';
+import { Box, Typography, TextField } from '@mui/material';
+
+export const DateField: React.FC<FieldProps> = observer(({ node, path, isEditing }) => {
+    const { name, label, placeholder } = node.props || {};
+    const fullPath = path && name ? `${path}.${name}` : name;
+    const value = fullPath ? formStore.getValue(fullPath) : null;
+    const error = fullPath ? formStore.errors[fullPath] : undefined;
+
+    const handleChange = (newValue: Date | null) => {
+        if (fullPath) {
+            const isoVal = newValue ? newValue.toISOString() : null;
+            formStore.updateField(fullPath, isoVal, node.validation);
+        }
+    };
+
+    // Create a Date object from value if string
+    const dateValue = value ? new Date(value) : null;
+
+    const content = (
+        <LocalizationProvider dateAdapter={AdapterDateFns}>
+            <DatePicker
+                value={dateValue}
+                onChange={handleChange}
+                inputFormat="dd-MM-yyyy"
+                renderInput={(params) => (
+                    <TextField
+                        {...params}
+                        fullWidth
+                        size="small"
+                        placeholder={placeholder}
+                        disabled={isEditing || !!node.calculation?.formula}
+                        error={!!error}
+                        helperText={error}
+                    />
+                )}
+            />
+        </LocalizationProvider>
+    );
+
+    return (
+        <Box mb={0.5}>
+            <Typography variant="caption" color="text.secondary" display="block" mb={0.2} ml={0.5}>
+                {label || (isEditing ? 'Date Field' : '')} {isEditing ? `(${name})` : ''}
+                {node.validation?.required && <span style={{ color: 'red' }}> *</span>}
+            </Typography>
+            {content}
+        </Box>
+    );
+});

package/src/components/fields/FileUploadField.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import { Box, Button, Typography, Input, FormHelperText } from '@mui/material';
+import CloudUploadIcon from '@mui/icons-material/CloudUpload';
+import { observer } from 'mobx-react-lite';
+import { formStore } from '../../store/FormStore';
+import type { FieldProps } from '../FieldRegistry';
+
+export const FileUploadField: React.FC<FieldProps> = observer(({ node, path, isEditing }) => {
+    const { name, label } = node.props || {};
+    const fullPath = path && name ? `${path}.${name}` : name;
+    const value = fullPath ? formStore.getValue(fullPath) : null;
+    const error = fullPath ? formStore.errors[fullPath] : undefined;
+
+    const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+        if (fullPath && event.target.files && event.target.files[0]) {
+            // Store file name for now (or base64 if needed, but keeping it simple)
+            formStore.updateField(fullPath, event.target.files[0].name, node.validation);
+        }
+    };
+
+    return (
+        <Box mb={1}>
+            <Typography variant="caption" color="text.secondary" display="block" mb={0.2} ml={0.5}>
+                {label || (isEditing ? 'File Upload' : '')} {isEditing ? `(${name})` : ''}
+                {node.validation?.required && <span style={{ color: 'red' }}> *</span>}
+            </Typography>
+            <Button
+                component="label"
+                variant="outlined"
+                startIcon={<CloudUploadIcon />}
+                fullWidth
+                disabled={isEditing || !!node.calculation?.formula}
+                color={error ? 'error' : 'primary'}
+            >
+                {value ? `Selected: ${value}` : (label || 'Upload File')}
+                <Input
+                    type="file"
+                    sx={{ display: 'none' }}
+                    onChange={handleChange}
+                />
+            </Button>
+            {error && <FormHelperText error>{error}</FormHelperText>}
+        </Box>
+    );
+});

package/src/components/fields/LabelField.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { Typography, Box } from '@mui/material';
+import { observer } from 'mobx-react-lite';
+import { formStore } from '../../store/FormStore';
+import type { FieldProps } from '../FieldRegistry';
+
+export const LabelField: React.FC<FieldProps> = observer(({ node }) => {
+    const { name, label = '', align = 'left', variant = 'body1' } = node.props || {};
+
+    const value = name ? formStore.getValue(name) : undefined;
+    const displayText = value !== undefined ? value : label;
+
+    return (
+        <Box width="100%" sx={{ whiteSpace: 'pre-wrap' }}>
+            <Typography variant={variant} align={align} color="text.primary">
+                {displayText}
+            </Typography>
+        </Box>
+    );
+});

package/src/components/fields/NumberField.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import { TextField as MuiTextField, Box, Typography } from '@mui/material';
+import { observer } from 'mobx-react-lite';
+import { formStore } from '../../store/FormStore';
+import type { FieldProps } from '../FieldRegistry';
+
+export const NumberField: React.FC<FieldProps> = observer(({ node, path, isEditing }) => {
+    const { name, label } = node.props || {};
+
+    const fullPath = path && name ? `${path}.${name}` : name;
+    const value = fullPath ? formStore.getValue(fullPath) : '';
+    const error = fullPath ? formStore.errors[fullPath] : undefined;
+
+    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        if (fullPath) {
+            const val = e.target.value === '' ? undefined : Number(e.target.value);
+            formStore.updateField(fullPath, val, node.validation);
+        }
+    };
+
+    return (
+        <Box mb={0.5}>
+            <Typography variant="caption" color="text.secondary" display="block" mb={0.2} ml={0.5}>
+                {label || (isEditing ? 'Number Field' : '')} {isEditing ? `(${name})` : ''}
+                {node.validation?.required && <span style={{ color: 'red' }}> *</span>}
+            </Typography>
+            <MuiTextField
+                type="number"
+                fullWidth
+                value={value ?? ''}
+                onChange={handleChange}
+                size="small"
+                disabled={isEditing || !!node.calculation?.formula}
+                error={!!error}
+                helperText={error}
+            />
+        </Box>
+    );
+});

package/src/components/fields/RichTextField.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import { TextField as MuiTextField, Typography, Box } from '@mui/material';
+import { observer } from 'mobx-react-lite';
+import { formStore } from '../../store/FormStore';
+import type { FieldProps } from '../FieldRegistry';
+
+export const RichTextField: React.FC<FieldProps> = observer(({ node, path, isEditing }) => {
+    const { name, label, placeholder } = node.props || {};
+    const fullPath = path && name ? `${path}.${name}` : name;
+    const value = fullPath ? formStore.getValue(fullPath) : '';
+    const error = fullPath ? formStore.errors[fullPath] : undefined;
+
+    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        if (fullPath) {
+            formStore.updateField(fullPath, e.target.value, node.validation);
+        }
+    };
+
+    return (
+        <Box mb={0.5}>
+            <Typography variant="caption" color="text.secondary" display="block" mb={0.2} ml={0.5}>
+                {label || (isEditing ? 'Rich Text' : '')} {isEditing ? `(${name})` : ''}
+                {node.validation?.required && <span style={{ color: 'red' }}> *</span>}
+            </Typography>
+            <MuiTextField
+                placeholder={placeholder}
+                fullWidth
+                multiline
+                minRows={4}
+                value={value}
+                onChange={handleChange}
+                size="small"
+                disabled={isEditing || !!node.calculation?.formula}
+                error={!!error}
+                helperText={error}
+            />
+        </Box>
+    );
+});

package/src/components/fields/SelectField.tsx

@@ -0,0 +1,64 @@
+import React from 'react';
+import { FormControl, Select, MenuItem, Box, Typography, FormHelperText, Autocomplete, TextField as MuiTextField } from '@mui/material';
+import { observer } from 'mobx-react-lite';
+import { formStore } from '../../store/FormStore';
+import type { FieldProps } from '../FieldRegistry';
+
+export const SelectField: React.FC<FieldProps> = observer(({ node, path, isEditing }) => {
+    const { name, label, options = [], enableAutocomplete = false, placeholder } = node.props || {};
+    const fullPath = path && name ? `${path}.${name}` : name;
+    const value = fullPath ? formStore.getValue(fullPath) : '';
+    const error = fullPath ? formStore.errors[fullPath] : undefined;
+
+    const handleChange = (val: any) => {
+        if (fullPath) {
+            formStore.updateField(fullPath, val, node.validation);
+        }
+    };
+
+    const renderSelect = () => (
+        <FormControl fullWidth size="small" disabled={isEditing || !!node.calculation?.formula} error={!!error}>
+            <Select
+                value={value}
+                onChange={(e) => handleChange(e.target.value)}
+            >
+                {options.map((opt: any, index: number) => (
+                    <MenuItem key={index} value={opt.value}>
+                        {opt.label}
+                    </MenuItem>
+                ))}
+            </Select>
+            {error && <FormHelperText>{error}</FormHelperText>}
+        </FormControl>
+    );
+
+    const renderAutocomplete = () => (
+        <Autocomplete
+            options={options}
+            getOptionLabel={(option: any) => option.label || ''}
+            value={options.find((opt: any) => opt.value === value) || null}
+            onChange={(_, newValue: any) => handleChange(newValue ? newValue.value : null)}
+            renderInput={(params) => (
+                <MuiTextField
+                    {...params}
+                    size="small"
+                    placeholder={placeholder}
+                    error={!!error}
+                    helperText={error}
+                    disabled={isEditing || !!node.calculation?.formula}
+                />
+            )}
+            disabled={isEditing || !!node.calculation?.formula}
+        />
+    );
+
+    return (
+        <Box mb={0.5}>
+            <Typography variant="caption" color="text.secondary" display="block" mb={0.2} ml={0.5}>
+                {label || (isEditing ? 'Select Field' : '')} {isEditing ? `(${name})` : ''}
+                {node.validation?.required && <span style={{ color: 'red' }}> *</span>}
+            </Typography>
+            {enableAutocomplete ? renderAutocomplete() : renderSelect()}
+        </Box>
+    );
+});

package/src/components/fields/TextField.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import { TextField as MuiTextField, Box, Typography } from '@mui/material';
+import { observer } from 'mobx-react-lite';
+import { formStore } from '../../store/FormStore';
+import type { FieldProps } from '../FieldRegistry';
+
+export const TextField: React.FC<FieldProps> = observer(({ node, path, isEditing }) => {
+    const { name, label, placeholder } = node.props || {};
+
+    // Resolve full path: path.name or just name
+    const fullPath = path && name ? `${path}.${name}` : name;
+    const value = fullPath ? (formStore.getValue(fullPath) ?? node.props?.value ?? '') : (node.props?.value ?? '');
+    const error = fullPath ? formStore.errors[fullPath] : undefined;
+
+    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        if (fullPath) {
+            formStore.updateField(fullPath, e.target.value, node.validation);
+        }
+    };
+
+    return (
+        <Box mb={0.5}>
+            <Typography variant="caption" color="text.secondary" display="block" mb={0.2} ml={0.5}>
+                {label || (isEditing ? 'Text Field' : '')} {isEditing ? `(${name})` : ''}
+                {node.validation?.required && <span style={{ color: 'red' }}> *</span>}
+            </Typography>
+            <MuiTextField
+                placeholder={placeholder}
+                fullWidth
+                value={value}
+                onChange={handleChange}
+                size="small"
+                disabled={isEditing || !!node.calculation?.formula}
+                error={!!error}
+                helperText={error}
+                onBlur={() => {
+                    if (fullPath && node.validation) {
+                        formStore.validateField(fullPath, value, node.validation);
+                    }
+                }}
+            />
+        </Box>
+    );
+});

package/src/components/layout/FormCol.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { Box } from '@mui/material';
+import { observer } from 'mobx-react-lite';
+import type { FieldProps } from '../FieldRegistry';
+import { FormRenderer } from '../FormRenderer';
+import { SortableContext, rectSortingStrategy } from '@dnd-kit/sortable';
+import { LayoutPlaceholder } from './LayoutPlaceholder';
+
+export const FormCol: React.FC<FieldProps> = observer(({ node, path, isEditing }) => {
+    const childrenIds = node.children?.map(c => c.id) || [];
+
+    const content = (
+        <Box display="flex" flexDirection="column" gap={0.5} width="100%" sx={{ flexGrow: 1, height: '100%' }}>
+            {node.children?.map(child => (
+                <FormRenderer key={child.id} node={child} path={path} isEditing={isEditing} />
+            ))}
+        </Box>
+    );
+
+    if (isEditing) {
+        return (
+            <LayoutPlaceholder isEditing={isEditing} label="Column" isEmpty={childrenIds.length === 0}>
+                <SortableContext items={childrenIds} strategy={rectSortingStrategy}>
+                    {content}
+                </SortableContext>
+            </LayoutPlaceholder>
+        );
+    }
+    return content;
+});

package/src/components/layout/FormDivider.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { Divider, Chip, Box } from '@mui/material';
+import { observer } from 'mobx-react-lite';
+import type { FieldProps } from '../FieldRegistry';
+
+export const FormDivider: React.FC<FieldProps> = observer(({ node }) => {
+    const { text, align = 'center' } = node.props || {};
+
+    // Map align to Divider textAlign if text is present
+    const dividerAlign = (align === 'left' ? 'left' : align === 'right' ? 'right' : 'center') as 'left' | 'right' | 'center';
+
+    return (
+        <Box width="100%" py={1}>
+            <Divider textAlign={text ? dividerAlign : undefined}>
+                {text && <Chip label={text} size="small" />}
+            </Divider>
+        </Box>
+    );
+});

package/src/components/layout/FormPaper.tsx

@@ -0,0 +1,85 @@
+import React from 'react';
+import { Paper, Box, Typography } from '@mui/material';
+import type { FieldProps } from '../FieldRegistry';
+import { observer } from 'mobx-react-lite';
+import { FormChildrenRenderer } from '../builder/FormChildrenRenderer';
+import { LayoutPlaceholder } from './LayoutPlaceholder';
+
+export const FormPaper: React.FC<FieldProps> = observer(({ node, path, isEditing }) => {
+    const { label, elevation: elevationProp, padding = 2, variant: variantProp } = node.props || {};
+    const childrenIds = node.children?.map(c => c.id) || [];
+
+    // In preview mode, default to cleaner look if no props specified
+    const elevation = isEditing ? (elevationProp ?? 1) : (elevationProp ?? 0);
+    const variant = isEditing ? (variantProp ?? 'elevation') : (variantProp ?? 'transparent');
+    const isTransparent = variant === 'transparent';
+
+    const childrenContent = (
+        <FormChildrenRenderer
+            parentId={node.id}
+            children={node.children}
+            isEditing={!!isEditing}
+            path={path}
+            layout="horizontal"
+        />
+    );
+
+    const paperContent = (
+        <>
+            {label && <Typography variant="h6" mb={1}>{label}</Typography>}
+            {isEditing ? (
+                <LayoutPlaceholder
+                    isEditing={isEditing}
+                    label="Paper Content"
+                    isEmpty={childrenIds.length === 0}
+                    sx={{
+                        flexGrow: 1,
+                        display: 'flex',
+                        flexDirection: 'column',
+                        // Ensure the placeholder itself allows children to span height if possible
+                        minHeight: childrenIds.length === 0 ? 120 : '100%'
+                    }}
+                >
+                    {childrenContent}
+                </LayoutPlaceholder>
+            ) : (
+                childrenContent
+            )}
+        </>
+    );
+
+    if (!isEditing && isTransparent) {
+        return (
+            <Box sx={{
+                p: padding,
+                height: '100%',
+                display: 'flex',
+                flexDirection: 'column',
+                mb: 1
+            }}>
+                {paperContent}
+            </Box>
+        );
+    }
+
+    return (
+        <Paper
+            variant={variant === 'outlined' ? 'outlined' : 'elevation'}
+            elevation={isTransparent ? 0 : (elevation ?? 1)}
+            sx={{
+                p: padding,
+                height: '100%',
+                display: 'flex',
+                flexDirection: 'column',
+                backgroundColor: isTransparent ? 'transparent' : undefined,
+                backgroundImage: isTransparent ? 'none' : undefined,
+                boxShadow: isTransparent ? 'none !important' : undefined,
+                border: isTransparent ? 'none !important' : undefined,
+                outline: isTransparent ? 'none !important' : undefined,
+                overflow: 'hidden' // Added to prevent inner margins from leaking out
+            }}
+        >
+            {paperContent}
+        </Paper>
+    );
+});