@qoretechnologies/reqraft 0.10.46-pr.95.ge595a13 → 0.10.46

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

@@ -202,7 +202,7 @@ var StyledCommitDock = styled_components_1.default.div(templateObject_2 || (temp
     return "".concat((0, colors_1.changeDarkness)($bg, 0.4)).concat((0, colors_1.percentToHexAlpha)(55));
 });
 var getType = function (type, operators, operator) {
-    var finalType = getTypeFromOperator(operators, (0, exports.fixOperatorValue)(operator)) || type;
+    var finalType = getTypeFromOperator(operators, (0, common_1.fixOperatorValue)(operator)) || type;
     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.
@@ -216,23 +216,22 @@ var getTypeFromOperator = function (operators, operatorData) {
     }
     return ((_a = operators[(0, lodash_1.last)(operatorData)]) === null || _a === void 0 ? void 0 : _a.type) || null;
 };
-var fixOperatorValue = function (operator) {
-    return (0, isArray_1.default)(operator) ? operator : [operator];
-};
-exports.fixOperatorValue = fixOperatorValue;
+/** Re-exported from `helpers/common` so existing importers keep working; it
+ *  lives there because `helpers/validations` needs it and cannot import this
+ *  module (this module imports the validators). */
+var common_2 = require("../../../helpers/common");
+Object.defineProperty(exports, "fixOperatorValue", { enumerable: true, get: function () { return common_2.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)
+    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
+    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);
 };
