@stormlmd/form-builder 0.1.0 → 0.3.1

package/src/components/builder/PropertiesPanel.tsx

@@ -1,10 +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 { formStore } from '../../store/FormStore';
+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;
@@ -38,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}`,
@@ -46,11 +91,15 @@ function a11yProps(index: number) {
 }
 
 export const PropertiesPanel: React.FC = observer(() => {
+    const formStore = useFormStore();
     const { t } = useTranslation();
     const node = formStore.selectedNode;
     const [tabValue, setTabValue] = React.useState(0);
+    const [helpOpen, setHelpOpen] = React.useState(false);
 
-    const isLayout = node ? ['root', 'row', 'col', 'tabs', 'tab', 'paper', 'repeater', 'table', 'cell', 'divider'].includes(node.type) : false;
+    const BUILT_IN_LAYOUT_TYPES = ['root', 'row', 'col', 'tabs', 'tab', 'paper', 'repeater', 'table', 'cell', 'divider'];
+    const isLayout = node ? BUILT_IN_LAYOUT_TYPES.includes(node.type) : false;
+    const plugin = node ? getPlugin(node.type) : undefined;
 
     const allTabs = [
         { label: t("properties.tabView"), index: 0, visible: true },
@@ -92,6 +141,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
     };
@@ -154,58 +204,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 (
@@ -236,7 +250,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
@@ -373,6 +387,17 @@ export const PropertiesPanel: React.FC = observer(() => {
                                 size="small"
                                 fullWidth
                                 value={node.defaultValue ?? ''}
+                                InputProps={{
+                                    endAdornment: (
+                                        <InputAdornment position="end">
+                                            <Tooltip title="Справка по формулам">
+                                                <IconButton size="small" onClick={() => setHelpOpen(true)}>
+                                                    <HelpOutlineIcon fontSize="small" />
+                                                </IconButton>
+                                            </Tooltip>
+                                        </InputAdornment>
+                                    ),
+                                }}
                                 onChange={(e) => {
                                     const val = e.target.value;
                                     formStore.updateNode(node.id, { defaultValue: val });
@@ -384,7 +409,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>
@@ -416,13 +441,31 @@ export const PropertiesPanel: React.FC = observer(() => {
 
                 {node.type === 'select' && (
                     <Box display="flex" flexDirection="column" gap={2} mt={2}>
+                        <TextField
+                            label={t('properties.optionsSource') || 'Options Source (Constant Name)'}
+                            size="small"
+                            fullWidth
+                            value={node.props?.optionsSource || ''}
+                            onChange={(e) => handleChange('optionsSource', e.target.value || undefined)}
+                            helperText={
+                                node.props?.optionsSource
+                                    ? `${t('properties.optionsSourceActive') || 'Dynamic list active'}: formStore.setConstant('${node.props.optionsSource}', [...])`
+                                    : (t('properties.optionsSourceHelper') || 'Name of a constant set via setConstant(). Leave empty for static options.')
+                            }
+                            placeholder="e.g. userList"
+                        />
+                        {!!node.props?.optionsSource && (
+                            <Typography variant="caption" color="info.main">
+                                {t('properties.optionsSourceHint') || 'Static options below are ignored when Options Source is set.'}
+                            </Typography>
+                        )}
                         <TextField
                             label={t('properties.selectOptions')}
                             multiline
                             rows={6}
                             size="small"
                             fullWidth
-                            disabled={!!node.props?.dictionaryInfo}
+                            disabled={!!node.props?.dictionaryInfo || !!node.props?.optionsSource}
                             value={(node.props?.options || []).map((opt: any) => opt.label).join('\n')}
                             onChange={(e) => {
                                 const lines = e.target.value.split('\n');
@@ -433,7 +476,9 @@ export const PropertiesPanel: React.FC = observer(() => {
                             }}
                             helperText={node.props?.dictionaryInfo
                                 ? "Options are managed by API dictionary"
-                                : t('properties.selectOptionsHelper')}
+                                : node.props?.optionsSource
+                                    ? (t('properties.optionsSourceOverride') || 'Overridden by Options Source above')
+                                    : t('properties.selectOptionsHelper')}
                         />
                         <Box display="flex" alignItems="center" mt={1}>
                             <input
@@ -595,6 +640,19 @@ export const PropertiesPanel: React.FC = observer(() => {
                         />
                     </Box>
                 )}
+
+                {/* Plugin custom properties editor */}
+                {plugin?.propertiesEditor && (
+                    <Box mt={2}>
+                        <Typography variant="caption" color="text.secondary" display="block" mb={1}>
+                            {plugin.label} Settings
+                        </Typography>
+                        {React.createElement(plugin.propertiesEditor, {
+                            node,
+                            onChange: handleChange,
+                        })}
+                    </Box>
+                )}
             </CustomTabPanel>
 
             {/* Validation Tab */}
@@ -649,6 +707,17 @@ export const PropertiesPanel: React.FC = observer(() => {
                                 size="small"
                                 fullWidth
                                 value={node.validation?.min ?? ''}
+                                InputProps={{
+                                    endAdornment: (
+                                        <InputAdornment position="end">
+                                            <Tooltip title="Справка по формулам">
+                                                <IconButton size="small" onClick={() => setHelpOpen(true)}>
+                                                    <HelpOutlineIcon fontSize="small" />
+                                                </IconButton>
+                                            </Tooltip>
+                                        </InputAdornment>
+                                    ),
+                                }}
                                 onChange={(e) => {
                                     const val = e.target.value;
                                     formStore.updateNodeValidation(node.id, { min: val });
@@ -660,7 +729,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
@@ -668,6 +737,17 @@ export const PropertiesPanel: React.FC = observer(() => {
                                 size="small"
                                 fullWidth
                                 value={node.validation?.max ?? ''}
+                                InputProps={{
+                                    endAdornment: (
+                                        <InputAdornment position="end">
+                                            <Tooltip title="Справка по формулам">
+                                                <IconButton size="small" onClick={() => setHelpOpen(true)}>
+                                                    <HelpOutlineIcon fontSize="small" />
+                                                </IconButton>
+                                            </Tooltip>
+                                        </InputAdornment>
+                                    ),
+                                }}
                                 onChange={(e) => {
                                     const val = e.target.value;
                                     formStore.updateNodeValidation(node.id, { max: val });
@@ -679,7 +759,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>
                 )}
@@ -800,6 +880,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" onClick={() => setHelpOpen(true)}>
+                                        <HelpOutlineIcon fontSize="small" />
+                                    </IconButton>
+                                </Tooltip>
+                            </InputAdornment>
+                        ),
+                    }}
                     onChange={(e) => {
                         const val = e.target.value;
                         formStore.updateNodeCalculation(node.id, val ? { formula: val } : undefined);
@@ -811,7 +902,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 */}
@@ -853,6 +944,8 @@ export const PropertiesPanel: React.FC = observer(() => {
                     </FormControl>
                 )}
             </CustomTabPanel>
+
+            <FormulaHelp open={helpOpen} onClose={() => setHelpOpen(false)} />
         </Box>
     );
 });

package/src/components/builder/SortableNode.tsx

@@ -4,7 +4,7 @@ import { CSS } from '@dnd-kit/utilities';
 import { Box, type SxProps, type Theme } from '@mui/material';
 
 import { observer } from 'mobx-react-lite';
-import { formStore } from '../../store/FormStore';
+import { useFormStore } from '../../store/FormStoreContext';
 
 interface SortableNodeProps {
     id: string;
@@ -13,6 +13,7 @@ interface SortableNodeProps {
 }
 
 export const SortableNode: React.FC<SortableNodeProps> = observer(({ id, children, sx }) => {
+    const formStore = useFormStore();
     const {
         attributes,
         listeners,

package/src/components/builder/Toolbox.tsx

@@ -1,68 +1,35 @@
 import React, { useState } from 'react';
 import { Box, List, ListItem, Tabs, Tab } from '@mui/material';
-import { formStore, type NodeType } from '../../store/FormStore';
+import { useFormStore } from '../../store/FormStoreContext';
 import { generateId } from '../../utils/idGenerator';
 import { DraggableTool } from './DraggableTool';
 import { useTranslation } from 'react-i18next';
-import TextFieldsIcon from '@mui/icons-material/TextFields';
-import NumbersIcon from '@mui/icons-material/Numbers';
-import CheckBoxIcon from '@mui/icons-material/CheckBox';
-import ArrowDropDownCircleIcon from '@mui/icons-material/ArrowDropDownCircle';
-import CalendarTodayIcon from '@mui/icons-material/CalendarToday';
-import CloudUploadIcon from '@mui/icons-material/CloudUpload';
-import FormatQuoteIcon from '@mui/icons-material/FormatQuote';
-import LabelIcon from '@mui/icons-material/Label';
-import HorizontalRuleIcon from '@mui/icons-material/HorizontalRule';
-import ViewColumnIcon from '@mui/icons-material/ViewColumn';
-import TabIcon from '@mui/icons-material/Tab';
-import RepeatIcon from '@mui/icons-material/Repeat';
-import TableChartIcon from '@mui/icons-material/TableChart';
-import LayersIcon from '@mui/icons-material/Layers';
-
-interface ToolItem {
-    type: NodeType;
-    label: string;
-    icon: React.ReactNode;
-    defaultProps?: Record<string, any>;
-}
-
-const TOOLS: ToolItem[] = [
-    { type: 'text', label: 'Text Field', icon: <TextFieldsIcon />, defaultProps: { label: 'New Text Field', width: 6 } },
-    { type: 'number', label: 'Number Field', icon: <NumbersIcon />, defaultProps: { label: 'New Number Field', width: 6 } },
-    { type: 'checkbox', label: 'Checkbox', icon: <CheckBoxIcon />, defaultProps: { label: 'New Checkbox', width: 6 } },
-    { type: 'select', label: 'Select', icon: <ArrowDropDownCircleIcon />, defaultProps: { label: 'New Select', width: 6, options: [{ label: 'Option 1', value: '1' }] } },
-    { type: 'date', label: 'Date Picker', icon: <CalendarTodayIcon />, defaultProps: { label: 'New Date', width: 6 } },
-    { type: 'file', label: 'File Upload', icon: <CloudUploadIcon />, defaultProps: { label: 'New File Upload', width: 6 } },
-    { type: 'richtext', label: 'Rich Text', icon: <FormatQuoteIcon />, defaultProps: { label: 'New Rich Text', width: 6 } },
-    { type: 'label', label: 'Label', icon: <LabelIcon />, defaultProps: { text: 'Static Tex', variant: 'body1', width: 6 } },
-];
-
-const LAYOUT_TOOLS: ToolItem[] = [
-    { type: 'divider', label: 'Divider', icon: <HorizontalRuleIcon />, defaultProps: { text: '' } },
-    { type: 'col', label: 'Column', icon: <ViewColumnIcon />, defaultProps: { cols: 6 } },
-    { type: 'tabs', label: 'Tabs', icon: <TabIcon />, defaultProps: {} },
-    { type: 'repeater', label: 'Repeater', icon: <RepeatIcon />, defaultProps: { label: 'Repeater', addLabel: 'addItem' } },
-    { type: 'table', label: 'Table', icon: <TableChartIcon />, defaultProps: { rows: 2, cols: 2, width: 12 } },
-    { type: 'paper', label: 'Paper', icon: <LayersIcon />, defaultProps: { label: 'Paper Group', padding: 2, variant: 'elevation', elevation: 1 } },
-];
+import { getToolboxItems } from '../../plugins/PluginRegistry';
+import type { FieldPlugin } from '../../plugins/FieldPlugin';
+import ExtensionIcon from '@mui/icons-material/Extension';
 
 export const Toolbox: React.FC = () => {
+    const formStore = useFormStore();
     const { t } = useTranslation();
     const [activeTab, setActiveTab] = useState(0);
 
-    const handleAdd = (tool: ToolItem) => {
+    // Get all plugins that should appear in the Toolbox
+    const fieldPlugins = getToolboxItems('field');
+    const layoutPlugins = getToolboxItems('layout');
+
+    const handleAdd = (plugin: FieldPlugin) => {
         const parentId = formStore.selectedNodeId || 'root';
         const newNode = {
-            id: generateId(tool.type),
-            type: tool.type,
-            props: { ...tool.defaultProps, name: generateId('field'), label: t(`toolbox.${tool.type}`) },
+            id: generateId(plugin.type),
+            type: plugin.type,
+            props: { ...plugin.defaultProps, name: generateId('field'), label: t(`toolbox.${plugin.type}`, plugin.label) },
             children: [] as any[]
         };
 
         // Special initialization for Table
-        if (tool.type === 'table') {
-            const rows = tool.defaultProps?.rows || 2;
-            const cols = tool.defaultProps?.cols || 2;
+        if (plugin.type === 'table') {
+            const rows = plugin.defaultProps?.rows || 2;
+            const cols = plugin.defaultProps?.cols || 2;
             const cells = [];
             for (let i = 0; i < rows * cols; i++) {
                 cells.push({
@@ -89,14 +56,14 @@ export const Toolbox: React.FC = () => {
             <Box flexGrow={1} overflow="auto">
                 {activeTab === 0 && (
                     <List sx={{ pt: 1 }}>
-                        {TOOLS.map((tool) => (
-                            <ListItem key={tool.type} disablePadding sx={{ px: 2, py: 0.5 }}>
+                        {fieldPlugins.map((plugin) => (
+                            <ListItem key={plugin.type} disablePadding sx={{ px: 2, py: 0.5 }}>
                                 <DraggableTool
-                                    type={tool.type}
-                                    label={t(`toolbox.${tool.type}`)}
-                                    icon={tool.icon}
-                                    defaultProps={tool.defaultProps}
-                                    onClick={() => handleAdd(tool)}
+                                    type={plugin.type}
+                                    label={t(`toolbox.${plugin.type}`, plugin.label)}
+                                    icon={plugin.icon || <ExtensionIcon />}
+                                    defaultProps={plugin.defaultProps}
+                                    onClick={() => handleAdd(plugin)}
                                 />
                             </ListItem>
                         ))}
@@ -104,14 +71,14 @@ export const Toolbox: React.FC = () => {
                 )}
                 {activeTab === 1 && (
                     <List sx={{ pt: 1 }}>
-                        {LAYOUT_TOOLS.map((tool) => (
-                            <ListItem key={tool.type} disablePadding sx={{ px: 2, py: 0.5 }}>
+                        {layoutPlugins.map((plugin) => (
+                            <ListItem key={plugin.type} disablePadding sx={{ px: 2, py: 0.5 }}>
                                 <DraggableTool
-                                    type={tool.type}
-                                    label={t(`toolbox.${tool.type}`)}
-                                    icon={tool.icon}
-                                    defaultProps={tool.defaultProps}
-                                    onClick={() => handleAdd(tool)}
+                                    type={plugin.type}
+                                    label={t(`toolbox.${plugin.type}`, plugin.label)}
+                                    icon={plugin.icon || <ExtensionIcon />}
+                                    defaultProps={plugin.defaultProps}
+                                    onClick={() => handleAdd(plugin)}
                                 />
                             </ListItem>
                         ))}

package/src/components/fields/CheckboxField.tsx

@@ -1,10 +1,11 @@
 import React from 'react';
 import { Checkbox, FormControlLabel, FormGroup, Box, Typography } from '@mui/material';
 import { observer } from 'mobx-react-lite';
-import { formStore } from '../../store/FormStore';
+import { useFormStore } from '../../store/FormStoreContext';
 import type { FieldProps } from '../FieldRegistry';
 
 export const CheckboxField: React.FC<FieldProps> = observer(({ node, path, isEditing }) => {
+    const formStore = useFormStore();
     const { name, label } = node.props || {};
     const fullPath = path && name ? `${path}.${name}` : name;
     const value = fullPath ? formStore.getValue(fullPath) : false;

package/src/components/fields/DateField.tsx

@@ -3,11 +3,12 @@ import { DatePicker } from '@mui/x-date-pickers/DatePicker';
 import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
 import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns';
 import { observer } from 'mobx-react-lite';
-import { formStore } from '../../store/FormStore';
+import { 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 }) => {
+    const formStore = useFormStore();
     const { name, label, placeholder } = node.props || {};
     const fullPath = path && name ? `${path}.${name}` : name;
     const value = fullPath ? formStore.getValue(fullPath) : null;

package/src/components/fields/FileUploadField.tsx

@@ -2,10 +2,11 @@ import React from 'react';
 import { Box, Button, Typography, Input, FormHelperText } from '@mui/material';
 import CloudUploadIcon from '@mui/icons-material/CloudUpload';
 import { observer } from 'mobx-react-lite';
-import { formStore } from '../../store/FormStore';
+import { useFormStore } from '../../store/FormStoreContext';
 import type { FieldProps } from '../FieldRegistry';
 
 export const FileUploadField: React.FC<FieldProps> = observer(({ node, path, isEditing }) => {
+    const formStore = useFormStore();
     const { name, label } = node.props || {};
     const fullPath = path && name ? `${path}.${name}` : name;
     const value = fullPath ? formStore.getValue(fullPath) : null;

package/src/components/fields/LabelField.tsx

@@ -1,10 +1,11 @@
 import React from 'react';
 import { Typography, Box } from '@mui/material';
 import { observer } from 'mobx-react-lite';
-import { formStore } from '../../store/FormStore';
+import { useFormStore } from '../../store/FormStoreContext';
 import type { FieldProps } from '../FieldRegistry';
 
 export const LabelField: React.FC<FieldProps> = observer(({ node }) => {
+    const formStore = useFormStore();
     const { name, label = '', align = 'left', variant = 'body1' } = node.props || {};
 
     const value = name ? formStore.getValue(name) : undefined;

package/src/components/fields/NumberField.tsx

@@ -1,10 +1,11 @@
 import React from 'react';
 import { TextField as MuiTextField, Box, Typography } from '@mui/material';
 import { observer } from 'mobx-react-lite';
-import { formStore } from '../../store/FormStore';
+import { useFormStore } from '../../store/FormStoreContext';
 import type { FieldProps } from '../FieldRegistry';
 
 export const NumberField: React.FC<FieldProps> = observer(({ node, path, isEditing }) => {
+    const formStore = useFormStore();
     const { name, label } = node.props || {};
 
     const fullPath = path && name ? `${path}.${name}` : name;

package/src/components/fields/RichTextField.tsx

@@ -1,10 +1,11 @@
 import React from 'react';
 import { TextField as MuiTextField, Typography, Box } from '@mui/material';
 import { observer } from 'mobx-react-lite';
-import { formStore } from '../../store/FormStore';
+import { useFormStore } from '../../store/FormStoreContext';
 import type { FieldProps } from '../FieldRegistry';
 
 export const RichTextField: React.FC<FieldProps> = observer(({ node, path, isEditing }) => {
+    const formStore = useFormStore();
     const { name, label, placeholder } = node.props || {};
     const fullPath = path && name ? `${path}.${name}` : name;
     const value = fullPath ? formStore.getValue(fullPath) : '';

package/src/components/fields/SelectField.tsx

@@ -1,11 +1,17 @@
 import React from 'react';
 import { FormControl, Select, MenuItem, Box, Typography, FormHelperText, Autocomplete, TextField as MuiTextField } from '@mui/material';
 import { observer } from 'mobx-react-lite';
-import { formStore } from '../../store/FormStore';
+import { useFormStore } from '../../store/FormStoreContext';
 import type { FieldProps } from '../FieldRegistry';
 
 export const SelectField: React.FC<FieldProps> = observer(({ node, path, isEditing }) => {
-    const { name, label, options = [], enableAutocomplete = false, placeholder } = node.props || {};
+    const formStore = useFormStore();
+    const { name, label, options: staticOptions = [], optionsSource, enableAutocomplete = false, placeholder } = node.props || {};
+
+    // Resolve dynamic options if optionsSource is provided
+    const dynamicOptions = optionsSource ? (formStore.externalConstants[optionsSource] || []) : [];
+    const options = optionsSource ? dynamicOptions : staticOptions;
+
     const fullPath = path && name ? `${path}.${name}` : name;
     const value = fullPath ? formStore.getValue(fullPath) : '';
     const error = fullPath ? formStore.errors[fullPath] : undefined;

package/src/components/fields/TextField.tsx

@@ -1,10 +1,11 @@
 import React from 'react';
 import { TextField as MuiTextField, Box, Typography } from '@mui/material';
 import { observer } from 'mobx-react-lite';
-import { formStore } from '../../store/FormStore';
+import { useFormStore } from '../../store/FormStoreContext';
 import type { FieldProps } from '../FieldRegistry';
 
 export const TextField: React.FC<FieldProps> = observer(({ node, path, isEditing }) => {
+    const formStore = useFormStore();
     const { name, label, placeholder } = node.props || {};
 
     // Resolve full path: path.name or just name

package/src/components/layout/FormRepeater.tsx

@@ -3,12 +3,13 @@ import { Box, Button, Typography, Paper, IconButton } from '@mui/material';
 import DeleteIcon from '@mui/icons-material/Delete';
 import AddIcon from '@mui/icons-material/Add';
 import { observer } from 'mobx-react-lite';
-import { formStore } from '../../store/FormStore';
+import { useFormStore } from '../../store/FormStoreContext';
 import type { FieldProps } from '../FieldRegistry';
 import { LayoutPlaceholder } from './LayoutPlaceholder';
 import { FormChildrenRenderer } from '../builder/FormChildrenRenderer';
 
 export const FormRepeater: React.FC<FieldProps> = observer(({ node, path, isEditing }) => {
+    const formStore = useFormStore();
     const { name, label, addLabel = 'Add Item' } = node.props || {};
     const fullPath = path && name ? `${path}.${name}` : name;
     const items: any[] = (fullPath ? formStore.getValue(fullPath) : []) || [];