@qoretechnologies/reqraft 0.10.25 → 0.10.26

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

@@ -102,6 +102,8 @@ var react_1 = require("react");
 var jsx_runtime_1 = require("react/jsx-runtime");
 var reqore_1 = require("@qoretechnologies/reqore");
 var colors_1 = require("@qoretechnologies/reqore/dist/helpers/colors");
+var optionActions_1 = require("./optionActions");
+var rendererTypes_1 = require("./rendererTypes");
 var lodash_1 = require("lodash");
 var isArray_1 = __importDefault(require("lodash/isArray"));
 var map_1 = __importDefault(require("lodash/map"));
@@ -109,26 +111,64 @@ var reduce_1 = __importDefault(require("lodash/reduce"));
 var size_1 = __importDefault(require("lodash/size"));
 var react_2 = __importStar(require("react"));
 var react_use_1 = require("react-use");
-var use_context_selector_1 = require("use-context-selector");
 var styled_components_1 = __importDefault(require("styled-components"));
+var use_context_selector_1 = require("use-context-selector");
 var common_1 = require("../../../helpers/common");
 var options_1 = require("../../../helpers/options");
-var fetch_1 = require("../../../utils/fetch");
 var validations_1 = require("../../../helpers/validations");
 var useQorusTypes_1 = require("../../../hooks/useQorusTypes");
 var useTemplates_1 = require("../../../hooks/useTemplates");
+var fetch_1 = require("../../../utils/fetch");
 var Description_1 = require("../../Description");
 var FocusedEditing_1 = require("../../FocusedEditing");
 var Select_1 = require("../fields/select/Select");
 var TemplateField_1 = require("../fields/template/TemplateField");
 var CompactRow_1 = require("./CompactRow");
 var compactRowContext_1 = require("./compactRowContext");
+var compactRowStyles_1 = require("./compactRowStyles");
 var CompactToolbar_1 = require("./CompactToolbar");
 var compactToolbarContext_1 = require("./compactToolbarContext");
-var compactRowStyles_1 = require("./compactRowStyles");
 var OptionFieldMessages_1 = require("./OptionFieldMessages");
 var OptionsHelpDialog_1 = require("./OptionsHelpDialog");
 var readFirst_1 = require("./readFirst");
+/**
+ * Resolve a field's `inherit_props` map against the current available
+ * options (plus any values inherited from an outer FormEngine scope),
+ * producing a `{ propName: siblingValue }` hash suitable for spreading
+ * onto the field's renderer.
+ *
+ * For each entry `<prop-name-on-renderer> -> <sibling-field-name>`, the
+ * sibling's current value is forwarded under the receiving prop name.
+ * Lookup order:
+ *   1. `availableOptions[siblingName]?.value` — the field's local scope.
+ *   2. `inheritedFromParent[siblingName]` — the bag threaded in by an
+ *      outer FormEngine (see the `inheritedFromParent` prop). Used when
+ *      a composite field's `arg_schema` sub-form needs to reach a value
+ *      on an ancestor scope — e.g. a service-method row's `body` picking
+ *      up `language` from the parent service form.
+ * Missing siblings emit `undefined`, which the renderer's prop type can
+ * treat as "no hint".
+ *
+ * Designed to be JSON-pure: no closures, no transformations. Renderers
+ * decide how to use the forwarded value (e.g. the consumer-injected
+ * `code-editor` renderer maps a `language: "qore"` prop to its
+ * highlighter mode).
+ *
+ * Mirrored in qorus-ide `src/components/Field/systemOptions.tsx`; keep
+ * the two in sync (see qorus-ide's `.claude/CLAUDE.md`).
+ */
+var resolveInheritProps = function (inheritProps, availableOptions, inheritedFromParent) {
+    var _a;
+    if (!inheritProps)
+        return {};
+    var out = {};
+    for (var propName in inheritProps) {
+        var siblingName = inheritProps[propName];
+        var localValue = (_a = availableOptions === null || availableOptions === void 0 ? void 0 : availableOptions[siblingName]) === null || _a === void 0 ? void 0 : _a.value;
+        out[propName] = localValue !== undefined ? localValue : inheritedFromParent === null || inheritedFromParent === void 0 ? void 0 : inheritedFromParent[siblingName];
+    }
+    return out;
+};
 var NegativeColorEffect = {
     gradient: {
         colors: { 0: 'danger', 100: 'danger:darken:2' },
@@ -145,10 +185,7 @@ var PositiveColorEffect = {
 };
 // Compact (read-first) layout: flat label | value | action rows in collapsible
 // group panels; colours come in as props so the layout follows the Reqore theme.
-var StyledCompactWrap = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-flow: column;\n  gap: 10px;\n  width: 100%;\n  /* Allow the wrap to shrink inside flex/grid parents so its rows' ellipsis can\n     engage instead of overflowing the container horizontally. */\n  min-width: 0;\n  max-width: 100%;\n  /* A bit of horizontal breathing room for the whole form (header + content\n     alike). Horizontal only \u2014 top padding would break the sticky toolbar's\n     flush pin (see the scroll-context note below). Dropped to flush via the\n     compactFlush prop, for embeds that own their own gutters (e.g. the\n     SchemaDefinition tab body). */\n  padding: ", ";\n\n  /* Own our scroll context instead of borrowing the host's. The sticky toolbar\n     pins to whatever scrolls; if that scroller carries top padding (e.g. a\n     ReqorePanel/ReqoreContent body), sticky `top: 0` resolves against its\n     padding box and leaves an unblurred strip above the toolbar. By scrolling\n     here \u2014 an UNPADDED box \u2014 the toolbar always pins flush and content ghosts\n     cleanly beneath it, regardless of host padding (mirrors how the IDE\n     dashboard keeps its StyledScrollBody scroller unpadded).\n     We cap at the host's available height and scroll past it, but do NOT grow\n     to fill it \u2014 short forms still hug their content. When the host height is\n     indefinite, `max-height: 100%` resolves to none and the box grows so the\n     host scrolls as before (graceful fallback). */\n  min-height: 0;\n  max-height: 100%;\n  overflow-y: auto;\n  overflow-x: hidden;\n\n  /* Option logos (e.g. language images) render as <img> inside ReqoreIcon's\n     square box; constrain them so portrait PNGs don't overflow the row. */\n  .reqore-icon img {\n    width: 100%;\n    height: 100%;\n    object-fit: contain;\n  }\n"], ["\n  display: flex;\n  flex-flow: column;\n  gap: 10px;\n  width: 100%;\n  /* Allow the wrap to shrink inside flex/grid parents so its rows' ellipsis can\n     engage instead of overflowing the container horizontally. */\n  min-width: 0;\n  max-width: 100%;\n  /* A bit of horizontal breathing room for the whole form (header + content\n     alike). Horizontal only \u2014 top padding would break the sticky toolbar's\n     flush pin (see the scroll-context note below). Dropped to flush via the\n     compactFlush prop, for embeds that own their own gutters (e.g. the\n     SchemaDefinition tab body). */\n  padding: ", ";\n\n  /* Own our scroll context instead of borrowing the host's. The sticky toolbar\n     pins to whatever scrolls; if that scroller carries top padding (e.g. a\n     ReqorePanel/ReqoreContent body), sticky \\`top: 0\\` resolves against its\n     padding box and leaves an unblurred strip above the toolbar. By scrolling\n     here \u2014 an UNPADDED box \u2014 the toolbar always pins flush and content ghosts\n     cleanly beneath it, regardless of host padding (mirrors how the IDE\n     dashboard keeps its StyledScrollBody scroller unpadded).\n     We cap at the host's available height and scroll past it, but do NOT grow\n     to fill it \u2014 short forms still hug their content. When the host height is\n     indefinite, \\`max-height: 100%\\` resolves to none and the box grows so the\n     host scrolls as before (graceful fallback). */\n  min-height: 0;\n  max-height: 100%;\n  overflow-y: auto;\n  overflow-x: hidden;\n\n  /* Option logos (e.g. language images) render as <img> inside ReqoreIcon's\n     square box; constrain them so portrait PNGs don't overflow the row. */\n  .reqore-icon img {\n    width: 100%;\n    height: 100%;\n    object-fit: contain;\n  }\n"])), function (_a) {
-    var $flush = _a.$flush;
-    return ($flush ? '0' : '0 12px');
-});
+var StyledCompactWrap = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  display: flex;\n  flex-flow: column;\n  gap: 10px;\n  width: 100%;\n  /* Allow the wrap to shrink inside flex/grid parents so its rows' ellipsis can\n     engage instead of overflowing the container horizontally. */\n  min-width: 0;\n  max-width: 100%;\n  /* Own our scroll context instead of borrowing the host's. The sticky toolbar\n     pins to whatever scrolls; if that scroller carries top padding (e.g. a\n     ReqorePanel/ReqoreContent body), sticky `top: 0` resolves against its\n     padding box and leaves an unblurred strip above the toolbar. By scrolling\n     here \u2014 an UNPADDED box \u2014 the toolbar always pins flush and content ghosts\n     cleanly beneath it, regardless of host padding (mirrors how the IDE\n     dashboard keeps its StyledScrollBody scroller unpadded).\n     We cap at the host's available height and scroll past it, but do NOT grow\n     to fill it \u2014 short forms still hug their content. When the host height is\n     indefinite, `max-height: 100%` resolves to none and the box grows so the\n     host scrolls as before (graceful fallback). */\n  min-height: 0;\n  max-height: 100%;\n  overflow-y: auto;\n  overflow-x: hidden;\n\n  /* Option logos (e.g. language images) render as <img> inside ReqoreIcon's\n     square box; constrain them so portrait PNGs don't overflow the row. */\n  .reqore-icon img {\n    width: 100%;\n    height: 100%;\n    object-fit: contain;\n  }\n"], ["\n  display: flex;\n  flex-flow: column;\n  gap: 10px;\n  width: 100%;\n  /* Allow the wrap to shrink inside flex/grid parents so its rows' ellipsis can\n     engage instead of overflowing the container horizontally. */\n  min-width: 0;\n  max-width: 100%;\n  /* Own our scroll context instead of borrowing the host's. The sticky toolbar\n     pins to whatever scrolls; if that scroller carries top padding (e.g. a\n     ReqorePanel/ReqoreContent body), sticky \\`top: 0\\` resolves against its\n     padding box and leaves an unblurred strip above the toolbar. By scrolling\n     here \u2014 an UNPADDED box \u2014 the toolbar always pins flush and content ghosts\n     cleanly beneath it, regardless of host padding (mirrors how the IDE\n     dashboard keeps its StyledScrollBody scroller unpadded).\n     We cap at the host's available height and scroll past it, but do NOT grow\n     to fill it \u2014 short forms still hug their content. When the host height is\n     indefinite, \\`max-height: 100%\\` resolves to none and the box grows so the\n     host scrolls as before (graceful fallback). */\n  min-height: 0;\n  max-height: 100%;\n  overflow-y: auto;\n  overflow-x: hidden;\n\n  /* Option logos (e.g. language images) render as <img> inside ReqoreIcon's\n     square box; constrain them so portrait PNGs don't overflow the row. */\n  .reqore-icon img {\n    width: 100%;\n    height: 100%;\n    object-fit: contain;\n  }\n"])));
 // Batched-commit dock: a floating Save/Discard card pinned bottom-right. Sticky
 // (not fixed) so it stays within the form's own scroll bounds when the engine
 // renders inside a drawer/panel; align-self pushes it to the right edge, and it
