@stormlmd/form-builder 0.1.0

package/src/components/builder/PropertiesPanel.tsx

@@ -0,0 +1,858 @@
+import React from 'react';
+import { Box, Typography, TextField, FormControl, FormLabel, Select, MenuItem, Button, Popper, Paper, List, ListItemButton, ListItemText, ClickAwayListener, Tabs, Tab, InputLabel } from '@mui/material';
+import { observer } from 'mobx-react-lite';
+import { formStore } from '../../store/FormStore';
+import type { SchemaNode } from '../../store/FormStore';
+import DeleteIcon from '@mui/icons-material/Delete';
+import { useTranslation } from 'react-i18next';
+
+interface TabPanelProps {
+    children?: React.ReactNode;
+    index: number;
+    value: number;
+}
+
+function CustomTabPanel(props: TabPanelProps) {
+    const { children, value, index, ...other } = props;
+
+    return (
+        <Box
+            role="tabpanel"
+            hidden={value !== index}
+            id={`simple-tabpanel-${index}`}
+            aria-labelledby={`simple-tab-${index}`}
+            {...other}
+            sx={{
+                flexGrow: 1,
+                overflow: 'hidden',
+                display: value === index ? 'flex' : 'none',
+                flexDirection: 'column'
+            }}
+        >
+            {value === index && (
+                <Box sx={{ p: 2, pt: 2, flexGrow: 1, overflow: 'auto', display: 'flex', flexDirection: 'column', gap: 2 }}>
+                    {children}
+                </Box>
+            )}
+        </Box>
+    );
+}
+
+function a11yProps(index: number) {
+    return {
+        id: `simple-tab-${index}`,
+        'aria-controls': `simple-tabpanel-${index}`,
+    };
+}
+
+export const PropertiesPanel: React.FC = observer(() => {
+    const { t } = useTranslation();
+    const node = formStore.selectedNode;
+    const [tabValue, setTabValue] = React.useState(0);
+
+    const isLayout = node ? ['root', 'row', 'col', 'tabs', 'tab', 'paper', 'repeater', 'table', 'cell', 'divider'].includes(node.type) : false;
+
+    const allTabs = [
+        { label: t("properties.tabView"), index: 0, visible: true },
+        { label: t("properties.tabValidation"), index: 1, visible: !isLayout },
+        { label: t("properties.tabMapping"), index: 4, visible: !isLayout }, // Added mapping tab
+        { label: t("properties.tabLogic"), index: 2, visible: true },
+        { label: t("properties.tabCalc"), index: 3, visible: !isLayout },
+    ];
+
+    const visibleTabs = allTabs.filter(t => t.visible);
+
+    React.useEffect(() => {
+        if (tabValue >= visibleTabs.length) {
+            setTabValue(0);
+        }
+    }, [node?.id, visibleTabs.length]);
+
+    if (!node) {
+        return (
+            <Box p={2}>
+                <Typography variant="body2" color="text.secondary">
+                    {t('properties.noSelection')}
+                </Typography>
+            </Box>
+        );
+    }
+
+    // Autocomplete State
+    const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
+    const [filter, setFilter] = React.useState('');
+    const [cursorPos, setCursorPos] = React.useState(0);
+    // Track which field checks for autocomplete
+    const [activeFormulaField, setActiveFormulaField] = React.useState<'calculation' | 'defaultValue' | 'min' | 'max' | null>(null);
+
+    const activeGlobalIndex = visibleTabs[tabValue]?.index ?? 0;
+
+    const handleChange = (key: string, value: any) => {
+        formStore.updateNodeProps(node.id, { [key]: value });
+    };
+
+    const handleDelete = () => {
+        formStore.removeNode(node.id);
+        formStore.closePropertiesModal(); // Also close modal on delete
+    };
+
+    const handleTabChange = (_event: React.SyntheticEvent, newValue: number) => {
+        setTabValue(newValue);
+    };
+
+    const triggerAutocomplete = (event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>, fieldType: 'calculation' | 'defaultValue' | 'min' | 'max') => {
+        const val = event.target.value;
+        const selectionStart = event.target.selectionStart || 0;
+        setCursorPos(selectionStart);
+        setActiveFormulaField(fieldType);
+
+        // Detect {{ trigger
+        const textBeforeCursor = val.slice(0, selectionStart);
+        const match = textBeforeCursor.match(/\{\{([^}]*)$/);
+
+        if (match) {
+            setFilter(match[1]);
+            setAnchorEl(event.currentTarget);
+        } else {
+            setAnchorEl(null);
+        }
+    };
+
+    const handleSelectField = (name: string) => {
+        if (!node) return;
+        let currentContent = '';
+        if (activeFormulaField === 'calculation') {
+            currentContent = node.calculation?.formula || '';
+        } else if (activeFormulaField === 'defaultValue') {
+            currentContent = node.defaultValue || '';
+        } else if (activeFormulaField === 'min') {
+            currentContent = String(node.validation?.min || '');
+        } else if (activeFormulaField === 'max') {
+            currentContent = String(node.validation?.max || '');
+        }
+
+        const before = currentContent.slice(0, cursorPos);
+        const after = currentContent.slice(cursorPos);
+        const lastBraces = before.lastIndexOf('{{');
+
+        if (lastBraces !== -1) {
+            const newBefore = before.slice(0, lastBraces) + `{{${name}}}`;
+            const newContent = newBefore + after;
+
+            if (activeFormulaField === 'defaultValue') {
+                formStore.updateNode(node.id, { defaultValue: newContent });
+                formStore.applyDefaultValues();
+            } else if (activeFormulaField === 'calculation') {
+                formStore.updateNodeCalculation(node.id, { formula: newContent });
+            } else if (activeFormulaField === 'min') {
+                formStore.updateNodeValidation(node.id, { min: newContent });
+            } else if (activeFormulaField === 'max') {
+                formStore.updateNodeValidation(node.id, { max: newContent });
+            }
+            setCursorPos(newBefore.length);
+        }
+        setAnchorEl(null);
+    };
+
+    const FormulaHints = ({ fieldType }: { fieldType: 'calculation' | 'defaultValue' | 'min' | 'max' }) => {
+        const insertText = (text: string) => {
+            let current = '';
+            if (fieldType === 'calculation') current = node.calculation?.formula || '';
+            else if (fieldType === 'defaultValue') current = node.defaultValue || '';
+            else if (fieldType === 'min') current = String(node.validation?.min || '');
+            else if (fieldType === 'max') current = String(node.validation?.max || '');
+
+            const newVal = current + text;
+            if (fieldType === 'calculation') formStore.updateNodeCalculation(node.id, { formula: newVal });
+            else if (fieldType === 'defaultValue') {
+                formStore.updateNode(node.id, { defaultValue: newVal });
+                formStore.applyDefaultValues();
+            }
+            else if (fieldType === 'min') formStore.updateNodeValidation(node.id, { min: newVal });
+            else if (fieldType === 'max') formStore.updateNodeValidation(node.id, { max: newVal });
+        };
+
+        return (
+            <Box mt={1} display="flex" flexWrap="wrap" gap={0.5}>
+                <Typography variant="caption" width="100%" color="text.secondary">{t("properties.hints")}</Typography>
+                {['today', 'now', ...formStore.getAllFieldNames()]
+                    .filter(name => name !== node.props?.name)
+                    .map(name => (
+                        <Button
+                            key={name}
+                            size="small"
+                            variant="outlined"
+                            sx={{ textTransform: 'none', px: 1, py: 0, fontSize: '0.7rem' }}
+                            onClick={() => insertText(`{{${name}}}`)}
+                        >
+                            {name}
+                        </Button>
+                    ))}
+
+                <Box width="100%" mt={1}>
+                    <Typography variant="caption" color="text.secondary">{t("properties.functions") || "Functions"}</Typography>
+                </Box>
+                {['IF()', 'AND()', 'OR()', 'NOT()', 'ABS()', 'ROUND()'].map(func => (
+                    <Button
+                        key={func}
+                        size="small"
+                        variant="outlined"
+                        color="secondary"
+                        sx={{ textTransform: 'none', px: 1, py: 0, fontSize: '0.7rem' }}
+                        onClick={() => insertText(func)}
+                    >
+                        {func}
+                    </Button>
+                ))}
+            </Box>
+        );
+    };
+
+    return (
+        <Box display="flex" flexDirection="column" height="100%">
+            {/* Unified Autocomplete Popper */}
+            <Popper open={Boolean(anchorEl)} anchorEl={anchorEl} placement="bottom-start" style={{ zIndex: 1500 }}>
+                <ClickAwayListener onClickAway={() => setAnchorEl(null)}>
+                    <Paper sx={{ mt: 1, maxHeight: 200, overflow: 'auto', minWidth: 200 }}>
+                        <List dense>
+                            {['today', 'now', ...formStore.getAllFieldNames()]
+                                .filter(name => name !== node.props?.name && name.toLowerCase().includes(filter.toLowerCase()))
+                                .map(name => (
+                                    <ListItemButton key={name} onClick={() => handleSelectField(name)}>
+                                        <ListItemText
+                                            primary={name}
+                                            secondary={name === 'today' || name === 'now' ? 'System variable' : `{{${name}}}`}
+                                            primaryTypographyProps={{ variant: 'body2' }}
+                                        />
+                                    </ListItemButton>
+                                ))}
+                        </List>
+                    </Paper>
+                </ClickAwayListener>
+            </Popper>
+
+            {/* Header always visible */}
+            <Box p={2} borderBottom={1} borderColor="divider" display="flex" alignItems="center" justifyContent="space-between" bgcolor="background.default">
+                <Box>
+                    <Typography variant="subtitle1" fontWeight="bold">{t('properties.title')}</Typography>
+                    <Typography variant="caption" color="text.secondary">
+                        {node.type.toUpperCase()} | ID: {node.id}
+                    </Typography>
+                </Box>
+                <Button
+                    size="small"
+                    color="error"
+                    startIcon={<DeleteIcon />}
+                    onClick={handleDelete}
+                >
+                    {t("properties.delete")}
+                </Button>
+            </Box>
+
+            <Box borderBottom={1} borderColor="divider" mb={0.5}>
+                <Tabs value={tabValue} onChange={handleTabChange} aria-label="properties tabs" variant="fullWidth">
+                    {visibleTabs.map((tab, i) => (
+                        <Tab key={tab.index} label={tab.label} {...a11yProps(i)} />
+                    ))}
+                </Tabs>
+            </Box>
+
+            {/* View Tab */}
+            <CustomTabPanel value={activeGlobalIndex} index={0}>
+                {/* Common Props */}
+                {node.type !== 'root' && (
+                    <Box mb={0.5}>
+                        {formStore.availableApiColumns.length > 0 ? (
+                            <FormControl fullWidth size="small">
+                                <InputLabel>{t('properties.fieldId')}</InputLabel>
+                                <Select
+                                    label={t('properties.fieldId')}
+                                    value={node.props?.name || ''}
+                                    onChange={(e) => {
+                                        const colId = e.target.value;
+                                        const col = formStore.availableApiColumns.find(c => c.id.toString() === colId);
+                                        if (col) {
+                                            formStore.updateNodeProps(node.id, {
+                                                name: col.id.toString(),
+                                                label: col.colTitle,
+                                                apiColumnName: col.colName
+                                            });
+                                            // Enforce numeric validation based on API type
+                                            if (node.type === 'number') {
+                                                formStore.updateNodeValidation(node.id, {
+                                                    integer: col.colType === 'INT'
+                                                });
+                                            }
+                                        } else {
+                                            handleChange('name', colId);
+                                        }
+                                    }}
+                                >
+                                    <MenuItem value=""><em>None</em></MenuItem>
+                                    {formStore.availableApiColumns
+                                        .filter(col => {
+                                            // 1. Type Compatibility Check
+                                            const compatibleTypes: Record<string, string[]> = {
+                                                'text': ['STRING'],
+                                                'number': ['INT', 'FLOAT'],
+                                                'checkbox': ['BOOLEAN'],
+                                                'date': ['TIMESTAMP', 'TIMESTAMP_2'],
+                                                'file': ['FILE', 'FILE_SET'],
+                                                'select': ['REF']
+                                            };
+                                            const allowed = compatibleTypes[node.type] || [];
+                                            if (!allowed.includes(col.colType)) return false;
+
+                                            // 2. Uniqueness Check: Check if this column ID is used by ANY OTHER node
+                                            const isUsedByOther = formStore.getAllNodes().some((n: SchemaNode) =>
+                                                n.id !== node.id && n.props?.name === col.id.toString()
+                                            );
+                                            return !isUsedByOther;
+                                        })
+                                        .map(col => (
+                                            <MenuItem key={col.id} value={col.id.toString()}>
+                                                {col.colTitle} ({col.colName})
+                                            </MenuItem>
+                                        ))
+                                    }
+                                </Select>
+                                <Typography variant="caption" color="text.secondary">
+                                    {t('properties.fieldName')}
+                                </Typography>
+                            </FormControl>
+                        ) : (
+                            <TextField
+                                label={t('properties.fieldId')}
+                                size="small"
+                                fullWidth
+                                value={node.props?.name || ''}
+                                onChange={(e) => handleChange('name', e.target.value)}
+                                helperText={t('properties.fieldName')}
+                            />
+                        )}
+                    </Box>
+                )}
+
+                <Box mb={0.5}>
+                    <TextField
+                        label={node.type === 'root' ? t("properties.formTitle") : (t('properties.label') || "Label")}
+                        size="small"
+                        fullWidth
+                        multiline={node.type === 'label'}
+                        rows={node.type === 'label' ? 3 : 1}
+                        value={node.props?.label || ''}
+                        onChange={(e) => handleChange('label', e.target.value)}
+                    />
+                </Box>
+
+                <Box mb={2}>
+                    <Typography variant="caption" color="text.secondary" display="block" mb={0.5}>
+                        {t("properties.defaultValue")}
+                    </Typography>
+                    {node.type === 'select' ? (
+                        <FormControl fullWidth size="small">
+                            <Select
+                                value={node.defaultValue ?? ''}
+                                onChange={(e) => {
+                                    formStore.updateNode(node.id, { defaultValue: e.target.value });
+                                    formStore.applyDefaultValues();
+                                }}
+                                displayEmpty
+                            >
+                                <MenuItem value=""><em>{t('properties.none')}</em></MenuItem>
+                                {(node.props?.options || []).map((opt: any, idx: number) => (
+                                    <MenuItem key={idx} value={opt.value}>
+                                        {opt.label || <em>{t('properties.empty')}</em>}
+                                    </MenuItem>
+                                ))}
+                            </Select>
+                        </FormControl>
+                    ) : (
+                        <>
+                            <TextField
+                                size="small"
+                                fullWidth
+                                value={node.defaultValue ?? ''}
+                                onChange={(e) => {
+                                    const val = e.target.value;
+                                    formStore.updateNode(node.id, { defaultValue: val });
+                                    formStore.applyDefaultValues();
+                                    triggerAutocomplete(e, 'defaultValue');
+                                }}
+                                onKeyUp={(e) => {
+                                    const target = e.target as HTMLInputElement;
+                                    setCursorPos(target.selectionStart || 0);
+                                }}
+                            />
+                            <FormulaHints fieldType="defaultValue" />
+                        </>
+                    )}
+                </Box>
+
+                {node.type !== 'root' && (
+                    <FormControl fullWidth size="small">
+                        <FormLabel>{t("properties.width")}</FormLabel>
+                        <Select
+                            value={node.props?.width ?? node.props?.cols ?? 12}
+                            onChange={(e) => handleChange('width', Number(e.target.value))}
+                        >
+                            {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12].map(col => (
+                                <MenuItem key={col} value={col}>{col} / 12</MenuItem>
+                            ))}
+                        </Select>
+                    </FormControl>
+                )}
+
+                {/* Type Specific Props */}
+                {(['text', 'number', 'select'].includes(node.type)) && (
+                    <TextField
+                        label={t('properties.placeholder')}
+                        size="small"
+                        fullWidth
+                        value={node.props?.placeholder || ''}
+                        onChange={(e) => handleChange('placeholder', e.target.value)}
+                    />
+                )}
+
+                {node.type === 'select' && (
+                    <Box display="flex" flexDirection="column" gap={2} mt={2}>
+                        <TextField
+                            label={t('properties.selectOptions')}
+                            multiline
+                            rows={6}
+                            size="small"
+                            fullWidth
+                            disabled={!!node.props?.dictionaryInfo}
+                            value={(node.props?.options || []).map((opt: any) => opt.label).join('\n')}
+                            onChange={(e) => {
+                                const lines = e.target.value.split('\n');
+                                // Only filter out the LAST empty line if it was just created by pressing Enter
+                                // but allow internal empty lines.
+                                const newOptions = lines.map(line => ({ label: line, value: line }));
+                                handleChange('options', newOptions);
+                            }}
+                            helperText={node.props?.dictionaryInfo
+                                ? "Options are managed by API dictionary"
+                                : t('properties.selectOptionsHelper')}
+                        />
+                        <Box display="flex" alignItems="center" mt={1}>
+                            <input
+                                type="checkbox"
+                                checked={node.props?.enableAutocomplete || false}
+                                onChange={(e) => handleChange('enableAutocomplete', e.target.checked)}
+                                style={{ marginRight: 8 }}
+                            />
+                            <Typography variant="body2">{t('properties.enableAutocomplete')}</Typography>
+                        </Box>
+                    </Box>
+                )}
+
+                {node.type === 'repeater' && (
+                    <TextField
+                        label={t('properties.addLabel')}
+                        size="small"
+                        fullWidth
+                        value={node.props?.addLabel || ''}
+                        onChange={(e) => handleChange('addLabel', e.target.value)}
+                    />
+                )}
+
+                {node.type === 'tabs' && (
+                    <Button
+                        variant="outlined"
+                        fullWidth
+                        onClick={() => {
+                            const newTabId = `tab-${Math.random().toString(36).substr(2, 9)}`;
+                            formStore.addNode(node.id, {
+                                id: newTabId,
+                                type: 'tab',
+                                props: {},
+                                children: []
+                            });
+                        }}
+                    >
+                        {t("properties.addTab")}
+                    </Button>
+                )}
+
+                {/* Typography / Label Props */}
+                {(node.type === 'label' || node.type === 'root') && (
+                    node.type === 'label' && (
+                        <Box display="flex" flexDirection="column" gap={2}>
+                            <FormControl fullWidth size="small">
+                                <FormLabel>{t("properties.typography")}</FormLabel>
+                                <Select
+                                    value={node.props?.variant || 'body1'}
+                                    onChange={(e) => handleChange('variant', e.target.value)}
+                                >
+                                    <MenuItem value="h1">Heading 1</MenuItem>
+                                    <MenuItem value="h2">Heading 2</MenuItem>
+                                    <MenuItem value="h3">Heading 3</MenuItem>
+                                    <MenuItem value="h4">Heading 4</MenuItem>
+                                    <MenuItem value="h5">Heading 5</MenuItem>
+                                    <MenuItem value="h6">Heading 6</MenuItem>
+                                    <MenuItem value="body1">Body 1</MenuItem>
+                                    <MenuItem value="body2">Body 2</MenuItem>
+                                    <MenuItem value="caption">Caption</MenuItem>
+                                </Select>
+                            </FormControl>
+                            <FormControl fullWidth size="small">
+                                <FormLabel>{t("properties.alignment")}</FormLabel>
+                                <Select
+                                    value={node.props?.align || 'left'}
+                                    onChange={(e) => handleChange('align', e.target.value)}
+                                >
+                                    <MenuItem value="left">{t('properties.alignLeft')}</MenuItem>
+                                    <MenuItem value="center">{t('properties.alignCenter')}</MenuItem>
+                                    <MenuItem value="right">{t('properties.alignRight')}</MenuItem>
+                                    <MenuItem value="justify">{t('properties.alignJustify')}</MenuItem>
+                                </Select>
+                            </FormControl>
+                        </Box>
+                    )
+                )}
+
+                {node.type === 'divider' && (
+                    <Box display="flex" flexDirection="column" gap={2}>
+                        <TextField
+                            label={t('properties.dividerText')}
+                            size="small"
+                            fullWidth
+                            value={node.props?.text || ''}
+                            onChange={(e) => handleChange('text', e.target.value)}
+                        />
+                        <FormControl fullWidth size="small">
+                            <FormLabel>{t('properties.alignment')}</FormLabel>
+                            <Select
+                                value={node.props?.align || 'center'}
+                                onChange={(e) => handleChange('align', e.target.value)}
+                            >
+                                <MenuItem value="left">{t('properties.alignLeft')}</MenuItem>
+                                <MenuItem value="center">{t('properties.alignCenter')}</MenuItem>
+                                <MenuItem value="right">{t('properties.alignRight')}</MenuItem>
+                            </Select>
+                        </FormControl>
+                    </Box>
+                )}
+
+                {node.type === 'table' && (
+                    <Box display="flex" gap={1}>
+                        <TextField
+                            label={t('properties.rows') || "Rows"}
+                            type="number"
+                            size="small"
+                            fullWidth
+                            value={node.props?.rows || 2}
+                            onChange={(e) => {
+                                const newRows = parseInt(e.target.value, 10) || 1;
+                                formStore.resizeTable(node.id, newRows, node.props?.cols || 2);
+                            }}
+                        />
+                        <TextField
+                            label={t('properties.cols') || "Cols"}
+                            type="number"
+                            size="small"
+                            fullWidth
+                            value={node.props?.cols || 2}
+                            onChange={(e) => {
+                                const newCols = parseInt(e.target.value, 10) || 1;
+                                formStore.resizeTable(node.id, node.props?.rows || 2, newCols);
+                            }}
+                        />
+                    </Box>
+                )}
+
+                {['paper', 'tabs', 'tab'].includes(node.type) && (
+                    <Box display="flex" flexDirection="column" gap={2}>
+                        <FormControl fullWidth size="small">
+                            <FormLabel>{t('properties.styleVariant')}</FormLabel>
+                            <Select
+                                value={node.props?.variant || 'elevation'}
+                                onChange={(e) => handleChange('variant', e.target.value)}
+                            >
+                                <MenuItem value="elevation">{t('properties.styleElevated')}</MenuItem>
+                                <MenuItem value="outlined">{t('properties.styleOutlined')}</MenuItem>
+                                <MenuItem value="transparent">{t('properties.styleTransparent')}</MenuItem>
+                            </Select>
+                        </FormControl>
+                        {(!node.props?.variant || node.props?.variant === 'elevation') && (
+                            <TextField
+                                label={t('properties.elevationDepth')}
+                                type="number"
+                                size="small"
+                                fullWidth
+                                value={node.props?.elevation ?? 1}
+                                onChange={(e) => handleChange('elevation', Number(e.target.value))}
+                            />
+                        )}
+                        <TextField
+                            label={t('properties.padding') || "Padding"}
+                            type="number"
+                            size="small"
+                            fullWidth
+                            value={node.props?.padding ?? 2}
+                            onChange={(e) => handleChange('padding', Number(e.target.value))}
+                        />
+                    </Box>
+                )}
+            </CustomTabPanel>
+
+            {/* Validation Tab */}
+            <CustomTabPanel value={activeGlobalIndex} index={1}>
+                <Box display="flex" alignItems="center" mb={1}>
+                    <input
+                        type="checkbox"
+                        checked={node.validation?.required || false}
+                        onChange={(e) => formStore.updateNodeValidation(node.id, { required: e.target.checked })}
+                        style={{ marginRight: 8 }}
+                    />
+                    <Typography variant="body2">{t('properties.required')}</Typography>
+                </Box>
+
+                {node.type === 'text' && (
+                    <Box display="flex" alignItems="center" mb={1}>
+                        <input
+                            type="checkbox"
+                            checked={node.validation?.email || false}
+                            onChange={(e) => formStore.updateNodeValidation(node.id, { email: e.target.checked })}
+                            style={{ marginRight: 8 }}
+                        />
+                        <Typography variant="body2">{t("properties.emailFormat")}</Typography>
+                    </Box>
+                )}
+
+                {node.type === 'number' && (
+                    <Box display="flex" alignItems="center" mb={1}>
+                        <input
+                            type="checkbox"
+                            checked={node.validation?.integer || false}
+                            disabled={!!node.props?.name && formStore.availableApiColumns.some(c => c.id.toString() === node.props?.name)}
+                            onChange={(e) => formStore.updateNodeValidation(node.id, { integer: e.target.checked })}
+                            style={{ marginRight: 8 }}
+                        />
+                        <Typography variant="body2">
+                            {t("properties.integer")}
+                            {node.props?.name && formStore.availableApiColumns.some(c => c.id.toString() === node.props?.name) && (
+                                <Typography variant="caption" color="text.secondary" ml={1}>
+                                    (Enforced by API)
+                                </Typography>
+                            )}
+                        </Typography>
+                    </Box>
+                )}
+
+                {node.type === 'number' && (
+                    <Box display="flex" flexDirection="column" gap={1}>
+                        <Box mb={1}>
+                            <TextField
+                                label={t("properties.minValue")}
+                                size="small"
+                                fullWidth
+                                value={node.validation?.min ?? ''}
+                                onChange={(e) => {
+                                    const val = e.target.value;
+                                    formStore.updateNodeValidation(node.id, { min: val });
+                                    triggerAutocomplete(e, 'min');
+                                }}
+                                onKeyUp={(e) => {
+                                    const target = e.target as HTMLInputElement;
+                                    setCursorPos(target.selectionStart || 0);
+                                }}
+                                placeholder="e.g. 10 or {{otherField}} + 5"
+                            />
+                            <FormulaHints fieldType="min" />
+                        </Box>
+                        <Box mb={1}>
+                            <TextField
+                                label={t("properties.maxValue")}
+                                size="small"
+                                fullWidth
+                                value={node.validation?.max ?? ''}
+                                onChange={(e) => {
+                                    const val = e.target.value;
+                                    formStore.updateNodeValidation(node.id, { max: val });
+                                    triggerAutocomplete(e, 'max');
+                                }}
+                                onKeyUp={(e) => {
+                                    const target = e.target as HTMLInputElement;
+                                    setCursorPos(target.selectionStart || 0);
+                                }}
+                                placeholder="e.g. 100 or {{otherField}} * 2"
+                            />
+                            <FormulaHints fieldType="max" />
+                        </Box>
+                    </Box>
+                )}
+
+                {node.type === 'text' && (
+                    <Box display="flex" flexDirection="column" gap={1}>
+                        <TextField
+                            label={t("properties.minLength")}
+                            type="number"
+                            size="small"
+                            fullWidth
+                            value={node.validation?.minLength ?? ''}
+                            onChange={(e) => {
+                                const val = e.target.value === '' ? undefined : Number(e.target.value);
+                                formStore.updateNodeValidation(node.id, { minLength: val });
+                            }}
+                        />
+                        <TextField
+                            label={t("properties.maxLength")}
+                            type="number"
+                            size="small"
+                            fullWidth
+                            value={node.validation?.maxLength ?? ''}
+                            onChange={(e) => {
+                                const val = e.target.value === '' ? undefined : Number(e.target.value);
+                                formStore.updateNodeValidation(node.id, { maxLength: val });
+                            }}
+                        />
+                        <TextField
+                            label={t("properties.regex")}
+                            size="small"
+                            fullWidth
+                            value={node.validation?.pattern || ''}
+                            onChange={(e) => formStore.updateNodeValidation(node.id, { pattern: e.target.value })}
+                        />
+                    </Box>
+                )}
+            </CustomTabPanel>
+
+            {/* Logic Tab */}
+            <CustomTabPanel value={activeGlobalIndex} index={2}>
+                <Box display="flex" flexDirection="column" gap={1.5}>
+                    <FormControl fullWidth size="small">
+                        <FormLabel>{t('properties.fieldNameCheck')}</FormLabel>
+                        <Select
+                            value={node.condition?.field || ''}
+                            onChange={(e) => {
+                                const field = e.target.value;
+                                if (!field) {
+                                    formStore.updateNodeCondition(node.id, undefined);
+                                } else {
+                                    const newCond = { ...(node.condition || { op: 'eq', value: '' }), field };
+                                    formStore.updateNodeCondition(node.id, newCond as any);
+                                }
+                            }}
+                            displayEmpty
+                        >
+                            <MenuItem value=""><em>None</em></MenuItem>
+                            {formStore.getAllFieldNames().filter(name => name !== node.props?.name).map(name => (
+                                <MenuItem key={name} value={name}>{name}</MenuItem>
+                            ))}
+                        </Select>
+                        <Typography variant="caption" color="text.secondary">
+                            {t('properties.fieldVisibilityHelper')}
+                        </Typography>
+                    </FormControl>
+
+                    {node.condition && (
+                        <>
+                            <FormControl fullWidth size="small">
+                                <FormLabel>{t('properties.operator')}</FormLabel>
+                                <Select
+                                    value={node.condition.op}
+                                    onChange={(e) => formStore.updateNodeCondition(node.id, { ...node.condition!, op: e.target.value as any })}
+                                >
+                                    <MenuItem value="eq">{t('properties.opEq')}</MenuItem>
+                                    <MenuItem value="neq">{t('properties.opNeq')}</MenuItem>
+                                    <MenuItem value="gt">{t('properties.opGt')}</MenuItem>
+                                    <MenuItem value="lt">{t('properties.opLt')}</MenuItem>
+                                    <MenuItem value="contains">{t('properties.opContains')}</MenuItem>
+                                </Select>
+                            </FormControl>
+
+                            <TextField
+                                label={t("properties.value")}
+                                size="small"
+                                fullWidth
+                                value={node.condition.value ?? ''}
+                                onChange={(e) => {
+                                    let val: any = e.target.value;
+                                    // Try to convert to boolean or number if possible for easier matching
+                                    if (val === 'true') val = true;
+                                    else if (val === 'false') val = false;
+                                    else if (!isNaN(Number(val)) && val !== '') val = Number(val);
+
+                                    formStore.updateNodeCondition(node.id, { ...node.condition!, value: val });
+                                }}
+                            />
+
+                            <Button
+                                variant="outlined"
+                                size="small"
+                                color="secondary"
+                                onClick={() => formStore.updateNodeCondition(node.id, undefined)}
+                            >
+                                {t("properties.clearCondition")}
+                            </Button>
+                        </>
+                    )}
+                </Box>
+            </CustomTabPanel>
+
+            {/* Calculation Tab */}
+            <CustomTabPanel value={activeGlobalIndex} index={3}>
+                <TextField
+                    label={t("properties.formula")}
+                    size="small"
+                    fullWidth
+                    placeholder="e.g. {{price}} * {{qty}}"
+                    value={node.calculation?.formula || ''}
+                    onChange={(e) => {
+                        const val = e.target.value;
+                        formStore.updateNodeCalculation(node.id, val ? { formula: val } : undefined);
+                        triggerAutocomplete(e, 'calculation');
+                    }}
+                    onKeyUp={(e) => {
+                        const target = e.target as HTMLInputElement;
+                        setCursorPos(target.selectionStart || 0);
+                    }}
+                    helperText={t("properties.formulaHelper")}
+                />
+                <FormulaHints fieldType="calculation" />
+            </CustomTabPanel>
+
+            {/* API Mapping Tab */}
+            <CustomTabPanel value={activeGlobalIndex} index={4}>
+                <Typography variant="body2" color="text.secondary" gutterBottom>
+                    Map this field to an external API field for submission.
+                </Typography>
+
+                <FormControl fullWidth size="small">
+                    <InputLabel>Integration</InputLabel>
+                    <Select
+                        label="Integration"
+                        value={node.props?.apiIntegrationId || ''}
+                        onChange={(e) => {
+                            handleChange('apiIntegrationId', e.target.value);
+                            formStore.updateNode(node.id, { apiMapping: undefined });
+                        }}
+                    >
+                        <MenuItem value=""><em>None</em></MenuItem>
+                        {(formStore.rootNode.props?.integrations || []).map((i: any) => (
+                            <MenuItem key={i.id} value={i.id}>{i.name}</MenuItem>
+                        ))}
+                    </Select>
+                </FormControl>
+
+                {node.props?.apiIntegrationId && (
+                    <FormControl fullWidth size="small" sx={{ mt: 2 }}>
+                        <InputLabel>API Field</InputLabel>
+                        <Select
+                            label="API Field"
+                            value={node.apiMapping || ''}
+                            onChange={(e) => formStore.updateNode(node.id, { apiMapping: e.target.value })}
+                        >
+                            <MenuItem value=""><em>None</em></MenuItem>
+                            {(formStore.rootNode.props?.integrations?.find((i: any) => i.id === node.props?.apiIntegrationId)?.availableFields || []).map((f: any) => (
+                                <MenuItem key={f.id} value={f.id}>{f.label} ({f.type})</MenuItem>
+                            ))}
+                        </Select>
+                    </FormControl>
+                )}
+            </CustomTabPanel>
+        </Box>
+    );
+});