@qoretechnologies/reqraft 0.10.2 → 0.10.4

package/dist/components/form/engine/FormEngine.js

@@ -322,6 +322,10 @@ var FormEngine = function (_a) {
     var _x = (0, react_2.useState)(false), showInvalidOptionsOnly = _x[0], setShowInvalidOptionsOnly = _x[1];
     // Which options are expanded into their editor (several can be open at once).
     var _y = (0, react_2.useState)([]), expandedOptions = _y[0], setExpandedOptions = _y[1];
+    // Remembers each row's last settled status box, so an actively-edited field
+    // stays put when its status flips (e.g. becomes valid) instead of jumping to
+    // another box mid-edit and stealing focus. Keyed by option name.
+    var settledBucket = (0, react_2.useRef)({});
     // Measured form width (not viewport — the form lives in drawers/panels of
     // arbitrary width) drives the stacked narrow layout.
     var _z = (0, react_use_1.useMeasure)(), compactWrapRef = _z[0], compactWrapWidth = _z[1].width;
@@ -889,6 +893,67 @@ var FormEngine = function (_a) {
             return __assign(__assign({}, newValue), (_a = {}, _a[optionName] = option, _a));
         }, {});
     }, [showInvalidOptionsOnly, JSON.stringify(availableOptions)]);