@@ -165,7 +202,10 @@ var StyledCommitDock = styled_components_1.default.div(templateObject_2 || (temp
 });
 var getType = function (type, operators, operator) {
     var finalType = getTypeFromOperator(operators, (0, exports.fixOperatorValue)(operator)) || type;
-    return ((0, isArray_1.default)(finalType) ? finalType[0] : finalType);
+    var resolvedType = (0, isArray_1.default)(finalType) ? finalType[0] : finalType;
+    // A value can be received before its server-driven option schema. Keep the
+    // renderer type-safe during that transition without guessing a concrete type.
+    return (resolvedType || 'any');
 };
 exports.getType = getType;
 var getTypeFromOperator = function (operators, operatorData) {
@@ -179,15 +219,38 @@ var fixOperatorValue = function (operator) {
     return (0, isArray_1.default)(operator) ? operator : [operator];
 };
 exports.fixOperatorValue = fixOperatorValue;
+var getOptionSchemaStorageType = function (option, isRendererOnly) {
+    if (isRendererOnly === void 0) { isRendererOnly = rendererTypes_1.isRendererOnlyUiType; }
+    return (((0, readFirst_1.isFixedCompactAllowedValueOption)(option)
+        ? (option === null || option === void 0 ? void 0 : option.type) || (option === null || option === void 0 ? void 0 : option.ui_type)
+        : isRendererOnly(option === null || option === void 0 ? void 0 : option.ui_type)
+            ? (option === null || option === void 0 ? void 0 : option.type) || (option === null || option === void 0 ? void 0 : option.ui_type)
+            : (option === null || option === void 0 ? void 0 : option.ui_type) || (option === null || option === void 0 ? void 0 : option.type)) || 'any');
+};
+var getOptionFieldStorageType = function (optionName, fieldType, schema, operators, operatorData, isRendererOnly) {
+    if (isRendererOnly === void 0) { isRendererOnly = rendererTypes_1.isRendererOnlyUiType; }
+    var schemaOption = schema === null || schema === void 0 ? void 0 : schema[optionName];
+    var storedType = fieldType && !(fieldType === (schemaOption === null || schemaOption === void 0 ? void 0 : schemaOption.ui_type) && isRendererOnly(fieldType))
+        ? fieldType
+        : getOptionSchemaStorageType(schemaOption, isRendererOnly);
+    return (0, exports.getType)(storedType, operators, operatorData);
+};
 var hasRequiredOptions = function (options) {
     if (options === void 0) { options = {}; }
     return !!(0, lodash_1.findKey)(options, function (option) { return option.required; });
 };
 exports.hasRequiredOptions = hasRequiredOptions;
 exports.OptionsContext = (0, use_context_selector_1.createContext)({});
-var fixOptions = function (value, options, operators) {
+var fixOptions = function (value, options, operators, isRendererOnly) {
     if (value === void 0) { value = {}; }
+    if (isRendererOnly === void 0) { isRendererOnly = rendererTypes_1.isRendererOnlyUiType; }
     var fixedValue = (0, lodash_1.cloneDeep)(value);
+    // Server-driven schemas can arrive after the persisted value. Preserve that
+    // value verbatim until its schema is available instead of manufacturing
+    // partially typed form fields that can crash the following render.
+    if (!(0, size_1.default)(options)) {
+        return fixedValue;
+    }
     (0, lodash_1.forEach)(options, function (option, name) {
         var _a, _b, _c, _d, _f, _g, _h;
         if (option.value ||
@@ -195,7 +258,7 @@ var fixOptions = function (value, options, operators) {
             ((option.required || option.preselected) && !fixedValue[name]) ||
             ((option.required || option.preselected) && option.default_value && !option.value)) {
             var obj = void 0;
-            var type = (0, exports.getType)((option.ui_type || option.type), operators, (_a = fixedValue[name]) === null || _a === void 0 ? void 0 : _a.op);
+            var type = (0, exports.getType)(getOptionSchemaStorageType(option, isRendererOnly), operators, (_a = fixedValue[name]) === null || _a === void 0 ? void 0 : _a.op);
             if (((_b = option.default_value) === null || _b === void 0 ? void 0 : _b.is_expression) &&
                 ((_c = fixedValue[name]) === null || _c === void 0 ? void 0 : _c.value) === undefined) {
                 obj = option.default_value;
@@ -216,29 +279,32 @@ var fixOptions = function (value, options, operators) {
     });
     var res = (0, reduce_1.default)(fixedValue, function (newValue, option, optionName) {
         var _a;
-        var _b, _c, _d, _f, _g, _h, _j, _k, _l;
+        var _b, _c, _d, _f, _g, _h, _j, _k;
         var newOption = option;
         if (!(0, lodash_1.isPlainObject)(newOption) || !(newOption === null || newOption === void 0 ? void 0 : newOption.type)) {
-            var fixedOption = {
-                type: (0, exports.getType)((((_b = options === null || options === void 0 ? void 0 : options[optionName]) === null || _b === void 0 ? void 0 : _b.ui_type) || ((_c = options === null || options === void 0 ? void 0 : options[optionName]) === null || _c === void 0 ? void 0 : _c.type)), operators, newOption === null || newOption === void 0 ? void 0 : newOption.op),
-                value: newOption,
-            };
-            if (newOption === null || newOption === void 0 ? void 0 : newOption.is_expression) {
-                fixedOption.is_expression = true;
-            }
+            var isUntypedEnvelope = (0, lodash_1.isPlainObject)(newOption) && 'value' in newOption;
+            var untypedFieldValue = isUntypedEnvelope ? newOption.value : newOption;
+            // Spread the original envelope first so every key it carried survives —
+            // rebuilding from just {type, value} silently dropped `op`, `is_expression`
+            // and anything else a field needs to render, which emptied the card.
+            var fixedOption = __assign(__assign({}, ((0, lodash_1.isPlainObject)(newOption) ? newOption : {})), { type: (0, exports.getType)(getOptionSchemaStorageType(options === null || options === void 0 ? void 0 : options[optionName], isRendererOnly), operators, newOption === null || newOption === void 0 ? void 0 : newOption.op), value: untypedFieldValue });
             newOption = fixedOption;
         }
+        else if (newOption.type === ((_b = options === null || options === void 0 ? void 0 : options[optionName]) === null || _b === void 0 ? void 0 : _b.ui_type) &&
+            isRendererOnly(newOption.type)) {
+            newOption = __assign(__assign({}, newOption), { type: (0, exports.getType)(getOptionSchemaStorageType(options === null || options === void 0 ? void 0 : options[optionName], isRendererOnly), operators, newOption.op) });
+        }
         if (newOption.value !== undefined &&
-            ((_d = options === null || options === void 0 ? void 0 : options[optionName]) === null || _d === void 0 ? void 0 : _d.allowed_values) &&
-            !((_g = (_f = options === null || options === void 0 ? void 0 : options[optionName]) === null || _f === void 0 ? void 0 : _f.allowed_values) === null || _g === void 0 ? void 0 : _g.find(function (allowedValue) { var _a; return ((_a = allowedValue.value) === null || _a === void 0 ? void 0 : _a.value) === newOption.value || allowedValue.name === newOption.value; })) &&
+            ((_c = options === null || options === void 0 ? void 0 : options[optionName]) === null || _c === void 0 ? void 0 : _c.allowed_values) &&
+            !((_f = (_d = options === null || options === void 0 ? void 0 : options[optionName]) === null || _d === void 0 ? void 0 : _d.allowed_values) === null || _f === void 0 ? void 0 : _f.find(function (allowedValue) { var _a; return ((_a = allowedValue.value) === null || _a === void 0 ? void 0 : _a.value) === newOption.value || allowedValue.name === newOption.value; })) &&
             !(0, TemplateField_1.isValueTemplate)(newOption.value) &&
-            !((_h = options === null || options === void 0 ? void 0 : options[optionName]) === null || _h === void 0 ? void 0 : _h.multiselect) &&
-            !((_j = options === null || options === void 0 ? void 0 : options[optionName]) === null || _j === void 0 ? void 0 : _j.allowed_values_creatable)) {
+            !((_g = options === null || options === void 0 ? void 0 : options[optionName]) === null || _g === void 0 ? void 0 : _g.multiselect) &&
+            !((_h = options === null || options === void 0 ? void 0 : options[optionName]) === null || _h === void 0 ? void 0 : _h.allowed_values_creatable)) {
             newOption.value = undefined;
         }
         if (newOption.value &&
-            ((_k = options === null || options === void 0 ? void 0 : options[optionName]) === null || _k === void 0 ? void 0 : _k.readonly) &&
-            ((_l = options === null || options === void 0 ? void 0 : options[optionName]) === null || _l === void 0 ? void 0 : _l.default_value) &&
+            ((_j = options === null || options === void 0 ? void 0 : options[optionName]) === null || _j === void 0 ? void 0 : _j.readonly) &&
+            ((_k = options === null || options === void 0 ? void 0 : options[optionName]) === null || _k === void 0 ? void 0 : _k.default_value) &&
             (0, common_1.getDefaultValue)(options === null || options === void 0 ? void 0 : options[optionName]) !== newOption.value) {
             newOption.value = (0, common_1.getDefaultValue)(options[optionName]);
         }
@@ -294,43 +360,64 @@ exports.getTypeAndCanBeNull = getTypeAndCanBeNull;
 // Option types rendered full-width (IDE Options parity, commit 8e6b7781).
 var STRECHABLE_TYPES = new Set(['tool-catalog']);
 var FormEngine = function (_a) {
-    var _b, _c, _d, _f, _g;
+    var _b, _c, _d, _f, _g, _h;
     var name = _a.name, uniqueName = _a.uniqueName, value = _a.value, onChange = _a.onChange, onSingleOptionsChange = _a.onSingleOptionsChange, onDependableOptionChange = _a.onDependableOptionChange, placeholder = _a.placeholder, noValueString = _a.noValueString, // eslint-disable-line @typescript-eslint/no-unused-vars
     isValid = _a.isValid, // eslint-disable-line @typescript-eslint/no-unused-vars
-    url = _a.url, customUrl = _a.customUrl, operatorsUrl = _a.operatorsUrl, onOptionsLoaded = _a.onOptionsLoaded, recordRequiresSearchOptions = _a.recordRequiresSearchOptions, readOnly = _a.readOnly, _h = _a.allowTemplates, allowTemplates = _h === void 0 ? true : _h, interfaceContext = _a.interfaceContext, templateFieldProps = _a.templateFieldProps, _j = _a.showTypeToggle, showTypeToggle = _j === void 0 ? true : _j, compact = _a.compact, _k = _a.compactFlush, compactFlush = _k === void 0 ? false : _k, _l = _a.commitMode, commitMode = _l === void 0 ? 'immediate' : _l, _m = _a.expandMode, expandMode = _m === void 0 ? 'single' : _m, onCommit = _a.onCommit, operatorsProp = _a.operators, groups = _a.groups, optionsLoader = _a.optionsLoader, onValidityChange = _a.onValidityChange, optionActions = _a.optionActions, componentOverrides = _a.componentOverrides, rest = __rest(_a, ["name", "uniqueName", "value", "onChange", "onSingleOptionsChange", "onDependableOptionChange", "placeholder", "noValueString", "isValid", "url", "customUrl", "operatorsUrl", "onOptionsLoaded", "recordRequiresSearchOptions", "readOnly", "allowTemplates", "interfaceContext", "templateFieldProps", "showTypeToggle", "compact", "compactFlush", "commitMode", "expandMode", "onCommit", "operators", "groups", "optionsLoader", "onValidityChange", "optionActions", "componentOverrides"]);
-    var _o = (0, react_2.useState)((rest === null || rest === void 0 ? void 0 : rest.options) || undefined), options = _o[0], setOptions = _o[1];
+    url = _a.url, customUrl = _a.customUrl, operatorsUrl = _a.operatorsUrl, onOptionsLoaded = _a.onOptionsLoaded, recordRequiresSearchOptions = _a.recordRequiresSearchOptions, readOnly = _a.readOnly, _j = _a.allowTemplates, allowTemplates = _j === void 0 ? true : _j, interfaceContext = _a.interfaceContext, templateFieldProps = _a.templateFieldProps, forceDropdown = _a.forceDropdown, _k = _a.showTypeToggle, showTypeToggle = _k === void 0 ? true : _k, compact = _a.compact, _l = _a.compactFlush, compactFlush = _l === void 0 ? false : _l, _m = _a.compactNested, compactNested = _m === void 0 ? false : _m, compactPanelProps = _a.compactPanelProps, _o = _a.commitMode, commitMode = _o === void 0 ? 'immediate' : _o, _p = _a.expandMode, expandMode = _p === void 0 ? 'single' : _p, onCommit = _a.onCommit, operatorsProp = _a.operators, groups = _a.groups, optionsLoader = _a.optionsLoader, onValidityChange = _a.onValidityChange, optionActions = _a.optionActions, _q = _a.optionActionsCollapse, optionActionsCollapse = _q === void 0 ? 'auto' : _q, componentOverrides = _a.componentOverrides, rendererOnlyUiTypes = _a.rendererOnlyUiTypes, inheritedFromParent = _a.inheritedFromParent, autoFocusFirstRequired = _a.autoFocusFirstRequired, initialExpandedOptions = _a.initialExpandedOptions, rest = __rest(_a, ["name", "uniqueName", "value", "onChange", "onSingleOptionsChange", "onDependableOptionChange", "placeholder", "noValueString", "isValid", "url", "customUrl", "operatorsUrl", "onOptionsLoaded", "recordRequiresSearchOptions", "readOnly", "allowTemplates", "interfaceContext", "templateFieldProps", "forceDropdown", "showTypeToggle", "compact", "compactFlush", "compactNested", "compactPanelProps", "commitMode", "expandMode", "onCommit", "operators", "groups", "optionsLoader", "onValidityChange", "optionActions", "optionActionsCollapse", "componentOverrides", "rendererOnlyUiTypes", "inheritedFromParent", "autoFocusFirstRequired", "initialExpandedOptions"]);
+    // Built-ins + whatever the consumer declared for its own injected editors.
+    var isRendererOnly = (0, react_2.useMemo)(function () { return (0, rendererTypes_1.createRendererOnlyUiTypeCheck)(rendererOnlyUiTypes); }, [JSON.stringify(rendererOnlyUiTypes)]);
+    // Pointer CAPABILITY and viewport WIDTH are different questions and both
+    // matter here: a hover-gated action is unreachable without a hover, and a
+    // phone-width row has no space for a button strip either way. Both now come
+    // from Reqore's context (one subscription for the whole app) rather than a
+    // reqraft-local matchMedia hook.
+    //
+    // `isHoverCapable` defaults to `true` in Reqore, but fall back explicitly so
+    // an older Reqore — where the property does not exist — degrades to "this
+    // pointer hovers" (the pre-existing behaviour) instead of collapsing every
+    // action into a menu for everyone.
+    var isHoverCapable = (_b = (0, reqore_1.useReqoreProperty)('isHoverCapable')) !== null && _b !== void 0 ? _b : true;
+    var isMobile = (0, reqore_1.useReqoreProperty)('isMobile');
+    var collapseOptionActions = optionActionsCollapse === 'always' ? true
+        : optionActionsCollapse === 'never' ? false
+            : !isHoverCapable || !!isMobile;
+    var _r = (0, react_2.useState)((rest === null || rest === void 0 ? void 0 : rest.options) || undefined), options = _r[0], setOptions = _r[1];
     // optionsLoader lifecycle: loading feeds the skeleton gate, error the banner.
-    var _p = (0, react_2.useState)(!!optionsLoader && !(rest === null || rest === void 0 ? void 0 : rest.options)), optionsLoading = _p[0], setOptionsLoading = _p[1];
-    var _q = (0, react_2.useState)(), optionsError = _q[0], setOptionsError = _q[1];
+    var _s = (0, react_2.useState)(!!optionsLoader && !(rest === null || rest === void 0 ? void 0 : rest.options)), optionsLoading = _s[0], setOptionsLoading = _s[1];
+    var _t = (0, react_2.useState)(), optionsError = _t[0], setOptionsError = _t[1];
     // Operators: prop-provided (compact) or fetched via operatorsUrl (dpql,
     // ported from IDE Options) — the fetch overrides the seeded prop value.
-    var _r = (0, react_2.useState)(operatorsProp), operators = _r[0], setOperators = _r[1];
+    var _u = (0, react_2.useState)(operatorsProp), operators = _u[0], setOperators = _u[1];
     // Remote-fetch loading (ported from IDE Options); only relevant when one of
     // the fetch urls is set — schema-as-props consumers never see the skeleton.
-    var _s = (0, react_2.useState)(!!(url || customUrl || operatorsUrl)), loading = _s[0], setLoading = _s[1];
+    var _v = (0, react_2.useState)(!!(url || customUrl || operatorsUrl)), loading = _v[0], setLoading = _v[1];
     var confirmAction = (0, reqore_1.useReqoreProperty)('confirmAction');
     var theme = (0, reqore_1.useReqoreTheme)();
-    var _t = (0, react_2.useState)(), focusedEditing = _t[0], setFocusedEditing = _t[1];
-    var _u = (0, react_2.useState)(false), showFieldTypes = _u[0], setShowFieldTypes = _u[1];
+    var _w = (0, react_2.useState)(), focusedEditing = _w[0], setFocusedEditing = _w[1];
+    var _x = (0, react_2.useState)(false), showFieldTypes = _x[0], setShowFieldTypes = _x[1];
     // Global toggle (toolbar ⓘ): reveal the short-description info panel on every
     // field that has a short_desc. Per-row ⓘ overrides still win over it.
     // Global field-info visibility, tri-state: `undefined` = default (critical
     // messages auto-open, the rest closed); `true` = show all; `false` = hide all
     // (even message fields). The toolbar ⓘ drives it.
-    var _v = (0, react_2.useState)(undefined), showAllDescriptions = _v[0], setShowAllDescriptions = _v[1];
-    var _w = (0, react_2.useState)(), showHelpForOption = _w[0], setShowHelpForOption = _w[1];
-    var _x = (0, react_2.useState)(false), showInvalidOptionsOnly = _x[0], setShowInvalidOptionsOnly = _x[1];
+    var _y = (0, react_2.useState)(undefined), showAllDescriptions = _y[0], setShowAllDescriptions = _y[1];
+    var _z = (0, react_2.useState)(), showHelpForOption = _z[0], setShowHelpForOption = _z[1];
+    var _0 = (0, react_2.useState)(false), showInvalidOptionsOnly = _0[0], setShowInvalidOptionsOnly = _0[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];
+    var _1 = (0, react_2.useState)([]), expandedOptions = _1[0], setExpandedOptions = _1[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;
+    var _2 = (0, react_use_1.useMeasure)(), compactWrapRef = _2[0], compactWrapWidth = _2[1].width;
     // Own handle on the scroll wrap (useMeasure's ref is a callback, no `.current`)
     // so the label-column measurement can publish its CSS var on the element. It's
     // STATE, not a ref: the wrap mounts only after the loading-skeleton gate
     // resolves, so the measurement effect must re-run when the node appears — a
     // ref wouldn't retrigger it.
-    var _0 = (0, react_2.useState)(null), compactWrapNode = _0[0], setCompactWrapNode = _0[1];
+    var _3 = (0, react_2.useState)(null), compactWrapNode = _3[0], setCompactWrapNode = _3[1];
     var setCompactWrap = (0, react_2.useCallback)(function (node) {
         compactWrapRef(node);
         setCompactWrapNode(function (prev) { return (prev === node ? prev : node); });
@@ -367,15 +454,22 @@ var FormEngine = function (_a) {
     var readRowHeights = (0, react_2.useRef)({});
     // Required-groups linkage: hovering a group chip highlights every member row;
     // clicking a sibling in the chip's popover scrolls to it and flashes it.
-    var _1 = (0, react_2.useState)([]), highlightedOptions = _1[0], setHighlightedOptions = _1[1];
-    var _2 = (0, react_2.useState)([]), flashedOptions = _2[0], setFlashedOptions = _2[1];
+    var _4 = (0, react_2.useState)([]), highlightedOptions = _4[0], setHighlightedOptions = _4[1];
+    var _5 = (0, react_2.useState)([]), flashedOptions = _5[0], setFlashedOptions = _5[1];
     var flashTimeout = (0, react_2.useRef)();
     var flashOptions = (0, react_2.useCallback)(function (optionNames, scrollToFirst) {
-        var _a;
         if (scrollToFirst === void 0) { scrollToFirst = false; }
         if (scrollToFirst && optionNames[0]) {
-            (_a = document
-                .querySelector(".readfirst-row[data-field=\"".concat(optionNames[0], "\"]"))) === null || _a === void 0 ? void 0 : _a.scrollIntoView({ block: 'center', behavior: 'smooth' });
+            // Defer to the next frame: when this fires for a field that just changed
+            // panels, its row has only just re-mounted in the new box — scrolling in the
+            // same tick targets the stale (pre-move) layout, so the page doesn't budge.
+            // A rAF lets the new position settle first.
+            requestAnimationFrame(function () {
+                var target = document.querySelector(".readfirst-row[data-field=\"".concat(optionNames[0], "\"]"));
+                if (typeof (target === null || target === void 0 ? void 0 : target.scrollIntoView) === 'function') {
+                    target.scrollIntoView({ block: 'center', behavior: 'smooth' });
+                }
+            });
         }
         setFlashedOptions(optionNames);
         clearTimeout(flashTimeout.current);
@@ -383,18 +477,37 @@ var FormEngine = function (_a) {
     }, []);
     var flashOption = (0, react_2.useCallback)(function (optionName) { return flashOptions([optionName], true); }, [flashOptions]);
     (0, react_2.useEffect)(function () { return function () { return clearTimeout(flashTimeout.current); }; }, []);
+    // Follow a field across panels: when its status bucket changes — e.g. you fill
+    // an optional field and it jumps to Set / Needs attention — scroll to its new
+    // row and flash it so it's easy to keep track of. `settledBucket` holds each
+    // field's current panel (frozen while the field is being edited, it re-buckets
+    // on collapse), so diffing it after every render catches the move the instant it
+    // lands in the new panel. Runs every render; the diff is cheap and only fires a
+    // scroll on an ACTUAL move of a non-expanded field.
+    var prevSettledBucket = (0, react_2.useRef)({});
+    (0, react_2.useEffect)(function () {
+        if (!compact)
+            return;
+        var cur = settledBucket.current;
+        var prev = prevSettledBucket.current;
+        var moved = Object.keys(cur).find(function (name) { return prev[name] && prev[name] !== cur[name] && !expandedOptions.includes(name); });
+        prevSettledBucket.current = __assign({}, cur);
+        if (moved) {
+            flashOptions([moved], true);
+        }
+    });
     var compactNarrow = !!compactWrapWidth && compactWrapWidth < 480;
     // Info panels auto-open on Tier-1 content; the per-row user override sticks.
-    var _3 = (0, react_2.useState)({}), infoPanelOverrides = _3[0], setInfoPanelOverrides = _3[1];
+    var _6 = (0, react_2.useState)({}), infoPanelOverrides = _6[0], setInfoPanelOverrides = _6[1];
     // Toolbar filters affect the listed rows only — the meter reflects the full set.
-    var _4 = (0, react_2.useState)(false), requiredOnly = _4[0], setRequiredOnly = _4[1];
-    var _5 = (0, react_2.useState)(''), compactQuery = _5[0], setCompactQuery = _5[1];
+    var _7 = (0, react_2.useState)(false), requiredOnly = _7[0], setRequiredOnly = _7[1];
+    var _8 = (0, react_2.useState)(''), compactQuery = _8[0], setCompactQuery = _8[1];
     // Compact field sort (Fields menu → "Sort by"); 'schema' = declared order.
-    var _6 = (0, react_2.useState)('schema'), compactSort = _6[0], setCompactSort = _6[1];
-    var _7 = (0, react_2.useState)(function () { return ({
-        fields: (0, exports.fixOptions)(value, options || {}),
+    var _9 = (0, react_2.useState)('schema'), compactSort = _9[0], setCompactSort = _9[1];
+    var _10 = (0, react_2.useState)(function () { return ({
+        fields: (0, exports.fixOptions)(value, options || {}, undefined, isRendererOnly),
         meta: undefined,
-    }); }), localValue = _7[0], setLocalValue = _7[1];
+    }); }), localValue = _10[0], setLocalValue = _10[1];
     var originalValue = (0, react_2.useRef)();
     // Track the last value we emitted via onChange so we can skip re-applying fixOptions
     // when the parent echoes it back as the new value prop (controlled component loop prevention)
@@ -403,7 +516,7 @@ var FormEngine = function (_a) {
         originalValue.current = localValue.fields;
     }
     var unavailableOptionsCount = (0, react_2.useRef)(0);
-    var _8 = (0, useQorusTypes_1.useQorusTypes)(), compactValue = _8.compactValue, typesLoading = _8.loading;
+    var _11 = (0, useQorusTypes_1.useQorusTypes)(), compactValue = _11.compactValue, typesLoading = _11.loading;
     var templates = (0, useTemplates_1.useTemplates)(allowTemplates, rest.stringTemplates, interfaceContext);
     (0, react_2.useEffect)(function () {
         if ((0, lodash_1.isEqual)(localValue.fields, value)) {
@@ -477,7 +590,7 @@ var FormEngine = function (_a) {
                                 setOptions({});
                                 return [2 /*return*/];
                             }
-                            setLocalValue({ fields: (0, exports.fixOptions)(value, data.data), meta: undefined });
+                            setLocalValue({ fields: (0, exports.fixOptions)(value, data.data, undefined, isRendererOnly), meta: undefined });
                             if (!operatorsUrl) {
                                 setLoading(false);
                             }
@@ -536,7 +649,7 @@ var FormEngine = function (_a) {
                             }
                             setOptions(data.data);
                             onOptionsLoaded === null || onOptionsLoaded === void 0 ? void 0 : onOptionsLoaded(data.data);
-                            setLocalValue({ fields: (0, exports.fixOptions)({}, data.data), meta: undefined });
+                            setLocalValue({ fields: (0, exports.fixOptions)({}, data.data, undefined, isRendererOnly), meta: undefined });
                             return [2 /*return*/];
                     }
                 });
@@ -569,7 +682,7 @@ var FormEngine = function (_a) {
         }
     }, [operatorsUrl]);
     (0, react_use_1.useUpdateEffect)(function () {
-        var fixedValue = (0, exports.fixOptions)(value, options || {});
+        var fixedValue = (0, exports.fixOptions)(value, options || {}, undefined, isRendererOnly);
         // When the value we're receiving is the one we just emitted AND fixOptions has nothing to
         // meaningfully add or change, skip the update. This breaks the controlled-component loop for
         // arg_schema fields while still allowing required/preselected options to be restored (in that
@@ -588,21 +701,23 @@ var FormEngine = function (_a) {
             originalValue.current = fixedValue;
         }
         setLocalValue === null || setLocalValue === void 0 ? void 0 : setLocalValue({ fields: fixedValue, meta: undefined });
-    }, [JSON.stringify(options), JSON.stringify(value)]);
+    }, [JSON.stringify(options), JSON.stringify(value), isRendererOnly]);
     var handleValueChange = (0, react_2.useCallback)(function (optionName, val, _type, isFunction) {
         setLocalValue(function (_a) {
             var _b, _c;
-            var _d, _f, _g, _h, _j, _k, _l, _m, _o;
-            var _p = _a.fields, fields = _p === void 0 ? {} : _p;
-            var schemaType = (((_d = options === null || options === void 0 ? void 0 : options[optionName]) === null || _d === void 0 ? void 0 : _d.ui_type) ||
-                ((_f = options === null || options === void 0 ? void 0 : options[optionName]) === null || _f === void 0 ? void 0 : _f.type));
+            var _d, _f, _g, _h, _j, _k, _l, _m, _o, _p;
+            var _q = _a.fields, fields = _q === void 0 ? {} : _q;
+            var schemaType = getOptionSchemaStorageType(options === null || options === void 0 ? void 0 : options[optionName], isRendererOnly);
             var isAnyLike = schemaType === 'any' || schemaType === 'auto';
             // For any/auto schema types, preserve the user's chosen type stored in the field
-            var resolvedSchemaType = isAnyLike && ((_g = fields[optionName]) === null || _g === void 0 ? void 0 : _g.type) ?
-                fields[optionName].type
-                : schemaType || ((_h = fields[optionName]) === null || _h === void 0 ? void 0 : _h.type);
+            var resolvedSchemaType = isAnyLike && ((_d = fields[optionName]) === null || _d === void 0 ? void 0 : _d.type)
+                ? fields[optionName].type
+                : ((_f = fields[optionName]) === null || _f === void 0 ? void 0 : _f.type) === ((_g = options === null || options === void 0 ? void 0 : options[optionName]) === null || _g === void 0 ? void 0 : _g.ui_type) &&
+                    isRendererOnly((_h = fields[optionName]) === null || _h === void 0 ? void 0 : _h.type)
+                    ? schemaType
+                    : schemaType || ((_j = fields[optionName]) === null || _j === void 0 ? void 0 : _j.type);
             var type = _type ||
-                (0, exports.getTypeAndCanBeNull)(resolvedSchemaType, (_j = options === null || options === void 0 ? void 0 : options[optionName]) === null || _j === void 0 ? void 0 : _j.allowed_values).type;
+                (0, exports.getTypeAndCanBeNull)(resolvedSchemaType, (_k = options === null || options === void 0 ? void 0 : options[optionName]) === null || _k === void 0 ? void 0 : _k.allowed_values).type;
             if (!fields[optionName]) {
                 var defaultOperators = (0, reduce_1.default)(operators || {}, function (filteredOperators, operator, operatorKey) {
                     if (operator.selected) {
@@ -631,9 +746,9 @@ var FormEngine = function (_a) {
                 delete updatedValue[optionName].is_expression;
             }
             var meta = {};
-            if (((_k = options === null || options === void 0 ? void 0 : options[optionName]) === null || _k === void 0 ? void 0 : _k.has_dependents) &&
+            if (((_l = options === null || options === void 0 ? void 0 : options[optionName]) === null || _l === void 0 ? void 0 : _l.has_dependents) &&
                 val !== undefined &&
-                val !== ((_l = fields[optionName]) === null || _l === void 0 ? void 0 : _l.value)) {
+                val !== ((_m = fields[optionName]) === null || _m === void 0 ? void 0 : _m.value)) {
                 (0, lodash_1.forEach)(options, function (option, depName) {
                     if (option.depends_on &&
                         (0, lodash_1.flatten)(option.depends_on).includes(optionName) &&
@@ -643,10 +758,15 @@ var FormEngine = function (_a) {
                 });
                 onDependableOptionChange === null || onDependableOptionChange === void 0 ? void 0 : onDependableOptionChange(optionName, val, updatedValue, options);
             }
-            if ((0, size_1.default)((_m = options === null || options === void 0 ? void 0 : options[optionName]) === null || _m === void 0 ? void 0 : _m.on_change)) {
-                meta.events = (_o = options === null || options === void 0 ? void 0 : options[optionName]) === null || _o === void 0 ? void 0 : _o.on_change;
+            if ((0, size_1.default)((_o = options === null || options === void 0 ? void 0 : options[optionName]) === null || _o === void 0 ? void 0 : _o.on_change)) {
+                meta.events = (_p = options === null || options === void 0 ? void 0 : options[optionName]) === null || _p === void 0 ? void 0 : _p.on_change;
             }
             onSingleOptionsChange === null || onSingleOptionsChange === void 0 ? void 0 : onSingleOptionsChange(optionName, updatedValue[optionName]);
+            if (compact &&
+                !readOnly &&
+                (0, readFirst_1.shouldAutoCollapseCompactOption)(options === null || options === void 0 ? void 0 : options[optionName], val)) {
+                setExpandedOptions(function (prev) { return prev.filter(function (name) { return name !== optionName; }); });
+            }
             return {
                 fields: updatedValue,
                 meta: meta,
@@ -655,6 +775,9 @@ var FormEngine = function (_a) {
     }, [
         onSingleOptionsChange,
         onDependableOptionChange,
+        isRendererOnly,
+        compact,
+        readOnly,
         JSON.stringify(options),
         JSON.stringify(operators),
     ]);
@@ -726,11 +849,14 @@ var FormEngine = function (_a) {
                 meta: undefined,
             };
         });
+        // Collapse it too: a removed field drops back to the (collapsed) Optional box
+        // as a quiet addable row — if it was being edited, that editor must close
+        // rather than linger as an open editor for a field that's no longer added.
+        setExpandedOptions(function (prev) { return prev.filter(function (name) { return name !== optionName; }); });
     }, []);
     var handleAddOptionalFieldChange = (0, react_2.useCallback)(function (_name, optionName) {
-        var _a, _b, _c;
-        handleValueChange(optionName, (0, common_1.getDefaultValue)(options === null || options === void 0 ? void 0 : options[optionName]), (0, exports.getTypeAndCanBeNull)((((_a = options === null || options === void 0 ? void 0 : options[optionName]) === null || _a === void 0 ? void 0 : _a.ui_type) ||
-            ((_b = options === null || options === void 0 ? void 0 : options[optionName]) === null || _b === void 0 ? void 0 : _b.type)), (_c = options === null || options === void 0 ? void 0 : options[optionName]) === null || _c === void 0 ? void 0 : _c.allowed_values).type);
+        var _a;
+        handleValueChange(optionName, (0, common_1.getDefaultValue)(options === null || options === void 0 ? void 0 : options[optionName]), (0, exports.getTypeAndCanBeNull)(getOptionSchemaStorageType(options === null || options === void 0 ? void 0 : options[optionName], isRendererOnly), (_a = options === null || options === void 0 ? void 0 : options[optionName]) === null || _a === void 0 ? void 0 : _a.allowed_values).type);
     }, [JSON.stringify(options), handleValueChange]);
     var availableOptions = (0, react_2.useMemo)(function () {
         if (!options) {
@@ -752,22 +878,18 @@ var FormEngine = function (_a) {
                 removeSelectedOption(optionName);
                 return newValue;
             }
-            var schemaType = (0, exports.getType)((options[optionName].ui_type || options[optionName].type), operators, option === null || option === void 0 ? void 0 : option.op);
+            var rendererType = (0, exports.getType)((options[optionName].ui_type || options[optionName].type), operators, option === null || option === void 0 ? void 0 : option.op);
+            var storageType = getOptionFieldStorageType(optionName, option === null || option === void 0 ? void 0 : option.type, options, operators, option === null || option === void 0 ? void 0 : option.op, isRendererOnly);
             if (!(0, lodash_1.isPlainObject)(option)) {
                 return __assign(__assign({}, newValue), (_a = {}, _a[optionName] = {
-                    type: schemaType,
+                    type: storageType || rendererType,
                     value: option,
                 }, _a));
             }
-            // any/auto: preserve the user-picked type; otherwise normalize to the
-            // schema type (ui_type wins) so rendering and validation agree.
-            var isAnyLike = schemaType === 'any' || schemaType === 'auto';
-            var effectiveType = isAnyLike && (option === null || option === void 0 ? void 0 : option.type) ?
-                option.type
-                : schemaType;
-            return __assign(__assign({}, newValue), (_b = {}, _b[optionName] = __assign(__assign({}, option), { type: effectiveType }), _b));
+            return __assign(__assign({}, newValue), (_b = {}, _b[optionName] = __assign(__assign({}, option), { type: storageType || rendererType }), _b));
         }, {});
     }, [
+        isRendererOnly,
         JSON.stringify(fixedValue),
         JSON.stringify(options),
         unavailableOptionsCount.current,
@@ -836,13 +958,11 @@ var FormEngine = function (_a) {
     }, [JSON.stringify(options), JSON.stringify(availableOptions), JSON.stringify(localValue.fields)]);
     var getValidityData = (0, react_2.useCallback)(function () {
         var fields = (0, reduce_1.default)(availableOptions, function (result, option, optionName) {
-            var _a, _b, _c, _d;
-            var type = option.type ||
-                ((_a = options === null || options === void 0 ? void 0 : options[optionName]) === null || _a === void 0 ? void 0 : _a.ui_type) ||
-                ((_b = options === null || options === void 0 ? void 0 : options[optionName]) === null || _b === void 0 ? void 0 : _b.type);
+            var _a, _b;
+            var type = getOptionFieldStorageType(optionName, option.type, options, operators, option.op, isRendererOnly);
             var optionValue = option.value;
-            var isRequired = (_c = options === null || options === void 0 ? void 0 : options[optionName]) === null || _c === void 0 ? void 0 : _c.required;
-            var hasRequiredGroups = !!((_d = options === null || options === void 0 ? void 0 : options[optionName]) === null || _d === void 0 ? void 0 : _d.required_groups);
+            var isRequired = (_a = options === null || options === void 0 ? void 0 : options[optionName]) === null || _a === void 0 ? void 0 : _a.required;
+            var hasRequiredGroups = !!((_b = options === null || options === void 0 ? void 0 : options[optionName]) === null || _b === void 0 ? void 0 : _b.required_groups);
             var isEmpty = optionValue === undefined || optionValue === '';
             var validation;
             if (!isRequired && !hasRequiredGroups && isEmpty) {
@@ -868,8 +988,10 @@ var FormEngine = function (_a) {
             invalidFields: invalidFields,
         };
     }, [
+        isRendererOnly,
         JSON.stringify(availableOptions),
         JSON.stringify(options),
+        JSON.stringify(operators),
         JSON.stringify(localValue.fields),
     ]);
     var validityData = (0, react_2.useMemo)(function () { return getValidityData(); }, [getValidityData]);
@@ -880,15 +1002,82 @@ var FormEngine = function (_a) {
     var shownOptions = (0, react_2.useMemo)(function () {
         return (0, reduce_1.default)(availableOptions, function (newValue, option, optionName) {
             var _a;
-            var _b, _c;
             if (showInvalidOptionsOnly &&
-                isOptionValid(optionName, ((_b = options === null || options === void 0 ? void 0 : options[optionName]) === null || _b === void 0 ? void 0 : _b.ui_type) ||
-                    ((_c = options === null || options === void 0 ? void 0 : options[optionName]) === null || _c === void 0 ? void 0 : _c.type), option.value)) {
+                isOptionValid(optionName, getOptionFieldStorageType(optionName, option.type, options, operators, option.op, isRendererOnly), option.value)) {
                 return newValue;
             }
             return __assign(__assign({}, newValue), (_a = {}, _a[optionName] = option, _a));
         }, {});
-    }, [showInvalidOptionsOnly, JSON.stringify(availableOptions)]);
+    }, [
+        showInvalidOptionsOnly,
+        isRendererOnly,
+        JSON.stringify(availableOptions),
+        JSON.stringify(options),
+        JSON.stringify(operators),
+    ]);
+    // 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, _b, _c;
+        if (hidden === void 0) { hidden = false; }
+        if (hidden)
+            return 'optional';
+        var schema = options === null || options === void 0 ? void 0 : options[name];
+        var type = getOptionFieldStorageType(name, (_a = availableOptions === null || availableOptions === void 0 ? void 0 : availableOptions[name]) === null || _a === void 0 ? void 0 : _a.type, options, operators, (_b = availableOptions === null || availableOptions === void 0 ? void 0 : availableOptions[name]) === null || _b === void 0 ? void 0 : _b.op, isRendererOnly);
+        var value = (_c = availableOptions === null || availableOptions === void 0 ? void 0 : availableOptions[name]) === null || _c === void 0 ? void 0 : _c.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',
+        });
+    }, [
+        isRendererOnly,
+        JSON.stringify(options),
+        JSON.stringify(availableOptions),
+        JSON.stringify(operators),
+        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) {
@@ -945,6 +1134,111 @@ var FormEngine = function (_a) {
                     : __spreadArray(__spreadArray([], prev, true), [optionName], false);
         });
     }, [expandMode]);
+    // --- Caller-named starting rows (opt-in) ----------------------------------
+    // `initialExpandedOptions` lets a consumer name the rows that must already
+    // be open when the form first paints — the case where the expanded row is
+    // part of an address rather than a click (see the prop's docs).
+    //
+    // One-shot for the same reason autofocus is: it fires on the first render
+    // that actually has rows (so an async-loaded schema is covered) and then
+    // never again, so a row the user collapses afterwards stays collapsed and a
+    // later schema reload does not reopen it.
+    var hasAppliedInitialExpansionRef = (0, react_2.useRef)(false);
+    (0, react_2.useEffect)(function () {
+        if (!(initialExpandedOptions === null || initialExpandedOptions === void 0 ? void 0 : initialExpandedOptions.length) || !compact || hasAppliedInitialExpansionRef.current) {
+            return;
+        }
+        var names = Object.keys(availableOptions);
+        if (!names.length) {
+            return;
+        }
+        hasAppliedInitialExpansionRef.current = true;
+        var toExpand = initialExpandedOptions.filter(function (name) { return names.includes(name); });
+        if (!toExpand.length) {
+            return;
+        }
+        setExpandedOptions(function (prev) { return __spreadArray(__spreadArray([], prev, true), toExpand.filter(function (name) { return !prev.includes(name); }), true); });
+    }, [initialExpandedOptions, compact, availableOptions]);
+    // --- First-attention-field autofocus (opt-in) -----------------------------
+    // With `autoFocusFirstRequired`, drop the user straight into the first field
+    // they must fix. We reuse the engine's own ordering (`availableOptions`), the
+    // very same `getOptionBucket` the status boxes use to decide "needs attention"
+    // (so we cover empty-required, unsatisfied one-of, AND filled-but-invalid rows
+    // without ever drifting from what the user sees), and dependency gating
+    // (`dependencyLockedNames`), then expand the target row through
+    // `expandedOptions` — the row's editor-focus effect does the rest. No DOM
+    // scraping, no synthetic clicks, no polling.
+    //
+    // Strictly one-shot: it fires the first time the form has focusable content
+    // (so an async-loaded schema is still covered — the empty first pass doesn't
+    // count), then never again for the life of this instance. A server-driven
+    // field update or an in-place schema reload will NOT re-grab focus; only a
+    // genuine remount (a fresh instance) auto-focuses again, which is the intended
+    // on-mount behaviour.
+    var hasAutoFocusedRef = (0, react_2.useRef)(false);
+    // The field expanded programmatically for autofocus. A ref (not state) so
+    // CompactRow's 60ms focus timer reads the current value regardless of render
+    // batching; CompactRow focuses this one with `preventScroll` so an off-screen
+    // (or below-the-fold) form is never scrolled into view on mount.
+    var autoFocusNameRef = (0, react_2.useRef)(undefined);
+    (0, react_2.useEffect)(function () {
+        if (!autoFocusFirstRequired || !compact || !options) {
+            return;
+        }
+        if (hasAutoFocusedRef.current) {
+            return;
+        }
+        var orderedNames = Object.keys(availableOptions);
+        if (!orderedNames.length) {
+            return;
+        }
+        // Never grab focus from a control the user is already in — including a field
+        // *inside* this form. If a slow/async schema lets the user start typing
+        // before this first-required scan runs, we must not steal their caret. On a
+        // clean mount focus rests on the body, so the intended "drop into the first
+        // field" still fires. Bailing here leaves `hasAutoFocusedRef` false, so it
+        // retries once focus is free.
+        var active = document.activeElement;
+        if (active && active !== document.body) {
+            return;
+        }
+        var target = (0, readFirst_1.getFirstAttentionOptionName)(orderedNames, function (fieldName) {
+            var schema = options[fieldName];
+            if (!schema) {
+                return undefined;
+            }
+            return {
+                focusable: !readOnly &&
+                    !schema.disabled &&
+                    !schema.readonly &&
+                    !dependencyLockedNames.includes(fieldName),
+                // Single source of truth: the same bucket the read-first status boxes
+                // show, so a filled-but-invalid required row is a target too.
+                needsAttention: getOptionBucket(fieldName) === 'attention',
+            };
+        });
+        // Mark done even when nothing needs attention, so later value edits or an
+        // in-place schema reload never re-scan or re-focus. Only a remount arms it
+        // again.
+        hasAutoFocusedRef.current = true;
+        if (target) {
+            // Set the ref before the state update so CompactRow's focus timer sees it.
+            autoFocusNameRef.current = target;
+            setExpandedOptions(function (prev) {
+                return prev.includes(target) ? prev
+                    : expandMode === 'multi' ? __spreadArray(__spreadArray([], prev, true), [target], false) : [target];
+            });
+        }
+    }, [
+        autoFocusFirstRequired,
+        compact,
+        options,
+        availableOptions,
+        readOnly,
+        dependencyLockedNames,
+        getOptionBucket,
+        expandMode,
+    ]);
     // Read-first completion summary (how many shown options have a value set),
     // surfaced as a progress meter at the top of the compact form.
     var readFirstCompletion = (0, react_2.useMemo)(function () { return (0, readFirst_1.getReadFirstCompletion)(availableOptions); }, [JSON.stringify(availableOptions)]);
@@ -989,10 +1283,10 @@ var FormEngine = function (_a) {
                     next[optionName] = value;
                 }
             });
-            return { fields: (0, exports.fixOptions)(next, options || {}, operators), meta: undefined };
+            return { fields: (0, exports.fixOptions)(next, options || {}, operators, isRendererOnly), meta: undefined };
         });
         setRequiredOnly(false);
-    }, [JSON.stringify(options), JSON.stringify(operators)]);
+    }, [JSON.stringify(options), JSON.stringify(operators), isRendererOnly]);
     var getCustomMenuTemplateItems = (0, react_2.useCallback)(function (optionName) {
         return compactValue === null || compactValue === void 0 ? void 0 : compactValue.map(function (type) { return ({
             label: type.display_name,
@@ -1011,13 +1305,53 @@ 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, _q, _r, _s;
         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) ?
+        // The RENDERER type for this row — which editor mounts. Distinct from the
+        // storage type on the value envelope: a `richtext` field stores a string
+        // but must render the richtext editor, so `ui_type` wins here.
+        //
+        // The exception is an any-like `ui_type`. Those schemas say
+        // `ui_type: 'any'` precisely so the user can pick a concrete type, and
+        // that pick lives on the field's stored `type` — letting 'any' win would
+        // pin the row to the untyped editor forever.
+        //
+        // The trailing fallbacks keep the row rendering when a server-driven
+        // schema has not arrived yet (`type` undefined) instead of crashing.
+        var optionSchema = options === null || options === void 0 ? void 0 : options[optionName];
+        var schemaUiType = optionSchema === null || optionSchema === void 0 ? void 0 : optionSchema.ui_type;
+        var uiTypeIsAnyLike = schemaUiType === 'any' || schemaUiType === 'auto';
+        var resolvedType = ((0, readFirst_1.isFixedCompactAllowedValueOption)(optionSchema)
+            ? getOptionSchemaStorageType(optionSchema, isRendererOnly)
+            : schemaUiType && !uiTypeIsAnyLike
+                ? schemaUiType
+                : undefined) ||
+            type ||
+            schemaUiType ||
+            (optionSchema === null || optionSchema === void 0 ? void 0 : optionSchema.type) ||
+            'any';
+        var effectiveForceDropdown = forceDropdown !== null && forceDropdown !== void 0 ? forceDropdown : templateFieldProps === null || templateFieldProps === void 0 ? void 0 : templateFieldProps.forceDropdown;
+        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) {
@@ -1032,23 +1366,51 @@ var FormEngine = function (_a) {
                                                 (0, jsx_runtime_1.jsx)(reqore_1.ReqoreButton, { disabled: readOnly, icon: 'DeleteBinLine', effect: NegativeColorEffect, fixed: true, onClick: function () { return handleRemoveOperator(optionName, fixedValue, index); } })
                                                 : 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], { 
+                    : null, (0, react_1.createElement)(TemplateField_1.TemplateField, __assign({ fluid: true }, options === null || options === void 0 ? void 0 : options[optionName], resolveInheritProps((_b = options === null || options === void 0 ? void 0 : options[optionName]) === null || _b === void 0 ? void 0 : _b.inherit_props, availableOptions, inheritedFromParent), { 
+                    // qorus#347-followup (scope forwarding): merge accumulated
+                    // inheritance (`inheritedFromParent`) with THIS field's freshly
+                    // resolved inherit_props, and pass down as a single bag so any
+                    // nested `arg_schema` sub-form (mounted by AutoFormField for
+                    // `hash` / `free-hash` / list-of-hash fields) sees every value
+                    // the ancestor chain forwarded. This is the plumbing that lets a
+                    // service-method row's `body` sub-field pick up the parent
+                    // service form's `language` — the parent field declares
+                    // `inherit_props: { language: 'language' }`, the list renderer
+                    // forwards it into each row, and the row's body resolves against
+                    // the accumulated bag.
+                    inheritedFromParent: __assign(__assign({}, inheritedFromParent), resolveInheritProps((_c = options === null || options === void 0 ? void 0 : options[optionName]) === null || _c === void 0 ? void 0 : _c.inherit_props, availableOptions, inheritedFromParent)), 
+                    // 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 && ((_d = options === null || options === void 0 ? void 0 : options[optionName]) === null || _d === void 0 ? void 0 : _d.supports_templates)), allowFunctions: !!((_f = options === null || options === void 0 ? void 0 : options[optionName]) === null || _f === void 0 ? void 0 : _f.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, 
+                    // A fixed allowed-value field still needs its selector even when
+                    // arbitrary custom values are forbidden. TemplateField uses this
+                    // flag to decide whether to mount AutoFormField at all; treating
+                    // `supports_custom_values: false` as "no input" left dependent
+                    // delivery fields (Discord server/channel, for example) as empty
+                    // control groups. The allowed-values renderer itself enforces the
+                    // fixed catalogue and never exposes free-form entry.
+                    allowCustomValues: (0, readFirst_1.isFixedCompactAllowedValueOption)(optionSchema) ||
+                        (((_g = options === null || options === void 0 ? void 0 : options[optionName]) === null || _g === void 0 ? void 0 : _g.supports_custom_values) !== false && resolvedType !== 'any'), templates: templates.value }, (0, exports.getTypeAndCanBeNull)(
+                // The RENDERER type picks the editor — the storage type lives on
+                // the value envelope. Passing storage here rendered a `richtext`
+                // field as a plain string input.
+                resolvedType, (_h = options === null || options === void 0 ? void 0 : options[optionName]) === null || _h === void 0 ? void 0 : _h.allowed_values, other.op), { ui_type: resolvedType, 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: (_j = options === null || options === void 0 ? void 0 : options[optionName]) === null || _j === void 0 ? void 0 : _j.arg_schema, noSoft: !!(rest === null || rest === void 0 ? void 0 : rest.options), value: other.value, isFunction: other.is_expression, isDefaultFunction: ((_k = options === null || options === void 0 ? void 0 : options[optionName]) === null || _k === void 0 ? void 0 : _k.default_view) === 'expression', sensitive: (_l = options === null || options === void 0 ? void 0 : options[optionName]) === null || _l === void 0 ? void 0 : _l.sensitive, default_value: (0, common_1.getDefaultValue)(options === null || options === void 0 ? void 0 : options[optionName]), isDefaultTemplate: ((_m = options === null || options === void 0 ? void 0 : options[optionName]) === null || _m === void 0 ? void 0 : _m.default_view) === 'template', allowed_values: (_o = options === null || options === void 0 ? void 0 : options[optionName]) === null || _o === void 0 ? void 0 : _o.allowed_values, allowed_values_creatable: (_p = options === null || options === void 0 ? void 0 : options[optionName]) === null || _p === void 0 ? void 0 : _p.allowed_values_creatable, disabled: ((_q = options === null || options === void 0 ? void 0 : options[optionName]) === null || _q === void 0 ? void 0 : _q.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)((_r = options === null || options === void 0 ? void 0 : options[optionName]) === null || _r === void 0 ? void 0 : _r.depends_on, availableOptions, options || {}), readOnly: readOnly, size: editorSize || rest.size, menuItems: ((_s = options === null || options === void 0 ? void 0 : options[optionName]) === null || _s === void 0 ? void 0 : _s.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) ?
+                        : undefined }, templateFieldProps, { forceDropdown: effectiveForceDropdown })), (0, jsx_runtime_1.jsx)(OptionFieldMessages_1.OptionFieldMessages, { schema: options || {}, allOptions: availableOptions, name: optionName, option: __assign({ type: resolvedType }, 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 ?
-                                                type === 'richtext' ?
+                                                resolvedType === 'richtext' ?
                                                     (0, common_1.richtextToString)(other.value)
                                                     : JSON.stringify(other.value)
                                                 : '' })] }) })] })
@@ -1063,6 +1425,7 @@ var FormEngine = function (_a) {
         uniqueName,
         componentOverrides,
         templateFieldProps,
+        forceDropdown,
         availableOptions,
         fixedValue,
         // Depend on the specific `rest` values used, not the whole `rest` object
@@ -1078,7 +1441,7 @@ var FormEngine = function (_a) {
     ]);
     // Compact (read-first) rendering.
     // Theme-derived colours so the flat-row layout adapts to light/dark/custom themes.
-    var cText = ((_b = theme === null || theme === void 0 ? void 0 : theme.text) === null || _b === void 0 ? void 0 : _b.color) || '#f1f0ee';
+    var cText = ((_c = theme === null || theme === void 0 ? void 0 : theme.text) === null || _c === void 0 ? void 0 : _c.color) || '#f1f0ee';
     // Text emphasis tiers via reqore's readable-colour helper (key = full readable
     // text, muted = its dimmed variant, faint = the dimmed variant softened
     // further) instead of hand-rolled hex-alpha suffixes on the raw text colour.
@@ -1087,10 +1450,10 @@ var FormEngine = function (_a) {
     var cFaint = "".concat(cMuted, "99");
     var cDivider = "".concat(cText, "14");
     var cHover = "".concat(cText, "0d");
-    var cDanger = ((_c = theme === null || theme === void 0 ? void 0 : theme.intents) === null || _c === void 0 ? void 0 : _c.danger) || '#e35a5a';
-    var cWarning = ((_d = theme === null || theme === void 0 ? void 0 : theme.intents) === null || _d === void 0 ? void 0 : _d.warning) || '#ffdf34';
-    var cInfo = ((_f = theme === null || theme === void 0 ? void 0 : theme.intents) === null || _f === void 0 ? void 0 : _f.info) || '#3b8eea';
-    var cSuccess = ((_g = theme === null || theme === void 0 ? void 0 : theme.intents) === null || _g === void 0 ? void 0 : _g.success) || '#36b37e';
+    var cDanger = ((_d = theme === null || theme === void 0 ? void 0 : theme.intents) === null || _d === void 0 ? void 0 : _d.danger) || '#e35a5a';
+    var cWarning = ((_f = theme === null || theme === void 0 ? void 0 : theme.intents) === null || _f === void 0 ? void 0 : _f.warning) || '#ffdf34';
+    var cInfo = ((_g = theme === null || theme === void 0 ? void 0 : theme.intents) === null || _g === void 0 ? void 0 : _g.info) || '#3b8eea';
+    var cSuccess = ((_h = theme === null || theme === void 0 ? void 0 : theme.intents) === null || _h === void 0 ? void 0 : _h.success) || '#36b37e';
     var cBg = (theme === null || theme === void 0 ? void 0 : theme.main) || '#181818';
     var cRowBg = (0, colors_1.changeDarkness)((0, colors_1.getMainBackgroundColor)(theme), 0.01);
     var cGroupLine = "".concat(cText, "1f");
@@ -1108,6 +1471,7 @@ var FormEngine = function (_a) {
         showFieldTypes: showFieldTypes,
         showAllDescriptions: showAllDescriptions,
         expandedOptions: expandedOptions,
+        autoFocusNameRef: autoFocusNameRef,
         highlightedOptions: highlightedOptions,
         flashedOptions: flashedOptions,
         infoPanelOverrides: infoPanelOverrides,
@@ -1128,6 +1492,8 @@ var FormEngine = function (_a) {
         getTypeForOption: getTypeForOption,
         isOptionValid: isOptionValid,
         confirmAction: confirmAction,
+        optionActions: optionActions,
+        collapseOptionActions: collapseOptionActions,
         renderOption: renderOption,
         theme: theme,
         cText: cText,
@@ -1151,6 +1517,7 @@ var FormEngine = function (_a) {
         showFieldTypes,
         showAllDescriptions,
         expandedOptions,
+        autoFocusNameRef,
         highlightedOptions,
         flashedOptions,
         infoPanelOverrides,
@@ -1171,6 +1538,8 @@ var FormEngine = function (_a) {
         getTypeForOption,
         isOptionValid,
         confirmAction,
+        optionActions,
+        collapseOptionActions,
         renderOption,
         theme,
         cText,
@@ -1187,6 +1556,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 +1581,7 @@ var FormEngine = function (_a) {
     }); }, [
         readOnly,
         validityData,
+        readFirstAttentionCount,
         readFirstCompletion,
         showInvalidOptionsOnly,
         handleToggleInvalidOnly,
@@ -1234,7 +1605,10 @@ var FormEngine = function (_a) {
         handleResetToDefaultFields,
         handleRevertChangesClick,
     ]);
-    var compactHeaderActions = (0, react_2.useMemo)(function () { return [{ as: CompactToolbar_1.CompactToolbar, responsive: false }]; }, []);
+    // The engine's own toolbar action, plus whatever the consumer added through
+    // `compactPanelProps.actions` — appended, so an outside action can never
+    // knock the form's toolbar out of the header.
+    var compactHeaderActions = (0, react_2.useMemo)(function () { return __spreadArray([{ as: CompactToolbar_1.CompactToolbar, responsive: false }], ((compactPanelProps === null || compactPanelProps === void 0 ? void 0 : compactPanelProps.actions) || []), true); }, [compactPanelProps === null || compactPanelProps === void 0 ? void 0 : compactPanelProps.actions]);
     var renderCompact = function () {
         var headerBg = "".concat((0, colors_1.changeDarkness)((0, colors_1.getMainBackgroundColor)(theme), 0.02)).concat((0, colors_1.percentToHexAlpha)(88));
         // Toolbar filters narrow the listed rows; the meter reflects the full set.
@@ -1265,15 +1639,18 @@ var FormEngine = function (_a) {
                 pushRow(optionName, false);
             }
         });
-        // When searching, also surface matching hidden optional fields (not yet
-        // added) so the search spans the whole schema, not just the visible rows.
-        if (query) {
-            (0, lodash_1.forEach)(filteredOptions, function (_schema, optionName) {
-                if (matchesQuery(optionName)) {
-                    pushRow(optionName, true);
-                }
-            });
-        }
+        // Surface EVERY not-yet-added optional field as an addable (hidden) row, so
+        // the whole schema is browsable inline — they all land in the Optional box
+        // (hidden ⇒ 'optional' bucket) instead of being buried in the Fields menu.
+        // Narrowed by the same filters as the listed rows (search query + required-
+        // only). availableOptions (listed) and filteredOptions (these) are disjoint —
+        // the former is built from fixedValue keys, the latter excludes them — so a
+        // field is never both a listed and a hidden row.
+        (0, lodash_1.forEach)(filteredOptions, function (_schema, optionName) {
+            if (matchesFilters(optionName)) {
+                pushRow(optionName, true);
+            }
+        });
         // User sort (Fields menu → "Sort by"), applied WITHIN each group so the
         // group sections and the required-group rails are preserved. Schema order is
         // the default and the stable tiebreaker (Array.sort is stable, and each
@@ -1285,7 +1662,7 @@ var FormEngine = function (_a) {
             var isUnset_1 = function (name) { var _a; return (0, readFirst_1.isOptionValueEmpty)((_a = shownOptions[name]) === null || _a === void 0 ? void 0 : _a.value); };
             var isFieldInvalid_1 = function (name) {
                 var _a, _b, _c;
-                return !isOptionValid(name, (((_a = options === null || options === void 0 ? void 0 : options[name]) === null || _a === void 0 ? void 0 : _a.ui_type) || ((_b = options === null || options === void 0 ? void 0 : options[name]) === null || _b === void 0 ? void 0 : _b.type)), (_c = shownOptions[name]) === null || _c === void 0 ? void 0 : _c.value);
+                return !isOptionValid(name, getOptionFieldStorageType(name, (_a = shownOptions[name]) === null || _a === void 0 ? void 0 : _a.type, options, operators, (_b = shownOptions[name]) === null || _b === void 0 ? void 0 : _b.op, isRendererOnly), (_c = shownOptions[name]) === null || _c === void 0 ? void 0 : _c.value);
             };
             var comparator_1 = function (a, b) {
                 switch (compactSort) {
@@ -1317,22 +1694,71 @@ 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
         // are drawn per member). Narrow stacks fall back to flat rows.
         var renderGroupRows = function (names) {
-            var renderRow = function (entry, clustered, clusterFirst, clusterLast) {
-                var _a, _b;
-                return ((0, jsx_runtime_1.jsx)(CompactRow_1.CompactRow, { optionName: entry.name, optionField: entry.hidden ?
-                        {
-                            type: (((_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)),
-                            value: undefined,
-                        }
-                        : 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); });
+            var renderRow = function (entry, clustered, clusterFirst, clusterLast) { return ((0, jsx_runtime_1.jsx)(CompactRow_1.CompactRow, { optionName: entry.name, optionField: entry.hidden ?
+                    {
+                        type: getOptionSchemaStorageType(options === null || options === void 0 ? void 0 : options[entry.name], isRendererOnly),
+                        value: undefined,
+                    }
+                    : shownOptions[entry.name], hidden: entry.hidden, clustered: clustered, clusterFirst: clusterFirst, clusterLast: clusterLast }, entry.name)); };
+            // (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,52 +1771,67 @@ 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: {
-                                            display: 'flex',
-                                            flexFlow: 'column',
-                                            gap: '10px',
-                                            padding: '0 0 12px',
-                                        }, children: [(0, size_1.default)(groupKeys) === 0 ?
+        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 || compactNested, children: [(0, jsx_runtime_1.jsxs)(compactRowStyles_1.StyledCompactPanel
+                                    // The top-level form scrolls, so its toolbar STICKS and carries a
+                                    // dark blurred backdrop so content ghosts cleanly beneath it. A
+                                    // nested (arg_schema) sub-form owns no scroll context — drop the
+                                    // sticky, the backdrop, and the stacking context so its header is
+                                    // transparent inside the parent's card.
+                                    , __assign({ "$headerBg": compactNested ? 'transparent' : headerBg, "$nested": compactNested, flat: true, raised: true, minimal: true, 
+                                        // No panel background: the form sits transparently on whatever
+                                        // hosts it (page, drawer, or — for an arg_schema field — the
+                                        // parent's edit card) instead of stacking its own dark surface.
+                                        // The status boxes keep their own tints; the sticky toolbar keeps
+                                        // its blurred header via the $headerBg override.
+                                        stickyHeader: !compactNested }, compactPanelProps, { actions: compactHeaderActions, contentStyle: __assign({ display: 'flex', flexFlow: 'column', gap: '10px' }, compactPanelProps === null || compactPanelProps === void 0 ? void 0 : compactPanelProps.contentStyle), 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));
-                                            })] }), commitMode === 'batched' && !readOnly && dirtyOptionNames.length ?
+                                                : 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, 
+                                                    // The Optional box now holds every not-yet-added field, so
+                                                    // it starts COLLAPSED to keep the form focused on what's in
+                                                    // use. But a SEARCH must surface matching addable fields —
+                                                    // and ReqorePanel unmounts collapsed content — so force it
+                                                    // open whenever a query is active. (isCollapsed is the
+                                                    // panel's controllable state; manual toggling still works
+                                                    // when no query is set.)
+                                                    isCollapsed: box.key === 'optional' && !query, 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'
                                                             : 'Resolve the invalid fields before saving', onClick: handleCommitClick, children: "Save" }), (0, jsx_runtime_1.jsx)(reqore_1.ReqoreButton, { size: 'small', minimal: true, flat: true, fixed: true, icon: 'HistoryLine', className: 'options-readfirst-discard', onClick: handleRevertChangesClick, children: "Discard" })] }) })
@@ -1480,13 +1921,11 @@ var FormEngine = function (_a) {
                                 options[optionName].stretch,
                             size: 'small',
                             floatingActions: true,
-                            actions: __spreadArray(__spreadArray([], (typeof optionActions === 'function' ?
-                                optionActions({
-                                    name: optionName,
-                                    schema: options[optionName],
-                                    value: availableOptions === null || availableOptions === void 0 ? void 0 : availableOptions[optionName],
-                                })
-                                : (optionActions !== null && optionActions !== void 0 ? optionActions : [])), true), [
+                            actions: __spreadArray(__spreadArray([], (0, optionActions_1.resolveOptionActions)(optionActions, {
+                                name: optionName,
+                                schema: options[optionName],
+                                value: availableOptions === null || availableOptions === void 0 ? void 0 : availableOptions[optionName],
+                            }), true), [
                                 {
                                     size: 'tiny',
                                     icon: 'FullscreenLine',