@openg2p/registry-widgets 1.1.0-dev.0 → 1.1.0-dev.10

package/dist/index.js

@@ -246,24 +246,27 @@ const getValidationPattern = (validationType) => {
 };
 
 /**
- * Validate value against validation rules
+ * Validate value against validation rules.
+ *
+ * @param skipRequired - When true, required-field checks are skipped (used by
+ *   per-section Save/Next buttons so the user can move between sections without
+ *   filling every mandatory field; only format/range checks still run).
  */
-const validateWidget = (value, validation, required = false) => {
+const validateWidget = (value, validation, required = false, skipRequired = false) => {
     const errors = [];
     if (!validation && !required) {
         return errors;
     }
-    // Check required
-    const isRequired = validation?.required ?? required;
+    // Check required (skipped when navigating between sections)
+    const isRequired = !skipRequired && (validation?.required ?? required);
     // For boolean, false is a valid value, so only check for null/undefined/empty string
     const isEmpty = value === null || value === undefined || value === '';
     if (isRequired && isEmpty) {
         errors.push('This field is required');
         return errors; // Return early if required field is empty
     }
-    // Skip other validations if value is empty and not required
-    // Note: For boolean, false is a valid value, so we only skip if truly empty
-    if (isEmpty && !isRequired) {
+    // Skip format/range validations if value is empty
+    if (isEmpty) {
         return errors;
     }
     if (!validation) {
@@ -1005,6 +1008,19 @@ const getApiDataSource = async (dataSource, allValues, dataSourceRequestHandler,
             // If not found and doesn't contain dots, try as widget-id
             if ((depValue === null || depValue === undefined) && !dataSource.dependsOn.includes('.')) {
                 depValue = allValues[dataSource.dependsOn];
+                // Smart resolution: If not found at top level, try to find the dependency in the same nested object
+                // by looking for other keys in allValues that might contain the dependency.
+                // We look for objects that contain both the current widget's path (if we can guess it) and the dependency.
+                // But since we don't know the current widget's path here, we search for any object that has this dependency key.
+                if (depValue === null || depValue === undefined || depValue === '') {
+                    for (const val of Object.values(allValues)) {
+                        if (val && typeof val === 'object' && !Array.isArray(val) && dataSource.dependsOn in val) {
+                            depValue = val[dataSource.dependsOn];
+                            if (depValue !== null && depValue !== undefined && depValue !== '')
+                                break;
+                        }
+                    }
+                }
             }
             if (depValue === null || depValue === undefined || depValue === '') {
                 // If dependency is empty, return empty array
@@ -1048,8 +1064,8 @@ const getApiDataSource = async (dataSource, allValues, dataSourceRequestHandler,
             }
         }
         else if (staticParams.level_id) {
-            // First level has no parent
-            requestParams.parent_level_value_id = null;
+            // First level has no parent, send empty string as many OpenG2P APIs expect it
+            requestParams.parent_level_value_id = "";
         }
         // Get service mnemonic and endpoint (required)
         const service = dataSource.service;
@@ -1118,10 +1134,12 @@ const transformDataSourceOptions = (data, valueKey, labelKey) => {
             return { value: item, label: String(item) };
         });
     }
-    return data.map((item) => ({
-        value: item[valueKey],
-        label: item[labelKey] || String(item[valueKey]),
-    }));
+    return data.map((item) => {
+        const value = item[valueKey];
+        // Try multiple common label keys if the primary one is missing
+        const label = item[labelKey] || item.name || item.label || item.mnemonic || item.level_value_mnemonic || String(value);
+        return { value, label };
+    });
 };
 
 const WidgetEventBusContext = React.createContext(null);
@@ -1899,46 +1917,71 @@ const useBaseWidget = (options) => {
     const userHasSetValueRef = React.useRef(false);
     // Use ref for values to avoid stale closures in handleChange
     const valuesRef = React.useRef(values);
+    const loadingRef = React.useRef(loading);
+    const dataSourceOptionsRef = React.useRef(dataSourceOptions);
     React.useEffect(() => {
         valuesRef.current = values;
-    }, [values]);
+        loadingRef.current = loading;
+        dataSourceOptionsRef.current = dataSourceOptions;
+    }, [values, loading, dataSourceOptions]);
     // Track last dispatched value to prevent duplicate dispatches
     const lastDispatchedValueRef = React.useRef(null);
-    // Get current value
-    const currentValue = React.useMemo(() => {
-        if (isLayoutWidget) {
-            return undefined; // Layout widgets don't have values
+    // Helper to extract displayable value from object (especially geo hierarchy objects)
+    const extractValueFromObject = React.useCallback((obj) => {
+        if (!obj || typeof obj !== 'object' || Array.isArray(obj)) {
+            return obj;
         }
-        // Helper to extract displayable value from object (especially geo hierarchy objects)
-        const extractValueFromObject = (obj) => {
-            if (!obj || typeof obj !== 'object' || Array.isArray(obj)) {
-                return obj;
-            }
-            // Check for geo hierarchy structure first
-            if ('geo_code_hierarchy_json' in obj || 'geo_lowest_level_value_id' in obj) {
-                if ('geo_lowest_level_value_id' in obj) {
-                    return obj.geo_lowest_level_value_id;
+        // Check for geo hierarchy structure first
+        const geoConfig = config['widget-geo-config'];
+        if (geoConfig) {
+            // If we have a geo hierarchy object, extract the value for this specific level
+            const hierarchy = obj.hierarchy || obj.geo_code_hierarchy_json?.hierarchy;
+            if (Array.isArray(hierarchy)) {
+                const levelData = hierarchy.find((l) => l.level === geoConfig.level);
+                if (levelData) {
+                    return levelData.level_value_id;
                 }
-                // If it's a geo hierarchy object but no extractable ID, return undefined to avoid rendering object
-                return undefined;
             }
-            // Try common value fields
-            if ('value' in obj) {
-                return obj.value;
+        }
+        if ('geo_code_hierarchy_json' in obj || 'geo_lowest_level_value_id' in obj || 'hierarchy' in obj) {
+            if ('geo_lowest_level_value_id' in obj) {
+                return obj.geo_lowest_level_value_id;
             }
-            if ('id' in obj) {
-                return obj.id;
+            if ('lowest_level_value_id' in obj) {
+                return obj.lowest_level_value_id;
             }
-            if ('label' in obj) {
-                return obj.label;
+            // Fallback for nested geo_code_hierarchy_json
+            if (obj.geo_code_hierarchy_json?.lowest_level_value_id) {
+                return obj.geo_code_hierarchy_json.lowest_level_value_id;
             }
-            if ('name' in obj) {
-                return obj.name;
+            if (obj.geo_code_hierarchy_json?.geo_lowest_level_value_id) {
+                return obj.geo_code_hierarchy_json.geo_lowest_level_value_id;
             }
-            // If no extractable value found, return undefined to avoid rendering object as React child
-            // This prevents "Objects are not valid as a React child" errors
+            // If it's a geo hierarchy object but no extractable ID, return undefined to avoid rendering object
             return undefined;
-        };
+        }
+        // Try common value fields
+        if ('value' in obj) {
+            return obj.value;
+        }
+        if ('id' in obj) {
+            return obj.id;
+        }
+        if ('label' in obj) {
+            return obj.label;
+        }
+        if ('name' in obj) {
+            return obj.name;
+        }
+        // If no extractable value found, return undefined to avoid rendering object as React child
+        // This prevents "Objects are not valid as a React child" errors
+        return undefined;
+    }, [config]);
+    // Get current value
+    const currentValue = React.useMemo(() => {
+        if (isLayoutWidget) {
+            return undefined; // Layout widgets don't have values
+        }
         // 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];
@@ -1979,6 +2022,33 @@ const useBaseWidget = (options) => {
         }
         return value !== undefined ? value : config['widget-data-default'];
     }, [values, config, widgetId, isLayoutWidget]);
+    // Track the last value we attempted to mirror to prevent infinite loops
+    const lastMirroredValueRef = React.useRef(null);
+    // Mirror value from dataPath to widgetId in Redux state if it's not already there.
+    // This is essential for widgets that depend on this widget via 'dependsOn' using its widgetId,
+    // especially when the actual data is stored in a nested path.
+    // CRITICAL: This ensures that dependencies are resolved correctly when entering Edit mode.
+    React.useEffect(() => {
+        if (isLayoutWidget || !config['widget-data-path']) {
+            return;
+        }
+        const rawValue = getWidgetValue(values, config['widget-data-path'], widgetId);
+        if (rawValue !== undefined && rawValue !== null) {
+            const extractedValue = extractValueFromObject(rawValue);
+            // Only mirror if:
+            // 1. The top-level value is undefined (initial load or entering edit mode)
+            // 2. We haven't already tried to mirror this specific value (prevents loops if dispatch is ignored or delayed)
+            // 3. The extracted value is valid
+            if (values[widgetId] === undefined &&
+                extractedValue !== undefined &&
+                extractedValue !== null &&
+                lastMirroredValueRef.current !== extractedValue) {
+                lastMirroredValueRef.current = extractedValue;
+                dispatch(setValue({ widgetId, value: extractedValue }));
+            }
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [values, config['widget-data-path'], widgetId, isLayoutWidget]);
     // Initialize default value only once on mount (skip for layout widgets)
     React.useEffect(() => {
         if (isLayoutWidget) {
@@ -2001,6 +2071,20 @@ const useBaseWidget = (options) => {
         if (currentValue === newValue) {
             return;
         }
+        // CRITICAL FIX: Ignore auto-clears (empty string or undefined) from UI components 
+        // when the widget's data source is currently loading OR if options are empty.
+        // This prevents data disappearance when switching to Edit mode and components 
+        // incorrectly clear values before options load or if handler is temporarily missing.
+        if (newValue === '' || newValue === null || newValue === undefined) {
+            if (loadingRef.current) {
+                console.warn(`[useBaseWidget] Ignoring empty value for ${widgetId} because data source is loading`);
+                return;
+            }
+            if (config['widget-data-source']?.type === 'api' && dataSourceOptionsRef.current.length === 0) {
+                console.warn(`[useBaseWidget] Ignoring empty value for ${widgetId} because API options are empty`);
+                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;
@@ -2018,6 +2102,13 @@ const useBaseWidget = (options) => {
         }
         else {
             // Has dataPath: update both widgetId and dataPath
+            // CRITICAL: For geo widgets, we do NOT want to overwrite the shared hierarchy dataPath
+            // with a primitive value (the selected ID). The hierarchy object is managed by useGeoWidgetCascade.
+            if (config['widget-geo-config']) {
+                dispatch(setValue({ widgetId, value: newValue }));
+                return;
+            }
+            // For non-geo widgets, update both widgetId and dataPath
             // CRITICAL: Create updated values object with newValue already set
             // This prevents setWidgetValue from reading stale values
             const currentValuesWithUpdate = {
@@ -2112,6 +2203,17 @@ const useBaseWidget = (options) => {
     const apiService = dataSource?.type === 'api' ? dataSource.service : '';
     const apiEndpoint = dataSource?.type === 'api' ? dataSource.endpoint : '';
     const configKey = `${widgetId}-${isReadonly}-${dataSource?.type || 'none'}-${apiService}-${apiEndpoint}`;
+    // Extract dependency value using a granular selector to prevent unnecessary re-renders
+    // and infinite loops when other unrelated values in the state change.
+    const dependencyValue = reactRedux.useSelector((state) => {
+        if (dataSource?.type !== 'api' || !dataSource.dependsOn) {
+            return null;
+        }
+        if (dataSource.dependsOn.includes('.')) {
+            return getWidgetValue(state.widget.values, dataSource.dependsOn, '');
+        }
+        return state.widget.values[dataSource.dependsOn];
+    });
     // Handle data source loading
     React.useEffect(() => {
         if (!dataSource) {
@@ -2132,6 +2234,17 @@ const useBaseWidget = (options) => {
             }
             else {
                 depValue = values[dataSource.dependsOn];
+                // Smart resolution: If not found at top level, and current widget has a nested dataPath,
+                // try to find the dependency in the same nested object.
+                if ((depValue === undefined || depValue === null || depValue === '') &&
+                    typeof config['widget-data-path'] === 'string' &&
+                    config['widget-data-path'].includes('.')) {
+                    const pathParts = config['widget-data-path'].split('.');
+                    pathParts.pop(); // Remove current field name
+                    const prefix = pathParts.join('.');
+                    const tryPath = `${prefix}.${dataSource.dependsOn}`;
+                    depValue = getWidgetValue(values, tryPath, '');
+                }
             }
             // If dependency is empty, don't load (will load when dependency has value)
             if (depValue === null || depValue === undefined || depValue === '') {
@@ -2165,7 +2278,7 @@ const useBaseWidget = (options) => {
                     }
                     // Extract level_id from widget-geo-config.level if available
                     const levelId = geoConfig?.level;
-                    data = await getApiDataSource(dataSource, values, currentHandler, levelId);
+                    data = await getApiDataSource(dataSource, valuesRef.current, currentHandler, levelId);
                 }
                 else if (dataSource.type === 'schema') {
                     data = getSchemaDataSource(dataSource, schemaData || {});
@@ -2200,9 +2313,9 @@ const useBaseWidget = (options) => {
             }
         };
         loadDataSource();
-        // Use configKey to ensure effect runs when readonly state changes
+        // Use configKey and dependencyValue to ensure effect runs only when relevant state changes
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [configKey, values, dataSourceRequestHandler, schemaData, widgetId, dispatch]);
+    }, [configKey, dependencyValue, dataSourceRequestHandler, schemaData, widgetId, dispatch]);
     return {
         widgetId,
         value: currentValue,
@@ -2403,6 +2516,9 @@ const useGeoWidgetCascade = (options) => {
     const geoConfig = config['widget-geo-config'];
     const dataSource = config['widget-data-source'];
     const dataPath = config['widget-data-path'];
+    const groupId = typeof dataPath === 'string' && dataPath.includes('.')
+        ? dataPath.split('.').slice(0, -1).join('.')
+        : 'default';
     const valuesRef = React.useRef(values);
     const handlerRef = React.useRef(dataSourceRequestHandler);
     // Keep refs updated
@@ -2412,10 +2528,36 @@ const useGeoWidgetCascade = (options) => {
     }, [values, dataSourceRequestHandler]);
     // Get current value and data source options
     const currentValue = reactRedux.useSelector((state) => {
-        if (!dataPath) {
-            return state.widget.values[widgetId];
+        // Try to get value from widgetId first (most recent selection)
+        let value = state.widget.values[widgetId];
+        // If not found in widgetId, try dataPath
+        if (value === undefined && dataPath) {
+            value = getWidgetValue(state.widget.values, dataPath, widgetId);
+        }
+        // Extract value if it's a geo hierarchy object
+        if (value && typeof value === 'object' && !Array.isArray(value) && geoConfig) {
+            const hierarchy = value.hierarchy || value.geo_code_hierarchy_json?.hierarchy;
+            if (Array.isArray(hierarchy)) {
+                const levelData = hierarchy.find((l) => l.level === geoConfig.level);
+                if (levelData) {
+                    return levelData.level_value_id;
+                }
+            }
+            // Extended fallbacks (matching useBaseWidget)
+            if ('geo_lowest_level_value_id' in value) {
+                return value.geo_lowest_level_value_id;
+            }
+            if ('lowest_level_value_id' in value) {
+                return value.lowest_level_value_id;
+            }
+            if (value.geo_code_hierarchy_json?.lowest_level_value_id) {
+                return value.geo_code_hierarchy_json.lowest_level_value_id;
+            }
+            if (value.geo_code_hierarchy_json?.geo_lowest_level_value_id) {
+                return value.geo_code_hierarchy_json.geo_lowest_level_value_id;
+            }
         }
-        return getWidgetValue(state.widget.values, dataPath, widgetId);
+        return value;
     });
     // Memoize selector to avoid returning new array reference
     const dataSourceOptions = reactRedux.useSelector((state) => state.widget.dataSources[widgetId] ?? EMPTY_DATA_SOURCE);
@@ -2435,11 +2577,17 @@ const useGeoWidgetCascade = (options) => {
                 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];
+                // CRITICAL: Try to get parent value from event first, then from Redux
+                let parentValue = event.value;
+                if (parentValue === undefined || parentValue === null) {
+                    parentValue = currentValues[parentWidgetId];
+                    // If not found in top-level values, try to find it via dataPath or dependsOn
+                    if (parentValue === undefined && dataSource.dependsOn) {
+                        parentValue = getWidgetValue(currentValues, dataSource.dependsOn, '');
+                    }
+                }
                 // Remove this level and all below from hierarchy
-                geoHierarchyBuilder.removeLevelAndBelow(level);
+                geoHierarchyBuilder.removeLevelAndBelow(level, groupId);
                 // 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
@@ -2494,7 +2642,8 @@ const useGeoWidgetCascade = (options) => {
                     }
                 }
                 else {
-                    // If parent value is cleared, clear the data source
+                    // If parent value is cleared, clear the data source and hierarchy
+                    geoHierarchyBuilder.removeLevelAndBelow(level, groupId);
                     dispatch(setDataSource({ widgetId, data: [] }));
                 }
             };
@@ -2509,25 +2658,49 @@ const useGeoWidgetCascade = (options) => {
         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
+        // Skip if value is undefined (it might still be loading or rehydrating)
+        // ONLY clear hierarchy if the value is explicitly null or empty string (user action)
+        if (currentValue === null || currentValue === '') {
             const { level } = geoConfig;
-            geoHierarchyBuilder.removeLevelAndBelow(level);
+            geoHierarchyBuilder.removeLevelAndBelow(level, groupId);
+            // If we have a dataPath, we need to update Redux with the cleared hierarchy
+            if (dataPath) {
+                const hierarchyJson = geoHierarchyBuilder.buildHierarchyJson(groupId);
+                let finalUpdatedValues = valuesRef.current;
+                // Use logic similar to the build section below to update the dataPath
+                if (typeof dataPath === 'string' && dataPath.endsWith('.geo_code_hierarchy_json')) {
+                    const prefix = dataPath.substring(0, dataPath.lastIndexOf('.'));
+                    finalUpdatedValues = setWidgetValue(finalUpdatedValues, dataPath, widgetId, hierarchyJson?.geo_code_hierarchy_json);
+                    finalUpdatedValues = setWidgetValue(finalUpdatedValues, `${prefix}.geo_lowest_level_value_id`, widgetId, hierarchyJson?.geo_lowest_level_value_id);
+                }
+                else {
+                    finalUpdatedValues = setWidgetValue(finalUpdatedValues, dataPath, widgetId, hierarchyJson?.geo_code_hierarchy_json);
+                }
+                dispatch(setValues(finalUpdatedValues));
+            }
             return;
         }
+        if (currentValue === undefined) {
+            return; // Skip if undefined (still initializing)
+        }
         const { level, isLastLevel } = geoConfig;
-        // For last level, check if hierarchy is already built to prevent endless loops
-        if (isLastLevel && dataPath) {
+        // Check if hierarchy is already built to prevent endless loops
+        if (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
+            if (currentHierarchy && typeof currentHierarchy === 'object') {
+                // Check if this specific level's value matches the hierarchy
+                const hierarchyArray = currentHierarchy.hierarchy || currentHierarchy.geo_code_hierarchy_json?.hierarchy;
+                if (Array.isArray(hierarchyArray)) {
+                    const currentLevelValue = typeof currentValue === 'object'
+                        ? (currentValue.level_value_id || currentValue.id || currentValue.value)
+                        : currentValue;
+                    const levelData = hierarchyArray.find((l) => l.level === geoConfig.level);
+                    // If this level is already correctly represented in the hierarchy, skip rebuilding
+                    // String conversion ensures comparison works for mixed types
+                    if (levelData && String(levelData.level_value_id) === String(currentLevelValue)) {
+                        return;
+                    }
                 }
             }
         }
@@ -2550,23 +2723,31 @@ const useGeoWidgetCascade = (options) => {
             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);
+        geoHierarchyBuilder.removeLevelAndBelow(level, groupId);
         // 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();
+        geoHierarchyBuilder.addLevel(level, level_value_id, level_value_mnemonic, groupId);
+        // Build and store hierarchy JSON on every change
+        if (dataPath) {
+            const hierarchyJson = geoHierarchyBuilder.buildHierarchyJson(groupId);
             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 }));
-                });
+                // Fix: Avoid double nesting of geo_code_hierarchy_json
+                // If dataPath ends with .geo_code_hierarchy_json, we want to save the content directly to it
+                // and save the lowest level ID as a sibling
+                let finalUpdatedValues = valuesRef.current;
+                if (typeof dataPath === 'string' && dataPath.endsWith('.geo_code_hierarchy_json')) {
+                    const prefix = dataPath.substring(0, dataPath.lastIndexOf('.'));
+                    // Save hierarchy JSON content directly to dataPath (avoiding double nesting)
+                    finalUpdatedValues = setWidgetValue(finalUpdatedValues, dataPath, widgetId, hierarchyJson.geo_code_hierarchy_json);
+                    // Save lowest level ID as sibling
+                    finalUpdatedValues = setWidgetValue(finalUpdatedValues, `${prefix}.geo_lowest_level_value_id`, widgetId, hierarchyJson.geo_lowest_level_value_id);
+                }
+                else {
+                    // Fallback if path doesn't follow the naming convention
+                    finalUpdatedValues = setWidgetValue(finalUpdatedValues, dataPath, widgetId, hierarchyJson.geo_code_hierarchy_json);
+                }
+                // CRITICAL: Use setValues for deep merge instead of replacing root keys with setValue
+                // setWidgetValue returns the complete updated state object with all keys preserved
+                dispatch(setValues(finalUpdatedValues));
             }
         }
     }, [geoConfig, currentValue, widgetId, dataPath, dispatch, dataSourceOptions]);
@@ -3629,7 +3810,15 @@ const collectWidgets = (panels) => {
     });
     return widgets;
 };
-const sectionValidate = (section, currentSchemaData, dispatch) => {
+/**
+ * Validate all widgets in a section and dispatch errors to the store.
+ *
+ * @param skipRequired - When true, required-field checks (widget-required,
+ *   validation.required, document-required) are skipped. Use this for
+ *   per-section Save/Next navigation so the user can advance without filling
+ *   every mandatory field; only format/range errors are reported.
+ */
+const sectionValidate = (section, currentSchemaData, dispatch, skipRequired = false) => {
     const allWidgets = collectWidgets(section.panels);
     let isValid = true;
     for (const widget of allWidgets) {
@@ -3638,7 +3827,7 @@ const sectionValidate = (section, currentSchemaData, dispatch) => {
             continue;
         const widgetId = widget['widget-id'];
         const value = getWidgetValue(currentSchemaData, widget['widget-data-path'], widgetId);
-        const errors = validateWidget(value, widget['widget-data-validation'], widget['widget-required']);
+        const errors = validateWidget(value, widget['widget-data-validation'], widget['widget-required'], skipRequired);
         if (errors.length > 0) {
             isValid = false;
             dispatch(setTouched({ widgetId, touched: true }));
@@ -3649,10 +3838,10 @@ const sectionValidate = (section, currentSchemaData, dispatch) => {
             dispatch(setError({ widgetId, errors: [] }));
         }
     }
-    // Supporting Documents
+    // Supporting Documents — only check required when not skipping required validation
     section['section-supporting-documents']?.forEach((doc, index) => {
         const widgetId = `supporting-doc-${section['section-id']}-${index}`;
-        if (doc['document-required']) {
+        if (!skipRequired && doc['document-required']) {
             const file = getValueByPath(currentSchemaData, doc['document-data-path']);
             if (!file) {
                 isValid = false;
@@ -3671,6 +3860,85 @@ const sectionValidate = (section, currentSchemaData, dispatch) => {
     return isValid;
 };
 
+/** Table-style widgets that bind to an array path in the store / schema. */
+function isTableLikeWidget(widget) {
+    const w = widget.widget;
+    /** widget-type union in types omits legacy values like simple-table still used at runtime */
+    const t = widget['widget-type'];
+    return (w === 'table' ||
+        w === 'dialog-table' ||
+        w === 'simple-table' ||
+        t === 'table' ||
+        t === 'simple-table');
+}
+/**
+ * Resolve `records` for section save payloads.
+ * - Back-compat: path ending in `.records` (e.g. `regId.records`)
+ * - Else: first array snapshot at a string `widget-data-path` on a table-like widget
+ *   (e.g. `household.members` for dialog-table)
+ */
+function extractTableRecordsFromSnapshot(snapshot, sectionWidgets) {
+    const convention = Object.entries(snapshot).find(([key, value]) => key.endsWith('.records') && Array.isArray(value));
+    if (convention) {
+        return convention[1];
+    }
+    const tablePaths = [];
+    sectionWidgets.forEach((widget) => {
+        if (!isTableLikeWidget(widget))
+            return;
+        const p = widget['widget-data-path'];
+        if (typeof p === 'string' && p.length > 0) {
+            tablePaths.push(p);
+        }
+        else if (p && typeof p === 'object') {
+            Object.values(p).forEach((sub) => {
+                if (typeof sub === 'string' && sub.length > 0)
+                    tablePaths.push(sub);
+            });
+        }
+    });
+    for (const path of tablePaths) {
+        const val = snapshot[path];
+        if (Array.isArray(val)) {
+            return val;
+        }
+    }
+    return [];
+}
+
+/** Root class on readonly label/value rows; SectionRenderer scopes overflow/ellipsis rules here. */
+const READONLY_VALUE_ROW_ROOT_CLASSES = [
+    'TextDisplayWidget',
+    'TextAreaDisplayWidget',
+    'SelectDisplayWidget',
+    'PhoneDisplayWidget',
+    'NumberDisplayWidget',
+    'CurrencyDisplayWidget',
+    'RadioDisplayWidget',
+    'DateDisplayWidget',
+    'DateTimeDisplayWidget',
+    'CheckboxDisplayWidget',
+    'BooleanDisplayWidget',
+    'FileDisplayWidget',
+    'DisplayFieldWidget',
+];
+/** Rows whose value is one line in .flex-1 > .text-gray-900 (ellipsis; full string via title on the element). */
+const READONLY_SINGLE_LINE_VALUE_ROW_CLASSES = [
+    'TextDisplayWidget',
+    'SelectDisplayWidget',
+    'PhoneDisplayWidget',
+    'NumberDisplayWidget',
+    'CurrencyDisplayWidget',
+    'RadioDisplayWidget',
+    'DateDisplayWidget',
+    'DateTimeDisplayWidget',
+    'CheckboxDisplayWidget',
+    'BooleanDisplayWidget',
+    'DisplayFieldWidget',
+];
+function scopedClassSelectors(sectionClassId, classNames) {
+    return classNames.map((c) => `.${sectionClassId} .${c}`).join(',\n        ');
+}
 /**
  * Renders a section with its panels
  *
@@ -3699,41 +3967,22 @@ const SectionRenderer = ({ section, dataSourceRequestHandler: propDataSourceRequ
         }
         return section;
     }, [section, namespace]);
-    // Create namespaced schemaData if namespace is provided
-    // This ensures widgets can read initial values from schemaData at namespaced paths
+    // Create namespaced schemaData if namespace is provided.
+    // Widgets with namespaced data-paths (e.g. "rv-section-0.a1a4d25a.birth_date")
+    // need a nested object at values[namespace] so getValueByPath can traverse it.
     const namespacedSchemaData = React.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;
+        return { ...currentSchemaData, [namespace]: currentSchemaData };
     }, [namespace, schemaData, currentSchemaData]);
+    // Populate the store with namespaced schema data so that namespaced widgets
+    // can read their initial values via getValueByPath on the namespaced paths.
+    React.useEffect(() => {
+        if (namespace && namespacedSchemaData) {
+            dispatch(setValues(namespacedSchemaData));
+        }
+    }, [namespace, namespacedSchemaData, dispatch]);
     const crViewData = React.useMemo(() => {
         if (mode !== 'CRView')
             return null;
@@ -3756,21 +4005,25 @@ const SectionRenderer = ({ section, dataSourceRequestHandler: propDataSourceRequ
     const sectionId = sectionToRender['section-id'];
     const gridId = `section-panels-${sectionId}`;
     const sectionClassId = `section-${sectionId}`;
+    const readonlyValueRowRootsCss = React.useMemo(() => scopedClassSelectors(sectionClassId, READONLY_VALUE_ROW_ROOT_CLASSES), [sectionClassId]);
+    const readonlyValueRowFlex1Css = React.useMemo(() => READONLY_VALUE_ROW_ROOT_CLASSES.map((c) => `.${sectionClassId} .${c} > .flex-1`).join(',\n        '), [sectionClassId]);
+    const readonlySingleLineValueTextCss = React.useMemo(() => READONLY_SINGLE_LINE_VALUE_ROW_CLASSES.map((c) => `.${sectionClassId} .${c} > .flex-1 > .text-gray-900`).join(',\n        '), [sectionClassId]);
     // IntakeForm mode: accordion expand/collapse state (supports toggle)
     const [standaloneExpanded, setStandaloneExpanded] = React.useState(true); // For sectionIndex undefined (standalone use)
     const isExpandedFromContainer = typeof sectionIndex === 'number' && expandedSectionIndex === sectionIndex;
     const isExpandedStandalone = sectionIndex === undefined && standaloneExpanded;
     const isExpanded = mode === 'IntakeForm' && (isExpandedFromContainer || isExpandedStandalone);
+    // When the section is managed by SectionsContainer (sectionIndex is set), header clicks are
+    // disabled — navigation is only allowed via the Next / Previous buttons.
+    // Standalone usage (sectionIndex undefined) keeps the classic toggle behaviour.
     const handleAccordionToggle = React.useCallback(() => {
         if (mode !== 'IntakeForm')
             return;
-        if (typeof sectionIndex === 'number' && onExpandSection) {
-            onExpandSection(sectionIndex);
-        }
-        else if (sectionIndex === undefined) {
+        if (sectionIndex === undefined) {
             setStandaloneExpanded(prev => !prev);
         }
-    }, [mode, sectionIndex, onExpandSection]);
+        // Intentionally no-op when sectionIndex is set (managed by SectionsContainer)
+    }, [mode, sectionIndex]);
     // 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
@@ -4019,9 +4272,7 @@ const SectionRenderer = ({ section, dataSourceRequestHandler: propDataSourceRequ
             const widgetPath = widget['widget-data-path'];
             if (!widgetPath)
                 return;
-            if (widget['widget-type'] === 'table' ||
-                widget['widget-type'] === 'simple-table' ||
-                widget['widget'] === 'table') {
+            if (isTableLikeWidget(widget)) {
                 hasTable = true;
             }
             if (typeof widgetPath === 'object') {
@@ -4056,8 +4307,7 @@ const SectionRenderer = ({ section, dataSourceRequestHandler: propDataSourceRequ
                 },
             ];
         }
-        const tableEntry = Object.entries(snapshot).find(([key, value]) => key.endsWith('.records') && Array.isArray(value));
-        return tableEntry ? tableEntry[1] : [];
+        return extractTableRecordsFromSnapshot(snapshot, widgets);
     };
     // Get original section (without namespace) for building snapshots
     // This ensures we use the original data paths when saving
@@ -4108,6 +4358,8 @@ const SectionRenderer = ({ section, dataSourceRequestHandler: propDataSourceRequ
     const baselineSnapshotRef = React.useRef(null);
     // IntakeForm only: increment when baseline is updated after save - forces badge to update (refs don't trigger re-renders)
     const [intakeFormBaselineTrigger, setIntakeFormBaselineTrigger] = React.useState(0);
+    // IntakeForm only: tracks whether the user has actually saved this section (prevents "Saved" badge on initial load)
+    const [hasBeenSavedByUser, setHasBeenSavedByUser] = React.useState(false);
     // IntakeForm: treat as edit mode for dirty tracking when isDraft. RegistryView: use isEditMode.
     const effectiveEditModeForDirty = mode === 'IntakeForm' ? (isDraft !== false) : isEditMode;
     // Compute isDirty: compare current store state to baseline (only when in edit mode)
@@ -4150,18 +4402,68 @@ const SectionRenderer = ({ section, dataSourceRequestHandler: propDataSourceRequ
     const intakeFormSectionStatus = React.useMemo(() => {
         if (mode !== 'IntakeForm' || isDraft === false)
             return null;
-        const hasValue = (v) => v !== undefined && v !== null && (typeof v !== 'string' || v.trim().length > 0);
-        const currentSnapshot = buildSectionSnapshot(storeValues, namespace);
-        const record = currentSnapshot.records?.[0];
-        const hasData = record &&
-            typeof record === 'object' &&
-            Object.values(record).some((v) => hasValue(v));
         if (isDirty)
             return 'modified';
-        if (hasData)
+        if (hasBeenSavedByUser)
             return 'saved';
         return null;
-    }, [mode, isDirty, storeValues, namespace, buildSectionSnapshot]);
+    }, [mode, isDirty, hasBeenSavedByUser]);
+    // Revert store values to the original schemaData for this section's widgets.
+    // Used by both handleSave (RegistryView raises a CR, so values should not persist)
+    // and handleCancel.
+    const revertToOriginalValues = React.useCallback(() => {
+        const sectionWidgets = collectWidgets(originalSection.panels);
+        const oldSchemaData = schemaData || contextSchemaData;
+        const currentStoreValues = store.getState().widget.values;
+        let newStoreValues = currentStoreValues;
+        sectionWidgets.forEach(widget => {
+            const originalWidgetId = widget['widget-id'];
+            const namespacedWidgetId = namespace ? `${namespace}__${originalWidgetId}` : originalWidgetId;
+            const widgetId = namespacedWidgetId;
+            const originalDataPath = widget['widget-data-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) {
+                let oldValue;
+                if (typeof originalDataPath === 'object') {
+                    oldValue = {};
+                    Object.entries(originalDataPath).forEach(([key, path]) => {
+                        if (typeof path === 'string') {
+                            oldValue[key] = getValueByPath(oldSchemaData, path);
+                        }
+                    });
+                }
+                else if (typeof originalDataPath === 'string') {
+                    oldValue = getValueByPath(oldSchemaData, originalDataPath);
+                }
+                if (oldValue !== undefined) {
+                    newStoreValues = setWidgetValue(newStoreValues, storeDataPath, widgetId, oldValue);
+                    // Also revert the widgetId-based entry — useBaseWidget.handleChange
+                    // sets values[widgetId] during editing, and useBaseWidget.currentValue
+                    // reads values[widgetId] first before falling through to the dataPath.
+                    newStoreValues = { ...newStoreValues, [widgetId]: oldValue };
+                }
+            }
+        });
+        if (hasSupportingDocuments) {
+            const originalSupportingDocuments = originalSection['section-supporting-documents'] || [];
+            originalSupportingDocuments.forEach((doc, index) => {
+                const widgetId = `supporting-doc-${sectionId}-${index}`;
+                const originalDataPath = doc['document-data-path'];
+                const storeDataPath = namespace && originalDataPath
+                    ? `${namespace}.${originalDataPath}`
+                    : originalDataPath;
+                const oldValue = getValueByPath(oldSchemaData, originalDataPath);
+                newStoreValues = setWidgetValue(newStoreValues, storeDataPath, widgetId, oldValue);
+            });
+        }
+        if (newStoreValues !== currentStoreValues) {
+            dispatch(setValues(newStoreValues));
+        }
+    }, [originalSection, schemaData, contextSchemaData, store, namespace, hasSupportingDocuments, sectionId, dispatch]);
     // Handle save button click
     const handleSave = async () => {
         if (!store || !onSectionSave) {
@@ -4175,7 +4477,7 @@ const SectionRenderer = ({ section, dataSourceRequestHandler: propDataSourceRequ
         const sectionWidgets = collectWidgets(originalSection.panels);
         const currentState = store.getState().widget;
         const currentSchemaData = currentState.values || {};
-        const isSectionValid = sectionValidate(originalSection, currentSchemaData, dispatch);
+        const isSectionValid = sectionValidate(originalSection, currentSchemaData, dispatch, true);
         if (!isSectionValid) {
             return;
         }
@@ -4198,12 +4500,24 @@ const SectionRenderer = ({ section, dataSourceRequestHandler: propDataSourceRequ
             });
         }
         if (JSON.stringify(oldSchemaData) !== JSON.stringify(newSchemaData)) {
+            let profileImage = null;
+            for (const record of newSchemaData) {
+                if (typeof record === 'object' && record !== null) {
+                    for (const [key, value] of Object.entries(record)) {
+                        if (value instanceof File) {
+                            profileImage = value;
+                            record[key] = '';
+                        }
+                    }
+                }
+            }
             try {
                 const sectionchanges = {
                     section_id: dbSectionId ?? originalSection['section-id'],
                     section_register_id: sectionRegisterId,
                     records: [...newSchemaData],
-                    files: [...sectionFiles]
+                    files: [...sectionFiles],
+                    ...(profileImage ? { image: profileImage } : {}),
                 };
                 await onSectionSave(sectionchanges);
             }
@@ -4211,6 +4525,12 @@ const SectionRenderer = ({ section, dataSourceRequestHandler: propDataSourceRequ
                 console.error('Section Changes Save failed', error);
             }
         }
+        // In RegistryView, save raises a CR — the actual data update follows a
+        // separate approval workflow, so revert the displayed values to the
+        // originals so the view doesn't show unapproved edits.
+        if (mode === 'RegistryView') {
+            revertToOriginalValues();
+        }
         setIsEditMode(false);
         onEditModeChange?.(originalSectionId, false);
     };
@@ -4223,7 +4543,7 @@ const SectionRenderer = ({ section, dataSourceRequestHandler: propDataSourceRequ
             const sectionWidgets = collectWidgets(originalSection.panels);
             const currentState = store.getState().widget;
             const currentSchemaData = currentState.values || {};
-            const isSectionValid = sectionValidate(originalSection, currentSchemaData, dispatch);
+            const isSectionValid = sectionValidate(originalSection, currentSchemaData, dispatch, true);
             if (!isSectionValid)
                 return;
             const oldSchemaData = schemaData || contextSchemaData;
@@ -4240,12 +4560,24 @@ const SectionRenderer = ({ section, dataSourceRequestHandler: propDataSourceRequ
                 });
             }
             if (JSON.stringify(oldSchemaData) !== JSON.stringify(newSchemaData)) {
+                let profileImage = null;
+                for (const record of newSchemaData) {
+                    if (typeof record === 'object' && record !== null) {
+                        for (const [key, value] of Object.entries(record)) {
+                            if (value instanceof File) {
+                                profileImage = value;
+                                record[key] = '';
+                            }
+                        }
+                    }
+                }
                 try {
                     await onSectionSave({
                         section_id: dbSectionId ?? originalSection['section-id'],
                         section_register_id: sectionRegisterId,
                         records: [...newSchemaData],
                         files: [...sectionFiles],
+                        ...(profileImage ? { image: profileImage } : {}),
                     });
                 }
                 catch (error) {
@@ -4256,6 +4588,7 @@ const SectionRenderer = ({ section, dataSourceRequestHandler: propDataSourceRequ
             if (mode === 'IntakeForm') {
                 baselineSnapshotRef.current = buildSectionSnapshot(currentSchemaData, namespace);
                 setIntakeFormBaselineTrigger((prev) => prev + 1);
+                setHasBeenSavedByUser(true);
             }
             onSectionDirtyChange?.(sectionId, false);
         }
@@ -4264,64 +4597,7 @@ const SectionRenderer = ({ section, dataSourceRequestHandler: propDataSourceRequ
     }, [store, onSectionSave, onSectionSaveSuccess, sectionIndex, originalSection, schemaData, contextSchemaData, namespace, hasSupportingDocuments, dbSectionId, sectionRegisterId, dispatch, buildSectionSnapshot, sectionId, onSectionDirtyChange, mode, isDraft]);
     // Handle cancel button click
     const handleCancel = () => {
-        // Revert values in store to original schema data
-        // 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 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 originalDataPath === 'object') {
-                    // Multi-path: get values for each path
-                    oldValue = {};
-                    Object.entries(originalDataPath).forEach(([key, path]) => {
-                        if (typeof path === 'string') {
-                            oldValue[key] = getValueByPath(oldSchemaData, path);
-                        }
-                    });
-                }
-                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, storeDataPath, widgetId, oldValue);
-                }
-            }
-        });
-        // Also revert supporting documents if any
-        if (hasSupportingDocuments) {
-            // 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 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) {
-            dispatch(setValues(newStoreValues));
-        }
+        revertToOriginalValues();
         setIsEditMode(false);
         onEditModeChange?.(originalSectionId, false);
     };
@@ -4372,20 +4648,27 @@ const SectionRenderer = ({ section, dataSourceRequestHandler: propDataSourceRequ
           white-space: nowrap !important;
         }
         /* Readonly: prevent flex row from overflowing panel */
-        .${sectionClassId} .TextDisplayWidget {
+        ${readonlyValueRowRootsCss} {
           min-width: 0 !important;
           overflow: hidden !important;
         }
-        .${sectionClassId} .TextDisplayWidget > .flex-1 {
+        ${readonlyValueRowFlex1Css} {
           min-width: 0 !important;
           overflow: hidden !important;
         }
-        /* Readonly value text truncation */
-        .${sectionClassId} .TextDisplayWidget > .flex-1 > .text-gray-900 {
+        /* Readonly value: single-line ellipsis; full value via title on the value node */
+        ${readonlySingleLineValueTextCss} {
           overflow: hidden;
           text-overflow: ellipsis;
           white-space: nowrap;
         }
+        /* Readonly textarea: break unbroken long tokens; title on pre keeps full text on hover */
+        .${sectionClassId} .TextAreaDisplayWidget > .flex-1 > pre {
+          min-width: 0;
+          max-width: 100%;
+          overflow-wrap: anywhere;
+          word-break: break-word;
+        }
         
         /* Only apply fixed height when in edit mode */
         .${sectionClassId}[data-edit-mode="true"] {
@@ -4509,6 +4792,10 @@ const SectionRenderer = ({ section, dataSourceRequestHandler: propDataSourceRequ
           gap: 0.5rem;
         }
 
+        
+
+        
+
         /* IntakeForm accordion */
         .${sectionClassId}.intake-form-accordion-item {
           border-color: var(--owt-color-border-light, #E4E4E4);
@@ -4523,13 +4810,17 @@ const SectionRenderer = ({ section, dataSourceRequestHandler: propDataSourceRequ
         .${sectionClassId}.intake-form-accordion-item .intake-form-accordion-header h2 {
           color: var(--owt-color-primary-dark, #F07B1A);
         }
-        .${sectionClassId}.intake-form-accordion-item .intake-form-accordion-header:hover {
+        /* Hover / focus only shown when the header is actually interactive (standalone mode) */
+        .${sectionClassId}.intake-form-accordion-item .intake-form-accordion-header[data-interactive="true"]:hover {
           opacity: 0.85;
         }
-        .${sectionClassId}.intake-form-accordion-item .intake-form-accordion-header:focus-visible {
+        .${sectionClassId}.intake-form-accordion-item .intake-form-accordion-header[data-interactive="true"]:focus-visible {
           outline: 2px solid var(--owt-color-primary, #F5BB1A);
           outline-offset: 2px;
         }
+        .${sectionClassId}.intake-form-accordion-item .intake-form-accordion-header[data-interactive="false"]:focus-visible {
+          outline: none;
+        }
         .${sectionClassId}.intake-form-accordion-item .intake-form-accordion-content {
           padding-top: 8px;
           padding-bottom: 0px;
@@ -4572,7 +4863,7 @@ const SectionRenderer = ({ section, dataSourceRequestHandler: propDataSourceRequ
                     }),
                 }, children: mode === 'IntakeForm' ? (
                 /* IntakeForm: accordion layout - header always visible, content only when expanded */
-                jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsxs("button", { type: "button", id: `intake-form-accordion-header-${sectionId}`, className: "intake-form-accordion-header", onClick: handleAccordionToggle, "aria-expanded": isExpanded, "aria-controls": isExpanded ? `intake-form-accordion-content-${sectionId}` : undefined, style: {
+                jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsxs("button", { type: "button", id: `intake-form-accordion-header-${sectionId}`, className: "intake-form-accordion-header", onClick: handleAccordionToggle, "aria-expanded": isExpanded, "aria-controls": isExpanded ? `intake-form-accordion-content-${sectionId}` : undefined, "data-interactive": sectionIndex === undefined ? 'true' : 'false', style: {
                                 width: '100%',
                                 display: 'flex',
                                 alignItems: 'flex-start',
@@ -4582,7 +4873,7 @@ const SectionRenderer = ({ section, dataSourceRequestHandler: propDataSourceRequ
                                 marginBottom: 0,
                                 background: 'none',
                                 border: 'none',
-                                cursor: 'pointer',
+                                cursor: sectionIndex === undefined ? 'pointer' : 'default',
                                 textAlign: 'left',
                                 fontFamily: 'Roboto, sans-serif',
                             }, children: [jsxRuntimeExports.jsxs("div", { style: { flex: 1, display: 'flex', alignItems: 'center', gap: '12px', minWidth: 0 }, children: [jsxRuntimeExports.jsx("h2", { className: "text-xl font-semibold", style: { margin: 0 }, children: sectionToRender['section-title']
@@ -4713,7 +5004,7 @@ const SectionRenderer = ({ section, dataSourceRequestHandler: propDataSourceRequ
                                                             }, children: crViewData.approvedDate }))] })] })] })), mode === 'RegistryView' && !hideEditButton && (jsxRuntimeExports.jsx("hr", { className: "w-full", style: { height: '1px', marginTop: !isEditMode ? '10px' : 0, marginBottom: '14px', border: 'none', backgroundColor: 'var(--owt-color-border, #C4C4C4)' } })), mode === 'RegistryView' && !isEditMode && !hideEditButton && (jsxRuntimeExports.jsx("div", { className: "flex justify-center items-center", style: { marginBottom: '20px' }, children: jsxRuntimeExports.jsxs("button", { onClick: handleEdit, className: "font-normal inline-flex items-center gap-2 bg-transparent border-0 p-0 cursor-pointer hover:opacity-80", style: {
                                             fontFamily: 'Roboto, sans-serif',
                                             fontSize: '16px',
-                                            color: 'var(--owt-color-text-muted, #727474)'
+                                            color: 'var(--owt-color-text-muted, #727474)',
                                         }, children: [translate('common.editDetails') || 'Edit Details', jsxRuntimeExports.jsx("img", { src: img$8, alt: "right-arrow", className: "w-3.5 h-3.5 brightness-0 opacity-50" })] }) }))] })] })) })] }));
 };
 
@@ -4730,10 +5021,7 @@ function buildSectionChanges(section, storeValues, namespace, options) {
         const widgetPath = widget['widget-data-path'];
         if (!widgetPath)
             return;
-        const widgetType = widget['widget-type'];
-        if (widgetType === 'table' ||
-            widgetType === 'simple-table' ||
-            widget.widget === 'table') {
+        if (isTableLikeWidget(widget)) {
             hasTable = true;
         }
         if (typeof widgetPath === 'object') {
@@ -4771,8 +5059,7 @@ function buildSectionChanges(section, storeValues, namespace, options) {
         ];
     }
     else {
-        const tableEntry = Object.entries(snapshot).find(([key, value]) => key.endsWith('.records') && Array.isArray(value));
-        records = tableEntry ? tableEntry[1] : [];
+        records = extractTableRecordsFromSnapshot(snapshot, sectionWidgets);
     }
     const files = [];
     const supportingDocs = section['section-supporting-documents'] || [];
@@ -4798,7 +5085,9 @@ const hasTableWidget = (panels) => {
         // Check widgets in this panel
         if (panel.widgets) {
             for (const widget of panel.widgets) {
-                if (widget.widget === 'table' || widget['widget-type'] === 'table') {
+                if (widget.widget === 'table' ||
+                    widget.widget === 'dialog-table' ||
+                    widget['widget-type'] === 'table') {
                     return true;
                 }
             }
@@ -4820,7 +5109,9 @@ const getTableWidgetColumnSpan = (panels) => {
         // Check widgets in this panel
         if (panel.widgets) {
             for (const widget of panel.widgets) {
-                if (widget.widget === 'table' || widget['widget-type'] === 'table') {
+                if (widget.widget === 'table' ||
+                    widget.widget === 'dialog-table' ||
+                    widget['widget-type'] === 'table') {
                     // Return the widget's column span if specified, otherwise null
                     return widget['widget-column-span'] || null;
                 }
@@ -4887,6 +5178,13 @@ const SectionsContainer = ({ sections, dataSourceRequestHandler: propDataSourceR
     }, []);
     const safeSections = sections ?? [];
     const prevSectionsLengthRef = React.useRef(safeSections.length);
+    // Stable ref for namespace so formHandle useMemo doesn't depend on the (possibly inline) function identity
+    const namespaceRef = React.useRef(namespace);
+    namespaceRef.current = namespace;
+    // Stable refs so formHandle closure can access current mode and accordion setter without stale captures
+    const modeRef = React.useRef(mode);
+    modeRef.current = mode;
+    const setExpandedSectionIndexRef = React.useRef(setExpandedSectionIndex);
     // Track dirty (unsaved changes) per section for form handle validation
     const sectionDirtyMapRef = React.useRef({});
     const handleSectionDirtyChange = React.useCallback((sectionId, isDirty) => {
@@ -4932,11 +5230,14 @@ const SectionsContainer = ({ sections, dataSourceRequestHandler: propDataSourceR
     // Form handle for onFormReady - allows host to validate and get all section data from its own Submit button
     const formHandle = React.useMemo(() => {
         const getValues = () => store.getState().widget?.values || {};
-        const getNamespace = (section, index) => namespace
-            ? typeof namespace === 'string'
-                ? namespace
-                : namespace(section['section-id'], index)
-            : undefined;
+        const getNamespace = (section, index) => {
+            const ns = namespaceRef.current;
+            return ns
+                ? typeof ns === 'string'
+                    ? ns
+                    : ns(section['section-id'], index)
+                : undefined;
+        };
         const checkNoUnsavedChanges = () => {
             const hasDirty = Object.values(sectionDirtyMapRef.current).some(Boolean);
             if (hasDirty) {
@@ -4945,33 +5246,52 @@ const SectionsContainer = ({ sections, dataSourceRequestHandler: propDataSourceR
         };
         return {
             validate: async () => {
-                checkNoUnsavedChanges();
+                if (modeRef.current !== 'IntakeForm')
+                    checkNoUnsavedChanges();
                 const values = getValues();
                 let allValid = true;
+                let firstInvalidIndex = null;
                 for (let i = 0; i < safeSections.length; i++) {
                     const section = safeSections[i];
                     const ns = getNamespace(section, i);
                     const sectionToValidate = ns ? namespaceSectionConfig(section, ns) : section;
                     const valid = sectionValidate(sectionToValidate, values, dispatch);
-                    if (!valid)
+                    if (!valid) {
+                        if (firstInvalidIndex === null)
+                            firstInvalidIndex = i;
                         allValid = false;
+                    }
+                }
+                if (!allValid && modeRef.current === 'IntakeForm' && firstInvalidIndex !== null) {
+                    setExpandedSectionIndexRef.current(firstInvalidIndex);
                 }
                 return allValid;
             },
             getFormData: () => getValues(),
             validateAndGetData: async () => {
-                checkNoUnsavedChanges();
+                if (modeRef.current !== 'IntakeForm')
+                    checkNoUnsavedChanges();
                 const values = getValues();
                 const results = [];
+                let firstInvalidIndex = null;
                 for (let i = 0; i < safeSections.length; i++) {
                     const section = safeSections[i];
                     const ns = getNamespace(section, i);
                     const sectionToValidate = ns ? namespaceSectionConfig(section, ns) : section;
                     const valid = sectionValidate(sectionToValidate, values, dispatch);
                     if (!valid) {
-                        throw new Error('Validation failed');
+                        if (firstInvalidIndex === null)
+                            firstInvalidIndex = i;
                     }
-                    results.push(buildSectionChanges(section, values, ns));
+                    else {
+                        results.push(buildSectionChanges(section, values, ns));
+                    }
+                }
+                if (firstInvalidIndex !== null) {
+                    if (modeRef.current === 'IntakeForm') {
+                        setExpandedSectionIndexRef.current(firstInvalidIndex);
+                    }
+                    throw new Error('Validation failed. Please fix the errors and try again.');
                 }
                 return results;
             },
@@ -4986,7 +5306,7 @@ const SectionsContainer = ({ sections, dataSourceRequestHandler: propDataSourceR
                 return results;
             },
         };
-    }, [store, dispatch, safeSections, namespace]);
+    }, [store, dispatch, safeSections]);
     // Call onFormReady when form is ready (sections loaded)
     React.useEffect(() => {
         if (onFormReady && safeSections.length > 0) {
@@ -8270,10 +8590,10 @@ const DisplayWidget = ({ config }) => {
     const label = translateConfig(widgetConfig['widget-label']);
     // If no label, render as paragraph text
     if (!label || label.trim() === '') {
-        return (jsxRuntimeExports.jsx("div", { className: "mb-3 text-base text-gray-700", title: String(displayValue ?? ''), children: displayValue }));
+        return (jsxRuntimeExports.jsx("div", { className: "DisplayFieldWidget mb-3 min-w-0 w-full overflow-hidden text-ellipsis whitespace-nowrap text-base text-gray-700", title: String(displayValue ?? ''), children: displayValue }));
     }
-    // With label, render as key-value pair
-    return (jsxRuntimeExports.jsxs("div", { className: "mb-[10px] flex flex-col sm:flex-row sm:items-start", children: [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' }, title: label, children: [label, ":"] }), jsxRuntimeExports.jsx("div", { className: "flex-1 text-base text-gray-900 font-medium", title: String(displayValue ?? ''), children: displayValue })] }));
+    // With label, render as key-value pair (structure matches other readonly widgets for SectionRenderer ellipsis)
+    return (jsxRuntimeExports.jsxs("div", { className: "mb-[10px] DisplayFieldWidget flex flex-col sm:flex-row sm:items-start", children: [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' }, title: label, children: [label, ":"] }), jsxRuntimeExports.jsx("div", { className: "flex-1 min-w-0", children: jsxRuntimeExports.jsx("div", { className: "text-base text-gray-900 font-medium", title: String(displayValue ?? ''), children: displayValue }) })] }));
 };
 
 const TableCellSelect = ({ config, value, onValueChange }) => {
@@ -8287,7 +8607,7 @@ const TableCellSelect = ({ config, value, onValueChange }) => {
             backgroundColor: isReadonly || loading ? 'var(--owt-color-bg-alt, #F6F6F6)' : 'var(--owt-color-bg, #FFFFFF)',
         }, 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 SelectDisplayValue$1 = ({ config, value }) => {
     const { dataSourceOptions, loading } = useBaseWidget({ config });
     if (loading) {
         return jsxRuntimeExports.jsx("span", { children: "-" });
@@ -8781,7 +9101,7 @@ const TableWidget = ({ config }) => {
                     '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: jsxRuntimeExports.jsx(SelectDisplayValue$1, { config: cellConfig, value: cellValue }) }));
             }
             return (jsxRuntimeExports.jsx("div", { className: "text-sm", style: getCellStyle(), children: displayValue }));
         }
@@ -8920,38 +9240,297 @@ const TableWidget = ({ config }) => {
                                                                 }, children: translate('common.cancel') || 'Cancel' })] }) })] }))] })] }) }), touched && error.length > 0 && (jsxRuntimeExports.jsx("p", { className: "text-sm mt-1", style: { color: 'var(--owt-widget-error-color, #B91C1C)' }, children: error[0] }))] })] }));
 };
 
-const ProfileWidget = ({ config }) => {
-    const { value, config: widgetConfig, getFieldValue, } = useBaseWidget({ config });
-    const { translateConfig } = useWidgetTranslation();
-    // Get schemaData from context as fallback
-    const { schemaData } = useWidgetContext();
-    // Get values from Redux store
-    const values = reactRedux.useSelector((state) => state.widget.values);
-    // Support two approaches for data paths:
-    // 1. Multi-path binding via widget-data-path (object) - RECOMMENDED (Approach 2)
-    // 2. Individual path properties (widget-image-path, widget-name-path, widget-id-path) - Fallback
-    let imageUrl = null;
-    let displayName = '';
-    let idValue = '';
-    const dataPath = widgetConfig['widget-data-path'];
-    const imagePath = widgetConfig['widget-image-path'];
-    const namePath = widgetConfig['widget-name-path'];
-    const idPath = widgetConfig['widget-id-path'];
-    // Prioritize multi-path data binding (Approach 2 - Recommended)
-    if (dataPath && typeof dataPath === 'object') {
-        // Multi-path data binding - preferred approach (Approach 2)
-        // Always fetch each path individually using getFieldValue for reliability
-        // The values in the dataPath object are the actual data paths to fetch
-        const imagePathValue = dataPath.image || dataPath.photo || dataPath.avatar;
-        const namePathValue = dataPath.name || dataPath.displayName;
-        const idPathValue = dataPath.id || dataPath.identifier;
-        // Helper function to search for a path within all top-level objects
-        const findValueInNestedObjects = (path, searchIn) => {
-            if (!searchIn)
-                return undefined;
-            // First try direct path (in case it's at root level)
-            let value = getValueByPath(searchIn, path);
-            if (value !== undefined)
+// Display select value label in view mode
+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) });
+};
+/**
+ * Dialog table widget:
+ * - Table displays a subset of columns (n out of x)
+ * - Add/Edit happens in a modal dialog that shows ALL columns as a form
+ *
+ * Usage in schema:
+ * {
+ *   "widget": "dialog-table",
+ *   "widget-type": "table",
+ *   "widget-label": "Household Members",
+ *   "widget-id": "householdMembers",
+ *   "widget-data-path": "household.members",
+ *   "widget-data-columns": [ ...all columns... ],
+ *   "widget-data-visible-columns": ["firstName", "lastName", "dob"], // optional override; default = by column flag
+ *   // Per-column control (recommended): set "column-visible-in-table": false to hide it in the table
+ *   "widget-data-operations": { "add": true, "edit": true, "remove": true }
+ * }
+ */
+const DialogTableWidget = ({ config }) => {
+    const { value, error, touched, isEnabled, onChange, config: widgetConfig } = useBaseWidget({ config });
+    const { translate, translateConfig } = useWidgetTranslation();
+    const dispatch = reactRedux.useDispatch();
+    const storeValues = reactRedux.useSelector((state) => state.widget?.values ?? {});
+    const rows = Array.isArray(value) ? value : [];
+    const columns = widgetConfig['widget-data-columns'] || [];
+    const operations = widgetConfig['widget-data-operations'] || {};
+    const isReadonly = widgetConfig['widget-readonly'] || false;
+    const visibleColumnKeys = widgetConfig['widget-data-visible-columns'];
+    const visibleColumns = React.useMemo(() => {
+        // 1) If explicit list provided, it wins
+        if (Array.isArray(visibleColumnKeys) && visibleColumnKeys.length > 0) {
+            const keySet = new Set(visibleColumnKeys);
+            return columns.filter((c) => keySet.has(c['column-key']));
+        }
+        // 2) Otherwise decide per column (default = visible)
+        return columns.filter((c) => c['column-visible-in-table'] !== false);
+    }, [columns, visibleColumnKeys]);
+    const [dialogOpen, setDialogOpen] = React.useState(false);
+    const [dialogMode, setDialogMode] = React.useState('add');
+    const [activeRowIndex, setActiveRowIndex] = React.useState(null);
+    const [formData, setFormData] = React.useState({});
+    /** Unique per dialog open so Redux widget ids don't reuse stale values across rows/add sessions */
+    const dialogSessionRef = React.useRef(0);
+    const [dialogSessionId, setDialogSessionId] = React.useState(0);
+    const addDialogTitle = translateConfig(widgetConfig['widget-data-dialog-title-add']) ||
+        translate('table.addRecordDialog') ||
+        'Add record';
+    const editDialogTitle = translateConfig(widgetConfig['widget-data-dialog-title-edit']) ||
+        translate('table.editRecordDialog') ||
+        'Edit record';
+    const buildEmptyRow = React.useCallback(() => {
+        const emptyRow = {};
+        columns.forEach((col) => {
+            const key = col['column-key'];
+            emptyRow[key] = col['widget-data-default'] ?? '';
+        });
+        return emptyRow;
+    }, [columns]);
+    const dialogFieldWidgetId = React.useCallback((columnKey) => `${widgetConfig['widget-id']}-dlg-${dialogSessionId}-${columnKey}`, [widgetConfig, dialogSessionId]);
+    const resetDialogWidgets = React.useCallback((sessionId) => {
+        if (sessionId <= 0)
+            return;
+        columns.forEach((col) => {
+            const wid = `${widgetConfig['widget-id']}-dlg-${sessionId}-${col['column-key']}`;
+            dispatch(resetWidget(wid));
+        });
+    }, [columns, widgetConfig, dispatch]);
+    const beginDialogSession = React.useCallback(() => {
+        dialogSessionRef.current += 1;
+        const nextSession = dialogSessionRef.current;
+        setDialogSessionId(nextSession);
+        return nextSession;
+    }, []);
+    const openAddDialog = React.useCallback(() => {
+        resetDialogWidgets(dialogSessionId);
+        beginDialogSession();
+        setDialogMode('add');
+        setActiveRowIndex(null);
+        setFormData(buildEmptyRow());
+        setDialogOpen(true);
+    }, [buildEmptyRow, beginDialogSession, resetDialogWidgets, dialogSessionId]);
+    const openEditDialog = React.useCallback((rowIndex) => {
+        resetDialogWidgets(dialogSessionId);
+        beginDialogSession();
+        const row = rows[rowIndex] || {};
+        const nextFormData = buildEmptyRow();
+        columns.forEach((col) => {
+            const key = col['column-key'];
+            if (row[key] !== undefined)
+                nextFormData[key] = row[key];
+        });
+        setDialogMode('edit');
+        setActiveRowIndex(rowIndex);
+        setFormData(nextFormData);
+        setDialogOpen(true);
+    }, [rows, columns, buildEmptyRow, resetDialogWidgets, dialogSessionId, beginDialogSession]);
+    const closeDialog = React.useCallback(() => {
+        const sessionToClear = dialogSessionId;
+        setDialogOpen(false);
+        setActiveRowIndex(null);
+        setFormData({});
+        resetDialogWidgets(sessionToClear);
+        setDialogSessionId(0);
+    }, [dialogSessionId, resetDialogWidgets]);
+    const updateField = React.useCallback((columnKey, newValue) => {
+        setFormData((prev) => ({ ...prev, [columnKey]: newValue }));
+    }, []);
+    const collectMergedRowPayload = React.useCallback(() => {
+        const merged = { ...formData };
+        columns.forEach((col) => {
+            const k = col['column-key'];
+            const wid = dialogFieldWidgetId(k);
+            const fromStore = storeValues[wid];
+            if (fromStore !== undefined)
+                merged[k] = fromStore;
+        });
+        return merged;
+    }, [formData, columns, storeValues, dialogFieldWidgetId]);
+    const saveDialog = React.useCallback(() => {
+        const payload = collectMergedRowPayload();
+        if (dialogMode === 'add') {
+            const savedRow = { ...payload, edit_action: 'ADD' };
+            onChange([...rows, savedRow]);
+            closeDialog();
+            return;
+        }
+        if (dialogMode === 'edit' && activeRowIndex !== null) {
+            const newRows = [...rows];
+            const currentRow = newRows[activeRowIndex] || {};
+            const wasDeleted = currentRow.edit_action === 'DELETE';
+            const editAction = wasDeleted ? 'UPDATE' : (currentRow.edit_action ?? 'UPDATE');
+            newRows[activeRowIndex] = { ...currentRow, ...payload, edit_action: editAction };
+            onChange(newRows);
+            closeDialog();
+        }
+    }, [collectMergedRowPayload, dialogMode, onChange, rows, closeDialog, activeRowIndex]);
+    const deleteRow = React.useCallback((rowIndex) => {
+        const newRows = rows.filter((_, i) => i !== rowIndex);
+        onChange(newRows);
+    }, [rows, onChange]);
+    const getDisplayValue = React.useCallback((rowIndex, column) => {
+        const key = column['column-key'];
+        const cellValue = rows[rowIndex]?.[key];
+        const widgetType = column.widget || 'text';
+        if (cellValue === null || cellValue === undefined || cellValue === '')
+            return '-';
+        if (widgetType === 'select')
+            return null; // handled by SelectDisplayValue
+        if (column['widget-data-format'])
+            return formatValue(cellValue, column['widget-data-format'], column.widget);
+        return String(cellValue);
+    }, [rows]);
+    const tableWidgetId = `dialog-table-widget-${widgetConfig['widget-id']}`;
+    const columnSpan = widgetConfig['widget-column-span'] || 2;
+    const minWidth = columnSpan * 200;
+    return (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx("style", { children: `
+        .${tableWidgetId} {
+          width: 100%;
+          min-width: ${minWidth}px;
+        }
+
+        .widget-container[data-widget-id="${widgetConfig['widget-id']}"] {
+          min-width: ${minWidth}px;
+          width: 100%;
+          flex: none;
+        }
+
+        .panel-horizontal .widget-container[data-widget-id="${widgetConfig['widget-id']}"],
+        [data-panel-orientation="horizontal"] .widget-container[data-widget-id="${widgetConfig['widget-id']}"] {
+          grid-column: span ${columnSpan};
+        }
+      ` }), jsxRuntimeExports.jsxs("div", { className: `table-widget-container ${tableWidgetId}`, children: [operations.add && !isReadonly && isEnabled && (jsxRuntimeExports.jsx("div", { className: "flex justify-end mb-2", children: jsxRuntimeExports.jsx("button", { type: "button", onClick: openAddDialog, className: "px-3 py-1 text-sm disabled:opacity-50 disabled:cursor-not-allowed", style: {
+                                borderRadius: 'var(--owt-btn-border-radius, 10px)',
+                                border: '1px solid var(--owt-btn-primary-border, #F07B1A)',
+                                backgroundColor: 'var(--owt-color-primary, #F5BB1A)',
+                                color: 'var(--owt-color-bg, #FFFFFF)',
+                            }, children: translate('table.addRecord') || 'Add New Record' }) })), jsxRuntimeExports.jsx("div", { className: "overflow-x-auto border", style: {
+                            borderRadius: 'var(--owt-widget-table-border-radius, 15px)',
+                            borderColor: 'var(--owt-widget-table-border-color, #C4C4C4)',
+                        }, children: jsxRuntimeExports.jsxs("table", { className: "min-w-full", style: { borderCollapse: 'separate', borderSpacing: 0 }, children: [jsxRuntimeExports.jsx("thead", { style: { backgroundColor: 'var(--owt-widget-table-header-bg, #F6F6F6)' }, children: jsxRuntimeExports.jsxs("tr", { style: { borderBottom: '1px solid var(--owt-widget-table-row-divider, #E4E4E4)' }, children: [visibleColumns.map((col) => (jsxRuntimeExports.jsx("th", { className: "px-4 py-3 text-left text-xs font-medium uppercase tracking-wider", style: { color: 'var(--owt-widget-table-header-color, #727474)' }, children: translateConfig(col['widget-label']) }, col['column-key']))), ((operations.edit || operations.remove) && !isReadonly) && (jsxRuntimeExports.jsx("th", { className: "px-4 py-3 text-left text-xs font-medium uppercase tracking-wider", style: { color: 'var(--owt-widget-table-header-color, #727474)' }, children: translate('common.actions') || 'Actions' }))] }) }), jsxRuntimeExports.jsxs("tbody", { style: { backgroundColor: 'var(--owt-widget-table-body-bg, #FFFFFF)' }, children: [rows.length === 0 && (jsxRuntimeExports.jsx("tr", { children: jsxRuntimeExports.jsxs("td", { colSpan: visibleColumns.length + (((operations.edit || operations.remove) && !isReadonly) ? 1 : 0), className: "px-4 py-6 text-center text-sm", style: { color: 'var(--owt-widget-table-empty-color, #727474)' }, children: [translate('table.noData') || 'No records available.', operations.add && !isReadonly && ` ${translate('table.clickToAdd') || 'Click "Add New Record" to add one.'}`] }) })), rows.map((row, rowIndex) => (jsxRuntimeExports.jsxs("tr", { style: {
+                                                borderBottom: '1px solid var(--owt-widget-table-row-divider, #E4E4E4)',
+                                                backgroundColor: row?.edit_action === 'DELETE'
+                                                    ? 'var(--owt-widget-table-deleted-row-bg, #FEE2E2)'
+                                                    : undefined,
+                                            }, children: [visibleColumns.map((col) => {
+                                                    const key = col['column-key'];
+                                                    const widgetType = col.widget || 'text';
+                                                    const displayValue = getDisplayValue(rowIndex, col);
+                                                    if (widgetType === 'select' && displayValue === null) {
+                                                        const displayConfig = {
+                                                            ...col,
+                                                            'widget-id': `${widgetConfig['widget-id']}-view-row-${rowIndex}-col-${key}`,
+                                                            'widget-label': '',
+                                                            'widget-readonly': true,
+                                                            'widget-data-path': undefined,
+                                                        };
+                                                        return (jsxRuntimeExports.jsx("td", { className: "px-4 py-3 whitespace-nowrap", children: jsxRuntimeExports.jsx("div", { className: "text-sm", children: jsxRuntimeExports.jsx(SelectDisplayValue, { config: displayConfig, value: row?.[key] }) }) }, key));
+                                                    }
+                                                    return (jsxRuntimeExports.jsx("td", { className: "px-4 py-3 whitespace-nowrap", children: jsxRuntimeExports.jsx("div", { className: "text-sm", children: displayValue }) }, key));
+                                                }), ((operations.edit || operations.remove) && !isReadonly) && (jsxRuntimeExports.jsx("td", { className: "px-4 py-3 whitespace-nowrap", style: { minWidth: '120px' }, children: jsxRuntimeExports.jsxs("div", { className: "flex gap-2", children: [operations.edit && (jsxRuntimeExports.jsx("button", { type: "button", onClick: () => openEditDialog(rowIndex), disabled: !isEnabled, className: "px-3 py-1 text-xs disabled:opacity-50 disabled:cursor-not-allowed", style: {
+                                                                    borderRadius: 'var(--owt-btn-border-radius, 10px)',
+                                                                    color: 'var(--owt-color-primary-dark, #F07B1A)',
+                                                                    backgroundColor: 'transparent',
+                                                                    border: 'none',
+                                                                }, children: translate('common.edit') || 'Edit' })), operations.remove && (jsxRuntimeExports.jsx("button", { type: "button", onClick: () => deleteRow(rowIndex), disabled: !isEnabled, className: "px-3 py-1 text-xs disabled:opacity-50 disabled:cursor-not-allowed", style: {
+                                                                    borderRadius: 'var(--owt-btn-border-radius, 10px)',
+                                                                    color: 'var(--owt-color-error, #B91C1C)',
+                                                                    backgroundColor: 'transparent',
+                                                                    border: 'none',
+                                                                }, children: translate('common.remove') || 'Delete' }))] }) }))] }, rowIndex)))] })] }) }), touched && error.length > 0 && (jsxRuntimeExports.jsx("p", { className: "text-sm mt-1", style: { color: 'var(--owt-widget-error-color, #B91C1C)' }, children: error[0] }))] }), dialogOpen && (jsxRuntimeExports.jsx("div", { className: "fixed inset-0 flex items-center justify-center z-50", style: { backgroundColor: 'rgba(0,0,0,0.5)' }, children: jsxRuntimeExports.jsxs("div", { className: "rounded-lg p-6 w-full mx-4", style: {
+                        maxWidth: '900px',
+                        backgroundColor: 'var(--owt-color-bg, #FFFFFF)',
+                        borderRadius: 'var(--owt-widget-card-border-radius, 20px)',
+                    }, children: [jsxRuntimeExports.jsxs("div", { className: "flex items-start justify-between gap-4 mb-4", children: [jsxRuntimeExports.jsx("h3", { className: "text-lg font-semibold", style: { color: 'var(--owt-color-text, #011627)' }, children: dialogMode === 'add' ? addDialogTitle : editDialogTitle }), jsxRuntimeExports.jsx("button", { type: "button", onClick: closeDialog, style: {
+                                        border: 'none',
+                                        background: 'transparent',
+                                        color: 'var(--owt-color-text-muted, #727474)',
+                                        cursor: 'pointer',
+                                        fontSize: '20px',
+                                        lineHeight: 1,
+                                    }, "aria-label": "Close", children: "\u00D7" })] }), jsxRuntimeExports.jsx("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", style: { maxHeight: '70vh', overflow: 'auto' }, children: columns.map((col) => {
+                                const key = col['column-key'];
+                                const widgetType = col.widget || 'text';
+                                const cellWidgetId = dialogFieldWidgetId(key);
+                                const initialValue = formData[key] ?? col['widget-data-default'] ?? '';
+                                const fieldConfig = {
+                                    ...col,
+                                    widget: widgetType,
+                                    'widget-type': col['widget-type'] || 'input',
+                                    'widget-id': cellWidgetId,
+                                    'widget-label': col['widget-label'],
+                                    'widget-readonly': isReadonly || col['widget-readonly'] === true,
+                                    'widget-data-path': undefined,
+                                    'widget-data-default': initialValue,
+                                };
+                                return (jsxRuntimeExports.jsx("div", { className: "min-w-0", children: jsxRuntimeExports.jsx(WidgetRenderer, { config: fieldConfig, schemaData: { [cellWidgetId]: initialValue }, onValueChange: (_widgetId, newValue) => updateField(key, newValue) }) }, `${dialogSessionId}-${key}`));
+                            }) }, `dialog-fields-${dialogSessionId}`), jsxRuntimeExports.jsxs("div", { className: "flex justify-end gap-3 mt-6", children: [jsxRuntimeExports.jsx("button", { type: "button", onClick: closeDialog, className: "px-4 py-2 text-sm font-medium", style: {
+                                        borderRadius: 'var(--owt-btn-border-radius, 10px)',
+                                        border: '1px solid var(--owt-btn-secondary-border, #C4C4C4)',
+                                        backgroundColor: 'var(--owt-btn-secondary-bg, #FFFFFF)',
+                                        color: 'var(--owt-btn-secondary-color, #011627)',
+                                    }, children: translate('common.cancel') || 'Cancel' }), jsxRuntimeExports.jsx("button", { type: "button", onClick: saveDialog, disabled: isReadonly || !isEnabled, className: "px-4 py-2 text-sm font-medium disabled:opacity-50 disabled:cursor-not-allowed", style: {
+                                        borderRadius: 'var(--owt-btn-border-radius, 10px)',
+                                        border: '1px solid var(--owt-btn-primary-border, #F07B1A)',
+                                        backgroundColor: 'var(--owt-color-primary, #F5BB1A)',
+                                        color: 'var(--owt-color-bg, #FFFFFF)',
+                                    }, children: translate('common.save') || 'Save' })] })] }) }))] }));
+};
+
+const ProfileWidget = ({ config }) => {
+    const { value, config: widgetConfig, getFieldValue, } = useBaseWidget({ config });
+    const { translateConfig } = useWidgetTranslation();
+    // Get schemaData from context as fallback
+    const { schemaData } = useWidgetContext();
+    // Get values from Redux store
+    const values = reactRedux.useSelector((state) => state.widget.values);
+    // Support two approaches for data paths:
+    // 1. Multi-path binding via widget-data-path (object) - RECOMMENDED (Approach 2)
+    // 2. Individual path properties (widget-image-path, widget-name-path, widget-id-path) - Fallback
+    let imageUrl = null;
+    let displayName = '';
+    let idValue = '';
+    const dataPath = widgetConfig['widget-data-path'];
+    const imagePath = widgetConfig['widget-image-path'];
+    const namePath = widgetConfig['widget-name-path'];
+    const idPath = widgetConfig['widget-id-path'];
+    // Prioritize multi-path data binding (Approach 2 - Recommended)
+    if (dataPath && typeof dataPath === 'object') {
+        // Multi-path data binding - preferred approach (Approach 2)
+        // Always fetch each path individually using getFieldValue for reliability
+        // The values in the dataPath object are the actual data paths to fetch
+        const imagePathValue = dataPath.image || dataPath.photo || dataPath.avatar;
+        const namePathValue = dataPath.name || dataPath.displayName;
+        const idPathValue = dataPath.id || dataPath.identifier;
+        // Helper function to search for a path within all top-level objects
+        const findValueInNestedObjects = (path, searchIn) => {
+            if (!searchIn)
+                return undefined;
+            // First try direct path (in case it's at root level)
+            let value = getValueByPath(searchIn, path);
+            if (value !== undefined)
                 return value;
             // If not found, search within each top-level object
             for (const [key, obj] of Object.entries(searchIn)) {
@@ -9311,15 +9890,107 @@ const HeaderSectionWidget = ({ config }) => {
             result = searchIn(schemaData);
         return result;
     }, [paths, values, schemaData]);
-    const imageUrl = findValue('image') || null;
+    const imageVal = findValue('image');
+    const imageUrlVal = findValue('imageUrl');
+    const [previewUrl, setPreviewUrl] = React.useState(null);
+    React.useEffect(() => {
+        if (imageVal instanceof File) {
+            const url = URL.createObjectURL(imageVal);
+            setPreviewUrl(url);
+            return () => URL.revokeObjectURL(url);
+        }
+        setPreviewUrl(null);
+    }, [imageVal]);
+    const displayImageUrl = previewUrl || (typeof imageUrlVal === 'string' && imageUrlVal ? imageUrlVal : null);
     const displayName = findValue('name') || '';
     const functionalId = findValue('functionalId') || '';
     const statusValue = findValue('status') || '';
     const statusReason = findValue('statusReason') || '';
+    const completionScoreRaw = findValue('completionScore');
+    const idealScoreRaw = findValue('idealScore');
     const createdBy = findValue('createdBy') || '';
     const createdAt = findValue('createdAt') || '';
     const lastApprovedBy = findValue('lastApprovedBy') || '';
     const lastApprovedAt = findValue('lastApprovedAt') || '';
+    // ── Validation: status change requires reason ──────────────────
+    // Behavior:
+    // - When status changes away from its initial value, clear reason and require it.
+    // - When status returns to initial value (or a parent "Cancel" restores it), restore initial reason.
+    const initialStatusRef = React.useRef(null);
+    const initialReasonRef = React.useRef(null);
+    const prevStatusRef = React.useRef(null);
+    const [showReasonRequired, setShowReasonRequired] = React.useState(false);
+    React.useEffect(() => {
+        // Capture initial status once when it becomes available.
+        if (initialStatusRef.current === null) {
+            const v = statusValue === undefined || statusValue === null ? '' : String(statusValue);
+            initialStatusRef.current = v;
+        }
+    }, [statusValue]);
+    React.useEffect(() => {
+        // Capture initial reason once when it becomes available.
+        if (initialReasonRef.current === null) {
+            const v = statusReason === undefined || statusReason === null ? '' : String(statusReason);
+            initialReasonRef.current = v;
+        }
+    }, [statusReason]);
+    const isStatusChanged = React.useMemo(() => {
+        const initial = initialStatusRef.current;
+        if (initial === null)
+            return false;
+        return String(statusValue) !== initial;
+    }, [statusValue]);
+    const isReasonMissing = React.useMemo(() => {
+        if (!isStatusChanged)
+            return false;
+        return String(statusReason || '').trim().length === 0;
+    }, [isStatusChanged, statusReason]);
+    React.useEffect(() => {
+        // When status changes:
+        // - If moved away from initial → clear reason.
+        // - If returned to initial → restore initial reason.
+        if (isReadonly)
+            return;
+        if (initialStatusRef.current === null)
+            return;
+        const currentStatus = String(statusValue || '');
+        if (prevStatusRef.current === currentStatus)
+            return;
+        prevStatusRef.current = currentStatus;
+        const initialStatus = initialStatusRef.current;
+        const initialReason = initialReasonRef.current ?? '';
+        if (currentStatus === initialStatus) {
+            // Reverted / cancelled back to original
+            if (String(statusReason || '') !== String(initialReason || '')) {
+                updateFieldValue('statusReason', initialReason);
+            }
+            setShowReasonRequired(false);
+            return;
+        }
+        // Status changed to a new value: clear reason (so user must re-enter)
+        if (String(statusReason || '').trim().length > 0) {
+            updateFieldValue('statusReason', '');
+        }
+        setShowReasonRequired(true);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [statusValue, isReadonly]);
+    const score = React.useMemo(() => {
+        const toNum = (v) => {
+            if (v === null || v === undefined || String(v).trim() === '')
+                return null;
+            const n = typeof v === 'number' ? v : Number(String(v));
+            return Number.isFinite(n) ? n : null;
+        };
+        const completion = toNum(completionScoreRaw);
+        const ideal = toNum(idealScoreRaw);
+        if (completion === null || ideal === null || ideal <= 0)
+            return null;
+        const ratio = completion / ideal;
+        const percent = Math.max(0, Math.min(100, Math.round(ratio * 100)));
+        const completionDisplay = Number.isInteger(completion) ? completion : Math.round(completion);
+        const idealDisplay = Number.isInteger(ideal) ? ideal : Math.round(ideal);
+        return { completion, ideal, completionDisplay, idealDisplay, percent };
+    }, [completionScoreRaw, idealScoreRaw]);
     // ── Format options ────────────────────────────────────────────
     const format = (widgetConfig['widget-data-format'] || {});
     const imageSize = format.imageSize || 120;
@@ -9344,18 +10015,20 @@ const HeaderSectionWidget = ({ config }) => {
         return opt ? opt.label : String(statusValue);
     }, [statusValue, statusOptions]);
     const statusColor = statusColors[String(statusValue).toLowerCase()] || 'var(--owt-color-text-muted, #6B7280)';
+    // ── Image edit helpers ───────────────────────────────────────
+    const fileInputRef = React.useRef(null);
+    const handleImageUpload = React.useCallback((e) => {
+        const file = e.target.files?.[0];
+        if (!file)
+            return;
+        updateFieldValue('image', file);
+        e.target.value = '';
+    }, [updateFieldValue]);
+    const handleImageDelete = React.useCallback(() => {
+        updateFieldValue('image', '');
+    }, [updateFieldValue]);
     // ── Scoped class for CSS isolation ────────────────────────────
     const cls = `header-section-widget-${widgetConfig['widget-id']}`;
-    // ── Indicator dot component ───────────────────────────────────
-    const Dot = ({ color }) => (jsxRuntimeExports.jsx("span", { style: {
-            display: 'inline-block',
-            width: 8,
-            height: 8,
-            borderRadius: '50%',
-            backgroundColor: color,
-            flexShrink: 0,
-            marginTop: 6,
-        } }));
     // ── RENDER ────────────────────────────────────────────────────
     return (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx("style", { children: `
         .${cls} {
@@ -9384,6 +10057,58 @@ const HeaderSectionWidget = ({ config }) => {
           min-width: 220px;
         }
 
+        .${cls} .hdr-right-top {
+          display: flex;
+          align-items: flex-start;
+          justify-content: space-between;
+          gap: 14px;
+          width: 100%;
+        }
+
+        .${cls} .hdr-meta-col {
+          display: flex;
+          flex-direction: column;
+          gap: 0.5rem;
+          flex: 1 1 auto;
+          min-width: 0;
+        }
+
+        .${cls} .hdr-score-ring {
+          --ring-size: 54px;
+          --ring-thickness: 7px;
+          --ring-color: var(--owt-color-primary-dark, #F07B1A);
+          --ring-track: rgba(2, 6, 23, 0.10);
+          width: var(--ring-size);
+          height: var(--ring-size);
+          border-radius: 50%;
+          background: conic-gradient(
+            var(--ring-color) calc(var(--pct) * 1%),
+            var(--ring-track) 0
+          );
+          position: relative;
+          flex: 0 0 auto;
+        }
+
+        .${cls} .hdr-score-ring::before {
+          content: "";
+          position: absolute;
+          inset: var(--ring-thickness);
+          border-radius: 50%;
+          background: var(--owt-color-bg, #FFFFFF);
+        }
+
+        .${cls} .hdr-score-value {
+          position: absolute;
+          inset: 0;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          font-size: 20px;
+          font-weight: 700;
+          color: var(--owt-color-text, #011627);
+          font-family: Roboto, sans-serif;
+        }
+
         .${cls} .hdr-avatar {
           width: ${imageSize}px;
           height: ${imageSize}px;
@@ -9414,6 +10139,56 @@ const HeaderSectionWidget = ({ config }) => {
           border-radius: 8px;
         }
 
+        .${cls} .hdr-avatar-wrapper {
+          position: relative;
+          width: ${imageSize}px;
+          height: ${imageSize}px;
+          flex-shrink: 0;
+        }
+
+        .${cls} .hdr-avatar-overlay {
+          position: absolute;
+          inset: 0;
+          border-radius: 8px;
+          background: rgba(0, 0, 0, 0.55);
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          justify-content: center;
+          gap: 6px;
+          opacity: 0;
+          transition: opacity 0.2s;
+        }
+
+        .${cls} .hdr-avatar-wrapper:hover .hdr-avatar-overlay {
+          opacity: 1;
+        }
+
+        .${cls} .hdr-avatar-action {
+          display: flex;
+          align-items: center;
+          gap: 5px;
+          padding: 5px 14px;
+          border: none;
+          border-radius: 4px;
+          background: rgba(255, 255, 255, 0.92);
+          color: #374151;
+          font-size: 0.7rem;
+          font-weight: 500;
+          cursor: pointer;
+          font-family: Roboto, sans-serif;
+          transition: background 0.15s;
+          white-space: nowrap;
+        }
+
+        .${cls} .hdr-avatar-action:hover {
+          background: #fff;
+        }
+
+        .${cls} .hdr-avatar-action--delete {
+          color: #DC2626;
+        }
+
         .${cls} .hdr-info {
           display: flex;
           flex-direction: column;
@@ -9510,6 +10285,19 @@ const HeaderSectionWidget = ({ config }) => {
           box-shadow: 0 0 0 2px rgba(237, 124, 34, 0.15);
         }
 
+        .${cls} .hdr-input--error {
+          border-color: var(--owt-color-danger, #DC2626);
+          box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.12);
+        }
+
+        .${cls} .hdr-error-text {
+          margin-left: calc(0px);
+          color: var(--owt-color-danger, #DC2626);
+          font-size: 0.75rem;
+          line-height: 1.2;
+          font-weight: 500;
+        }
+
         @media (max-width: 768px) {
           .${cls} {
             flex-direction: column;
@@ -9518,16 +10306,31 @@ const HeaderSectionWidget = ({ config }) => {
             min-width: 0;
           }
         }
-      ` }), jsxRuntimeExports.jsxs("div", { className: cls, children: [jsxRuntimeExports.jsxs("div", { className: "hdr-left", children: [jsxRuntimeExports.jsxs("div", { children: [imageUrl ? (jsxRuntimeExports.jsx("img", { src: imageUrl, alt: displayName || 'Profile', className: "hdr-avatar", onError: (e) => {
+      ` }), jsxRuntimeExports.jsxs("div", { className: cls, children: [jsxRuntimeExports.jsxs("div", { className: "hdr-left", children: [jsxRuntimeExports.jsxs("div", { className: "hdr-avatar-wrapper", children: [displayImageUrl ? (jsxRuntimeExports.jsx("img", { src: displayImageUrl, alt: displayName || 'Profile', className: "hdr-avatar", onError: (e) => {
                                             e.target.style.display = 'none';
                                             const placeholder = e.target
                                                 .parentElement?.querySelector('.hdr-avatar-placeholder');
                                             if (placeholder)
                                                 placeholder.style.display = 'flex';
-                                        } })) : null, jsxRuntimeExports.jsx("div", { className: "hdr-avatar-placeholder", style: { display: imageUrl ? 'none' : 'flex' }, children: jsxRuntimeExports.jsx("img", { src: img$f, alt: "Profile Placeholder" }) })] }), jsxRuntimeExports.jsxs("div", { className: "hdr-info", children: [displayName && jsxRuntimeExports.jsx("div", { className: "hdr-name", children: displayName }), jsxRuntimeExports.jsxs("div", { className: "hdr-field-row", children: [jsxRuntimeExports.jsx(Dot, { color: "#9CA3AF" }), jsxRuntimeExports.jsxs("span", { className: "hdr-field-label", children: [getLabel('functionalId'), " :"] }), jsxRuntimeExports.jsx("span", { className: "hdr-field-value", children: functionalId || '-' })] }), jsxRuntimeExports.jsxs("div", { className: "hdr-field-row", children: [jsxRuntimeExports.jsx(Dot, { color: isReadonly ? statusColor : '#F59E0B' }), jsxRuntimeExports.jsx("span", { className: "hdr-field-label", children: getLabel('status') }), isReadonly ? (statusLabel ? (jsxRuntimeExports.jsx("span", { className: "hdr-status-badge", style: { backgroundColor: statusColor }, children: statusLabel })) : (jsxRuntimeExports.jsx("span", { className: "hdr-field-value", children: "-" }))) : (jsxRuntimeExports.jsxs("select", { className: "hdr-select", value: statusValue, onChange: (e) => updateFieldValue('status', e.target.value), children: [jsxRuntimeExports.jsx("option", { value: "", children: getLabel('select') }), statusOptions.map((opt) => (jsxRuntimeExports.jsx("option", { value: opt.value, children: opt.label }, opt.value)))] }))] }), jsxRuntimeExports.jsxs("div", { className: "hdr-field-row", children: [jsxRuntimeExports.jsx(Dot, { color: isReadonly ? '#9CA3AF' : '#F59E0B' }), jsxRuntimeExports.jsxs("span", { className: "hdr-field-label", children: [getLabel('statusReason'), " :"] }), isReadonly ? (jsxRuntimeExports.jsx("span", { className: "hdr-field-value", children: statusReason || '-' })) : (jsxRuntimeExports.jsx("input", { type: "text", className: "hdr-input", value: statusReason, placeholder: getLabel('enterReason'), onChange: (e) => updateFieldValue('statusReason', e.target.value) }))] })] })] }), jsxRuntimeExports.jsxs("div", { className: "hdr-right", children: [jsxRuntimeExports.jsxs("div", { className: "hdr-meta-row", children: [jsxRuntimeExports.jsxs("span", { className: "hdr-meta-label", children: [getLabel('createdBy'), " :"] }), jsxRuntimeExports.jsx("span", { className: "hdr-meta-value", children: createdBy || '-' })] }), jsxRuntimeExports.jsxs("div", { className: "hdr-meta-row", children: [jsxRuntimeExports.jsxs("span", { className: "hdr-meta-label", children: [getLabel('createdAt'), " :"] }), jsxRuntimeExports.jsx("span", { className: "hdr-meta-value", children: createdAt || '-' })] }), jsxRuntimeExports.jsxs("div", { className: "hdr-meta-row", children: [jsxRuntimeExports.jsxs("span", { className: "hdr-meta-label", children: [getLabel('lastApprovedBy'), " :"] }), jsxRuntimeExports.jsx("span", { className: "hdr-meta-value", children: lastApprovedBy || '-' })] }), jsxRuntimeExports.jsxs("div", { className: "hdr-meta-row", children: [jsxRuntimeExports.jsxs("span", { className: "hdr-meta-label", children: [getLabel('lastApprovedAt'), " :"] }), jsxRuntimeExports.jsx("span", { className: "hdr-meta-value", children: lastApprovedAt || '-' })] })] })] })] }));
+                                        } })) : null, jsxRuntimeExports.jsx("div", { className: "hdr-avatar-placeholder", style: { display: displayImageUrl ? 'none' : 'flex' }, children: jsxRuntimeExports.jsx("img", { src: img$f, alt: "Profile Placeholder" }) }), !isReadonly && (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsxs("div", { className: "hdr-avatar-overlay", children: [jsxRuntimeExports.jsxs("button", { type: "button", className: "hdr-avatar-action", onClick: () => fileInputRef.current?.click(), children: [jsxRuntimeExports.jsxs("svg", { width: "13", height: "13", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [jsxRuntimeExports.jsx("path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }), jsxRuntimeExports.jsx("polyline", { points: "17 8 12 3 7 8" }), jsxRuntimeExports.jsx("line", { x1: "12", y1: "3", x2: "12", y2: "15" })] }), "Upload"] }), jsxRuntimeExports.jsxs("button", { type: "button", className: "hdr-avatar-action hdr-avatar-action--delete", onClick: handleImageDelete, children: [jsxRuntimeExports.jsxs("svg", { width: "13", height: "13", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [jsxRuntimeExports.jsx("polyline", { points: "3 6 5 6 21 6" }), jsxRuntimeExports.jsx("path", { d: "M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" })] }), "Delete"] })] }), jsxRuntimeExports.jsx("input", { ref: fileInputRef, type: "file", accept: "image/*", style: { display: 'none' }, onChange: handleImageUpload })] }))] }), jsxRuntimeExports.jsxs("div", { className: "hdr-info", children: [displayName && jsxRuntimeExports.jsx("div", { className: "hdr-name", children: displayName }), jsxRuntimeExports.jsxs("div", { className: "hdr-field-row", children: [jsxRuntimeExports.jsxs("span", { className: "hdr-field-label", children: [getLabel('functionalId'), " :"] }), jsxRuntimeExports.jsx("span", { className: "hdr-field-value", children: functionalId || '-' })] }), jsxRuntimeExports.jsxs("div", { className: "hdr-field-row", children: [jsxRuntimeExports.jsx("span", { className: "hdr-field-label", children: getLabel('status') }), isReadonly ? (statusLabel ? (jsxRuntimeExports.jsx("span", { className: "hdr-status-badge", style: { backgroundColor: statusColor }, children: statusLabel })) : (jsxRuntimeExports.jsx("span", { className: "hdr-field-value", children: "-" }))) : (jsxRuntimeExports.jsxs("select", { className: "hdr-select", value: statusValue, onChange: (e) => updateFieldValue('status', e.target.value), children: [jsxRuntimeExports.jsx("option", { value: "", children: getLabel('select') }), statusOptions.map((opt) => (jsxRuntimeExports.jsx("option", { value: opt.value, children: opt.label }, opt.value)))] }))] }), jsxRuntimeExports.jsxs("div", { className: "hdr-field-row", children: [jsxRuntimeExports.jsxs("span", { className: "hdr-field-label", children: [getLabel('statusReason'), " :"] }), isReadonly ? (jsxRuntimeExports.jsx("span", { className: "hdr-field-value", children: statusReason || '-' })) : (jsxRuntimeExports.jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: 4 }, children: [jsxRuntimeExports.jsx("input", { type: "text", className: `hdr-input ${(!isReadonly && (showReasonRequired || isReasonMissing) && isReasonMissing) ? 'hdr-input--error' : ''}`, value: statusReason, placeholder: getLabel('enterReason'), required: isStatusChanged, "aria-required": isStatusChanged, "aria-invalid": !isReadonly && (showReasonRequired || isReasonMissing) && isReasonMissing, onBlur: () => {
+                                                            if (isReasonMissing)
+                                                                setShowReasonRequired(true);
+                                                        }, onChange: (e) => {
+                                                            updateFieldValue('statusReason', e.target.value);
+                                                            if (showReasonRequired && String(e.target.value || '').trim().length > 0) {
+                                                                setShowReasonRequired(false);
+                                                            }
+                                                        } }), !isReadonly && (showReasonRequired || isReasonMissing) && isReasonMissing ? (jsxRuntimeExports.jsx("div", { className: "hdr-error-text", children: getLabel('enterReason') })) : null] }))] })] })] }), jsxRuntimeExports.jsx("div", { className: "hdr-right", children: jsxRuntimeExports.jsxs("div", { className: "hdr-right-top", children: [jsxRuntimeExports.jsxs("div", { className: "hdr-meta-col", children: [jsxRuntimeExports.jsxs("div", { className: "hdr-meta-row", children: [jsxRuntimeExports.jsxs("span", { className: "hdr-meta-label", children: [getLabel('createdBy'), " :"] }), jsxRuntimeExports.jsx("span", { className: "hdr-meta-value", children: createdBy || '-' })] }), jsxRuntimeExports.jsxs("div", { className: "hdr-meta-row", children: [jsxRuntimeExports.jsxs("span", { className: "hdr-meta-label", children: [getLabel('createdAt'), " :"] }), jsxRuntimeExports.jsx("span", { className: "hdr-meta-value", children: createdAt || '-' })] }), jsxRuntimeExports.jsxs("div", { className: "hdr-meta-row", children: [jsxRuntimeExports.jsxs("span", { className: "hdr-meta-label", children: [getLabel('lastApprovedBy'), " :"] }), jsxRuntimeExports.jsx("span", { className: "hdr-meta-value", children: lastApprovedBy || '-' })] }), jsxRuntimeExports.jsxs("div", { className: "hdr-meta-row", children: [jsxRuntimeExports.jsxs("span", { className: "hdr-meta-label", children: [getLabel('lastApprovedAt'), " :"] }), jsxRuntimeExports.jsx("span", { className: "hdr-meta-value", children: lastApprovedAt || '-' })] })] }), score ? (jsxRuntimeExports.jsx("div", { className: "hdr-score-ring", style: { ['--pct']: score.percent }, "aria-label": `Completion score ${score.completionDisplay} of ${score.idealDisplay} (${score.percent}%)`, title: `${score.completionDisplay} / ${score.idealDisplay} (${score.percent}%)`, children: jsxRuntimeExports.jsx("div", { className: "hdr-score-value", children: String(score.completionDisplay) }) })) : null] }) })] })] }));
 };
 
-function tryFormatDateTime(value) {
+function getValueByPathOrKey(obj, path) {
+    if (!obj || !path)
+        return undefined;
+    if (Object.prototype.hasOwnProperty.call(obj, path))
+        return obj[path];
+    return getValueByPath(obj, path);
+}
+function tryFormatDateTime$1(value) {
     if (typeof value !== 'string' || !value)
         return value ? String(value) : '-';
     const d = new Date(value);
@@ -9546,233 +10349,712 @@ function tryFormatDateTime(value) {
         return value;
     }
 }
-function pickLatestScore(scores) {
-    if (!scores || scores.length === 0)
-        return null;
+function sortScores(scores) {
     const withTime = scores
-        .map((s) => {
+        .map((s, idx) => {
         const t = typeof s?.computed_at === 'string' ? new Date(s.computed_at).getTime() : NaN;
-        return { s, t };
+        return { s, t, idx };
     })
-        .filter((x) => !Number.isNaN(x.t));
-    if (withTime.length === 0)
-        return scores[0] || null;
-    withTime.sort((a, b) => b.t - a.t);
-    return withTime[0]?.s || null;
+        .sort((a, b) => {
+        const aHas = !Number.isNaN(a.t);
+        const bHas = !Number.isNaN(b.t);
+        if (aHas && bHas)
+            return b.t - a.t;
+        if (aHas)
+            return -1;
+        if (bHas)
+            return 1;
+        return a.idx - b.idx;
+    });
+    return withTime.map((x) => x.s);
 }
 /**
- * Scores Display Widget - full-width, view-only widget
+ * Scores Display Widget - full-width, view-only widget (list)
  *
  * Expected config (reference):
  * {
  *   "widget": "scores-display",
  *   "widget-type": "group",
  *   "widget-id": "record-scores",
- *   "widget-data-source": {
- *     "type": "api",
- *     "service": "staff-portal-api",
- *     "endpoint": "get_scores",
- *     "method": "POST",
- *     "params": { "internal_record_id_path": "internal_record_id" }
- *   }
+ *   "widget-data-path": "scores"
  * }
- *
- * The host's `dataSourceRequestHandler` is invoked with:
- * - service: config.widget-data-source.service
- * - endpoint: config.widget-data-source.endpoint
- * - method: config.widget-data-source.method (default POST)
- * - params: { internal_record_id: <resolved from internal_record_id_path> }
  */
-const ScoresDisplayWidget = ({ config, dataSourceRequestHandler: propHandler, schemaData: propSchemaData, }) => {
-    const { dataSourceRequestHandler: ctxHandler, schemaData: ctxSchemaData } = useWidgetContext();
-    const handler = propHandler || ctxHandler;
-    const schemaData = propSchemaData || ctxSchemaData || {};
+const ScoresDisplayWidget = ({ config, schemaData: propSchemaData, }) => {
+    const { schemaData: ctxSchemaData } = useWidgetContext();
+    const schemaData = (propSchemaData || ctxSchemaData || {});
     const values = reactRedux.useSelector((state) => state.widget.values);
-    const api = config['widget-data-source'];
-    const isApi = api?.type === 'api';
-    const apiDs = isApi ? api : null;
-    const internalIdPath = React.useMemo(() => {
-        if (!apiDs)
-            return undefined;
-        const p = apiDs.params || {};
-        const fromParams = p.internal_record_id_path || p.internalRecordIdPath;
-        const fromConfig = typeof config.internal_record_id_path === 'string'
-            ? config.internal_record_id_path
-            : undefined;
-        return fromParams || fromConfig;
-    }, [apiDs, config]);
-    const internalRecordId = React.useMemo(() => {
-        if (!internalIdPath)
+    const dataPath = config['widget-data-path'];
+    const rawScores = React.useMemo(() => {
+        if (!dataPath || typeof dataPath !== 'string')
             return undefined;
-        const fromValues = getValueByPath(values || {}, internalIdPath);
-        if (fromValues !== undefined && fromValues !== null && String(fromValues).trim() !== '') {
-            return String(fromValues);
+        const valuesObj = values;
+        const tryResolve = (path) => {
+            const fromValues = getValueByPathOrKey(valuesObj, path);
+            if (fromValues !== undefined)
+                return fromValues;
+            return getValueByPathOrKey(schemaData, path);
+        };
+        // 1) Try exact path (works when schema/store is already namespaced)
+        const direct = tryResolve(dataPath);
+        if (direct !== undefined)
+            return direct;
+        // 2) If section/widget config has been namespaced (e.g. "rv-section-0.scores"),
+        // fall back to the original path ("scores") so examples still work even when
+        // schemaData/store are not namespaced.
+        if (dataPath.includes('.')) {
+            const unNamespaced = dataPath.split('.').slice(1).join('.');
+            const fallback = tryResolve(unNamespaced);
+            if (fallback !== undefined)
+                return fallback;
+        }
+        return undefined;
+    }, [dataPath, values, schemaData]);
+    const scores = React.useMemo(() => {
+        if (!rawScores)
+            return [];
+        if (Array.isArray(rawScores))
+            return rawScores;
+        if (typeof rawScores === 'object') {
+            const maybe = rawScores.scores;
+            if (Array.isArray(maybe))
+                return maybe;
+        }
+        return [];
+    }, [rawScores]);
+    const sortedScores = React.useMemo(() => sortScores(scores), [scores]);
+    const cls = `scores-display-widget-${config['widget-id']}`;
+    return (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx("style", { children: `
+        .${cls} {
+          width: 100%;
+          font-family: Roboto, sans-serif;
+          padding: 0;
+          display: flex;
+          flex-direction: column;
+          gap: 8px;
+        }
+
+        .${cls} .scores-subtle {
+          font-size: 13px;
+          color: var(--owt-color-text-muted, #727474);
+          font-weight: 400;
+        }
+
+        .${cls} .scores-grid {
+          width: 100%;
+          display: grid;
+          grid-template-columns: repeat(3, minmax(220px, 1fr));
+          gap: 16px;
+        }
+
+        .${cls} .scores-card {
+          border: 1px solid var(--owt-color-border-light, #E4E4E4);
+          border-radius: 10px;
+          background: var(--owt-color-bg, #FFFFFF);
+          padding: 14px 14px;
+          display: flex;
+          flex-direction: column;
+          gap: 10px;
+          min-width: 0;
+          box-shadow: 0 1px 2px rgba(1, 22, 39, 0.06), 0 6px 16px rgba(1, 22, 39, 0.06);
         }
-        const fromSchema = getValueByPath(schemaData || {}, internalIdPath);
-        if (fromSchema !== undefined && fromSchema !== null && String(fromSchema).trim() !== '') {
-            return String(fromSchema);
+
+        .${cls} .scores-type {
+          font-size: 16px;
+          font-weight: 800;
+          color: var(--owt-color-primary-dark, #F07B1A);
+          line-height: 1.2;
+          word-break: break-word;
         }
+
+        .${cls} .scores-value {
+          font-size: 34px;
+          font-weight: 800;
+          color: var(--owt-color-text, #011627);
+          line-height: 1.05;
+          letter-spacing: -0.25px;
+        }
+
+        .${cls} .scores-separator {
+          height: 1px;
+          width: 100%;
+          background-color: var(--owt-color-border-light, #E4E4E4);
+          border: none;
+          margin: 2px 0;
+        }
+
+        .${cls} .scores-value .scores-muted {
+          font-size: 18px;
+          font-weight: 600;
+          color: var(--owt-color-text-muted, #727474);
+          margin-left: 6px;
+        }
+
+        .${cls} .scores-meta {
+          display: flex;
+          flex-direction: column;
+          gap: 4px;
+        }
+
+        .${cls} .scores-meta-line {
+          font-size: 13px;
+          color: var(--owt-color-text-muted, #727474);
+          font-weight: 500;
+        }
+
+        .${cls} .scores-meta-line strong {
+          color: var(--owt-color-text, #011627);
+          font-weight: 700;
+        }
+
+        @media (max-width: 1024px) {
+          .${cls} .scores-grid {
+            grid-template-columns: repeat(2, minmax(220px, 1fr));
+          }
+        }
+
+        @media (max-width: 640px) {
+          .${cls} .scores-grid {
+            grid-template-columns: 1fr;
+          }
+        }
+      ` }), jsxRuntimeExports.jsx("div", { className: cls, children: sortedScores.length === 0 ? (jsxRuntimeExports.jsx("div", { className: "scores-subtle", children: "No scores available." })) : (jsxRuntimeExports.jsx("div", { className: "scores-grid", children: sortedScores.map((s, idx) => {
+                        const scoreType = s?.score_type ? String(s.score_type) : '-';
+                        const scoreValue = s?.computed_score !== undefined &&
+                            s?.computed_score !== null &&
+                            String(s.computed_score) !== ''
+                            ? String(s.computed_score)
+                            : '-';
+                        const computedAt = tryFormatDateTime$1(s?.computed_at);
+                        const key = `${scoreType}-${String(s?.computed_at || '')}-${idx}`;
+                        return (jsxRuntimeExports.jsxs("div", { className: "scores-card", "aria-live": idx === 0 ? 'polite' : undefined, children: [jsxRuntimeExports.jsx("div", { className: "scores-type", children: scoreType }), jsxRuntimeExports.jsx("div", { className: "scores-value", children: scoreValue }), jsxRuntimeExports.jsx("hr", { className: "scores-separator" }), jsxRuntimeExports.jsx("div", { className: "scores-meta", children: jsxRuntimeExports.jsxs("div", { className: "scores-meta-line", children: ["Computed at: ", jsxRuntimeExports.jsx("strong", { children: computedAt })] }) })] }, key));
+                    }) })) })] }));
+};
+
+function tryFormatDateTime(value) {
+    if (typeof value !== 'string' || !value)
+        return value ? String(value) : '-';
+    const d = new Date(value);
+    if (Number.isNaN(d.getTime()))
+        return value;
+    try {
+        return d.toLocaleString(undefined, {
+            year: 'numeric',
+            month: 'short',
+            day: '2-digit',
+            hour: '2-digit',
+            minute: '2-digit',
+        });
+    }
+    catch {
+        return value;
+    }
+}
+function tryFormatDate(value) {
+    if (typeof value !== 'string' || !value)
+        return value ? String(value) : '-';
+    const d = new Date(value);
+    if (Number.isNaN(d.getTime()))
+        return value;
+    try {
+        return d.toLocaleDateString(undefined, {
+            year: 'numeric',
+            month: 'short',
+            day: '2-digit',
+        });
+    }
+    catch {
+        return value;
+    }
+}
+function displayText(value) {
+    if (value === null || value === undefined || String(value).trim() === '')
+        return '-';
+    return String(value);
+}
+function normalizeStatus(raw) {
+    if (raw === null || raw === undefined || String(raw).trim() === '')
+        return 'unknown';
+    const v = String(raw).trim().toLowerCase();
+    if (v === 'success' || v === 'succeeded' || v === 'ok')
+        return 'success';
+    if (v === 'failure' || v === 'failed' || v === 'error')
+        return 'failure';
+    if (v === 'not done' || v === 'not_done' || v === 'not-done' || v === 'pending')
+        return 'not_done';
+    return 'unknown';
+}
+/** Large enough for eSignet / OIDC login; clamped so it always fits the current screen. */
+function getCenteredPopupFeatures(width, height) {
+    const dualScreenLeft = window.screenLeft ?? window.screenX ?? 0;
+    const dualScreenTop = window.screenTop ?? window.screenY ?? 0;
+    const viewportWidth = window.innerWidth || document.documentElement.clientWidth || (typeof screen !== 'undefined' ? screen.width : width);
+    const viewportHeight = window.innerHeight || document.documentElement.clientHeight || (typeof screen !== 'undefined' ? screen.height : height);
+    const maxW = Math.max(320, Math.floor(viewportWidth * 0.92));
+    const maxH = Math.max(400, Math.floor(viewportHeight * 0.92));
+    const w = Math.max(320, Math.min(width, maxW));
+    const h = Math.max(400, Math.min(height, maxH));
+    const left = Math.max(0, Math.floor(viewportWidth / 2 - w / 2 + dualScreenLeft));
+    const top = Math.max(0, Math.floor(viewportHeight / 2 - h / 2 + dualScreenTop));
+    return [
+        'popup=yes',
+        'noopener=yes',
+        'noreferrer=yes',
+        `width=${w}`,
+        `height=${h}`,
+        `left=${left}`,
+        `top=${top}`,
+        'scrollbars=yes',
+        'resizable=yes',
+    ].join(',');
+}
+function pickAuthorizationUrl(resp, explicitKey) {
+    if (!resp)
+        return null;
+    const tryKey = (k) => {
+        const v = resp?.[k];
+        if (typeof v === 'string' && v)
+            return v;
+        return null;
+    };
+    if (explicitKey) {
+        const v = tryKey(explicitKey);
+        if (v)
+            return v;
+    }
+    return (tryKey('authentication_url') ||
+        tryKey('authorization_url') ||
+        tryKey('authorizationUrl') ||
+        tryKey('auth_url') ||
+        tryKey('authUrl') ||
+        tryKey('url') ||
+        null);
+}
+function resolveValueFromSources(path, values, schemaData) {
+    if (!path)
         return undefined;
-    }, [internalIdPath, values, schemaData]);
-    const [loading, setLoading] = React.useState(false);
-    const [error, setError] = React.useState(null);
-    const [response, setResponse] = React.useState(null);
+    const fromValues = getValueByPath(values, path);
+    if (fromValues !== undefined)
+        return fromValues;
+    return getValueByPath(schemaData, path);
+}
+function unwrapPayload(response) {
+    if (response && typeof response === 'object') {
+        if (response.response_body?.response_payload !== undefined)
+            return response.response_body.response_payload;
+        if (response.response_payload !== undefined)
+            return response.response_payload;
+    }
+    return response;
+}
+const IdAuthenticationWidget = ({ config, schemaData: propSchemaData }) => {
+    const { dataSourceRequestHandler, schemaData: ctxSchemaData } = useWidgetContext();
+    const values = reactRedux.useSelector((state) => state.widget.values);
+    const schemaData = (propSchemaData || ctxSchemaData || {});
+    const widgetId = config['widget-id'];
+    const dataPath = config['widget-data-path'];
+    const paths = React.useMemo(() => {
+        if (!dataPath || typeof dataPath !== 'object')
+            return {};
+        return dataPath;
+    }, [dataPath]);
+    const authConfig = config['widget-auth-config'];
+    const registerId = authConfig?.registerId ?? undefined;
+    const internalRecordId = resolveValueFromSources(paths.internalRecordId, values, schemaData);
+    const initiatedByStaffId = resolveValueFromSources(paths.initiatedByStaffId, values, schemaData);
+    const providerId = authConfig?.providerId;
+    const providerName = authConfig?.providerName;
+    const foundationalId = resolveValueFromSources(paths.foundationalId, values, schemaData);
+    const lastAuthenticatedOn = resolveValueFromSources(paths.lastAuthenticatedOn, values, schemaData);
+    const lastAuthStatusRaw = resolveValueFromSources(paths.lastAuthenticationStatus, values, schemaData);
+    const expiryDate = resolveValueFromSources(paths.expiryDate, values, schemaData);
+    const psut = resolveValueFromSources(paths.authenticationToken, values, schemaData);
+    const status = React.useMemo(() => normalizeStatus(lastAuthStatusRaw), [lastAuthStatusRaw]);
+    /** URL from prefetch (or default); used when opening the OIDC / eSignet popup */
+    const [resolvedAuthUrl, setResolvedAuthUrl] = React.useState(null);
+    const [authActionLoading, setAuthActionLoading] = React.useState(false);
+    const [authError, setAuthError] = React.useState(null);
+    const popupRef = React.useRef(null);
+    const pollTimerRef = React.useRef(null);
+    const [overlayUrl, setOverlayUrl] = React.useState(null);
+    const emitHostEvent = React.useCallback((detail) => {
+        if (typeof window === 'undefined')
+            return;
+        window.dispatchEvent(new CustomEvent('openg2p:id-authentication', {
+            detail: {
+                widgetId,
+                ...detail,
+            },
+        }));
+    }, [widgetId]);
+    const cleanupPopup = React.useCallback(() => {
+        if (pollTimerRef.current) {
+            window.clearInterval(pollTimerRef.current);
+            pollTimerRef.current = null;
+        }
+        popupRef.current = null;
+    }, []);
     React.useEffect(() => {
-        let cancelled = false;
-        const load = async () => {
-            if (!apiDs) {
-                setError('Scores widget requires an API data source.');
-                setResponse(null);
-                return;
-            }
-            if (!handler) {
-                setError(null);
-                setResponse(null);
-                return;
+        return () => {
+            cleanupPopup();
+            try {
+                popupRef.current?.close?.();
             }
-            const service = apiDs.service;
-            const endpoint = apiDs.endpoint;
-            const method = apiDs.method || 'POST';
-            if (!service || !endpoint) {
-                setError('Scores widget API data source is missing service/endpoint.');
-                setResponse(null);
-                return;
+            catch {
+                // ignore
             }
-            if (!internalRecordId) {
-                setError(null);
-                setResponse(null);
-                return;
+        };
+    }, [cleanupPopup]);
+    // Provider details are supplied by host; clear any previous resolved URL on provider change.
+    React.useEffect(() => {
+        setResolvedAuthUrl(null);
+    }, [providerId, providerName]);
+    const openAuthPopup = React.useCallback((authUrl) => {
+        if (authConfig?.useIframeOverlay === true) {
+            setOverlayUrl(authUrl);
+            emitHostEvent({ type: 'overlay_opened' });
+            return;
+        }
+        const pw = authConfig?.popupWidth ?? 1024;
+        const ph = authConfig?.popupHeight ?? 800;
+        const features = getCenteredPopupFeatures(pw, ph);
+        const popup = window.open(authUrl, `${widgetId}-oidc`, features);
+        if (!popup) {
+            setAuthError('Popup blocked. Please allow popups and try again.');
+            return;
+        }
+        popupRef.current = popup;
+        popup.focus?.();
+        setAuthError(null);
+        emitHostEvent({ type: 'popup_opened' });
+        if (pollTimerRef.current) {
+            window.clearInterval(pollTimerRef.current);
+            pollTimerRef.current = null;
+        }
+        pollTimerRef.current = window.setInterval(() => {
+            try {
+                const closed = !popupRef.current || popupRef.current.closed;
+                if (closed) {
+                    cleanupPopup();
+                    emitHostEvent({ type: 'popup_closed' });
+                }
             }
+            catch {
+                // ignore
+            }
+        }, 500);
+    }, [authConfig, cleanupPopup, emitHostEvent, widgetId]);
+    const onAuthenticate = React.useCallback(async () => {
+        setAuthError(null);
+        if (!authConfig) {
+            setAuthError('Missing widget-auth-config.');
+            return;
+        }
+        const canCallAuthApi = Boolean(dataSourceRequestHandler && authConfig.service && authConfig.authenticateEndpoint);
+        let url = resolvedAuthUrl;
+        if (!url && canCallAuthApi) {
+            setAuthActionLoading(true);
             try {
-                setLoading(true);
-                setError(null);
-                const rawParams = apiDs.params || {};
-                // Never pass the path helper through to the API.
-                const { internal_record_id_path, internalRecordIdPath, ...rest } = rawParams;
-                void internal_record_id_path;
-                void internalRecordIdPath;
-                const params = {
-                    ...rest,
+                const basePayload = {
+                    register_id: registerId,
                     internal_record_id: internalRecordId,
+                    provider_id: providerId,
+                    initiated_by_staff_id: initiatedByStaffId,
                 };
-                const res = await handler(service, endpoint, method, params, {
-                    headers: apiDs.headers,
-                });
-                if (cancelled)
-                    return;
-                // Accept either direct payload or OpenG2P wrapper objects.
-                const envelope = res && typeof res === 'object' ? res : null;
-                const payload = envelope?.response_body?.response_payload ?? envelope?.data ?? res;
-                if (payload && typeof payload === 'object' && !Array.isArray(payload)) {
-                    setResponse(payload);
-                }
-                else {
-                    setResponse({ scores: Array.isArray(payload) ? payload : [] });
-                }
+                const requestParams = basePayload;
+                // eslint-disable-next-line no-console
+                console.log('[IdAuthenticationWidget] authenticate_registrant params', requestParams);
+                const resp = await dataSourceRequestHandler(authConfig.service, authConfig.authenticateEndpoint, authConfig.authenticateMethod || 'POST', requestParams);
+                const payload = unwrapPayload(resp);
+                const authUrl = pickAuthorizationUrl(payload, authConfig.authorizationUrlKey);
+                url = authUrl || null;
+                if (authUrl)
+                    setResolvedAuthUrl(authUrl);
             }
             catch (e) {
-                if (cancelled)
+                if (!url) {
+                    setAuthError(e?.message || 'Could not load provider URL.');
                     return;
-                const maybeErr = e;
-                const msg = maybeErr && typeof maybeErr === 'object' && typeof maybeErr.message === 'string'
-                    ? maybeErr.message
-                    : 'Failed to load scores.';
-                setError(msg);
-                setResponse(null);
+                }
             }
             finally {
-                if (!cancelled)
-                    setLoading(false);
+                setAuthActionLoading(false);
+            }
+        }
+        if (!url) {
+            setAuthError('No authorization URL returned from authenticate_registrant.');
+            return;
+        }
+        openAuthPopup(url);
+    }, [
+        authConfig,
+        dataSourceRequestHandler,
+        openAuthPopup,
+        registerId,
+        internalRecordId,
+        initiatedByStaffId,
+        resolvedAuthUrl,
+    ]);
+    React.useEffect(() => {
+        const successType = authConfig?.successMessageType || 'openg2p:oidc:success';
+        const handler = (event) => {
+            const data = event?.data;
+            if (!data || typeof data !== 'object')
+                return;
+            if (data.type !== successType)
+                return;
+            if (data.widgetId && data.widgetId !== widgetId)
+                return;
+            emitHostEvent({ type: 'authenticated', payload: data });
+            try {
+                popupRef.current?.close?.();
+            }
+            catch {
+                // ignore
+            }
+            cleanupPopup();
+            if (authConfig?.reloadOnSuccess) {
+                window.location.reload();
             }
         };
-        load();
-        return () => {
-            cancelled = true;
-        };
-    }, [apiDs, handler, internalRecordId]);
-    const latest = React.useMemo(() => pickLatestScore(response?.scores), [response]);
-    const cls = `scores-display-widget-${config['widget-id']}`;
-    const scoreType = latest?.score_type ? String(latest.score_type) : '-';
-    const scoreValue = latest?.computed_score !== undefined && latest?.computed_score !== null && String(latest.computed_score) !== ''
-        ? String(latest.computed_score)
-        : '-';
-    const computedAt = tryFormatDateTime(latest?.computed_at);
+        window.addEventListener('message', handler);
+        return () => window.removeEventListener('message', handler);
+    }, [authConfig?.reloadOnSuccess, authConfig?.successMessageType, cleanupPopup, emitHostEvent, widgetId]);
+    const cls = `id-auth-widget-${widgetId}`;
+    const statusLabel = React.useMemo(() => {
+        if (status === 'success')
+            return 'Success';
+        if (status === 'failure')
+            return 'Failure';
+        if (status === 'not_done')
+            return 'Not done';
+        return 'Unknown';
+    }, [status]);
+    const statusColor = React.useMemo(() => {
+        if (status === 'success')
+            return 'var(--owt-color-success, #16A34A)';
+        if (status === 'failure')
+            return 'var(--owt-color-danger, #DC2626)';
+        if (status === 'not_done')
+            return 'var(--owt-color-warning, #D97706)';
+        return 'var(--owt-color-text-muted, #6B7280)';
+    }, [status]);
+    const buttonBusy = authActionLoading;
+    const buttonDisabled = !authConfig || buttonBusy;
     return (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx("style", { children: `
         .${cls} {
           width: 100%;
           font-family: Roboto, sans-serif;
-          padding: 0;
+        }
+
+        /* Two-column field grid; primary action in a bottom band (matches section save/edit pattern). */
+        .${cls} .auth-content {
           display: flex;
           flex-direction: column;
-          gap: 8px;
+          gap: 0;
+          min-width: 0;
         }
 
-        .${cls} .scores-subtle {
+        .${cls} .auth-grid {
+          display: grid;
+          grid-template-columns: repeat(2, minmax(0, 1fr));
+          gap: 16px 24px;
+          min-width: 0;
+        }
+
+        /* Each field: label (left) + value (right), same as DisplayWidget readonly */
+        .${cls} .auth-cell {
+          display: flex;
+          flex-direction: row;
+          align-items: flex-start;
+          gap: 12px 16px;
+          min-width: 0;
+        }
+
+        .${cls} .auth-cell.auth-cell--full {
+          grid-column: 1 / -1;
+        }
+
+        /* Action cell: no left label spacer, align button to column start */
+        .${cls} .auth-cell.auth-cell--action .auth-label {
+          display: none;
+        }
+        .${cls} .auth-cell.auth-cell--action .auth-value {
+          flex: 1 1 auto;
+        }
+
+        .${cls} .auth-label {
+          flex: 0 0 auto;
+          min-width: 200px;
+          max-width: 40%;
+          font-size: 16px;
+          color: rgba(0, 0, 0, 0.6);
+          font-weight: 500;
+          line-height: 1.45;
+          margin: 0;
+          word-break: break-word;
+        }
+
+        .${cls} .auth-value {
+          flex: 1 1 auto;
+          min-width: 0;
+          font-size: 16px;
+          color: var(--owt-color-text, #111827);
+          font-weight: 500;
+          line-height: 1.45;
+          word-break: break-word;
+        }
+
+        .${cls} .auth-value--foundational {
+          font-size: 18px;
+          font-weight: 700;
+          color: var(--owt-color-primary-dark, #F07B1A);
+          letter-spacing: 0.1px;
+        }
+
+        /* Button is placed inside the grid (next to PSUT) */
+
+        .${cls} .auth-status {
+          display: inline-flex;
+          align-items: center;
+          gap: 8px;
+          width: fit-content;
+          padding: 4px 10px;
+          border-radius: 999px;
+          background: rgba(2, 6, 23, 0.04);
+          border: 1px solid rgba(2, 6, 23, 0.08);
           font-size: 13px;
-          color: var(--owt-color-text-muted, #727474);
-          font-weight: 400;
+          font-weight: 700;
+          color: var(--owt-color-text, #011627);
         }
 
-        .${cls} .scores-card {
-          width: 100%;
+        .${cls} .auth-dot {
+          width: 8px;
+          height: 8px;
+          border-radius: 50%;
+          background: ${statusColor};
+        }
+
+        .${cls} .auth-token {
+          font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+          font-size: 14px;
+          font-weight: 500;
+          color: var(--owt-color-text, #011627);
+          background: transparent;
           border: none;
           border-radius: 0;
-          background: transparent;
           padding: 0;
-          display: grid;
-          grid-template-columns: 1fr 1fr 1fr;
-          gap: 16px;
-          align-items: center;
+          word-break: break-all;
         }
 
-        .${cls} .scores-col {
-          min-width: 0;
-          display: flex;
-          flex-direction: column;
-          gap: 6px;
+        .${cls} .auth-button {
+          /* Match SectionRegistryView Save CTA (SectionRenderer) */
+          font-size: 14px;
+          font-weight: 500;
+          padding: 8px 24px;
+          line-height: 1.5;
+          border-radius: var(--owt-btn-border-radius, 10px);
+          border: 1px solid rgb(237, 124, 34);
+          background-color: rgb(237, 124, 34);
+          color: var(--owt-color-bg, #FFFFFF);
+          font-family: Roboto, sans-serif;
+          cursor: pointer;
+          transition: opacity 0.15s ease;
         }
 
-        .${cls} .scores-label {
+        .${cls} .auth-button:disabled {
+          opacity: 0.5;
+          cursor: not-allowed;
+        }
+
+        .${cls} .auth-error {
           font-size: 12px;
-          color: var(--owt-color-text-muted, #727474);
-          font-weight: 600;
-          letter-spacing: 0.25px;
-          text-transform: uppercase;
+          color: var(--owt-color-danger, #DC2626);
+          font-weight: 700;
+          line-height: 1.3;
+          text-align: left;
+          max-width: 100%;
         }
 
-        .${cls} .scores-value {
-          font-size: 16px;
-          font-weight: 600;
-          color: var(--owt-color-text, #011627);
-          line-height: 1.25;
-          word-break: break-word;
+        .${cls} .overlay-backdrop {
+          position: fixed;
+          inset: 0;
+          background: rgba(17, 24, 39, 0.55);
+          z-index: 9999;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          padding: 24px;
         }
 
-        .${cls} .scores-value--highlight {
-          font-weight: 800;
-          color: var(--owt-color-primary-dark, #F07B1A);
+        .${cls} .overlay-panel {
+          width: min(1100px, 92vw);
+          height: min(820px, 92vh);
+          background: var(--owt-color-bg, #FFFFFF);
+          border-radius: 12px;
+          box-shadow: 0 10px 30px rgba(0,0,0,0.25);
+          overflow: hidden;
+          display: flex;
+          flex-direction: column;
         }
 
-        .${cls} .scores-value-wrap {
-          display: inline-flex;
-          align-items: baseline;
-          gap: 10px;
-          flex-wrap: wrap;
+        .${cls} .overlay-header {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          padding: 10px 14px;
+          border-bottom: 1px solid var(--owt-color-border-light, #E4E4E4);
+          font-family: Roboto, sans-serif;
+        }
+
+        .${cls} .overlay-title {
+          font-size: 14px;
+          color: var(--owt-color-text, #011627);
+          font-weight: 600;
+          min-width: 0;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
         }
 
-        .${cls} .scores-value-badge { display: inline; }
+        .${cls} .overlay-close {
+          border: 1px solid var(--owt-btn-secondary-border, #C4C4C4);
+          background: var(--owt-btn-secondary-bg, #FFFFFF);
+          color: var(--owt-btn-secondary-color, #011627);
+          border-radius: var(--owt-btn-border-radius, 10px);
+          padding: 6px 10px;
+          font-size: 12px;
+          cursor: pointer;
+        }
 
-        .${cls} .scores-statusline {
-          grid-column: 1 / -1;
-          margin-top: 2px;
+        .${cls} .overlay-iframe {
+          flex: 1 1 auto;
+          width: 100%;
+          border: none;
         }
 
-        @media (max-width: 768px) {
-          .${cls} .scores-card {
+        @media (max-width: 640px) {
+          .${cls} .auth-grid {
             grid-template-columns: 1fr;
           }
+          .${cls} .auth-cell {
+            flex-direction: column;
+            align-items: stretch;
+            gap: 4px 0;
+          }
+          .${cls} .auth-label {
+            min-width: 0;
+            max-width: none;
+          }
         }
-      ` }), jsxRuntimeExports.jsx("div", { className: cls, children: jsxRuntimeExports.jsxs("div", { className: "scores-card", children: [jsxRuntimeExports.jsxs("div", { className: "scores-col", "aria-live": "polite", children: [jsxRuntimeExports.jsx("div", { className: "scores-label", children: "Score Type" }), jsxRuntimeExports.jsx("div", { className: "scores-value-wrap", children: jsxRuntimeExports.jsx("span", { className: "scores-value-badge", children: jsxRuntimeExports.jsx("span", { className: "scores-value scores-value--highlight", children: scoreType }) }) })] }), jsxRuntimeExports.jsxs("div", { className: "scores-col", children: [jsxRuntimeExports.jsx("div", { className: "scores-label", children: "Score" }), jsxRuntimeExports.jsx("div", { className: "scores-value-wrap", children: jsxRuntimeExports.jsx("span", { className: "scores-value-badge", children: jsxRuntimeExports.jsx("span", { className: "scores-value scores-value--highlight", children: scoreValue }) }) })] }), jsxRuntimeExports.jsxs("div", { className: "scores-col", children: [jsxRuntimeExports.jsx("div", { className: "scores-label", children: "Computed at" }), jsxRuntimeExports.jsx("div", { className: "scores-value", children: computedAt })] }), jsxRuntimeExports.jsx("div", { className: "scores-statusline", children: loading ? (jsxRuntimeExports.jsx("div", { className: "scores-subtle", children: "Loading scores\u2026" })) : error ? (jsxRuntimeExports.jsx("div", { className: "scores-subtle", style: { color: 'var(--owt-color-error, #B91C1C)' }, children: error })) : !latest ? (jsxRuntimeExports.jsx("div", { className: "scores-subtle", children: "No scores available." })) : null })] }) })] }));
+      ` }), jsxRuntimeExports.jsxs("div", { className: cls, children: [overlayUrl ? (jsxRuntimeExports.jsx("div", { className: "overlay-backdrop", role: "dialog", "aria-modal": "true", "aria-label": "Authentication", onClick: (e) => {
+                            if (e.target === e.currentTarget) {
+                                setOverlayUrl(null);
+                                emitHostEvent({ type: 'overlay_closed' });
+                            }
+                        }, children: jsxRuntimeExports.jsxs("div", { className: "overlay-panel", children: [jsxRuntimeExports.jsxs("div", { className: "overlay-header", children: [jsxRuntimeExports.jsx("div", { className: "overlay-title", children: providerName ? `Authenticate via ${providerName}` : 'Authenticate' }), jsxRuntimeExports.jsx("button", { type: "button", className: "overlay-close", onClick: () => {
+                                                setOverlayUrl(null);
+                                                emitHostEvent({ type: 'overlay_closed' });
+                                            }, children: "Close" })] }), jsxRuntimeExports.jsx("iframe", { className: "overlay-iframe", src: overlayUrl, title: "Authentication" })] }) })) : null, jsxRuntimeExports.jsx("div", { className: "auth-content", children: jsxRuntimeExports.jsxs("div", { className: "auth-grid", children: [jsxRuntimeExports.jsxs("div", { className: "auth-cell", children: [jsxRuntimeExports.jsx("div", { className: "auth-label", children: "Foundational ID:" }), jsxRuntimeExports.jsx("div", { className: "auth-value auth-value--foundational", children: displayText(foundationalId) })] }), jsxRuntimeExports.jsxs("div", { className: "auth-cell", children: [jsxRuntimeExports.jsx("div", { className: "auth-label", children: "Last authenticated on:" }), jsxRuntimeExports.jsx("div", { className: "auth-value", children: tryFormatDateTime(lastAuthenticatedOn) })] }), jsxRuntimeExports.jsxs("div", { className: "auth-cell", children: [jsxRuntimeExports.jsx("div", { className: "auth-label", children: "Expiry date:" }), jsxRuntimeExports.jsx("div", { className: "auth-value", children: tryFormatDate(expiryDate) })] }), jsxRuntimeExports.jsxs("div", { className: "auth-cell", children: [jsxRuntimeExports.jsx("div", { className: "auth-label", children: "Last authentication status:" }), jsxRuntimeExports.jsx("div", { className: "auth-value", children: jsxRuntimeExports.jsxs("div", { className: "auth-status", "aria-label": `Authentication status: ${statusLabel}`, children: [jsxRuntimeExports.jsx("span", { className: "auth-dot" }), jsxRuntimeExports.jsx("span", { children: statusLabel })] }) })] }), jsxRuntimeExports.jsxs("div", { className: "auth-cell", children: [jsxRuntimeExports.jsx("div", { className: "auth-label", children: "Authentication token (PSUT):" }), jsxRuntimeExports.jsx("div", { className: "auth-value", children: jsxRuntimeExports.jsx("div", { className: "auth-token", children: psut ? String(psut) : '-' }) })] }), jsxRuntimeExports.jsxs("div", { className: "auth-cell auth-cell--action", children: [jsxRuntimeExports.jsx("div", { className: "auth-label", "aria-hidden": true }), jsxRuntimeExports.jsxs("div", { className: "auth-value", children: [jsxRuntimeExports.jsx("button", { type: "button", className: "auth-button", onClick: onAuthenticate, disabled: buttonDisabled, children: buttonBusy ? 'Loading…' : 'Authenticate' }), authError ? (jsxRuntimeExports.jsx("div", { className: "auth-error", style: { marginTop: 8 }, children: authError })) : null] })] })] }) })] })] }));
 };
 
 /**
@@ -9804,6 +11086,8 @@ const registerDefaultWidgets = () => {
     widgetRegistry.register({ widget: 'simple-table', component: SimpleTableWidget });
     // Table widget with record-level editing
     widgetRegistry.register({ widget: 'table', component: TableWidget });
+    // Table widget with add/edit popup dialog
+    widgetRegistry.register({ widget: 'dialog-table', component: DialogTableWidget });
     // Group widgets
     widgetRegistry.register({ widget: 'array-widget', component: ArrayWidget });
     widgetRegistry.register({ widget: 'iterable-accordion', component: IterableAccordionWidget });
@@ -9818,6 +11102,8 @@ const registerDefaultWidgets = () => {
     widgetRegistry.register({ widget: 'header-section', component: HeaderSectionWidget });
     // Scores display widget for full-width computed scores display (view-only)
     widgetRegistry.register({ widget: 'scores-display', component: ScoresDisplayWidget });
+    // ID Authentication widget for OIDC-based foundational ID authentication (view-only + action)
+    widgetRegistry.register({ widget: 'id-authentication', component: IdAuthenticationWidget });
 };
 // Auto-register on import
 registerDefaultWidgets();
@@ -10186,9 +11472,11 @@ exports.CheckboxWidget = CheckboxWidget;
 exports.CurrencyInputWidget = CurrencyInputWidget;
 exports.DateInputWidget = DateInputWidget;
 exports.DateTimeInputWidget = DateTimeInputWidget;
+exports.DialogTableWidget = DialogTableWidget;
 exports.DisplayWidget = DisplayWidget;
 exports.FileInputWidget = FileInputWidget;
 exports.HeaderSectionWidget = HeaderSectionWidget;
+exports.IdAuthenticationWidget = IdAuthenticationWidget;
 exports.IterableAccordionWidget = IterableAccordionWidget;
 exports.JSONEditorPanel = JSONEditorPanel;
 exports.NumberInputWidget = NumberInputWidget;