@stormlmd/form-builder 0.3.0 → 0.3.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stormlmd/form-builder",
-  "version": "0.3.0",
+  "version": "0.3.5",
   "type": "module",
   "main": "./src/index.ts",
   "module": "./src/index.ts",
@@ -38,11 +38,11 @@
     "@mui/icons-material": "^5.16.0",
     "@mui/material": "^5.16.0",
     "@mui/x-date-pickers": "^5.0.0",
-    "date-fns": "^2.30.0",
     "@types/node": "^24.10.1",
     "@types/react": "^18.3.1",
     "@types/react-dom": "^18.3.1",
     "@vitejs/plugin-react": "^5.1.1",
+    "date-fns": "^2.30.0",
     "eslint": "^9.39.1",
     "eslint-plugin-react-hooks": "^7.0.1",
     "eslint-plugin-react-refresh": "^0.4.24",
@@ -55,6 +55,7 @@
   },
   "dependencies": {
     "i18next": "^25.8.7",
-    "react-i18next": "^16.5.4"
+    "react-i18next": "^16.5.4",
+    "react-quill-new": "^3.8.3"
   }
 }

package/src/components/FieldRegistry.ts

@@ -12,6 +12,7 @@ export interface FieldProps {
     node: SchemaNode;
     path?: string; // current path for values, e.g. "addresses[0]"
     isEditing?: boolean;
+    isReadOnly?: boolean;
 }
 
 type ComponentType = React.FC<FieldProps>;

package/src/components/FormRenderer.tsx

@@ -13,6 +13,7 @@ interface FormRendererProps {
     node: SchemaNode;
     path?: string;
     isEditing?: boolean;
+    isReadOnly?: boolean;
 }
 
 export const DropIndicator = () => (
@@ -27,7 +28,7 @@ export const DropIndicator = () => (
     }} />
 );
 
