@qoretechnologies/reqraft 0.10.65 → 0.10.66-pr.145.g26dce00

package/dist/components/form/engine/CompactRow.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CompactRow.d.ts","sourceRoot":"","sources":["../../../../src/components/form/engine/CompactRow.tsx"],"names":[],"mappings":"AAeA,OAAO,EACL,eAAe,EAIhB,MAAM,8BAA8B,CAAC;AAItC,OAAO,KAAe,MAAM,OAAO,CAAC;AA8HpC;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,gBAAgB,SAAU,OAAO,KAAG,MAAM,GAAG,SAG7C,CAAC;AAEd,eAAO,MAAM,UAAU,yHASlB;IACD,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,eAAe,CAAC;IAC7B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;;mBAGe;IACf,cAAc,CAAC,EAAE,MAAM,EAAE,CAAC;IAI1B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,6CAy3EF,CAAC"}
+{"version":3,"file":"CompactRow.d.ts","sourceRoot":"","sources":["../../../../src/components/form/engine/CompactRow.tsx"],"names":[],"mappings":"AAeA,OAAO,EACL,eAAe,EAIhB,MAAM,8BAA8B,CAAC;AAItC,OAAO,KAAe,MAAM,OAAO,CAAC;AAgIpC;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,gBAAgB,SAAU,OAAO,KAAG,MAAM,GAAG,SAG7C,CAAC;AAEd,eAAO,MAAM,UAAU,yHASlB;IACD,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,eAAe,CAAC;IAC7B,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;;mBAGe;IACf,cAAc,CAAC,EAAE,MAAM,EAAE,CAAC;IAI1B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,6CA++EF,CAAC"}

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

@@ -106,6 +106,7 @@ var use_context_selector_1 = require("use-context-selector");
 var validations_1 = require("../../../helpers/validations");
 var templates_1 = require("../../../helpers/templates");
 var common_1 = require("../../../helpers/common");
+var fieldDescription_1 = require("../../../helpers/fieldDescription");
 var templateText_1 = require("../../../helpers/templateText");
 var ReadOnlyTemplateTag_1 = require("../fields/template/ReadOnlyTemplateTag");
 var TemplateText_1 = require("../fields/template/TemplateText");
@@ -114,6 +115,7 @@ var Description_1 = require("../../Description");
 var markdownRendererContext_1 = require("../../Description/markdownRendererContext");
 var FocusedEditing_1 = require("../../FocusedEditing");
 var compactRowContext_1 = require("./compactRowContext");
+var formAppearance_1 = require("./formAppearance");
 var revealRow_1 = require("./revealRow");
 var compactRowStyles_1 = require("./compactRowStyles");
 var OptionFieldMessages_1 = require("./OptionFieldMessages");
