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

package/dist/index.js

@@ -1005,6 +1005,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 +1061,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 +1131,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 +1914,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 +2019,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 +2068,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 +2099,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 +2200,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 +2231,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 +2275,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 +2310,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 +2513,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 +2525,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 +2574,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 +2639,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 +2655,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 +2720,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]);
@@ -3671,6 +3849,39 @@ const sectionValidate = (section, currentSchemaData, dispatch) => {
     return isValid;
 };
 
+/** 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 +3910,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,6 +3948,9 @@ 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;
@@ -4108,6 +4303,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 +4347,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) {
@@ -4198,12 +4445,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 +4470,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);
     };
@@ -4240,12 +4505,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 +4533,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 +4542,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 +4593,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 +4737,10 @@ const SectionRenderer = ({ section, dataSourceRequestHandler: propDataSourceRequ
           gap: 0.5rem;
         }
 
+        
+
+        
+
         /* IntakeForm accordion */
         .${sectionClassId}.intake-form-accordion-item {
           border-color: var(--owt-color-border-light, #E4E4E4);
@@ -4713,7 +4945,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" })] }) }))] })] })) })] }));
 };
 
@@ -4887,6 +5119,9 @@ 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;
     // Track dirty (unsaved changes) per section for form handle validation
     const sectionDirtyMapRef = React.useRef({});
     const handleSectionDirtyChange = React.useCallback((sectionId, isDirty) => {
@@ -4932,11 +5167,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) {
@@ -4986,7 +5224,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 +8508,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 }) => {
@@ -9311,15 +9549,43 @@ 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') || '';
+    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)));
+        return { completion, ideal, percent };
+    }, [completionScoreRaw, idealScoreRaw]);
     // ── Format options ────────────────────────────────────────────
     const format = (widgetConfig['widget-data-format'] || {});
     const imageSize = format.imageSize || 120;
