@openg2p/registry-widgets 0.1.0 → 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,36 +2388,42 @@ 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 || [];
     const widgets = panel.widgets || [];
     // For horizontal orientation, use grid for equal-width columns
-    // Dynamic grid based on number of nested panels
+    // Dynamic grid based on number of nested panels and their column spans
     // For vertical orientation, use flex column
     const getContainerClassAndStyle = () => {
         if (orientation === 'horizontal' && nestedPanels.length > 0) {
-            const numPanels = nestedPanels.length;
-            // Use predefined grid classes based on number of panels (1-5)
+            // Calculate total columns needed based on panel column spans
+            // Sum up all column spans, or use panel count if no spans specified
+            let totalColumns = 0;
+            nestedPanels.forEach(panel => {
+                const columnSpan = panel['panel-column-span'] || 1;
+                totalColumns += columnSpan;
+            });
+            // Ensure at least as many columns as panels (for panels without explicit span)
+            totalColumns = Math.max(totalColumns, nestedPanels.length);
+            // Use predefined grid classes for common cases (1-5)
             // For more than 5, use inline style
             // Removed gap to allow borders to show properly
-            console.log('numPanels', numPanels);
-            if (numPanels <= 5) {
-                const gridClasses = {
-                    1: 'grid grid-cols-1',
-                    2: 'grid grid-cols-2',
-                    3: 'grid grid-cols-3',
-                    4: 'grid grid-cols-4',
-                    5: 'grid grid-cols-5',
+            if (totalColumns <= 5) {
+                // For grid with column spans, we need to use inline styles to set minmax
+                // This ensures each column is at least 200px wide
+                return {
+                    className: 'grid',
+                    style: { gridTemplateColumns: `repeat(${totalColumns}, minmax(200px, 1fr))` },
                 };
-                return { className: gridClasses[numPanels] || 'grid', style: {} };
             }
             else {
-                // For more than 5 panels, use inline style
+                // For more than 5 columns, use inline style
+                // Use minmax(200px, 1fr) to ensure minimum 200px per column
                 return {
                     className: 'grid',
-                    style: { gridTemplateColumns: `repeat(${numPanels}, minmax(0, 1fr))` },
+                    style: { gridTemplateColumns: `repeat(${totalColumns}, minmax(200px, 1fr))` },
                 };
             }
         }
@@ -1636,15 +2443,44 @@ const PanelRenderer = ({ panel, apiAdapter, schemaData, onValueChange, isEditMod
         }, children: [nestedPanels.map((nestedPanel, index) => {
                 const isLastPanel = index === nestedPanels.length - 1;
                 const isFirstPanel = index === 0;
-                const horizontalStyle = orientation === 'horizontal'
-                    ? {
-                        minWidth: '200px',
-                        paddingRight: !isLastPanel ? '40px' : undefined,
-                        paddingLeft: !isFirstPanel ? '40px' : undefined,
-                        position: 'relative',
+                const nestedOrientation = nestedPanel['panel-orientation'] || 'vertical';
+                const columnSpan = nestedPanel['panel-column-span'];
+                // Calculate style for nested panel based on orientation and column span
+                const getNestedPanelStyle = () => {
+                    if (orientation === 'horizontal') {
+                        // When nested inside horizontal panel, check for column span
+                        const baseStyle = {
+                            minWidth: '200px',
+                            paddingRight: !isLastPanel ? '40px' : undefined,
+                            paddingLeft: !isFirstPanel ? '40px' : undefined,
+                            position: 'relative',
+                        };
+                        // If vertical panel has column span, use CSS grid-column-span
+                        if (nestedOrientation === 'vertical' && columnSpan && columnSpan > 1) {
+                            return {
+                                ...baseStyle,
+                                gridColumn: `span ${columnSpan}`,
+                                minWidth: 'auto', // Remove minWidth constraint when spanning columns
+                            };
+                        }
+                        return baseStyle;
+                    }
+                    else {
+                        // Vertical panel nested in vertical panel
+                        if (columnSpan && columnSpan > 1) {
+                            // If column span is specified, calculate width based on 200px per column
+                            const width = columnSpan * 200;
+                            return {
+                                width: `${width}px`,
+                                maxWidth: '100%',
+                                flexShrink: 0,
+                            };
+                        }
+                        return { width: '100%' };
                     }
-                    : { width: '100%' };
-                return (jsxRuntimeExports.jsx(React.Fragment, { children: jsxRuntimeExports.jsxs("div", { className: orientation === 'horizontal' ? 'min-w-200 relative' : 'w-full', style: horizontalStyle, children: [jsxRuntimeExports.jsx(PanelRenderer, { panel: nestedPanel, apiAdapter: apiAdapter, schemaData: schemaData, onValueChange: onValueChange, isEditMode: isEditMode }), orientation === 'horizontal' && !isLastPanel && (jsxRuntimeExports.jsx("div", { style: {
+                };
+                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, dataSourceRequestHandler: dataSourceRequestHandler, schemaData: schemaData, onValueChange: onValueChange, isEditMode: isEditMode }), orientation === 'horizontal' && !isLastPanel && (jsxRuntimeExports.jsx("div", { style: {
                                     position: 'absolute',
                                     right: 0,
                                     top: 0,
@@ -1652,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
@@ -2246,6 +3086,104 @@ const FileInputWidget = ({ config }) => {
                 } }, `modal-${previewFile ? (previewFile instanceof File ? previewFile.name : previewFile) : 'none'}`)] }));
 };
 
+/**
+ * Namespace a data path by adding a namespace prefix
+ */
+const namespaceDataPath = (dataPath, namespace) => {
+    if (!dataPath)
+        return dataPath;
+    if (typeof dataPath === 'string') {
+        // Add namespace prefix to the data path
+        return `${namespace}.${dataPath}`;
+    }
+    // Multi-path: namespace each path
+    const namespaced = {};
+    for (const [key, path] of Object.entries(dataPath)) {
+        namespaced[key] = `${namespace}.${path}`;
+    }
+    return namespaced;
+};
+/**
+ * Recursively namespace widget IDs and data paths in a widget configuration
+ * This ensures unique widget IDs and data paths when the same section is rendered multiple times
+ */
+const namespaceWidgetConfig = (widgetConfig, namespace) => {
+    const namespaced = { ...widgetConfig };
+    // Namespace the widget-id
+    if (namespaced['widget-id']) {
+        namespaced['widget-id'] = `${namespace}__${namespaced['widget-id']}`;
+    }
+    // Namespace the widget-data-path to ensure values are stored separately
+    if (namespaced['widget-data-path']) {
+        namespaced['widget-data-path'] = namespaceDataPath(namespaced['widget-data-path'], namespace);
+    }
+    // Recursively namespace nested widgets (for layout widgets)
+    if (namespaced.widgets && Array.isArray(namespaced.widgets)) {
+        namespaced.widgets = namespaced.widgets.map((widget) => namespaceWidgetConfig(widget, namespace));
+    }
+    // Namespace widget-item (for array/group widgets)
+    if (namespaced['widget-item']) {
+        namespaced['widget-item'] = namespaceWidgetConfig(namespaced['widget-item'], namespace);
+    }
+    // Namespace widget-data-columns (for table widgets)
+    if (namespaced['widget-data-columns'] && Array.isArray(namespaced['widget-data-columns'])) {
+        namespaced['widget-data-columns'] = namespaced['widget-data-columns'].map((column) => {
+            const namespacedColumn = { ...column };
+            // Namespace column data paths if they exist (columns only support string paths, not multi-path)
+            if (namespacedColumn['widget-data-path'] && typeof namespacedColumn['widget-data-path'] === 'string') {
+                namespacedColumn['widget-data-path'] = namespaceDataPath(namespacedColumn['widget-data-path'], namespace); // Safe cast since we checked it's a string
+            }
+            return namespacedColumn;
+        });
+    }
+    return namespaced;
+};
+/**
+ * Recursively namespace widget IDs in a panel configuration
+ */
+const namespacePanelConfig = (panel, namespace) => {
+    const namespaced = { ...panel };
+    // Recursively namespace nested panels
+    if (namespaced.panels && Array.isArray(namespaced.panels)) {
+        namespaced.panels = namespaced.panels.map((p) => namespacePanelConfig(p, namespace));
+    }
+    // Namespace widgets in panel
+    if (namespaced.widgets && Array.isArray(namespaced.widgets)) {
+        namespaced.widgets = namespaced.widgets.map((widget) => namespaceWidgetConfig(widget, namespace));
+    }
+    return namespaced;
+};
+/**
+ * Namespace widget IDs and data paths in a section configuration
+ * This ensures unique widget IDs and data paths when the same section is rendered multiple times
+ * (e.g., in CRView mode showing old and new records side by side)
+ *
+ * @param section - Section configuration to namespace
+ * @param namespace - Namespace prefix to add to widget IDs and data paths (e.g., "old", "new", "instance-1")
+ * @returns Namespaced section configuration
+ */
+const namespaceSectionConfig = (section, namespace) => {
+    const namespaced = { ...section };
+    // Namespace the section-id as well to ensure uniqueness
+    if (namespaced['section-id']) {
+        namespaced['section-id'] = `${namespace}__${namespaced['section-id']}`;
+    }
+    // Recursively namespace panels
+    if (namespaced.panels && Array.isArray(namespaced.panels)) {
+        namespaced.panels = namespaced.panels.map((panel) => namespacePanelConfig(panel, namespace));
+    }
+    // Namespace supporting documents data paths
+    if (namespaced['section-supporting-documents'] && Array.isArray(namespaced['section-supporting-documents'])) {
+        namespaced['section-supporting-documents'] = namespaced['section-supporting-documents'].map((doc) => ({
+            ...doc,
+            'document-data-path': doc['document-data-path']
+                ? `${namespace}.${doc['document-data-path']}`
+                : doc['document-data-path'],
+        }));
+    }
+    return namespaced;
+};
+
 /**
  * Renders a section with its panels
  *
@@ -2254,14 +3192,59 @@ const FileInputWidget = ({ config }) => {
  * - 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', }) => {
+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 || {});
+    // Namespace the section if namespace is provided
+    // This ensures unique widget IDs when the same section is rendered multiple times
+    const namespacedSection = useMemo(() => {
+        if (namespace) {
+            return namespaceSectionConfig(section, namespace);
+        }
+        return section;
+    }, [section, namespace]);
+    // Create namespaced schemaData if namespace is provided
+    // This ensures widgets can read initial values from schemaData at namespaced paths
+    const namespacedSchemaData = useMemo(() => {
+        if (!namespace || !currentSchemaData) {
+            return schemaData;
+        }
+        // Create a namespaced version of schemaData by copying values to namespaced paths
+        const namespaced = { ...currentSchemaData };
+        // Copy all top-level keys to namespaced paths
+        Object.keys(currentSchemaData).forEach(key => {
+            const namespacedKey = `${namespace}.${key}`;
+            if (!(namespacedKey in namespaced)) {
+                namespaced[namespacedKey] = currentSchemaData[key];
+            }
+        });
+        // Also handle nested objects - copy nested values to namespaced paths
+        const copyNestedValues = (obj, prefix = '') => {
+            if (obj && typeof obj === 'object' && !Array.isArray(obj)) {
+                Object.keys(obj).forEach(key => {
+                    const fullPath = prefix ? `${prefix}.${key}` : key;
+                    const namespacedPath = `${namespace}.${fullPath}`;
+                    if (typeof obj[key] === 'object' && obj[key] !== null && !Array.isArray(obj[key])) {
+                        copyNestedValues(obj[key], fullPath);
+                        // Also set the nested object at the namespaced path
+                        setValueByPath(namespaced, namespacedPath, obj[key]);
+                    }
+                    else {
+                        setValueByPath(namespaced, namespacedPath, obj[key]);
+                    }
+                });
+            }
+        };
+        copyNestedValues(currentSchemaData);
+        return namespaced;
+    }, [namespace, schemaData, currentSchemaData]);
     const crViewData = useMemo(() => {
         if (mode !== 'CRView')
             return null;
@@ -2274,17 +3257,16 @@ 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]);
-    const sectionId = section['section-id'];
+    // Use namespaced section for rendering
+    const sectionToRender = namespacedSection;
+    const sectionId = sectionToRender['section-id'];
     const gridId = `section-panels-${sectionId}`;
     const sectionClassId = `section-${sectionId}`;
     // Recursively count all vertical panels, especially those nested inside horizontal panels
     // Typically: horizontal panels at first level contain vertical panels at second level
+    // Accounts for panel-column-span: a panel with column-span 3 counts as 3 columns
     const countVerticalPanels = (panels) => {
         let count = 0;
         for (const panel of panels) {
@@ -2294,8 +3276,9 @@ const SectionRenderer = ({ section, apiAdapter, schemaData, onValueChange, gridC
                 count += countVerticalPanels(panel.panels);
             }
             else if (orientation === 'vertical') {
-                // Count this vertical panel
-                count += 1;
+                // Count this vertical panel, accounting for column span
+                const columnSpan = panel['panel-column-span'] || 1;
+                count += columnSpan;
                 // Also recursively count vertical panels nested inside this vertical panel
                 if (panel.panels && panel.panels.length > 0) {
                     count += countVerticalPanels(panel.panels);
@@ -2342,9 +3325,9 @@ const SectionRenderer = ({ section, apiAdapter, schemaData, onValueChange, gridC
         }
         return null;
     };
-    const hasTableWidget = checkForTableWidget(section.panels);
-    const tableWidgetColumnSpan = getTableWidgetColumnSpan(section.panels);
-    const verticalPanelsCount = countVerticalPanels(section.panels);
+    const hasTableWidget = checkForTableWidget(sectionToRender.panels);
+    const tableWidgetColumnSpan = getTableWidgetColumnSpan(sectionToRender.panels);
+    const verticalPanelsCount = countVerticalPanels(sectionToRender.panels);
     // If section contains a table widget with explicit column span, use it
     // Otherwise, if it has a table widget, ensure it spans at least 2 columns
     // Otherwise, use the vertical panel count
@@ -2354,7 +3337,7 @@ const SectionRenderer = ({ section, apiAdapter, schemaData, onValueChange, gridC
     // Check if table widget has explicit column span (not default)
     const hasExplicitTableSpan = tableWidgetColumnSpan !== null;
     // Supporting documents configuration
-    const supportingDocuments = section['section-supporting-documents'] || [];
+    const supportingDocuments = sectionToRender['section-supporting-documents'] || [];
     const hasSupportingDocuments = supportingDocuments.length > 0;
     // Edit mode state
     const [isEditMode, setIsEditMode] = useState(false);
@@ -2392,21 +3375,24 @@ const SectionRenderer = ({ section, apiAdapter, schemaData, onValueChange, gridC
     }, [isEditMode]);
     // Recursively modify panels to set readonly based on edit mode
     const makePanelsEditable = (panels, editable) => {
-        const sectionEditable = section['section-editable'] === true;
+        const sectionEditable = sectionToRender['section-editable'] === true;
         return panels.map(panel => {
             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;
         });
@@ -2415,10 +3401,10 @@ const SectionRenderer = ({ section, apiAdapter, schemaData, onValueChange, gridC
     const editableSection = useMemo(() => {
         // Always apply readonly/editable state based on edit mode
         return {
-            ...section,
-            panels: makePanelsEditable(section.panels, isEditMode),
+            ...sectionToRender,
+            panels: makePanelsEditable(sectionToRender.panels, isEditMode),
         };
-    }, [section, isEditMode]);
+    }, [sectionToRender, isEditMode]);
     // Handle edit button click
     const handleEdit = () => {
         // Capture height BEFORE entering edit mode to preserve space
@@ -2485,9 +3471,9 @@ const SectionRenderer = ({ section, apiAdapter, schemaData, onValueChange, gridC
                         width: `${editSectionPosition.width}px`,
                         maxHeight: '90vh',
                         overflowY: 'auto',
-                    }, children: [section['section-title'] && (jsxRuntimeExports.jsx("h2", { className: "text-xl font-semibold mb-4", style: { fontFamily: 'Roboto, sans-serif', marginTop: '35px' }, children: translateConfig(section['section-title']) })), jsxRuntimeExports.jsxs("div", { id: editGridId, className: "section-panels", children: [editableSection.panels.map((panel, index) => {
+                    }, 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: schemaData, 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}`));
@@ -2505,27 +3491,62 @@ const SectionRenderer = ({ section, apiAdapter, schemaData, onValueChange, gridC
         });
         return widgets;
     };
-    const buildSectionSnapshot = (widgets, sourceData) => {
+    const trackSectionChages = (widgets, sourceData, useNamespacedPaths = false) => {
         const snapshot = {};
+        let hasTable = false;
+        const recordId = Object.keys(sourceData)[0];
         widgets.forEach(widget => {
-            const dataPath = widget['widget-data-path'];
-            if (!dataPath)
+            const originalDataPath = widget['widget-data-path'];
+            if (!originalDataPath)
                 return;
+            if (widget['widget-type'] === 'table' || widget['widget-type'] === 'simple-table') {
+                hasTable = true;
+            }
+            // If namespace was used and we're reading from store, use namespaced paths
+            useNamespacedPaths && namespace && originalDataPath
+                ? (typeof originalDataPath === 'string'
+                    ? `${namespace}.${originalDataPath}`
+                    : Object.fromEntries(Object.entries(originalDataPath).map(([key, path]) => [key, `${namespace}.${path}`])))
+                : originalDataPath;
+            // Always store snapshot using original paths (for change tracking)
             // Handle multi-path (object) or single path (string)
-            if (typeof dataPath === 'object') {
-                // Multi-path: store each path separately
-                Object.entries(dataPath).forEach(([key, path]) => {
+            if (typeof originalDataPath === 'object') {
+                // Multi-path: store each path separately using original paths
+                Object.entries(originalDataPath).forEach(([key, path]) => {
                     if (typeof path === 'string') {
-                        snapshot[path] = getValueByPath(sourceData, path);
+                        // Read from source using namespaced path if needed
+                        const readPath = useNamespacedPaths && namespace ? `${namespace}.${path}` : path;
+                        snapshot[path] = getValueByPath(sourceData, readPath);
                     }
                 });
             }
-            else if (typeof dataPath === 'string') {
-                snapshot[dataPath] = getValueByPath(sourceData, dataPath);
+            else if (typeof originalDataPath === 'string') {
+                // Read from source using namespaced path if needed
+                const readPath = useNamespacedPaths && namespace ? `${namespace}.${originalDataPath}` : originalDataPath;
+                snapshot[originalDataPath] = getValueByPath(sourceData, readPath);
             }
         });
-        return snapshot;
+        if (hasTable === false) {
+            const cleanedSnapshot = {};
+            Object.entries(snapshot).forEach(([key, value]) => {
+                const removedFirstLevelPath = key.includes('.')
+                    ? key.split('.').slice(1).join('.')
+                    : key;
+                cleanedSnapshot[removedFirstLevelPath] = value;
+            });
+            return [
+                { ...sourceData[recordId],
+                    ...cleanedSnapshot,
+                    edit_action: "UPDATE"
+                }
+            ];
+        }
+        const recordEntry = Object.entries(snapshot).find(([key, value]) => key.endsWith('.records') && Array.isArray(value));
+        return recordEntry ? recordEntry[1] : snapshot;
     };
+    // Get original section (without namespace) for building snapshots
+    // This ensures we use the original data paths when saving
+    const originalSection = section;
     // Handle save button click
     const handleSave = async () => {
         if (!store || !onSectionSave) {
@@ -2533,31 +3554,37 @@ const SectionRenderer = ({ section, apiAdapter, schemaData, onValueChange, gridC
             setIsEditMode(false);
             return;
         }
-        const sectionWidgets = collectWidgets(section.panels);
+        // Use original section (without namespace) for collecting widgets
+        // This ensures we use the original widget IDs and data paths
+        const sectionWidgets = collectWidgets(originalSection.panels);
         const currentState = store.getState().widget;
         const currentSchemaData = currentState.values || {};
+        // schema data before section change
         const oldSchemaData = schemaData || contextSchemaData;
-        const oldSectionValue = buildSectionSnapshot(sectionWidgets, oldSchemaData);
-        const newSectionValue = buildSectionSnapshot(sectionWidgets, currentSchemaData);
+        // schema data after section change
+        const newSchemaData = trackSectionChages(sectionWidgets, currentSchemaData);
         // Include supporting documents in the snapshot if they exist
+        const sectionFiles = [];
         if (hasSupportingDocuments) {
-            supportingDocuments.forEach((doc, index) => {
-                const dataPath = doc['document-data-path'];
-                const oldValue = getValueByPath(oldSchemaData, dataPath);
-                const newValue = getValueByPath(currentSchemaData, dataPath);
-                oldSectionValue[dataPath] = oldValue;
-                newSectionValue[dataPath] = newValue;
+            // Use original section's supporting documents to get original data paths
+            const originalSupportingDocuments = originalSection['section-supporting-documents'] || [];
+            originalSupportingDocuments.forEach((doc) => {
+                const originalDataPath = doc['document-data-path'];
+                // Read new value from store (with namespace if used)
+                const storeDataPath = namespace && originalDataPath
+                    ? `${namespace}.${originalDataPath}`
+                    : originalDataPath;
+                sectionFiles.push(getValueByPath(currentSchemaData, storeDataPath));
             });
         }
-        if (JSON.stringify(oldSectionValue) !== JSON.stringify(newSectionValue)) {
-            const changes = {
-                section_id: sectionId,
-                section_schema: section,
-                old_section_value: oldSectionValue,
-                new_section_value: newSectionValue,
-            };
+        if (JSON.stringify(oldSchemaData) !== JSON.stringify(newSchemaData)) {
             try {
-                await onSectionSave(changes);
+                const sectionchanges = {
+                    section_id: originalSection['section-id'],
+                    records: [...newSchemaData],
+                    files: [...sectionFiles]
+                };
+                await onSectionSave(sectionchanges);
             }
             catch (error) {
                 console.error('Section Changes Save failed', error);
@@ -2568,40 +3595,58 @@ const SectionRenderer = ({ section, apiAdapter, schemaData, onValueChange, gridC
     // Handle cancel button click
     const handleCancel = () => {
         // Revert values in store to original schema data
-        const sectionWidgets = collectWidgets(section.panels);
+        // Use original section (without namespace) for collecting widgets
+        const sectionWidgets = collectWidgets(originalSection.panels);
         const oldSchemaData = schemaData || contextSchemaData;
         const currentStoreValues = store.getState().widget.values;
         let newStoreValues = currentStoreValues;
         sectionWidgets.forEach(widget => {
-            const widgetId = widget['widget-id'];
-            const dataPath = widget['widget-data-path'];
-            if (widgetId && dataPath) {
+            const originalWidgetId = widget['widget-id'];
+            // If namespace was used, we need to use namespaced widget ID and data path
+            const namespacedWidgetId = namespace ? `${namespace}__${originalWidgetId}` : originalWidgetId;
+            const widgetId = namespacedWidgetId;
+            const originalDataPath = widget['widget-data-path'];
+            // If namespace was used, data path in store is namespaced, but we read from original schema using original path
+            const storeDataPath = namespace && originalDataPath
+                ? (typeof originalDataPath === 'string'
+                    ? `${namespace}.${originalDataPath}`
+                    : Object.fromEntries(Object.entries(originalDataPath).map(([key, path]) => [key, `${namespace}.${path}`])))
+                : originalDataPath;
+            if (widgetId && originalDataPath) {
                 // Handle multi-path (object) or single path (string)
+                // Read from original schema data using original paths
                 let oldValue;
-                if (typeof dataPath === 'object') {
+                if (typeof originalDataPath === 'object') {
                     // Multi-path: get values for each path
                     oldValue = {};
-                    Object.entries(dataPath).forEach(([key, path]) => {
+                    Object.entries(originalDataPath).forEach(([key, path]) => {
                         if (typeof path === 'string') {
                             oldValue[key] = getValueByPath(oldSchemaData, path);
                         }
                     });
                 }
-                else if (typeof dataPath === 'string') {
-                    oldValue = getValueByPath(oldSchemaData, dataPath);
+                else if (typeof originalDataPath === 'string') {
+                    oldValue = getValueByPath(oldSchemaData, originalDataPath);
                 }
+                // Set in store using namespaced data path (if namespace was used)
                 if (oldValue !== undefined) {
-                    newStoreValues = setWidgetValue(newStoreValues, dataPath, widgetId, oldValue);
+                    newStoreValues = setWidgetValue(newStoreValues, storeDataPath, widgetId, oldValue);
                 }
             }
         });
         // Also revert supporting documents if any
         if (hasSupportingDocuments) {
-            supportingDocuments.forEach((doc, index) => {
+            // Use original section's supporting documents to get original data paths
+            const originalSupportingDocuments = originalSection['section-supporting-documents'] || [];
+            originalSupportingDocuments.forEach((doc, index) => {
                 const widgetId = `supporting-doc-${sectionId}-${index}`;
-                const dataPath = doc['document-data-path'];
-                const oldValue = getValueByPath(oldSchemaData, dataPath);
-                newStoreValues = setWidgetValue(newStoreValues, dataPath, widgetId, oldValue);
+                const originalDataPath = doc['document-data-path'];
+                // If namespace was used, data path in store is namespaced
+                const storeDataPath = namespace && originalDataPath
+                    ? `${namespace}.${originalDataPath}`
+                    : originalDataPath;
+                const oldValue = getValueByPath(oldSchemaData, originalDataPath);
+                newStoreValues = setWidgetValue(newStoreValues, storeDataPath, widgetId, oldValue);
             });
         }
         if (newStoreValues !== currentStoreValues) {
@@ -2616,11 +3661,13 @@ const SectionRenderer = ({ section, apiAdapter, schemaData, onValueChange, gridC
             (documentType === 'image' ? 'image/*' :
                 documentType === 'pdf' ? '.pdf' :
                     '*/*');
+        // Use the namespaced section ID for widget ID to ensure uniqueness
+        const widgetId = `supporting-doc-${sectionId}-${index}`;
         return {
             widget: 'file',
             'widget-type': 'input',
             'widget-label': doc['document-label'] || doc['document-data-path'] || `Document ${index + 1}`,
-            'widget-id': `supporting-doc-${sectionId}-${index}`,
+            'widget-id': widgetId,
             'widget-data-path': doc['document-data-path'],
             'widget-required': doc['document-required'] || false,
             'widget-readonly': false,
@@ -2776,7 +3823,7 @@ const SectionRenderer = ({ section, apiAdapter, schemaData, onValueChange, gridC
                         minHeight: 'auto',
                         height: 'auto'
                     }),
-                }, children: [section['section-title'] && (jsxRuntimeExports.jsx("h2", { className: "text-xl font-semibold mb-4", style: { marginTop: '35px' }, children: translateConfig(section['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: schemaData, 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',
@@ -2844,130 +3891,1807 @@ const hasTableWidget = (panels) => {
                 }
             }
         }
-        // Recursively check nested panels
-        if (panel.panels) {
-            if (hasTableWidget(panel.panels)) {
+        // Recursively check nested panels
+        if (panel.panels) {
+            if (hasTableWidget(panel.panels)) {
+                return true;
+            }
+        }
+    }
+    return false;
+};
+/**
+ * Recursively get table widget column span from panels
+ */
+const getTableWidgetColumnSpan = (panels) => {
+    for (const panel of panels) {
+        // Check widgets in this panel
+        if (panel.widgets) {
+            for (const widget of panel.widgets) {
+                if (widget.widget === 'table' || widget['widget-type'] === 'table') {
+                    // Return the widget's column span if specified, otherwise null
+                    return widget['widget-column-span'] || null;
+                }
+            }
+        }
+        // Recursively check nested panels
+        if (panel.panels) {
+            const nestedSpan = getTableWidgetColumnSpan(panel.panels);
+            if (nestedSpan !== null) {
+                return nestedSpan;
+            }
+        }
+    }
+    return null;
+};
+/**
+ * Recursively count all vertical panels in a section
+ * Handles nested structure: horizontal panels containing vertical panels
+ * Accounts for panel-column-span: a panel with column-span 3 counts as 3 columns
+ */
+const countVerticalPanels = (panels) => {
+    let count = 0;
+    for (const panel of panels) {
+        const orientation = panel['panel-orientation'] || 'vertical';
+        if (orientation === 'horizontal' && panel.panels) {
+            // For horizontal panels, count all vertical panels nested inside
+            count += countVerticalPanels(panel.panels);
+        }
+        else if (orientation === 'vertical') {
+            // Count this vertical panel, accounting for column span
+            const columnSpan = panel['panel-column-span'] || 1;
+            count += columnSpan;
+            // Also recursively count vertical panels nested inside this vertical panel
+            if (panel.panels && panel.panels.length > 0) {
+                count += countVerticalPanels(panel.panels);
+            }
+        }
+    }
+    return count;
+};
+/**
+ * Container component that renders multiple sections
+ *
+ * Layout behavior:
+ * - Uses CSS Grid for proper alignment
+ * - Each grid column = 200px (one vertical panel width)
+ * - Sections span columns based on their total vertical panel count
+ * - 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, 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
+    const maxVerticalPanels = Math.max(...sections.map(section => {
+        const panelCount = countVerticalPanels(section.panels);
+        const tableWidgetSpan = getTableWidgetColumnSpan(section.panels);
+        // Use explicit table widget span if specified, otherwise use default logic
+        return tableWidgetSpan !== null
+            ? Math.max(panelCount, tableWidgetSpan)
+            : (hasTableWidget(section.panels) ? Math.max(panelCount, 2) : panelCount);
+    }), 3 // Minimum 3 columns
+    );
+    const containerId = 'sections-container-grid';
+    return (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx("style", { children: `
+        #${containerId} {
+          display: grid;
+          /* Flexible columns: minimum 200px, but can grow equally to fill width */
+          grid-template-columns: repeat(${maxVerticalPanels}, minmax(200px, 1fr));
+          gap: 1.5rem;
+          width: 100%;
+          align-items: start;
+        }
+
+        /* Sections with table widgets should expand to fill available space only if no explicit span */
+        #${containerId} > .section[data-has-table="true"][data-has-explicit-span="false"] {
+          grid-column: 1 / -1; /* Span all columns */
+          width: 100%;
+        }
+        
+        /* Sections with explicit table widget span - inline style will handle grid-column */
+        /* This rule ensures width is 100% but doesn't override grid-column */
+        #${containerId} > .section[data-has-explicit-span="true"] {
+          width: 100%;
+        }
+
+        /* Responsive: on smaller screens, use auto-fit for flexibility */
+        @media (max-width: 1023px) {
+          #${containerId} {
+            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+          }
+        }
+      ` }), jsxRuntimeExports.jsx("div", { id: containerId, className: `sections-container ${className}`, children: sections.map((section, index) => {
+                    // Determine namespace for this section
+                    const sectionNamespace = namespace
+                        ? (typeof namespace === 'string' ? namespace : namespace(section['section-id'], index))
+                        : undefined;
+                    // Check if section has explicit column span
+                    if (section['section-column-span']) {
+                        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);
+                    const containsTable = hasTableWidget(section.panels);
+                    // If section contains a table widget with explicit column span, use it
+                    // Otherwise, if it has a table widget, ensure it spans at least 2 columns
+                    // Otherwise, use the vertical panel count
+                    const columnSpan = tableWidgetColumnSpan !== null
+                        ? tableWidgetColumnSpan
+                        : (containsTable ? Math.max(verticalPanelsCount, 2) : verticalPanelsCount);
+                    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']));
+                }) })] }));
+};
+
+/**
+ * JSON Schema definitions for Section Builder validation
+ * These schemas are used by json-edit-react to provide validation and constraints
+ */
+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);
+            }
         }
-    }
-    return false;
-};
-/**
- * Recursively get table widget column span from panels
- */
-const getTableWidgetColumnSpan = (panels) => {
-    for (const panel of panels) {
-        // Check widgets in this panel
-        if (panel.widgets) {
-            for (const widget of panel.widgets) {
-                if (widget.widget === 'table' || widget['widget-type'] === 'table') {
-                    // Return the widget's column span if specified, otherwise null
-                    return widget['widget-column-span'] || null;
+        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']);
                 }
             }
         }
-        // Recursively check nested panels
-        if (panel.panels) {
-            const nestedSpan = getTableWidgetColumnSpan(panel.panels);
-            if (nestedSpan !== null) {
-                return nestedSpan;
+        else {
+            // Add to first panel or create one
+            if (section.panels && section.panels.length > 0) {
+                onAddWidget(section.panels[0]['panel-id']);
             }
         }
-    }
-    return null;
+    };
+    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 }) })] })] }));
 };
+
 /**
- * Recursively count all vertical panels in a section
- * Handles nested structure: horizontal panels containing vertical panels
+ * Main Section Builder Component
+ * Provides dual-panel interface for editing section JSON
  */
-const countVerticalPanels = (panels) => {
-    let count = 0;
-    for (const panel of panels) {
-        const orientation = panel['panel-orientation'] || 'vertical';
-        if (orientation === 'horizontal' && panel.panels) {
-            // For horizontal panels, count all vertical panels nested inside
-            count += countVerticalPanels(panel.panels);
-        }
-        else if (orientation === 'vertical') {
-            // Count this vertical panel
-            count += 1;
-            // Also recursively count vertical panels nested inside this vertical panel
-            if (panel.panels && panel.panels.length > 0) {
-                count += countVerticalPanels(panel.panels);
+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);
         }
-    }
-    return count;
-};
-/**
- * Container component that renders multiple sections
- *
- * Layout behavior:
- * - Uses CSS Grid for proper alignment
- * - Each grid column = 200px (one vertical panel width)
- * - Sections span columns based on their total vertical panel count
- * - 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', }) => {
-    // 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
-    const maxVerticalPanels = Math.max(...sections.map(section => {
-        const panelCount = countVerticalPanels(section.panels);
-        const tableWidgetSpan = getTableWidgetColumnSpan(section.panels);
-        // Use explicit table widget span if specified, otherwise use default logic
-        return tableWidgetSpan !== null
-            ? Math.max(panelCount, tableWidgetSpan)
-            : (hasTableWidget(section.panels) ? Math.max(panelCount, 2) : panelCount);
-    }), 3 // Minimum 3 columns
-    );
-    const containerId = 'sections-container-grid';
-    return (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx("style", { children: `
-        #${containerId} {
-          display: grid;
-          /* Flexible columns: minimum 200px, but can grow equally to fill width */
-          grid-template-columns: repeat(${maxVerticalPanels}, minmax(200px, 1fr));
-          gap: 1.5rem;
-          width: 100%;
-          align-items: start;
+    }, [initialSection]);
+    const handleSectionChange = useCallback((updatedSection) => {
+        setSection(updatedSection);
+        if (onChange) {
+            onChange(updatedSection);
         }
-
-        /* Sections with table widgets should expand to fill available space only if no explicit span */
-        #${containerId} > .section[data-has-table="true"][data-has-explicit-span="false"] {
-          grid-column: 1 / -1; /* Span all columns */
-          width: 100%;
+    }, [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);
         }
-        
-        /* Sections with explicit table widget span - inline style will handle grid-column */
-        /* This rule ensures width is 100% but doesn't override grid-column */
-        #${containerId} > .section[data-has-explicit-span="true"] {
-          width: 100%;
+    }, [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;
         }
-
-        /* Responsive: on smaller screens, use auto-fit for flexibility */
-        @media (max-width: 1023px) {
-          #${containerId} {
-            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-          }
+        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;
         }
-      ` }), jsxRuntimeExports.jsx("div", { id: containerId, className: `sections-container ${className}`, children: sections.map((section) => {
-                    // 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 }, section['section-id']));
+        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;
                     }
-                    const verticalPanelsCount = countVerticalPanels(section.panels);
-                    const tableWidgetColumnSpan = getTableWidgetColumnSpan(section.panels);
-                    const containsTable = hasTableWidget(section.panels);
-                    // If section contains a table widget with explicit column span, use it
-                    // Otherwise, if it has a table widget, ensure it spans at least 2 columns
-                    // Otherwise, use the vertical panel count
-                    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 }, section['section-id']));
-                }) })] }));
+                    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 }) })] })] }));
 };
 
 /**
@@ -4400,6 +7124,14 @@ const DateTimeInputWidget = ({ config }) => {
 const SelectWidget = ({ config }) => {
     const { value, error, touched, isEnabled, onChange, onBlur, dataSourceOptions, loading, config: widgetConfig, } = useBaseWidget({ config });
     const { translate, translateConfig } = useWidgetTranslation();
+    // For readonly mode, render as display text showing only the selected label
+    if (widgetConfig['widget-readonly']) {
+        const label = translateConfig(widgetConfig['widget-label']);
+        // Find the selected option's label
+        const selectedOption = dataSourceOptions.find((option) => option.value === value);
+        const displayValue = selectedOption ? selectedOption.label : (value || '-');
+        return (jsxRuntimeExports.jsxs("div", { className: "mb-[10px] SelectDisplayWidget 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.jsxs("select", { value: value || '', onChange: (e) => onChange(e.target.value), onBlur: onBlur, disabled: !isEnabled || loading || widgetConfig['widget-readonly'], className: `w-full sm:w-[180px] max-w-full h-[30px] px-3 border shadow-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 ${(touched && error.length > 0) || (widgetConfig['widget-required'] && (!value || value === ''))
                                 ? 'border-red-500 focus:ring-red-500 focus:border-red-500'
                                 : 'border-gray-300'} ${!isEnabled || loading || widgetConfig['widget-readonly'] ? 'bg-gray-100 cursor-not-allowed' : 'bg-white'}`, style: { borderRadius: '10px' }, title: translateConfig(widgetConfig['widget-data-tooltip']), children: [jsxRuntimeExports.jsx("option", { value: "", children: translate('common.select') }), dataSourceOptions.map((option) => (jsxRuntimeExports.jsx("option", { value: option.value, children: option.label }, option.value)))] }), loading && (jsxRuntimeExports.jsx("p", { className: "text-sm text-gray-500 mt-1", children: translate('common.loadingOptions') })), touched && error.length > 0 && (jsxRuntimeExports.jsx("p", { className: "text-red-500 text-sm mt-1", children: error[0] }))] })] }) }));
@@ -4800,6 +7532,17 @@ const TableCellSelect = ({ config, value, onValueChange }) => {
     const isReadonly = config['widget-readonly'] || false;
     return (jsxRuntimeExports.jsxs("select", { value: value || '', onChange: (e) => onValueChange(e.target.value), disabled: isReadonly || loading, className: `w-full h-[28px] px-2 text-sm border focus:outline-none focus:ring-1 focus:ring-blue-500 focus:border-blue-500 ${isReadonly || loading ? 'bg-gray-100 cursor-not-allowed' : 'bg-white'} border-gray-300`, style: { borderRadius: '10px' }, children: [jsxRuntimeExports.jsx("option", { value: "", children: translate('common.select') || 'Select' }), dataSourceOptions.map((option) => (jsxRuntimeExports.jsx("option", { value: option.value, children: option.label }, option.value)))] }));
 };
+const SelectDisplayValue = ({ config, value }) => {
+    const { dataSourceOptions, loading } = useBaseWidget({ config });
+    if (loading) {
+        return jsxRuntimeExports.jsx("span", { children: "-" });
+    }
+    if (value === null || value === undefined || value === '') {
+        return jsxRuntimeExports.jsx("span", { children: "-" });
+    }
+    const selectedOption = dataSourceOptions.find((option) => option.value === value);
+    return jsxRuntimeExports.jsx("span", { children: selectedOption ? selectedOption.label : String(value) });
+};
 const TableCellText = ({ config, value, onValueChange }) => {
     const isReadonly = config['widget-readonly'] || false;
     const placeholder = config['widget-data-placeholder'] || '';
@@ -4834,8 +7577,9 @@ 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 : [];
     const columns = widgetConfig['widget-data-columns'] || [];
     const operations = widgetConfig['widget-data-operations'] || {};
@@ -4847,10 +7591,13 @@ const TableWidget = ({ config }) => {
     const [confirmationState, setConfirmationState] = useState(null);
     const [isAdding, setIsAdding] = useState(false);
     const [newRowData, setNewRowData] = useState(null);
-    // When section is in edit mode (isReadonly is false), all rows are automatically editable
+    // Track original rows when entering section edit mode for edit_action tracking
+    const [originalRows, setOriginalRows] = useState(null);
+    // When section is in edit mode (isReadonly is false), rows can be edited individually
+    // But they are NOT automatically editable - user must click Edit button for each row
     const isSectionEditMode = !isReadonly && operations.edit;
     // Check if any row is being edited (either manually or via section edit mode)
-    const isAnyRowEditing = editingState !== null || isAdding || isSectionEditMode;
+    const isAnyRowEditing = editingState !== null || isAdding;
     // Show confirmation dialog
     const showConfirmation = useCallback((message, onConfirm, onCancel) => {
         setConfirmationState({
@@ -4916,19 +7663,8 @@ const TableWidget = ({ config }) => {
     }, [isAnyRowEditing, rows, showConfirmation, cancelEdit, translate]);
     // Update cell value during edit
     const updateCellValue = useCallback((columnKey, newValue, rowIndex) => {
-        if (isSectionEditMode && rowIndex !== undefined) {
-            // When section is in edit mode, update the row directly
-            const newRows = [...rows];
-            if (!newRows[rowIndex]) {
-                newRows[rowIndex] = {};
-            }
-            newRows[rowIndex] = {
-                ...newRows[rowIndex],
-                [columnKey]: newValue,
-            };
-            onChange(newRows);
-        }
-        else if (editingState) {
+        if (editingState && rowIndex !== undefined) {
+            // Update editing state (works for both section edit mode and normal mode)
             setEditingState({
                 ...editingState,
                 currentValue: {
@@ -4936,6 +7672,9 @@ const TableWidget = ({ config }) => {
                     [columnKey]: newValue,
                 },
             });
+            // Also update Redux store for the cell widget
+            const cellWidgetId = `${widgetConfig['widget-id']}-row-${rowIndex}-col-${columnKey}`;
+            dispatch(setValue({ widgetId: cellWidgetId, value: newValue }));
         }
         else if (isAdding && newRowData) {
             setNewRowData({
@@ -4943,7 +7682,7 @@ const TableWidget = ({ config }) => {
                 [columnKey]: newValue,
             });
         }
-    }, [editingState, isAdding, newRowData, isSectionEditMode, rows, onChange]);
+    }, [editingState, isAdding, newRowData, widgetConfig, dispatch]);
     // Save edited row
     const saveEdit = useCallback(async () => {
         if (!editingState)
@@ -4953,23 +7692,62 @@ 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];
-            newRows[rowIndex] = rowData;
+            const currentRow = newRows[rowIndex] || {};
+            const wasDeleted = currentRow.edit_action === 'DELETE';
+            // Determine edit_action (for color coding)
+            let editAction = currentRow.edit_action;
+            if (isSectionEditMode) {
+                // If row was deleted but is being saved, un-delete it
+                if (wasDeleted) {
+                    // Check if this row exists in original rows
+                    if (originalRows) {
+                        const rowId = rowData.id;
+                        const existsInOriginal = rowId !== undefined
+                            ? originalRows.some(or => or.id === rowId)
+                            : rowIndex < originalRows.length;
+                        editAction = existsInOriginal ? 'UPDATE' : 'ADD';
+                    }
+                    else {
+                        editAction = 'UPDATE';
+                    }
+                }
+                else if (!editAction && originalRows) {
+                    // Check if this row exists in original rows
+                    const rowId = rowData.id;
+                    const existsInOriginal = rowId !== undefined
+                        ? originalRows.some(or => or.id === rowId)
+                        : rowIndex < originalRows.length;
+                    editAction = existsInOriginal ? 'UPDATE' : 'ADD';
+                }
+                else if (!editAction) {
+                    editAction = 'UPDATE';
+                }
+            }
+            else {
+                // In non-section edit mode, mark as UPDATE if not already set
+                if (!editAction && !wasDeleted) {
+                    editAction = 'UPDATE';
+                }
+            }
+            newRows[rowIndex] = {
+                ...rowData,
+                ...(editAction ? { edit_action: editAction } : {}),
+            };
             onChange(newRows);
+            // Clear editing state and reset widget values in Redux
+            columns.forEach((col) => {
+                const cellWidgetId = `${widgetConfig['widget-id']}-row-${rowIndex}-col-${col['column-key']}`;
+                dispatch(resetWidget(cellWidgetId));
+            });
             setEditingState(null);
         }
         catch (error) {
@@ -4980,7 +7758,7 @@ const TableWidget = ({ config }) => {
         finally {
             setLoadingRowIndex(null);
         }
-    }, [editingState, rows, onChange, apiAdapter, apiConfig, translate]);
+    }, [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)
@@ -5002,18 +7780,20 @@ 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 };
                 }
             }
+            // Mark new row with edit_action: 'ADD' (for color coding)
+            savedRow = { ...savedRow, edit_action: 'ADD' };
             // Add to local state
             onChange([...rows, savedRow]);
             setIsAdding(false);
@@ -5026,7 +7806,7 @@ const TableWidget = ({ config }) => {
         finally {
             setLoadingRowIndex(null);
         }
-    }, [isAdding, newRowData, rows, onChange, apiAdapter, apiConfig, translate]);
+    }, [isAdding, newRowData, rows, onChange, dataSourceRequestHandler, apiConfig, translate, isSectionEditMode]);
     // Delete row
     const deleteRow = useCallback(async (rowIndex) => {
         if (isAnyRowEditing) {
@@ -5042,25 +7822,31 @@ 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) {
+                const newRows = [...rows];
+                newRows[rowIndex] = {
+                    ...newRows[rowIndex],
+                    edit_action: 'DELETE',
+                };
+                onChange(newRows);
+            }
+            else {
+                // Remove from local state (non-section edit mode)
+                const newRows = rows.filter((_, i) => i !== rowIndex);
+                onChange(newRows);
             }
-            // Remove from local state
-            const newRows = rows.filter((_, i) => i !== rowIndex);
-            onChange(newRows);
         }
         catch (error) {
             console.error('Error deleting record:', error);
@@ -5069,28 +7855,37 @@ const TableWidget = ({ config }) => {
         finally {
             setLoadingRowIndex(null);
         }
-    }, [rows, onChange, apiAdapter, apiConfig, translate]);
+    }, [rows, onChange, dataSourceRequestHandler, apiConfig, translate, isSectionEditMode]);
     // Get cell value (from editing state or row data)
     const getCellValue = useCallback((rowIndex, columnKey) => {
-        // When section is in edit mode, use row data directly
-        if (isSectionEditMode) {
-            return rows[rowIndex]?.[columnKey];
-        }
+        // When a specific row is being edited (either in section edit mode or normal mode)
         if (editingState && editingState.rowIndex === rowIndex) {
+            // Check Redux store first for most up-to-date value
+            const cellWidgetId = `${widgetConfig['widget-id']}-row-${rowIndex}-col-${columnKey}`;
+            const storeValue = storeValues[cellWidgetId];
+            if (storeValue !== undefined) {
+                return storeValue;
+            }
             return editingState.currentValue[columnKey];
         }
         if (isAdding && rowIndex === rows.length) {
             return newRowData?.[columnKey];
         }
         return rows[rowIndex]?.[columnKey];
-    }, [editingState, isAdding, rows, newRowData, isSectionEditMode]);
+    }, [editingState, isAdding, rows, newRowData, widgetConfig, storeValues]);
     // Get formatted display value for a cell
     const getDisplayValue = useCallback((rowIndex, column) => {
         const columnKey = column['column-key'];
         const cellValue = getCellValue(rowIndex, columnKey);
+        const widgetType = column.widget || 'text';
         if (cellValue === null || cellValue === undefined || cellValue === '') {
             return '-';
         }
+        // For select widgets, we'll use SelectDisplayValue component instead
+        // This function is kept for other widget types
+        if (widgetType === 'select') {
+            return null; // Will be handled by SelectDisplayValue component
+        }
         // Use formatValue if format config exists
         if (column['widget-data-format']) {
             return formatValue(cellValue, column['widget-data-format'], column.widget);
@@ -5098,29 +7893,22 @@ const TableWidget = ({ config }) => {
         return cellValue?.toString() || '-';
     }, [getCellValue]);
     // Check if row is being edited
-    // When section is in edit mode, all rows are editable
+    // In section edit mode, only the row with active editingState is editable
     const isRowEditing = useCallback((rowIndex) => {
-        if (isSectionEditMode) {
-            return true; // All rows are editable when section is in edit mode
-        }
         return editingState?.rowIndex === rowIndex || (isAdding && rowIndex === rows.length);
-    }, [editingState, isAdding, rows.length, isSectionEditMode]);
-    // Set cell widget value in Redux when entering edit mode
+    }, [editingState, isAdding, rows.length]);
+    // Store original rows when entering section edit mode (for edit_action tracking)
     useEffect(() => {
-        if (isSectionEditMode) {
-            // When section is in edit mode, set values for all rows
-            rows.forEach((row, rowIndex) => {
-                columns.forEach((col) => {
-                    const columnKey = col['column-key'];
-                    const cellWidgetId = `${widgetConfig['widget-id']}-row-${rowIndex}-col-${columnKey}`;
-                    const cellValue = row[columnKey];
-                    const defaultValue = cellValue !== undefined ? cellValue : (col['widget-data-default'] ?? '');
-                    // Set value in Redux store
-                    dispatch(setValue({ widgetId: cellWidgetId, value: defaultValue }));
-                });
-            });
+        if (isSectionEditMode && originalRows === null) {
+            setOriginalRows(JSON.parse(JSON.stringify(rows))); // Deep clone
+        }
+        else if (!isSectionEditMode && originalRows !== null) {
+            setOriginalRows(null);
         }
-        else if (editingState) {
+    }, [isSectionEditMode, rows, originalRows]);
+    // Set cell widget value in Redux when entering edit mode for a specific row
+    useEffect(() => {
+        if (editingState) {
             columns.forEach((col) => {
                 const columnKey = col['column-key'];
                 const cellWidgetId = `${widgetConfig['widget-id']}-row-${editingState.rowIndex}-col-${columnKey}`;
@@ -5130,7 +7918,7 @@ const TableWidget = ({ config }) => {
                 dispatch(setValue({ widgetId: cellWidgetId, value: defaultValue }));
             });
         }
-    }, [isSectionEditMode, editingState, columns, widgetConfig, dispatch, rows]);
+    }, [editingState, columns, widgetConfig, dispatch]);
     useEffect(() => {
         if (isAdding && newRowData) {
             columns.forEach((col) => {
@@ -5177,18 +7965,48 @@ const TableWidget = ({ config }) => {
                 } }) }));
     }, [widgetConfig, updateCellValue]);
     // Render cell content (widget in edit mode, formatted value in view mode)
-    const renderCell = useCallback((rowIndex, column) => {
+    const renderCell = useCallback((rowIndex, column, row) => {
         const columnKey = column['column-key'];
         const isEditing = isRowEditing(rowIndex);
         const cellValue = getCellValue(rowIndex, columnKey);
         const columnReadonly = column['widget-readonly'] === true;
+        // Get color styling based on edit_action
+        const getCellStyle = () => {
+            if (isEditing)
+                return {}; // No special styling when editing
+            const editAction = row?.edit_action;
+            if (editAction === 'ADD') {
+                return { color: '#16a34a' }; // green-600
+            }
+            else if (editAction === 'DELETE') {
+                return { color: '#dc2626', textDecoration: 'line-through' }; // red-600 with strikethrough
+            }
+            else if (editAction === 'UPDATE') {
+                return { color: '#ea580c' }; // orange-600
+            }
+            return {};
+        };
         if (isEditing) {
             // Use lightweight cell renderer
             return renderTableCell(rowIndex, column, cellValue, columnReadonly);
         }
         else {
-            // Display formatted value in view mode
-            return (jsxRuntimeExports.jsx("div", { className: "text-sm text-gray-900", children: getDisplayValue(rowIndex, column) }));
+            // Display formatted value in view mode with color styling
+            const widgetType = column.widget || 'text';
+            const displayValue = getDisplayValue(rowIndex, column);
+            // For select widgets, use SelectDisplayValue component to show label
+            if (widgetType === 'select' && displayValue === null) {
+                const cellWidgetId = `${widgetConfig['widget-id']}-row-${rowIndex}-col-${columnKey}`;
+                const cellConfig = {
+                    ...column,
+                    'widget-id': cellWidgetId,
+                    'widget-label': '',
+                    'widget-readonly': true,
+                    'widget-data-path': undefined,
+                };
+                return (jsxRuntimeExports.jsx("div", { className: "text-sm", style: getCellStyle(), children: jsxRuntimeExports.jsx(SelectDisplayValue, { config: cellConfig, value: cellValue }) }));
+            }
+            return (jsxRuntimeExports.jsx("div", { className: "text-sm", style: getCellStyle(), children: displayValue }));
         }
     }, [isRowEditing, getCellValue, getDisplayValue, renderTableCell]);
     const tableWidgetId = `table-widget-${widgetConfig['widget-id']}`;
@@ -5248,11 +8066,13 @@ const TableWidget = ({ config }) => {
         .${tableWidgetId} button {
           border-radius: 10px !important;
         }
-      ` }), jsxRuntimeExports.jsxs("div", { className: `table-widget-container ${tableWidgetId}`, children: [confirmationState?.show && (jsxRuntimeExports.jsx("div", { className: "fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50", children: jsxRuntimeExports.jsxs("div", { className: "bg-white rounded-lg p-6 max-w-md w-full mx-4", children: [jsxRuntimeExports.jsx("h3", { className: "text-lg font-semibold mb-4", children: translate('table.confirm') || 'Confirm Action' }), jsxRuntimeExports.jsx("p", { className: "text-gray-700 mb-6", children: confirmationState.message }), jsxRuntimeExports.jsxs("div", { className: "flex justify-end gap-3", children: [jsxRuntimeExports.jsx("button", { onClick: confirmationState.onCancel, className: "px-4 py-2 text-sm font-medium text-gray-700 bg-gray-200 hover:bg-gray-300", style: { borderRadius: '15px' }, children: translate('common.cancel') || 'Cancel' }), jsxRuntimeExports.jsx("button", { onClick: confirmationState.onConfirm, className: "px-4 py-2 text-sm font-medium text-white bg-blue-600 hover:bg-blue-700", style: { borderRadius: '15px' }, children: translate('table.discard') || 'Discard & Continue' })] })] }) })), operations.add && !isReadonly && isEnabled && (jsxRuntimeExports.jsx("div", { className: "flex justify-end mb-2", children: jsxRuntimeExports.jsx("button", { type: "button", onClick: startAdd, disabled: loadingRowIndex !== null, className: "px-3 py-1 text-sm bg-blue-500 text-white hover:bg-blue-600 disabled:opacity-50 disabled:cursor-not-allowed", style: { borderRadius: '15px' }, children: translate('table.addRecord') || 'Add New Record' }) })), rows.length === 0 && !isAdding ? (jsxRuntimeExports.jsxs("div", { className: "text-gray-500 text-sm py-4 text-center border border-gray-300", style: { borderRadius: '15px' }, children: [translate('table.noData') || 'No records available.', operations.add && !isReadonly && ` ${translate('table.clickToAdd') || 'Click "Add New Record" to add one.'}`] })) : (jsxRuntimeExports.jsx("div", { className: "overflow-x-auto border border-gray-300", style: { borderRadius: '15px' }, children: jsxRuntimeExports.jsxs("table", { className: "min-w-full divide-y divide-gray-200", children: [jsxRuntimeExports.jsx("thead", { className: "bg-gray-50", children: jsxRuntimeExports.jsxs("tr", { children: [columns.map((col) => (jsxRuntimeExports.jsx("th", { className: "px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider", children: translateConfig(col['widget-label']) }, col['column-key']))), ((operations.edit || operations.remove) && !isReadonly) || isAnyRowEditing ? (jsxRuntimeExports.jsx("th", { className: "px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider", children: translate('common.actions') || 'Actions' })) : null] }) }), jsxRuntimeExports.jsxs("tbody", { className: "bg-white divide-y divide-gray-200", children: [rows.map((row, rowIndex) => {
+      ` }), jsxRuntimeExports.jsxs("div", { className: `table-widget-container ${tableWidgetId}`, children: [confirmationState?.show && (jsxRuntimeExports.jsx("div", { className: "fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50", children: jsxRuntimeExports.jsxs("div", { className: "bg-white rounded-lg p-6 max-w-md w-full mx-4", children: [jsxRuntimeExports.jsx("h3", { className: "text-lg font-semibold mb-4", children: translate('table.confirm') || 'Confirm Action' }), jsxRuntimeExports.jsx("p", { className: "text-gray-700 mb-6", children: confirmationState.message }), jsxRuntimeExports.jsxs("div", { className: "flex justify-end gap-3", children: [jsxRuntimeExports.jsx("button", { onClick: confirmationState.onCancel, className: "px-4 py-2 text-sm font-medium text-gray-700 bg-gray-200 hover:bg-gray-300", style: { borderRadius: '15px' }, children: translate('common.cancel') || 'Cancel' }), jsxRuntimeExports.jsx("button", { onClick: confirmationState.onConfirm, className: "px-4 py-2 text-sm font-medium text-white bg-blue-600 hover:bg-blue-700", style: { borderRadius: '15px' }, children: translate('table.discard') || 'Discard & Continue' })] })] }) })), operations.add && !isReadonly && isEnabled && (isSectionEditMode || !isAnyRowEditing) && (jsxRuntimeExports.jsx("div", { className: "flex justify-end mb-2", children: jsxRuntimeExports.jsx("button", { type: "button", onClick: startAdd, disabled: loadingRowIndex !== null, className: "px-3 py-1 text-sm bg-blue-500 text-white hover:bg-blue-600 disabled:opacity-50 disabled:cursor-not-allowed", style: { borderRadius: '15px' }, children: translate('table.addRecord') || 'Add New Record' }) })), rows.length === 0 && !isAdding ? (jsxRuntimeExports.jsxs("div", { className: "text-gray-500 text-sm py-4 text-center border border-gray-300", style: { borderRadius: '15px' }, children: [translate('table.noData') || 'No records available.', operations.add && !isReadonly && ` ${translate('table.clickToAdd') || 'Click "Add New Record" to add one.'}`] })) : (jsxRuntimeExports.jsx("div", { className: "overflow-x-auto border border-gray-300", style: { borderRadius: '15px' }, children: jsxRuntimeExports.jsxs("table", { className: "min-w-full divide-y divide-gray-200", children: [jsxRuntimeExports.jsx("thead", { className: "bg-gray-50", children: jsxRuntimeExports.jsxs("tr", { children: [columns.map((col) => (jsxRuntimeExports.jsx("th", { className: "px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider", children: translateConfig(col['widget-label']) }, col['column-key']))), ((operations.edit || operations.remove) && !isReadonly) || isAnyRowEditing || isSectionEditMode ? (jsxRuntimeExports.jsx("th", { className: "px-4 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider", children: translate('common.actions') || 'Actions' })) : null] }) }), jsxRuntimeExports.jsxs("tbody", { className: "bg-white divide-y divide-gray-200", children: [rows.map((row, rowIndex) => {
                                             const isEditing = isRowEditing(rowIndex);
                                             const isLoading = loadingRowIndex === rowIndex;
-                                            return (jsxRuntimeExports.jsxs("tr", { className: isEditing ? 'bg-blue-50' : isLoading ? 'opacity-50' : '', children: [columns.map((col) => (jsxRuntimeExports.jsx("td", { className: "px-4 py-3 whitespace-nowrap", children: renderCell(rowIndex, col) }, col['column-key']))), ((operations.edit || operations.remove) && !isReadonly) || isEditing ? (jsxRuntimeExports.jsx("td", { className: "px-4 py-3 whitespace-nowrap", style: { minWidth: '120px' }, children: isEditing && !isSectionEditMode ? (
-                                                        // Show Save/Cancel buttons only for manual row editing (not section edit mode)
+                                            return (jsxRuntimeExports.jsxs("tr", { className: isEditing ? 'bg-blue-50' : isLoading ? 'opacity-50' : row.edit_action === 'DELETE' ? 'bg-red-50' : '', children: [columns.map((col) => {
+                                                        return (jsxRuntimeExports.jsx("td", { className: "px-4 py-3 whitespace-nowrap", children: renderCell(rowIndex, col, row) }, col['column-key']));
+                                                    }), ((operations.edit || operations.remove) && !isReadonly) || isEditing || isSectionEditMode ? (jsxRuntimeExports.jsx("td", { className: "px-4 py-3 whitespace-nowrap", style: { minWidth: '120px' }, children: isEditing ? (
+                                                        // Show OK (Save)/Cancel buttons when row is being edited (works in both section edit mode and normal mode)
                                                         jsxRuntimeExports.jsxs("div", { className: "flex flex-row gap-2 items-center", style: { width: '100%' }, children: [jsxRuntimeExports.jsx("button", { type: "button", onClick: saveEdit, disabled: isLoading, className: "px-3 py-1 text-xs font-medium hover:bg-green-700 disabled:opacity-50 disabled:cursor-not-allowed whitespace-nowrap flex-shrink-0", style: {
                                                                         display: 'inline-block',
                                                                         minWidth: '60px',
@@ -5260,12 +8080,10 @@ const TableWidget = ({ config }) => {
                                                                         color: '#ffffff', // white text
                                                                         border: 'none',
                                                                         borderRadius: '15px'
-                                                                    }, children: "Save" }), jsxRuntimeExports.jsx("button", { type: "button", onClick: cancelEdit, disabled: isLoading, className: "px-3 py-1 text-xs font-medium bg-gray-200 text-gray-700 hover:bg-gray-300 disabled:opacity-50 disabled:cursor-not-allowed whitespace-nowrap flex-shrink-0", style: { display: 'inline-block', minWidth: '60px', borderRadius: '15px' }, children: "Cancel" })] })) : !isSectionEditMode ? (
-                                                        // Show Edit/Delete buttons only when not in section edit mode
-                                                        jsxRuntimeExports.jsxs("div", { className: "flex gap-2", children: [operations.edit && (jsxRuntimeExports.jsx("button", { type: "button", onClick: () => startEdit(rowIndex), disabled: isAnyRowEditing || isLoading, className: "px-3 py-1 text-xs text-blue-600 hover:text-blue-800 hover:bg-blue-50 disabled:opacity-50 disabled:cursor-not-allowed", style: { borderRadius: '15px' }, children: translate('common.edit') || 'Edit' })), operations.remove && (jsxRuntimeExports.jsx("button", { type: "button", onClick: () => deleteRow(rowIndex), disabled: isAnyRowEditing || isLoading, className: "px-3 py-1 text-xs text-red-600 hover:text-red-800 hover:bg-red-50 disabled:opacity-50 disabled:cursor-not-allowed", style: { borderRadius: '15px' }, children: translate('common.remove') || 'Delete' }))] })) : (
-                                                        // In section edit mode, show only Delete button if remove is enabled
-                                                        operations.remove && (jsxRuntimeExports.jsx("div", { className: "flex gap-2", children: jsxRuntimeExports.jsx("button", { type: "button", onClick: () => deleteRow(rowIndex), disabled: isLoading, className: "px-3 py-1 text-xs text-red-600 hover:text-red-800 hover:bg-red-50 disabled:opacity-50 disabled:cursor-not-allowed", style: { borderRadius: '15px' }, children: translate('common.remove') || 'Delete' }) }))) })) : null] }, rowIndex));
-                                        }), isAdding && newRowData && (jsxRuntimeExports.jsxs("tr", { className: "bg-blue-50", children: [columns.map((col) => (jsxRuntimeExports.jsx("td", { className: "px-4 py-3 whitespace-nowrap", children: renderCell(rows.length, col) }, col['column-key']))), jsxRuntimeExports.jsx("td", { className: "px-4 py-3 whitespace-nowrap", children: jsxRuntimeExports.jsxs("div", { className: "flex gap-2", children: [jsxRuntimeExports.jsx("button", { type: "button", onClick: saveAdd, disabled: loadingRowIndex === -1, className: "px-3 py-1 text-xs bg-green-600 text-white hover:bg-green-700 disabled:opacity-50", style: { borderRadius: '15px' }, children: translate('common.save') || 'Save' }), jsxRuntimeExports.jsx("button", { type: "button", onClick: () => {
+                                                                    }, children: translate('common.ok') || 'OK' }), jsxRuntimeExports.jsx("button", { type: "button", onClick: cancelEdit, disabled: isLoading, className: "px-3 py-1 text-xs font-medium bg-gray-200 text-gray-700 hover:bg-gray-300 disabled:opacity-50 disabled:cursor-not-allowed whitespace-nowrap flex-shrink-0", style: { display: 'inline-block', minWidth: '60px', borderRadius: '15px' }, children: translate('common.cancel') || 'Cancel' })] })) : (
+                                                        // Show Edit/Delete buttons when row is not being edited
+                                                        jsxRuntimeExports.jsxs("div", { className: "flex gap-2", children: [operations.edit && (jsxRuntimeExports.jsx("button", { type: "button", onClick: () => startEdit(rowIndex), disabled: isAnyRowEditing || isLoading, className: "px-3 py-1 text-xs text-blue-600 hover:text-blue-800 hover:bg-blue-50 disabled:opacity-50 disabled:cursor-not-allowed", style: { borderRadius: '15px' }, children: translate('common.edit') || 'Edit' })), operations.remove && (jsxRuntimeExports.jsx("button", { type: "button", onClick: () => deleteRow(rowIndex), disabled: isAnyRowEditing || isLoading, className: "px-3 py-1 text-xs text-red-600 hover:text-red-800 hover:bg-red-50 disabled:opacity-50 disabled:cursor-not-allowed", style: { borderRadius: '15px' }, children: translate('common.remove') || 'Delete' }))] })) })) : null] }, rowIndex));
+                                        }), isAdding && newRowData && (jsxRuntimeExports.jsxs("tr", { className: "bg-blue-50", children: [columns.map((col) => (jsxRuntimeExports.jsx("td", { className: "px-4 py-3 whitespace-nowrap", children: renderCell(rows.length, col, { ...newRowData, edit_action: 'ADD' }) }, col['column-key']))), jsxRuntimeExports.jsx("td", { className: "px-4 py-3 whitespace-nowrap", children: jsxRuntimeExports.jsxs("div", { className: "flex gap-2", children: [jsxRuntimeExports.jsx("button", { type: "button", onClick: saveAdd, disabled: loadingRowIndex === -1, className: "px-3 py-1 text-xs bg-green-600 text-white hover:bg-green-700 disabled:opacity-50", style: { borderRadius: '15px' }, children: translate('common.save') || 'Save' }), jsxRuntimeExports.jsx("button", { type: "button", onClick: () => {
                                                                     setIsAdding(false);
                                                                     setNewRowData(null);
                                                                 }, disabled: loadingRowIndex === -1, className: "px-3 py-1 text-xs bg-gray-200 text-gray-700 hover:bg-gray-300 disabled:opacity-50", style: { borderRadius: '15px' }, children: translate('common.cancel') || 'Cancel' })] }) })] }))] })] }) })), touched && error.length > 0 && (jsxRuntimeExports.jsx("p", { className: "text-red-500 text-sm mt-1", children: error[0] }))] })] }));
@@ -5926,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