-export const FormRenderer: React.FC<FormRendererProps> = observer(({ node, path, isEditing }) => {
+export const FormRenderer: React.FC<FormRendererProps> = observer(({ node, path, isEditing, isReadOnly }) => {
     const formStore = useFormStore();
     // Evaluate condition if present (skip in editing mode)
     if (!isEditing && node.condition) {
@@ -55,6 +56,7 @@ export const FormRenderer: React.FC<FormRendererProps> = observer(({ node, path,
                         parentId={node.id}
                         children={node.children}
                         isEditing={!!isEditing}
+                        isReadOnly={!!isReadOnly}
                         path={path}
                     />
                 </Box>
@@ -92,7 +94,7 @@ export const FormRenderer: React.FC<FormRendererProps> = observer(({ node, path,
         flexDirection: 'column'
     };
 
-    let renderedComponent = <Component node={node} path={path} isEditing={isEditing} />;
+    let renderedComponent = <Component node={node} path={path} isEditing={isEditing} isReadOnly={isReadOnly} />;
 
     // Wrap in Tooltip if present (only in preview mode, or also in editor? User said "in form" - обычно в превью, но в редакторе тоже неплохо)
     if (!isEditing && tooltip) {

package/src/components/builder/FormChildrenRenderer.tsx

@@ -12,6 +12,7 @@ interface FormChildrenRendererProps {
     isEditing: boolean;
     layout?: 'horizontal' | 'vertical';
     path?: string;
+    isReadOnly?: boolean;
 }
 
 export const FormChildrenRenderer: React.FC<FormChildrenRendererProps> = observer(({
@@ -19,7 +20,8 @@ export const FormChildrenRenderer: React.FC<FormChildrenRendererProps> = observe
     children,
     isEditing,
     layout = 'horizontal',
-    path
+    path,
+    isReadOnly
 }) => {
     const formStore = useFormStore();
     const childIds = children?.map(c => c.id) || [];
@@ -40,7 +42,7 @@ export const FormChildrenRenderer: React.FC<FormChildrenRendererProps> = observe
         return (
             <Box sx={containerSx}>
                 {children?.map(child => (
-                    <FormRenderer key={child.id} node={child} path={path} isEditing={false} />
+                    <FormRenderer key={child.id} node={child} path={path} isEditing={false} isReadOnly={isReadOnly} />
                 ))}
             </Box>
         );

package/src/components/builder/FormulaHelp.tsx

@@ -0,0 +1,116 @@
+import React from 'react';
+import {
+    Dialog,
+    DialogTitle,
+    DialogContent,
+    DialogActions,
+    Button,
+    Typography,
+    Box,
+    IconButton,
+    Table,
+    TableBody,
+    TableCell,
+    TableContainer,
+    TableHead,
+    TableRow,
+    Paper
+} from '@mui/material';
+import CloseIcon from '@mui/icons-material/Close';
+
+interface FormulaHelpProps {
+    open: boolean;
+    onClose: () => void;
+}
+
+export const FormulaHelp: React.FC<FormulaHelpProps> = ({ open, onClose }) => {
+
+    const examples = [
+        {
+            func: 'IF(cond, t, f)',
+            desc: 'Условие: если истина -> t, иначе -> f',
+            example: 'IF({{price}} > 100, "Высокая", "Низкая")'
+        },
+        {
+            func: 'SWITCH(v, v1, r1, ...)',
+            desc: 'Выбор по значению одного поля',
+            example: 'SWITCH({{type}}, "A", 10, "B", 20, 0)'
+        },
+        {
+            func: 'IFS(c1, r1, c2, r2, ...)',
+            desc: 'Цепочка условий (первое истинное)',
+            example: 'IFS({{score}} > 90, "A", {{score}} > 50, "B", "F")'
+        },
+        {
+            func: 'DATE_ADD(d, days)',
+            desc: 'Прибавить дни к дате',
+            example: 'DATE_ADD({{today}}, 7)'
+        },
+        {
+            func: 'DATE_DIFF(d1, d2)',
+            desc: 'Разница между датами в днях',
+            example: 'DATE_DIFF({{today}}, {{start_date}})'
+        },
+        {
+            func: 'ROUND(v, p)',
+            desc: 'Округление до p знаков',
+            example: 'ROUND({{price}} * 1.2, 2)'
+        },
+        {
+            func: 'AND/OR/NOT',
+            desc: 'Логические операторы',
+            example: 'AND({{active}}, NOT({{hidden}}))'
+        }
+    ];
+
+    return (
+        <Dialog open={open} onClose={onClose} maxWidth="md" fullWidth>
+            <DialogTitle sx={{ m: 0, p: 2, display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
+                <Typography variant="h6">Подсказка по формулам</Typography>
+                <IconButton onClick={onClose} size="small">
+                    <CloseIcon />
+                </IconButton>
+            </DialogTitle>
+            <DialogContent dividers>
+                <Typography variant="body2" gutterBottom color="text.secondary">
+                    Используйте <code>{`{{имя_поля}}`}</code> для доступа к значениям. Ниже приведены популярные функции:
+                </Typography>
+
+                <TableContainer component={Paper} variant="outlined" sx={{ mt: 2 }}>
+                    <Table size="small">
+                        <TableHead>
+                            <TableRow sx={{ bgcolor: 'action.hover' }}>
+                                <TableCell><strong>Функция</strong></TableCell>
+                                <TableCell><strong>Описание</strong></TableCell>
+                                <TableCell><strong>Пример</strong></TableCell>
+                            </TableRow>
+                        </TableHead>
+                        <TableBody>
+                            {examples.map((item, index) => (
+                                <TableRow key={index}>
+                                    <TableCell sx={{ fontFamily: 'monospace', fontWeight: 'bold' }}>{item.func}</TableCell>
+                                    <TableCell>{item.desc}</TableCell>
+                                    <TableCell sx={{ fontFamily: 'monospace', fontSize: '0.8rem', color: 'primary.main' }}>
+                                        {item.example}
+                                    </TableCell>
+                                </TableRow>
+                            ))}
+                        </TableBody>
+                    </Table>
+                </TableContainer>
+
+                <Box mt={3}>
+                    <Typography variant="subtitle2" gutterBottom>Полезные советы:</Typography>
+                    <Typography variant="body2" component="ul" sx={{ pl: 2 }}>
+                        <li>Пустые поля автоматически считаются <code>0</code> в математике.</li>
+                        <li>Для строк используйте кавычки: <code>"Текст"</code>.</li>
+                        <li><code>{`{{today}}`}</code> - текущая дата в формате DD-MM-YYYY.</li>
+                    </Typography>
+                </Box>
+            </DialogContent>
+            <DialogActions>
+                <Button onClick={onClose} color="primary">Закрыть</Button>
+            </DialogActions>
+        </Dialog>
+    );
+};

package/src/components/builder/OptionsEditor.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Box, TextField, IconButton, Button, Typography, Paper } from '@mui/material';
+import { Box, TextField, IconButton, Button, Typography } from '@mui/material';
 import DeleteIcon from '@mui/icons-material/Delete';
 import AddIcon from '@mui/icons-material/Add';
 import { useTranslation } from 'react-i18next';

package/src/components/builder/PropertiesPanel.tsx

@@ -1,11 +1,13 @@
 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 { Box, Typography, TextField, FormControl, FormLabel, Select, MenuItem, Button, Popper, Paper, List, ListItemButton, ListItemText, ClickAwayListener, Tabs, Tab, InputLabel, IconButton, InputAdornment, Tooltip } from '@mui/material';
 import { observer } from 'mobx-react-lite';
 import { useFormStore } from '../../store/FormStoreContext';
 import type { SchemaNode } from '../../store/FormStore';
 import DeleteIcon from '@mui/icons-material/Delete';
+import HelpOutlineIcon from '@mui/icons-material/HelpOutline';
 import { useTranslation } from 'react-i18next';
 import { getPlugin } from '../../plugins/PluginRegistry';
+// import { FormulaHelp } from './FormulaHelp';
 
 interface TabPanelProps {
     children?: React.ReactNode;
@@ -39,6 +41,48 @@ function CustomTabPanel(props: TabPanelProps) {
     );
 }
 
+const FormulaHints: React.FC<{
+    node: SchemaNode,
+    formStore: any,
+    insertText: (text: string) => void,
+    t: any
+}> = ({ node, formStore, insertText, t }) => {
+    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()', 'SWITCH()', 'IFS()', 'DATE_ADD()', 'DATE_DIFF()'].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>
+    );
+};
+
 function a11yProps(index: number) {
     return {
         id: `simple-tab-${index}`,
@@ -96,6 +140,7 @@ export const PropertiesPanel: React.FC = observer(() => {
     };
 
     const handleDelete = () => {
+        if (node.id === 'root') return;
         formStore.removeNode(node.id);
         formStore.closePropertiesModal(); // Also close modal on delete
     };
@@ -158,58 +203,22 @@ export const PropertiesPanel: React.FC = observer(() => {
         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>
-        );
+    const insertText = (fieldType: string, text: string) => {
+        if (!node) return;
+        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 (
@@ -240,7 +249,7 @@ export const PropertiesPanel: React.FC = observer(() => {
                 <Box>
                     <Typography variant="subtitle1" fontWeight="bold">{t('properties.title')}</Typography>
                     <Typography variant="caption" color="text.secondary">
-                        {node.type.toUpperCase()} | ID: {node.id}
+                        {(node.type || 'unknown').toUpperCase()} | ID: {node.id || 'none'}
                     </Typography>
                 </Box>
                 <Button
@@ -377,6 +386,17 @@ export const PropertiesPanel: React.FC = observer(() => {
                                 size="small"
                                 fullWidth
                                 value={node.defaultValue ?? ''}
+                                InputProps={{
+                                    endAdornment: (
+                                        <InputAdornment position="end">
+                                            <Tooltip title="Справка по формулам">
+                                                <IconButton size="small">
+                                                    <HelpOutlineIcon fontSize="small" />
+                                                </IconButton>
+                                            </Tooltip>
+                                        </InputAdornment>
+                                    ),
+                                }}
                                 onChange={(e) => {
                                     const val = e.target.value;
                                     formStore.updateNode(node.id, { defaultValue: val });
@@ -388,7 +408,7 @@ export const PropertiesPanel: React.FC = observer(() => {
                                     setCursorPos(target.selectionStart || 0);
                                 }}
                             />
-                            <FormulaHints fieldType="defaultValue" />
+                            <FormulaHints node={node} formStore={formStore} insertText={(txt) => insertText('defaultValue', txt)} t={t} />
                         </>
                     )}
                 </Box>
@@ -620,6 +640,41 @@ export const PropertiesPanel: React.FC = observer(() => {
                     </Box>
                 )}
 
+                {node.type === 'richtext' && (
+                    <Box display="flex" alignItems="center" mt={1}>
+                        <input
+                            type="checkbox"
+                            id="enable-visual-editor"
+                            checked={node.props?.enableVisualEditor || false}
+                            onChange={(e) => handleChange('enableVisualEditor', e.target.checked)}
+                            style={{ marginRight: 8 }}
+                        />
+                        <Typography variant="body2" component="label" htmlFor="enable-visual-editor" sx={{ cursor: 'pointer' }}>
+                            {t('properties.enableVisualEditor') || 'Enable Visual Editor'}
+                        </Typography>
+                    </Box>
+                )}
+
+                {node.type === 'checkbox' && (
+                    <Box mt={2} display="flex" flexDirection="column" gap={2}>
+                        <Typography variant="subtitle2" color="primary">{t('properties.checkboxResultsLabels') || 'Results View Labels'}</Typography>
+                        <TextField
+                            label={t('properties.trueText') || 'Positive (e.g. "Да")'}
+                            size="small"
+                            fullWidth
+                            value={node.props?.trueText || ''}
+                            onChange={(e) => handleChange('trueText', e.target.value)}
+                        />
+                        <TextField
+                            label={t('properties.falseText') || 'Negative (e.g. "Нет")'}
+                            size="small"
+                            fullWidth
+                            value={node.props?.falseText || ''}
+                            onChange={(e) => handleChange('falseText', e.target.value)}
+                        />
+                    </Box>
+                )}
+
                 {/* Plugin custom properties editor */}
                 {plugin?.propertiesEditor && (
                     <Box mt={2}>
@@ -686,6 +741,17 @@ export const PropertiesPanel: React.FC = observer(() => {
                                 size="small"
                                 fullWidth
                                 value={node.validation?.min ?? ''}
+                                InputProps={{
+                                    endAdornment: (
+                                        <InputAdornment position="end">
+                                            <Tooltip title="Справка по формулам">
+                                                <IconButton size="small">
+                                                    <HelpOutlineIcon fontSize="small" />
+                                                </IconButton>
+                                            </Tooltip>
+                                        </InputAdornment>
+                                    ),
+                                }}
                                 onChange={(e) => {
                                     const val = e.target.value;
                                     formStore.updateNodeValidation(node.id, { min: val });
@@ -697,7 +763,7 @@ export const PropertiesPanel: React.FC = observer(() => {
                                 }}
                                 placeholder="e.g. 10 or {{otherField}} + 5"
                             />
-                            <FormulaHints fieldType="min" />
+                            <FormulaHints node={node} formStore={formStore} insertText={(txt) => insertText('min', txt)} t={t} />
                         </Box>
                         <Box mb={1}>
                             <TextField
@@ -705,6 +771,17 @@ export const PropertiesPanel: React.FC = observer(() => {
                                 size="small"
                                 fullWidth
                                 value={node.validation?.max ?? ''}
+                                InputProps={{
+                                    endAdornment: (
+                                        <InputAdornment position="end">
+                                            <Tooltip title="Справка по формулам">
+                                                <IconButton size="small">
+                                                    <HelpOutlineIcon fontSize="small" />
+                                                </IconButton>
+                                            </Tooltip>
+                                        </InputAdornment>
+                                    ),
+                                }}
                                 onChange={(e) => {
                                     const val = e.target.value;
                                     formStore.updateNodeValidation(node.id, { max: val });
@@ -716,7 +793,7 @@ export const PropertiesPanel: React.FC = observer(() => {
                                 }}
                                 placeholder="e.g. 100 or {{otherField}} * 2"
                             />
-                            <FormulaHints fieldType="max" />
+                            <FormulaHints node={node} formStore={formStore} insertText={(txt) => insertText('max', txt)} t={t} />
                         </Box>
                     </Box>
                 )}
@@ -837,6 +914,17 @@ export const PropertiesPanel: React.FC = observer(() => {
                     fullWidth
                     placeholder="e.g. {{price}} * {{qty}}"
                     value={node.calculation?.formula || ''}
+                    InputProps={{
+                        endAdornment: (
+                            <InputAdornment position="end">
+                                <Tooltip title="Справка по формулам">
+                                    <IconButton size="small">
+                                        <HelpOutlineIcon fontSize="small" />
+                                    </IconButton>
+                                </Tooltip>
+                            </InputAdornment>
+                        ),
+                    }}
                     onChange={(e) => {
                         const val = e.target.value;
                         formStore.updateNodeCalculation(node.id, val ? { formula: val } : undefined);
@@ -848,7 +936,7 @@ export const PropertiesPanel: React.FC = observer(() => {
                     }}
                     helperText={t("properties.formulaHelper")}
                 />
-                <FormulaHints fieldType="calculation" />
+                <FormulaHints node={node} formStore={formStore} insertText={(txt) => insertText('calculation', txt)} t={t} />
             </CustomTabPanel>
 
             {/* API Mapping Tab */}
@@ -890,6 +978,9 @@ export const PropertiesPanel: React.FC = observer(() => {
                     </FormControl>
                 )}
             </CustomTabPanel>
+
+
+            {/* <FormulaHelp open={helpOpen} onClose={() => setHelpOpen(false)} /> */}
         </Box>
     );
 });

package/src/components/fields/CheckboxField.tsx

@@ -4,12 +4,25 @@ import { observer } from 'mobx-react-lite';
 import { useFormStore } from '../../store/FormStoreContext';
 import type { FieldProps } from '../FieldRegistry';
 
-export const CheckboxField: React.FC<FieldProps> = observer(({ node, path, isEditing }) => {
+export const CheckboxField: React.FC<FieldProps> = observer(({ node, path, isEditing, isReadOnly }) => {
     const formStore = useFormStore();
-    const { name, label } = node.props || {};
+    const { name, label, trueText = 'Да', falseText = 'Нет' } = node.props || {};
     const fullPath = path && name ? `${path}.${name}` : name;
     const value = fullPath ? formStore.getValue(fullPath) : false;
 
+    if (isReadOnly) {
+        return (
+            <Box mb={1}>
+                <Typography variant="caption" color="text.secondary" display="block">
+                    {label || ''}
+                </Typography>
+                <Typography variant="body1" sx={{ minHeight: '1.5em', borderBottom: '1px solid #eee', pb: 0.5 }}>
+                    {value ? trueText : falseText}
+                </Typography>
+            </Box>
+        );
+    }
+
     return (
         <Box mb={0.5}>
             {isEditing && (

package/src/components/fields/DateField.tsx

@@ -7,7 +7,7 @@ import { useFormStore } from '../../store/FormStoreContext';
 import type { FieldProps } from '../FieldRegistry';
 import { Box, Typography, TextField } from '@mui/material';
 
-export const DateField: React.FC<FieldProps> = observer(({ node, path, isEditing }) => {
+export const DateField: React.FC<FieldProps> = observer(({ node, path, isEditing, isReadOnly }) => {
     const formStore = useFormStore();
     const { name, label, placeholder } = node.props || {};
     const fullPath = path && name ? `${path}.${name}` : name;
@@ -24,6 +24,19 @@ export const DateField: React.FC<FieldProps> = observer(({ node, path, isEditing
     // Create a Date object from value if string
     const dateValue = value ? new Date(value) : null;
 
+    if (isReadOnly) {
+        return (
+            <Box mb={1}>
+                <Typography variant="caption" color="text.secondary" display="block">
+                    {label || ''}
+                </Typography>
+                <Typography variant="body1" sx={{ minHeight: '1.5em', borderBottom: '1px solid #eee', pb: 0.5 }}>
+                    {dateValue ? dateValue.toLocaleDateString() : '-'}
+                </Typography>
+            </Box>
+        );
+    }
+
     const content = (
         <LocalizationProvider dateAdapter={AdapterDateFns}>
             <DatePicker

package/src/components/fields/FileUploadField.tsx

@@ -5,7 +5,7 @@ import { observer } from 'mobx-react-lite';
 import { useFormStore } from '../../store/FormStoreContext';
 import type { FieldProps } from '../FieldRegistry';
 
-export const FileUploadField: React.FC<FieldProps> = observer(({ node, path, isEditing }) => {
+export const FileUploadField: React.FC<FieldProps> = observer(({ node, path, isEditing, isReadOnly }) => {
     const formStore = useFormStore();
     const { name, label } = node.props || {};
     const fullPath = path && name ? `${path}.${name}` : name;
@@ -19,6 +19,19 @@ export const FileUploadField: React.FC<FieldProps> = observer(({ node, path, isE
         }
     };
 
+    if (isReadOnly) {
+        return (
+            <Box mb={1}>
+                <Typography variant="caption" color="text.secondary" display="block">
+                    {label || ''}
+                </Typography>
+                <Typography variant="body1" sx={{ minHeight: '1.5em', borderBottom: '1px solid #eee', pb: 0.5 }}>
+                    {value || '-'}
+                </Typography>
+            </Box>
+        );
+    }
+
     return (
         <Box mb={1}>
             <Typography variant="caption" color="text.secondary" display="block" mb={0.2} ml={0.5}>

package/src/components/fields/LabelField.tsx

@@ -4,7 +4,7 @@ import { observer } from 'mobx-react-lite';
 import { useFormStore } from '../../store/FormStoreContext';
 import type { FieldProps } from '../FieldRegistry';
 
-export const LabelField: React.FC<FieldProps> = observer(({ node }) => {
+export const LabelField: React.FC<FieldProps> = observer(({ node, isReadOnly: _isReadOnly }) => {
     const formStore = useFormStore();
     const { name, label = '', align = 'left', variant = 'body1' } = node.props || {};
 

package/src/components/fields/NumberField.tsx

@@ -4,7 +4,7 @@ import { observer } from 'mobx-react-lite';
 import { useFormStore } from '../../store/FormStoreContext';
 import type { FieldProps } from '../FieldRegistry';
 
-export const NumberField: React.FC<FieldProps> = observer(({ node, path, isEditing }) => {
+export const NumberField: React.FC<FieldProps> = observer(({ node, path, isEditing, isReadOnly }) => {
     const formStore = useFormStore();
     const { name, label } = node.props || {};
 
@@ -19,6 +19,19 @@ export const NumberField: React.FC<FieldProps> = observer(({ node, path, isEditi
         }
     };
 
+    if (isReadOnly) {
+        return (
+            <Box mb={1}>
+                <Typography variant="caption" color="text.secondary" display="block">
+                    {label || ''}
+                </Typography>
+                <Typography variant="body1" sx={{ minHeight: '1.5em', borderBottom: '1px solid #eee', pb: 0.5 }}>
+                    {value !== undefined && value !== null && value !== '' ? value.toString() : '-'}
+                </Typography>
+            </Box>
+        );
+    }
+
     return (
         <Box mb={0.5}>
             <Typography variant="caption" color="text.secondary" display="block" mb={0.2} ml={0.5}>

package/src/components/fields/RichTextField.tsx

@@ -1,40 +1,117 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import { TextField as MuiTextField, Typography, Box } from '@mui/material';
 import { observer } from 'mobx-react-lite';
 import { useFormStore } from '../../store/FormStoreContext';
 import type { FieldProps } from '../FieldRegistry';
+import ReactQuill from 'react-quill-new';
+import 'react-quill-new/dist/quill.snow.css';
 
-export const RichTextField: React.FC<FieldProps> = observer(({ node, path, isEditing }) => {
+export const RichTextField: React.FC<FieldProps> = observer(({ node, path, isEditing, isReadOnly }) => {
     const formStore = useFormStore();
-    const { name, label, placeholder } = node.props || {};
+    const { name, label, placeholder, enableVisualEditor } = node.props || {};
     const fullPath = path && name ? `${path}.${name}` : name;
-    const value = fullPath ? formStore.getValue(fullPath) : '';
+    const value = (fullPath ? formStore.getValue(fullPath) : '') || '';
     const error = fullPath ? formStore.errors[fullPath] : undefined;
 
-    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const handleChange = (val: string) => {
         if (fullPath) {
-            formStore.updateField(fullPath, e.target.value, node.validation);
+            formStore.updateField(fullPath, val, node.validation);
         }
     };
 
+    const modules = useMemo(() => ({
+        toolbar: [
+            ['bold'],
+            [{ 'header': '3' }, { 'header': '4' }],
+            [{ 'list': 'ordered' }, { 'list': 'bullet' }],
+            ['link'],
+            ['clean']
+        ],
+    }), []);
+
+    const formats = [
+        'header',
+        'bold',
+        'list', 'bullet',
+        'link'
+    ];
+
+    if (isReadOnly) {
+        return (
+            <Box mb={2}>
+                <Typography variant="caption" color="text.secondary" display="block">
+                    {label || ''}
+                </Typography>
+                <Box
+                    sx={{
+                        mt: 0.5,
+                        p: 0,
+                        '& h3': { m: '0.5em 0' },
+                        '& h4': { m: '0.4em 0' },
+                        '& ul, & ol': { pl: 2 }
+                    }}
+                    dangerouslySetInnerHTML={{ __html: value || '-' }}
+                />
+            </Box>
+        );
+    }
+
     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}
-            />
+            {enableVisualEditor ? (
+                <Box sx={{
+                    '& .quill': {
+                        bgcolor: 'background.paper',
+                        borderRadius: 1,
+                        border: theme => `1px solid ${error ? theme.palette.error.main : theme.palette.divider}`,
+                        '& .ql-toolbar': {
+                            borderTop: 'none',
+                            borderLeft: 'none',
+                            borderRight: 'none',
+                            borderBottom: '1px solid',
+                            borderColor: 'divider',
+                            borderRadius: '4px 4px 0 0'
+                        },
+                        '& .ql-container': {
+                            border: 'none',
+                            minHeight: '120px',
+                            fontSize: '0.875rem'
+                        }
+                    }
+                }}>
+                    <ReactQuill
+                        theme="snow"
+                        value={value}
+                        onChange={handleChange}
+                        modules={modules}
+                        formats={formats}
+                        placeholder={placeholder}
+                        readOnly={isEditing || !!node.calculation?.formula}
+                    />
+                    {error && (
+                        <Typography variant="caption" color="error" sx={{ ml: 1.5, mt: 0.5, display: 'block' }}>
+                            {error}
+                        </Typography>
+                    )}
+                </Box>
+            ) : (
+                <MuiTextField
+                    placeholder={placeholder}
+                    fullWidth
+                    multiline
+                    minRows={4}
+                    value={value}
+                    onChange={(e) => handleChange(e.target.value)}
+                    size="small"
+                    disabled={isEditing || !!node.calculation?.formula}
+                    error={!!error}
+                    helperText={error}
+                />
+            )}
         </Box>
     );
 });

package/src/components/fields/SelectField.tsx

@@ -4,7 +4,7 @@ import { observer } from 'mobx-react-lite';
 import { useFormStore } from '../../store/FormStoreContext';
 import type { FieldProps } from '../FieldRegistry';
 
-export const SelectField: React.FC<FieldProps> = observer(({ node, path, isEditing }) => {
+export const SelectField: React.FC<FieldProps> = observer(({ node, path, isEditing, isReadOnly }) => {
     const formStore = useFormStore();
     const { name, label, options: staticOptions = [], optionsSource, enableAutocomplete = false, placeholder } = node.props || {};
 
@@ -22,6 +22,20 @@ export const SelectField: React.FC<FieldProps> = observer(({ node, path, isEditi
         }
     };
 
+    if (isReadOnly) {
+        const selectedOption = options.find((opt: any) => opt.value === value);
+        return (
+            <Box mb={1}>
+                <Typography variant="caption" color="text.secondary" display="block">
+                    {label || ''}
+                </Typography>
+                <Typography variant="body1" sx={{ minHeight: '1.5em', borderBottom: '1px solid #eee', pb: 0.5 }}>
+                    {selectedOption ? selectedOption.label : (value || '-')}
+                </Typography>
+            </Box>
+        );
+    }
+
     const renderSelect = () => (
         <FormControl fullWidth size="small" disabled={isEditing || !!node.calculation?.formula} error={!!error}>
             <Select

package/src/components/fields/TextField.tsx

@@ -4,7 +4,7 @@ import { observer } from 'mobx-react-lite';
 import { useFormStore } from '../../store/FormStoreContext';
 import type { FieldProps } from '../FieldRegistry';
 
-export const TextField: React.FC<FieldProps> = observer(({ node, path, isEditing }) => {
+export const TextField: React.FC<FieldProps> = observer(({ node, path, isEditing, isReadOnly }) => {
     const formStore = useFormStore();
     const { name, label, placeholder } = node.props || {};
 
@@ -19,6 +19,19 @@ export const TextField: React.FC<FieldProps> = observer(({ node, path, isEditing
         }
     };
 
+    if (isReadOnly) {
+        return (
+            <Box mb={1}>
+                <Typography variant="caption" color="text.secondary" display="block">
+                    {label || ''}
+                </Typography>
+                <Typography variant="body1" sx={{ minHeight: '1.5em', borderBottom: '1px solid #eee', pb: 0.5 }}>
+                    {value || '-'}
+                </Typography>
+            </Box>
+        );
+    }
+
     return (
         <Box mb={0.5}>
             <Typography variant="caption" color="text.secondary" display="block" mb={0.2} ml={0.5}>

package/src/components/layout/FormCol.tsx

@@ -6,13 +6,13 @@ 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 }) => {
+export const FormCol: React.FC<FieldProps> = observer(({ node, path, isEditing, isReadOnly }) => {
     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} />
+                <FormRenderer key={child.id} node={child} path={path} isEditing={isEditing} isReadOnly={isReadOnly} />
             ))}
         </Box>
     );

package/src/components/layout/FormPaper.tsx

@@ -5,7 +5,7 @@ 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 }) => {
+export const FormPaper: React.FC<FieldProps> = observer(({ node, path, isEditing, isReadOnly }) => {
     const { label, elevation: elevationProp, padding = 2, variant: variantProp } = node.props || {};
     const childrenIds = node.children?.map(c => c.id) || [];
 
@@ -21,6 +21,7 @@ export const FormPaper: React.FC<FieldProps> = observer(({ node, path, isEditing
             isEditing={!!isEditing}
             path={path}
             layout="horizontal"
+            isReadOnly={isReadOnly}
         />
     );
 

package/src/components/layout/FormRepeater.tsx

@@ -8,7 +8,7 @@ import type { FieldProps } from '../FieldRegistry';
 import { LayoutPlaceholder } from './LayoutPlaceholder';
 import { FormChildrenRenderer } from '../builder/FormChildrenRenderer';
 
-export const FormRepeater: React.FC<FieldProps> = observer(({ node, path, isEditing }) => {
+export const FormRepeater: React.FC<FieldProps> = observer(({ node, path, isEditing, isReadOnly }) => {
     const formStore = useFormStore();
     const { name, label, addLabel = 'Add Item' } = node.props || {};
     const fullPath = path && name ? `${path}.${name}` : name;
@@ -81,7 +81,7 @@ export const FormRepeater: React.FC<FieldProps> = observer(({ node, path, isEdit
             {displayItems.map((_item, index) => (
                 <Paper key={index} variant="outlined" sx={{ p: 1, mb: 0.5, position: 'relative' }}>
                     <Box position="absolute" right={4} top={4} zIndex={5}>
-                        <IconButton size="small" onClick={() => handleRemove(index)} color="error" disabled={isEditing}>
+                        <IconButton size="small" onClick={() => handleRemove(index)} color="error" disabled={isEditing || isReadOnly}>
                             <DeleteIcon fontSize="inherit" />
                         </IconButton>
                     </Box>
@@ -100,6 +100,7 @@ export const FormRepeater: React.FC<FieldProps> = observer(({ node, path, isEdit
                                     isEditing={true}
                                     layout="horizontal"
                                     path={`${fullPath}[${index}]`}
+                                    isReadOnly={isReadOnly}
                                 />
                             </LayoutPlaceholder>
                         ) : (
@@ -109,13 +110,14 @@ export const FormRepeater: React.FC<FieldProps> = observer(({ node, path, isEdit
                                 isEditing={false}
                                 layout="horizontal"
                                 path={`${fullPath}[${index}]`}
+                                isReadOnly={isReadOnly}
                             />
                         )}
                     </Box>
                 </Paper>
             ))}
 
-            {!isEditing && (
+            {!isEditing && !isReadOnly && (
                 <Button
                     startIcon={<AddIcon />}
                     variant="outlined"

package/src/components/layout/FormRow.tsx

@@ -4,7 +4,7 @@ import type { FieldProps } from '../FieldRegistry';
 import { LayoutPlaceholder } from './LayoutPlaceholder';
 import { FormChildrenRenderer } from '../builder/FormChildrenRenderer';
 
-export const FormRow: React.FC<FieldProps> = observer(({ node, path, isEditing }) => {
+export const FormRow: React.FC<FieldProps> = observer(({ node, path, isEditing, isReadOnly }) => {
     const childrenIds = node.children?.map(c => c.id) || [];
 
     if (isEditing) {
@@ -16,6 +16,7 @@ export const FormRow: React.FC<FieldProps> = observer(({ node, path, isEditing }
                     isEditing={true}
                     layout="horizontal"
                     path={path}
+                    isReadOnly={isReadOnly}
                 />
             </LayoutPlaceholder>
         );
@@ -28,11 +29,12 @@ export const FormRow: React.FC<FieldProps> = observer(({ node, path, isEditing }
             isEditing={false}
             layout="horizontal"
             path={path}
+            isReadOnly={isReadOnly}
         />
     );
 });
 
-export const FormCol: React.FC<FieldProps> = observer(({ node, path, isEditing }) => {
+export const FormCol: React.FC<FieldProps> = observer(({ node, path, isEditing, isReadOnly }) => {
     const childrenIds = node.children?.map(c => c.id) || [];
 
     if (isEditing) {
@@ -44,6 +46,7 @@ export const FormCol: React.FC<FieldProps> = observer(({ node, path, isEditing }
                     isEditing={true}
                     layout="vertical"
                     path={path}
+                    isReadOnly={isReadOnly}
                 />
             </LayoutPlaceholder>
         );
@@ -56,6 +59,7 @@ export const FormCol: React.FC<FieldProps> = observer(({ node, path, isEditing }
             isEditing={false}
             layout="vertical"
             path={path}
+            isReadOnly={isReadOnly}
         />
     );
 });

package/src/components/layout/FormTab.tsx

@@ -4,7 +4,7 @@ import type { FieldProps } from '../FieldRegistry';
 import { FormChildrenRenderer } from '../builder/FormChildrenRenderer';
 import { LayoutPlaceholder } from './LayoutPlaceholder';
 
-export const FormTab: React.FC<FieldProps> = observer(({ node, path, isEditing }) => {
+export const FormTab: React.FC<FieldProps> = observer(({ node, path, isEditing, isReadOnly }) => {
     const childrenIds = node.children?.map(c => c.id) || [];
 
     const content = (
@@ -14,6 +14,7 @@ export const FormTab: React.FC<FieldProps> = observer(({ node, path, isEditing }
             isEditing={!!isEditing}
             path={path}
             layout="vertical"
+            isReadOnly={isReadOnly}
         />
     );
 

package/src/components/layout/FormTable.tsx

@@ -5,7 +5,7 @@ import type { FieldProps } from '../FieldRegistry';
 import { FormRenderer } from '../FormRenderer';
 import { LayoutPlaceholder } from './LayoutPlaceholder';
 
-export const FormTable: React.FC<FieldProps> = observer(({ node, path, isEditing }) => {
+export const FormTable: React.FC<FieldProps> = observer(({ node, path, isEditing, isReadOnly }) => {
     const { rows = 2, cols = 2 } = node.props || {};
 
     console.log(`FormTable Render: ${node.id}`, {
@@ -28,7 +28,7 @@ export const FormTable: React.FC<FieldProps> = observer(({ node, path, isEditing
         <Box sx={gridStyle}>
             {node.children?.map((child, index) => (
                 <Box key={child.id} sx={{ width: '100%', height: '100%' }}>
-                    <FormRenderer node={child} path={`${path}[${index}]`} isEditing={isEditing} />
+                    <FormRenderer node={child} path={`${path}[${index}]`} isEditing={isEditing} isReadOnly={isReadOnly} />
                 </Box>
             ))}
         </Box>

package/src/components/layout/FormTableCell.tsx

@@ -4,7 +4,7 @@ import type { FieldProps } from '../FieldRegistry';
 import { LayoutPlaceholder } from './LayoutPlaceholder';
 import { FormChildrenRenderer } from '../builder/FormChildrenRenderer';
 
-export const FormTableCell: React.FC<FieldProps> = observer(({ node, path, isEditing }) => {
+export const FormTableCell: React.FC<FieldProps> = observer(({ node, path, isEditing, isReadOnly }) => {
     const childrenIds = node.children?.map(c => c.id) || [];
     const isEmpty = childrenIds.length === 0;
 
@@ -30,6 +30,7 @@ export const FormTableCell: React.FC<FieldProps> = observer(({ node, path, isEdi
                     isEditing={true}
                     layout="vertical"
                     path={path}
+                    isReadOnly={isReadOnly}
                 />
             </LayoutPlaceholder>
         );
@@ -42,6 +43,7 @@ export const FormTableCell: React.FC<FieldProps> = observer(({ node, path, isEdi
             isEditing={false}
             layout="vertical"
             path={path}
+            isReadOnly={isReadOnly}
         />
     );
 });

package/src/components/layout/FormTabs.tsx

@@ -6,7 +6,7 @@ import { FormRenderer } from '../FormRenderer';
 import { useFormStore } from '../../store/FormStoreContext';
 import { LayoutPlaceholder } from './LayoutPlaceholder';
 
-export const FormTabs: React.FC<FieldProps> = observer(({ node, path, isEditing }) => {
+export const FormTabs: React.FC<FieldProps> = observer(({ node, path, isEditing, isReadOnly }) => {
     const formStore = useFormStore();
     const [activeTab, setActiveTab] = React.useState(0);
     const allTabs = node.children || [];
@@ -70,7 +70,7 @@ export const FormTabs: React.FC<FieldProps> = observer(({ node, path, isEditing
                         <Box />
                     </LayoutPlaceholder>
                 ) : (
-                    currentTabNode && <FormRenderer key={currentTabNode.id} node={currentTabNode} path={path} isEditing={isEditing} />
+                    currentTabNode && <FormRenderer key={currentTabNode.id} node={currentTabNode} path={path} isEditing={isEditing} isReadOnly={isReadOnly} />
                 )}
             </Box>
         </Paper>

package/src/components/registerComponents.ts

@@ -1,5 +1,4 @@
 import { registerPlugin } from '../plugins/PluginRegistry';
-import { registerComponent } from './FieldRegistry';
 import type { FieldPlugin } from '../plugins/FieldPlugin';
 
 // Field components
@@ -46,7 +45,7 @@ import React from 'react';
 const BUILT_IN_FIELD_PLUGINS: FieldPlugin[] = [
     { type: 'text', label: 'Text Field', icon: React.createElement(TextFieldsIcon), category: 'field', defaultProps: { label: 'New Text Field', width: 6 }, component: TextField },
     { type: 'number', label: 'Number Field', icon: React.createElement(NumbersIcon), category: 'field', defaultProps: { label: 'New Number Field', width: 6 }, component: NumberField },
-    { type: 'checkbox', label: 'Checkbox', icon: React.createElement(CheckBoxIcon), category: 'field', defaultProps: { label: 'New Checkbox', width: 6 }, component: CheckboxField },
+    { type: 'checkbox', label: 'Checkbox', icon: React.createElement(CheckBoxIcon), category: 'field', defaultProps: { label: 'New Checkbox', width: 6, trueText: 'Да', falseText: 'Нет' }, component: CheckboxField },
     { type: 'select', label: 'Select', icon: React.createElement(ArrowDropDownCircleIcon), category: 'field', defaultProps: { label: 'New Select', width: 6, options: [{ label: 'Option 1', value: '1' }] }, component: SelectField },
     { type: 'date', label: 'Date Picker', icon: React.createElement(CalendarTodayIcon), category: 'field', defaultProps: { label: 'New Date', width: 6 }, component: DateField },
     { type: 'file', label: 'File Upload', icon: React.createElement(CloudUploadIcon), category: 'field', defaultProps: { label: 'New File Upload', width: 6 }, component: FileUploadField },

package/src/store/FormStore.ts

@@ -1,5 +1,6 @@
 import { makeAutoObservable, toJS } from "mobx";
 import i18next from 'i18next';
+import { addDays, differenceInDays, parse, format, parseISO, isValid } from 'date-fns';
 import { transformAPIDataToSchema, transformSchemaToSubmission, transformDictionaryToOptions } from '../utils/apiTransformer';
 import { getPlugin, isContainerType } from '../plugins/PluginRegistry';
 
@@ -140,6 +141,7 @@ export class FormStore {
       const response = await fetch(`${this.apiBase}/schema/${formId}`);
       if (!response.ok) throw new Error("Failed to fetch schema");
       const schema = await response.json();
+      if (schema && !schema.id) schema.id = 'root'; // Enforce root ID
       this.rootNode = schema;
       this.applyDefaultValues();
     } catch (error) {
@@ -448,6 +450,40 @@ export class FormStore {
         ROUND: (v: any, p: number = 0) => {
           const factor = Math.pow(10, p);
           return Math.round(v * factor) / factor;
+        },
+        DATE_ADD: (date: any, days: any) => {
+          if (!date) return '';
+          const daysNum = Number(days) || 0;
+          let d = parseISO(date);
+          let isISO = true;
+          if (!isValid(d)) {
+            d = parse(date, 'dd-MM-yyyy', new Date());
+            isISO = false;
+          }
+          if (!isValid(d)) return date;
+          const result = addDays(d, daysNum);
+          return isISO ? result.toISOString() : format(result, 'dd-MM-yyyy');
+        },
+        DATE_DIFF: (date1: any, date2: any) => {
+          if (!date1 || !date2) return 0;
+          let d1 = parseISO(date1);
+          if (!isValid(d1)) d1 = parse(date1, 'dd-MM-yyyy', new Date());
+          let d2 = parseISO(date2);
+          if (!isValid(d2)) d2 = parse(date2, 'dd-MM-yyyy', new Date());
+          if (!isValid(d1) || !isValid(d2)) return 0;
+          return differenceInDays(d1, d2);
+        },
+        SWITCH: (val: any, ...args: any[]) => {
+          for (let i = 0; i < args.length - 1; i += 2) {
+            if (val === args[i]) return args[i + 1];
+          }
+          return args.length % 2 === 1 ? args[args.length - 1] : undefined;
+        },
+        IFS: (...args: any[]) => {
+          for (let i = 0; i < args.length - 1; i += 2) {
+            if (args[i]) return args[i + 1];
+          }
+          return args.length % 2 === 1 ? args[args.length - 1] : undefined;
         }
       };
 
@@ -739,7 +775,9 @@ export class FormStore {
     try {
       const stored = localStorage.getItem('form_schema');
       if (stored) {
-        this.rootNode = JSON.parse(stored);
+        const schema = JSON.parse(stored);
+        if (schema && !schema.id) schema.id = 'root'; // Enforce root ID
+        this.rootNode = schema;
         this.applyDefaultValues();
         console.log('Schema loaded from localStorage');
       }
@@ -780,6 +818,7 @@ export class FormStore {
   }
 
   findNode(root: SchemaNode, id: string): SchemaNode | null {
+    if (id === 'root' && (root === this.rootNode || root.id === 'root')) return root;
     if (root.id === id) return root;
     if (root.children) {
       for (const child of root.children) {