@stormlmd/form-builder 0.1.0 → 0.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stormlmd/form-builder",
-  "version": "0.1.0",
+  "version": "0.3.0",
   "type": "module",
   "main": "./src/index.ts",
   "module": "./src/index.ts",

package/src/components/FieldRegistry.ts

@@ -1,9 +1,12 @@
+/**
+ * FieldRegistry — backward-compatible facade over PluginRegistry.
+ *
+ * Existing code that imports registerComponent/getComponent from here
+ * will continue to work unchanged.
+ */
 import React from 'react';
 import type { SchemaNode } from '../store/FormStore';
-import { FormTable } from './layout/FormTable';
-import { FormTableCell } from './layout/FormTableCell';
-import { FormTabs } from './layout/FormTabs';
-import { FormTab } from './layout/FormTab';
+import { registerComponentAsPlugin, getComponentForType } from '../plugins/PluginRegistry';
 
 export interface FieldProps {
     node: SchemaNode;
@@ -13,22 +16,17 @@ export interface FieldProps {
 
 type ComponentType = React.FC<FieldProps>;
 
-const registry: Record<string, ComponentType> = {};
-
+/**
+ * @deprecated Use registerPlugin() for new code. This function is kept
+ * for backward compatibility and creates a minimal plugin entry.
+ */
 export const registerComponent = (type: string, component: ComponentType) => {
-    registry[type] = component;
+    registerComponentAsPlugin(type, component);
 };
 
-import { LabelField } from './fields/LabelField';
-import { FormDivider } from './layout/FormDivider';
-
+/**
+ * Get the React component for a given type.
+ */
 export const getComponent = (type: string): ComponentType | undefined => {
-    return registry[type];
+    return getComponentForType(type);
 };
-
-registerComponent('table', FormTable);
-registerComponent('cell', FormTableCell);
-registerComponent('label', LabelField);
-registerComponent('divider', FormDivider);
-registerComponent('tabs', FormTabs);
-registerComponent('tab', FormTab);

package/src/components/FormRenderer.tsx

@@ -1,9 +1,10 @@
 import React from 'react';
 import { observer } from 'mobx-react-lite';
 import { Box, Typography, Tooltip } from '@mui/material';
-import { formStore } from '../store/FormStore';
+import { useFormStore } from '../store/FormStoreContext';
 import type { SchemaNode } from '../store/FormStore';
 import { getComponent } from './FieldRegistry';
+import { isContainerType } from '../plugins/PluginRegistry';
 import { FormChildrenRenderer } from './builder/FormChildrenRenderer';
 import { EditorWrapper } from './builder/EditorWrapper';
 import { SortableNode } from './builder/SortableNode';
@@ -27,6 +28,7 @@ export const DropIndicator = () => (
 );
 
 export const FormRenderer: React.FC<FormRendererProps> = observer(({ node, path, isEditing }) => {
+    const formStore = useFormStore();
     // Evaluate condition if present (skip in editing mode)
     if (!isEditing && node.condition) {
         const conditionMet = formStore.evaluateCondition(node.condition);
@@ -76,7 +78,7 @@ export const FormRenderer: React.FC<FormRendererProps> = observer(({ node, path,
 
     const width = `${(colSpan / 12) * 100}%`;
 
-    const isContainer = ['root', 'row', 'col', 'tab', 'tabs', 'paper', 'table', 'cell', 'repeater'].includes(node.type);
+    const isContainer = isContainerType(node.type);
 
     const layoutSx = {
         width: width,

package/src/components/builder/EditorWrapper.tsx

@@ -2,7 +2,8 @@ import React from 'react';
 import { Box, IconButton } from '@mui/material';
 import SettingsIcon from '@mui/icons-material/Settings';
 import { observer } from 'mobx-react-lite';
-import { formStore, type SchemaNode } from '../../store/FormStore';
+import { type SchemaNode } from '../../store/FormStore';
+import { useFormStore } from '../../store/FormStoreContext';
 
 interface EditorWrapperProps {
     node: SchemaNode;
@@ -10,6 +11,7 @@ interface EditorWrapperProps {
 }
 
 export const EditorWrapper: React.FC<EditorWrapperProps> = observer(({ node, children }) => {
+    const formStore = useFormStore();
     const isSelected = formStore.selectedNodeId === node.id;
 
     const handleClick = (e: React.MouseEvent) => {

package/src/components/builder/FormBuilder.tsx

@@ -22,9 +22,11 @@ import {
     sortableKeyboardCoordinates
 } from '@dnd-kit/sortable';
 import {
-    formStore,
     type NodeType
 } from '../../store/FormStore';
+import { useFormStore } from '../../store/FormStoreContext';
+import { FormStoreProvider } from '../../store/FormStoreContext';
+import type { FormStore } from '../../store/FormStore';
 import { FormRenderer } from '../FormRenderer';
 import { Toolbox } from './Toolbox';
 import { IntegrationSettings } from './IntegrationSettings';
@@ -34,9 +36,12 @@ import { DroppableCanvas } from './DroppableCanvas';
 
 interface FormBuilderProps {
     onCancel?: () => void;
+    /** Optional FormStore instance. If omitted, the default singleton is used. */
+    store?: FormStore;
 }
 
-export const FormBuilder: React.FC<FormBuilderProps> = observer(({ onCancel }) => {
+const FormBuilderInner: React.FC<FormBuilderProps> = observer(({ onCancel }) => {
+    const formStore = useFormStore();
     const { t } = useTranslation();
     const [activeId, setActiveId] = React.useState<string | null>(null);
     const [activeData, setActiveData] = React.useState<any>(null);
@@ -311,3 +316,16 @@ export const FormBuilder: React.FC<FormBuilderProps> = observer(({ onCancel }) =
         </DndContext>
     );
 });
+
+/** Public FormBuilder component. Wraps in FormStoreProvider if store prop is provided. */
+export const FormBuilder: React.FC<FormBuilderProps> = ({ store, ...props }) => {
+    if (store) {
+        return (
+            <FormStoreProvider store={store}>
+                <FormBuilderInner {...props} />
+            </FormStoreProvider>
+        );
+    }
+    return <FormBuilderInner {...props} />;
+};
+

package/src/components/builder/FormChildrenRenderer.tsx

@@ -2,7 +2,8 @@ import React from 'react';
 import { observer } from 'mobx-react-lite';
 import { Box, type SxProps, type Theme } from '@mui/material';
 import { SortableContext, rectSortingStrategy } from '@dnd-kit/sortable';
-import { formStore, type SchemaNode } from '../../store/FormStore';
+import type { SchemaNode } from '../../store/FormStore';
+import { useFormStore } from '../../store/FormStoreContext';
 import { FormRenderer, DropIndicator } from '../FormRenderer';
 
 interface FormChildrenRendererProps {
@@ -20,6 +21,7 @@ export const FormChildrenRenderer: React.FC<FormChildrenRendererProps> = observe
     layout = 'horizontal',
     path
 }) => {
+    const formStore = useFormStore();
     const childIds = children?.map(c => c.id) || [];
     const { dropIndicator } = formStore;
 

package/src/components/builder/IntegrationSettings.tsx

@@ -9,9 +9,11 @@ import DeleteIcon from '@mui/icons-material/Delete';
 import AddIcon from '@mui/icons-material/Add';
 import SyncIcon from '@mui/icons-material/Sync';
 import { observer } from 'mobx-react-lite';
-import { formStore, type APIIntegration } from '../../store/FormStore';
+import type { APIIntegration } from '../../store/FormStore';
+import { useFormStore } from '../../store/FormStoreContext';
 
 export const IntegrationSettings: React.FC = observer(() => {
+    const formStore = useFormStore();
     const [open, setOpen] = useState(false);
     const [currentIntegration, setCurrentIntegration] = useState<Partial<APIIntegration>>({
         method: 'POST',

package/src/components/builder/OptionsEditor.tsx

@@ -0,0 +1,90 @@
+import React from 'react';
+import { Box, TextField, IconButton, Button, Typography, Paper } from '@mui/material';
+import DeleteIcon from '@mui/icons-material/Delete';
+import AddIcon from '@mui/icons-material/Add';
+import { useTranslation } from 'react-i18next';
+
+interface Option {
+    label: string;
+    value: string;
+}
+
+interface OptionsEditorProps {
+    options: Option[];
+    onChange: (options: Option[]) => void;
+    disabled?: boolean;
+}
+
+export const OptionsEditor: React.FC<OptionsEditorProps> = ({ options, onChange, disabled }) => {
+    const { t } = useTranslation();
+
+    const handleAddOption = () => {
+        const newOptions = [...options, { label: `Option ${options.length + 1}`, value: `opt${options.length + 1}` }];
+        onChange(newOptions);
+    };
+
+    const handleRemoveOption = (index: number) => {
+        const newOptions = options.filter((_, i) => i !== index);
+        onChange(newOptions);
+    };
+
+    const handleUpdateOption = (index: number, key: keyof Option, value: string) => {
+        const newOptions = options.map((opt, i) => i === index ? { ...opt, [key]: value } : opt);
+        onChange(newOptions);
+    };
+
+    if (disabled) {
+        return (
+            <Box>
+                <Typography variant="body2" color="text.secondary">
+                    {t('properties.selectOptionsManagedByAPI') || "Options are managed by API integration"}
+                </Typography>
+                <Box sx={{ mt: 1, opacity: 0.7 }}>
+                    {options.map((opt, i) => (
+                        <Typography key={i} variant="caption" display="block">• {opt.label} ({opt.value})</Typography>
+                    ))}
+                </Box>
+            </Box>
+        );
+    }
+
+    return (
+        <Box>
+            <Typography variant="caption" color="text.secondary" sx={{ mb: 1, display: 'block' }}>
+                {t('properties.selectOptions')}
+            </Typography>
+            <Box display="flex" flexDirection="column" gap={1}>
+                {options.map((opt, index) => (
+                    <Box key={index} display="flex" gap={1} alignItems="center">
+                        <TextField
+                            label={t('properties.optionLabel')}
+                            size="small"
+                            value={opt.label}
+                            onChange={(e) => handleUpdateOption(index, 'label', e.target.value)}
+                            sx={{ flexGrow: 1 }}
+                        />
+                        <TextField
+                            label={t('properties.optionValue')}
+                            size="small"
+                            value={opt.value}
+                            onChange={(e) => handleUpdateOption(index, 'value', e.target.value)}
+                            sx={{ flexGrow: 1 }}
+                        />
+                        <IconButton size="small" color="error" onClick={() => handleRemoveOption(index)}>
+                            <DeleteIcon fontSize="small" />
+                        </IconButton>
+                    </Box>
+                ))}
+                <Button
+                    startIcon={<AddIcon />}
+                    onClick={handleAddOption}
+                    sx={{ mt: 1, alignSelf: 'flex-start' }}
+                    variant="outlined"
+                    size="small"
+                >
+                    {t('properties.addOption')}
+                </Button>
+            </Box>
+        </Box>
+    );
+};

package/src/components/builder/PropertiesModal.tsx

@@ -13,7 +13,7 @@ import {
 } from '@mui/material';
 import { observer } from 'mobx-react-lite';
 import { useTranslation } from 'react-i18next';
-import { formStore } from '../../store/FormStore';
+import { useFormStore } from '../../store/FormStoreContext';
 import CloseIcon from '@mui/icons-material/Close';
 import { PropertiesPanel } from './PropertiesPanel'; // We reuse the inner content for now
 // Actually PropertiesPanel has its own layout, we should extract the content 
@@ -23,6 +23,7 @@ import { PropertiesPanel } from './PropertiesPanel'; // We reuse the inner conte
 // Let's modify PropertiesPanel to accept a "mode" or just use it as content.
 
 export const PropertiesModal: React.FC = observer(() => {
+    const formStore = useFormStore();
     const { t } = useTranslation();
     const theme = useTheme();
     const fullScreen = useMediaQuery(theme.breakpoints.down('md'));

package/src/components/builder/PropertiesPanel.tsx

@@ -1,10 +1,11 @@
 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 { useFormStore } from '../../store/FormStoreContext';
 import type { SchemaNode } from '../../store/FormStore';
 import DeleteIcon from '@mui/icons-material/Delete';
 import { useTranslation } from 'react-i18next';
+import { getPlugin } from '../../plugins/PluginRegistry';
 
 interface TabPanelProps {
     children?: React.ReactNode;
@@ -46,11 +47,14 @@ 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 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 },
@@ -416,13 +420,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 +455,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 +619,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 */}

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) : []) || [];

package/src/components/layout/FormTabs.tsx

@@ -3,10 +3,11 @@ import { Box, Tabs, Tab, Paper } from '@mui/material';
 import { observer } from 'mobx-react-lite';
 import type { FieldProps } from '../FieldRegistry';
 import { FormRenderer } from '../FormRenderer';
-import { formStore } from '../../store/FormStore';
+import { useFormStore } from '../../store/FormStoreContext';
 import { LayoutPlaceholder } from './LayoutPlaceholder';
 
 export const FormTabs: React.FC<FieldProps> = observer(({ node, path, isEditing }) => {
+    const formStore = useFormStore();
     const [activeTab, setActiveTab] = React.useState(0);
     const allTabs = node.children || [];
     const tabs = isEditing

package/src/components/registerComponents.ts

@@ -1,4 +1,8 @@
+import { registerPlugin } from '../plugins/PluginRegistry';
 import { registerComponent } from './FieldRegistry';
+import type { FieldPlugin } from '../plugins/FieldPlugin';
+
+// Field components
 import { TextField } from './fields/TextField';
 import { NumberField } from './fields/NumberField';
 import { CheckboxField } from './fields/CheckboxField';
@@ -6,25 +10,77 @@ import { SelectField } from './fields/SelectField';
 import { DateField } from './fields/DateField';
 import { FileUploadField } from './fields/FileUploadField';
 import { RichTextField } from './fields/RichTextField';
+import { LabelField } from './fields/LabelField';
+
+// Layout components
 import { FormRow } from './layout/FormRow';
 import { FormCol } from './layout/FormCol';
 import { FormTabs } from './layout/FormTabs';
 import { FormTab } from './layout/FormTab';
 import { FormRepeater } from './layout/FormRepeater';
 import { FormPaper } from './layout/FormPaper';
+import { FormTable } from './layout/FormTable';
+import { FormTableCell } from './layout/FormTableCell';
+import { FormDivider } from './layout/FormDivider';
+
+// Icons
+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';
+import React from 'react';
+
+/**
+ * Built-in field plugins.
+ */
+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: '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 },
+    { type: 'richtext', label: 'Rich Text', icon: React.createElement(FormatQuoteIcon), category: 'field', defaultProps: { label: 'New Rich Text', width: 6 }, component: RichTextField },
+    { type: 'label', label: 'Label', icon: React.createElement(LabelIcon), category: 'field', defaultProps: { text: 'Static Text', variant: 'body1', width: 6 }, component: LabelField },
+];
+
+/**
+ * Built-in layout plugins.
+ */
+const BUILT_IN_LAYOUT_PLUGINS: FieldPlugin[] = [
+    { type: 'divider', label: 'Divider', icon: React.createElement(HorizontalRuleIcon), category: 'layout', defaultProps: { text: '' }, component: FormDivider },
+    { type: 'col', label: 'Column', icon: React.createElement(ViewColumnIcon), category: 'layout', isContainer: true, defaultProps: { cols: 6 }, component: FormCol },
+    { type: 'tabs', label: 'Tabs', icon: React.createElement(TabIcon), category: 'layout', isContainer: true, defaultProps: {}, component: FormTabs },
+    { type: 'repeater', label: 'Repeater', icon: React.createElement(RepeatIcon), category: 'layout', isContainer: true, defaultProps: { label: 'Repeater', addLabel: 'addItem' }, component: FormRepeater },
+    { type: 'table', label: 'Table', icon: React.createElement(TableChartIcon), category: 'layout', isContainer: true, defaultProps: { rows: 2, cols: 2, width: 12 }, component: FormTable },
+    { type: 'paper', label: 'Paper', icon: React.createElement(LayersIcon), category: 'layout', isContainer: true, defaultProps: { label: 'Paper Group', padding: 2, variant: 'elevation', elevation: 1 }, component: FormPaper },
+];
+
+/**
+ * Internal-only plugins (not shown in Toolbox but needed for rendering).
+ */
+const INTERNAL_PLUGINS: FieldPlugin[] = [
+    { type: 'tab', label: 'Tab', category: 'layout', isContainer: true, showInToolbox: false, component: FormTab },
+    { type: 'cell', label: 'Cell', category: 'layout', isContainer: true, showInToolbox: false, component: FormTableCell },
+    { type: 'row', label: 'Row', category: 'layout', isContainer: true, showInToolbox: false, defaultProps: {}, component: FormRow },
+];
 
+/**
+ * Registers all built-in components as full plugins.
+ * Call this once at app startup. Backward compatible.
+ */
 export const registerAllComponents = () => {
-    registerComponent('text', TextField);
-    registerComponent('number', NumberField);
-    registerComponent('checkbox', CheckboxField);
-    registerComponent('select', SelectField);
-    registerComponent('date', DateField);
-    registerComponent('file', FileUploadField);
-    registerComponent('richtext', RichTextField);
-    registerComponent('row', FormRow);
-    registerComponent('col', FormCol);
-    registerComponent('tabs', FormTabs);
-    registerComponent('tab', FormTab);
-    registerComponent('repeater', FormRepeater);
-    registerComponent('paper', FormPaper);
+    for (const plugin of [...BUILT_IN_FIELD_PLUGINS, ...BUILT_IN_LAYOUT_PLUGINS, ...INTERNAL_PLUGINS]) {
+        registerPlugin(plugin);
+    }
 };

package/src/index.ts

@@ -3,3 +3,10 @@ export * from './components/FormRenderer';
 export * from './components/FieldRegistry';
 export * from './components/registerComponents';
 export { FormBuilder } from './components/builder/FormBuilder';
+
+// Plugin system
+export { registerPlugin, registerPlugins, getPlugin, getAllPlugins, getToolboxItems, isContainerType } from './plugins/PluginRegistry';
+export type { FieldPlugin, FieldProps, PluginPropertiesEditorProps } from './plugins/FieldPlugin';
+
+// Context-bound state management
+export { FormStoreProvider, useFormStore, createFormStore } from './store/FormStoreContext';

package/src/plugins/FieldPlugin.ts

@@ -0,0 +1,63 @@
+import React from 'react';
+import type { SchemaNode, ValidationRules } from '../store/FormStore';
+
+/**
+ * Props passed to every field component (built-in or plugin).
+ * Re-exported here for convenience when writing plugins.
+ */
+export interface FieldProps {
+    node: SchemaNode;
+    path?: string;
+    isEditing?: boolean;
+}
+
+/**
+ * Props passed to a plugin's custom properties editor.
+ */
+export interface PluginPropertiesEditorProps {
+    node: SchemaNode;
+    onChange: (key: string, value: any) => void;
+}
+
+/**
+ * Describes a full plugin that integrates into both
+ * the FormBuilder (constructor) and FormRenderer (viewer).
+ */
+export interface FieldPlugin {
+    /** Unique type identifier (e.g. 'rating', 'signature', 'address') */
+    type: string;
+
+    /** Display name shown in the Toolbox */
+    label: string;
+
+    /** Icon for the Toolbox (React element, e.g. MUI icon) */
+    icon?: React.ReactNode;
+
+    /** Category in the Toolbox: 'field' (default) or 'layout' */
+    category?: 'field' | 'layout';
+
+    /** Whether to show in Toolbox (default: true). Set to false for internal types. */
+    showInToolbox?: boolean;
+
+    /** Whether this type is a container that can hold children */
+    isContainer?: boolean;
+
+    /** Default props applied when a new node of this type is created */
+    defaultProps?: Record<string, any>;
+
+    /** React component used to render the field */
+    component: React.FC<FieldProps>;
+
+    /**
+     * Optional React component rendered in the Properties Panel
+     * when a node of this type is selected.
+     */
+    propertiesEditor?: React.FC<PluginPropertiesEditorProps>;
+
+    /**
+     * Optional custom validation function.
+     * Called after standard validation. Return an error message string
+     * or null if valid.
+     */
+    validate?: (value: any, rules: ValidationRules) => string | null;
+}

package/src/plugins/PluginRegistry.ts

@@ -0,0 +1,94 @@
+import type { FieldPlugin, FieldProps } from './FieldPlugin';
+import type React from 'react';
+
+/**
+ * Central plugin registry.
+ * Stores all registered plugins (both built-in and user-defined).
+ */
+const plugins: Map<string, FieldPlugin> = new Map();
+
+/**
+ * Built-in container types that are always recognized.
+ * User plugins can also set isContainer: true.
+ */
+const BUILT_IN_CONTAINERS = new Set([
+    'root', 'row', 'col', 'tabs', 'tab', 'paper', 'repeater', 'table', 'cell'
+]);
+
+/**
+ * Register a single plugin. If a plugin with the same type already exists,
+ * it will be overwritten (allowing user overrides of built-in types).
+ */
+export function registerPlugin(plugin: FieldPlugin): void {
+    plugins.set(plugin.type, plugin);
+}
+
+/**
+ * Register multiple plugins at once.
+ */
+export function registerPlugins(pluginList: FieldPlugin[]): void {
+    for (const plugin of pluginList) {
+        registerPlugin(plugin);
+    }
+}
+
+/**
+ * Get a plugin by its type identifier.
+ */
+export function getPlugin(type: string): FieldPlugin | undefined {
+    return plugins.get(type);
+}
+
+/**
+ * Get all registered plugins.
+ */
+export function getAllPlugins(): FieldPlugin[] {
+    return Array.from(plugins.values());
+}
+
+/**
+ * Get plugins for the Toolbox, filtered by category.
+ */
+export function getToolboxItems(category: 'field' | 'layout'): FieldPlugin[] {
+    return getAllPlugins().filter(p =>
+        (p.category || 'field') === category && p.showInToolbox !== false
+    );
+}
+
+/**
+ * Check if a type is a container (can hold children).
+ * Returns true for built-in containers and user plugins with isContainer: true.
+ */
+export function isContainerType(type: string): boolean {
+    if (BUILT_IN_CONTAINERS.has(type)) return true;
+    const plugin = getPlugin(type);
+    return plugin?.isContainer === true;
+}
+
+/**
+ * Backward-compatible bridge: register a bare component as a minimal plugin.
+ * Used by the legacy registerComponent() API.
+ */
+export function registerComponentAsPlugin(type: string, component: React.FC<FieldProps>): void {
+    // Only create a new plugin if one doesn't already exist for this type
+    // (prevents overwriting a full plugin with a bare component)
+    if (!plugins.has(type)) {
+        registerPlugin({
+            type,
+            label: type,
+            component,
+        });
+    } else {
+        // Update just the component on the existing plugin
+        const existing = plugins.get(type)!;
+        existing.component = component;
+    }
+}
+
+/**
+ * Get the React component for a given type.
+ * Backward-compatible replacement for the old getComponent().
+ */
+export function getComponentForType(type: string): React.FC<FieldProps> | undefined {
+    return plugins.get(type)?.component;
+}

package/src/store/FormStore.ts

@@ -1,26 +1,15 @@
 import { makeAutoObservable, toJS } from "mobx";
 import i18next from 'i18next';
 import { transformAPIDataToSchema, transformSchemaToSubmission, transformDictionaryToOptions } from '../utils/apiTransformer';
+import { getPlugin, isContainerType } from '../plugins/PluginRegistry';
 
-export type NodeType =
-  | 'root'
-  | 'text'
-  | 'number'
-  | 'checkbox'
-  | 'select'
-  | 'row'
-  | 'col'
-  | 'tabs' // container for tabs
-  | 'tab'  // individual tab
-  | 'table'
-  | 'cell'
-  | 'paper'
-  | 'repeater'
-  | 'date'
-  | 'file'
-  | 'richtext'
-  | 'label'
-  | 'divider';
+/**
+ * Node type identifier. Open string type to support plugin-defined types.
+ * Built-in types: 'root', 'text', 'number', 'checkbox', 'select', 'row',
+ * 'col', 'tabs', 'tab', 'table', 'cell', 'paper', 'repeater', 'date',
+ * 'file', 'richtext', 'label', 'divider'.
+ */
+export type NodeType = string;
 
 export interface FieldOption {
   label: string;
@@ -101,6 +90,9 @@ export class FormStore {
   // Session data (user info, report IDs, etc.)
   sessionVariables: Record<string, any> = {};
 
+  // External constants for formulas and lists
+  externalConstants: Record<string, any> = {};
+
   // Pool of available API columns for mapping
   availableApiColumns: any[] = [];
 
@@ -113,6 +105,10 @@ export class FormStore {
     this.isEditMode = mode;
   }
 
+  setConstant(name: string, value: any) {
+    this.externalConstants[name] = value;
+  }
+
   // --- Actions ---
 
   selectNode(id: string | null) {
@@ -308,7 +304,7 @@ export class FormStore {
 
   // --- Validation ---
 
-  validateField(path: string, value: any, rules?: ValidationRules) {
+  validateField(path: string, value: any, rules?: ValidationRules, nodeType?: string) {
     if (!rules) return;
 
     let error: string | null = null;
@@ -369,6 +365,14 @@ export class FormStore {
       }
     }
 
+    // Plugin custom validation
+    if (!error && nodeType) {
+      const plugin = getPlugin(nodeType);
+      if (plugin?.validate) {
+        error = plugin.validate(value, rules);
+      }
+    }
+
     if (error) {
       this.errors[path] = error;
     } else {
@@ -420,7 +424,13 @@ export class FormStore {
           return JSON.stringify(new Date().toISOString());
         }
 
-        const value = this.getValue(fieldName);
+        let value = this.getValue(fieldName);
+
+        // Fallback to external constants if not found in form values
+        if (value === undefined && this.externalConstants[fieldName] !== undefined) {
+          value = this.externalConstants[fieldName];
+        }
+
         // If it's a number, return it raw. If it's a string, JSON.stringify it.
         // If undefined/null, return '0' for safety in math.
         if (value === undefined || value === null) return '0';
@@ -648,8 +658,7 @@ export class FormStore {
     const overNode = this.findNode(this.rootNode, overId);
 
     // If we drop on a container, the parent is the container itself
-    const containerTypes: NodeType[] = ['root', 'row', 'col', 'tabs', 'tab', 'paper', 'repeater', 'table', 'cell'];
-    const isOverContainer = overNode && containerTypes.includes(overNode.type);
+    const isOverContainer = overNode && isContainerType(overNode.type);
     const overParent = isOverContainer ? overNode : this.findParent(this.rootNode, overId);
 
     if (!activeNode || !activeParent || !activeParent.children) {

package/src/store/FormStoreContext.tsx

@@ -0,0 +1,66 @@
+import React, { createContext, useContext } from 'react';
+import { FormStore, formStore as defaultFormStore } from './FormStore';
+
+/**
+ * React Context for providing FormStore instances to the component tree.
+ * When null, components fall back to the default singleton.
+ */
+const FormStoreContext = createContext<FormStore | null>(null);
+
+/**
+ * Hook to get the current FormStore from context.
+ * Falls back to the default singleton if no provider is found.
+ */
+export function useFormStore(): FormStore {
+    const store = useContext(FormStoreContext);
+    return store ?? defaultFormStore;
+}
+
+/**
+ * Factory function to create a new isolated FormStore instance.
+ * Use this when you need multiple independent form instances.
+ *
+ * @example
+ * const myStore = createFormStore();
+ * <FormStoreProvider store={myStore}>
+ *   <FormBuilder />
+ * </FormStoreProvider>
+ */
+export function createFormStore(): FormStore {
+    return new FormStore();
+}
+
+interface FormStoreProviderProps {
+    /** FormStore instance to provide. If omitted, creates a new one. */
+    store?: FormStore;
+    children: React.ReactNode;
+}
+
+/**
+ * Provider component that supplies a FormStore instance to all descendant
+ * form components. Enables multiple independent form instances on the same page.
+ *
+ * @example
+ * // Using an external store
+ * const store = createFormStore();
+ * <FormStoreProvider store={store}>
+ *   <FormBuilder />
+ * </FormStoreProvider>
+ *
+ * @example
+ * // Auto-creates an internal store
+ * <FormStoreProvider>
+ *   <FormBuilder />
+ * </FormStoreProvider>
+ */
+export const FormStoreProvider: React.FC<FormStoreProviderProps> = ({ store, children }) => {
+    const [internalStore] = React.useState(() => store ?? createFormStore());
+
+    return (
+        <FormStoreContext.Provider value={store ?? internalStore}>
+            {children}
+        </FormStoreContext.Provider>
+    );
+};
+
+export { FormStoreContext };