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

package/dist/index.js

@@ -8525,7 +8525,7 @@ const TableCellSelect = ({ config, value, onValueChange }) => {
             backgroundColor: isReadonly || loading ? 'var(--owt-color-bg-alt, #F6F6F6)' : 'var(--owt-color-bg, #FFFFFF)',
         }, children: [jsxRuntimeExports.jsx("option", { value: "", children: translate('common.select') || 'Select' }), dataSourceOptions.map((option) => (jsxRuntimeExports.jsx("option", { value: option.value, children: option.label }, option.value)))] }));
 };
-const SelectDisplayValue = ({ config, value }) => {
+const SelectDisplayValue$1 = ({ config, value }) => {
     const { dataSourceOptions, loading } = useBaseWidget({ config });
     if (loading) {
         return jsxRuntimeExports.jsx("span", { children: "-" });
@@ -9019,7 +9019,7 @@ const TableWidget = ({ config }) => {
                     'widget-readonly': true,
                     'widget-data-path': undefined,
                 };
-                return (jsxRuntimeExports.jsx("div", { className: "text-sm", style: getCellStyle(), children: jsxRuntimeExports.jsx(SelectDisplayValue, { config: cellConfig, value: cellValue }) }));
+                return (jsxRuntimeExports.jsx("div", { className: "text-sm", style: getCellStyle(), children: jsxRuntimeExports.jsx(SelectDisplayValue$1, { config: cellConfig, value: cellValue }) }));
             }
             return (jsxRuntimeExports.jsx("div", { className: "text-sm", style: getCellStyle(), children: displayValue }));
         }
@@ -9158,6 +9158,225 @@ const TableWidget = ({ config }) => {
                                                                 }, children: translate('common.cancel') || 'Cancel' })] }) })] }))] })] }) }), touched && error.length > 0 && (jsxRuntimeExports.jsx("p", { className: "text-sm mt-1", style: { color: 'var(--owt-widget-error-color, #B91C1C)' }, children: error[0] }))] })] }));
 };
 