+    // Read-first STATUS / BOX for one option — lifted to component scope so the
+    // status boxes (renderCompact) and the header's "needs attention" count share
+    // exactly one definition. One-of group members travel together (bucket by the
+    // group's satisfaction); everything else by its own status.
+    var schemaMsgIntent = (0, react_2.useCallback)(function (name) {
+        var _a;
+        var msgs = (((_a = options === null || options === void 0 ? void 0 : options[name]) === null || _a === void 0 ? void 0 : _a.messages) || []);
+        if (msgs.some(function (m) { return m.intent === 'danger'; }))
+            return 'danger';
+        if (msgs.some(function (m) { return m.intent === 'warning'; }))
+            return 'warning';
+        return undefined;
+    }, [JSON.stringify(options)]);
+    var getOptionStatus = (0, react_2.useCallback)(function (name, hidden) {
+        var _a;
+        if (hidden === void 0) { hidden = false; }
+        if (hidden)
+            return 'optional';
+        var schema = options === null || options === void 0 ? void 0 : options[name];
+        var type = ((schema === null || schema === void 0 ? void 0 : schema.ui_type) || (schema === null || schema === void 0 ? void 0 : schema.type));
+        var value = (_a = availableOptions === null || availableOptions === void 0 ? void 0 : availableOptions[name]) === null || _a === void 0 ? void 0 : _a.value;
+        var empty = (0, readFirst_1.isOptionValueEmpty)(value);
+        var reqGroups = (schema === null || schema === void 0 ? void 0 : schema.required_groups) || [];
+        var required = !!((schema === null || schema === void 0 ? void 0 : schema.required) || reqGroups.length);
+        var covered = empty &&
+            reqGroups.some(function (g) {
+                var by = requiredGroupsInfo.satisfiedBy[g];
+                return !!by && by !== name;
+            });
+        var msgIntent = schemaMsgIntent(name);
+        var invalid = (!empty && !isOptionValid(name, type, value)) || msgIntent === 'danger';
+        return (0, readFirst_1.getReadFirstStatus)({
+            empty: empty,
+            required: required,
+            covered: covered,
+            invalid: invalid,
+            warned: msgIntent === 'warning',
+        });
+    }, [
+        JSON.stringify(options),
+        JSON.stringify(availableOptions),
+        isOptionValid,
+        requiredGroupsInfo,
+        schemaMsgIntent,
+    ]);
+    var getOptionBucket = (0, react_2.useCallback)(function (name, hidden) {
+        var _a;
+        if (hidden === void 0) { hidden = false; }
+        if (!hidden) {
+            var reqGroups = ((_a = options === null || options === void 0 ? void 0 : options[name]) === null || _a === void 0 ? void 0 : _a.required_groups) || [];
+            if (reqGroups.length) {
+                return reqGroups.some(function (g) { return !requiredGroupsInfo.satisfiedBy[g]; }) ? 'attention' : 'set';
+            }
+        }
+        return (0, readFirst_1.getReadFirstBucket)(getOptionStatus(name, hidden));
+    }, [JSON.stringify(options), requiredGroupsInfo, getOptionStatus]);
+    // How many fields are in the "Needs attention" box — drives the header link.
+    var readFirstAttentionCount = (0, react_2.useMemo)(function () {
+        return Object.keys(availableOptions || {}).filter(function (name) { return getOptionBucket(name) === 'attention'; })
+            .length;
+    }, [JSON.stringify(availableOptions), getOptionBucket]);
     var getIntent = (0, react_2.useCallback)(
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     function (optName, type, optValue, _op) {
@@ -1011,13 +1076,27 @@ var FormEngine = function (_a) {
     // The info panel below the row keeps showing schema messages while editing —
     // rendering them in the editor too would balloon a one-line edit.
     suppressSchemaMessages) {
-        var _b, _c, _d, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
+        var _b, _c, _d, _f, _g, _h, _j, _k, _l, _m, _o, _p;
         var type = _a.type, other = __rest(_a, ["type"]);
         var operatorParts = (0, exports.fixOperatorValue)(other.op);
-        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(suppressSchemaMessages ? [] : ((_b = options === null || options === void 0 ? void 0 : options[optionName]) === null || _b === void 0 ? void 0 : _b.messages) || []).map(function (_a, index) {
-                    var intent = _a.intent, title = _a.title, content = _a.content;
-                    return ((0, jsx_runtime_1.jsx)(reqore_1.ReqoreMessage, { intent: intent, title: title, opaque: false, size: 'small', margin: 'bottom', children: content }, title || index));
-                }), operators && (0, size_1.default)(operators) ?
+        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(function () {
+                    var _a;
+                    var schemaMsgs = (suppressSchemaMessages ? [] : ((_a = options === null || options === void 0 ? void 0 : options[optionName]) === null || _a === void 0 ? void 0 : _a.messages) || []);
+                    if (!schemaMsgs.length)
+                        return null;
+                    var items = schemaMsgs.map(function (_a, index) {
+                        var intent = _a.intent, title = _a.title, content = _a.content;
+                        return ((0, jsx_runtime_1.jsx)(reqore_1.ReqoreMessage, { intent: intent, title: title, opaque: false, size: 'small', 
+                            // Compact: flat (no border) to match the read-row info panels;
+                            // classic forms keep the bordered, bottom-margined message.
+                            flat: compact || undefined, margin: compact ? undefined : 'bottom', children: content }, title || index));
+                    });
+                    // Compact: stack them in a 4px-gap panel so a field's messages look
+                    // identical whether the row is collapsed (read panel) or expanded.
+                    return compact ?
+                        (0, jsx_runtime_1.jsx)("div", { className: 'options-readfirst-info-panel', style: { display: 'flex', flexFlow: 'column', gap: 4, marginBottom: 8 }, children: items })
+                        : (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: items });
+                })(), operators && (0, size_1.default)(operators) ?
                     (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(reqore_1.ReqoreControlGroup, { fill: true, wrap: true, className: 'operators', children: operatorParts.map(function (operator, index) {
                                     var _a, _b;
                                     return ((0, jsx_runtime_1.jsxs)(react_2.default.Fragment, { children: [(0, jsx_runtime_1.jsx)(Select_1.SelectFormField, { items: (0, map_1.default)(operators, function (op) { return (__assign(__assign({}, op), { value: op.name })); }), disabled: readOnly, value: operator && "".concat((_a = operators === null || operators === void 0 ? void 0 : operators[operator]) === null || _a === void 0 ? void 0 : _a.name), onChange: function (val) {
@@ -1033,18 +1112,21 @@ var FormEngine = function (_a) {
                                                 : null] }, index));
                                 }) }), (0, jsx_runtime_1.jsx)(reqore_1.ReqoreVerticalSpacer, { height: 5 })] })
                     : null, (0, react_1.createElement)(TemplateField_1.TemplateField, __assign({ fluid: true }, options === null || options === void 0 ? void 0 : options[optionName], { 
+                    // Propagate compact so an arg_schema field renders a COMPACT sub-form
+                    // (consistent with the parent) rather than the classic FormEngine.
+                    compact: compact, 
                     // SEAM: forwarded through TemplateField's rest-spread to AutoFormField,
                     // which renders consumer-injected editors by field type/ui_type.
-                    componentOverrides: componentOverrides, allowTemplates: !!(allowTemplates && ((_c = options === null || options === void 0 ? void 0 : options[optionName]) === null || _c === void 0 ? void 0 : _c.supports_templates)), allowFunctions: !!((_d = options === null || options === void 0 ? void 0 : options[optionName]) === null || _d === void 0 ? void 0 : _d.supports_expressions), 
+                    componentOverrides: componentOverrides, allowTemplates: !!(allowTemplates && ((_b = options === null || options === void 0 ? void 0 : options[optionName]) === null || _b === void 0 ? void 0 : _b.supports_templates)), allowFunctions: !!((_c = options === null || options === void 0 ? void 0 : options[optionName]) === null || _c === void 0 ? void 0 : _c.supports_expressions), 
                     // reqraft: form-level expression fields get the Visual/Text shell
                     // (DPQL text mode); opt out per-form via `templateFieldProps`.
-                    allowTextExpressions: true, allowCustomValues: ((_f = options === null || options === void 0 ? void 0 : options[optionName]) === null || _f === void 0 ? void 0 : _f.supports_custom_values) !== false && type !== 'any', templates: templates.value }, (0, exports.getTypeAndCanBeNull)(type, (_g = options === null || options === void 0 ? void 0 : options[optionName]) === null || _g === void 0 ? void 0 : _g.allowed_values, other.op), { ui_type: type, name: optionName, uniqueName: "".concat(uniqueName ? "".concat(uniqueName, ".") : "".concat(name ? "".concat(name, ".") : '')).concat(optionName), onChange: 
+                    allowTextExpressions: true, allowCustomValues: ((_d = options === null || options === void 0 ? void 0 : options[optionName]) === null || _d === void 0 ? void 0 : _d.supports_custom_values) !== false && type !== 'any', templates: templates.value }, (0, exports.getTypeAndCanBeNull)(type, (_f = options === null || options === void 0 ? void 0 : options[optionName]) === null || _f === void 0 ? void 0 : _f.allowed_values, other.op), { ui_type: type, name: optionName, uniqueName: "".concat(uniqueName ? "".concat(uniqueName, ".") : "".concat(name ? "".concat(name, ".") : '')).concat(optionName), onChange: 
                     // Identity-stable on purpose: the typed fields debounce on
                     // `[localValue, onChange]` — an inline lambda resets the pending emit
                     // every render and the typed value can starve.
-                    handleValueChange, key: optionName, arg_schema: (_h = options === null || options === void 0 ? void 0 : options[optionName]) === null || _h === void 0 ? void 0 : _h.arg_schema, noSoft: !!(rest === null || rest === void 0 ? void 0 : rest.options), value: other.value, isFunction: other.is_expression, isDefaultFunction: ((_j = options === null || options === void 0 ? void 0 : options[optionName]) === null || _j === void 0 ? void 0 : _j.default_view) === 'expression', sensitive: (_k = options === null || options === void 0 ? void 0 : options[optionName]) === null || _k === void 0 ? void 0 : _k.sensitive, default_value: (0, common_1.getDefaultValue)(options === null || options === void 0 ? void 0 : options[optionName]), isDefaultTemplate: ((_l = options === null || options === void 0 ? void 0 : options[optionName]) === null || _l === void 0 ? void 0 : _l.default_view) === 'template', allowed_values: (_m = options === null || options === void 0 ? void 0 : options[optionName]) === null || _m === void 0 ? void 0 : _m.allowed_values, disabled: ((_o = options === null || options === void 0 ? void 0 : options[optionName]) === null || _o === void 0 ? void 0 : _o.disabled) ||
+                    handleValueChange, key: optionName, arg_schema: (_g = options === null || options === void 0 ? void 0 : options[optionName]) === null || _g === void 0 ? void 0 : _g.arg_schema, noSoft: !!(rest === null || rest === void 0 ? void 0 : rest.options), value: other.value, isFunction: other.is_expression, isDefaultFunction: ((_h = options === null || options === void 0 ? void 0 : options[optionName]) === null || _h === void 0 ? void 0 : _h.default_view) === 'expression', sensitive: (_j = options === null || options === void 0 ? void 0 : options[optionName]) === null || _j === void 0 ? void 0 : _j.sensitive, default_value: (0, common_1.getDefaultValue)(options === null || options === void 0 ? void 0 : options[optionName]), isDefaultTemplate: ((_k = options === null || options === void 0 ? void 0 : options[optionName]) === null || _k === void 0 ? void 0 : _k.default_view) === 'template', allowed_values: (_l = options === null || options === void 0 ? void 0 : options[optionName]) === null || _l === void 0 ? void 0 : _l.allowed_values, disabled: ((_m = options === null || options === void 0 ? void 0 : options[optionName]) === null || _m === void 0 ? void 0 : _m.disabled) ||
                         readOnly ||
-                        !(0, validations_1.hasAllDependenciesFullfilled)((_p = options === null || options === void 0 ? void 0 : options[optionName]) === null || _p === void 0 ? void 0 : _p.depends_on, availableOptions, options || {}), readOnly: readOnly, size: editorSize || rest.size, menuItems: ((_q = options === null || options === void 0 ? void 0 : options[optionName]) === null || _q === void 0 ? void 0 : _q.ui_type) === 'any' ?
+                        !(0, validations_1.hasAllDependenciesFullfilled)((_o = options === null || options === void 0 ? void 0 : options[optionName]) === null || _o === void 0 ? void 0 : _o.depends_on, availableOptions, options || {}), readOnly: readOnly, size: editorSize || rest.size, menuItems: ((_p = options === null || options === void 0 ? void 0 : options[optionName]) === null || _p === void 0 ? void 0 : _p.ui_type) === 'any' ?
                         getCustomMenuTemplateItems(optionName)
                         : undefined }, templateFieldProps)), (0, jsx_runtime_1.jsx)(OptionFieldMessages_1.OptionFieldMessages, { schema: options || {}, allOptions: availableOptions, name: optionName, option: __assign({ type: type }, other), getType: getTypeForOption }), operators && (0, size_1.default)(operators) && (0, size_1.default)(other.op) ?
                     (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(reqore_1.ReqoreVerticalSpacer, { height: 5 }), (0, jsx_runtime_1.jsx)(reqore_1.ReqoreMessage, { size: 'small', children: (0, jsx_runtime_1.jsxs)(reqore_1.ReqoreTagGroup, { children: [(0, jsx_runtime_1.jsx)(reqore_1.ReqoreTag, { size: 'small', labelKey: 'WHERE', label: optionName }), (0, jsx_runtime_1.jsx)(reqore_1.ReqoreTag, { size: 'small', labelKey: 'IS', label: operatorParts.join(' ') }), (0, jsx_runtime_1.jsx)(reqore_1.ReqoreTag, { size: 'small', intent: 'info', label: other.value ?
@@ -1187,6 +1269,7 @@ var FormEngine = function (_a) {
     var compactToolbarContextValue = (0, react_2.useMemo)(function () { return ({
         readOnly: readOnly,
         invalidCount: (0, size_1.default)(validityData.invalidFields),
+        attentionCount: readFirstAttentionCount,
         completion: readFirstCompletion,
         showInvalidOnly: showInvalidOptionsOnly,
         onToggleInvalidOnly: handleToggleInvalidOnly,
@@ -1211,6 +1294,7 @@ var FormEngine = function (_a) {
     }); }, [
         readOnly,
         validityData,
+        readFirstAttentionCount,
         readFirstCompletion,
         showInvalidOptionsOnly,
         handleToggleInvalidOnly,
@@ -1317,6 +1401,57 @@ var FormEngine = function (_a) {
                 return 1;
             return groupOrder.indexOf(a) - groupOrder.indexOf(b);
         });
+        var buckets = {
+            attention: {},
+            set: {},
+            optional: {},
+        };
+        var bucketGroups = { attention: [], set: [], optional: [] };
+        // Freeze the box of any field currently being edited (or whose one-of group
+        // has an edited member) to its last settled box — so finishing an edit that
+        // flips its status doesn't remount it in another box and steal focus.
+        var stableBucketOf = function (entry) {
+            var _a;
+            var fresh = getOptionBucket(entry.name, entry.hidden);
+            var groupBeingEdited = !entry.hidden &&
+                (((_a = options === null || options === void 0 ? void 0 : options[entry.name]) === null || _a === void 0 ? void 0 : _a.required_groups) || []).some(function (g) {
+                    return (requiredGroupsInfo.members[g] || []).some(function (m) { return expandedOptions.includes(m); });
+                });
+            if (!entry.hidden && (expandedOptions.includes(entry.name) || groupBeingEdited)) {
+                var memo = settledBucket.current[entry.name];
+                if (memo)
+                    return memo;
+            }
+            settledBucket.current[entry.name] = fresh;
+            return fresh;
+        };
+        groupKeys.forEach(function (groupName) {
+            grouped[groupName].forEach(function (entry) {
+                var b = stableBucketOf(entry);
+                if (!buckets[b][groupName]) {
+                    buckets[b][groupName] = [];
+                    bucketGroups[b].push(groupName);
+                }
+                buckets[b][groupName].push(entry);
+            });
+        });
+        var bucketCount = function (b) {
+            return bucketGroups[b].reduce(function (n, g) { return n + buckets[b][g].length; }, 0);
+        };
+        // 'general' / 'optional' are the SYNTHETIC fallback group keys getOptionGroup
+        // assigns to fields with no explicit `group` — printing a "General"/"Optional"
+        // sub-label for those is just noise, so suppress it. BUT a consumer may also
+        // use 'general' as a REAL group (defining it in the `groups` prop and tagging
+        // fields with `group: 'general'`); in that case it's a named group like any
+        // other and DOES get its sub-label.
+        var showGroupSubLabel = function (groupName) {
+            return (groupName !== 'general' && groupName !== 'optional') || !!(groups === null || groups === void 0 ? void 0 : groups[groupName]);
+        };
+        var STATUS_BOXES = [
+            { key: 'attention', label: 'Needs attention', intent: 'warning', icon: 'ErrorWarningLine' },
+            { key: 'set', label: 'Set', intent: 'success', icon: 'CheckLine' },
+            { key: 'optional', label: 'Optional', icon: 'CheckboxBlankCircleLine' },
+        ];
         // Build the rows for one group: contiguous required-group members are pulled
         // together at the first member's slot and rendered as a connected rail (flat
         // rows — no wrapper — so the value surface applies normally; the rail + nodes
@@ -1331,8 +1466,9 @@ var FormEngine = function (_a) {
                         }
                         : shownOptions[entry.name], hidden: entry.hidden, clustered: clustered, clusterFirst: clusterFirst, clusterLast: clusterLast }, entry.name));
             };
-            if (compactNarrow)
-                return names.map(function (entry) { return renderRow(entry, false); });
+            // (Clustering runs in narrow mode too now — the "One of the below is
+            // required" box wraps the members regardless of width; it no longer relies
+            // on a contiguous rail.)
             var emitted = new Set();
             var groupOf = function (name) { var _a, _b; return (_b = (_a = options === null || options === void 0 ? void 0 : options[name]) === null || _a === void 0 ? void 0 : _a.required_groups) === null || _b === void 0 ? void 0 : _b[0]; };
             return names.map(function (entry) {
@@ -1345,9 +1481,15 @@ var FormEngine = function (_a) {
                 if (memberEntries.length < 2)
                     return renderRow(entry, false);
                 emitted.add(grp);
-                return memberEntries.map(function (e, idx) {
+                var railed = memberEntries.map(function (e, idx) {
                     return renderRow(e, true, idx === 0, idx === memberEntries.length - 1);
                 });
+                // An UNMET one-of group gets the explicit "One of the below is required"
+                // box (the Focus cluster). A met group needs no banner — the rail + the
+                // "Covers"/"Covered by" chips already say which member satisfies it.
+                if (requiredGroupsInfo.satisfiedBy[grp])
+                    return railed;
+                return ((0, jsx_runtime_1.jsxs)(compactRowStyles_1.StyledRequiredClusterBox, { className: 'options-readfirst-required-cluster', "$border": "".concat(cWarning, "33"), "$tint": "".concat(cWarning, "0d"), children: [(0, jsx_runtime_1.jsxs)(compactRowStyles_1.StyledRequiredClusterHeader, { "$color": cWarning, children: [(0, jsx_runtime_1.jsx)(reqore_1.ReqoreIcon, { icon: 'LinkM', size: '11px', style: { color: cWarning } }), "One of the below is required"] }), railed] }, grp));
             });
         };
         return ((0, jsx_runtime_1.jsx)(exports.OptionsContext.Provider, { value: { schema: options, value: availableOptions }, children: (0, jsx_runtime_1.jsx)(compactRowContext_1.CompactRowContext.Provider, { value: compactRowContextValue, children: (0, jsx_runtime_1.jsxs)(reqore_1.ReqoreErrorBoundary, { children: [showHelpForOption && ((0, jsx_runtime_1.jsx)(OptionsHelpDialog_1.OptionsHelpDialog, { onClose: function () { return setShowHelpForOption(undefined); }, option: options[showHelpForOption] })), (0, jsx_runtime_1.jsx)(compactToolbarContext_1.CompactToolbarContext.Provider, { value: compactToolbarContextValue, children: (0, jsx_runtime_1.jsxs)(StyledCompactWrap, { ref: setCompactWrap, className: 'options-readfirst-scroll', "$flush": compactFlush, children: [(0, jsx_runtime_1.jsxs)(compactRowStyles_1.StyledCompactPanel, { "$headerBg": headerBg, flat: true, stickyHeader: true, padded: false, actions: compactHeaderActions, contentStyle: {
@@ -1357,39 +1499,33 @@ var FormEngine = function (_a) {
                                             padding: '0 0 12px',
                                         }, children: [(0, size_1.default)(groupKeys) === 0 ?
                                                 (0, jsx_runtime_1.jsx)(reqore_1.ReqoreMessage, { flat: true, opaque: false, size: 'small', children: "No fields match the current filters." })
-                                                : null, groupKeys.map(function (groupName) {
-                                                var names = grouped[groupName];
-                                                var groupConfig = groups === null || groups === void 0 ? void 0 : groups[groupName];
-                                                var invalidCount = names.filter(function (entry) {
-                                                    var _a, _b, _c;
-                                                    return !entry.hidden &&
-                                                        !isOptionValid(entry.name, ((_a = options === null || options === void 0 ? void 0 : options[entry.name]) === null || _a === void 0 ? void 0 : _a.ui_type) ||
-                                                            ((_b = options === null || options === void 0 ? void 0 : options[entry.name]) === null || _b === void 0 ? void 0 : _b.type), (_c = shownOptions[entry.name]) === null || _c === void 0 ? void 0 : _c.value);
-                                                }).length;
-                                                return ((0, jsx_runtime_1.jsxs)(reqore_1.ReqorePanel, { flat: true, minimal: true, collapseButtonProps: { flat: true, minimal: true, size: 'small' }, collapsible: true, label: (0, jsx_runtime_1.jsxs)(compactRowStyles_1.StyledGroupHeader, { children: [(0, jsx_runtime_1.jsx)(reqore_1.ReqoreP, { effect: { weight: 'bold' }, size: 'big', children: (0, readFirst_1.getOptionGroupLabel)(groupName, groups) }), (0, jsx_runtime_1.jsx)(compactRowStyles_1.StyledGroupHeaderLine, { "$color": cGroupLine }), (0, jsx_runtime_1.jsx)(reqore_1.ReqoreButton, __assign({ readOnly: true, size: 'tiny', minimal: true, flat: true, compact: true, effect: { uppercase: true, spaced: 1 } }, (groupName === 'optional' ? { label: "".concat(names.length, " optional") }
-                                                                : invalidCount ?
-                                                                    {
-                                                                        label: "".concat(invalidCount, " to resolve"),
-                                                                        intent: 'warning',
-                                                                        icon: 'ErrorWarningLine',
-                                                                    }
-                                                                    : {
-                                                                        label: 'All set',
-                                                                        intent: 'success',
-                                                                        icon: 'CheckLine',
-                                                                    })))] }), icon: groupConfig === null || groupConfig === void 0 ? void 0 : groupConfig.icon, className: 'options-readfirst-group', padded: false, contentStyle: { padding: '4px 4px 6px' }, children: [(groupConfig === null || groupConfig === void 0 ? void 0 : groupConfig.subtitle) ?
-                                                            (0, jsx_runtime_1.jsx)(reqore_1.ReqoreP, { size: 'small', effect: { opacity: 0.6 }, 
-                                                                // Indent to the same content line as the rows (StyledGroupBody's
-                                                                // `margin-left` clamp) so the subtitle sits tucked under the group
-                                                                // name instead of at the panel edge — and clears the group's
-                                                                // vertical rule (left:16px) rather than crossing it.
-                                                                style: {
-                                                                    marginTop: 2,
-                                                                    marginBottom: 8,
-                                                                    marginLeft: compactRowStyles_1.GROUP_INDENT,
-                                                                    paddingRight: 10,
-                                                                }, children: groupConfig.subtitle })
-                                                            : null, (0, jsx_runtime_1.jsx)(compactRowStyles_1.StyledGroupBody, { "$divider": cDivider, "$hover": cHover, "$focus": cWarning, "$success": cSuccess, "$rowBg": cRowBg, "$lineColor": cGroupLine, className: compactNarrow ? 'readfirst-narrow' : undefined, children: renderGroupRows(names) })] }, groupName));
+                                                : null, STATUS_BOXES.map(function (box) {
+                                                var groupsInBox = bucketGroups[box.key];
+                                                var count = bucketCount(box.key);
+                                                if (!count)
+                                                    return null;
+                                                var accent = box.key === 'attention' ? cWarning
+                                                    : box.key === 'set' ? cSuccess
+                                                        : cMuted;
+                                                // The muted "Optional" box reads as a quieter, recessed
+                                                // surface — a touch darker than the page rather than the
+                                                // faint grey tint the accent would give.
+                                                var boxBg = box.key === 'optional' ?
+                                                    (0, colors_1.changeDarkness)((0, colors_1.getMainBackgroundColor)(theme), 0.06)
+                                                    : undefined;
+                                                return ((0, jsx_runtime_1.jsx)(compactRowStyles_1.StyledStatusBox, { "$accent": accent, "$bg": boxBg, flat: true, minimal: true, collapseButtonProps: { flat: true, minimal: true, size: 'small' }, collapsible: true, label: (0, jsx_runtime_1.jsxs)(compactRowStyles_1.StyledGroupHeader, { children: [(0, jsx_runtime_1.jsx)(reqore_1.ReqoreP, { effect: { weight: 'bold' }, size: 'normal', children: box.label }), (0, jsx_runtime_1.jsx)(reqore_1.ReqoreTag, { size: 'small', minimal: true, compact: true, intent: box.intent, label: String(count) })] }), icon: box.icon, className: 'options-readfirst-group', padded: false, contentStyle: { padding: '4px 4px 6px' }, children: (0, jsx_runtime_1.jsx)(compactRowStyles_1.StyledGroupBody, { "$divider": cDivider, "$hover": cHover, "$focus": cWarning, "$success": cSuccess, "$rowBg": cRowBg, "$lineColor": cGroupLine, className: compactNarrow ? 'readfirst-narrow' : undefined, children: groupsInBox.map(function (groupName) {
+                                                            var groupConfig = groups === null || groups === void 0 ? void 0 : groups[groupName];
+                                                            return ((0, jsx_runtime_1.jsxs)(react_2.default.Fragment, { children: [showGroupSubLabel(groupName) ?
+                                                                        (0, jsx_runtime_1.jsx)(compactRowStyles_1.StyledStatusBoxGroupLabel, { children: (0, readFirst_1.getOptionGroupLabel)(groupName, groups) })
+                                                                        : null, showGroupSubLabel(groupName) && (groupConfig === null || groupConfig === void 0 ? void 0 : groupConfig.subtitle) ?
+                                                                        (0, jsx_runtime_1.jsx)(reqore_1.ReqoreP, { size: 'small', effect: { opacity: 0.6 }, style: {
+                                                                                marginTop: 2,
+                                                                                marginBottom: 8,
+                                                                                marginLeft: compactRowStyles_1.GROUP_INDENT,
+                                                                                paddingRight: 10,
+                                                                            }, children: groupConfig.subtitle })
+                                                                        : null, renderGroupRows(buckets[box.key][groupName])] }, groupName));
+                                                        }) }) }, box.key));
                                             })] }), commitMode === 'batched' && !readOnly && dirtyOptionNames.length ?
                                         (0, jsx_runtime_1.jsx)(StyledCommitDock, { "$bg": cBg, "$border": cDivider, children: (0, jsx_runtime_1.jsxs)(reqore_1.ReqoreControlGroup, { className: 'options-readfirst-commitbar', verticalAlign: 'center', wrap: true, children: [(0, jsx_runtime_1.jsx)(reqore_1.ReqoreTag, { size: 'tiny', minimal: true, flat: true, compact: true, effect: { uppercase: true, spaced: 1 }, intent: 'warning', icon: 'EditLine', label: "".concat(dirtyOptionNames.length, " unsaved change").concat(dirtyOptionNames.length === 1 ? '' : 's') }), (0, jsx_runtime_1.jsx)(reqore_1.ReqoreButton, { size: 'small', intent: 'success', icon: 'CheckLine', fixed: true, className: 'options-readfirst-save', disabled: !validityData.isValid, tooltip: validityData.isValid ?
                                                             'Apply the staged changes'