@@ -214,8 +216,14 @@ exports.CompactRow = (0, react_1.memo)(function (_a) {
     var _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
     var optionName = _a.optionName, optionField = _a.optionField, _r = _a.hidden, hidden = _r === void 0 ? false : _r, _s = _a.clustered, clustered = _s === void 0 ? false : _s, _t = _a.clusterFirst, clusterFirst = _t === void 0 ? false : _t, _u = _a.clusterLast, clusterLast = _u === void 0 ? false : _u, absorbedFields = _a.absorbedFields;
     var readOnly = (0, use_context_selector_1.useContextSelector)(compactRowContext_1.CompactRowContext, function (v) { return v.readOnly; });
+    // The look only — see `TFormEngineAppearance`. Nothing a row DOES reads it.
+    var calm = (0, formAppearance_1.useIsCalmForm)();
     var commitMode = (0, use_context_selector_1.useContextSelector)(compactRowContext_1.CompactRowContext, function (v) { return v.commitMode; });
     var options = (0, use_context_selector_1.useContextSelector)(compactRowContext_1.CompactRowContext, function (v) { return v.options; });
+    // Whether this field's emptiness is a fault yet: the person has opened it and left,
+    // or the host reported a submit attempt. Before that a required field is only to
+    // fill in, and says so in the quiet colour.
+    var visited = (0, use_context_selector_1.useContextSelector)(compactRowContext_1.CompactRowContext, function (v) { var _a; return v.revealRequired || !!((_a = v.visitedOptions) === null || _a === void 0 ? void 0 : _a.includes(optionName)); });
     // An absorbed field keeps its own name — it is a different field, not a
     // property of its host — so the label comes from its schema exactly as it
     // would on its own row.
@@ -298,6 +306,11 @@ exports.CompactRow = (0, react_1.memo)(function (_a) {
     var cDanger = (0, use_context_selector_1.useContextSelector)(compactRowContext_1.CompactRowContext, function (v) { return v.cDanger; });
     var cWarning = (0, use_context_selector_1.useContextSelector)(compactRowContext_1.CompactRowContext, function (v) { return v.cWarning; });
     var cInfo = (0, use_context_selector_1.useContextSelector)(compactRowContext_1.CompactRowContext, function (v) { return v.cInfo; });
+    var cText = (0, use_context_selector_1.useContextSelector)(compactRowContext_1.CompactRowContext, function (v) { return v.cText; });
+    // A field's NAME: full text colour by default; grey in the calm look, so the
+    // value beside it is what the eye lands on. One colour for the read row, the
+    // open row and the edit card, so a name does not change as its field opens.
+    var cLabel = calm ? "".concat(cText, "b3") : cKey;
     // A markdown value renders as a document in the row's inset; the host's
     // renderer when it supplied one, reqraft's own otherwise.
     // Value-cell content: colour adds a swatch, file an icon + size; hash keeps
@@ -354,6 +367,11 @@ exports.CompactRow = (0, react_1.memo)(function (_a) {
             return ((0, jsx_runtime_1.jsx)(reqore_1.ReqoreTag, { size: 'small', minimal: true, intent: 'info', icon: 'FileLine', label: formatted, labelKey: fileSize !== undefined ? (0, readFirst_1.formatBytes)(fileSize) : undefined }));
         }
         if (valueType === 'bool' || valueType === 'boolean') {
+            // Calm: Yes and No are words. Neither is a status — "No" is not a
+            // failure — so neither is coloured.
+            if (calm) {
+                return (0, jsx_runtime_1.jsx)("span", { style: textStyle, children: formatted });
+            }
             var truthy = (field === null || field === void 0 ? void 0 : field.value) === true || (field === null || field === void 0 ? void 0 : field.value) === 'true';
             return ((0, jsx_runtime_1.jsx)(reqore_1.ReqoreTag, { size: 'small', minimal: true, intent: truthy ? 'success' : 'danger', label: formatted }));
         }
@@ -545,8 +563,11 @@ exports.CompactRow = (0, react_1.memo)(function (_a) {
             }, children: actionLabel }), "".concat(optionName, "-injected-action-").concat(index)));
     };
     var required = !!((schema === null || schema === void 0 ? void 0 : schema.required) || (schema === null || schema === void 0 ? void 0 : schema.required_groups));
-    // The asterisk says "you have to fill this in". Read-only, nobody does.
-    var requiredMark = required && !readOnly;
+    // The asterisk says "you have to fill this in". Read-only, nobody does. The
+    // calm look draws none at all: an empty required field says so in its
+    // value column instead ("Required · add a value"), and a filled one has
+    // nothing left to ask for.
+    var requiredMark = required && !readOnly && !calm;
     var removable = !readOnly && !(schema === null || schema === void 0 ? void 0 : schema.preselected) && !(schema === null || schema === void 0 ? void 0 : schema.required) && !(schema === null || schema === void 0 ? void 0 : schema.required_groups);
     var changed = !hidden && !readOnly && hasOptionChanged(optionField === null || optionField === void 0 ? void 0 : optionField.value, optionName);
     // "Has a value" = set to anything non-empty. Drives the edit-row Clear
@@ -589,7 +610,13 @@ exports.CompactRow = (0, react_1.memo)(function (_a) {
     var requiredGroupChip = !hidden && !readOnly && memberGroups.length && !(schema === null || schema === void 0 ? void 0 : schema.required) ?
         (0, jsx_runtime_1.jsx)("span", { style: { display: 'inline-flex' }, role: 'presentation', onClick: function (e) { return e.stopPropagation(); }, onKeyDown: function (e) { return e.stopPropagation(); }, onMouseEnter: function () {
                 return setHighlightedOptions(requiredGroupsInfo.members[chipGroups[0]] || []);
-            }, onMouseLeave: function () { return setHighlightedOptions([]); }, children: (0, jsx_runtime_1.jsx)(reqore_1.ReqoreDropdown, { className: 'options-readfirst-required-group', size: 'tiny', minimal: true, flat: true, compact: true, effect: { uppercase: true, spaced: 1 }, intent: groupResolved ? 'success' : 'warning', icon: groupResolved ? 'CheckLine' : 'LinkM', label: !groupResolved ? 'One of'
+            }, onMouseLeave: function () { return setHighlightedOptions([]); }, children: (0, jsx_runtime_1.jsx)(reqore_1.ReqoreDropdown, { className: 'options-readfirst-required-group', size: 'tiny', minimal: true, flat: true, compact: true, effect: calm ? undefined : { uppercase: true, spaced: 1 }, 
+                // Calm: a met group is nothing to point at — only the unmet one is
+                // coloured.
+                intent: groupResolved ?
+                    calm ? undefined
+                        : 'success'
+                    : 'warning', icon: groupResolved ? 'CheckLine' : 'LinkM', label: !groupResolved ? 'One of'
                     : coveredByLabel ?
                         "Covered by \u201C".concat(coveredByLabel, "\u201D")
                         : 'Covers', filterable: chipGroups.reduce(function (n, g) { return n + requiredGroupsInfo.members[g].length; }, 0) > 6, items: chipGroups.flatMap(function (groupName) { return __spreadArray(__spreadArray([], (chipGroups.length > 1 ?
@@ -729,18 +756,43 @@ exports.CompactRow = (0, react_1.memo)(function (_a) {
         if (!editor)
             return undefined;
         var settled = false;
+        /* A control that is not a text box holds the caret PROVISIONALLY. An editor that
+           takes text can mount after the row opens (a code editor loads late), and until
+           it does the only control there is its chrome: a fullscreen toggle. When the
+           text box arrives it takes the caret, unless the reader has moved it since. A
+           row that never grows one (a pick-one) simply keeps its control. */
+        var provisional = null;
         var takeCaret = function () {
             var _a;
             if (settled)
                 return true;
             var active = document.activeElement;
+            if (provisional) {
+                if (active !== provisional) {
+                    // The reader moved the caret themselves. Leave it there.
+                    settled = true;
+                    return true;
+                }
+                var textEntry = (0, rowFocus_1.findRowFocusTarget)(editor, { textEntryOnly: true });
+                if (!textEntry)
+                    return false;
+                textEntry.focus({ preventScroll: true });
+                // An editor's text box can be in the DOM before it can take focus (Monaco's
+                // edit area, mid-layout), and `focus()` then does nothing. Only a caret
+                // that landed counts; otherwise try again on the editor's next change.
+                if (document.activeElement !== textEntry)
+                    return false;
+                settled = true;
+                return true;
+            }
             if (active && active !== document.body && !((_a = rowRef.current) === null || _a === void 0 ? void 0 : _a.contains(active))) {
                 // Someone else holds the caret — a field the reader moved into while
                 // this row's editor was still arriving. Leave it where it is.
                 settled = true;
                 return true;
             }
-            var control = (0, rowFocus_1.findRowFocusTarget)(editor);
+            // A card hands the caret only to where text goes (see `findRowFocusTarget`).
+            var control = (0, rowFocus_1.findRowFocusTarget)(editor, { textEntryOnly: !inlineEditable });
             if (!control)
                 return false;
             // The least scroll that shows the row clear of the pinned box header,
@@ -751,6 +803,10 @@ exports.CompactRow = (0, react_1.memo)(function (_a) {
             // `preventScroll`, because the reveal above has already put the row
             // where it belongs; letting focus scroll as well moves it twice.
             control.focus({ preventScroll: true });
+            // A control that cannot take focus yet (still laying out) did not take
+            // the caret: try again on the editor's next change.
+            if (document.activeElement !== control)
+                return false;
             /* …and if the control the row offers is a PICKER, open it.
              *
              * A closed picker prints the value it holds, which is exactly what the
@@ -768,6 +824,13 @@ exports.CompactRow = (0, react_1.memo)(function (_a) {
             if (openedByAuthor.current && inlineEditable && (0, rowFocus_1.isClosedPickerTrigger)(control)) {
                 openedByAuthor.current = false;
                 setOpenThePicker(true);
+                settled = true;
+                return true;
+            }
+            if ((0, rowFocus_1.findRowFocusTarget)(editor, { textEntryOnly: true }) !== control) {
+                // Not a text box: hold it until one arrives (see `provisional`).
+                provisional = control;
+                return false;
             }
             settled = true;
             return true;
@@ -778,7 +841,9 @@ exports.CompactRow = (0, react_1.memo)(function (_a) {
             if (takeCaret())
                 observer.disconnect();
         });
-        observer.observe(editor, { childList: true, subtree: true });
+        // Attributes too: an editor's text box can become focusable by an attribute or
+        // style change after it is inserted (see the `focus()` checks above).
+        observer.observe(editor, { childList: true, subtree: true, attributes: true });
         return function () { return observer.disconnect(); };
     }, [isExpanded, optionName, inlineEditable]);
     // What the field held when it was opened — the baseline Cancel restores.
@@ -921,7 +986,7 @@ exports.CompactRow = (0, react_1.memo)(function (_a) {
     // Batched commit: a changed row is a draft until Save — mark it with the
     // product's Draft chip (always visible, unlike the hover-revealed revert).
     var draftChip = commitMode === 'batched' && changed ?
-        (0, jsx_runtime_1.jsx)(reqore_1.ReqoreTag, { className: 'options-readfirst-draft', label: 'Draft', intent: 'warning', icon: 'EditLine', size: 'tiny', minimal: true, fixed: true, flat: true, compact: true, effect: { uppercase: true, spaced: 1 } })
+        (0, jsx_runtime_1.jsx)(reqore_1.ReqoreTag, { className: 'options-readfirst-draft', label: 'Draft', intent: 'warning', icon: 'EditLine', size: 'tiny', minimal: true, fixed: true, flat: true, compact: true, effect: calm ? undefined : { uppercase: true, spaced: 1 } })
         : null;
     var isPassiveCloseAction = fixedAllowedValueOption;
     // Cancel — the counterpart to Done, and the answer to "how do I get out of
@@ -936,7 +1001,7 @@ exports.CompactRow = (0, react_1.memo)(function (_a) {
     // Not offered when the close action is passive (a fixed choice) —
     // nothing can have been typed, so there is nothing to cancel.
     var cancelEditButton = !isPassiveCloseAction && editedSinceOpened ?
-        (0, jsx_runtime_1.jsx)(reqore_1.ReqoreButton, { className: 'options-readfirst-cancel', size: 'small', flat: true, minimal: true, fixed: true, icon: 'CloseLine', intent: 'warning', "aria-label": 'Cancel edit', tooltip: 'Cancel edit \u2014 discard the changes made since this field was opened', onClick: function (event) {
+        (0, jsx_runtime_1.jsx)(reqore_1.ReqoreButton, { className: 'options-readfirst-cancel', size: 'small', flat: true, minimal: true, fixed: true, icon: 'CloseLine', intent: calm ? undefined : 'warning', "aria-label": 'Cancel edit', tooltip: 'Cancel edit \u2014 discard the changes made since this field was opened', onClick: function (event) {
                 event.stopPropagation();
                 cancelEdit();
             } })
@@ -945,7 +1010,10 @@ exports.CompactRow = (0, react_1.memo)(function (_a) {
     var openedWithFormLoadValue = !editEntryValue.current ||
         (0, isEqual_1.default)(editEntryValue.current.value, (_f = (_e = originalValue.current) === null || _e === void 0 ? void 0 : _e[optionName]) === null || _f === void 0 ? void 0 : _f.value);
     var editRowRevertButton = openedWithFormLoadValue ? null : revertButton;
-    var closeExpandedFieldButton = ((0, jsx_runtime_1.jsx)(reqore_1.ReqoreButton, { className: 'options-readfirst-done', size: 'small', intent: !isPassiveCloseAction ? 'success' : undefined, flat: isPassiveCloseAction, minimal: isPassiveCloseAction, fixed: true, icon: isPassiveCloseAction ? 'CloseLine' : 'CheckLine', "aria-label": isPassiveCloseAction ? 'Close field' : 'Done', tooltip: isPassiveCloseAction ? 'Close field' : 'Done', onClick: function () { return toggleExpandedOption(optionName); } }));
+    var closeExpandedFieldButton = ((0, jsx_runtime_1.jsx)(reqore_1.ReqoreButton, { className: 'options-readfirst-done', size: 'small', 
+        // Calm: a neutral button. Closing a field is not a healthy figure and
+        // not the page's one primary action, so it takes neither colour.
+        intent: !isPassiveCloseAction && !calm ? 'success' : undefined, flat: isPassiveCloseAction, minimal: isPassiveCloseAction, fixed: true, icon: isPassiveCloseAction ? 'CloseLine' : 'CheckLine', "aria-label": isPassiveCloseAction ? 'Close field' : 'Done', tooltip: isPassiveCloseAction ? 'Close field' : 'Done', onClick: function () { return toggleExpandedOption(optionName); } }));
     // Info tiers: Tier 1 (danger/warning + dependency hints) must be visible
     // without interaction; Tier 2 (info/success, default notes) sits behind ⓘ.
     var infoActive = !hidden;
@@ -971,6 +1039,10 @@ exports.CompactRow = (0, react_1.memo)(function (_a) {
             allOptions: availableOptions,
             getType: getTypeForOption,
             isRendererOnly: isRendererOnly,
+            calm: calm,
+            readOnly: readOnly,
+            // Until the person has been to the field, its requirement is stated plainly.
+            requirementPending: !visited,
         }).map(function (m) { return ({ intent: m.intent, content: String(m.label) }); })
         : [];
     // TWO display channels, matching the Focus prototype:
@@ -1001,7 +1073,7 @@ exports.CompactRow = (0, react_1.memo)(function (_a) {
     // the inline editor: opening a field used to drop it, leaving an editing row
     // with no route to the field's description at all. Stops propagation because
     // both labels are click targets themselves (the row expands / collapses).
-    var helpIcon = (schema === null || schema === void 0 ? void 0 : schema.desc) ?
+    var helpIcon = (0, fieldDescription_1.fieldHasLongDescription)(schema) ?
         (0, jsx_runtime_1.jsx)(reqore_1.ReqoreIcon, { icon: 'QuestionLine', size: '12px', effect: { opacity: 0.55 }, margin: 'left', marginSize: 'tiny', role: 'button', tabIndex: -1, "aria-label": 'Help', className: 'options-readfirst-help', style: { cursor: 'help' }, onClick: function (event) {
                 event.stopPropagation();
                 handleOptionLabelClick(optionName);
@@ -1025,7 +1097,13 @@ exports.CompactRow = (0, react_1.memo)(function (_a) {
        inside a row, never a page, and markdown authored as a document opens with
        a heading that would outgrow the field label above it. Without a host
        renderer the string is drawn as it always was. */
-    var renderInfoStrip = function (m, index) { return ((0, jsx_runtime_1.jsx)(reqore_1.ReqoreMessage, { size: 'small', opaque: false, flat: true, intent: m.intent, title: m.title, style: { marginBottom: 8 }, children: markdownRenderer && typeof m.content === 'string' ?
+    var renderInfoStrip = function (m, index) { return ((0, jsx_runtime_1.jsx)(reqore_1.ReqoreMessage, { size: 'small', opaque: false, flat: true, 
+        // Calm: a note that only informs takes no colour — blue is kept for "a
+        // filter is on", green for a healthy figure. A warning or a failure
+        // keeps its intent: those are what a person has to act on.
+        intent: (calm && (!m.intent || m.intent === 'info' || m.intent === 'success') ?
+            undefined
+            : m.intent), title: m.title, style: { marginBottom: 8 }, children: markdownRenderer && typeof m.content === 'string' ?
             markdownRenderer({ value: m.content, compact: true })
             : m.content }, "".concat(m.content, "-").concat(index))); };
     var reasonColor = function (intent) {
@@ -1133,16 +1211,16 @@ exports.CompactRow = (0, react_1.memo)(function (_a) {
             var collapse_1 = function () { return toggleExpandedOption(optionName); };
             var editingRow = ((0, jsx_runtime_1.jsxs)("div", __assign({ ref: rowRef, "data-field": optionName, className: 'readfirst-row readfirst-row-editing options-readfirst-inline options-readfirst-value', style: readRowHeights.current[optionName] ?
                     { minHeight: readRowHeights.current[optionName] }
-                    : undefined }, clusterHoverProps, { children: [(0, jsx_runtime_1.jsxs)(compactRowStyles_1.StyledLabelBlock, { className: 'options-readfirst-label-block', children: [(0, jsx_runtime_1.jsxs)(compactRowStyles_1.StyledRowLabel, { role: 'button', tabIndex: 0, "aria-label": "Collapse ".concat(label), title: (schema === null || schema === void 0 ? void 0 : schema.short_desc) || undefined, "$color": cKey, "$pointer": true, onClick: collapse_1, onKeyDown: function (event) {
+                    : undefined }, clusterHoverProps, { children: [(0, jsx_runtime_1.jsxs)(compactRowStyles_1.StyledLabelBlock, { className: 'options-readfirst-label-block', children: [(0, jsx_runtime_1.jsxs)(compactRowStyles_1.StyledRowLabel, { role: 'button', tabIndex: 0, "aria-label": "Collapse ".concat(label), title: (schema === null || schema === void 0 ? void 0 : schema.short_desc) || undefined, "$color": cLabel, "$pointer": true, onClick: collapse_1, onKeyDown: function (event) {
                                     if (event.key === 'Enter' || event.key === ' ') {
                                         event.preventDefault();
                                         collapse_1();
                                     }
-                                }, children: [label, required ?
+                                }, children: [label, required && !calm ?
                                         (0, jsx_runtime_1.jsx)(reqore_1.ReqoreIcon, { icon: 'Asterisk', color: 'danger', size: '10px' })
                                         : null, helpIcon] }), labelShortDesc ?
                                 (0, jsx_runtime_1.jsx)(compactRowStyles_1.StyledLabelDesc, { className: 'options-readfirst-label-desc', size: 'small', effect: { opacity: 0.55 }, children: labelShortDesc })
-                                : null, codeSizeNode] }), (0, jsx_runtime_1.jsxs)("div", { ref: editorRef, style: { minWidth: 0 }, onKeyDown: function (event) {
+                                : null, codeSizeNode] }), (0, jsx_runtime_1.jsxs)("div", { ref: editorRef, className: 'options-readfirst-row-editor', style: { minWidth: 0 }, onKeyDown: function (event) {
                             if (event.key === 'Escape') {
                                 event.stopPropagation();
                                 // Escape discards. It used to call `collapse()`, which closed
@@ -1177,17 +1255,17 @@ exports.CompactRow = (0, react_1.memo)(function (_a) {
         var schemaIntentColor = (schema === null || schema === void 0 ? void 0 : schema.intent) ?
             (_j = theme === null || theme === void 0 ? void 0 : theme.intents) === null || _j === void 0 ? void 0 : _j[schema.intent]
             : undefined;
-        return ((0, jsx_runtime_1.jsxs)(compactRowStyles_1.StyledEditCard, { "data-field": optionName, className: COMPACT_SINGLE_VALUE_TYPES.has(editType) ?
+        return ((0, jsx_runtime_1.jsxs)(compactRowStyles_1.StyledEditCard, { ref: rowRef, "data-field": optionName, className: COMPACT_SINGLE_VALUE_TYPES.has(editType) ?
                 'options-readfirst-card options-readfirst-card-single'
-                : 'options-readfirst-card', "$bg": cHover, "$border": schemaIntentColor ? "".concat(schemaIntentColor, "66") : "".concat(cInfo, "66"), children: [(0, jsx_runtime_1.jsxs)("div", { style: {
+                : 'options-readfirst-card', "$bg": cHover, "$border": schemaIntentColor ? "".concat(schemaIntentColor, "66") : "".concat(cInfo, "66"), "$calm": calm, children: [(0, jsx_runtime_1.jsxs)("div", { style: {
                         display: 'flex',
                         alignItems: 'flex-start',
                         justifyContent: 'space-between',
                         gap: 12,
-                    }, children: [(0, jsx_runtime_1.jsxs)(compactRowStyles_1.StyledCardHeading, { children: [(0, jsx_runtime_1.jsxs)(compactRowStyles_1.StyledCardLabel, { "$color": cKey, children: [((schema === null || schema === void 0 ? void 0 : schema.icon) ||
+                    }, children: [(0, jsx_runtime_1.jsxs)(compactRowStyles_1.StyledCardHeading, { children: [(0, jsx_runtime_1.jsxs)(compactRowStyles_1.StyledCardLabel, { "$color": cLabel, children: [((schema === null || schema === void 0 ? void 0 : schema.icon) ||
                                             (schema === null || schema === void 0 ? void 0 : schema.image)) ?
                                             (0, jsx_runtime_1.jsx)(reqore_1.ReqoreIcon, { icon: schema === null || schema === void 0 ? void 0 : schema.icon, image: schema === null || schema === void 0 ? void 0 : schema.image, size: '14px' })
-                                            : null, (0, jsx_runtime_1.jsxs)("span", { children: [label, required ?
+                                            : null, (0, jsx_runtime_1.jsxs)("span", { children: [label, required && !calm ?
                                                     (0, jsx_runtime_1.jsx)(reqore_1.ReqoreIcon, { icon: 'Asterisk', color: 'danger', size: '10px' })
                                                     : null, helpIcon] }), cardBadges.map(function (badge, index) {
                                             return typeof badge === 'object' ?
@@ -1204,7 +1282,11 @@ exports.CompactRow = (0, react_1.memo)(function (_a) {
                                     return renderInjectedOptionAction(action, index);
                                 }), editRowRevertButton, cancelEditButton, hasValue && !readOnly ?
                                     (0, jsx_runtime_1.jsx)(reqore_1.ReqoreButton, { size: 'small', icon: 'DeleteBinLine', minimal: true, flat: true, fixed: true, intent: 'danger', className: 'options-readfirst-clear', "aria-label": 'Clear value', tooltip: 'Clear value', onClick: confirmClearValue })
-                                    : null, moreMenu, closeExpandedFieldButton] })] }), absorbedNodes, (0, jsx_runtime_1.jsx)("div", { style: { display: 'contents' }, onKeyDown: function (event) {
+                                    : null, moreMenu, closeExpandedFieldButton] })] }), absorbedNodes, (0, jsx_runtime_1.jsx)("div", { 
+                    // The card's editor, as the inline row's is: an opened card takes the
+                    // caret too (the tap-to-edit rule above), so opening Description or
+                    // Source Code by a click or by a blocked submit puts the cursor in it.
+                    ref: editorRef, className: 'options-readfirst-row-editor', style: { display: 'contents' }, onKeyDown: function (event) {
                         if (event.key === 'Escape') {
                             event.stopPropagation();
                             cancelEdit();
@@ -1238,7 +1320,7 @@ exports.CompactRow = (0, react_1.memo)(function (_a) {
     // default-value hints, plus a read-only covered-by note (editable covered rows
     // carry that in their chip instead).
     var valueReasons = __spreadArray(__spreadArray([], inlineMessages, true), (empty && coveredByLabel ?
-        [{ content: "Covered by \u201C".concat(coveredByLabel, "\u201D"), intent: 'success' }]
+        [{ content: "Covered by \u201C".concat(coveredByLabel, "\u201D"), intent: calm ? undefined : 'success' }]
         : []), true);
     // A hash row reveals its sub-fields as read-only sub-rows under a "view
     // more" disclosure; the row itself still expands the real editor on click.
@@ -1518,10 +1600,26 @@ exports.CompactRow = (0, react_1.memo)(function (_a) {
         covered: !!coveredByLabel || groupResolved,
         invalid: worstIntent === 'danger',
         warned: worstIntent === 'warning',
+        visited: visited,
     });
     // No dot at all in a read-only form: the dot reports progress on the
     // form, and a read view has no progress to report.
-    var dotStatus = hidden || fieldDisabled || readOnly ? undefined : rowStatus;
+    //
+    // Calm: no dot on a healthy row, and none on an empty required one either —
+    // its value column already says "Required · add a value" in amber, and one
+    // thing is said once. Only a failing value keeps the red dot beside the
+    // reason it gives.
+    var dotStatus = hidden || fieldDisabled || readOnly || (calm && rowStatus !== 'invalid') ?
+        undefined
+        : rowStatus;
+    // Calm: an empty required value is said IN the value column, in amber,
+    // where the value would be — instead of a dash plus a red reason beside it.
+    // Not on a locked field (its lock and reason speak for it) or one that
+    // shows the default it will fall back to.
+    var calmRequiredWord = calm && empty && !hidden && !!(schema === null || schema === void 0 ? void 0 : schema.required) && !fieldDisabled && !formattedDefault ?
+        readOnly ? formAppearance_1.CALM_REQUIRED_READ_LABEL
+            : formAppearance_1.CALM_REQUIRED_LABEL
+        : undefined;
     var dotColor = dotStatus === 'invalid' ? cDanger
         : dotStatus === 'todo' ? cWarning
             : dotStatus === 'set' ? cSuccess || cInfo
@@ -1539,7 +1637,7 @@ exports.CompactRow = (0, react_1.memo)(function (_a) {
                 event.preventDefault();
                 activate(event);
             }
-        }) }, clusterHoverProps, { children: [clusterNode, (0, jsx_runtime_1.jsxs)(compactRowStyles_1.StyledLabelBlock, { className: 'options-readfirst-label-block', children: [(0, jsx_runtime_1.jsxs)(compactRowStyles_1.StyledRowLabel, { title: (schema === null || schema === void 0 ? void 0 : schema.short_desc) || undefined, "$color": cKey, children: [rowChromeIcon, (0, jsx_runtime_1.jsxs)("span", { className: 'options-readfirst-label-text', style: { minWidth: 0 }, children: [label, requiredMark ?
+        }) }, clusterHoverProps, { children: [clusterNode, (0, jsx_runtime_1.jsxs)(compactRowStyles_1.StyledLabelBlock, { className: 'options-readfirst-label-block', children: [(0, jsx_runtime_1.jsxs)(compactRowStyles_1.StyledRowLabel, { title: (schema === null || schema === void 0 ? void 0 : schema.short_desc) || undefined, "$color": cLabel, children: [rowChromeIcon, (0, jsx_runtime_1.jsxs)("span", { className: 'options-readfirst-label-text', style: { minWidth: 0 }, children: [label, requiredMark ?
                                         (0, jsx_runtime_1.jsx)(reqore_1.ReqoreIcon, { icon: 'Asterisk', color: 'danger', size: '10px', margin: 'left', marginSize: 'tiny' })
                                         : null, helpIcon] }), typeLabel ?
                                 (0, jsx_runtime_1.jsx)(reqore_1.ReqoreTag, { size: 'tiny', minimal: true, label: typeLabel, labelEffect: { opacity: 0.55 } })
@@ -1574,13 +1672,20 @@ exports.CompactRow = (0, react_1.memo)(function (_a) {
                     !showsTemplateText &&
                     typeof formatted === 'string') ?
                     formatted
-                    : undefined, "$color": empty || hidden ? "".concat(cMuted, "66") : cKey, "$empty": empty || hidden, children: [(showMarkdownPreview || showLongTextInset || (previewWithSchema && showStructuredPreview)) ?
+                    : undefined, "$color": calmRequiredWord ?
+                    rowStatus === 'pending' ?
+                        "".concat(cMuted, "a6")
+                        : cWarning
+                    : empty || hidden ? "".concat(cMuted, "66")
+                        : cKey, "$empty": (empty || hidden) && !calmRequiredWord, children: [(showMarkdownPreview || showLongTextInset || (previewWithSchema && showStructuredPreview)) ?
                         null
                         : (0, jsx_runtime_1.jsx)("span", { className: 'options-readfirst-valuetext', children: hidden || empty ?
-                                formattedDefault || '—'
+                                calmRequiredWord || formattedDefault || '—'
                                 : renderReadFirstValue(optionField, schema, formatted, readOnly) }), readOnlyChoiceDesc ?
                         (0, jsx_runtime_1.jsx)("span", { className: 'options-readfirst-choice-desc', children: readOnlyChoiceDesc })
-                        : null, valueReasons.map(function (m, i) { return ((0, jsx_runtime_1.jsx)("span", { className: 'options-readfirst-reason', style: { color: reasonColor(m.intent) }, children: m.content }, "".concat(m.content, "-").concat(i))); }), panelMessages.length ?
+                        : null, (calmRequiredWord ?
+                        valueReasons.filter(function (m) { return m.content !== calmRequiredWord; })
+                        : valueReasons).map(function (m, i) { return ((0, jsx_runtime_1.jsx)("span", { className: 'options-readfirst-reason', style: { color: reasonColor(m.intent) }, children: m.content }, "".concat(m.content, "-").concat(i))); }), panelMessages.length ?
                         (0, jsx_runtime_1.jsx)(reqore_1.ReqoreControlGroup, { className: 'options-readfirst-info-panel', vertical: true, fluid: true, gapSize: 'normal', children: panelMessages.map(renderInfoStrip) })
                         : null, showStructuredPreview ?
                         // The inset lives inside the row now, so a click on a value chip would
@@ -1661,7 +1766,7 @@ exports.CompactRow = (0, react_1.memo)(function (_a) {
                                     handleValueChange(optionName, (_b = (_a = originalValue.current) === null || _a === void 0 ? void 0 : _a[optionName]) === null || _b === void 0 ? void 0 : _b.value, (_d = (_c = originalValue.current) === null || _c === void 0 ? void 0 : _c[optionName]) === null || _d === void 0 ? void 0 : _d.type);
                                 } })
                             : dotColor ?
-                                (0, jsx_runtime_1.jsx)(compactRowStyles_1.StyledStatusDot, { "$color": dotColor, "$ring": dotStatus !== 'set', "aria-hidden": true })
+                                (0, jsx_runtime_1.jsx)(compactRowStyles_1.StyledStatusDot, { className: 'options-readfirst-status-dot', "$color": dotColor, "$ring": dotStatus !== 'set', "aria-hidden": true })
                                 : null })] })] }), optionName));
     return row;
 });