@@ -253,7 +252,7 @@ var fixOptions = function (value, options, operators, isRendererOnly) {
         return fixedValue;
     }
     (0, lodash_1.forEach)(options, function (option, name) {
-        var _a, _b, _c, _d, _f, _g, _h;
+        var _a, _b, _c, _d, _f, _g, _h, _j;
         if (option.value ||
             option.required_groups ||
             ((option.required || option.preselected) && !fixedValue[name]) ||
@@ -264,14 +263,30 @@ var fixOptions = function (value, options, operators, isRendererOnly) {
                 ((_c = fixedValue[name]) === null || _c === void 0 ? void 0 : _c.value) === undefined) {
                 obj = option.default_value;
             }
+            else if (option.default_view === 'expression' &&
+                ((_d = fixedValue[name]) === null || _d === void 0 ? void 0 : _d.value) === undefined) {
+                // A field the schema declares as opening in expression mode starts as an
+                // EMPTY expression, not as its raw default. `isDefaultFunction` already
+                // makes the renderer open that way, so without this the data disagreed
+                // with what the operator was looking at: an expression editor whose
+                // value was still the plain default, and no `is_expression` on the field
+                // until the first edit.
+                obj = {
+                    type: type,
+                    value: {
+                        args: [],
+                    },
+                    is_expression: true,
+                };
+            }
             else {
                 obj = {
                     type: type,
-                    value: (_g = (_f = (typeof fixedValue[name] === 'object' ?
-                        (_d = fixedValue[name]) === null || _d === void 0 ? void 0 : _d.value
-                        : fixedValue[name])) !== null && _f !== void 0 ? _f : option.value) !== null && _g !== void 0 ? _g : (0, common_1.getDefaultValue)(option),
+                    value: (_h = (_g = (typeof fixedValue[name] === 'object' ?
+                        (_f = fixedValue[name]) === null || _f === void 0 ? void 0 : _f.value
+                        : fixedValue[name])) !== null && _g !== void 0 ? _g : option.value) !== null && _h !== void 0 ? _h : (0, common_1.getDefaultValue)(option),
                 };
-                if ((_h = fixedValue[name]) === null || _h === void 0 ? void 0 : _h.is_expression) {
+                if ((_j = fixedValue[name]) === null || _j === void 0 ? void 0 : _j.is_expression) {
                     obj.is_expression = true;
                 }
             }
@@ -280,7 +295,7 @@ var fixOptions = function (value, options, operators, isRendererOnly) {
     });
     var res = (0, reduce_1.default)(fixedValue, function (newValue, option, optionName) {
         var _a;
-        var _b, _c, _d, _f, _g, _h;
+        var _b, _c, _d, _f, _g, _h, _j;
         var newOption = option;
         if (!(0, lodash_1.isPlainObject)(newOption) || !(newOption === null || newOption === void 0 ? void 0 : newOption.type)) {
             var isUntypedEnvelope = (0, lodash_1.isPlainObject)(newOption) && 'value' in newOption;
@@ -303,17 +318,27 @@ var fixOptions = function (value, options, operators, isRendererOnly) {
         // every value declared the bare way: the collapsed row still showed its
         // display name while the editor showed "—" and the value never reached
         // the submitted data.
+        // `allowed_values: []` is NOT "no value is permitted" — it is the server
+        // saying it has no reference values to offer right now (the app-action
+        // catalogue ships exactly that, with an
+        // `option_reference_values_unavailable` message attached). An empty array
+        // is truthy, so testing the array itself made every such option erase the
+        // operator's stored value on the first render, before the
+        // connection-refreshed schema arrived to say otherwise — and the emptied
+        // form then autosaved over the draft, so the value was gone for good.
+        // Only an option that actually declares choices can have a value that is
+        // not one of them.
         if (newOption.value !== undefined &&
-            ((_c = options === null || options === void 0 ? void 0 : options[optionName]) === null || _c === void 0 ? void 0 : _c.allowed_values) &&
+            ((_d = (_c = options === null || options === void 0 ? void 0 : options[optionName]) === null || _c === void 0 ? void 0 : _c.allowed_values) === null || _d === void 0 ? void 0 : _d.length) &&
             !(0, readFirst_1.findAllowedValueOption)(newOption.value, options === null || options === void 0 ? void 0 : options[optionName]) &&
             !(0, TemplateField_1.isValueTemplate)(newOption.value) &&
-            !((_d = options === null || options === void 0 ? void 0 : options[optionName]) === null || _d === void 0 ? void 0 : _d.multiselect) &&
-            !((_f = options === null || options === void 0 ? void 0 : options[optionName]) === null || _f === void 0 ? void 0 : _f.allowed_values_creatable)) {
+            !((_f = options === null || options === void 0 ? void 0 : options[optionName]) === null || _f === void 0 ? void 0 : _f.multiselect) &&
+            !((_g = options === null || options === void 0 ? void 0 : options[optionName]) === null || _g === void 0 ? void 0 : _g.allowed_values_creatable)) {
             newOption.value = undefined;
         }
         if (newOption.value &&
-            ((_g = options === null || options === void 0 ? void 0 : options[optionName]) === null || _g === void 0 ? void 0 : _g.readonly) &&
-            ((_h = options === null || options === void 0 ? void 0 : options[optionName]) === null || _h === void 0 ? void 0 : _h.default_value) &&
+            ((_h = options === null || options === void 0 ? void 0 : options[optionName]) === null || _h === void 0 ? void 0 : _h.readonly) &&
+            ((_j = options === null || options === void 0 ? void 0 : options[optionName]) === null || _j === void 0 ? void 0 : _j.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]);
         }
@@ -372,12 +397,12 @@ var FormEngineImpl = function (_a) {
     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, _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, codePreviewRenderer = _a.codePreviewRenderer, 
+    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.compactCollapsedGroups, compactCollapsedGroups = _o === void 0 ? ['optional'] : _o, _p = _a.compactToolbar, compactToolbar = _p === void 0 ? true : _p, _q = _a.commitMode, commitMode = _q === void 0 ? 'immediate' : _q, _r = _a.expandMode, expandMode = _r === void 0 ? 'single' : _r, onCommit = _a.onCommit, operatorsProp = _a.operators, groups = _a.groups, optionsLoader = _a.optionsLoader, onValidityChange = _a.onValidityChange, optionActions = _a.optionActions, _s = _a.optionActionsCollapse, optionActionsCollapse = _s === void 0 ? 'auto' : _s, componentOverrides = _a.componentOverrides, codePreviewRenderer = _a.codePreviewRenderer, 
     // consumed by the wrapper below, which publishes it to every description this
     // form draws; destructured here only so it cannot reach `rest` and be spread
     // onto a DOM node
     _markdownRenderer = _a.markdownRenderer, // eslint-disable-line @typescript-eslint/no-unused-vars
-    rendererOnlyUiTypes = _a.rendererOnlyUiTypes, inheritedFromParent = _a.inheritedFromParent, autoFocusFirstRequired = _a.autoFocusFirstRequired, expandFirstRequired = _a.expandFirstRequired, 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", "codePreviewRenderer", "markdownRenderer", "rendererOnlyUiTypes", "inheritedFromParent", "autoFocusFirstRequired", "expandFirstRequired", "initialExpandedOptions"]);
+    rendererOnlyUiTypes = _a.rendererOnlyUiTypes, inheritedFromParent = _a.inheritedFromParent, autoFocusFirstRequired = _a.autoFocusFirstRequired, expandFirstRequired = _a.expandFirstRequired, initialExpandedOptions = _a.initialExpandedOptions, maxFieldsShown = _a.maxFieldsShown, 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", "compactCollapsedGroups", "compactToolbar", "commitMode", "expandMode", "onCommit", "operators", "groups", "optionsLoader", "onValidityChange", "optionActions", "optionActionsCollapse", "componentOverrides", "codePreviewRenderer", "markdownRenderer", "rendererOnlyUiTypes", "inheritedFromParent", "autoFocusFirstRequired", "expandFirstRequired", "initialExpandedOptions", "maxFieldsShown"]);
     // 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
@@ -395,30 +420,33 @@ var FormEngineImpl = function (_a) {
     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];
+    var _t = (0, react_2.useState)((rest === null || rest === void 0 ? void 0 : rest.options) || undefined), options = _t[0], setOptions = _t[1];
     // optionsLoader lifecycle: loading feeds the skeleton gate, error the banner.
-    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];
+    var _u = (0, react_2.useState)(!!optionsLoader && !(rest === null || rest === void 0 ? void 0 : rest.options)), optionsLoading = _u[0], setOptionsLoading = _u[1];
+    var _v = (0, react_2.useState)(), optionsError = _v[0], setOptionsError = _v[1];
     // Operators: prop-provided (compact) or fetched via operatorsUrl (dpql,
     // ported from IDE Options) — the fetch overrides the seeded prop value.
-    var _u = (0, react_2.useState)(operatorsProp), operators = _u[0], setOperators = _u[1];
+    var _w = (0, react_2.useState)(operatorsProp), operators = _w[0], setOperators = _w[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 _v = (0, react_2.useState)(!!(url || customUrl || operatorsUrl)), loading = _v[0], setLoading = _v[1];
+    var _x = (0, react_2.useState)(!!(url || customUrl || operatorsUrl)), loading = _x[0], setLoading = _x[1];
     var confirmAction = (0, reqore_1.useReqoreProperty)('confirmAction');
     var theme = (0, reqore_1.useReqoreTheme)();
-    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];
+    var _y = (0, react_2.useState)(), focusedEditing = _y[0], setFocusedEditing = _y[1];
+    var _z = (0, react_2.useState)(false), showFieldTypes = _z[0], setShowFieldTypes = _z[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 _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];
+    var _0 = (0, react_2.useState)(undefined), showAllDescriptions = _0[0], setShowAllDescriptions = _0[1];
+    var _1 = (0, react_2.useState)(), showHelpForOption = _1[0], setShowHelpForOption = _1[1];
+    var _2 = (0, react_2.useState)(false), showInvalidOptionsOnly = _2[0], setShowInvalidOptionsOnly = _2[1];
     // Which options are expanded into their editor (several can be open at once).
-    var _1 = (0, react_2.useState)([]), expandedOptions = _1[0], setExpandedOptions = _1[1];
+    var _3 = (0, react_2.useState)([]), expandedOptions = _3[0], setExpandedOptions = _3[1];
+    /** Status boxes whose "N more fields" control the reader has opened. Keyed by
+        box so opening Optional does not also unfold Set. */
+    var _4 = (0, react_2.useState)([]), expandedMoreBoxes = _4[0], setExpandedMoreBoxes = _4[1];
     // --- Reveal a status box's content when it is opened ----------------------
     //
     // The status boxes stack, so the last one ("Optional", which holds every
@@ -434,7 +462,7 @@ var FormEngineImpl = function (_a) {
     // box has not grown and there is nothing to scroll to. A layout effect runs
     // after the DOM is updated and before paint, which makes the reveal
     // deterministic instead of a guessed delay.
-    var _2 = (0, react_2.useState)(undefined), openedStatusBox = _2[0], setOpenedStatusBox = _2[1];
+    var _5 = (0, react_2.useState)(undefined), openedStatusBox = _5[0], setOpenedStatusBox = _5[1];
     var statusBoxRefs = (0, react_2.useRef)({});
     (0, react_2.useLayoutEffect)(function () {
         var _a, _b;
@@ -465,13 +493,13 @@ var FormEngineImpl = function (_a) {
     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 _3 = (0, react_use_1.useMeasure)(), compactWrapRef = _3[0], compactWrapWidth = _3[1].width;
+    var _6 = (0, react_use_1.useMeasure)(), compactWrapRef = _6[0], compactWrapWidth = _6[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 _4 = (0, react_2.useState)(null), compactWrapNode = _4[0], setCompactWrapNode = _4[1];
+    var _7 = (0, react_2.useState)(null), compactWrapNode = _7[0], setCompactWrapNode = _7[1];
     // Ref mirror of the wrap node for callbacks that must not re-create when it
     // mounts (flashOptions reads it inside a rAF).
     var compactWrapNodeRef = (0, react_2.useRef)(null);
@@ -525,8 +553,8 @@ var FormEngineImpl = 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 _5 = (0, react_2.useState)([]), highlightedOptions = _5[0], setHighlightedOptions = _5[1];
-    var _6 = (0, react_2.useState)([]), flashedOptions = _6[0], setFlashedOptions = _6[1];
+    var _8 = (0, react_2.useState)([]), highlightedOptions = _8[0], setHighlightedOptions = _8[1];
+    var _9 = (0, react_2.useState)([]), flashedOptions = _9[0], setFlashedOptions = _9[1];
     var flashTimeout = (0, react_2.useRef)();
     var flashOptions = (0, react_2.useCallback)(function (optionNames, scrollToFirst) {
         if (scrollToFirst === void 0) { scrollToFirst = false; }
@@ -575,16 +603,16 @@ var FormEngineImpl = function (_a) {
     });
     var compactNarrow = !!compactWrapWidth && compactWrapWidth < 480;
     // Info panels auto-open on Tier-1 content; the per-row user override sticks.
-    var _7 = (0, react_2.useState)({}), infoPanelOverrides = _7[0], setInfoPanelOverrides = _7[1];
+    var _10 = (0, react_2.useState)({}), infoPanelOverrides = _10[0], setInfoPanelOverrides = _10[1];
     // Toolbar filters affect the listed rows only — the meter reflects the full set.
-    var _8 = (0, react_2.useState)(false), requiredOnly = _8[0], setRequiredOnly = _8[1];
-    var _9 = (0, react_2.useState)(''), compactQuery = _9[0], setCompactQuery = _9[1];
+    var _11 = (0, react_2.useState)(false), requiredOnly = _11[0], setRequiredOnly = _11[1];
+    var _12 = (0, react_2.useState)(''), compactQuery = _12[0], setCompactQuery = _12[1];
     // Compact field sort (Fields menu → "Sort by"); 'schema' = declared order.
-    var _10 = (0, react_2.useState)('schema'), compactSort = _10[0], setCompactSort = _10[1];
-    var _11 = (0, react_2.useState)(function () { return ({
+    var _13 = (0, react_2.useState)('schema'), compactSort = _13[0], setCompactSort = _13[1];
+    var _14 = (0, react_2.useState)(function () { return ({
         fields: (0, exports.fixOptions)(value, options || {}, undefined, isRendererOnly),
         meta: undefined,
-    }); }), localValue = _11[0], setLocalValue = _11[1];
+    }); }), localValue = _14[0], setLocalValue = _14[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)
@@ -593,7 +621,7 @@ var FormEngineImpl = function (_a) {
         originalValue.current = localValue.fields;
     }
     var unavailableOptionsCount = (0, react_2.useRef)(0);
-    var _12 = (0, useQorusTypes_1.useQorusTypes)(), compactValue = _12.compactValue, typesLoading = _12.loading;
+    var _15 = (0, useQorusTypes_1.useQorusTypes)(), compactValue = _15.compactValue, typesLoading = _15.loading;
     var templates = (0, useTemplates_1.useTemplates)(allowTemplates, rest.stringTemplates, interfaceContext);
     (0, react_2.useEffect)(function () {
         if ((0, lodash_1.isEqual)(localValue.fields, value)) {
@@ -667,7 +695,10 @@ var FormEngineImpl = function (_a) {
                                 setOptions({});
                                 return [2 /*return*/];
                             }
-                            setLocalValue({ fields: (0, exports.fixOptions)(value, data.data, undefined, isRendererOnly), meta: undefined });
+                            setLocalValue({
+                                fields: (0, exports.fixOptions)(value, data.data, undefined, isRendererOnly),
+                                meta: undefined,
+                            });
                             if (!operatorsUrl) {
                                 setLoading(false);
                             }
@@ -726,7 +757,10 @@ var FormEngineImpl = function (_a) {
                             }
                             setOptions(data.data);
                             onOptionsLoaded === null || onOptionsLoaded === void 0 ? void 0 : onOptionsLoaded(data.data);
-                            setLocalValue({ fields: (0, exports.fixOptions)({}, data.data, undefined, isRendererOnly), meta: undefined });
+                            setLocalValue({
+                                fields: (0, exports.fixOptions)({}, data.data, undefined, isRendererOnly),
+                                meta: undefined,
+                            });
                             return [2 /*return*/];
                     }
                 });
@@ -787,11 +821,11 @@ var FormEngineImpl = function (_a) {
             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 && ((_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
+            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, (_k = options === null || options === void 0 ? void 0 : options[optionName]) === null || _k === void 0 ? void 0 : _k.allowed_values).type;
@@ -839,9 +873,7 @@ var FormEngineImpl = function (_a) {
                 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)) {
+            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 {
@@ -861,7 +893,7 @@ var FormEngineImpl = function (_a) {
     var handleOperatorChange = (0, react_2.useCallback)(function (optionName, currentValue, operator, index) {
         var _a;
         setLocalValue === null || setLocalValue === void 0 ? void 0 : setLocalValue({
-            fields: __assign(__assign({}, currentValue), (_a = {}, _a[optionName] = __assign(__assign({}, currentValue[optionName]), { op: (0, exports.fixOperatorValue)(currentValue[optionName].op).map(function (op, idx) {
+            fields: __assign(__assign({}, currentValue), (_a = {}, _a[optionName] = __assign(__assign({}, currentValue[optionName]), { op: (0, common_1.fixOperatorValue)(currentValue[optionName].op).map(function (op, idx) {
                     if (idx === index) {
                         return operator;
                     }
@@ -873,14 +905,14 @@ var FormEngineImpl = function (_a) {
     var handleAddOperator = (0, react_2.useCallback)(function (optionName, currentValue, index) {
         var _a;
         setLocalValue === null || setLocalValue === void 0 ? void 0 : setLocalValue({
-            fields: __assign(__assign({}, currentValue), (_a = {}, _a[optionName] = __assign(__assign({}, currentValue[optionName]), { op: (0, common_1.insertAtIndex)((0, exports.fixOperatorValue)(currentValue[optionName].op), index, null) }), _a)),
+            fields: __assign(__assign({}, currentValue), (_a = {}, _a[optionName] = __assign(__assign({}, currentValue[optionName]), { op: (0, common_1.insertAtIndex)((0, common_1.fixOperatorValue)(currentValue[optionName].op), index, null) }), _a)),
             meta: undefined,
         });
     }, []);
     var handleRemoveOperator = (0, react_2.useCallback)(function (optionName, currentValue, index) {
         var _a;
         setLocalValue === null || setLocalValue === void 0 ? void 0 : setLocalValue({
-            fields: __assign(__assign({}, currentValue), (_a = {}, _a[optionName] = __assign(__assign({}, currentValue[optionName]), { op: (0, exports.fixOperatorValue)(currentValue[optionName].op).filter(function (_op, idx) { return idx !== index; }) }), _a)),
+            fields: __assign(__assign({}, currentValue), (_a = {}, _a[optionName] = __assign(__assign({}, currentValue[optionName]), { op: (0, common_1.fixOperatorValue)(currentValue[optionName].op).filter(function (_op, idx) { return idx !== index; }) }), _a)),
             meta: undefined,
         });
     }, []);
@@ -1137,7 +1169,11 @@ var FormEngineImpl = function (_a) {
         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);
+        // A schema-declared hash whose every entry is a materialised-but-unset
+        // field holds nothing, so it is not "set" — without this the row showed a
+        // green set-dot and counted toward the completion meter while the
+        // sub-form it summarises said 0/3 set.
+        var empty = (0, readFirst_1.isOptionValueEmpty)(value) || (0, readFirst_1.isUnsetSchemaHash)(value, schema);
         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 &&
@@ -1398,7 +1434,10 @@ var FormEngineImpl = function (_a) {
                     next[optionName] = value;
                 }
             });
-            return { fields: (0, exports.fixOptions)(next, options || {}, operators, isRendererOnly), meta: undefined };
+            return {
+                fields: (0, exports.fixOptions)(next, options || {}, operators, isRendererOnly),
+                meta: undefined,
+            };
         });
         setRequiredOnly(false);
     }, [JSON.stringify(options), JSON.stringify(operators), isRendererOnly]);
@@ -1420,9 +1459,9 @@ var FormEngineImpl = 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, _r, _s;
+        var _b, _c, _d, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
         var type = _a.type, other = __rest(_a, ["type"]);
-        var operatorParts = (0, exports.fixOperatorValue)(other.op);
+        var operatorParts = (0, common_1.fixOperatorValue)(other.op);
         // 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.
@@ -1437,10 +1476,9 @@ var FormEngineImpl = function (_a) {
         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
+        var resolvedType = ((0, readFirst_1.isFixedCompactAllowedValueOption)(optionSchema) ?
+            getOptionSchemaStorageType(optionSchema, isRendererOnly)
+            : schemaUiType && !uiTypeIsAnyLike ? schemaUiType
                 : undefined) ||
             type ||
             schemaUiType ||
@@ -1520,8 +1558,14 @@ var FormEngineImpl = function (_a) {
                     // `[localValue, onChange]` — an inline lambda resets the pending emit
                     // every render and the typed value can starve.
                     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) ||
+                        (
+                        // a system-owned field states that as `readonly`; only the older
+                        // compat projection also sent `disabled`, so honouring only
+                        // `disabled` rendered an editable control for a value the user
+                        // cannot change (see CompactRow's `fieldReadonly`)
+                        (_r = options === null || options === void 0 ? void 0 : options[optionName]) === null || _r === void 0 ? void 0 : _r.readonly) ||
                         readOnly ||
-                        !(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' ?
+                        !(0, validations_1.hasAllDependenciesFullfilled)((_s = options === null || options === void 0 ? void 0 : options[optionName]) === null || _s === void 0 ? void 0 : _s.depends_on, availableOptions, options || {}), readOnly: readOnly, size: editorSize || rest.size, menuItems: ((_t = options === null || options === void 0 ? void 0 : options[optionName]) === null || _t === void 0 ? void 0 : _t.ui_type) === 'any' ?
                         getCustomMenuTemplateItems(optionName)
                         : 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 ?
@@ -1572,6 +1616,9 @@ var FormEngineImpl = function (_a) {
     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");
+    // The "N more fields" row's dashed edge. Well above the divider tint: this
+    // one is an affordance the reader has to notice, not a hairline between rows.
+    var cMoreBorder = "".concat(cText, "4d");
     // The closure surface the extracted CompactRow reads through context. Refs and
     // setters are stable; the state/memo/handler fields change identity as they do
     // today, so a row re-renders exactly when its inputs do.
@@ -1670,6 +1717,14 @@ var FormEngineImpl = function (_a) {
         cInfo,
         cBg,
     ]);
+    // `compactToolbar` resolved to a full object, so neither the context type nor
+    // the toolbar itself has to re-default anything. `null` means no toolbar.
+    var compactToolbarParts = (0, react_2.useMemo)(function () {
+        if (compactToolbar === false)
+            return null;
+        var all = { completion: true, search: true, fields: true, help: true };
+        return compactToolbar === true ? all : __assign(__assign({}, all), compactToolbar);
+    }, [JSON.stringify(compactToolbar)]);
     var compactToolbarContextValue = (0, react_2.useMemo)(function () { return ({
         readOnly: readOnly,
         invalidCount: (0, size_1.default)(validityData.invalidFields),
@@ -1677,6 +1732,12 @@ var FormEngineImpl = function (_a) {
         completion: readFirstCompletion,
         showInvalidOnly: showInvalidOptionsOnly,
         onToggleInvalidOnly: handleToggleInvalidOnly,
+        parts: compactToolbarParts !== null && compactToolbarParts !== void 0 ? compactToolbarParts : {
+            completion: false,
+            search: false,
+            fields: false,
+            help: false,
+        },
         hasMultipleOptions: (0, size_1.default)(availableOptions) > 1,
         compactQuery: compactQuery,
         setCompactQuery: setCompactQuery,
@@ -1724,8 +1785,9 @@ var FormEngineImpl = function (_a) {
     ]);
     // 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]);
+    // knock the form's toolbar out of the header. Only `compactToolbar={false}`
+    // removes it, and then the header carries just the consumer's own actions.
+    var compactHeaderActions = (0, react_2.useMemo)(function () { return __spreadArray(__spreadArray([], (compactToolbarParts ? [{ as: CompactToolbar_1.CompactToolbar, responsive: false }] : []), true), ((compactPanelProps === null || compactPanelProps === void 0 ? void 0 : compactPanelProps.actions) || []), true); }, [compactPanelProps === null || compactPanelProps === void 0 ? void 0 : compactPanelProps.actions, compactToolbarParts]);
     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.
@@ -1848,7 +1910,11 @@ var FormEngineImpl = function (_a) {
             set: {},
             optional: {},
         };
-        var bucketGroups = { 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.
@@ -1892,6 +1958,33 @@ var FormEngineImpl = function (_a) {
         var showGroupSubLabel = function (groupName) {
             return (groupName !== 'general' && groupName !== 'optional') || !!(groups === null || groups === void 0 ? void 0 : groups[groupName]);
         };
+        // `preselected` means "show this option by default when a new form is
+        // loaded, so it's visible to the user". An empty non-required preselected
+        // field buckets to 'optional' (nothing is wrong with it, and it has no
+        // value), and the Optional box is collapsed by default — so the very
+        // fields the schema asked to put in front of the author were the ones
+        // nobody could see. A preselected row therefore forces its box open.
+        //
+        // A hidden row is an addable the author has not put in the form yet, so it
+        // is never what `preselected` is talking about, however its schema is
+        // flagged.
+        var isPreselectedRow = function (entry) {
+            var _a;
+            return !entry.hidden &&
+                !!((_a = options === null || options === void 0 ? void 0 : options[entry.name]) === null || _a === void 0 ? void 0 : _a.preselected);
+        };
+        // ONLY the Optional box. A preselected field that HAS a value buckets to
+        // 'set' and one that fails validation to 'attention'; in both boxes the
+        // field is already accounted for, and whether those boxes start collapsed
+        // is the consumer's deliberate `compactCollapsedGroups` choice. Overriding
+        // them here forced the Set box open against an explicit request.
+        var groupHasPreselectedRow = function (boxKey, groupName) {
+            return boxKey === 'optional' && (buckets[boxKey][groupName] || []).some(isPreselectedRow);
+        };
+        var boxHasPreselectedRows = function (boxKey) {
+            return boxKey === 'optional' &&
+                bucketGroups[boxKey].some(function (groupName) { return groupHasPreselectedRow(boxKey, groupName); });
+        };
         var STATUS_BOXES = [
             { key: 'attention', label: 'Needs attention', intent: 'warning', icon: 'ErrorWarningLine' },
             { key: 'set', label: 'Set', intent: 'success', icon: 'CheckLine' },
@@ -1946,13 +2039,37 @@ var FormEngineImpl = function (_a) {
                 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));
             });
         };
+        // One schema group inside a status box: its thin sub-label, the group's
+        // subtitle, then its rows. Factored out of the box body so the SAME markup
+        // renders both the groups a box shows directly and the ones it defers
+        // behind the inner collapse.
+        /** @param only when given, render just these rows of the group — the group
+            can be split across the shown and folded halves of a capped box, and its
+            label must appear above whichever half holds its first row. */
+        var renderBoxGroup = function (boxKey, groupName, only) {
+            var groupConfig = groups === null || groups === void 0 ? void 0 : groups[groupName];
+            var rows = only ?
+                (buckets[boxKey][groupName] || []).filter(function (entry) { return only.has(entry.name); })
+                : buckets[boxKey][groupName];
+            if (only && !rows.length) {
+                return null;
+            }
+            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(rows)] }, groupName));
+        };
         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, 
+                                    // Mirrors the toolbar's own search-row gate: when no search
+                                    // row renders, the header is a thin strip and sits tight to
+                                    // the first status box (see StyledCompactPanel).
+                                    , __assign({ "$tightHeader": !((compactToolbarParts === null || compactToolbarParts === void 0 ? void 0 : compactToolbarParts.search) && (0, size_1.default)(availableOptions) > 1), "$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.
@@ -1965,6 +2082,44 @@ var FormEngineImpl = function (_a) {
                                                 var count = bucketCount(box.key);
                                                 if (!count)
                                                     return null;
+                                                var hasPreselectedRows = boxHasPreselectedRows(box.key);
+                                                var wouldCollapse = compactCollapsedGroups.includes(box.key) &&
+                                                    !query &&
+                                                    !(box.key === 'optional' && onlyOptionalRows);
+                                                // Only a box that was opened SOLELY to reveal a preselected
+                                                // row splits its body; a box that renders open anyway shows
+                                                // all of its groups as before.
+                                                var splitForPreselected = wouldCollapse && hasPreselectedRows;
+                                                // Which rows this box shows, and which fold away, decided at
+                                                // ROW level because `maxFieldsShown` counts fields — a
+                                                // group-level split can only ever cut at a group boundary.
+                                                // Group order is preserved so the visible rows read in the
+                                                // same order they would if nothing were folded.
+                                                var orderedRows = groupsInBox.flatMap(function (groupName) { return buckets[box.key][groupName] || []; });
+                                                // Optional's own rule first: a box opened solely to reveal
+                                                // preselected rows offers those, not an arbitrary first-N.
+                                                var candidateRows = splitForPreselected ? orderedRows.filter(isPreselectedRow) : orderedRows;
+                                                // …then the cap applies to whatever that left.
+                                                var capped = maxFieldsShown !== undefined && candidateRows.length > maxFieldsShown;
+                                                var shownRows = capped ? candidateRows.slice(0, maxFieldsShown) : candidateRows;
+                                                var shownRowSet = new Set(shownRows.map(function (entry) { return entry.name; }));
+                                                // Everything the box holds that is not on show. Once the
+                                                // reader asks for more they get the whole box — withholding
+                                                // the non-preselected remainder behind a second control is
+                                                // the same defect one level down.
+                                                var deferredRowSet = new Set(orderedRows
+                                                    .filter(function (entry) { return !shownRowSet.has(entry.name); })
+                                                    .map(function (entry) { return entry.name; }));
+                                                var deferredCount = deferredRowSet.size;
+                                                var shownGroups = groupsInBox.filter(function (groupName) {
+                                                    return (buckets[box.key][groupName] || []).some(function (entry) {
+                                                        return shownRowSet.has(entry.name);
+                                                    });
+                                                });
+                                                var deferredGroups = groupsInBox.filter(function (groupName) {
+                                                    return (buckets[box.key][groupName] || []).some(function (entry) { return !shownRowSet.has(entry.name); });
+                                                });
+                                                var moreOpen = Boolean(query) || expandedMoreBoxes.includes(box.key);
                                                 var accent = box.key === 'attention' ? cWarning
                                                     : box.key === 'set' ? cSuccess
                                                         : cMuted;
@@ -1982,36 +2137,49 @@ var FormEngineImpl = function (_a) {
                                                     onCollapseChange: function (collapsed) {
                                                         return setOpenedStatusBox(collapsed ? undefined : box.key);
                                                     }, 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.)
-                                                    // The Optional box starts collapsed so a form opens on what
-                                                    // is in use — but only when there IS something else to
-                                                    // open on. When every field is optional it is the whole
-                                                    // form, and collapsing it renders a card that looks empty
-                                                    // and broken: an auth profile's Authorization block, whose
-                                                    // nine requirement fields are all optional, showed as a
-                                                    // titled card containing one collapsed "Optional 9" strip
-                                                    // and nothing else. A search still forces it open
-                                                    // (ReqorePanel unmounts collapsed content, so a match
-                                                    // inside it would be unreachable otherwise).
-                                                    isCollapsed: box.key === 'optional' && !query && !onlyOptionalRows, 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));
+                                                    // Which boxes start closed is the consumer's call
+                                                    // (`compactCollapsedGroups`, default `['optional']`: the
+                                                    // Optional box holds every not-yet-added field, so a form
+                                                    // opens on what is in use). Two rules override it:
+                                                    //
+                                                    // A SEARCH forces every box open — ReqorePanel unmounts
+                                                    // collapsed content, so a match inside a closed box would
+                                                    // be unreachable. (isCollapsed is the panel's controllable
+                                                    // state; manual toggling still works with no query set.)
+                                                    //
+                                                    // The Optional box stays open when it is the ONLY box,
+                                                    // because collapsing it renders a card that looks empty and
+                                                    // broken: an auth profile's Authorization block, whose nine
+                                                    // requirement fields are all optional, showed as a titled
+                                                    // card containing one collapsed "Optional 9" strip and
+                                                    // nothing else. This does not generalise to the other two —
+                                                    // a lone Set box collapsed is a deliberate ask, and its
+                                                    // header still reports what is in there.
+                                                    //
+                                                    // A PRESELECTED row overrides it too: the schema asked
+                                                    // for that field to be visible on a new form, so the
+                                                    // box it lands in opens. The groups it does NOT appear
+                                                    // in stay behind an inner collapse below, so opening
+                                                    // the box reveals the preselected fields without also
+                                                    // dumping every not-yet-added optional field on the
+                                                    // author.
+                                                    isCollapsed: wouldCollapse && !hasPreselectedRows, 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.jsxs)(compactRowStyles_1.StyledGroupBody, { "$divider": cDivider, "$hover": cHover, "$focus": cWarning, "$success": cSuccess, "$rowBg": cRowBg, "$lineColor": cGroupLine, "$moreBorder": cMoreBorder, className: compactNarrow ? 'readfirst-narrow' : undefined, children: [shownGroups.map(function (groupName) {
+                                                                return renderBoxGroup(box.key, groupName, shownRowSet);
+                                                            }), deferredCount ?
+                                                                (0, jsx_runtime_1.jsxs)("button", { type: 'button', className: 'readfirst-row readfirst-more-row options-readfirst-more', "aria-expanded": moreOpen, onClick: function () {
+                                                                        return setExpandedMoreBoxes(function (prev) {
+                                                                            return prev.includes(box.key) ?
+                                                                                prev.filter(function (k) { return k !== box.key; })
+                                                                                : __spreadArray(__spreadArray([], prev, true), [box.key], false);
+                                                                        });
+                                                                    }, children: [(0, jsx_runtime_1.jsx)(reqore_1.ReqoreP, { size: 'small', effect: { opacity: 0.8 }, children: moreOpen ?
+                                                                                'Show fewer'
+                                                                                : "".concat(deferredCount, " more ").concat(box.key === 'optional' ? 'optional ' : '', "field").concat(deferredCount === 1 ? '' : 's') }), (0, jsx_runtime_1.jsx)(reqore_1.ReqoreIcon, { icon: 'ArrowDownSLine', size: 'small', className: 'readfirst-more-chevron', effect: { opacity: 0.8 } })] })
+                                                                : null, deferredCount && moreOpen ?
+                                                                deferredGroups.map(function (groupName) {
+                                                                    return renderBoxGroup(box.key, groupName, deferredRowSet);
+                                                                })
+                                                                : null] }) }, 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'