@@ -9344,18 +9610,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 +9652,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 +9734,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;
@@ -9518,17 +9888,24 @@ 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.jsx("input", { type: "text", className: "hdr-input", value: statusReason, placeholder: getLabel('enterReason'), onChange: (e) => updateFieldValue('statusReason', e.target.value) }))] })] })] }), 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.completion} of ${score.ideal} (${score.percent}%)`, title: `${score.completion} / ${score.ideal} (${score.percent}%)`, children: jsxRuntimeExports.jsx("div", { className: "hdr-score-value", children: String(score.completion) }) })) : null] }) })] })] }));
 };
 
-function tryFormatDateTime(value) {
-    if (typeof value !== 'string' || !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);
     if (Number.isNaN(d.getTime()))
@@ -9546,233 +9923,677 @@ 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);
+        }
+
+        .${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;
         }
-        const fromSchema = getValueByPath(schemaData || {}, internalIdPath);
-        if (fromSchema !== undefined && fromSchema !== null && String(fromSchema).trim() !== '') {
-            return String(fromSchema);
+
+        .${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('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);
+}
+async function fetchProviderAuthorizationUrl(authConfig, dataSourceRequestHandler, _values, _schemaData) {
+    const response = await dataSourceRequestHandler(authConfig.service, authConfig.endpoint, authConfig.method || 'GET', {});
+    const payload = response?.response_body?.response_payload && typeof response.response_body.response_payload === 'object'
+        ? response.response_body.response_payload
+        : response;
+    return pickAuthorizationUrl(payload, authConfig.authorizationUrlKey);
+}
+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 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 [providerLoading, setProviderLoading] = React.useState(false);
+    const [authActionLoading, setAuthActionLoading] = React.useState(false);
+    const [authError, setAuthError] = React.useState(null);
+    const popupRef = React.useRef(null);
+    const pollTimerRef = React.useRef(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]);
+    const prefetchKey = React.useMemo(() => {
+        if (!authConfig)
+            return 'no-config';
+        return JSON.stringify({
+            s: authConfig.service,
+            e: authConfig.endpoint,
+            m: authConfig.method,
+            def: authConfig.defaultAuthorizationUrl,
+            prefetch: authConfig.prefetchOnMount,
+        });
+    }, [authConfig]);
+    // Prefetch provider login URL on mount (and when params / config change)
+    React.useEffect(() => {
+        if (!authConfig) {
+            setResolvedAuthUrl(null);
+            setProviderLoading(false);
+            return;
+        }
+        if (authConfig.prefetchOnMount === false) {
+            setResolvedAuthUrl(authConfig.defaultAuthorizationUrl || null);
+            setProviderLoading(false);
+            return;
+        }
+        const def = authConfig.defaultAuthorizationUrl;
+        if (def) {
+            setResolvedAuthUrl(def);
+        }
+        const canCallApi = Boolean(dataSourceRequestHandler && authConfig.service && authConfig.endpoint);
+        if (!canCallApi) {
+            setProviderLoading(false);
+            if (!def) {
+                setResolvedAuthUrl(null);
             }
+            return;
+        }
+        let cancelled = false;
+        setProviderLoading(true);
+        (async () => {
             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,
-                    internal_record_id: internalRecordId,
-                };
-                const res = await handler(service, endpoint, method, params, {
-                    headers: apiDs.headers,
-                });
+                const url = await fetchProviderAuthorizationUrl(authConfig, dataSourceRequestHandler, values, schemaData);
                 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);
+                if (url) {
+                    setResolvedAuthUrl(url);
                 }
-                else {
-                    setResponse({ scores: Array.isArray(payload) ? payload : [] });
+                else if (!def) {
+                    setResolvedAuthUrl(null);
                 }
             }
-            catch (e) {
+            catch {
                 if (cancelled)
                     return;
-                const maybeErr = e;
-                const msg = maybeErr && typeof maybeErr === 'object' && typeof maybeErr.message === 'string'
-                    ? maybeErr.message
-                    : 'Failed to load scores.';
-                setError(msg);
-                setResponse(null);
+                if (!def) {
+                    setResolvedAuthUrl(null);
+                }
             }
             finally {
                 if (!cancelled)
-                    setLoading(false);
+                    setProviderLoading(false);
             }
-        };
-        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);
+    }, [authConfig, dataSourceRequestHandler, prefetchKey, values, schemaData]);
+    const openAuthPopup = React.useCallback((authUrl) => {
+        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 def = authConfig.defaultAuthorizationUrl;
+        const canCallApi = Boolean(dataSourceRequestHandler && authConfig.service && authConfig.endpoint);
+        let url = resolvedAuthUrl;
+        if (!url && canCallApi) {
+            setAuthActionLoading(true);
+            try {
+                const fetched = await fetchProviderAuthorizationUrl(authConfig, dataSourceRequestHandler, values, schemaData);
+                url = fetched || def || null;
+                if (fetched) {
+                    setResolvedAuthUrl(fetched);
+                }
+            }
+            catch (e) {
+                url = def || null;
+                if (!url) {
+                    setAuthError(e?.message || 'Could not load provider URL.');
+                    return;
+                }
+            }
+            finally {
+                setAuthActionLoading(false);
+            }
+        }
+        else if (!url) {
+            url = def || null;
+        }
+        if (!url) {
+            setAuthError('No authorization URL. Set widget-auth-config (service + endpoint, or defaultAuthorizationUrl) and dataSourceRequestHandler on WidgetProvider if using the API.');
+            return;
+        }
+        openAuthPopup(url);
+    }, [authConfig, dataSourceRequestHandler, openAuthPopup, resolvedAuthUrl, values, schemaData]);
+    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();
+            }
+        };
+        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 ||
+        (providerLoading && !resolvedAuthUrl && !authConfig?.defaultAuthorizationUrl);
+    const buttonDisabled = !authConfig || buttonBusy;
     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;
+        /* Two-column field grid; primary action in a bottom band (matches section save/edit pattern). */
+        .${cls} .auth-content {
+          display: flex;
+          flex-direction: column;
+          gap: 0;
+          min-width: 0;
         }
 
-        .${cls} .scores-card {
-          width: 100%;
-          border: none;
-          border-radius: 0;
-          background: transparent;
-          padding: 0;
+        .${cls} .auth-grid {
           display: grid;
-          grid-template-columns: 1fr 1fr 1fr;
-          gap: 16px;
-          align-items: center;
+          grid-template-columns: repeat(2, minmax(0, 1fr));
+          gap: 16px 24px;
+          min-width: 0;
         }
 
-        .${cls} .scores-col {
-          min-width: 0;
+        /* Each field: label (left) + value (right), same as DisplayWidget readonly */
+        .${cls} .auth-cell {
           display: flex;
-          flex-direction: column;
-          gap: 6px;
+          flex-direction: row;
+          align-items: flex-start;
+          gap: 12px 16px;
+          min-width: 0;
         }
 
-        .${cls} .scores-label {
-          font-size: 12px;
-          color: var(--owt-color-text-muted, #727474);
-          font-weight: 600;
-          letter-spacing: 0.25px;
-          text-transform: uppercase;
+        .${cls} .auth-cell.auth-cell--full {
+          grid-column: 1 / -1;
         }
 
-        .${cls} .scores-value {
+        .${cls} .auth-label {
+          flex: 0 0 auto;
+          min-width: 200px;
+          max-width: 40%;
           font-size: 16px;
-          font-weight: 600;
-          color: var(--owt-color-text, #011627);
-          line-height: 1.25;
+          color: rgba(0, 0, 0, 0.6);
+          font-weight: 500;
+          line-height: 1.45;
+          margin: 0;
           word-break: break-word;
         }
 
-        .${cls} .scores-value--highlight {
-          font-weight: 800;
-          color: var(--owt-color-primary-dark, #F07B1A);
+        .${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} .scores-value-wrap {
+        .${cls} .auth-bottom-actions {
+          display: flex;
+          flex-direction: column;
+          align-items: flex-start;
+          justify-content: flex-start;
+          gap: 8px;
+          width: 100%;
+          margin-top: 20px;
+          margin-bottom: 0;
+        }
+
+        .${cls} .auth-status {
           display: inline-flex;
-          align-items: baseline;
-          gap: 10px;
-          flex-wrap: wrap;
+          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;
+          font-weight: 700;
+          color: var(--owt-color-text, #011627);
         }
 
-        .${cls} .scores-value-badge { display: inline; }
+        .${cls} .auth-dot {
+          width: 8px;
+          height: 8px;
+          border-radius: 50%;
+          background: ${statusColor};
+        }
 
-        .${cls} .scores-statusline {
-          grid-column: 1 / -1;
-          margin-top: 2px;
+        .${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;
+          padding: 0;
+          word-break: break-all;
         }
 
-        @media (max-width: 768px) {
-          .${cls} .scores-card {
+        .${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 var(--owt-btn-primary-border, #F07B1A);
+          background-color: var(--owt-color-primary, #F5BB1A);
+          color: var(--owt-color-bg, #FFFFFF);
+          font-family: Roboto, sans-serif;
+          cursor: pointer;
+          transition: opacity 0.15s ease;
+        }
+
+        .${cls} .auth-button:disabled {
+          opacity: 0.5;
+          cursor: not-allowed;
+        }
+
+        .${cls} .auth-error {
+          font-size: 12px;
+          color: var(--owt-color-danger, #DC2626);
+          font-weight: 700;
+          line-height: 1.3;
+          text-align: left;
+          max-width: 100%;
+        }
+
+        @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.jsx("div", { className: cls, children: jsxRuntimeExports.jsxs("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", 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: "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: "Expiry date:" }), jsxRuntimeExports.jsx("div", { className: "auth-value", children: tryFormatDate(expiryDate) })] }), jsxRuntimeExports.jsxs("div", { className: "auth-cell auth-cell--full", 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-bottom-actions", children: [jsxRuntimeExports.jsx("button", { type: "button", className: "auth-button", onClick: onAuthenticate, disabled: buttonDisabled, children: buttonBusy ? 'Loading…' : 'Authenticate' }), authError ? jsxRuntimeExports.jsx("div", { className: "auth-error", children: authError }) : null] })] }) })] }));
 };
 
 /**
@@ -9818,6 +10639,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();
@@ -10189,6 +11012,7 @@ exports.DateTimeInputWidget = DateTimeInputWidget;
 exports.DisplayWidget = DisplayWidget;
 exports.FileInputWidget = FileInputWidget;
 exports.HeaderSectionWidget = HeaderSectionWidget;
+exports.IdAuthenticationWidget = IdAuthenticationWidget;
 exports.IterableAccordionWidget = IterableAccordionWidget;
 exports.JSONEditorPanel = JSONEditorPanel;
 exports.NumberInputWidget = NumberInputWidget;