+// Display select value label in view mode
+const SelectDisplayValue = ({ config, value }) => {
+    const { dataSourceOptions, loading } = useBaseWidget({ config });
+    if (loading)
+        return jsxRuntimeExports.jsx("span", { children: "-" });
+    if (value === null || value === undefined || value === '')
+        return jsxRuntimeExports.jsx("span", { children: "-" });
+    const selectedOption = dataSourceOptions.find((option) => option.value === value);
+    return jsxRuntimeExports.jsx("span", { children: selectedOption ? selectedOption.label : String(value) });
+};
+/**
+ * Dialog table widget:
+ * - Table displays a subset of columns (n out of x)
+ * - Add/Edit happens in a modal dialog that shows ALL columns as a form
+ *
+ * Usage in schema:
+ * {
+ *   "widget": "dialog-table",
+ *   "widget-type": "table",
+ *   "widget-label": "Household Members",
+ *   "widget-id": "householdMembers",
+ *   "widget-data-path": "household.members",
+ *   "widget-data-columns": [ ...all columns... ],
+ *   "widget-data-visible-columns": ["firstName", "lastName", "dob"], // optional override; default = by column flag
+ *   // Per-column control (recommended): set "column-visible-in-table": false to hide it in the table
+ *   "widget-data-operations": { "add": true, "edit": true, "remove": true }
+ * }
+ */
+const DialogTableWidget = ({ config }) => {
+    const { value, error, touched, isEnabled, onChange, config: widgetConfig } = useBaseWidget({ config });
+    const { translate, translateConfig } = useWidgetTranslation();
+    const rows = Array.isArray(value) ? value : [];
+    const columns = widgetConfig['widget-data-columns'] || [];
+    const operations = widgetConfig['widget-data-operations'] || {};
+    const isReadonly = widgetConfig['widget-readonly'] || false;
+    const visibleColumnKeys = widgetConfig['widget-data-visible-columns'];
+    const visibleColumns = React.useMemo(() => {
+        // 1) If explicit list provided, it wins
+        if (Array.isArray(visibleColumnKeys) && visibleColumnKeys.length > 0) {
+            const keySet = new Set(visibleColumnKeys);
+            return columns.filter((c) => keySet.has(c['column-key']));
+        }
+        // 2) Otherwise decide per column (default = visible)
+        return columns.filter((c) => c['column-visible-in-table'] !== false);
+    }, [columns, visibleColumnKeys]);
+    const [dialogOpen, setDialogOpen] = React.useState(false);
+    const [dialogMode, setDialogMode] = React.useState('add');
+    const [activeRowIndex, setActiveRowIndex] = React.useState(null);
+    const [formData, setFormData] = React.useState({});
+    const addDialogTitle = translateConfig(widgetConfig['widget-data-dialog-title-add']) ||
+        translate('table.addRecordDialog') ||
+        'Add record';
+    const editDialogTitle = translateConfig(widgetConfig['widget-data-dialog-title-edit']) ||
+        translate('table.editRecordDialog') ||
+        'Edit record';
+    const buildEmptyRow = React.useCallback(() => {
+        const emptyRow = {};
+        columns.forEach((col) => {
+            const key = col['column-key'];
+            emptyRow[key] = col['widget-data-default'] ?? '';
+        });
+        return emptyRow;
+    }, [columns]);
+    const openAddDialog = React.useCallback(() => {
+        setDialogMode('add');
+        setActiveRowIndex(null);
+        setFormData(buildEmptyRow());
+        setDialogOpen(true);
+    }, [buildEmptyRow]);
+    const openEditDialog = React.useCallback((rowIndex) => {
+        const row = rows[rowIndex] || {};
+        const nextFormData = buildEmptyRow();
+        columns.forEach((col) => {
+            const key = col['column-key'];
+            if (row[key] !== undefined)
+                nextFormData[key] = row[key];
+        });
+        setDialogMode('edit');
+        setActiveRowIndex(rowIndex);
+        setFormData(nextFormData);
+        setDialogOpen(true);
+    }, [rows, columns, buildEmptyRow]);
+    const closeDialog = React.useCallback(() => {
+        setDialogOpen(false);
+        setActiveRowIndex(null);
+        setFormData({});
+    }, []);
+    const updateField = React.useCallback((columnKey, newValue) => {
+        setFormData((prev) => ({ ...prev, [columnKey]: newValue }));
+    }, []);
+    const saveDialog = React.useCallback(() => {
+        if (dialogMode === 'add') {
+            const savedRow = { ...formData, edit_action: 'ADD' };
+            onChange([...rows, savedRow]);
+            closeDialog();
+            return;
+        }
+        if (dialogMode === 'edit' && activeRowIndex !== null) {
+            const newRows = [...rows];
+            const currentRow = newRows[activeRowIndex] || {};
+            const wasDeleted = currentRow.edit_action === 'DELETE';
+            const editAction = wasDeleted ? 'UPDATE' : (currentRow.edit_action ?? 'UPDATE');
+            newRows[activeRowIndex] = { ...currentRow, ...formData, edit_action: editAction };
+            onChange(newRows);
+            closeDialog();
+        }
+    }, [dialogMode, formData, onChange, rows, closeDialog, activeRowIndex]);
+    const deleteRow = React.useCallback((rowIndex) => {
+        const newRows = rows.filter((_, i) => i !== rowIndex);
+        onChange(newRows);
+    }, [rows, onChange]);
+    const getDisplayValue = React.useCallback((rowIndex, column) => {
+        const key = column['column-key'];
+        const cellValue = rows[rowIndex]?.[key];
+        const widgetType = column.widget || 'text';
+        if (cellValue === null || cellValue === undefined || cellValue === '')
+            return '-';
+        if (widgetType === 'select')
+            return null; // handled by SelectDisplayValue
+        if (column['widget-data-format'])
+            return formatValue(cellValue, column['widget-data-format'], column.widget);
+        return String(cellValue);
+    }, [rows]);
+    const tableWidgetId = `dialog-table-widget-${widgetConfig['widget-id']}`;
+    const columnSpan = widgetConfig['widget-column-span'] || 2;
+    const minWidth = columnSpan * 200;
+    return (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx("style", { children: `
+        .${tableWidgetId} {
+          width: 100%;
+          min-width: ${minWidth}px;
+        }
+
+        .widget-container[data-widget-id="${widgetConfig['widget-id']}"] {
+          min-width: ${minWidth}px;
+          width: 100%;
+          flex: none;
+        }
+
+        .panel-horizontal .widget-container[data-widget-id="${widgetConfig['widget-id']}"],
+        [data-panel-orientation="horizontal"] .widget-container[data-widget-id="${widgetConfig['widget-id']}"] {
+          grid-column: span ${columnSpan};
+        }
+      ` }), jsxRuntimeExports.jsxs("div", { className: `table-widget-container ${tableWidgetId}`, children: [operations.add && !isReadonly && isEnabled && (jsxRuntimeExports.jsx("div", { className: "flex justify-end mb-2", children: jsxRuntimeExports.jsx("button", { type: "button", onClick: openAddDialog, className: "px-3 py-1 text-sm disabled:opacity-50 disabled:cursor-not-allowed", style: {
+                                borderRadius: 'var(--owt-btn-border-radius, 10px)',
+                                border: '1px solid var(--owt-btn-primary-border, #F07B1A)',
+                                backgroundColor: 'var(--owt-color-primary, #F5BB1A)',
+                                color: 'var(--owt-color-bg, #FFFFFF)',
+                            }, children: translate('table.addRecord') || 'Add New Record' }) })), jsxRuntimeExports.jsx("div", { className: "overflow-x-auto border", style: {
+                            borderRadius: 'var(--owt-widget-table-border-radius, 15px)',
+                            borderColor: 'var(--owt-widget-table-border-color, #C4C4C4)',
+                        }, children: jsxRuntimeExports.jsxs("table", { className: "min-w-full", style: { borderCollapse: 'separate', borderSpacing: 0 }, children: [jsxRuntimeExports.jsx("thead", { style: { backgroundColor: 'var(--owt-widget-table-header-bg, #F6F6F6)' }, children: jsxRuntimeExports.jsxs("tr", { style: { borderBottom: '1px solid var(--owt-widget-table-row-divider, #E4E4E4)' }, children: [visibleColumns.map((col) => (jsxRuntimeExports.jsx("th", { className: "px-4 py-3 text-left text-xs font-medium uppercase tracking-wider", style: { color: 'var(--owt-widget-table-header-color, #727474)' }, children: translateConfig(col['widget-label']) }, col['column-key']))), ((operations.edit || operations.remove) && !isReadonly) && (jsxRuntimeExports.jsx("th", { className: "px-4 py-3 text-left text-xs font-medium uppercase tracking-wider", style: { color: 'var(--owt-widget-table-header-color, #727474)' }, children: translate('common.actions') || 'Actions' }))] }) }), jsxRuntimeExports.jsxs("tbody", { style: { backgroundColor: 'var(--owt-widget-table-body-bg, #FFFFFF)' }, children: [rows.length === 0 && (jsxRuntimeExports.jsx("tr", { children: jsxRuntimeExports.jsxs("td", { colSpan: visibleColumns.length + (((operations.edit || operations.remove) && !isReadonly) ? 1 : 0), className: "px-4 py-6 text-center text-sm", style: { color: 'var(--owt-widget-table-empty-color, #727474)' }, children: [translate('table.noData') || 'No records available.', operations.add && !isReadonly && ` ${translate('table.clickToAdd') || 'Click "Add New Record" to add one.'}`] }) })), rows.map((row, rowIndex) => (jsxRuntimeExports.jsxs("tr", { style: {
+                                                borderBottom: '1px solid var(--owt-widget-table-row-divider, #E4E4E4)',
+                                                backgroundColor: row?.edit_action === 'DELETE'
+                                                    ? 'var(--owt-widget-table-deleted-row-bg, #FEE2E2)'
+                                                    : undefined,
+                                            }, children: [visibleColumns.map((col) => {
+                                                    const key = col['column-key'];
+                                                    const widgetType = col.widget || 'text';
+                                                    const displayValue = getDisplayValue(rowIndex, col);
+                                                    if (widgetType === 'select' && displayValue === null) {
+                                                        const displayConfig = {
+                                                            ...col,
+                                                            'widget-id': `${widgetConfig['widget-id']}-view-row-${rowIndex}-col-${key}`,
+                                                            'widget-label': '',
+                                                            'widget-readonly': true,
+                                                            'widget-data-path': undefined,
+                                                        };
+                                                        return (jsxRuntimeExports.jsx("td", { className: "px-4 py-3 whitespace-nowrap", children: jsxRuntimeExports.jsx("div", { className: "text-sm", children: jsxRuntimeExports.jsx(SelectDisplayValue, { config: displayConfig, value: row?.[key] }) }) }, key));
+                                                    }
+                                                    return (jsxRuntimeExports.jsx("td", { className: "px-4 py-3 whitespace-nowrap", children: jsxRuntimeExports.jsx("div", { className: "text-sm", children: displayValue }) }, key));
+                                                }), ((operations.edit || operations.remove) && !isReadonly) && (jsxRuntimeExports.jsx("td", { className: "px-4 py-3 whitespace-nowrap", style: { minWidth: '120px' }, children: jsxRuntimeExports.jsxs("div", { className: "flex gap-2", children: [operations.edit && (jsxRuntimeExports.jsx("button", { type: "button", onClick: () => openEditDialog(rowIndex), disabled: !isEnabled, className: "px-3 py-1 text-xs disabled:opacity-50 disabled:cursor-not-allowed", style: {
+                                                                    borderRadius: 'var(--owt-btn-border-radius, 10px)',
+                                                                    color: 'var(--owt-color-primary-dark, #F07B1A)',
+                                                                    backgroundColor: 'transparent',
+                                                                    border: 'none',
+                                                                }, children: translate('common.edit') || 'Edit' })), operations.remove && (jsxRuntimeExports.jsx("button", { type: "button", onClick: () => deleteRow(rowIndex), disabled: !isEnabled, className: "px-3 py-1 text-xs disabled:opacity-50 disabled:cursor-not-allowed", style: {
+                                                                    borderRadius: 'var(--owt-btn-border-radius, 10px)',
+                                                                    color: 'var(--owt-color-error, #B91C1C)',
+                                                                    backgroundColor: 'transparent',
+                                                                    border: 'none',
+                                                                }, children: translate('common.remove') || 'Delete' }))] }) }))] }, rowIndex)))] })] }) }), touched && error.length > 0 && (jsxRuntimeExports.jsx("p", { className: "text-sm mt-1", style: { color: 'var(--owt-widget-error-color, #B91C1C)' }, children: error[0] }))] }), dialogOpen && (jsxRuntimeExports.jsx("div", { className: "fixed inset-0 flex items-center justify-center z-50", style: { backgroundColor: 'rgba(0,0,0,0.5)' }, children: jsxRuntimeExports.jsxs("div", { className: "rounded-lg p-6 w-full mx-4", style: {
+                        maxWidth: '900px',
+                        backgroundColor: 'var(--owt-color-bg, #FFFFFF)',
+                        borderRadius: 'var(--owt-widget-card-border-radius, 20px)',
+                    }, children: [jsxRuntimeExports.jsxs("div", { className: "flex items-start justify-between gap-4 mb-4", children: [jsxRuntimeExports.jsx("h3", { className: "text-lg font-semibold", style: { color: 'var(--owt-color-text, #011627)' }, children: dialogMode === 'add' ? addDialogTitle : editDialogTitle }), jsxRuntimeExports.jsx("button", { type: "button", onClick: closeDialog, style: {
+                                        border: 'none',
+                                        background: 'transparent',
+                                        color: 'var(--owt-color-text-muted, #727474)',
+                                        cursor: 'pointer',
+                                        fontSize: '20px',
+                                        lineHeight: 1,
+                                    }, "aria-label": "Close", children: "\u00D7" })] }), jsxRuntimeExports.jsx("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", style: { maxHeight: '70vh', overflow: 'auto' }, children: columns.map((col) => {
+                                const key = col['column-key'];
+                                const widgetType = col.widget || 'text';
+                                const cellWidgetId = `${widgetConfig['widget-id']}-dialog-${dialogMode}-${key}`;
+                                const fieldConfig = {
+                                    ...col,
+                                    widget: widgetType,
+                                    'widget-type': col['widget-type'] || 'input',
+                                    'widget-id': cellWidgetId,
+                                    'widget-label': col['widget-label'],
+                                    'widget-readonly': isReadonly || col['widget-readonly'] === true,
+                                    'widget-data-path': undefined,
+                                    'widget-data-default': formData[key] ?? col['widget-data-default'] ?? '',
+                                };
+                                return (jsxRuntimeExports.jsx("div", { className: "min-w-0", children: jsxRuntimeExports.jsx(WidgetRenderer, { config: fieldConfig, schemaData: { [cellWidgetId]: formData[key] ?? col['widget-data-default'] ?? '' }, onValueChange: (_widgetId, newValue) => updateField(key, newValue) }) }, key));
+                            }) }), jsxRuntimeExports.jsxs("div", { className: "flex justify-end gap-3 mt-6", children: [jsxRuntimeExports.jsx("button", { type: "button", onClick: closeDialog, className: "px-4 py-2 text-sm font-medium", style: {
+                                        borderRadius: 'var(--owt-btn-border-radius, 10px)',
+                                        border: '1px solid var(--owt-btn-secondary-border, #C4C4C4)',
+                                        backgroundColor: 'var(--owt-btn-secondary-bg, #FFFFFF)',
+                                        color: 'var(--owt-btn-secondary-color, #011627)',
+                                    }, children: translate('common.cancel') || 'Cancel' }), jsxRuntimeExports.jsx("button", { type: "button", onClick: saveDialog, disabled: isReadonly || !isEnabled, className: "px-4 py-2 text-sm font-medium disabled:opacity-50 disabled:cursor-not-allowed", style: {
+                                        borderRadius: 'var(--owt-btn-border-radius, 10px)',
+                                        border: '1px solid var(--owt-btn-primary-border, #F07B1A)',
+                                        backgroundColor: 'var(--owt-color-primary, #F5BB1A)',
+                                        color: 'var(--owt-color-bg, #FFFFFF)',
+                                    }, children: translate('common.save') || 'Save' })] })] }) }))] }));
+};
+
 const ProfileWidget = ({ config }) => {
     const { value, config: widgetConfig, getFieldValue, } = useBaseWidget({ config });
     const { translateConfig } = useWidgetTranslation();
@@ -9571,6 +9790,68 @@ const HeaderSectionWidget = ({ config }) => {
     const createdAt = findValue('createdAt') || '';
     const lastApprovedBy = findValue('lastApprovedBy') || '';
     const lastApprovedAt = findValue('lastApprovedAt') || '';
+    // ── Validation: status change requires reason ──────────────────
+    // Behavior:
+    // - When status changes away from its initial value, clear reason and require it.
+    // - When status returns to initial value (or a parent "Cancel" restores it), restore initial reason.
+    const initialStatusRef = React.useRef(null);
+    const initialReasonRef = React.useRef(null);
+    const prevStatusRef = React.useRef(null);
+    const [showReasonRequired, setShowReasonRequired] = React.useState(false);
+    React.useEffect(() => {
+        // Capture initial status once when it becomes available.
+        if (initialStatusRef.current === null) {
+            const v = statusValue === undefined || statusValue === null ? '' : String(statusValue);
+            initialStatusRef.current = v;
+        }
+    }, [statusValue]);
+    React.useEffect(() => {
+        // Capture initial reason once when it becomes available.
+        if (initialReasonRef.current === null) {
+            const v = statusReason === undefined || statusReason === null ? '' : String(statusReason);
+            initialReasonRef.current = v;
+        }
+    }, [statusReason]);
+    const isStatusChanged = React.useMemo(() => {
+        const initial = initialStatusRef.current;
+        if (initial === null)
+            return false;
+        return String(statusValue) !== initial;
+    }, [statusValue]);
+    const isReasonMissing = React.useMemo(() => {
+        if (!isStatusChanged)
+            return false;
+        return String(statusReason || '').trim().length === 0;
+    }, [isStatusChanged, statusReason]);
+    React.useEffect(() => {
+        // When status changes:
+        // - If moved away from initial → clear reason.
+        // - If returned to initial → restore initial reason.
+        if (isReadonly)
+            return;
+        if (initialStatusRef.current === null)
+            return;
+        const currentStatus = String(statusValue || '');
+        if (prevStatusRef.current === currentStatus)
+            return;
+        prevStatusRef.current = currentStatus;
+        const initialStatus = initialStatusRef.current;
+        const initialReason = initialReasonRef.current ?? '';
+        if (currentStatus === initialStatus) {
+            // Reverted / cancelled back to original
+            if (String(statusReason || '') !== String(initialReason || '')) {
+                updateFieldValue('statusReason', initialReason);
+            }
+            setShowReasonRequired(false);
+            return;
+        }
+        // Status changed to a new value: clear reason (so user must re-enter)
+        if (String(statusReason || '').trim().length > 0) {
+            updateFieldValue('statusReason', '');
+        }
+        setShowReasonRequired(true);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [statusValue, isReadonly]);
     const score = React.useMemo(() => {
         const toNum = (v) => {
             if (v === null || v === undefined || String(v).trim() === '')
@@ -9584,7 +9865,9 @@ const HeaderSectionWidget = ({ config }) => {
             return null;
         const ratio = completion / ideal;
         const percent = Math.max(0, Math.min(100, Math.round(ratio * 100)));
-        return { completion, ideal, percent };
+        const completionDisplay = Number.isInteger(completion) ? completion : Math.round(completion);
+        const idealDisplay = Number.isInteger(ideal) ? ideal : Math.round(ideal);
+        return { completion, ideal, completionDisplay, idealDisplay, percent };
     }, [completionScoreRaw, idealScoreRaw]);
     // ── Format options ────────────────────────────────────────────
     const format = (widgetConfig['widget-data-format'] || {});
@@ -9880,6 +10163,19 @@ const HeaderSectionWidget = ({ config }) => {
           box-shadow: 0 0 0 2px rgba(237, 124, 34, 0.15);
         }
 
+        .${cls} .hdr-input--error {
+          border-color: var(--owt-color-danger, #DC2626);
+          box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.12);
+        }
+
+        .${cls} .hdr-error-text {
+          margin-left: calc(0px);
+          color: var(--owt-color-danger, #DC2626);
+          font-size: 0.75rem;
+          line-height: 1.2;
+          font-weight: 500;
+        }
+
         @media (max-width: 768px) {
           .${cls} {
             flex-direction: column;
@@ -9894,7 +10190,15 @@ const HeaderSectionWidget = ({ config }) => {
                                                 .parentElement?.querySelector('.hdr-avatar-placeholder');
                                             if (placeholder)
                                                 placeholder.style.display = 'flex';
-                                        } })) : 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] }) })] })] }));
+                                        } })) : null, jsxRuntimeExports.jsx("div", { className: "hdr-avatar-placeholder", style: { display: displayImageUrl ? 'none' : 'flex' }, children: jsxRuntimeExports.jsx("img", { src: img$f, alt: "Profile Placeholder" }) }), !isReadonly && (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsxs("div", { className: "hdr-avatar-overlay", children: [jsxRuntimeExports.jsxs("button", { type: "button", className: "hdr-avatar-action", onClick: () => fileInputRef.current?.click(), children: [jsxRuntimeExports.jsxs("svg", { width: "13", height: "13", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [jsxRuntimeExports.jsx("path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }), jsxRuntimeExports.jsx("polyline", { points: "17 8 12 3 7 8" }), jsxRuntimeExports.jsx("line", { x1: "12", y1: "3", x2: "12", y2: "15" })] }), "Upload"] }), jsxRuntimeExports.jsxs("button", { type: "button", className: "hdr-avatar-action hdr-avatar-action--delete", onClick: handleImageDelete, children: [jsxRuntimeExports.jsxs("svg", { width: "13", height: "13", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [jsxRuntimeExports.jsx("polyline", { points: "3 6 5 6 21 6" }), jsxRuntimeExports.jsx("path", { d: "M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" })] }), "Delete"] })] }), jsxRuntimeExports.jsx("input", { ref: fileInputRef, type: "file", accept: "image/*", style: { display: 'none' }, onChange: handleImageUpload })] }))] }), jsxRuntimeExports.jsxs("div", { className: "hdr-info", children: [displayName && jsxRuntimeExports.jsx("div", { className: "hdr-name", children: displayName }), jsxRuntimeExports.jsxs("div", { className: "hdr-field-row", children: [jsxRuntimeExports.jsxs("span", { className: "hdr-field-label", children: [getLabel('functionalId'), " :"] }), jsxRuntimeExports.jsx("span", { className: "hdr-field-value", children: functionalId || '-' })] }), jsxRuntimeExports.jsxs("div", { className: "hdr-field-row", children: [jsxRuntimeExports.jsx("span", { className: "hdr-field-label", children: getLabel('status') }), isReadonly ? (statusLabel ? (jsxRuntimeExports.jsx("span", { className: "hdr-status-badge", style: { backgroundColor: statusColor }, children: statusLabel })) : (jsxRuntimeExports.jsx("span", { className: "hdr-field-value", children: "-" }))) : (jsxRuntimeExports.jsxs("select", { className: "hdr-select", value: statusValue, onChange: (e) => updateFieldValue('status', e.target.value), children: [jsxRuntimeExports.jsx("option", { value: "", children: getLabel('select') }), statusOptions.map((opt) => (jsxRuntimeExports.jsx("option", { value: opt.value, children: opt.label }, opt.value)))] }))] }), jsxRuntimeExports.jsxs("div", { className: "hdr-field-row", children: [jsxRuntimeExports.jsxs("span", { className: "hdr-field-label", children: [getLabel('statusReason'), " :"] }), isReadonly ? (jsxRuntimeExports.jsx("span", { className: "hdr-field-value", children: statusReason || '-' })) : (jsxRuntimeExports.jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: 4 }, children: [jsxRuntimeExports.jsx("input", { type: "text", className: `hdr-input ${(!isReadonly && (showReasonRequired || isReasonMissing) && isReasonMissing) ? 'hdr-input--error' : ''}`, value: statusReason, placeholder: getLabel('enterReason'), required: isStatusChanged, "aria-required": isStatusChanged, "aria-invalid": !isReadonly && (showReasonRequired || isReasonMissing) && isReasonMissing, onBlur: () => {
+                                                            if (isReasonMissing)
+                                                                setShowReasonRequired(true);
+                                                        }, onChange: (e) => {
+                                                            updateFieldValue('statusReason', e.target.value);
+                                                            if (showReasonRequired && String(e.target.value || '').trim().length > 0) {
+                                                                setShowReasonRequired(false);
+                                                            }
+                                                        } }), !isReadonly && (showReasonRequired || isReasonMissing) && isReasonMissing ? (jsxRuntimeExports.jsx("div", { className: "hdr-error-text", children: getLabel('enterReason') })) : null] }))] })] })] }), jsxRuntimeExports.jsx("div", { className: "hdr-right", children: jsxRuntimeExports.jsxs("div", { className: "hdr-right-top", children: [jsxRuntimeExports.jsxs("div", { className: "hdr-meta-col", children: [jsxRuntimeExports.jsxs("div", { className: "hdr-meta-row", children: [jsxRuntimeExports.jsxs("span", { className: "hdr-meta-label", children: [getLabel('createdBy'), " :"] }), jsxRuntimeExports.jsx("span", { className: "hdr-meta-value", children: createdBy || '-' })] }), jsxRuntimeExports.jsxs("div", { className: "hdr-meta-row", children: [jsxRuntimeExports.jsxs("span", { className: "hdr-meta-label", children: [getLabel('createdAt'), " :"] }), jsxRuntimeExports.jsx("span", { className: "hdr-meta-value", children: createdAt || '-' })] }), jsxRuntimeExports.jsxs("div", { className: "hdr-meta-row", children: [jsxRuntimeExports.jsxs("span", { className: "hdr-meta-label", children: [getLabel('lastApprovedBy'), " :"] }), jsxRuntimeExports.jsx("span", { className: "hdr-meta-value", children: lastApprovedBy || '-' })] }), jsxRuntimeExports.jsxs("div", { className: "hdr-meta-row", children: [jsxRuntimeExports.jsxs("span", { className: "hdr-meta-label", children: [getLabel('lastApprovedAt'), " :"] }), jsxRuntimeExports.jsx("span", { className: "hdr-meta-value", children: lastApprovedAt || '-' })] })] }), score ? (jsxRuntimeExports.jsx("div", { className: "hdr-score-ring", style: { ['--pct']: score.percent }, "aria-label": `Completion score ${score.completionDisplay} of ${score.idealDisplay} (${score.percent}%)`, title: `${score.completionDisplay} / ${score.idealDisplay} (${score.percent}%)`, children: jsxRuntimeExports.jsx("div", { className: "hdr-score-value", children: String(score.completionDisplay) }) })) : null] }) })] })] }));
 };
 
 function getValueByPathOrKey(obj, path) {
@@ -10195,7 +10499,8 @@ function pickAuthorizationUrl(resp, explicitKey) {
         if (v)
             return v;
     }
-    return (tryKey('authorization_url') ||
+    return (tryKey('authentication_url') ||
+        tryKey('authorization_url') ||
         tryKey('authorizationUrl') ||
         tryKey('auth_url') ||
         tryKey('authUrl') ||
@@ -10210,12 +10515,14 @@ function resolveValueFromSources(path, values, schemaData) {
         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);
+function unwrapPayload(response) {
+    if (response && typeof response === 'object') {
+        if (response.response_body?.response_payload !== undefined)
+            return response.response_body.response_payload;
+        if (response.response_payload !== undefined)
+            return response.response_payload;
+    }
+    return response;
 }
 const IdAuthenticationWidget = ({ config, schemaData: propSchemaData }) => {
     const { dataSourceRequestHandler, schemaData: ctxSchemaData } = useWidgetContext();
@@ -10229,6 +10536,11 @@ const IdAuthenticationWidget = ({ config, schemaData: propSchemaData }) => {
         return dataPath;
     }, [dataPath]);
     const authConfig = config['widget-auth-config'];
+    const registerId = resolveValueFromSources(paths.registerId, values, schemaData);
+    const internalRecordId = resolveValueFromSources(paths.internalRecordId, values, schemaData);
+    const initiatedByStaffId = resolveValueFromSources(paths.initiatedByStaffId, values, schemaData);
+    const providerId = authConfig?.providerId;
+    const providerName = authConfig?.providerName;
     const foundationalId = resolveValueFromSources(paths.foundationalId, values, schemaData);
     const lastAuthenticatedOn = resolveValueFromSources(paths.lastAuthenticatedOn, values, schemaData);
     const lastAuthStatusRaw = resolveValueFromSources(paths.lastAuthenticationStatus, values, schemaData);
@@ -10237,11 +10549,11 @@ const IdAuthenticationWidget = ({ config, schemaData: propSchemaData }) => {
     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 [overlayUrl, setOverlayUrl] = React.useState(null);
     const emitHostEvent = React.useCallback((detail) => {
         if (typeof window === 'undefined')
             return;
@@ -10270,72 +10582,16 @@ const IdAuthenticationWidget = ({ config, schemaData: propSchemaData }) => {
             }
         };
     }, [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)
+    // Provider details are supplied by host; clear any previous resolved URL on provider 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);
-            }
+        setResolvedAuthUrl(null);
+    }, [providerId, providerName]);
+    const openAuthPopup = React.useCallback((authUrl) => {
+        if (authConfig?.useIframeOverlay !== false) {
+            setOverlayUrl(authUrl);
+            emitHostEvent({ type: 'overlay_opened' });
             return;
         }
-        let cancelled = false;
-        setProviderLoading(true);
-        (async () => {
-            try {
-                const url = await fetchProviderAuthorizationUrl(authConfig, dataSourceRequestHandler, values, schemaData);
-                if (cancelled)
-                    return;
-                if (url) {
-                    setResolvedAuthUrl(url);
-                }
-                else if (!def) {
-                    setResolvedAuthUrl(null);
-                }
-            }
-            catch {
-                if (cancelled)
-                    return;
-                if (!def) {
-                    setResolvedAuthUrl(null);
-                }
-            }
-            finally {
-                if (!cancelled)
-                    setProviderLoading(false);
-            }
-        })();
-        return () => {
-            cancelled = true;
-        };
-    }, [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);
@@ -10371,20 +10627,24 @@ const IdAuthenticationWidget = ({ config, schemaData: propSchemaData }) => {
             setAuthError('Missing widget-auth-config.');
             return;
         }
-        const def = authConfig.defaultAuthorizationUrl;
-        const canCallApi = Boolean(dataSourceRequestHandler && authConfig.service && authConfig.endpoint);
+        const canCallAuthApi = Boolean(dataSourceRequestHandler && authConfig.service && authConfig.authenticateEndpoint);
         let url = resolvedAuthUrl;
-        if (!url && canCallApi) {
+        if (!url && canCallAuthApi) {
             setAuthActionLoading(true);
             try {
-                const fetched = await fetchProviderAuthorizationUrl(authConfig, dataSourceRequestHandler, values, schemaData);
-                url = fetched || def || null;
-                if (fetched) {
-                    setResolvedAuthUrl(fetched);
-                }
+                const resp = await dataSourceRequestHandler(authConfig.service, authConfig.authenticateEndpoint, authConfig.authenticateMethod || 'POST', {
+                    register_id: registerId,
+                    internal_record_id: internalRecordId,
+                    provider_id: authConfig.providerId,
+                    initiated_by_staff_id: initiatedByStaffId,
+                });
+                const payload = unwrapPayload(resp);
+                const authUrl = pickAuthorizationUrl(payload, authConfig.authorizationUrlKey);
+                url = authUrl || null;
+                if (authUrl)
+                    setResolvedAuthUrl(authUrl);
             }
             catch (e) {
-                url = def || null;
                 if (!url) {
                     setAuthError(e?.message || 'Could not load provider URL.');
                     return;
@@ -10394,15 +10654,20 @@ const IdAuthenticationWidget = ({ config, schemaData: propSchemaData }) => {
                 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.');
+            setAuthError('No authorization URL returned from authenticate_registrant.');
             return;
         }
         openAuthPopup(url);
-    }, [authConfig, dataSourceRequestHandler, openAuthPopup, resolvedAuthUrl, values, schemaData]);
+    }, [
+        authConfig,
+        dataSourceRequestHandler,
+        openAuthPopup,
+        registerId,
+        internalRecordId,
+        initiatedByStaffId,
+        resolvedAuthUrl,
+    ]);
     React.useEffect(() => {
         const successType = authConfig?.successMessageType || 'openg2p:oidc:success';
         const handler = (event) => {
@@ -10447,8 +10712,7 @@ const IdAuthenticationWidget = ({ config, schemaData: propSchemaData }) => {
             return 'var(--owt-color-warning, #D97706)';
         return 'var(--owt-color-text-muted, #6B7280)';
     }, [status]);
-    const buttonBusy = authActionLoading ||
-        (providerLoading && !resolvedAuthUrl && !authConfig?.defaultAuthorizationUrl);
+    const buttonBusy = authActionLoading;
     const buttonDisabled = !authConfig || buttonBusy;
     return (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [jsxRuntimeExports.jsx("style", { children: `
         .${cls} {
@@ -10484,6 +10748,14 @@ const IdAuthenticationWidget = ({ config, schemaData: propSchemaData }) => {
           grid-column: 1 / -1;
         }
 
+        /* Action cell: no left label spacer, align button to column start */
+        .${cls} .auth-cell.auth-cell--action .auth-label {
+          display: none;
+        }
+        .${cls} .auth-cell.auth-cell--action .auth-value {
+          flex: 1 1 auto;
+        }
+
         .${cls} .auth-label {
           flex: 0 0 auto;
           min-width: 200px;
@@ -10506,17 +10778,15 @@ const IdAuthenticationWidget = ({ config, schemaData: propSchemaData }) => {
           word-break: break-word;
         }
 
-        .${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-value--foundational {
+          font-size: 18px;
+          font-weight: 700;
+          color: var(--owt-color-primary-dark, #F07B1A);
+          letter-spacing: 0.1px;
         }
 
+        /* Button is placed inside the grid (next to PSUT) */
+
         .${cls} .auth-status {
           display: inline-flex;
           align-items: center;
@@ -10557,8 +10827,8 @@ const IdAuthenticationWidget = ({ config, schemaData: propSchemaData }) => {
           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);
+          border: 1px solid rgb(237, 124, 34);
+          background-color: rgb(237, 124, 34);
           color: var(--owt-color-bg, #FFFFFF);
           font-family: Roboto, sans-serif;
           cursor: pointer;
@@ -10579,6 +10849,63 @@ const IdAuthenticationWidget = ({ config, schemaData: propSchemaData }) => {
           max-width: 100%;
         }
 
+        .${cls} .overlay-backdrop {
+          position: fixed;
+          inset: 0;
+          background: rgba(17, 24, 39, 0.55);
+          z-index: 9999;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          padding: 24px;
+        }
+
+        .${cls} .overlay-panel {
+          width: min(1100px, 92vw);
+          height: min(820px, 92vh);
+          background: var(--owt-color-bg, #FFFFFF);
+          border-radius: 12px;
+          box-shadow: 0 10px 30px rgba(0,0,0,0.25);
+          overflow: hidden;
+          display: flex;
+          flex-direction: column;
+        }
+
+        .${cls} .overlay-header {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          padding: 10px 14px;
+          border-bottom: 1px solid var(--owt-color-border-light, #E4E4E4);
+          font-family: Roboto, sans-serif;
+        }
+
+        .${cls} .overlay-title {
+          font-size: 14px;
+          color: var(--owt-color-text, #011627);
+          font-weight: 600;
+          min-width: 0;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+
+        .${cls} .overlay-close {
+          border: 1px solid var(--owt-btn-secondary-border, #C4C4C4);
+          background: var(--owt-btn-secondary-bg, #FFFFFF);
+          color: var(--owt-btn-secondary-color, #011627);
+          border-radius: var(--owt-btn-border-radius, 10px);
+          padding: 6px 10px;
+          font-size: 12px;
+          cursor: pointer;
+        }
+
+        .${cls} .overlay-iframe {
+          flex: 1 1 auto;
+          width: 100%;
+          border: none;
+        }
+
         @media (max-width: 640px) {
           .${cls} .auth-grid {
             grid-template-columns: 1fr;
@@ -10593,7 +10920,15 @@ const IdAuthenticationWidget = ({ config, schemaData: propSchemaData }) => {
             max-width: none;
           }
         }
-      ` }), 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] })] }) })] }));
+      ` }), jsxRuntimeExports.jsxs("div", { className: cls, children: [overlayUrl ? (jsxRuntimeExports.jsx("div", { className: "overlay-backdrop", role: "dialog", "aria-modal": "true", "aria-label": "Authentication", onClick: (e) => {
+                            if (e.target === e.currentTarget) {
+                                setOverlayUrl(null);
+                                emitHostEvent({ type: 'overlay_closed' });
+                            }
+                        }, children: jsxRuntimeExports.jsxs("div", { className: "overlay-panel", children: [jsxRuntimeExports.jsxs("div", { className: "overlay-header", children: [jsxRuntimeExports.jsx("div", { className: "overlay-title", children: providerName ? `Authenticate via ${providerName}` : 'Authenticate' }), jsxRuntimeExports.jsx("button", { type: "button", className: "overlay-close", onClick: () => {
+                                                setOverlayUrl(null);
+                                                emitHostEvent({ type: 'overlay_closed' });
+                                            }, children: "Close" })] }), jsxRuntimeExports.jsx("iframe", { className: "overlay-iframe", src: overlayUrl, title: "Authentication" })] }) })) : null, jsxRuntimeExports.jsx("div", { className: "auth-content", children: jsxRuntimeExports.jsxs("div", { className: "auth-grid", children: [jsxRuntimeExports.jsxs("div", { className: "auth-cell", children: [jsxRuntimeExports.jsx("div", { className: "auth-label", children: "Foundational ID:" }), jsxRuntimeExports.jsx("div", { className: "auth-value auth-value--foundational", children: displayText(foundationalId) })] }), jsxRuntimeExports.jsxs("div", { className: "auth-cell", children: [jsxRuntimeExports.jsx("div", { className: "auth-label", children: "Last authenticated on:" }), jsxRuntimeExports.jsx("div", { className: "auth-value", children: tryFormatDateTime(lastAuthenticatedOn) })] }), jsxRuntimeExports.jsxs("div", { className: "auth-cell", children: [jsxRuntimeExports.jsx("div", { className: "auth-label", children: "Expiry date:" }), jsxRuntimeExports.jsx("div", { className: "auth-value", children: tryFormatDate(expiryDate) })] }), jsxRuntimeExports.jsxs("div", { className: "auth-cell", children: [jsxRuntimeExports.jsx("div", { className: "auth-label", children: "Last authentication status:" }), jsxRuntimeExports.jsx("div", { className: "auth-value", children: jsxRuntimeExports.jsxs("div", { className: "auth-status", "aria-label": `Authentication status: ${statusLabel}`, children: [jsxRuntimeExports.jsx("span", { className: "auth-dot" }), jsxRuntimeExports.jsx("span", { children: statusLabel })] }) })] }), jsxRuntimeExports.jsxs("div", { className: "auth-cell", children: [jsxRuntimeExports.jsx("div", { className: "auth-label", children: "Authentication token (PSUT):" }), jsxRuntimeExports.jsx("div", { className: "auth-value", children: jsxRuntimeExports.jsx("div", { className: "auth-token", children: psut ? String(psut) : '-' }) })] }), jsxRuntimeExports.jsxs("div", { className: "auth-cell auth-cell--action", children: [jsxRuntimeExports.jsx("div", { className: "auth-label", "aria-hidden": true }), jsxRuntimeExports.jsxs("div", { className: "auth-value", children: [jsxRuntimeExports.jsx("button", { type: "button", className: "auth-button", onClick: onAuthenticate, disabled: buttonDisabled, children: buttonBusy ? 'Loading…' : 'Authenticate' }), authError ? (jsxRuntimeExports.jsx("div", { className: "auth-error", style: { marginTop: 8 }, children: authError })) : null] })] })] }) })] })] }));
 };
 
 /**
@@ -10625,6 +10960,8 @@ const registerDefaultWidgets = () => {
     widgetRegistry.register({ widget: 'simple-table', component: SimpleTableWidget });
     // Table widget with record-level editing
     widgetRegistry.register({ widget: 'table', component: TableWidget });
+    // Table widget with add/edit popup dialog
+    widgetRegistry.register({ widget: 'dialog-table', component: DialogTableWidget });
     // Group widgets
     widgetRegistry.register({ widget: 'array-widget', component: ArrayWidget });
     widgetRegistry.register({ widget: 'iterable-accordion', component: IterableAccordionWidget });
@@ -11009,6 +11346,7 @@ exports.CheckboxWidget = CheckboxWidget;
 exports.CurrencyInputWidget = CurrencyInputWidget;
 exports.DateInputWidget = DateInputWidget;
 exports.DateTimeInputWidget = DateTimeInputWidget;
+exports.DialogTableWidget = DialogTableWidget;
 exports.DisplayWidget = DisplayWidget;
 exports.FileInputWidget = FileInputWidget;
 exports.HeaderSectionWidget = HeaderSectionWidget;