@qoretechnologies/reqraft 0.10.66-pr.145.gbf28ebd → 0.10.66-pr.152.g3349989

package/.claude/CLAUDE.md

@@ -223,6 +223,30 @@ yarn build:test         # Type-check without emit
     request can pass in CI and hang locally. When a story passes in CI but times out on
     your machine, look for an unmocked request before anything else.
 - **Visual regression via Qlip** (not Chromatic): the story run captures snapshots through the `qlip` Vitest plugin. Upload is gated on `QLIP_UPLOAD_TOKEN` (`vitest.config.ts`), so **local runs capture but never upload** — PNGs land in `qlip/screenshots/<ts>/stories/auto/<StoryId>.png` (gitignored); read the PNG to verify a visual change. CI (`.github/workflows/tests.yml`) sets the token and uploads a build for dashboard review. The full visual-change flow + the `qlip` MCP review skill live in the imported `stacks/frontend/FRONTEND.md`.
+- **Capture a look once, not a behaviour many times.** Qlip catches a change in how a component
+  looks; a story's play assertions test what it does. A story is captured only when its end state
+  looks different from every other capture of the same component: one capture per distinct look
+  (the field holding chips, plain text, read-only, empty, the completion list open, the picker at
+  its top level / drilled into a group / searched / on a phone, a hover or details card, each error
+  or diagnostic state, long content, find and replace, signature help...). Every other story keeps
+  its play and gets, per story (story parameters merge over the meta's):
+
+  ```ts
+  parameters: {
+    // Interaction-only: the play assertions are the guard, and the end state
+    // is already pictured by `WithSemanticTokens`.
+    qlip: { skip: true },
+  },
+  ```
+
+  naming the story that pictures its end state. Each capture is a baseline a human accepts by
+  hand, and a look changed on purpose is then one diff to review, not thirty.
+  - A capture shows what the story is about, or does not exist: a story about a list or a hover
+    ends with it open if its look is distinct; otherwise it is skipped.
+  - A "…On Touch" / "…On A Phone" story captured at desktop size is the desktop picture again:
+    give it `qlip: { viewport: PHONE_VIEWPORT }` when its layout differs, otherwise skip it.
+  - Before adding a story, check whether an existing capture of the component already shows its
+    end state; a new capture needs a look no other has.
 
 ## Code Patterns & Conventions
 

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;AAqIpC;;;;;;;;;;;;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,6CA0+EF,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;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"}

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

@@ -106,7 +106,6 @@ 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");
@@ -115,7 +114,6 @@ 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");
@@ -216,14 +214,8 @@ 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.
@@ -306,11 +298,6 @@ 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
@@ -367,11 +354,6 @@ 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 }));
         }
@@ -563,11 +545,8 @@ 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. 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;
+    // The asterisk says "you have to fill this in". Read-only, nobody does.
+    var requiredMark = required && !readOnly;
     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
@@ -610,13 +589,7 @@ 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: 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'
+            }, 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'
                     : 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 ?
@@ -756,58 +729,28 @@ 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;
             }
-            // A card hands the caret only to where text goes (see `findRowFocusTarget`).
-            var control = (0, rowFocus_1.findRowFocusTarget)(editor, { textEntryOnly: !inlineEditable });
+            var control = (0, rowFocus_1.findRowFocusTarget)(editor);
             if (!control)
                 return false;
-            // The least scroll that shows the row clear of the pinned box header, and none
-            // while the line the caret lands on is in view (`isCaretLineInView`: the row's own
-            // height is not settled yet, the top of its control is).
-            if (rowRef.current && !(0, revealRow_1.isCaretLineInView)(control, (0, revealRow_1.getRevealClearance)(control))) {
+            // The least scroll that shows the row clear of the pinned box header,
+            // and none when it is already in view (see `revealRow`).
+            if (rowRef.current) {
                 (0, revealRow_1.revealRow)(rowRef.current, 'auto');
             }
             // `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
@@ -825,13 +768,6 @@ 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;
@@ -842,9 +778,7 @@ exports.CompactRow = (0, react_1.memo)(function (_a) {
             if (takeCaret())
                 observer.disconnect();
         });
-        // 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 });
+        observer.observe(editor, { childList: true, subtree: true });
         return function () { return observer.disconnect(); };
     }, [isExpanded, optionName, inlineEditable]);
     // What the field held when it was opened — the baseline Cancel restores.
@@ -987,7 +921,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: calm ? undefined : { 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: { uppercase: true, spaced: 1 } })
         : null;
     var isPassiveCloseAction = fixedAllowedValueOption;
     // Cancel — the counterpart to Done, and the answer to "how do I get out of
@@ -1002,7 +936,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: calm ? undefined : '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: 'warning', "aria-label": 'Cancel edit', tooltip: 'Cancel edit \u2014 discard the changes made since this field was opened', onClick: function (event) {
                 event.stopPropagation();
                 cancelEdit();
             } })
