@openg2p/registry-widgets 0.1.1 → 0.1.2

package/dist/index.esm.js

@@ -1,8 +1,9 @@
 import { createSlice, configureStore } from '@reduxjs/toolkit';
-import React, { useMemo, useEffect, useCallback, createContext, useContext, useState, useRef } from 'react';
+import React, { useContext, useRef, useEffect, useMemo, useCallback, createContext, useState } from 'react';
 import { useDispatch, useSelector, Provider, useStore } from 'react-redux';
 import { z } from 'zod';
 import { createPortal } from 'react-dom';
+import { JsonEditor } from 'json-edit-react';
 import i18n from 'i18next';
 export { default as i18n } from 'i18next';
 import { initReactI18next } from 'react-i18next';
@@ -14,19 +15,58 @@ const initialState = {
     loading: {},
     dataSources: {},
 };
+// Track recent setValue calls to detect race conditions
+const recentSetValueCalls = new Map();
 const widgetSlice = createSlice({
     name: 'widget',
     initialState,
     reducers: {
         setValue: (state, action) => {
-            state.values[action.payload.widgetId] = action.payload.value;
+            const { widgetId, value } = action.payload;
+            const previousValue = state.values[widgetId];
+            const now = Date.now();
+            // Check if we recently set a different value (race condition detection)
+            const recentCall = recentSetValueCalls.get(widgetId);
+            const isRaceCondition = recentCall &&
+                recentCall.timestamp > now - 100 && // Within 100ms
+                recentCall.value !== value &&
+                recentCall.value === previousValue; // Trying to set back to old value
+            // Track this call
+            recentSetValueCalls.set(widgetId, { value, timestamp: now });
+            // Clean up old entries (older than 1 second)
+            for (const [key, call] of recentSetValueCalls.entries()) {
+                if (now - call.timestamp > 1000) {
+                    recentSetValueCalls.delete(key);
+                }
+            }
+            // CRITICAL: Prevent race condition - if we just set a new value, don't allow setting the old value back
+            if (isRaceCondition) {
+                return; // Don't update the value
+            }
+            state.values[widgetId] = value;
             // Clear errors when value changes
-            if (state.errors[action.payload.widgetId]) {
-                delete state.errors[action.payload.widgetId];
+            if (state.errors[widgetId]) {
+                delete state.errors[widgetId];
             }
         },
         setValues: (state, action) => {
-            state.values = { ...state.values, ...action.payload };
+            // setWidgetValue returns the complete updated state object with all keys preserved
+            // We need to do a deep merge to preserve nested structures that aren't in the payload
+            // But since setWidgetValue already includes all existing data, we can merge at top level
+            // However, we need to be careful: if payload has nested objects, we need to deep merge them
+            const merged = { ...state.values };
+            for (const [key, value] of Object.entries(action.payload)) {
+                if (value !== null && typeof value === 'object' && !Array.isArray(value) &&
+                    merged[key] !== null && typeof merged[key] === 'object' && !Array.isArray(merged[key])) {
+                    // Deep merge nested objects to preserve properties not in the payload
+                    merged[key] = { ...merged[key], ...value };
+                }
+                else {
+                    // Replace primitives, arrays, or null values, or if target is not an object
+                    merged[key] = value;
+                }
+            }
+            state.values = merged;
         },
         setError: (state, action) => {
             if (action.payload.errors.length > 0) {
@@ -275,7 +315,7 @@ const validateWidget = (value, validation, required = false) => {
         }
         catch (error) {
             if (error instanceof z.ZodError) {
-                errors.push(...error.errors.map((e) => e.message));
+                errors.push(...error.issues.map((e) => e.message));
             }
             else {
                 errors.push('Validation failed');
@@ -734,31 +774,97 @@ const getStaticDataSource = (dataSource) => {
 };
 /**
  * Get API data source options
+ * Uses dataSourceRequestHandler to make API calls through host application
  */
-const getApiDataSource = async (dataSource, allValues, apiAdapter) => {
-    if (!apiAdapter) {
-        console.warn('API adapter not provided for API data source');
+const getApiDataSource = async (dataSource, allValues, dataSourceRequestHandler, levelId // Optional level_id from widget-geo-config.level
+) => {
+    if (!dataSourceRequestHandler) {
+        console.error('[getApiDataSource] dataSourceRequestHandler is required for API data sources');
         return [];
     }
     try {
         // Get dependency value if exists
-        const params = {};
+        // dependsOn can be either a data path (e.g., "person.address") or a widget-id
+        let depValue = null;
         if (dataSource.dependsOn) {
-            const depValue = getValueByPath(allValues, dataSource.dependsOn);
-            if (depValue !== null && depValue !== undefined && depValue !== '') {
-                params[dataSource.dependsOn.split('.').pop() || 'filter'] = depValue;
+            // First try as data path
+            depValue = getValueByPath(allValues, dataSource.dependsOn);
+            // If not found and doesn't contain dots, try as widget-id
+            if ((depValue === null || depValue === undefined) && !dataSource.dependsOn.includes('.')) {
+                depValue = allValues[dataSource.dependsOn];
             }
-            else {
+            if (depValue === null || depValue === undefined || depValue === '') {
                 // If dependency is empty, return empty array
                 return [];
             }
         }
-        const response = await apiAdapter(dataSource.url, {
-            method: dataSource.method || 'GET',
-            headers: dataSource.headers,
-            body: dataSource.body,
-            params,
-        });
+        // Build request parameters
+        const method = dataSource.method || 'GET';
+        // Extract static params from dataSource
+        // Include explicit params object and any additional fields (like level_id)
+        const staticParams = { ...dataSource.params };
+        // Extract additional fields that aren't part of the standard ApiDataSource interface
+        // These are fields like level_id that might be directly on the dataSource
+        // BUT: level_id should come from widget-geo-config.level, not from dataSource
+        const standardFields = ['type', 'service', 'endpoint', 'url', 'method', 'dependsOn', 'valueKey', 'labelKey', 'headers', 'body', 'params', 'level_id'];
+        for (const [key, value] of Object.entries(dataSource)) {
+            if (!standardFields.includes(key) && value !== undefined && value !== null) {
+                staticParams[key] = value;
+            }
+        }
+        // If levelId is provided (from widget-geo-config.level), use it instead of any level_id in dataSource
+        if (levelId) {
+            staticParams.level_id = levelId;
+        }
+        // Build request params object
+        const requestParams = { ...staticParams };
+        // Add dependency value to params
+        if (dataSource.dependsOn && depValue !== null && depValue !== undefined) {
+            // Extract the actual value ID if depValue is an object
+            const parentValueId = typeof depValue === 'object' && depValue !== null
+                ? (depValue.level_value_id || depValue.id || depValue.value || depValue)
+                : depValue;
+            // For geo APIs, use parent_level_value_id
+            if (staticParams.level_id) {
+                requestParams.parent_level_value_id = parentValueId;
+            }
+            else {
+                // For other APIs, use the dependency field name as param key
+                const paramKey = dataSource.dependsOn.split('.').pop() || 'filter';
+                requestParams[paramKey] = parentValueId;
+            }
+        }
+        else if (staticParams.level_id) {
+            // First level has no parent
+            requestParams.parent_level_value_id = null;
+        }
+        // Get service mnemonic and endpoint (required)
+        const service = dataSource.service;
+        const endpoint = dataSource.endpoint;
+        if (!service) {
+            console.error('[getApiDataSource] API data source missing service mnemonic. Use "service" field instead of "url"');
+            return [];
+        }
+        if (!endpoint) {
+            console.error('[getApiDataSource] API data source missing endpoint. Use "endpoint" field to specify the operation (e.g., "get_g2p_geo_level_values")');
+            return [];
+        }
+        let response;
+        try {
+            response = await dataSourceRequestHandler(service, endpoint, method, requestParams, {
+                headers: dataSource.headers,
+            });
+        }
+        catch (error) {
+            console.error('[getApiDataSource] Handler error:', error);
+            throw error;
+        }
+        // Handle OpenG2P response format (response_body.response_payload)
+        if (response && typeof response === 'object') {
+            if (response.response_body?.response_payload && Array.isArray(response.response_body.response_payload)) {
+                return response.response_body.response_payload;
+            }
+        }
         // Handle array response
         if (Array.isArray(response)) {
             return response;
@@ -805,49 +911,134 @@ const transformDataSourceOptions = (data, valueKey, labelKey) => {
     }));
 };
 
+const WidgetEventBusContext = React.createContext(null);
+/**
+ * Hook to access the widget event bus from context
+ */
+const useWidgetEventBus = () => {
+    return useContext(WidgetEventBusContext);
+};
+
 // Define stable empty arrays to avoid selector reference issues
 const EMPTY_ERRORS = [];
-const EMPTY_DATA_SOURCE = [];
+const EMPTY_DATA_SOURCE$1 = [];
 const useBaseWidget = (options) => {
-    const { config, apiAdapter, schemaData, onValueChange } = options;
+    const { config, dataSourceRequestHandler, schemaData, onValueChange } = options;
     const dispatch = useDispatch();
+    const eventBus = useWidgetEventBus();
     const widgetId = config['widget-id'];
     // Get state from Redux
     const values = useSelector((state) => state.widget.values);
     const errors = useSelector((state) => state.widget.errors[widgetId] ?? EMPTY_ERRORS);
     const touched = useSelector((state) => state.widget.touched[widgetId] || false);
     const loading = useSelector((state) => state.widget.loading[widgetId] || false);
-    const dataSourceOptions = useSelector((state) => state.widget.dataSources[widgetId] ?? EMPTY_DATA_SOURCE);
+    const dataSourceOptions = useSelector((state) => state.widget.dataSources[widgetId] ?? EMPTY_DATA_SOURCE$1);
     // Skip value handling for layout widgets (they don't store data values)
     // Infer layout from widget-type
     const isLayoutWidget = config['widget-type'] === 'layout';
+    // Track if user has explicitly set a value to prevent default from overwriting
+    const userHasSetValueRef = useRef(false);
+    // Use ref for values to avoid stale closures in handleChange
+    const valuesRef = useRef(values);
+    useEffect(() => {
+        valuesRef.current = values;
+    }, [values]);
+    // Track last dispatched value to prevent duplicate dispatches
+    const lastDispatchedValueRef = useRef(null);
     // Get current value
     const currentValue = useMemo(() => {
         if (isLayoutWidget) {
             return undefined; // Layout widgets don't have values
         }
-        const value = getWidgetValue(values, config['widget-data-path'], widgetId);
+        // Try to get value from widgetId first (this should have the actual selected value)
+        // For geo widgets with dataPath, widgetId stores the actual ID, while dataPath stores the hierarchy object
+        let value = values[widgetId];
+        // If widgetId doesn't have a value, try dataPath
+        if (value === undefined && config['widget-data-path']) {
+            value = getWidgetValue(values, config['widget-data-path'], widgetId);
+            // CRITICAL: For geo widgets with dataPath, the value might be stored as a hierarchy object
+            // Extract the actual value (geo_lowest_level_value_id) if it's an object
+            const geoConfig = config['widget-geo-config'];
+            if (geoConfig?.isLastLevel && value && typeof value === 'object' && !Array.isArray(value)) {
+                // If it's a geo hierarchy object, extract the actual value
+                if ('geo_lowest_level_value_id' in value) {
+                    value = value.geo_lowest_level_value_id;
+                }
+                else if ('value' in value) {
+                    value = value.value;
+                }
+                else if ('id' in value) {
+                    value = value.id;
+                }
+            }
+        }
+        // If value is still undefined and user has set a value, try reading from widgetId as backup
+        // This handles cases where dataPath lookup might fail temporarily
+        if (value === undefined && userHasSetValueRef.current && values[widgetId] !== undefined) {
+            value = values[widgetId];
+        }
+        // If user has explicitly set a value, always return it (even if undefined/null)
+        // This prevents the default from overwriting user selections
+        if (userHasSetValueRef.current) {
+            return value;
+        }
+        // Only fall back to default if user hasn't set a value yet
+        // But check if value is explicitly null (user cleared it) vs undefined (never set)
+        if (value === null) {
+            return null; // User explicitly cleared it, don't use default
+        }
         return value !== undefined ? value : config['widget-data-default'];
     }, [values, config, widgetId, isLayoutWidget]);
-    // Initialize default value (skip for layout widgets)
+    // Initialize default value only once on mount (skip for layout widgets)
     useEffect(() => {
         if (isLayoutWidget) {
             return;
         }
-        if (config['widget-data-default'] !== undefined && currentValue === undefined) {
+        // Only initialize default if value is undefined and user hasn't set a value yet
+        if (!userHasSetValueRef.current && config['widget-data-default'] !== undefined && currentValue === undefined) {
             handleChange(config['widget-data-default'], false);
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [isLayoutWidget]); // handleChange and currentValue are stable or handled separately
+    }, [isLayoutWidget]); // Only run once on mount
     // Handle value change
+    // CRITICAL: Don't include 'values' in dependency array - it causes the callback to be recreated
+    // every time values change, which can lead to stale closures and double dispatches
     const handleChange = useCallback((newValue, validate = true) => {
-        const updatedValues = setWidgetValue(values, config['widget-data-path'], widgetId, newValue);
-        // Update Redux store
-        Object.entries(updatedValues).forEach(([key, value]) => {
-            if (key !== widgetId || value !== values[key]) {
-                dispatch(setValue({ widgetId: key, value }));
+        // Use valuesRef to get the latest values, not the stale closure value
+        const currentValues = valuesRef.current;
+        const currentValue = currentValues[widgetId] || getWidgetValue(currentValues, config['widget-data-path'], widgetId);
+        // CRITICAL: Prevent setting the same value (avoids unnecessary dispatches and potential loops)
+        if (currentValue === newValue) {
+            return;
+        }
+        // Mark that user has set a value (unless this is the default initialization)
+        if (newValue !== config['widget-data-default'] || userHasSetValueRef.current) {
+            userHasSetValueRef.current = true;
+        }
+        // CRITICAL FIX: If there's no dataPath, just set the value directly
+        // If there's a dataPath, we need to update both the widgetId and the dataPath
+        if (!config['widget-data-path']) {
+            // No dataPath: just set the value directly by widgetId
+            // CRITICAL: Check if we just dispatched this value to prevent duplicate dispatches
+            if (lastDispatchedValueRef.current === newValue) {
+                return;
             }
-        });
+            lastDispatchedValueRef.current = newValue;
+            dispatch(setValue({ widgetId, value: newValue }));
+        }
+        else {
+            // Has dataPath: update both widgetId and dataPath
+            // CRITICAL: Create updated values object with newValue already set
+            // This prevents setWidgetValue from reading stale values
+            const currentValuesWithUpdate = {
+                ...valuesRef.current,
+                [widgetId]: newValue, // Ensure widgetId has the new value
+            };
+            const updatedValues = setWidgetValue(currentValuesWithUpdate, config['widget-data-path'], widgetId, newValue);
+            // setWidgetValue returns the complete updated structure with all existing data preserved
+            // Use setValues to update the entire state with deep merge
+            dispatch(setValues(updatedValues));
+        }
         // Validate if needed
         if (validate) {
             const validationErrors = validateWidget(newValue, config['widget-data-validation'], config['widget-required']);
@@ -857,14 +1048,36 @@ const useBaseWidget = (options) => {
         if (onValueChange) {
             onValueChange(widgetId, newValue);
         }
-    }, [values, config, widgetId, dispatch, onValueChange]);
+        // Publish widget:change event
+        // Skip publishing for last-level geo widgets (no child widgets waiting)
+        const geoConfig = config['widget-geo-config'];
+        const isLastLevelGeo = geoConfig?.isLastLevel === true;
+        if (eventBus && !isLastLevelGeo) {
+            eventBus.publish({
+                type: 'widget:change',
+                widgetId,
+                value: newValue,
+                timestamp: Date.now(),
+            });
+        }
+    }, [config, widgetId, dispatch, onValueChange, eventBus] // Removed 'values' to prevent stale closures
+    );
     // Handle blur
     const handleBlur = useCallback(() => {
         dispatch(setTouched({ widgetId, touched: true }));
         // Validate on blur
         const validationErrors = validateWidget(currentValue, config['widget-data-validation'], config['widget-required']);
         dispatch(setError({ widgetId, errors: validationErrors }));
-    }, [currentValue, config, widgetId, dispatch]);
+        // Publish widget:blur event
+        if (eventBus) {
+            eventBus.publish({
+                type: 'widget:blur',
+                widgetId,
+                value: currentValue,
+                timestamp: Date.now(),
+            });
+        }
+    }, [currentValue, config, widgetId, dispatch, eventBus]);
     // Get field value helper
     const getFieldValue = useCallback((path) => {
         return getWidgetValue(values, path, '');
@@ -894,33 +1107,102 @@ const useBaseWidget = (options) => {
         }
         return formatValue(currentValue, config['widget-data-format'], config.widget);
     }, [currentValue, config]);
+    // Track readonly state explicitly to detect changes
+    // Use JSON.stringify to create a stable reference for the dependency array
+    const isReadonly = config['widget-readonly'] ?? false;
+    const dataSource = config['widget-data-source'];
+    const geoConfig = config['widget-geo-config'];
+    // Use ref to store handler to avoid stale closures
+    const handlerRef = useRef(dataSourceRequestHandler);
+    useEffect(() => {
+        handlerRef.current = dataSourceRequestHandler;
+    }, [dataSourceRequestHandler]);
+    // Create a stable key for the config to detect changes
+    // This ensures the effect runs when widget-readonly changes
+    const apiService = dataSource?.type === 'api' ? dataSource.service : '';
+    const apiEndpoint = dataSource?.type === 'api' ? dataSource.endpoint : '';
+    const configKey = `${widgetId}-${isReadonly}-${dataSource?.type || 'none'}-${apiService}-${apiEndpoint}`;
     // Handle data source loading
     useEffect(() => {
-        const dataSource = config['widget-data-source'];
         if (!dataSource) {
             return;
         }
+        // For API data sources, check if widget is readonly
+        // According to PRD: "Level 1 geo widgets load on widget mount or when entering edit mode"
+        // So we should only load API data sources when widget is NOT readonly
+        if (dataSource.type === 'api' && isReadonly) {
+            return;
+        }
+        // For widgets with dependencies, check if dependency value exists
+        if (dataSource.type === 'api' && dataSource.dependsOn) {
+            // Check if dependency value exists
+            let depValue = null;
+            if (dataSource.dependsOn.includes('.')) {
+                depValue = getWidgetValue(values, dataSource.dependsOn, '');
+            }
+            else {
+                depValue = values[dataSource.dependsOn];
+            }
+            // If dependency is empty, don't load (will load when dependency has value)
+            if (depValue === null || depValue === undefined || depValue === '') {
+                return;
+            }
+        }
         const loadDataSource = async () => {
+            // Get current handler from ref to avoid stale closures
+            // Also check prop directly as fallback (for initial render or when ref not updated yet)
+            const currentHandler = handlerRef.current || dataSourceRequestHandler;
+            // Only check for handler when we actually need it (inside the async function)
+            // This avoids false errors during React Strict Mode double-invocation
+            // If handler isn't available yet, silently skip - React will retry when it's ready
             try {
+                if (dataSource.type === 'api' && !currentHandler) {
+                    // Silently skip if handler isn't available yet (common during React Strict Mode double-invocation)
+                    // React will call this effect again when the handler is ready
+                    return;
+                }
                 dispatch(setLoading({ widgetId, loading: true }));
                 let data = [];
                 if (dataSource.type === 'static') {
                     data = getStaticDataSource(dataSource);
                 }
                 else if (dataSource.type === 'api') {
-                    data = await getApiDataSource(dataSource, values, apiAdapter);
+                    if (!currentHandler) {
+                        // Silently skip if handler isn't available yet
+                        dispatch(setLoading({ widgetId, loading: false }));
+                        dispatch(setDataSource({ widgetId, data: [] }));
+                        return;
+                    }
+                    // Extract level_id from widget-geo-config.level if available
+                    const levelId = geoConfig?.level;
+                    data = await getApiDataSource(dataSource, values, currentHandler, levelId);
                 }
                 else if (dataSource.type === 'schema') {
                     data = getSchemaDataSource(dataSource, schemaData || {});
                 }
                 // Transform to { value, label } format
-                const valueKey = dataSource.type === 'static' ? undefined : dataSource.valueKey;
-                const labelKey = dataSource.type === 'static' ? undefined : dataSource.labelKey;
+                // For geo widgets, default to level_value_id and level_value_mnemonic
+                let valueKey;
+                let labelKey;
+                if (dataSource.type === 'static') {
+                    valueKey = undefined;
+                    labelKey = undefined;
+                }
+                else if (geoConfig) {
+                    // Geo widgets: default to level_value_id and level_value_mnemonic
+                    valueKey = dataSource.valueKey || 'level_value_id';
+                    labelKey = dataSource.labelKey || 'level_value_mnemonic';
+                }
+                else {
+                    // Non-geo widgets: use specified keys or undefined
+                    valueKey = dataSource.valueKey;
+                    labelKey = dataSource.labelKey;
+                }
                 const transformed = transformDataSourceOptions(data, valueKey, labelKey);
                 dispatch(setDataSource({ widgetId, data: transformed }));
             }
             catch (error) {
-                console.error('Error loading data source:', error);
+                console.error(`[useBaseWidget] ERROR loading data source for ${widgetId}:`, error);
                 dispatch(setDataSource({ widgetId, data: [] }));
             }
             finally {
@@ -928,7 +1210,9 @@ const useBaseWidget = (options) => {
             }
         };
         loadDataSource();
-    }, [config['widget-data-source'], values, apiAdapter, schemaData, widgetId, dispatch]);
+        // Use configKey to ensure effect runs when readonly state changes
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [configKey, values, dataSourceRequestHandler, schemaData, widgetId, dispatch]);
     return {
         widgetId,
         value: currentValue,
@@ -947,6 +1231,357 @@ const useBaseWidget = (options) => {
     };
 };
 
+/**
+ * Hook for general widget cascade functionality
+ * Handles listening to parent widget changes and reloading data sources
+ */
+const useWidgetCascade = (options) => {
+    const { config, dataSourceRequestHandler, values } = options;
+    const dispatch = useDispatch();
+    const eventBus = useWidgetEventBus();
+    const widgetId = config['widget-id'];
+    const cascadeConfig = config['widget-cascade'];
+    const dataSource = config['widget-data-source'];
+    const valuesRef = useRef(values);
+    const handlerRef = useRef(dataSourceRequestHandler);
+    // Keep refs updated
+    useEffect(() => {
+        valuesRef.current = values;
+        handlerRef.current = dataSourceRequestHandler;
+    }, [values, dataSourceRequestHandler]);
+    useEffect(() => {
+        if (!cascadeConfig || !eventBus || !dataSource || dataSource.type !== 'api') {
+            return;
+        }
+        const { listenTo, onEvent = 'widget:change', clearOnChange = true, reloadOnChange = true, debounce, throttle } = cascadeConfig;
+        if (listenTo.length === 0) {
+            return;
+        }
+        const handleEvent = async (event) => {
+            // Check if this event is from a parent we're listening to
+            if (!listenTo.includes(event.widgetId)) {
+                return;
+            }
+            const currentValues = valuesRef.current;
+            const currentHandler = handlerRef.current;
+            // Clear value if configured
+            if (clearOnChange) {
+                dispatch(setValue({ widgetId, value: undefined }));
+            }
+            // Reload data source if configured
+            if (reloadOnChange && currentHandler) {
+                try {
+                    const data = await getApiDataSource(dataSource, currentValues, currentHandler);
+                    // Transform to { value, label } format
+                    const valueKey = dataSource.valueKey;
+                    const labelKey = dataSource.labelKey;
+                    const transformed = transformDataSourceOptions(data, valueKey, labelKey);
+                    dispatch(setDataSource({ widgetId, data: transformed }));
+                }
+                catch (error) {
+                    console.error('Error reloading data source in cascade:', error);
+                    dispatch(setDataSource({ widgetId, data: [] }));
+                }
+            }
+        };
+        // Subscribe to events
+        const unsubscribe = eventBus.subscribe(onEvent, handleEvent, { debounce, throttle });
+        return () => {
+            unsubscribe();
+        };
+    }, [cascadeConfig, eventBus, dataSource, widgetId, dispatch]);
+};
+
+/**
+ * Geo Hierarchy Builder
+ * Manages geo hierarchy state and builds hierarchy JSON structure
+ */
+class GeoHierarchyBuilder {
+    constructor() {
+        this.hierarchies = new Map();
+    }
+    /**
+     * Get or create hierarchy state for a group
+     */
+    getHierarchy(groupId = 'default') {
+        if (!this.hierarchies.has(groupId)) {
+            this.hierarchies.set(groupId, {
+                levels: new Map(),
+                order: [],
+            });
+        }
+        return this.hierarchies.get(groupId);
+    }
+    /**
+     * Add a level to the hierarchy
+     */
+    addLevel(level, level_value_id, level_value_mnemonic, groupId = 'default') {
+        const hierarchy = this.getHierarchy(groupId);
+        // If level already exists, remove it and everything after it
+        const existingIndex = hierarchy.order.indexOf(level);
+        if (existingIndex >= 0) {
+            // Remove this level and all subsequent levels
+            const levelsToRemove = hierarchy.order.slice(existingIndex);
+            levelsToRemove.forEach((l) => {
+                hierarchy.levels.delete(l);
+                hierarchy.order = hierarchy.order.filter((o) => o !== l);
+            });
+        }
+        // Add new level
+        hierarchy.levels.set(level, {
+            level,
+            level_value_id,
+            level_value_mnemonic,
+        });
+        hierarchy.order.push(level);
+    }
+    /**
+     * Remove a level and all levels below it
+     */
+    removeLevelAndBelow(level, groupId = 'default') {
+        const hierarchy = this.getHierarchy(groupId);
+        const index = hierarchy.order.indexOf(level);
+        if (index >= 0) {
+            // Remove this level and all subsequent levels
+            const levelsToRemove = hierarchy.order.slice(index);
+            levelsToRemove.forEach((l) => {
+                hierarchy.levels.delete(l);
+                hierarchy.order = hierarchy.order.filter((o) => o !== l);
+            });
+        }
+    }
+    /**
+     * Build hierarchy JSON structure
+     */
+    buildHierarchyJson(groupId = 'default') {
+        const hierarchy = this.getHierarchy(groupId);
+        if (hierarchy.order.length === 0) {
+            return null;
+        }
+        const hierarchyArray = hierarchy.order.map((level) => {
+            const data = hierarchy.levels.get(level);
+            return {
+                level: data.level,
+                level_value_id: data.level_value_id,
+                level_value_mnemonic: data.level_value_mnemonic,
+            };
+        });
+        const lowestLevel = hierarchy.order[hierarchy.order.length - 1];
+        const lowestLevelData = hierarchy.levels.get(lowestLevel);
+        return {
+            geo_lowest_level_value_id: lowestLevelData.level_value_id,
+            geo_code_hierarchy_json: {
+                hierarchy: hierarchyArray,
+                lowest_level_value_id: lowestLevelData.level_value_id,
+            },
+        };
+    }
+    /**
+     * Clear hierarchy for a group
+     */
+    clear(groupId = 'default') {
+        this.hierarchies.delete(groupId);
+    }
+    /**
+     * Clear all hierarchies
+     */
+    clearAll() {
+        this.hierarchies.clear();
+    }
+    /**
+     * Get current levels for a group
+     */
+    getLevels(groupId = 'default') {
+        const hierarchy = this.getHierarchy(groupId);
+        return hierarchy.order.map((level) => hierarchy.levels.get(level));
+    }
+}
+// Singleton instance
+const geoHierarchyBuilder = new GeoHierarchyBuilder();
+
+// Define stable empty array to avoid selector reference issues
+const EMPTY_DATA_SOURCE = [];
+/**
+ * Hook for geo widget cascade functionality
+ * Handles geo hierarchy building and cascade behavior
+ */
+const useGeoWidgetCascade = (options) => {
+    const { config, dataSourceRequestHandler, values } = options;
+    const dispatch = useDispatch();
+    const eventBus = useWidgetEventBus();
+    const widgetId = config['widget-id'];
+    const geoConfig = config['widget-geo-config'];
+    const dataSource = config['widget-data-source'];
+    const dataPath = config['widget-data-path'];
+    const valuesRef = useRef(values);
+    const handlerRef = useRef(dataSourceRequestHandler);
+    // Keep refs updated
+    useEffect(() => {
+        valuesRef.current = values;
+        handlerRef.current = dataSourceRequestHandler;
+    }, [values, dataSourceRequestHandler]);
+    // Get current value and data source options
+    const currentValue = useSelector((state) => {
+        if (!dataPath) {
+            return state.widget.values[widgetId];
+        }
+        return getWidgetValue(state.widget.values, dataPath, widgetId);
+    });
+    // Memoize selector to avoid returning new array reference
+    const dataSourceOptions = useSelector((state) => state.widget.dataSources[widgetId] ?? EMPTY_DATA_SOURCE);
+    useEffect(() => {
+        if (!geoConfig || !eventBus || !dataSource || dataSource.type !== 'api') {
+            return;
+        }
+        const { level, isLastLevel, parentWidgetId } = geoConfig;
+        // Listen to parent widget changes
+        if (parentWidgetId) {
+            const handleParentChange = async (event) => {
+                if (event.widgetId !== parentWidgetId) {
+                    return;
+                }
+                // CRITICAL: Use a small delay to ensure Redux state has been updated
+                // This prevents reading stale values from valuesRef
+                await new Promise(resolve => setTimeout(resolve, 0));
+                const currentValues = valuesRef.current;
+                const currentHandler = handlerRef.current;
+                // CRITICAL: Get the parent value from Redux state, not from the event
+                // The event.value might be stale, but Redux state is always current
+                const parentValue = currentValues[parentWidgetId];
+                // Remove this level and all below from hierarchy
+                geoHierarchyBuilder.removeLevelAndBelow(level);
+                // Clear this widget's value
+                // CRITICAL: Only dispatch setValue for THIS widget, not for parent or other widgets
+                // setWidgetValue returns the entire updated state, but we only want to update this widget
+                if (dataPath) {
+                    const updatedValues = setWidgetValue(currentValues, dataPath, widgetId, undefined);
+                    // Only dispatch setValue for this widget's widgetId, not for parent or other widgets
+                    // This prevents accidentally overwriting the parent widget's value
+                    // The setWidgetValue function updates the nested structure, but we only want to
+                    // update the top-level widgetId key, not other keys that might be in updatedValues
+                    const newWidgetValue = updatedValues[widgetId];
+                    if (newWidgetValue !== undefined) {
+                        dispatch(setValue({ widgetId, value: newWidgetValue }));
+                    }
+                    else {
+                        // If widgetId is not in updatedValues, the value was set in a nested path
+                        // In this case, we need to use setValues to update the entire structure
+                        // But we need to be careful not to overwrite the parent widget's value
+                        // Only update keys that are related to this widget's dataPath
+                        const dataPathStr = typeof dataPath === 'string' ? dataPath : '';
+                        if (dataPathStr && !dataPathStr.startsWith(parentWidgetId + '.')) {
+                            // Only update if dataPath doesn't start with parentWidgetId
+                            // This ensures we don't accidentally overwrite the parent widget's value
+                            dispatch(setValue({ widgetId, value: undefined }));
+                        }
+                    }
+                }
+                else {
+                    dispatch(setValue({ widgetId, value: undefined }));
+                }
+                // Reload data source with new parent value
+                // CRITICAL: Use parentValue from Redux, not event.value
+                if (currentHandler && parentValue !== null && parentValue !== undefined) {
+                    try {
+                        // Merge the new parent value into current values for the API call
+                        // This ensures getApiDataSource can find the dependency value
+                        const updatedValues = {
+                            ...currentValues,
+                            [parentWidgetId]: parentValue, // Use Redux value, not event.value
+                        };
+                        // Extract level_id from widget-geo-config.level
+                        const levelId = geoConfig.level;
+                        const data = await getApiDataSource(dataSource, updatedValues, currentHandler, levelId);
+                        // Transform to { value, label } format
+                        const valueKey = dataSource.valueKey || 'level_value_id';
+                        const labelKey = dataSource.labelKey || 'level_value_mnemonic';
+                        const transformed = transformDataSourceOptions(data, valueKey, labelKey);
+                        dispatch(setDataSource({ widgetId, data: transformed }));
+                    }
+                    catch (error) {
+                        console.error('Error reloading geo data source:', error);
+                        dispatch(setDataSource({ widgetId, data: [] }));
+                    }
+                }
+                else {
+                    // If parent value is cleared, clear the data source
+                    dispatch(setDataSource({ widgetId, data: [] }));
+                }
+            };
+            const unsubscribe = eventBus.subscribe('widget:change', handleParentChange);
+            return () => {
+                unsubscribe();
+            };
+        }
+    }, [geoConfig, eventBus, dataSource, widgetId, dataPath, dispatch]);
+    // Handle value changes to build hierarchy
+    useEffect(() => {
+        if (!geoConfig) {
+            return;
+        }
+        // Skip if value is empty/null (but allow 0 and false)
+        if (currentValue === null || currentValue === undefined || currentValue === '') {
+            // If value was cleared, remove this level and below from hierarchy
+            const { level } = geoConfig;
+            geoHierarchyBuilder.removeLevelAndBelow(level);
+            return;
+        }
+        const { level, isLastLevel } = geoConfig;
+        // For last level, check if hierarchy is already built to prevent endless loops
+        if (isLastLevel && dataPath) {
+            const currentHierarchy = getWidgetValue(valuesRef.current, dataPath, widgetId);
+            // If hierarchy JSON is already set and matches current value, skip rebuilding
+            if (currentHierarchy && typeof currentHierarchy === 'object' && currentHierarchy.geo_code_hierarchy_json) {
+                // Check if the lowest level value matches
+                const currentLevelValue = typeof currentValue === 'object'
+                    ? (currentValue.level_value_id || currentValue.id || currentValue.value)
+                    : currentValue;
+                if (currentHierarchy.geo_lowest_level_value_id === currentLevelValue) {
+                    return; // Hierarchy already built for this value, skip
+                }
+            }
+        }
+        // Extract level_value_id and level_value_mnemonic from current value
+        // The value could be the ID itself or an object with id/name
+        let level_value_id;
+        let level_value_mnemonic;
+        if (typeof currentValue === 'string' || typeof currentValue === 'number') {
+            // Value is just the ID, need to find mnemonic from data source
+            level_value_id = String(currentValue);
+            // Try to get mnemonic from data source options
+            const option = dataSourceOptions.find((opt) => opt.value === currentValue);
+            level_value_mnemonic = option?.label || String(currentValue);
+        }
+        else if (currentValue && typeof currentValue === 'object') {
+            level_value_id = currentValue.level_value_id || currentValue.id || currentValue.value;
+            level_value_mnemonic = currentValue.level_value_mnemonic || currentValue.name || currentValue.label;
+        }
+        else {
+            return;
+        }
+        // When a widget's own value changes, remove this level and all below from hierarchy first
+        // This ensures that when level 1 changes, we clear the hierarchy and rebuild from scratch
+        // The addLevel method already handles removing existing levels, but we explicitly clear to be safe
+        geoHierarchyBuilder.removeLevelAndBelow(level);
+        // Add level to hierarchy
+        geoHierarchyBuilder.addLevel(level, level_value_id, level_value_mnemonic);
+        // If this is the last level, build and store hierarchy JSON
+        if (isLastLevel && dataPath) {
+            const hierarchyJson = geoHierarchyBuilder.buildHierarchyJson();
+            if (hierarchyJson) {
+                // Store both geo_lowest_level_value_id and geo_code_hierarchy_json
+                const updatedValues = setWidgetValue(valuesRef.current, dataPath, widgetId, {
+                    geo_lowest_level_value_id: hierarchyJson.geo_lowest_level_value_id,
+                    geo_code_hierarchy_json: hierarchyJson.geo_code_hierarchy_json,
+                });
+                Object.entries(updatedValues).forEach(([key, value]) => {
+                    dispatch(setValue({ widgetId: key, value }));
+                });
+            }
+        }
+    }, [geoConfig, currentValue, widgetId, dataPath, dispatch, dataSourceOptions]);
+};
+
 var jsxRuntime = {exports: {}};
 
 var reactJsxRuntime_production = {};
@@ -1449,42 +2084,208 @@ class WidgetRegistry {
 // Singleton instance
 const widgetRegistry = new WidgetRegistry();
 
+/**
+ * Widget Event Bus
+ * Provides a publish/subscribe mechanism for widget communication
+ * Supports debounce and throttle for performance optimization
+ */
+class WidgetEventBus {
+    constructor() {
+        this.subscriptions = new Map();
+        this.throttleTimers = new Map();
+    }
+    /**
+     * Subscribe to an event type
+     * @param eventType The type of event to listen to
+     * @param handler The handler function
+     * @param options Debounce/throttle options
+     * @returns Unsubscribe function
+     */
+    subscribe(eventType, handler, options) {
+        if (!this.subscriptions.has(eventType)) {
+            this.subscriptions.set(eventType, new Map());
+        }
+        const eventSubscriptions = this.subscriptions.get(eventType);
+        const subscriptionId = `${Date.now()}-${Math.random()}`;
+        const subscription = {
+            handler,
+            debounce: options?.debounce,
+            throttle: options?.throttle,
+        };
+        if (!eventSubscriptions.has(subscriptionId)) {
+            eventSubscriptions.set(subscriptionId, []);
+        }
+        eventSubscriptions.get(subscriptionId).push(subscription);
+        // Return unsubscribe function
+        return () => {
+            const subs = eventSubscriptions.get(subscriptionId);
+            if (subs) {
+                const index = subs.indexOf(subscription);
+                if (index > -1) {
+                    subs.splice(index, 1);
+                    if (subs.length === 0) {
+                        eventSubscriptions.delete(subscriptionId);
+                    }
+                }
+            }
+        };
+    }
+    /**
+     * Publish an event
+     * @param event The event to publish
+     */
+    publish(event) {
+        const eventSubscriptions = this.subscriptions.get(event.type);
+        if (!eventSubscriptions) {
+            return;
+        }
+        eventSubscriptions.forEach((subscriptions) => {
+            subscriptions.forEach((subscription) => {
+                this.executeHandler(subscription, event);
+            });
+        });
+    }
+    /**
+     * Execute handler with debounce/throttle support
+     */
+    executeHandler(subscription, event) {
+        const { handler, debounce, throttle } = subscription;
+        // Clear existing debounce timer if any
+        if (subscription.debounceTimer) {
+            clearTimeout(subscription.debounceTimer);
+        }
+        // Handle throttle
+        if (throttle && throttle > 0) {
+            const throttleKey = `${event.type}-${event.widgetId}`;
+            const now = Date.now();
+            const lastCallTime = subscription.lastCallTime || 0;
+            if (now - lastCallTime < throttle) {
+                // Still in throttle period, schedule for later
+                if (this.throttleTimers.has(throttleKey)) {
+                    return; // Already scheduled
+                }
+                const remainingTime = throttle - (now - lastCallTime);
+                const timer = setTimeout(() => {
+                    subscription.lastCallTime = Date.now();
+                    handler(event);
+                    this.throttleTimers.delete(throttleKey);
+                }, remainingTime);
+                this.throttleTimers.set(throttleKey, timer);
+                return;
+            }
+            subscription.lastCallTime = now;
+        }
+        // Handle debounce
+        if (debounce && debounce > 0) {
+            subscription.debounceTimer = setTimeout(() => {
+                handler(event);
+                subscription.debounceTimer = undefined;
+            }, debounce);
+            return;
+        }
+        // Execute immediately if no debounce/throttle
+        handler(event);
+    }
+    /**
+     * Clear all subscriptions
+     */
+    clear() {
+        // Clear all timers
+        this.subscriptions.forEach((eventSubscriptions) => {
+            eventSubscriptions.forEach((subscriptions) => {
+                subscriptions.forEach((sub) => {
+                    if (sub.debounceTimer) {
+                        clearTimeout(sub.debounceTimer);
+                    }
+                });
+            });
+        });
+        this.throttleTimers.forEach((timer) => clearTimeout(timer));
+        this.throttleTimers.clear();
+        this.subscriptions.clear();
+    }
+}
+
 const WidgetContext = createContext({
-    apiAdapter: undefined,
+    dataSourceRequestHandler: undefined,
     schemaData: undefined,
     translate: undefined,
 });
 const useWidgetContext = () => {
     return useContext(WidgetContext);
 };
-const WidgetProvider = ({ store, apiAdapter, schemaData, translate, children, }) => {
+const WidgetProvider = ({ store, dataSourceRequestHandler, schemaData, translate, children, }) => {
     const widgetStore = useMemo(() => store || createWidgetStore(), [store]);
-    // Sync schemaData to Redux store
+    // Create event bus instance (one per provider)
+    const eventBus = useMemo(() => new WidgetEventBus(), []);
+    // Memoize context value to prevent unnecessary re-renders
+    const contextValue = useMemo(() => ({
+        dataSourceRequestHandler,
+        schemaData,
+        translate,
+    }), [dataSourceRequestHandler, schemaData, translate]);
+    // Warn if dataSourceRequestHandler is missing (will cause issues with API data sources)
+    useEffect(() => {
+        if (!dataSourceRequestHandler) {
+            console.warn('[WidgetProvider] dataSourceRequestHandler is not provided. ' +
+                'Widgets with API data sources will not be able to load data. ' +
+                'Please provide dataSourceRequestHandler prop to WidgetProvider.');
+        }
+    }, [dataSourceRequestHandler]);
+    // Cleanup event bus on unmount
+    useEffect(() => {
+        return () => {
+            eventBus.clear();
+        };
+    }, [eventBus]);
+    // Initialize schemaData to Redux store (only on mount)
+    // This prevents overwriting user changes when schemaData prop changes
     useEffect(() => {
         if (schemaData) {
             widgetStore.dispatch(setValues(schemaData));
         }
-    }, [schemaData, widgetStore]);
-    const content = (jsxRuntimeExports.jsx(Provider, { store: widgetStore, children: jsxRuntimeExports.jsx(WidgetContext.Provider, { value: { apiAdapter, schemaData, translate }, children: children }) }));
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []); // Only run on mount
+    const content = (jsxRuntimeExports.jsx(Provider, { store: widgetStore, children: jsxRuntimeExports.jsx(WidgetContext.Provider, { value: contextValue, children: jsxRuntimeExports.jsx(WidgetEventBusContext.Provider, { value: eventBus, children: children }) }) }));
     return content;
 };
 
-const WidgetRenderer = ({ config, apiAdapter: propApiAdapter, schemaData: propSchemaData, onValueChange, defaultComponent, }) => {
+const WidgetRenderer = ({ config, dataSourceRequestHandler: propDataSourceRequestHandler, schemaData: propSchemaData, onValueChange, defaultComponent, }) => {
     // Use context values as fallback
     const context = useWidgetContext();
-    const apiAdapter = propApiAdapter || context.apiAdapter;
+    const dataSourceRequestHandler = propDataSourceRequestHandler || context.dataSourceRequestHandler;
     const schemaData = propSchemaData || context.schemaData;
+    if (!dataSourceRequestHandler && config['widget-data-source']?.type === 'api') {
+        console.error(`[WidgetRenderer] dataSourceRequestHandler is required for widget ${config['widget-id']} with API data source`);
+    }
+    // Get values from Redux for cascade hooks
+    const values = useSelector((state) => state.widget.values);
     const widgetContext = useBaseWidget({
         config,
-        apiAdapter,
+        dataSourceRequestHandler,
         schemaData,
         onValueChange,
     });
+    // Apply cascade hooks if configured (only if handler is available)
+    if (dataSourceRequestHandler) {
+        useWidgetCascade({
+            config,
+            dataSourceRequestHandler,
+            values,
+        });
+        useGeoWidgetCascade({
+            config,
+            dataSourceRequestHandler,
+            values,
+        });
+    }
     // Don't render if not visible
     if (!widgetContext.isVisible) {
         return null;
     }
     // Render widget using registry
+    // Don't use key based on readonly state - it causes remounting which resets userHasSetValueRef
+    // The readonly state is already handled in the widget components themselves
     return (jsxRuntimeExports.jsx("div", { className: "widget-container", "data-widget-id": widgetContext.widgetId, style: { marginBottom: 0 }, children: widgetRegistry.render(config, widgetContext, defaultComponent) }));
 };
 
@@ -1587,7 +2388,7 @@ const useWidgetTranslation = () => {
  * - Nested panels (for layout composition)
  * - Widgets (for actual form inputs/controls)
  */
-const PanelRenderer = ({ panel, apiAdapter, schemaData, onValueChange, isEditMode = false, }) => {
+const PanelRenderer = ({ panel, dataSourceRequestHandler, schemaData, onValueChange, isEditMode = false, }) => {
     const { translateConfig } = useWidgetTranslation();
     const orientation = panel['panel-orientation'] || 'vertical';
     const nestedPanels = panel.panels || [];
@@ -1679,7 +2480,7 @@ const PanelRenderer = ({ panel, apiAdapter, schemaData, onValueChange, isEditMod
                     }
                 };
                 const nestedPanelStyle = getNestedPanelStyle();
-                return (jsxRuntimeExports.jsx(React.Fragment, { children: jsxRuntimeExports.jsxs("div", { className: orientation === 'horizontal' ? 'min-w-200 relative' : 'w-full', style: nestedPanelStyle, "data-panel-column-span": columnSpan || undefined, children: [jsxRuntimeExports.jsx(PanelRenderer, { panel: nestedPanel, apiAdapter: apiAdapter, schemaData: schemaData, onValueChange: onValueChange, isEditMode: isEditMode }), orientation === 'horizontal' && !isLastPanel && (jsxRuntimeExports.jsx("div", { style: {
+                return (jsxRuntimeExports.jsx(React.Fragment, { children: jsxRuntimeExports.jsxs("div", { className: orientation === 'horizontal' ? 'min-w-200 relative' : 'w-full', style: nestedPanelStyle, "data-panel-column-span": columnSpan || undefined, children: [jsxRuntimeExports.jsx(PanelRenderer, { panel: nestedPanel, dataSourceRequestHandler: dataSourceRequestHandler, schemaData: schemaData, onValueChange: onValueChange, isEditMode: isEditMode }), orientation === 'horizontal' && !isLastPanel && (jsxRuntimeExports.jsx("div", { style: {
                                     position: 'absolute',
                                     right: 0,
                                     top: 0,
@@ -1687,7 +2488,11 @@ const PanelRenderer = ({ panel, apiAdapter, schemaData, onValueChange, isEditMod
                                     width: '1px',
                                     backgroundColor: isEditMode ? '#F2BA1A' : '#D1D5DB',
                                 } }))] }) }, nestedPanel['panel-id'] || `panel-${index}`));
-            }), widgets.map((widgetConfig, index) => (jsxRuntimeExports.jsx(WidgetRenderer, { config: widgetConfig, apiAdapter: apiAdapter, schemaData: schemaData, onValueChange: onValueChange }, widgetConfig['widget-id'] || `widget-${index}`)))] }));
+            }), widgets.map((widgetConfig, index) => {
+                // Don't use readonly state in key - it causes remounting which resets userHasSetValueRef
+                // The readonly state is already handled in the widget components themselves
+                return (jsxRuntimeExports.jsx(WidgetRenderer, { config: widgetConfig, dataSourceRequestHandler: dataSourceRequestHandler, schemaData: schemaData, onValueChange: onValueChange }, widgetConfig['widget-id'] || `widget-${index}`));
+            })] }));
     // Render panel without card styling (panel-type removed from schema)
     // Vertical panels will have constrained width via CSS in SectionRenderer
     // Horizontal panels take full width
@@ -2387,11 +3192,13 @@ const namespaceSectionConfig = (section, namespace) => {
  * - Panels wrap when they exceed available width
  * - Sections can sit side-by-side if there's space
  */
-const SectionRenderer = ({ section, apiAdapter, schemaData, onValueChange, gridColumnSpan, onSectionSave, hideEditButton = false, mode = 'RegistryView', namespace, }) => {
+const SectionRenderer = ({ section, dataSourceRequestHandler: propDataSourceRequestHandler, schemaData, onValueChange, gridColumnSpan, onSectionSave, hideEditButton = false, mode = 'RegistryView', namespace, }) => {
     const { translateConfig, translate } = useWidgetTranslation();
-    const { schemaData: contextSchemaData } = useWidgetContext();
+    const { schemaData: contextSchemaData, dataSourceRequestHandler: contextDataSourceRequestHandler } = useWidgetContext();
     const store = useStore();
     const dispatch = useDispatch();
+    // Use prop handler if provided, otherwise fall back to context
+    const dataSourceRequestHandler = propDataSourceRequestHandler || contextDataSourceRequestHandler;
     // Get CRView data from schemaData (prefer prop over context, then Redux store)
     const currentSchemaData = schemaData || contextSchemaData || {};
     const storeValues = useSelector((state) => state.widget?.values || {});
@@ -2450,10 +3257,6 @@ const SectionRenderer = ({ section, apiAdapter, schemaData, onValueChange, gridC
             approvedBy: getValueByPath(dataSource, 'approvedBy') || getValueByPath(dataSource, 'approved_by'),
             approvedDate: getValueByPath(dataSource, 'approvedDate') || getValueByPath(dataSource, 'approved_date'),
         };
-        // Debug logging (can be removed in production)
-        if (mode === 'CRView') {
-            console.log('CRView Data Source:', { dataSource, result, currentSchemaData, storeValues });
-        }
         return result;
     }, [mode, currentSchemaData, storeValues]);
     // Use namespaced section for rendering
@@ -2577,16 +3380,19 @@ const SectionRenderer = ({ section, apiAdapter, schemaData, onValueChange, gridC
             const modifiedPanel = {
                 ...panel,
                 panels: panel.panels ? makePanelsEditable(panel.panels, editable) : undefined,
-                widgets: panel.widgets?.map(widget => ({
-                    ...widget,
+                widgets: panel.widgets?.map(widget => {
                     // When NOT in edit mode (editable = false), set all widgets to readonly
                     // When in edit mode (editable = true):
                     //   - If section-editable is true, force widgets to be editable (override widget-readonly)
                     //   - Otherwise, respect original readonly setting
-                    'widget-readonly': editable
+                    const newReadonly = editable
                         ? (sectionEditable ? false : (widget['widget-readonly'] || false))
-                        : true,
-                })),
+                        : true;
+                    return {
+                        ...widget,
+                        'widget-readonly': newReadonly,
+                    };
+                }),
             };
             return modifiedPanel;
         });
@@ -2667,7 +3473,7 @@ const SectionRenderer = ({ section, apiAdapter, schemaData, onValueChange, gridC
                         overflowY: 'auto',
                     }, children: [sectionToRender['section-title'] && (jsxRuntimeExports.jsx("h2", { className: "text-xl font-semibold mb-4", style: { fontFamily: 'Roboto, sans-serif', marginTop: '35px' }, children: translateConfig(sectionToRender['section-title']) })), jsxRuntimeExports.jsxs("div", { id: editGridId, className: "section-panels", children: [editableSection.panels.map((panel, index) => {
                                     const isLastPanel = index === editableSection.panels.length - 1;
-                                    return (jsxRuntimeExports.jsx("div", { className: `panel-wrapper ${isLastPanel ? 'last-panel-wrapper' : ''}`, children: jsxRuntimeExports.jsx(PanelRenderer, { panel: panel, apiAdapter: apiAdapter, schemaData: namespacedSchemaData, onValueChange: onValueChange, isEditMode: true }) }, panel['panel-id'] || `section-panel-${index}`));
+                                    return (jsxRuntimeExports.jsx("div", { className: `panel-wrapper ${isLastPanel ? 'last-panel-wrapper' : ''}`, children: jsxRuntimeExports.jsx(PanelRenderer, { panel: panel, dataSourceRequestHandler: dataSourceRequestHandler, schemaData: namespacedSchemaData, onValueChange: onValueChange, isEditMode: true }) }, panel['panel-id'] || `section-panel-${index}`));
                                 }), hasSupportingDocuments && (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx("hr", { className: "my-4 w-full", style: { height: '1px', backgroundColor: '#F2BA1A', border: 'none' } }), jsxRuntimeExports.jsxs("div", { className: "supporting-documents-container", children: [jsxRuntimeExports.jsxs("button", { type: "button", onClick: () => setIsDocumentsExpanded(!isDocumentsExpanded), className: "supporting-documents-title-button w-full flex items-center text-left", children: [jsxRuntimeExports.jsx("span", { className: "font-semibold", style: { fontFamily: 'Roboto, sans-serif', fontSize: '16px' }, children: translate('common.supportedDocuments') || 'Supported Documents' }), jsxRuntimeExports.jsx("svg", { className: `w-5 h-5 text-[#ED7C22] transition-transform ml-2 ${isDocumentsExpanded ? 'rotate-180' : ''}`, fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: jsxRuntimeExports.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" }) })] }), isDocumentsExpanded && (jsxRuntimeExports.jsx("div", { className: "supporting-documents-grid mt-4", children: supportingDocuments.map((doc, index) => {
                                                         const docConfig = createDocumentWidgetConfig(doc, sectionId, index);
                                                         return (jsxRuntimeExports.jsx("div", { className: "supporting-document-item", children: jsxRuntimeExports.jsx(FileInputWidget, { config: docConfig }) }, `${sectionId}-doc-${index}`));
@@ -3017,7 +3823,7 @@ const SectionRenderer = ({ section, apiAdapter, schemaData, onValueChange, gridC
                         minHeight: 'auto',
                         height: 'auto'
                     }),
-                }, children: [sectionToRender['section-title'] && (jsxRuntimeExports.jsx("h2", { className: "text-xl font-semibold mb-4", style: { marginTop: '35px' }, children: translateConfig(sectionToRender['section-title']) })), jsxRuntimeExports.jsxs("div", { id: gridId, className: "section-panels", style: mode === 'RegistryView' && hideEditButton ? { paddingBottom: '40px' } : {}, children: [editableSection.panels.map((panel, index) => (jsxRuntimeExports.jsx("div", { className: "panel-wrapper", children: jsxRuntimeExports.jsx(PanelRenderer, { panel: panel, apiAdapter: apiAdapter, schemaData: namespacedSchemaData, onValueChange: onValueChange }) }, panel['panel-id'] || `section-panel-${index}`))), mode === 'CRView' && crViewData && (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx("hr", { className: "border-gray-300 w-full", style: { height: '1px', marginTop: '20px', marginBottom: '0px' } }), jsxRuntimeExports.jsxs("div", { className: "cr-view-container", style: {
+                }, children: [sectionToRender['section-title'] && (jsxRuntimeExports.jsx("h2", { className: "text-xl font-semibold mb-4", style: { marginTop: '35px' }, children: translateConfig(sectionToRender['section-title']) })), jsxRuntimeExports.jsxs("div", { id: gridId, className: "section-panels", style: mode === 'RegistryView' && hideEditButton ? { paddingBottom: '40px' } : {}, children: [editableSection.panels.map((panel, index) => (jsxRuntimeExports.jsx("div", { className: "panel-wrapper", children: jsxRuntimeExports.jsx(PanelRenderer, { panel: panel, dataSourceRequestHandler: dataSourceRequestHandler, schemaData: namespacedSchemaData, onValueChange: onValueChange }) }, panel['panel-id'] || `section-panel-${index}`))), mode === 'CRView' && crViewData && (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx("hr", { className: "border-gray-300 w-full", style: { height: '1px', marginTop: '20px', marginBottom: '0px' } }), jsxRuntimeExports.jsxs("div", { className: "cr-view-container", style: {
                                             marginTop: '20px',
                                             paddingBottom: '30px',
                                             display: 'flex',
@@ -3153,7 +3959,18 @@ const countVerticalPanels = (panels) => {
  * - All sections align to the same grid, ensuring right-side alignment
  * - Handles nested structure: multiple horizontal panels, each with multiple vertical panels
  */
-const SectionsContainer = ({ sections, apiAdapter, schemaData, onValueChange, className = '', onSectionSave, hideEditButton = false, mode = 'RegistryView', namespace, }) => {
+const SectionsContainer = ({ sections, dataSourceRequestHandler: propDataSourceRequestHandler, schemaData, onValueChange, className = '', onSectionSave, hideEditButton = false, mode = 'RegistryView', namespace, }) => {
+    // Get dataSourceRequestHandler from context if not provided as prop
+    const { dataSourceRequestHandler: contextDataSourceRequestHandler } = useWidgetContext();
+    const dataSourceRequestHandler = propDataSourceRequestHandler || contextDataSourceRequestHandler;
+    // Warn if dataSourceRequestHandler is missing
+    useEffect(() => {
+        if (!dataSourceRequestHandler) {
+            console.warn('[SectionsContainer] ⚠️ dataSourceRequestHandler is not provided. ' +
+                'Sections with widgets that have API data sources will not be able to load data. ' +
+                'Please provide dataSourceRequestHandler prop to SectionsContainer or WidgetProvider.');
+        }
+    }, [dataSourceRequestHandler]);
     // Find the maximum number of vertical panels across all sections
     // This determines the grid size (minimum 3 columns)
     // Also account for table widgets and their explicit column spans
@@ -3202,7 +4019,7 @@ const SectionsContainer = ({ sections, apiAdapter, schemaData, onValueChange, cl
                         : undefined;
                     // Check if section has explicit column span
                     if (section['section-column-span']) {
-                        return (jsxRuntimeExports.jsx(SectionRenderer, { section: section, apiAdapter: apiAdapter, schemaData: schemaData, onValueChange: onValueChange, gridColumnSpan: section['section-column-span'], onSectionSave: onSectionSave, hideEditButton: hideEditButton, mode: mode, namespace: sectionNamespace }, section['section-id']));
+                        return (jsxRuntimeExports.jsx(SectionRenderer, { section: section, dataSourceRequestHandler: dataSourceRequestHandler, schemaData: schemaData, onValueChange: onValueChange, gridColumnSpan: section['section-column-span'], onSectionSave: onSectionSave, hideEditButton: hideEditButton, mode: mode, namespace: sectionNamespace }, section['section-id']));
                     }
                     const verticalPanelsCount = countVerticalPanels(section.panels);
                     const tableWidgetColumnSpan = getTableWidgetColumnSpan(section.panels);
@@ -3213,16 +4030,1676 @@ const SectionsContainer = ({ sections, apiAdapter, schemaData, onValueChange, cl
                     const columnSpan = tableWidgetColumnSpan !== null
                         ? tableWidgetColumnSpan
                         : (containsTable ? Math.max(verticalPanelsCount, 2) : verticalPanelsCount);
-                    return (jsxRuntimeExports.jsx(SectionRenderer, { section: section, apiAdapter: apiAdapter, schemaData: schemaData, onValueChange: onValueChange, gridColumnSpan: columnSpan, onSectionSave: onSectionSave, hideEditButton: hideEditButton, mode: mode, namespace: sectionNamespace }, section['section-id']));
+                    return (jsxRuntimeExports.jsx(SectionRenderer, { section: section, dataSourceRequestHandler: dataSourceRequestHandler, schemaData: schemaData, onValueChange: onValueChange, gridColumnSpan: columnSpan, onSectionSave: onSectionSave, hideEditButton: hideEditButton, mode: mode, namespace: sectionNamespace }, section['section-id']));
                 }) })] }));
 };
 
 /**
- * Filter input value based on allowed character type
+ * JSON Schema definitions for Section Builder validation
+ * These schemas are used by json-edit-react to provide validation and constraints
  */
-const filterByCharacterType = (value, characterType = 'any', customCharset) => {
-    if (characterType === 'any') {
-        return value;
+const WIDGET_TYPES = [
+    'text',
+    'textarea',
+    'number',
+    'boolean',
+    'date',
+    'datetime',
+    'select',
+    'radio',
+    'checkbox',
+    'file',
+    'simple-table',
+    'table',
+    'array-widget',
+    'iterable-accordion',
+    'phone',
+    'currency',
+    'display',
+    'profile',
+];
+const ORIENTATIONS = ['horizontal', 'vertical'];
+const CONDITION_OPERATORS = [
+    'equals',
+    'notEquals',
+    'notEmpty',
+    'empty',
+    'greaterThan',
+    'lessThan',
+    'contains',
+    'notContains',
+];
+const DATA_SOURCE_TYPES = ['static', 'api', 'schema'];
+const VALIDATION_TYPES = ['email', 'phone', 'url'];
+const CHARACTER_TYPES = [
+    'any',
+    'alphabetic',
+    'alphanumeric',
+    'numeric',
+    'numeric-decimal',
+    'custom',
+];
+const CASE_CONTROLS = ['none', 'lowercase', 'uppercase', 'capitalize'];
+const NUMERIC_TYPES = ['integer', 'decimal'];
+const BOOLEAN_REPRESENTATIONS = ['true-false', 'yes-no', 'on-off', 'custom'];
+const BOOLEAN_CONTROL_TYPES = ['checkbox', 'radio', 'toggle'];
+
+// Inject styles to constrain json-edit-react container
+if (typeof document !== 'undefined') {
+    const styleId = 'json-editor-constraints';
+    if (!document.getElementById(styleId)) {
+        const style = document.createElement('style');
+        style.id = styleId;
+        style.textContent = `
+      .json-editor-scroll-container {
+        display: flex !important;
+        flex-direction: column !important;
+        height: 100% !important;
+        max-height: 100% !important;
+        overflow: auto !important;
+      }
+      .json-editor-scroll-container .jer-editor-container {
+        max-width: 100% !important;
+        width: 100% !important;
+        height: auto !important;
+        max-height: none !important;
+        flex-shrink: 0 !important;
+        background-color: white !important;
+      }
+      .json-editor-scroll-container .jer-component {
+        width: 100% !important;
+      }
+    `;
+        document.head.appendChild(style);
+    }
+}
+/**
+ * JSON Editor Panel - Left side of Section Builder
+ */
+const JSONEditorPanel = ({ section, onChange, onReset, onSelectNode, context = 'section', }) => {
+    const [jsonData, setJsonData] = useState(section);
+    const [validationErrors, setValidationErrors] = useState([]);
+    const [rawJsonView, setRawJsonView] = useState(false);
+    const [rawJsonText, setRawJsonText] = useState('');
+    const [showPreview, setShowPreview] = useState(false);
+    const [editorKey, setEditorKey] = useState(0); // Key to force JsonEditor re-render on reset
+    // Store the original section when component mounts or section prop changes
+    const originalSectionRef = useRef(section);
+    // Get WidgetProvider context for preview modal (optional - may not be available)
+    let widgetContext;
+    try {
+        widgetContext = useWidgetContext();
+    }
+    catch {
+        widgetContext = {
+            dataSourceRequestHandler: undefined,
+            schemaData: undefined,
+            translate: undefined,
+        };
+    }
+    // Create a store for the preview modal if we're not in a Provider
+    // This ensures SectionRenderer has access to Redux
+    const previewStore = useMemo(() => createWidgetStore(), []);
+    // Track if this is the initial mount
+    const isInitialMount = useRef(true);
+    useEffect(() => {
+        // Only update original section on initial mount (when page loads)
+        // This ensures reset works until save is clicked
+        // Don't update original when user makes edits (those come through onChange)
+        if (isInitialMount.current) {
+            originalSectionRef.current = JSON.parse(JSON.stringify(section)); // Deep copy
+            isInitialMount.current = false;
+        }
+        // Always sync the display with the section prop (for external updates like reset from parent)
+        setJsonData(section);
+        setRawJsonText(JSON.stringify(section, null, 2));
+        // Force JsonEditor to update when section prop changes (e.g., from parent reset)
+        setEditorKey(prev => prev + 1);
+    }, [section]);
+    // Reset to original section
+    const handleReset = useCallback(() => {
+        // If parent provides onReset, use it (this will reset both JSON editor and visual builder)
+        if (onReset) {
+            onReset();
+            // Also force JsonEditor to remount to ensure it picks up the reset
+            setEditorKey(prev => prev + 1);
+            return;
+        }
+        // Fallback: reset only this panel (for standalone usage)
+        const original = JSON.parse(JSON.stringify(originalSectionRef.current)); // Deep copy to ensure new reference
+        // Update state immediately
+        setJsonData(original);
+        setRawJsonText(JSON.stringify(original, null, 2));
+        // Force JsonEditor to completely remount by changing key
+        // This is critical because json-edit-react maintains internal state that doesn't sync with props
+        setEditorKey(prev => prev + 1);
+        // Notify parent
+        onChange(original);
+    }, [onChange, onReset]);
+    // Handle Escape key to close preview
+    useEffect(() => {
+        if (!showPreview)
+            return;
+        const handleEscape = (e) => {
+            if (e.key === 'Escape') {
+                setShowPreview(false);
+            }
+        };
+        window.addEventListener('keydown', handleEscape);
+        return () => window.removeEventListener('keydown', handleEscape);
+    }, [showPreview]);
+    // Handle clicks in JSON editor to select corresponding node in visual builder
+    useEffect(() => {
+        if (!onSelectNode || rawJsonView)
+            return; // Only work in tree view, not raw JSON view
+        const handleJsonEditorClick = (e) => {
+            const mouseEvent = e;
+            const target = mouseEvent.target;
+            // Find the key text element (json-edit-react uses .jer-key-text class)
+            const keyElement = target.closest('.jer-key-text') ||
+                target.querySelector('.jer-key-text') ||
+                (target.classList.contains('jer-key-text') ? target : null);
+            if (!keyElement)
+                return;
+            const keyText = keyElement.textContent?.trim();
+            if (!keyText)
+                return;
+            // Remove colon if present
+            const keyName = keyText.replace(':', '').trim();
+            // Map key names to node types and find the corresponding node
+            let nodeId = null;
+            let nodeType = null;
+            if (keyName === 'section-id') {
+                // Find the section-id value
+                const keyRow = keyElement.closest('.jer-collection-header-row, .jer-value-row');
+                if (keyRow) {
+                    const valueElement = keyRow.querySelector('.jer-value-text, .jer-string-value');
+                    if (valueElement) {
+                        nodeId = valueElement.textContent?.replace(/^"|"$/g, '').trim() || section['section-id'];
+                        nodeType = 'section';
+                    }
+                }
+            }
+            else if (keyName === 'panel-id') {
+                // Find the panel-id value in the current panel object
+                const panelContainer = keyElement.closest('.jer-collection-component');
+                if (panelContainer) {
+                    const valueElement = panelContainer.querySelector('.jer-value-text, .jer-string-value');
+                    if (valueElement) {
+                        // Try to find panel-id value in this panel
+                        const allKeys = panelContainer.querySelectorAll('.jer-key-text');
+                        for (const key of Array.from(allKeys)) {
+                            if (key.textContent?.includes('panel-id')) {
+                                const keyRow = key.closest('.jer-collection-header-row, .jer-value-row');
+                                if (keyRow) {
+                                    const valElement = keyRow.querySelector('.jer-value-text, .jer-string-value');
+                                    if (valElement) {
+                                        nodeId = valElement.textContent?.replace(/^"|"$/g, '').trim() || null;
+                                        nodeType = 'panel';
+                                        break;
+                                    }
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+            else if (keyName === 'widget-id') {
+                // Find the widget-id value in the current widget object
+                const widgetContainer = keyElement.closest('.jer-collection-component');
+                if (widgetContainer) {
+                    const allKeys = widgetContainer.querySelectorAll('.jer-key-text');
+                    for (const key of Array.from(allKeys)) {
+                        if (key.textContent?.includes('widget-id')) {
+                            const keyRow = key.closest('.jer-collection-header-row, .jer-value-row');
+                            if (keyRow) {
+                                const valElement = keyRow.querySelector('.jer-value-text, .jer-string-value');
+                                if (valElement) {
+                                    nodeId = valElement.textContent?.replace(/^"|"$/g, '').trim() || null;
+                                    nodeType = 'widget';
+                                    break;
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+            // If we found a node, select it in the visual builder
+            if (nodeId && nodeType) {
+                onSelectNode(nodeId, nodeType);
+            }
+        };
+        // Add click listener to the JSON editor container
+        const editorContainer = document.querySelector('.json-editor-scroll-container');
+        if (editorContainer) {
+            editorContainer.addEventListener('click', handleJsonEditorClick);
+            return () => {
+                editorContainer.removeEventListener('click', handleJsonEditorClick);
+            };
+        }
+    }, [onSelectNode, rawJsonView, section]);
+    // Make section editable for preview - remove readonly flags from widgets
+    const makeSectionEditable = useCallback((section) => {
+        const processWidget = (widget) => {
+            if (!widget || typeof widget !== 'object')
+                return widget;
+            const editableWidget = {
+                ...widget,
+                'widget-readonly': false, // Make all widgets editable in preview
+            };
+            // Process nested widgets
+            if (widget.widgets && Array.isArray(widget.widgets)) {
+                editableWidget.widgets = widget.widgets.map(processWidget);
+            }
+            if (widget['widget-item']) {
+                editableWidget['widget-item'] = processWidget(widget['widget-item']);
+            }
+            // Process table columns
+            if (widget['widget-data-columns'] && Array.isArray(widget['widget-data-columns'])) {
+                editableWidget['widget-data-columns'] = widget['widget-data-columns'].map((col) => {
+                    if (col && typeof col === 'object' && col.widget) {
+                        return processWidget(col);
+                    }
+                    return col;
+                });
+            }
+            return editableWidget;
+        };
+        const processPanel = (panel) => {
+            if (!panel || typeof panel !== 'object')
+                return panel;
+            const editablePanel = { ...panel };
+            if (panel.widgets && Array.isArray(panel.widgets)) {
+                editablePanel.widgets = panel.widgets.map(processWidget);
+            }
+            if (panel.panels && Array.isArray(panel.panels)) {
+                editablePanel.panels = panel.panels.map(processPanel);
+            }
+            return editablePanel;
+        };
+        return {
+            ...section,
+            'section-editable': true,
+            panels: section.panels ? section.panels.map(processPanel) : [],
+        };
+    }, []);
+    // Auto-populate widget-type based on widget selection
+    const autoPopulateWidgetType = useCallback((data) => {
+        if (!data || typeof data !== 'object')
+            return data;
+        const processWidget = (widget) => {
+            if (!widget || typeof widget !== 'object')
+                return widget;
+            const widgetType = widget.widget;
+            if (widgetType && !widget['widget-type']) {
+                // Auto-determine widget-type based on widget name
+                const widgetTypeMap = {
+                    'text': 'input',
+                    'textarea': 'input',
+                    'number': 'input',
+                    'boolean': 'input',
+                    'date': 'input',
+                    'datetime': 'input',
+                    'select': 'input',
+                    'radio': 'input',
+                    'checkbox': 'input',
+                    'file': 'input',
+                    'phone': 'input',
+                    'currency': 'input',
+                    'display': 'input',
+                    'table': 'table',
+                    'simple-table': 'table',
+                    'array-widget': 'group',
+                    'iterable-accordion': 'group',
+                    'profile': 'layout',
+                };
+                widget = {
+                    ...widget,
+                    'widget-type': widgetTypeMap[widgetType] || 'input',
+                };
+            }
+            // Process nested widgets
+            if (widget.widgets && Array.isArray(widget.widgets)) {
+                widget = {
+                    ...widget,
+                    widgets: widget.widgets.map(processWidget),
+                };
+            }
+            // Process widget-item
+            if (widget['widget-item']) {
+                widget = {
+                    ...widget,
+                    'widget-item': processWidget(widget['widget-item']),
+                };
+            }
+            // Process table columns
+            if (widget['widget-data-columns'] && Array.isArray(widget['widget-data-columns'])) {
+                widget = {
+                    ...widget,
+                    'widget-data-columns': widget['widget-data-columns'].map((col) => {
+                        if (col && typeof col === 'object' && col.widget && !col['widget-type']) {
+                            const widgetTypeMap = {
+                                'text': 'input',
+                                'number': 'input',
+                                'date': 'input',
+                                'select': 'input',
+                                'boolean': 'input',
+                            };
+                            return {
+                                ...col,
+                                'widget-type': widgetTypeMap[col.widget] || 'input',
+                            };
+                        }
+                        return col;
+                    }),
+                };
+            }
+            return widget;
+        };
+        const processPanel = (panel) => {
+            if (!panel || typeof panel !== 'object')
+                return panel;
+            let processed = { ...panel };
+            // Process widgets in panel
+            if (processed.widgets && Array.isArray(processed.widgets)) {
+                processed.widgets = processed.widgets.map(processWidget);
+            }
+            // Process nested panels
+            if (processed.panels && Array.isArray(processed.panels)) {
+                processed.panels = processed.panels.map(processPanel);
+            }
+            return processed;
+        };
+        // Process section
+        if (data.panels && Array.isArray(data.panels)) {
+            return {
+                ...data,
+                panels: data.panels.map(processPanel),
+            };
+        }
+        return data;
+    }, []);
+    const handleJsonChange = useCallback((data) => {
+        // json-edit-react may wrap the data in a "root" key - unwrap it if present
+        let unwrappedData = data?.root ? data.root : data;
+        // Auto-populate widget-type for widgets that don't have it
+        unwrappedData = autoPopulateWidgetType(unwrappedData);
+        setJsonData(unwrappedData);
+        setRawJsonText(JSON.stringify(unwrappedData, null, 2));
+        // Basic validation
+        const errors = [];
+        if (!unwrappedData['section-id']) {
+            errors.push('section-id is required');
+        }
+        if (!unwrappedData.panels || !Array.isArray(unwrappedData.panels)) {
+            errors.push('panels must be an array');
+        }
+        setValidationErrors(errors);
+        // Only update if valid
+        if (errors.length === 0) {
+            onChange(unwrappedData);
+        }
+    }, [onChange, autoPopulateWidgetType]);
+    const handleRawJsonChange = useCallback((text) => {
+        setRawJsonText(text);
+        try {
+            const parsed = JSON.parse(text);
+            const errors = [];
+            if (!parsed['section-id']) {
+                errors.push('section-id is required');
+            }
+            if (!parsed.panels || !Array.isArray(parsed.panels)) {
+                errors.push('panels must be an array');
+            }
+            setValidationErrors(errors);
+            // Auto-populate widget-type
+            const processed = autoPopulateWidgetType(parsed);
+            if (errors.length === 0) {
+                setJsonData(processed);
+                onChange(processed);
+            }
+        }
+        catch (error) {
+            setValidationErrors([`Invalid JSON: ${error instanceof Error ? error.message : 'Parse error'}`]);
+        }
+    }, [onChange, autoPopulateWidgetType]);
+    const toggleRawJsonView = useCallback(() => {
+        if (!rawJsonView) {
+            // Switching to raw view - update text from current data
+            setRawJsonText(JSON.stringify(jsonData, null, 2));
+        }
+        setRawJsonView(!rawJsonView);
+    }, [rawJsonView, jsonData]);
+    // Create enum configuration for json-edit-react
+    // This maps field paths to their allowed enum values
+    const enumConfig = useCallback(() => {
+        return {
+            // Section level
+            'section-id': undefined, // string, no enum
+            'section-title': undefined, // string, no enum
+            'section-editable': undefined, // boolean, no enum
+            'section-column-span': undefined, // number, no enum
+            // Panel level - can be nested in panels array
+            'panel-id': undefined, // string, no enum
+            'panel-orientation': ORIENTATIONS, // enum: ['horizontal', 'vertical']
+            'panel-column-span': undefined, // number, no enum
+            // Widget level - can be nested in widgets array or widget-item
+            'widget': WIDGET_TYPES, // enum: all widget types
+            'widget-type': ['input', 'layout', 'table', 'group'], // enum
+            'widget-id': undefined, // string, no enum
+            'widget-label': undefined, // string, no enum
+            'widget-orientation': ORIENTATIONS, // enum: ['horizontal', 'vertical']
+            'widget-required': undefined, // boolean, no enum
+            'widget-readonly': undefined, // boolean, no enum
+            // Widget data source type
+            'widget-data-source.type': DATA_SOURCE_TYPES, // enum: ['static', 'api', 'schema']
+            'widget-data-source.method': ['GET', 'POST', 'PUT', 'DELETE'], // HTTP methods
+            // Widget validation
+            'widget-data-validation.validationType': VALIDATION_TYPES, // enum: ['email', 'phone', 'url']
+            // Widget format options
+            'widget-data-format.inputType': ['text', 'email', 'password', 'number', 'tel', 'url', 'search', 'file'],
+            'widget-data-format.characterType': CHARACTER_TYPES,
+            'widget-data-format.caseControl': CASE_CONTROLS,
+            'widget-data-format.numericType': NUMERIC_TYPES,
+            'widget-data-format.roundingMode': ['round', 'truncate'],
+            'widget-data-format.textAlign': ['left', 'right'],
+            'widget-data-format.booleanRepresentation': BOOLEAN_REPRESENTATIONS,
+            'widget-data-format.booleanControlType': BOOLEAN_CONTROL_TYPES,
+            'widget-data-format.layout': ['vertical', 'horizontal', 'grid'],
+            'widget-data-format.inputMethod': ['picker', 'manual', 'hybrid'],
+            'widget-data-format.dateConstraint': ['any', 'past-only', 'future-only'],
+            'widget-data-format.dateTimeConstraint': ['any', 'past-only', 'future-only'],
+            // Widget options
+            'widget-data-options.action': ['show', 'hide', 'enable', 'disable'],
+            'widget-data-options.condition.operator': CONDITION_OPERATORS,
+        };
+    }, []);
+    return (jsxRuntimeExports.jsxs("div", { style: {
+            display: 'flex',
+            flexDirection: 'column',
+            height: '100%',
+            width: '100%',
+            minHeight: 0,
+            borderRight: '0px',
+        }, children: [jsxRuntimeExports.jsxs("div", { style: {
+                    padding: '15px 20px',
+                    background: '#ffffff',
+                    display: 'flex',
+                    justifyContent: 'space-between',
+                    alignItems: 'center',
+                }, children: [jsxRuntimeExports.jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: '12px' }, children: [jsxRuntimeExports.jsx("div", { style: { fontWeight: 600, fontSize: '16px', color: '#2c3e50' }, children: "JSON Editor" }), validationErrors.length === 0 ? (jsxRuntimeExports.jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: '6px', color: '#28a745' }, children: [jsxRuntimeExports.jsx("div", { style: {
+                                            width: '12px',
+                                            height: '12px',
+                                            borderRadius: '50%',
+                                            background: '#28a745',
+                                        } }), jsxRuntimeExports.jsx("span", { style: { fontSize: '12px' }, children: "Valid JSON Schema" })] })) : (jsxRuntimeExports.jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: '6px', color: '#e74c3c' }, children: [jsxRuntimeExports.jsx("div", { style: {
+                                            width: '12px',
+                                            height: '12px',
+                                            borderRadius: '50%',
+                                            background: '#e74c3c',
+                                        } }), jsxRuntimeExports.jsx("span", { style: { fontSize: '12px' }, children: "Validation Errors" })] }))] }), jsxRuntimeExports.jsxs("div", { style: {
+                            display: 'flex',
+                            alignItems: 'center',
+                            gap: '8px',
+                        }, children: [jsxRuntimeExports.jsxs("button", { onClick: handleReset, style: {
+                                    padding: '6px 12px',
+                                    border: '1px solid #ddd',
+                                    borderRadius: '4px',
+                                    background: 'white',
+                                    color: '#666',
+                                    cursor: 'pointer',
+                                    display: 'flex',
+                                    alignItems: 'center',
+                                    gap: '6px',
+                                    fontSize: '12px',
+                                    fontWeight: 500,
+                                    transition: 'all 0.2s',
+                                }, onMouseEnter: (e) => {
+                                    e.currentTarget.style.background = '#f8f9fa';
+                                    e.currentTarget.style.borderColor = '#999';
+                                }, onMouseLeave: (e) => {
+                                    e.currentTarget.style.background = 'white';
+                                    e.currentTarget.style.borderColor = '#ddd';
+                                }, title: "Reset to original JSON", children: [jsxRuntimeExports.jsxs("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [jsxRuntimeExports.jsx("path", { d: "M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8" }), jsxRuntimeExports.jsx("path", { d: "M21 3v5h-5" }), jsxRuntimeExports.jsx("path", { d: "M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16" }), jsxRuntimeExports.jsx("path", { d: "M3 21v-5h5" })] }), "Reset"] }), jsxRuntimeExports.jsxs("button", { onClick: () => setShowPreview(true), style: {
+                                    padding: '6px 12px',
+                                    border: '1px solid #ddd',
+                                    borderRadius: '4px',
+                                    background: 'white',
+                                    color: '#666',
+                                    cursor: 'pointer',
+                                    display: 'flex',
+                                    alignItems: 'center',
+                                    gap: '6px',
+                                    fontSize: '12px',
+                                    fontWeight: 500,
+                                }, title: "Preview Section", children: [jsxRuntimeExports.jsxs("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [jsxRuntimeExports.jsx("path", { d: "M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" }), jsxRuntimeExports.jsx("circle", { cx: "12", cy: "12", r: "3" })] }), "Preview"] }), jsxRuntimeExports.jsx("span", { style: {
+                                    fontSize: '12px',
+                                    color: !rawJsonView ? '#007bff' : '#6c757d',
+                                    fontWeight: !rawJsonView ? 600 : 400,
+                                    transition: 'color 0.2s',
+                                }, children: "Tree" }), jsxRuntimeExports.jsx("div", { onClick: toggleRawJsonView, style: {
+                                    position: 'relative',
+                                    width: '44px',
+                                    height: '24px',
+                                    background: rawJsonView ? '#007bff' : '#ccc',
+                                    borderRadius: '12px',
+                                    cursor: 'pointer',
+                                    transition: 'background 0.2s',
+                                }, children: jsxRuntimeExports.jsx("div", { style: {
+                                        position: 'absolute',
+                                        top: '2px',
+                                        left: rawJsonView ? '22px' : '2px',
+                                        width: '20px',
+                                        height: '20px',
+                                        background: 'white',
+                                        borderRadius: '50%',
+                                        transition: 'left 0.2s',
+                                        boxShadow: '0 2px 4px rgba(0,0,0,0.2)',
+                                    } }) }), jsxRuntimeExports.jsx("span", { style: {
+                                    fontSize: '12px',
+                                    color: rawJsonView ? '#007bff' : '#6c757d',
+                                    fontWeight: rawJsonView ? 600 : 400,
+                                    transition: 'color 0.2s',
+                                }, children: "Raw" })] })] }), jsxRuntimeExports.jsx("div", { style: {
+                    flex: 1,
+                    minHeight: 0,
+                    maxHeight: '100%',
+                    overflow: 'hidden',
+                    background: 'white',
+                    border: '1px solid #E1E1E1',
+                    borderRadius: '10px',
+                    padding: rawJsonView ? '0' : '20px',
+                    position: 'relative',
+                    display: 'flex',
+                    flexDirection: 'column',
+                }, children: rawJsonView ? (jsxRuntimeExports.jsx("textarea", { value: rawJsonText, onChange: (e) => handleRawJsonChange(e.target.value), style: {
+                        width: '100%',
+                        height: '100%',
+                        background: 'white',
+                        color: '#333',
+                        border: 'none',
+                        padding: '20px',
+                        fontFamily: 'Monaco, Menlo, "Ubuntu Mono", Consolas, "source-code-pro", monospace',
+                        fontSize: '13px',
+                        lineHeight: '1.5',
+                        resize: 'none',
+                        outline: 'none',
+                        boxSizing: 'border-box',
+                        borderRadius: '10px',
+                    }, spellCheck: false })) : (jsxRuntimeExports.jsx("div", { className: "json-editor-scroll-container", style: {
+                        width: '100%',
+                        height: '100%',
+                        minHeight: 0,
+                        maxHeight: '100%',
+                        overflow: 'auto',
+                        position: 'relative',
+                        display: 'flex',
+                        flexDirection: 'column',
+                        flex: '1 1 0',
+                    }, children: jsxRuntimeExports.jsx(JsonEditor, { data: jsonData, setData: handleJsonChange, ...{ enumOptions: enumConfig() } }, `editor-${editorKey}`) })) }), showPreview && createPortal(jsxRuntimeExports.jsx("div", { className: "section-builder-preview-backdrop", style: {
+                    position: 'fixed',
+                    top: 0,
+                    left: 0,
+                    right: 0,
+                    bottom: 0,
+                    background: 'rgba(0, 0, 0, 0.5)',
+                    zIndex: 10000,
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    padding: '20px',
+                }, onClick: () => setShowPreview(false), children: jsxRuntimeExports.jsxs("div", { className: "section-builder-preview-modal", style: {
+                        background: 'white',
+                        borderRadius: '8px',
+                        width: '100%',
+                        minWidth: '700px', // Ensure enough width for 600px content + padding
+                        maxWidth: '90vw',
+                        height: '90vh',
+                        maxHeight: '90vh',
+                        display: 'flex',
+                        flexDirection: 'column',
+                        boxShadow: '0 4px 20px rgba(0, 0, 0, 0.3)',
+                    }, onClick: (e) => e.stopPropagation(), children: [jsxRuntimeExports.jsxs("div", { className: "section-builder-preview-header", style: {
+                                padding: '15px 20px',
+                                borderBottom: '1px solid #ddd',
+                                display: 'flex',
+                                justifyContent: 'space-between',
+                                alignItems: 'center',
+                                background: '#f8f9fa',
+                            }, children: [jsxRuntimeExports.jsx("h2", { className: "section-builder-preview-title", style: { margin: 0, fontSize: '18px', fontWeight: 600, color: '#2c3e50' }, children: "Section Preview" }), jsxRuntimeExports.jsx("button", { className: "section-builder-preview-close", onClick: () => setShowPreview(false), style: {
+                                        padding: '6px 12px',
+                                        border: 'none',
+                                        borderRadius: '4px',
+                                        background: '#e74c3c',
+                                        color: 'white',
+                                        cursor: 'pointer',
+                                        fontSize: '14px',
+                                        fontWeight: 600,
+                                    }, children: "Close" })] }), jsxRuntimeExports.jsx("div", { className: "section-builder-preview-content", style: {
+                                flex: 1,
+                                overflow: 'auto',
+                                padding: '20px',
+                            }, children: jsxRuntimeExports.jsx(Provider, { store: previewStore, children: jsxRuntimeExports.jsx(WidgetProvider, { store: previewStore, dataSourceRequestHandler: widgetContext.dataSourceRequestHandler, schemaData: widgetContext.schemaData, translate: widgetContext.translate, children: jsxRuntimeExports.jsx("div", { style: { position: 'relative', width: '100%', height: '100%' }, children: jsxRuntimeExports.jsx(SectionRenderer, { section: makeSectionEditable(jsonData), hideEditButton: true, onValueChange: (widgetId, value) => {
+                                                // Handle value changes in preview (optional - for tracking)
+                                                console.log('Preview value changed:', widgetId, value);
+                                            } }) }) }) }) })] }) }), document.body)] }));
+};
+
+/**
+ * Recursively build tree nodes from panel structure
+ */
+function buildTreeNodesFromPanels(panels, parent) {
+    const nodes = [];
+    panels.forEach((panel) => {
+        const panelNode = {
+            type: 'panel',
+            id: panel['panel-id'],
+            label: `Panel: ${panel['panel-id']}`,
+            data: panel,
+            parent: parent,
+            children: [],
+        };
+        // Add nested panels recursively
+        if (panel.panels && panel.panels.length > 0) {
+            panelNode.children = panelNode.children || [];
+            panelNode.children.push(...buildTreeNodesFromPanels(panel.panels, panelNode));
+        }
+        // Add widgets
+        if (panel.widgets && panel.widgets.length > 0) {
+            panelNode.children = panelNode.children || [];
+            panel.widgets.forEach((widget) => {
+                panelNode.children.push({
+                    type: 'widget',
+                    id: widget['widget-id'],
+                    label: `Widget: ${widget['widget-id']} (${widget.widget})`,
+                    data: widget,
+                    parent: panelNode,
+                });
+            });
+        }
+        nodes.push(panelNode);
+    });
+    return nodes;
+}
+/**
+ * Tree view component for section structure
+ */
+const SectionTree = ({ section, selectedNode, onSelectNode, onAddPanel, onAddWidget, onDeleteNode, onDuplicateNode, }) => {
+    const treeNodes = React.useMemo(() => {
+        if (section.panels && section.panels.length > 0) {
+            return buildTreeNodesFromPanels(section.panels);
+        }
+        return [];
+    }, [section]);
+    const renderTreeNode = (node, level = 0) => {
+        const isSelected = selectedNode?.id === node.id && selectedNode?.type === node.type;
+        const indent = level * 20;
+        const getNodeStyles = () => {
+            const baseStyles = {
+                marginLeft: `${indent}px`,
+                marginTop: '4px',
+                padding: '8px 12px',
+                borderRadius: '4px',
+                cursor: 'pointer',
+                position: 'relative',
+                transition: 'background 0.2s',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'space-between',
+            };
+            if (isSelected) {
+                switch (node.type) {
+                    case 'section':
+                        return { ...baseStyles, background: '#e3f2fd', border: '1px solid #2196f3' };
+                    case 'panel':
+                        return { ...baseStyles, background: '#fff3e0', border: '1px solid #ff9800' };
+                    case 'widget':
+                        return { ...baseStyles, background: '#e8f5e9', border: '1px solid #4caf50' };
+                }
+            }
+            switch (node.type) {
+                case 'section':
+                    return { ...baseStyles, background: '#e3f2fd', border: '1px solid #2196f3' };
+                case 'panel':
+                    return { ...baseStyles, background: '#fff3e0', border: '1px solid #ff9800' };
+                case 'widget':
+                    return { ...baseStyles, background: '#e8f5e9', border: '1px solid #4caf50' };
+            }
+            return baseStyles;
+        };
+        const getIcon = () => {
+            switch (node.type) {
+                case 'section':
+                    return '📁';
+                case 'panel':
+                    return '📦';
+                case 'widget':
+                    return '🔧';
+            }
+        };
+        const getActionButtonColor = () => {
+            switch (node.type) {
+                case 'section':
+                    return '#2196f3';
+                case 'panel':
+                    return '#ff9800';
+                case 'widget':
+                    return '#4caf50';
+            }
+        };
+        return (jsxRuntimeExports.jsxs("div", { children: [jsxRuntimeExports.jsxs("div", { style: getNodeStyles(), onClick: (e) => {
+                        e.stopPropagation();
+                        onSelectNode(node);
+                    }, onMouseEnter: (e) => {
+                        const target = e.currentTarget;
+                        const actionBtn = target.querySelector('.tree-action-btn');
+                        if (actionBtn)
+                            actionBtn.style.opacity = '1';
+                    }, onMouseLeave: (e) => {
+                        const target = e.currentTarget;
+                        const actionBtn = target.querySelector('.tree-action-btn');
+                        if (actionBtn)
+                            actionBtn.style.opacity = '0';
+                    }, children: [jsxRuntimeExports.jsxs("span", { style: { display: 'flex', alignItems: 'center', gap: '8px' }, children: [jsxRuntimeExports.jsx("span", { children: getIcon() }), jsxRuntimeExports.jsx("span", { style: { fontSize: '13px' }, children: node.label })] }), jsxRuntimeExports.jsx("button", { className: "tree-action-btn", onClick: (e) => {
+                                e.stopPropagation();
+                                onSelectNode(node);
+                            }, style: {
+                                width: '24px',
+                                height: '24px',
+                                borderRadius: '50%',
+                                border: 'none',
+                                background: getActionButtonColor(),
+                                color: 'white',
+                                cursor: 'pointer',
+                                fontSize: '12px',
+                                opacity: isSelected ? '1' : '0',
+                                transition: 'opacity 0.2s',
+                                display: 'flex',
+                                alignItems: 'center',
+                                justifyContent: 'center',
+                            }, children: "\u2699" })] }), node.children && node.children.length > 0 && (jsxRuntimeExports.jsx("div", { style: { marginLeft: `${indent + 20}px` }, children: node.children.map((child) => renderTreeNode(child, level + 1)) }))] }, node.id));
+    };
+    return (jsxRuntimeExports.jsxs("div", { style: {
+            padding: '15px',
+            overflowY: 'auto',
+            background: '#f8f9fa',
+            height: '100%',
+        }, children: [jsxRuntimeExports.jsx("h3", { style: { fontSize: '14px', marginBottom: '15px', color: '#2c3e50' }, children: "Section Structure" }), jsxRuntimeExports.jsxs("div", { style: {
+                    padding: '8px 12px',
+                    borderRadius: '4px',
+                    background: '#e3f2fd',
+                    border: '1px solid #2196f3',
+                    marginBottom: '10px',
+                    cursor: 'pointer',
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'space-between',
+                }, onClick: () => {
+                    const sectionNode = {
+                        type: 'section',
+                        id: section['section-id'],
+                        label: `Section: ${section['section-id']}`,
+                        data: section,
+                        children: treeNodes,
+                    };
+                    onSelectNode(sectionNode);
+                }, children: [jsxRuntimeExports.jsxs("span", { style: { display: 'flex', alignItems: 'center', gap: '8px' }, children: [jsxRuntimeExports.jsx("span", { children: "\uD83D\uDCC1" }), jsxRuntimeExports.jsxs("span", { style: { fontSize: '13px', fontWeight: 600 }, children: ["Section: ", section['section-id']] })] }), jsxRuntimeExports.jsx("button", { onClick: (e) => {
+                            e.stopPropagation();
+                            const sectionNode = {
+                                type: 'section',
+                                id: section['section-id'],
+                                label: `Section: ${section['section-id']}`,
+                                data: section,
+                                children: treeNodes,
+                            };
+                            onSelectNode(sectionNode);
+                        }, style: {
+                            width: '24px',
+                            height: '24px',
+                            borderRadius: '50%',
+                            border: 'none',
+                            background: '#2196f3',
+                            color: 'white',
+                            cursor: 'pointer',
+                            fontSize: '12px',
+                        }, children: "\u2699" })] }), treeNodes.map((node) => renderTreeNode(node, 0))] }));
+};
+
+/**
+ * Property editor component for editing selected node properties
+ */
+const PropertyEditor = ({ node, onChange, onDelete, onDuplicate, }) => {
+    const [localData, setLocalData] = useState(null);
+    useEffect(() => {
+        if (node) {
+            setLocalData({ ...node.data });
+        }
+    }, [node]);
+    if (!node || !localData) {
+        return (jsxRuntimeExports.jsx("div", { style: {
+                padding: '15px',
+                background: '#f8f9fa',
+                height: '100%',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                color: '#666',
+            }, children: "Select an item to edit properties" }));
+    }
+    const handleChange = (field, value) => {
+        const updated = { ...localData, [field]: value };
+        setLocalData(updated);
+        onChange(node, updated);
+    };
+    const handleNestedChange = (field, nestedField, value) => {
+        const updated = {
+            ...localData,
+            [field]: {
+                ...(localData[field] || {}),
+                [nestedField]: value,
+            },
+        };
+        setLocalData(updated);
+        onChange(node, updated);
+    };
+    const ensureNestedObject = (field) => {
+        if (!localData[field]) {
+            const updated = {
+                ...localData,
+                [field]: {},
+            };
+            setLocalData(updated);
+            onChange(node, updated);
+        }
+    };
+    const renderSectionProperties = () => {
+        const section = localData;
+        return (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsxs("div", { style: { marginBottom: '20px' }, children: [jsxRuntimeExports.jsxs("label", { style: { display: 'block', marginBottom: '5px', fontSize: '12px', fontWeight: 500 }, children: ["Section ID ", jsxRuntimeExports.jsx("span", { style: { color: '#e74c3c' }, children: "*" })] }), jsxRuntimeExports.jsx("input", { type: "text", value: section['section-id'] || '', onChange: (e) => handleChange('section-id', e.target.value), style: {
+                                width: '100%',
+                                padding: '8px 12px',
+                                border: '1px solid #ccc',
+                                borderRadius: '4px',
+                                fontSize: '12px',
+                            } })] }), jsxRuntimeExports.jsxs("div", { style: { marginBottom: '20px' }, children: [jsxRuntimeExports.jsx("label", { style: { display: 'block', marginBottom: '5px', fontSize: '12px', fontWeight: 500 }, children: "Section Title" }), jsxRuntimeExports.jsx("input", { type: "text", value: section['section-title'] || '', onChange: (e) => handleChange('section-title', e.target.value), style: {
+                                width: '100%',
+                                padding: '8px 12px',
+                                border: '1px solid #ccc',
+                                borderRadius: '4px',
+                                fontSize: '12px',
+                            } })] }), jsxRuntimeExports.jsx("div", { style: { marginBottom: '20px' }, children: jsxRuntimeExports.jsxs("label", { style: { display: 'flex', alignItems: 'center', gap: '8px', fontSize: '12px' }, children: [jsxRuntimeExports.jsx("input", { type: "checkbox", checked: section['section-editable'] || false, onChange: (e) => handleChange('section-editable', e.target.checked) }), jsxRuntimeExports.jsx("span", { children: "Editable" })] }) }), jsxRuntimeExports.jsxs("div", { style: { marginBottom: '20px' }, children: [jsxRuntimeExports.jsx("label", { style: { display: 'block', marginBottom: '5px', fontSize: '12px', fontWeight: 500 }, children: "Column Span" }), jsxRuntimeExports.jsx("input", { type: "number", value: section['section-column-span'] || 1, onChange: (e) => handleChange('section-column-span', parseInt(e.target.value) || 1), min: "1", style: {
+                                width: '100%',
+                                padding: '8px 12px',
+                                border: '1px solid #ccc',
+                                borderRadius: '4px',
+                                fontSize: '12px',
+                            } })] })] }));
+    };
+    const renderPanelProperties = () => {
+        const panel = localData;
+        return (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsxs("div", { style: { marginBottom: '20px' }, children: [jsxRuntimeExports.jsxs("label", { style: { display: 'block', marginBottom: '5px', fontSize: '12px', fontWeight: 500 }, children: ["Panel ID ", jsxRuntimeExports.jsx("span", { style: { color: '#e74c3c' }, children: "*" })] }), jsxRuntimeExports.jsx("input", { type: "text", value: panel['panel-id'] || '', onChange: (e) => handleChange('panel-id', e.target.value), style: {
+                                width: '100%',
+                                padding: '8px 12px',
+                                border: '1px solid #ccc',
+                                borderRadius: '4px',
+                                fontSize: '12px',
+                            } })] }), jsxRuntimeExports.jsxs("div", { style: { marginBottom: '20px' }, children: [jsxRuntimeExports.jsx("label", { style: { display: 'block', marginBottom: '5px', fontSize: '12px', fontWeight: 500 }, children: "Orientation" }), jsxRuntimeExports.jsx("select", { value: panel['panel-orientation'] || 'vertical', onChange: (e) => handleChange('panel-orientation', e.target.value), style: {
+                                width: '100%',
+                                padding: '8px 12px',
+                                border: '1px solid #ccc',
+                                borderRadius: '4px',
+                                fontSize: '12px',
+                                background: 'white',
+                            }, children: ORIENTATIONS.map((opt) => (jsxRuntimeExports.jsx("option", { value: opt, children: opt }, opt))) })] }), jsxRuntimeExports.jsxs("div", { style: { marginBottom: '20px' }, children: [jsxRuntimeExports.jsx("label", { style: { display: 'block', marginBottom: '5px', fontSize: '12px', fontWeight: 500 }, children: "Column Span" }), jsxRuntimeExports.jsx("input", { type: "number", value: panel['panel-column-span'] || 1, onChange: (e) => handleChange('panel-column-span', parseInt(e.target.value) || 1), min: "1", style: {
+                                width: '100%',
+                                padding: '8px 12px',
+                                border: '1px solid #ccc',
+                                borderRadius: '4px',
+                                fontSize: '12px',
+                            } })] })] }));
+    };
+    const renderWidgetProperties = () => {
+        const widget = localData;
+        return (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsxs("div", { style: { marginBottom: '20px' }, children: [jsxRuntimeExports.jsxs("label", { style: { display: 'block', marginBottom: '5px', fontSize: '12px', fontWeight: 500 }, children: ["Widget Type ", jsxRuntimeExports.jsx("span", { style: { color: '#e74c3c' }, children: "*" })] }), jsxRuntimeExports.jsx("select", { value: widget.widget || '', onChange: (e) => {
+                                const newWidgetType = e.target.value;
+                                // When widget type changes, preserve common fields but clear widget-specific ones
+                                const updated = {
+                                    ...widget,
+                                    widget: newWidgetType,
+                                };
+                                // Clear widget-specific fields that don't apply to the new type
+                                if (!['select', 'radio', 'checkbox'].includes(newWidgetType)) {
+                                    delete updated['widget-data-source'];
+                                }
+                                if (newWidgetType !== 'table') {
+                                    delete updated['widget-data-columns'];
+                                }
+                                setLocalData(updated);
+                                onChange(node, updated);
+                            }, style: {
+                                width: '100%',
+                                padding: '8px 12px',
+                                border: '1px solid #ccc',
+                                borderRadius: '4px',
+                                fontSize: '12px',
+                                background: 'white',
+                            }, children: WIDGET_TYPES.map((type) => (jsxRuntimeExports.jsx("option", { value: type, children: type }, type))) })] }), jsxRuntimeExports.jsxs("div", { style: { marginBottom: '20px' }, children: [jsxRuntimeExports.jsxs("label", { style: { display: 'block', marginBottom: '5px', fontSize: '12px', fontWeight: 500 }, children: ["Widget ID ", jsxRuntimeExports.jsx("span", { style: { color: '#e74c3c' }, children: "*" })] }), jsxRuntimeExports.jsx("input", { type: "text", value: widget['widget-id'] || '', onChange: (e) => handleChange('widget-id', e.target.value), style: {
+                                width: '100%',
+                                padding: '8px 12px',
+                                border: '1px solid #ccc',
+                                borderRadius: '4px',
+                                fontSize: '12px',
+                            } })] }), jsxRuntimeExports.jsxs("div", { style: { marginBottom: '20px' }, children: [jsxRuntimeExports.jsx("label", { style: { display: 'block', marginBottom: '5px', fontSize: '12px', fontWeight: 500 }, children: "Widget Label" }), jsxRuntimeExports.jsx("input", { type: "text", value: widget['widget-label'] || '', onChange: (e) => handleChange('widget-label', e.target.value), style: {
+                                width: '100%',
+                                padding: '8px 12px',
+                                border: '1px solid #ccc',
+                                borderRadius: '4px',
+                                fontSize: '12px',
+                            }, placeholder: "Enter label..." })] }), jsxRuntimeExports.jsxs("div", { style: { marginBottom: '20px' }, children: [jsxRuntimeExports.jsx("label", { style: { display: 'block', marginBottom: '5px', fontSize: '12px', fontWeight: 500 }, children: "Data Path" }), jsxRuntimeExports.jsx("input", { type: "text", value: typeof widget['widget-data-path'] === 'string' ? widget['widget-data-path'] : '', onChange: (e) => handleChange('widget-data-path', e.target.value), style: {
+                                width: '100%',
+                                padding: '8px 12px',
+                                border: '1px solid #ccc',
+                                borderRadius: '4px',
+                                fontSize: '12px',
+                            }, placeholder: "person.name" })] }), jsxRuntimeExports.jsxs("div", { style: { marginBottom: '20px' }, children: [jsxRuntimeExports.jsx("label", { style: { display: 'block', marginBottom: '5px', fontSize: '12px', fontWeight: 500 }, children: "Placeholder" }), jsxRuntimeExports.jsx("input", { type: "text", value: widget['widget-data-placeholder'] || '', onChange: (e) => handleChange('widget-data-placeholder', e.target.value), style: {
+                                width: '100%',
+                                padding: '8px 12px',
+                                border: '1px solid #ccc',
+                                borderRadius: '4px',
+                                fontSize: '12px',
+                            }, placeholder: "Enter placeholder..." })] }), jsxRuntimeExports.jsx("div", { style: { marginBottom: '20px' }, children: jsxRuntimeExports.jsxs("label", { style: { display: 'flex', alignItems: 'center', gap: '8px', fontSize: '12px' }, children: [jsxRuntimeExports.jsx("input", { type: "checkbox", checked: widget['widget-required'] || false, onChange: (e) => handleChange('widget-required', e.target.checked) }), jsxRuntimeExports.jsx("span", { children: "Required" })] }) }), jsxRuntimeExports.jsx("div", { style: { marginBottom: '20px' }, children: jsxRuntimeExports.jsxs("label", { style: { display: 'flex', alignItems: 'center', gap: '8px', fontSize: '12px' }, children: [jsxRuntimeExports.jsx("input", { type: "checkbox", checked: widget['widget-readonly'] || false, onChange: (e) => handleChange('widget-readonly', e.target.checked) }), jsxRuntimeExports.jsx("span", { children: "Readonly" })] }) }), ['select', 'radio', 'checkbox'].includes(widget.widget) && (jsxRuntimeExports.jsxs("div", { style: { marginBottom: '20px', padding: '10px', background: '#e3f2fd', borderRadius: '4px' }, children: [jsxRuntimeExports.jsxs("label", { style: { display: 'block', marginBottom: '8px', fontSize: '12px', fontWeight: 600 }, children: ["Data Source (Required for ", widget.widget, ")"] }), jsxRuntimeExports.jsxs("div", { style: { marginBottom: '10px' }, children: [jsxRuntimeExports.jsx("label", { style: { display: 'block', marginBottom: '5px', fontSize: '11px' }, children: "Source Type" }), jsxRuntimeExports.jsxs("select", { value: widget['widget-data-source']?.type || 'static', onChange: (e) => {
+                                        ensureNestedObject('widget-data-source');
+                                        handleNestedChange('widget-data-source', 'type', e.target.value);
+                                    }, style: {
+                                        width: '100%',
+                                        padding: '6px 8px',
+                                        border: '1px solid #ccc',
+                                        borderRadius: '4px',
+                                        fontSize: '11px',
+                                        background: 'white',
+                                    }, children: [jsxRuntimeExports.jsx("option", { value: "static", children: "Static" }), jsxRuntimeExports.jsx("option", { value: "api", children: "API" }), jsxRuntimeExports.jsx("option", { value: "schema", children: "Schema" })] })] }), widget['widget-data-source']?.type === 'static' && (jsxRuntimeExports.jsxs("div", { children: [jsxRuntimeExports.jsx("label", { style: { display: 'block', marginBottom: '5px', fontSize: '11px' }, children: "Options (JSON array format: see placeholder below)" }), jsxRuntimeExports.jsx("textarea", { value: JSON.stringify(widget['widget-data-source']?.options || [], null, 2), onChange: (e) => {
+                                        try {
+                                            const parsed = JSON.parse(e.target.value);
+                                            handleNestedChange('widget-data-source', 'options', parsed);
+                                        }
+                                        catch {
+                                            // Invalid JSON, ignore
+                                        }
+                                    }, style: {
+                                        width: '100%',
+                                        padding: '6px 8px',
+                                        border: '1px solid #ccc',
+                                        borderRadius: '4px',
+                                        fontSize: '11px',
+                                        fontFamily: 'monospace',
+                                        minHeight: '80px',
+                                    }, placeholder: '[{"value": "opt1", "label": "Option 1"}]' })] })), widget['widget-data-source']?.type === 'api' && (() => {
+                            const apiSource = widget['widget-data-source'];
+                            return (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsxs("div", { style: { marginBottom: '10px' }, children: [jsxRuntimeExports.jsx("label", { style: { display: 'block', marginBottom: '5px', fontSize: '11px' }, children: "API URL" }), jsxRuntimeExports.jsx("input", { type: "text", value: apiSource.url || '', onChange: (e) => handleNestedChange('widget-data-source', 'url', e.target.value), style: {
+                                                    width: '100%',
+                                                    padding: '6px 8px',
+                                                    border: '1px solid #ccc',
+                                                    borderRadius: '4px',
+                                                    fontSize: '11px',
+                                                }, placeholder: "https://api.example.com/options" })] }), jsxRuntimeExports.jsxs("div", { children: [jsxRuntimeExports.jsx("label", { style: { display: 'block', marginBottom: '5px', fontSize: '11px' }, children: "Value/Label Keys (e.g., \"id\"/\"name\")" }), jsxRuntimeExports.jsxs("div", { style: { display: 'flex', gap: '8px' }, children: [jsxRuntimeExports.jsx("input", { type: "text", value: apiSource.valueKey || '', onChange: (e) => handleNestedChange('widget-data-source', 'valueKey', e.target.value), style: {
+                                                            flex: 1,
+                                                            padding: '6px 8px',
+                                                            border: '1px solid #ccc',
+                                                            borderRadius: '4px',
+                                                            fontSize: '11px',
+                                                        }, placeholder: "value key" }), jsxRuntimeExports.jsx("input", { type: "text", value: apiSource.labelKey || '', onChange: (e) => handleNestedChange('widget-data-source', 'labelKey', e.target.value), style: {
+                                                            flex: 1,
+                                                            padding: '6px 8px',
+                                                            border: '1px solid #ccc',
+                                                            borderRadius: '4px',
+                                                            fontSize: '11px',
+                                                        }, placeholder: "label key" })] })] })] }));
+                        })()] })), widget.widget === 'table' && (jsxRuntimeExports.jsxs("div", { style: { marginBottom: '20px', padding: '10px', background: '#fff3e0', borderRadius: '4px' }, children: [jsxRuntimeExports.jsx("label", { style: { display: 'block', marginBottom: '8px', fontSize: '12px', fontWeight: 600 }, children: "Table Columns" }), jsxRuntimeExports.jsx("div", { style: { fontSize: '11px', color: '#666', marginBottom: '10px' }, children: "Configure columns in JSON editor or add via code" }), jsxRuntimeExports.jsx("textarea", { value: JSON.stringify(widget['widget-data-columns'] || [], null, 2), onChange: (e) => {
+                                try {
+                                    const parsed = JSON.parse(e.target.value);
+                                    handleChange('widget-data-columns', parsed);
+                                }
+                                catch {
+                                    // Invalid JSON, ignore
+                                }
+                            }, style: {
+                                width: '100%',
+                                padding: '6px 8px',
+                                border: '1px solid #ccc',
+                                borderRadius: '4px',
+                                fontSize: '11px',
+                                fontFamily: 'monospace',
+                                minHeight: '100px',
+                            }, placeholder: '[{"column-key": "col1", "widget-label": "Column 1", "widget": "text"}]' })] })), widget.widget === 'number' && (jsxRuntimeExports.jsxs("div", { style: { marginBottom: '20px', padding: '10px', background: '#f3e5f5', borderRadius: '4px' }, children: [jsxRuntimeExports.jsx("label", { style: { display: 'block', marginBottom: '8px', fontSize: '12px', fontWeight: 600 }, children: "Number Validation" }), jsxRuntimeExports.jsxs("div", { style: { display: 'flex', gap: '10px', marginBottom: '10px' }, children: [jsxRuntimeExports.jsxs("div", { style: { flex: 1 }, children: [jsxRuntimeExports.jsx("label", { style: { display: 'block', marginBottom: '5px', fontSize: '11px' }, children: "Min Value" }), jsxRuntimeExports.jsx("input", { type: "number", value: widget['widget-data-validation']?.min ?? '', onChange: (e) => handleNestedChange('widget-data-validation', 'min', e.target.value ? parseFloat(e.target.value) : undefined), style: {
+                                                width: '100%',
+                                                padding: '6px 8px',
+                                                border: '1px solid #ccc',
+                                                borderRadius: '4px',
+                                                fontSize: '11px',
+                                            } })] }), jsxRuntimeExports.jsxs("div", { style: { flex: 1 }, children: [jsxRuntimeExports.jsx("label", { style: { display: 'block', marginBottom: '5px', fontSize: '11px' }, children: "Max Value" }), jsxRuntimeExports.jsx("input", { type: "number", value: widget['widget-data-validation']?.max ?? '', onChange: (e) => handleNestedChange('widget-data-validation', 'max', e.target.value ? parseFloat(e.target.value) : undefined), style: {
+                                                width: '100%',
+                                                padding: '6px 8px',
+                                                border: '1px solid #ccc',
+                                                borderRadius: '4px',
+                                                fontSize: '11px',
+                                            } })] })] })] })), ['date', 'datetime'].includes(widget.widget) && (jsxRuntimeExports.jsxs("div", { style: { marginBottom: '20px', padding: '10px', background: '#e8f5e9', borderRadius: '4px' }, children: [jsxRuntimeExports.jsx("label", { style: { display: 'block', marginBottom: '8px', fontSize: '12px', fontWeight: 600 }, children: "Date Range Options" }), jsxRuntimeExports.jsxs("div", { style: { display: 'flex', gap: '10px', marginBottom: '10px' }, children: [jsxRuntimeExports.jsxs("div", { style: { flex: 1 }, children: [jsxRuntimeExports.jsx("label", { style: { display: 'block', marginBottom: '5px', fontSize: '11px' }, children: "Min Date" }), jsxRuntimeExports.jsx("input", { type: "date", value: widget['widget-data-options']?.minDate || '', onChange: (e) => handleNestedChange('widget-data-options', 'minDate', e.target.value || undefined), style: {
+                                                width: '100%',
+                                                padding: '6px 8px',
+                                                border: '1px solid #ccc',
+                                                borderRadius: '4px',
+                                                fontSize: '11px',
+                                            } })] }), jsxRuntimeExports.jsxs("div", { style: { flex: 1 }, children: [jsxRuntimeExports.jsx("label", { style: { display: 'block', marginBottom: '5px', fontSize: '11px' }, children: "Max Date" }), jsxRuntimeExports.jsx("input", { type: "date", value: widget['widget-data-options']?.maxDate || '', onChange: (e) => handleNestedChange('widget-data-options', 'maxDate', e.target.value || undefined), style: {
+                                                width: '100%',
+                                                padding: '6px 8px',
+                                                border: '1px solid #ccc',
+                                                borderRadius: '4px',
+                                                fontSize: '11px',
+                                            } })] })] }), jsxRuntimeExports.jsxs("label", { style: { display: 'flex', alignItems: 'center', gap: '8px', fontSize: '11px' }, children: [jsxRuntimeExports.jsx("input", { type: "checkbox", checked: widget['widget-data-options']?.showCalendar || false, onChange: (e) => handleNestedChange('widget-data-options', 'showCalendar', e.target.checked) }), jsxRuntimeExports.jsx("span", { children: "Show Calendar" })] })] })), jsxRuntimeExports.jsxs("div", { style: { marginBottom: '20px', padding: '10px', background: '#f0f0f0', borderRadius: '4px' }, children: [jsxRuntimeExports.jsx("label", { style: { display: 'block', marginBottom: '8px', fontSize: '12px', fontWeight: 600 }, children: "Validation" }), jsxRuntimeExports.jsx("div", { style: { marginBottom: '10px' }, children: jsxRuntimeExports.jsxs("label", { style: { display: 'flex', alignItems: 'center', gap: '8px', fontSize: '12px' }, children: [jsxRuntimeExports.jsx("input", { type: "checkbox", checked: widget['widget-data-validation']?.required || false, onChange: (e) => {
+                                            if (!widget['widget-data-validation']) {
+                                                handleChange('widget-data-validation', { required: e.target.checked });
+                                            }
+                                            else {
+                                                handleNestedChange('widget-data-validation', 'required', e.target.checked);
+                                            }
+                                        } }), jsxRuntimeExports.jsx("span", { children: "Required" })] }) }), ['text', 'textarea'].includes(widget.widget) && (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsxs("div", { style: { marginBottom: '10px' }, children: [jsxRuntimeExports.jsx("label", { style: { display: 'block', marginBottom: '5px', fontSize: '11px' }, children: "Min Length" }), jsxRuntimeExports.jsx("input", { type: "number", value: widget['widget-data-validation']?.minLength || '', onChange: (e) => {
+                                                const validation = widget['widget-data-validation'] || {};
+                                                handleChange('widget-data-validation', {
+                                                    ...validation,
+                                                    minLength: e.target.value ? parseInt(e.target.value) : undefined,
+                                                });
+                                            }, style: {
+                                                width: '100%',
+                                                padding: '6px 8px',
+                                                border: '1px solid #ccc',
+                                                borderRadius: '4px',
+                                                fontSize: '11px',
+                                            } })] }), jsxRuntimeExports.jsxs("div", { children: [jsxRuntimeExports.jsx("label", { style: { display: 'block', marginBottom: '5px', fontSize: '11px' }, children: "Max Length" }), jsxRuntimeExports.jsx("input", { type: "number", value: widget['widget-data-validation']?.maxLength || '', onChange: (e) => {
+                                                const validation = widget['widget-data-validation'] || {};
+                                                handleChange('widget-data-validation', {
+                                                    ...validation,
+                                                    maxLength: e.target.value ? parseInt(e.target.value) : undefined,
+                                                });
+                                            }, style: {
+                                                width: '100%',
+                                                padding: '6px 8px',
+                                                border: '1px solid #ccc',
+                                                borderRadius: '4px',
+                                                fontSize: '11px',
+                                            } })] })] }))] })] }));
+    };
+    const getHeaderColor = () => {
+        switch (node.type) {
+            case 'section':
+                return '#2196f3';
+            case 'panel':
+                return '#ff9800';
+            case 'widget':
+                return '#4caf50';
+        }
+    };
+    return (jsxRuntimeExports.jsxs("div", { style: {
+            padding: '15px',
+            overflowY: 'auto',
+            background: '#f8f9fa',
+            height: '100%',
+        }, children: [jsxRuntimeExports.jsx("h3", { style: { fontSize: '14px', marginBottom: '15px', color: '#2c3e50' }, children: "Properties" }), jsxRuntimeExports.jsxs("div", { style: {
+                    background: getHeaderColor(),
+                    color: 'white',
+                    padding: '12px',
+                    borderRadius: '4px',
+                    marginBottom: '20px',
+                    fontWeight: 600,
+                    fontSize: '13px',
+                }, children: [node.type === 'section' && `Section: ${node.data['section-id']}`, node.type === 'panel' && `Panel: ${node.data['panel-id']}`, node.type === 'widget' && `Widget: ${node.data['widget-id']}`] }), node.type === 'section' && renderSectionProperties(), node.type === 'panel' && renderPanelProperties(), node.type === 'widget' && renderWidgetProperties(), jsxRuntimeExports.jsxs("div", { style: { display: 'flex', gap: '10px', marginTop: '30px' }, children: [jsxRuntimeExports.jsx("button", { onClick: () => onDelete(node), style: {
+                            flex: 1,
+                            padding: '10px',
+                            border: 'none',
+                            borderRadius: '4px',
+                            background: '#f44336',
+                            color: 'white',
+                            fontWeight: 600,
+                            cursor: 'pointer',
+                            fontSize: '12px',
+                        }, children: "Delete" }), jsxRuntimeExports.jsx("button", { onClick: () => onDuplicate(node), style: {
+                            flex: 1,
+                            padding: '10px',
+                            border: 'none',
+                            borderRadius: '4px',
+                            background: '#ff9800',
+                            color: 'white',
+                            fontWeight: 600,
+                            cursor: 'pointer',
+                            fontSize: '12px',
+                        }, children: "Duplicate" })] })] }));
+};
+
+/**
+ * Visual Builder Panel - Right side of Section Builder
+ */
+const VisualBuilderPanel = ({ section, selectedNode, onSelectNode, onSectionChange, onAddPanel, onAddWidget, onDeleteNode, onDuplicateNode, onSave, isMaximized = false, onToggleMaximize, }) => {
+    // Validate section before saving
+    const validateSection = (sectionToValidate) => {
+        const errors = [];
+        if (!sectionToValidate['section-id']) {
+            errors.push('Section ID is required');
+        }
+        if (!sectionToValidate.panels || sectionToValidate.panels.length === 0) {
+            errors.push('Section must have at least one panel');
+        }
+        // Validate panels
+        const validatePanels = (panels) => {
+            panels.forEach((panel, index) => {
+                if (!panel['panel-id']) {
+                    errors.push(`Panel at index ${index} is missing panel-id`);
+                }
+                if (panel.panels) {
+                    validatePanels(panel.panels);
+                }
+                if (panel.widgets) {
+                    panel.widgets.forEach((widget, widgetIndex) => {
+                        if (!widget['widget-id']) {
+                            errors.push(`Widget at panel ${panel['panel-id'] || index}, index ${widgetIndex} is missing widget-id`);
+                        }
+                        if (!widget.widget) {
+                            errors.push(`Widget ${widget['widget-id'] || widgetIndex} is missing widget type`);
+                        }
+                    });
+                }
+            });
+        };
+        if (sectionToValidate.panels) {
+            validatePanels(sectionToValidate.panels);
+        }
+        return {
+            isValid: errors.length === 0,
+            errors,
+        };
+    };
+    const handleSave = () => {
+        const validation = validateSection(section);
+        if (!validation.isValid) {
+            console.error('Section validation failed:', validation.errors);
+            alert(`Cannot save section. Please fix the following errors:\n\n${validation.errors.join('\n')}`);
+            return;
+        }
+        if (onSave) {
+            try {
+                onSave(section);
+            }
+            catch (error) {
+                console.error('Error saving section:', error);
+                alert('An error occurred while saving the section. Please check the console for details.');
+            }
+        }
+    };
+    const handleNodeChange = (node, updates) => {
+        // Create a deep copy of the section
+        const updatedSection = JSON.parse(JSON.stringify(section));
+        // Find and update the node in the section structure
+        const updateInSection = (current, targetId, targetType) => {
+            if (targetType === 'section' && current['section-id'] === targetId) {
+                Object.assign(current, updates);
+                return true;
+            }
+            if (current.panels) {
+                for (const panel of current.panels) {
+                    if (targetType === 'panel' && panel['panel-id'] === targetId) {
+                        Object.assign(panel, updates);
+                        return true;
+                    }
+                    if (updateInSection(panel, targetId, targetType)) {
+                        return true;
+                    }
+                    if (panel.widgets) {
+                        for (const widget of panel.widgets) {
+                            if (targetType === 'widget' && widget['widget-id'] === targetId) {
+                                Object.assign(widget, updates);
+                                return true;
+                            }
+                        }
+                    }
+                }
+            }
+            if (current.widgets) {
+                for (const widget of current.widgets) {
+                    if (targetType === 'widget' && widget['widget-id'] === targetId) {
+                        Object.assign(widget, updates);
+                        return true;
+                    }
+                }
+            }
+            return false;
+        };
+        updateInSection(updatedSection, node.id, node.type);
+        onSectionChange(updatedSection);
+    };
+    const handleAddPanel = () => {
+        if (selectedNode) {
+            if (selectedNode.type === 'section' || selectedNode.type === 'panel') {
+                onAddPanel(selectedNode.id, selectedNode.type);
+            }
+        }
+        else {
+            // Add to root section
+            onAddPanel(section['section-id'], 'section');
+        }
+    };
+    const handleAddWidget = () => {
+        if (selectedNode) {
+            if (selectedNode.type === 'panel') {
+                onAddWidget(selectedNode.id);
+            }
+            else if (selectedNode.type === 'section') {
+                // Find first panel or create one
+                if (section.panels && section.panels.length > 0) {
+                    onAddWidget(section.panels[0]['panel-id']);
+                }
+                else {
+                    // Create a panel first, then add widget
+                    const newPanel = {
+                        'panel-id': `panel-${Date.now()}`,
+                        'panel-orientation': 'vertical',
+                        widgets: [],
+                    };
+                    const updatedSection = {
+                        ...section,
+                        panels: [...(section.panels || []), newPanel],
+                    };
+                    onSectionChange(updatedSection);
+                    onAddWidget(newPanel['panel-id']);
+                }
+            }
+        }
+        else {
+            // Add to first panel or create one
+            if (section.panels && section.panels.length > 0) {
+                onAddWidget(section.panels[0]['panel-id']);
+            }
+        }
+    };
+    return (jsxRuntimeExports.jsxs("div", { style: {
+            display: 'flex',
+            flexDirection: 'column',
+            height: '100%',
+            width: '100%',
+            minHeight: 0,
+        }, children: [jsxRuntimeExports.jsxs("div", { style: {
+                    padding: '15px 20px',
+                    background: '#ffffff',
+                    borderBottom: '1px solid #ddd',
+                    display: 'flex',
+                    justifyContent: 'space-between',
+                    alignItems: 'center',
+                }, children: [jsxRuntimeExports.jsx("div", { style: { fontWeight: 600, fontSize: '16px', color: '#2c3e50' }, children: "Visual Builder" }), jsxRuntimeExports.jsxs("div", { style: { display: 'flex', gap: '10px' }, children: [jsxRuntimeExports.jsx("button", { onClick: handleAddPanel, style: {
+                                    padding: '8px 16px',
+                                    border: 'none',
+                                    borderRadius: '4px',
+                                    background: '#2196f3',
+                                    color: 'white',
+                                    fontWeight: 600,
+                                    cursor: 'pointer',
+                                    fontSize: '12px',
+                                    whiteSpace: 'nowrap',
+                                }, children: "+ Add Panel" }), jsxRuntimeExports.jsx("button", { onClick: handleAddWidget, style: {
+                                    padding: '8px 16px',
+                                    border: 'none',
+                                    borderRadius: '4px',
+                                    background: '#4caf50',
+                                    color: 'white',
+                                    fontWeight: 600,
+                                    cursor: 'pointer',
+                                    fontSize: '12px',
+                                    whiteSpace: 'nowrap',
+                                }, children: "+ Add Widget" }), onSave && (jsxRuntimeExports.jsx("button", { onClick: handleSave, style: {
+                                    padding: '8px 16px',
+                                    border: 'none',
+                                    borderRadius: '4px',
+                                    background: '#ff9800',
+                                    color: 'white',
+                                    fontWeight: 600,
+                                    cursor: 'pointer',
+                                    fontSize: '12px',
+                                    whiteSpace: 'nowrap',
+                                }, children: "Save" })), onToggleMaximize && (jsxRuntimeExports.jsx("button", { onClick: onToggleMaximize, style: {
+                                    padding: '8px',
+                                    border: 'none',
+                                    borderRadius: '4px',
+                                    background: 'transparent',
+                                    color: '#666',
+                                    cursor: 'pointer',
+                                    display: 'flex',
+                                    alignItems: 'center',
+                                    justifyContent: 'center',
+                                    width: '32px',
+                                    height: '32px',
+                                }, title: isMaximized ? 'Minimize' : 'Maximize', children: isMaximized ? (jsxRuntimeExports.jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: jsxRuntimeExports.jsx("path", { d: "M8 3v3a2 2 0 0 1-2 2H3m18 0h-3a2 2 0 0 1-2-2V3m0 18v-3a2 2 0 0 1 2-2h3M3 16h3a2 2 0 0 1 2 2v3" }) })) : (jsxRuntimeExports.jsx("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: jsxRuntimeExports.jsx("path", { d: "M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3" }) })) }))] })] }), jsxRuntimeExports.jsxs("div", { style: {
+                    flex: 1,
+                    display: 'flex',
+                    overflow: 'hidden',
+                    minHeight: 0, // Important for flex children to respect overflow
+                }, children: [jsxRuntimeExports.jsx("div", { style: {
+                            width: '45%',
+                            borderRight: '1px solid #ddd',
+                            display: 'flex',
+                            flexDirection: 'column',
+                            minHeight: 0, // Important for flex children to respect overflow
+                            overflow: 'hidden',
+                        }, children: jsxRuntimeExports.jsx(SectionTree, { section: section, selectedNode: selectedNode, onSelectNode: onSelectNode, onAddPanel: onAddPanel, onAddWidget: onAddWidget, onDeleteNode: onDeleteNode, onDuplicateNode: onDuplicateNode }) }), jsxRuntimeExports.jsx("div", { style: {
+                            width: '55%',
+                            display: 'flex',
+                            flexDirection: 'column',
+                            minHeight: 0, // Important for flex children to respect overflow
+                            overflow: 'hidden',
+                        }, children: jsxRuntimeExports.jsx(PropertyEditor, { node: selectedNode, onChange: handleNodeChange, onDelete: onDeleteNode, onDuplicate: onDuplicateNode }) })] })] }));
+};
+
+/**
+ * Main Section Builder Component
+ * Provides dual-panel interface for editing section JSON
+ */
+const SectionBuilder = ({ initialSection, onChange, onSave, }) => {
+    const defaultSection = {
+        'section-id': 'new-section',
+        'section-title': '',
+        'section-editable': false,
+        panels: [],
+    };
+    const [section, setSection] = useState(initialSection || defaultSection);
+    const [selectedNode, setSelectedNode] = useState(null);
+    const [isMaximized, setIsMaximized] = useState(false);
+    // Store the original section for reset functionality
+    const originalSectionRef = useRef(initialSection ? JSON.parse(JSON.stringify(initialSection)) : defaultSection);
+    const isInitialMount = useRef(true);
+    useEffect(() => {
+        if (initialSection) {
+            // Only update original on initial mount
+            if (isInitialMount.current) {
+                originalSectionRef.current = JSON.parse(JSON.stringify(initialSection));
+                isInitialMount.current = false;
+            }
+            setSection(initialSection);
+        }
+    }, [initialSection]);
+    const handleSectionChange = useCallback((updatedSection) => {
+        setSection(updatedSection);
+        if (onChange) {
+            onChange(updatedSection);
+        }
+    }, [onChange]);
+    // Reset to original section - resets both JSON editor and visual builder
+    const handleReset = useCallback(() => {
+        const original = JSON.parse(JSON.stringify(originalSectionRef.current));
+        setSection(original);
+        setSelectedNode(null); // Clear selection on reset
+        if (onChange) {
+            onChange(original);
+        }
+    }, [onChange]);
+    // Handle node selection from JSON editor
+    const handleSelectNodeFromJson = useCallback((nodeId, nodeType) => {
+        // Find the corresponding node in the section structure
+        const findNode = () => {
+            if (nodeType === 'section') {
+                return {
+                    type: 'section',
+                    id: section['section-id'],
+                    label: `Section: ${section['section-id']}`,
+                    data: section,
+                };
+            }
+            // Recursively search for panel or widget
+            const searchInPanels = (panels, parent) => {
+                for (const panel of panels) {
+                    if (nodeType === 'panel' && panel['panel-id'] === nodeId) {
+                        return {
+                            type: 'panel',
+                            id: panel['panel-id'],
+                            label: `Panel: ${panel['panel-id']}`,
+                            data: panel,
+                            parent: parent,
+                        };
+                    }
+                    // Check nested panels
+                    if (panel.panels) {
+                        const panelNode = {
+                            type: 'panel',
+                            id: panel['panel-id'],
+                            label: `Panel: ${panel['panel-id']}`,
+                            data: panel,
+                            parent: parent,
+                        };
+                        const found = searchInPanels(panel.panels, panelNode);
+                        if (found)
+                            return found;
+                    }
+                    // Check widgets
+                    if (panel.widgets) {
+                        const panelNode = {
+                            type: 'panel',
+                            id: panel['panel-id'],
+                            label: `Panel: ${panel['panel-id']}`,
+                            data: panel,
+                            parent: parent,
+                        };
+                        for (const widget of panel.widgets) {
+                            if (nodeType === 'widget' && widget['widget-id'] === nodeId) {
+                                return {
+                                    type: 'widget',
+                                    id: widget['widget-id'],
+                                    label: `Widget: ${widget['widget-id']} (${widget.widget})`,
+                                    data: widget,
+                                    parent: panelNode,
+                                };
+                            }
+                        }
+                    }
+                }
+                return null;
+            };
+            if (section.panels) {
+                return searchInPanels(section.panels);
+            }
+            return null;
+        };
+        const node = findNode();
+        if (node) {
+            setSelectedNode(node);
+        }
+    }, [section]);
+    const handleAddPanel = useCallback((parentId, parentType) => {
+        const updatedSection = JSON.parse(JSON.stringify(section));
+        const newPanel = {
+            'panel-id': `panel-${Date.now()}`,
+            'panel-orientation': 'vertical',
+            widgets: [],
+        };
+        if (parentType === 'section') {
+            updatedSection.panels = [...(updatedSection.panels || []), newPanel];
+        }
+        else if (parentType === 'panel') {
+            const addPanelToParent = (panels) => {
+                for (const panel of panels) {
+                    if (panel['panel-id'] === parentId) {
+                        panel.panels = [...(panel.panels || []), newPanel];
+                        return true;
+                    }
+                    if (panel.panels && addPanelToParent(panel.panels)) {
+                        return true;
+                    }
+                }
+                return false;
+            };
+            if (updatedSection.panels) {
+                addPanelToParent(updatedSection.panels);
+            }
+        }
+        handleSectionChange(updatedSection);
+    }, [section, handleSectionChange]);
+    const handleAddWidget = useCallback((parentId) => {
+        const updatedSection = JSON.parse(JSON.stringify(section));
+        const newWidget = {
+            widget: 'text',
+            'widget-id': `widget-${Date.now()}`,
+            'widget-label': 'New Widget',
+            'widget-data-path': '',
+        };
+        const addWidgetToPanel = (panels) => {
+            for (const panel of panels) {
+                if (panel['panel-id'] === parentId) {
+                    panel.widgets = [...(panel.widgets || []), newWidget];
+                    return true;
+                }
+                if (panel.panels && addWidgetToPanel(panel.panels)) {
+                    return true;
+                }
+            }
+            return false;
+        };
+        if (updatedSection.panels) {
+            addWidgetToPanel(updatedSection.panels);
+        }
+        handleSectionChange(updatedSection);
+    }, [section, handleSectionChange]);
+    const handleDeleteNode = useCallback((node) => {
+        const updatedSection = JSON.parse(JSON.stringify(section));
+        if (node.type === 'section') {
+            // Can't delete section, but can reset it
+            return;
+        }
+        const deleteFromSection = (current) => {
+            if (current.panels) {
+                const panelIndex = current.panels.findIndex((p) => p['panel-id'] === node.id);
+                if (panelIndex !== -1 && node.type === 'panel') {
+                    current.panels.splice(panelIndex, 1);
+                    return true;
+                }
+                for (const panel of current.panels) {
+                    if (panel['panel-id'] === node.id && node.type === 'panel') {
+                        // This shouldn't happen due to findIndex above, but handle nested case
+                        const index = current.panels.indexOf(panel);
+                        if (index !== -1) {
+                            current.panels.splice(index, 1);
+                            return true;
+                        }
+                    }
+                    if (panel.widgets) {
+                        const widgetIndex = panel.widgets.findIndex((w) => w['widget-id'] === node.id);
+                        if (widgetIndex !== -1 && node.type === 'widget') {
+                            panel.widgets.splice(widgetIndex, 1);
+                            return true;
+                        }
+                    }
+                    if (panel.panels && deleteFromSection(panel)) {
+                        return true;
+                    }
+                }
+            }
+            return false;
+        };
+        deleteFromSection(updatedSection);
+        handleSectionChange(updatedSection);
+        setSelectedNode(null);
+    }, [section, handleSectionChange]);
+    const handleDuplicateNode = useCallback((node) => {
+        const updatedSection = JSON.parse(JSON.stringify(section));
+        if (node.type === 'section') {
+            return;
+        }
+        const duplicateInSection = (current) => {
+            if (current.panels) {
+                for (const panel of current.panels) {
+                    if (panel['panel-id'] === node.id && node.type === 'panel') {
+                        const duplicated = {
+                            ...panel,
+                            'panel-id': `${panel['panel-id']}-copy-${Date.now()}`,
+                        };
+                        const index = current.panels.indexOf(panel);
+                        current.panels.splice(index + 1, 0, duplicated);
+                        return true;
+                    }
+                    if (panel.widgets) {
+                        for (const widget of panel.widgets) {
+                            if (widget['widget-id'] === node.id && node.type === 'widget') {
+                                const duplicated = {
+                                    ...widget,
+                                    'widget-id': `${widget['widget-id']}-copy-${Date.now()}`,
+                                };
+                                const index = panel.widgets.indexOf(widget);
+                                panel.widgets.splice(index + 1, 0, duplicated);
+                                return true;
+                            }
+                        }
+                    }
+                    if (panel.panels && duplicateInSection(panel)) {
+                        return true;
+                    }
+                }
+            }
+            return false;
+        };
+        duplicateInSection(updatedSection);
+        handleSectionChange(updatedSection);
+    }, [section, handleSectionChange]);
+    const toggleMaximize = useCallback(() => {
+        setIsMaximized((prev) => !prev);
+    }, []);
+    // Handle Escape key to exit fullscreen
+    useEffect(() => {
+        if (!isMaximized)
+            return;
+        const handleEscape = (e) => {
+            if (e.key === 'Escape') {
+                setIsMaximized(false);
+            }
+        };
+        window.addEventListener('keydown', handleEscape);
+        return () => window.removeEventListener('keydown', handleEscape);
+    }, [isMaximized]);
+    return (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [isMaximized && (jsxRuntimeExports.jsx("div", { style: {
+                    position: 'fixed',
+                    top: 0,
+                    left: 0,
+                    right: 0,
+                    bottom: 0,
+                    background: 'rgba(0, 0, 0, 0.5)',
+                    zIndex: 9998,
+                }, onClick: toggleMaximize })), jsxRuntimeExports.jsxs("div", { style: {
+                    display: 'flex',
+                    height: isMaximized ? '100vh' : '100%',
+                    width: isMaximized ? '100vw' : '100%',
+                    minHeight: 0,
+                    background: '#FFFFFF',
+                    fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+                    overflow: 'hidden',
+                    border: 'none',
+                    position: isMaximized ? 'fixed' : 'relative',
+                    top: isMaximized ? 0 : 'auto',
+                    left: isMaximized ? 0 : 'auto',
+                    zIndex: isMaximized ? 9999 : 'auto',
+                }, children: [jsxRuntimeExports.jsx("div", { style: {
+                            width: '50%',
+                            height: '100%',
+                            minHeight: 0,
+                            overflow: 'hidden',
+                            display: 'flex',
+                            padding: '10px 10px 10px 10px',
+                            flexDirection: 'column',
+                            borderRight: '0px',
+                        }, children: jsxRuntimeExports.jsx(JSONEditorPanel, { section: section, onChange: handleSectionChange, onReset: handleReset, onSelectNode: handleSelectNodeFromJson }) }), jsxRuntimeExports.jsx("div", { style: {
+                            width: '50%',
+                            height: '100%',
+                            minHeight: 0,
+                            overflow: 'hidden',
+                            display: 'flex',
+                            flexDirection: 'column',
+                        }, children: jsxRuntimeExports.jsx(VisualBuilderPanel, { section: section, selectedNode: selectedNode, onSelectNode: setSelectedNode, onSectionChange: handleSectionChange, onAddPanel: handleAddPanel, onAddWidget: handleAddWidget, onDeleteNode: handleDeleteNode, onDuplicateNode: handleDuplicateNode, onSave: onSave, isMaximized: isMaximized, onToggleMaximize: toggleMaximize }) })] })] }));
+};
+
+/**
+ * Filter input value based on allowed character type
+ */
+const filterByCharacterType = (value, characterType = 'any', customCharset) => {
+    if (characterType === 'any') {
+        return value;
     }
     let regex;
     switch (characterType) {
@@ -4680,87 +7157,54 @@ const RadioWidget = ({ config }) => {
         }
         return options;
     }, [dataSourceOptions, sortOptions]);
-    // Handle radio button change - simple and direct
-    useCallback((selectedValue) => {
-        onChange(selectedValue);
+    // Handle value change
+    const handleChange = useCallback((optionValue) => {
+        onChange(optionValue);
     }, [onChange]);
-    // Determine current value
+    // Handle unset (clear selection) - only if optional
+    const handleUnset = useCallback(() => {
+        if (allowUnset) {
+            onChange(null);
+        }
+    }, [allowUnset, onChange]);
+    // Determine current value (handle null/undefined for optional fields)
     const currentValue = useMemo(() => {
-        console.log('[RadioWidget] Value from useBaseWidget:', {
-            value,
-            type: typeof value,
-            widgetId: widgetConfig['widget-id'],
-            dataPath: widgetConfig['widget-data-path']
-        });
         if (value === null || value === undefined) {
             return null;
         }
         return value;
-    }, [value, widgetConfig]);
-    // Helper to safely compare values (handles type coercion)
-    const isValueSelected = useCallback((optionValue) => {
-        // Handle null/undefined cases
-        if (currentValue === null || currentValue === undefined) {
-            return optionValue === null || optionValue === undefined;
-        }
-        if (optionValue === null || optionValue === undefined) {
-            return false;
-        }
-        // Convert both to strings and compare (handles any type mismatch)
-        const currentStr = String(currentValue).trim();
-        const optionStr = String(optionValue).trim();
-        return currentStr === optionStr;
-    }, [currentValue]);
-    // Get layout classes
-    const getLayoutClass = useMemo(() => {
+    }, [value]);
+    // Get layout classes and styles
+    const layoutConfig = useMemo(() => {
         switch (layout) {
             case 'horizontal':
-                return 'flex flex-row flex-wrap gap-4';
+                return {
+                    className: 'flex flex-row flex-wrap gap-4',
+                    style: undefined,
+                };
             case 'grid':
-                Math.max(2, Math.min(processedOptions.length, 4));
-                return 'grid gap-3';
+                // Calculate grid columns based on option count (max 4 columns, min 2)
+                const cols = Math.max(2, Math.min(processedOptions.length, 4));
+                return {
+                    className: 'grid gap-3',
+                    style: { gridTemplateColumns: `repeat(${cols}, minmax(0, 1fr))` },
+                };
             case 'vertical':
             default:
-                return 'flex flex-col space-y-2';
-        }
-    }, [layout, processedOptions.length]);
-    const getLayoutStyle = useMemo(() => {
-        if (layout === 'grid') {
-            const cols = Math.max(2, Math.min(processedOptions.length, 4));
-            return { gridTemplateColumns: `repeat(${cols}, minmax(0, 1fr))` };
+                return {
+                    className: 'flex flex-col space-y-2',
+                    style: undefined,
+                };
         }
-        return undefined;
     }, [layout, processedOptions.length]);
     // For readonly mode, render as display text
     if (widgetConfig['widget-readonly']) {
         const label = translateConfig(widgetConfig['widget-label']);
-        const selectedOption = processedOptions.find(opt => isValueSelected(opt.value));
+        const selectedOption = processedOptions.find(opt => opt.value === currentValue);
         const displayValue = selectedOption ? selectedOption.label : (allowUnset && currentValue === null ? '-' : '');
         return (jsxRuntimeExports.jsxs("div", { className: "mb-[10px] RadioDisplayWidget flex flex-col sm:flex-row sm:items-start", children: [label && (jsxRuntimeExports.jsxs("div", { className: "text-base text-gray-600 font-medium md:min-w-[120px] sm:pr-4 mb-1 sm:mb-0", style: { fontFamily: 'Roboto, sans-serif' }, children: [label, ":"] })), jsxRuntimeExports.jsx("div", { className: "flex-1", children: jsxRuntimeExports.jsx("div", { className: "text-base text-gray-900 font-medium", children: displayValue }) })] }));
     }
-    return (jsxRuntimeExports.jsx("div", { className: "mb-[10px]", children: jsxRuntimeExports.jsxs("div", { className: "flex flex-col sm:flex-row sm:items-start", children: [jsxRuntimeExports.jsxs("label", { className: "text-base font-medium text-gray-700 md:min-w-[120px] sm:pr-4 sm:pt-1 mb-1 sm:mb-0", style: { fontFamily: 'Roboto, sans-serif' }, children: [translateConfig(widgetConfig['widget-label']), widgetConfig['widget-required'] && (jsxRuntimeExports.jsx("span", { className: "text-red-500 ml-1", children: "*" }))] }), jsxRuntimeExports.jsxs("div", { className: "flex-1 min-w-0", children: [jsxRuntimeExports.jsx("div", { className: getLayoutClass, style: getLayoutStyle, children: loading ? (jsxRuntimeExports.jsx("p", { className: "text-sm text-gray-500", children: translate('common.loading') })) : (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [allowUnset && (jsxRuntimeExports.jsxs("label", { className: `flex items-center cursor-pointer ${!isEnabled || widgetConfig['widget-readonly'] ? 'opacity-50 cursor-not-allowed' : ''}`, children: [jsxRuntimeExports.jsx("input", { type: "radio", name: widgetConfig['widget-id'], checked: currentValue === null, 
-                                                // onChange={() => handleRadioChange(null)}
-                                                disabled: !isEnabled || widgetConfig['widget-readonly'], className: "mr-2 h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300" }), jsxRuntimeExports.jsx("span", { className: "text-sm text-gray-700", children: "-" })] })), processedOptions.map((option, index) => {
-                                        const isChecked = isValueSelected(option.value);
-                                        // Debug log (remove after testing)
-                                        if (index === 0) {
-                                            console.log('[RadioWidget] Value check:', {
-                                                currentValue,
-                                                optionValue: option.value,
-                                                currentType: typeof currentValue,
-                                                optionType: typeof option.value,
-                                                isChecked,
-                                                currentStr: String(currentValue),
-                                                optionStr: String(option.value)
-                                            });
-                                        }
-                                        return (jsxRuntimeExports.jsxs("label", { className: `flex items-center cursor-pointer ${!isEnabled || widgetConfig['widget-readonly'] ? 'opacity-50 cursor-not-allowed' : ''}`, children: [jsxRuntimeExports.jsx("input", { type: "radio", name: widgetConfig['widget-id'], value: String(option.value), checked: isChecked, 
-                                                    // onChange={() => {
-                                                    //   console.log('[RadioWidget] onChange called:', option.value);
-                                                    //   handleRadioChange(option.value);
-                                                    // }}
-                                                    disabled: !isEnabled || widgetConfig['widget-readonly'], className: "mr-2 h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300" }), jsxRuntimeExports.jsx("span", { className: "text-sm text-gray-700", children: translateConfig(option.label) })] }, `${widgetConfig['widget-id']}-${option.value}-${index}`));
-                                    })] })) }), touched && error.length > 0 && (jsxRuntimeExports.jsx("p", { className: "text-red-500 text-sm mt-1", children: error[0] }))] })] }) }));
+    return (jsxRuntimeExports.jsx("div", { className: "mb-[10px]", children: jsxRuntimeExports.jsxs("div", { className: "flex flex-col sm:flex-row sm:items-start", children: [jsxRuntimeExports.jsxs("label", { className: "text-base font-medium text-gray-700 md:min-w-[120px] sm:pr-4 sm:pt-1 mb-1 sm:mb-0", style: { fontFamily: 'Roboto, sans-serif' }, children: [translateConfig(widgetConfig['widget-label']), widgetConfig['widget-required'] && (jsxRuntimeExports.jsx("span", { className: "text-red-500 ml-1", children: "*" }))] }), jsxRuntimeExports.jsxs("div", { className: "flex-1 min-w-0", children: [jsxRuntimeExports.jsx("div", { className: layoutConfig.className, style: layoutConfig.style, onBlur: onBlur, children: loading ? (jsxRuntimeExports.jsx("p", { className: "text-sm text-gray-500", children: translate('common.loading') })) : (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [allowUnset && (jsxRuntimeExports.jsxs("label", { className: `flex items-center cursor-pointer ${!isEnabled || widgetConfig['widget-readonly'] ? 'opacity-50 cursor-not-allowed' : ''}`, children: [jsxRuntimeExports.jsx("input", { type: "radio", name: widgetConfig['widget-id'], checked: currentValue === null, onChange: handleUnset, disabled: !isEnabled || widgetConfig['widget-readonly'], className: "mr-2 h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300" }), jsxRuntimeExports.jsx("span", { className: "text-sm text-gray-700", children: "-" })] })), processedOptions.map((option) => (jsxRuntimeExports.jsxs("label", { className: `flex items-center cursor-pointer ${!isEnabled || widgetConfig['widget-readonly'] ? 'opacity-50 cursor-not-allowed' : ''}`, children: [jsxRuntimeExports.jsx("input", { type: "radio", name: widgetConfig['widget-id'], value: option.value, checked: currentValue === option.value, onChange: (e) => handleChange(option.value), disabled: !isEnabled || widgetConfig['widget-readonly'], className: "mr-2 h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300" }), jsxRuntimeExports.jsx("span", { className: "text-sm text-gray-700", children: translateConfig(option.label) })] }, option.value)))] })) }), touched && error.length > 0 && (jsxRuntimeExports.jsx("p", { className: "text-red-500 text-sm mt-1", children: error[0] }))] })] }) }));
 };
 
 const CheckboxWidget = ({ config }) => {
@@ -5133,7 +7577,7 @@ const TableCellNumber = ({ config, value, onValueChange }) => {
 const TableWidget = ({ config }) => {
     const { value, error, touched, isEnabled, onChange, config: widgetConfig, } = useBaseWidget({ config });
     const { translate, translateConfig } = useWidgetTranslation();
-    const { apiAdapter } = useWidgetContext();
+    const { dataSourceRequestHandler } = useWidgetContext();
     const dispatch = useDispatch();
     const storeValues = useSelector((state) => state.widget?.values || {});
     const rows = Array.isArray(value) ? value : [];
@@ -5248,18 +7692,12 @@ const TableWidget = ({ config }) => {
         setLoadingRowIndex(rowIndex);
         try {
             // If API config exists, make API call
-            if (apiAdapter && apiConfig.edit) {
+            // TODO: Update to use dataSourceRequestHandler pattern
+            if (dataSourceRequestHandler && apiConfig.edit) {
                 const editConfig = apiConfig.edit;
-                let url = editConfig.url || '';
-                // Replace {id} placeholder if present
-                if (rowData.id !== undefined) {
-                    url = url.replace('{id}', rowData.id);
-                }
-                await apiAdapter(url, {
-                    method: editConfig.method || 'PUT',
-                    headers: editConfig.headers || { 'Content-Type': 'application/json' },
-                    body: rowData,
-                });
+                // Extract service and endpoint from URL if possible, or use config
+                // For now, API operations in TableWidget are disabled
+                console.warn('[TableWidget] API edit operations require migration to dataSourceRequestHandler pattern');
             }
             // Update local state
             const newRows = [...rows];
@@ -5320,7 +7758,7 @@ const TableWidget = ({ config }) => {
         finally {
             setLoadingRowIndex(null);
         }
-    }, [editingState, rows, onChange, apiAdapter, apiConfig, translate, isSectionEditMode, originalRows, columns, widgetConfig, dispatch]);
+    }, [editingState, rows, onChange, dataSourceRequestHandler, apiConfig, translate, isSectionEditMode, originalRows, columns, widgetConfig, dispatch]);
     // Add new row
     const startAdd = useCallback(() => {
         // If there's an unsaved edit, cancel it first (no confirmation needed)
@@ -5342,14 +7780,14 @@ const TableWidget = ({ config }) => {
         try {
             let savedRow = { ...newRowData };
             // If API config exists, make API call
-            if (apiAdapter && apiConfig.add) {
+            // TODO: Update to use dataSourceRequestHandler pattern
+            if (dataSourceRequestHandler && apiConfig.add) {
                 const addConfig = apiConfig.add;
-                const response = await apiAdapter(addConfig.url || '', {
-                    method: addConfig.method || 'POST',
-                    headers: addConfig.headers || { 'Content-Type': 'application/json' },
-                    body: newRowData,
-                });
-                // Use response data if available (might contain generated ID)
+                // Extract service and endpoint from URL if possible, or use config
+                // For now, API operations in TableWidget are disabled
+                console.warn('[TableWidget] API add operations require migration to dataSourceRequestHandler pattern');
+                // Use newRowData as response for now
+                const response = newRowData;
                 if (response && typeof response === 'object') {
                     savedRow = { ...savedRow, ...response };
                 }
@@ -5368,7 +7806,7 @@ const TableWidget = ({ config }) => {
         finally {
             setLoadingRowIndex(null);
         }
-    }, [isAdding, newRowData, rows, onChange, apiAdapter, apiConfig, translate, isSectionEditMode]);
+    }, [isAdding, newRowData, rows, onChange, dataSourceRequestHandler, apiConfig, translate, isSectionEditMode]);
     // Delete row
     const deleteRow = useCallback(async (rowIndex) => {
         if (isAnyRowEditing) {
@@ -5384,21 +7822,16 @@ const TableWidget = ({ config }) => {
         }
     }, [isAnyRowEditing, showConfirmation, cancelEdit, translate]);
     const performDelete = useCallback(async (rowIndex) => {
-        const row = rows[rowIndex];
+        rows[rowIndex];
         setLoadingRowIndex(rowIndex);
         try {
             // If API config exists, make API call
-            if (apiAdapter && apiConfig.delete) {
+            // TODO: Update to use dataSourceRequestHandler pattern
+            if (dataSourceRequestHandler && apiConfig.delete) {
                 const deleteConfig = apiConfig.delete;
-                let url = deleteConfig.url || '';
-                // Replace {id} placeholder if present
-                if (row.id !== undefined) {
-                    url = url.replace('{id}', row.id);
-                }
-                await apiAdapter(url, {
-                    method: deleteConfig.method || 'DELETE',
-                    headers: deleteConfig.headers || {},
-                });
+                // Extract service and endpoint from URL if possible, or use config
+                // For now, API operations in TableWidget are disabled
+                console.warn('[TableWidget] API delete operations require migration to dataSourceRequestHandler pattern');
             }
             // In section edit mode, mark row as deleted instead of removing it
             if (isSectionEditMode) {
@@ -5422,7 +7855,7 @@ const TableWidget = ({ config }) => {
         finally {
             setLoadingRowIndex(null);
         }
-    }, [rows, onChange, apiAdapter, apiConfig, translate, isSectionEditMode]);
+    }, [rows, onChange, dataSourceRequestHandler, apiConfig, translate, isSectionEditMode]);
     // Get cell value (from editing state or row data)
     const getCellValue = useCallback((rowIndex, columnKey) => {
         // When a specific row is being edited (either in section edit mode or normal mode)
@@ -6311,5 +8744,5 @@ const translateUISchema = (schema, translate) => {
     };
 };
 
-export { ArrayWidget, BooleanWidget, CheckboxWidget, CurrencyInputWidget, DateInputWidget, DateTimeInputWidget, DisplayWidget, FileInputWidget, IterableAccordionWidget, NumberInputWidget, PanelRenderer, PhoneInputWidget, ProfileWidget, RadioWidget, SectionRenderer, SectionsContainer, SelectWidget, SimpleTableWidget, TableWidget, TextAreaWidget, TextInputWidget, WidgetProvider, WidgetRenderer, applyCaseControl, applyDecimalPrecision, applyMask, createWidgetStore, createZodSchema, evaluateCondition, filterByCharacterType, formatCurrency, formatDate, formatNumber, formatPhone, formatValue, getApiDataSource, getFormattedNumberLength, getSchemaDataSource, getStaticDataSource, getValueByPath, getWidgetValue, initI18n, isAllowedKey, parseDataPath, parseNumber, registerDefaultWidgets, removeMask, resetAll, resetWidget, setDataSource, setError, setLoading, setTouched, setValue, setValueByPath, setValues, setWidgetValue, shouldEnableWidget, shouldShowWidget, transformDataSourceOptions, translatePanelConfig, translateUISchema, translateWidgetConfig, useBaseWidget, useWidgetContext, useWidgetTranslation, validateNumericValue, validateWidget, widgetRegistry };
+export { ArrayWidget, BooleanWidget, CheckboxWidget, CurrencyInputWidget, DateInputWidget, DateTimeInputWidget, DisplayWidget, FileInputWidget, IterableAccordionWidget, JSONEditorPanel, NumberInputWidget, PanelRenderer, PhoneInputWidget, ProfileWidget, PropertyEditor, RadioWidget, SectionBuilder, SectionRenderer, SectionTree, SectionsContainer, SelectWidget, SimpleTableWidget, TableWidget, TextAreaWidget, TextInputWidget, VisualBuilderPanel, WidgetEventBus, WidgetProvider, WidgetRenderer, applyCaseControl, applyDecimalPrecision, applyMask, createWidgetStore, createZodSchema, evaluateCondition, filterByCharacterType, formatCurrency, formatDate, formatNumber, formatPhone, formatValue, geoHierarchyBuilder, getApiDataSource, getFormattedNumberLength, getSchemaDataSource, getStaticDataSource, getValueByPath, getWidgetValue, initI18n, isAllowedKey, parseDataPath, parseNumber, registerDefaultWidgets, removeMask, resetAll, resetWidget, setDataSource, setError, setLoading, setTouched, setValue, setValueByPath, setValues, setWidgetValue, shouldEnableWidget, shouldShowWidget, transformDataSourceOptions, translatePanelConfig, translateUISchema, translateWidgetConfig, useBaseWidget, useGeoWidgetCascade, useWidgetCascade, useWidgetContext, useWidgetEventBus, useWidgetTranslation, validateNumericValue, validateWidget, widgetRegistry };
 //# sourceMappingURL=index.esm.js.map