@@ -1011,10 +945,7 @@ 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', 
-        // 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); } }));
+    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); } }));
     // Info tiers: Tier 1 (danger/warning + dependency hints) must be visible
     // without interaction; Tier 2 (info/success, default notes) sits behind ⓘ.
     var infoActive = !hidden;
@@ -1040,10 +971,6 @@ 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:
@@ -1074,7 +1001,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 = (0, fieldDescription_1.fieldHasLongDescription)(schema) ?
+    var helpIcon = (schema === null || schema === void 0 ? void 0 : schema.desc) ?
         (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);
@@ -1098,9 +1025,7 @@ 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, 
-        // Calm: a note that only informs takes no colour (`calmNoteIntent`).
-        intent: (0, formAppearance_1.calmNoteIntent)(m.intent, calm), 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, intent: 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) {
@@ -1208,16 +1133,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": cLabel, "$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": cKey, "$pointer": true, onClick: collapse_1, onKeyDown: function (event) {
                                     if (event.key === 'Enter' || event.key === ' ') {
                                         event.preventDefault();
                                         collapse_1();
                                     }
-                                }, children: [label, required && !calm ?
+                                }, children: [label, required ?
                                         (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, className: 'options-readfirst-row-editor', style: { minWidth: 0 }, onKeyDown: function (event) {
+                                : null, codeSizeNode] }), (0, jsx_runtime_1.jsxs)("div", { ref: editorRef, style: { minWidth: 0 }, onKeyDown: function (event) {
                             if (event.key === 'Escape') {
                                 event.stopPropagation();
                                 // Escape discards. It used to call `collapse()`, which closed
@@ -1252,17 +1177,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, { ref: rowRef, "data-field": optionName, className: COMPACT_SINGLE_VALUE_TYPES.has(editType) ?
+        return ((0, jsx_runtime_1.jsxs)(compactRowStyles_1.StyledEditCard, { "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"), "$calm": calm, children: [(0, jsx_runtime_1.jsxs)("div", { style: {
+                : 'options-readfirst-card', "$bg": cHover, "$border": schemaIntentColor ? "".concat(schemaIntentColor, "66") : "".concat(cInfo, "66"), 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": cLabel, 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": cKey, 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 && !calm ?
+                                            : null, (0, jsx_runtime_1.jsxs)("span", { children: [label, required ?
                                                     (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' ?
@@ -1279,11 +1204,7 @@ 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", { 
-                    // 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) {
+                                    : null, moreMenu, closeExpandedFieldButton] })] }), absorbedNodes, (0, jsx_runtime_1.jsx)("div", { style: { display: 'contents' }, onKeyDown: function (event) {
                         if (event.key === 'Escape') {
                             event.stopPropagation();
                             cancelEdit();
@@ -1317,7 +1238,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: calm ? undefined : 'success' }]
+        [{ content: "Covered by \u201C".concat(coveredByLabel, "\u201D"), intent: '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.
@@ -1597,26 +1518,10 @@ 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.
-    //
-    // 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 dotStatus = hidden || fieldDisabled || readOnly ? undefined : rowStatus;
     var dotColor = dotStatus === 'invalid' ? cDanger
         : dotStatus === 'todo' ? cWarning
             : dotStatus === 'set' ? cSuccess || cInfo
@@ -1634,7 +1539,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": cLabel, 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": cKey, 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 } })
@@ -1669,20 +1574,13 @@ exports.CompactRow = (0, react_1.memo)(function (_a) {
                     !showsTemplateText &&
                     typeof formatted === 'string') ?
                     formatted
-                    : undefined, "$color": calmRequiredWord ?
-                    rowStatus === 'pending' ?
-                        "".concat(cMuted, "a6")
-                        : cWarning
-                    : empty || hidden ? "".concat(cMuted, "66")
-                        : cKey, "$empty": (empty || hidden) && !calmRequiredWord, children: [(showMarkdownPreview || showLongTextInset || (previewWithSchema && showStructuredPreview)) ?
+                    : undefined, "$color": empty || hidden ? "".concat(cMuted, "66") : cKey, "$empty": empty || hidden, children: [(showMarkdownPreview || showLongTextInset || (previewWithSchema && showStructuredPreview)) ?
                         null
                         : (0, jsx_runtime_1.jsx)("span", { className: 'options-readfirst-valuetext', children: hidden || empty ?
-                                calmRequiredWord || formattedDefault || '—'
+                                formattedDefault || '—'
                                 : renderReadFirstValue(optionField, schema, formatted, readOnly) }), readOnlyChoiceDesc ?
                         (0, jsx_runtime_1.jsx)("span", { className: 'options-readfirst-choice-desc', children: readOnlyChoiceDesc })
-                        : 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 ?
+                        : 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 ?
                         (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
@@ -1763,7 +1661,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, { className: 'options-readfirst-status-dot', "$color": dotColor, "$ring": dotStatus !== 'set', "aria-hidden": true })
+                                (0, jsx_runtime_1.jsx)(compactRowStyles_1.StyledStatusDot, { "$color": dotColor, "$ring": dotStatus !== 'set', "aria-hidden": true })
                                 : null })] })] }), optionName));
     return row;
 });