@qoretechnologies/reqraft 0.10.64 → 0.10.65-pr.137.g62fcecc

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

@@ -107,6 +107,7 @@ var validations_1 = require("../../../helpers/validations");
 var templates_1 = require("../../../helpers/templates");
 var common_1 = require("../../../helpers/common");
 var templateText_1 = require("../../../helpers/templateText");
+var pendingEdit_1 = require("../fields/pendingEdit");
 var ReadOnlyTemplateTag_1 = require("../fields/template/ReadOnlyTemplateTag");
 var TemplateText_1 = require("../fields/template/TemplateText");
 var codeSize_1 = require("../../codeSize");
@@ -121,9 +122,13 @@ var rowFocus_1 = require("./rowFocus");
 var rowOpenPicker_1 = require("./rowOpenPicker");
 var SchemaDataView_1 = require("./_structuredData/SchemaDataView");
 var queryUnlessCancelled_1 = require("../../../utils/queryUnlessCancelled");
+var markdownText_1 = require("../../../helpers/markdownText");
 var readFirst_1 = require("./readFirst");
 var StructuredDataView_1 = require("./_structuredData/StructuredDataView");
 var DpqlRendering_1 = require("../expressions/DpqlRendering");
+var argumentPresence_1 = require("../expressions/argumentPresence");
+var colorValue_1 = require("../../colorValue");
+var hoveringPointer_1 = require("../../../helpers/hoveringPointer");
 /**
  * Does this markdown value have more document in it than one row can show?
  *
@@ -209,6 +214,8 @@ var richtextItemText = function (item) {
         : undefined;
 };
 exports.richtextItemText = richtextItemText;
+/** The status boxes by name, as their headers say them. */
+var BOX_NAMES = { attention: 'Needs attention', set: 'Set', optional: 'Optional' };
 exports.CompactRow = (0, react_1.memo)(function (_a) {
     var _b;
     var _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
@@ -225,6 +232,8 @@ exports.CompactRow = (0, react_1.memo)(function (_a) {
             absorbedName;
     };
     var codePreviewRenderer = (0, use_context_selector_1.useContextSelector)(compactRowContext_1.CompactRowContext, function (v) { return v.codePreviewRenderer; });
+    var readSummaries = (0, use_context_selector_1.useContextSelector)(compactRowContext_1.CompactRowContext, function (v) { return v.readSummaries; });
+    var cardEditorTypes = (0, use_context_selector_1.useContextSelector)(compactRowContext_1.CompactRowContext, function (v) { return v.cardEditorTypes; });
     var markdownRenderer = (0, markdownRendererContext_1.useMarkdownRenderer)();
     var operators = (0, use_context_selector_1.useContextSelector)(compactRowContext_1.CompactRowContext, function (v) { return v.operators; });
     var focusedEditing = (0, use_context_selector_1.useContextSelector)(compactRowContext_1.CompactRowContext, function (v) { return v.focusedEditing; });
@@ -233,6 +242,8 @@ exports.CompactRow = (0, react_1.memo)(function (_a) {
     var isExpanded = (0, use_context_selector_1.useContextSelector)(compactRowContext_1.CompactRowContext, function (v) {
         return v.expandedOptions.includes(optionName);
     });
+    // the box this open field moves to when it is closed, when that is not the one it is shown in
+    var movesTo = (0, use_context_selector_1.useContextSelector)(compactRowContext_1.CompactRowContext, function (v) { var _a; return (_a = v.heldOptions) === null || _a === void 0 ? void 0 : _a[optionName]; });
     var isHighlighted = (0, use_context_selector_1.useContextSelector)(compactRowContext_1.CompactRowContext, function (v) {
         return v.highlightedOptions.includes(optionName);
     });
@@ -291,6 +302,7 @@ exports.CompactRow = (0, react_1.memo)(function (_a) {
     var renderOption = (0, use_context_selector_1.useContextSelector)(compactRowContext_1.CompactRowContext, function (v) { return v.renderOption; });
     var theme = (0, use_context_selector_1.useContextSelector)(compactRowContext_1.CompactRowContext, function (v) { return v.theme; });
     var cMuted = (0, use_context_selector_1.useContextSelector)(compactRowContext_1.CompactRowContext, function (v) { return v.cMuted; });
+    var rowInks = (0, use_context_selector_1.useContextSelector)(compactRowContext_1.CompactRowContext, function (v) { return v.rowInks; });
     var templates = (0, use_context_selector_1.useContextSelector)(compactRowContext_1.CompactRowContext, function (v) { return v.templates; });
     var cKey = (0, use_context_selector_1.useContextSelector)(compactRowContext_1.CompactRowContext, function (v) { return v.cKey; });
     var cDivider = (0, use_context_selector_1.useContextSelector)(compactRowContext_1.CompactRowContext, function (v) { return v.cDivider; });
@@ -300,7 +312,7 @@ exports.CompactRow = (0, react_1.memo)(function (_a) {
     var cInfo = (0, use_context_selector_1.useContextSelector)(compactRowContext_1.CompactRowContext, function (v) { return v.cInfo; });
     // 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
+    // Value-cell content: color adds a swatch, file an icon + size; hash keeps
     // its "N fields" summary (sub-fields reveal beneath the row).
     var renderReadFirstValue = function (field, schema, formatted, 
     // An editable row gets one line and an ellipsis — its value line is a
@@ -314,6 +326,10 @@ exports.CompactRow = (0, react_1.memo)(function (_a) {
         var textStyle = full ?
             { whiteSpace: 'pre-wrap', overflowWrap: 'anywhere' }
             : { overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' };
+        // The expression the value holds, in either shape the editor stores it: the flag on the option, or
+        // the envelope nested in its value as a reloaded draft has it.
+        var expressionAst = (0, readFirst_1.getExpressionAst)(field);
+        var isExpression = !!(field === null || field === void 0 ? void 0 : field.is_expression) || expressionAst !== undefined;
         /* A row has to SAY when its value is an expression.
         
            Reported from the live IDE: an author accepted the *Use as expression*
@@ -326,7 +342,7 @@ exports.CompactRow = (0, react_1.memo)(function (_a) {
            The same Σ the expression editor uses, so the mark means the same thing
            wherever it appears. */
         var withExpressionMarker = function (rendered) {
-            if (!(field === null || field === void 0 ? void 0 : field.is_expression)) {
+            if (!isExpression) {
                 return rendered;
             }
             return ((0, jsx_runtime_1.jsxs)("span", { style: __assign(__assign({}, wrapStyle), { gap: 4 }), children: [(0, jsx_runtime_1.jsx)(reqore_1.ReqoreIcon, { icon: 'Functions', size: 'tiny', 
@@ -339,13 +355,43 @@ exports.CompactRow = (0, react_1.memo)(function (_a) {
                            rule, which reqore has no prop for, stays inline. */
                         effect: { opacity: 0.7 }, style: { flexShrink: 0 }, tooltip: 'This value is an expression' }), rendered] }));
         };
-        if (valueType === 'rgbcolor') {
-            var swatch = (0, readFirst_1.colorToCss)(field === null || field === void 0 ? void 0 : field.value);
-            return ((0, jsx_runtime_1.jsxs)("span", { style: swatch ? __assign(__assign({}, wrapStyle), { 
-                    // a slight wash of the chosen colour behind the swatch + hex
-                    background: "color-mix(in srgb, ".concat(swatch, " 14%, transparent)"), padding: '1px 8px', borderRadius: 4 }) : wrapStyle, children: [swatch ?
-                        (0, jsx_runtime_1.jsx)(compactRowStyles_1.StyledColorSwatch, { "aria-hidden": true, "$color": swatch, "$border": cDivider })
-                        : null, (0, jsx_runtime_1.jsx)("span", { style: textStyle, children: formatted })] }));
+        // Template value ($local:…): the read-only template picker — the SAME chip
+        // TemplateField renders when disabled, so a template reads identically here
+        // and in the editor (qorus-ide intent scheme: info / qorus purple).
+        //
+        // A field may also declare templates OF ITS OWN, and a value drawn from
+        // that list is just as much a template even when it does not look like
+        // `$name:key` — `isValueTemplate` is a guess at the shape of the built-in
+        // grammar, and a host's own grammar (a Qorus test's `$.order.id`) fails it.
+        // Asking the field's list whether it CONTAINS the value settles it without
+        // guessing at syntax, and hands back the entry whose label the chip prints,
+        // so a reference reads as the name it was chosen by here as well as in the
+        // editor rather than as a raw path.
+        var ownTemplates = (_a = schema === null || schema === void 0 ? void 0 : schema.templates) !== null && _a !== void 0 ? _a : templates;
+        // The grammar the field declares its references in, when it speaks one of
+        // its own — the same schema key its rich-text editor is given.
+        var templateGrammar = schema === null || schema === void 0 ? void 0 : schema.templateToken;
+        /* A template or an expression is shown as one, whatever the field's type, so these two come before
+           any type draws a value of its own (qorus#646). A color's branch came first and called a template
+           or an expression on a color option "Set"; a file's printed the raw reference as a file name. */
+        if (typeof (field === null || field === void 0 ? void 0 : field.value) === 'string' &&
+            !isExpression &&
+            ((0, templates_1.isValueTemplate)(field.value) || !!(0, templates_1.findTemplate)(ownTemplates !== null && ownTemplates !== void 0 ? ownTemplates : {}, field.value))) {
+            return (0, jsx_runtime_1.jsx)(ReadOnlyTemplateTag_1.ReadOnlyTemplateTag, { value: field.value, templates: ownTemplates });
+        }
+        // An expression reads as DPQL wherever it is shown without being edited:
+        // the same rendering its Explain panel and Preview use — monospace,
+        // colored by the language server, template references as chips — so a
+        // collapsed row and the editor it opens never disagree about what the
+        // value looks like. See `DpqlRendering`. In either shape the editor stores
+        // it: the flag on the option, or the envelope nested in its value as a
+        // reloaded draft has it (`getExpressionAst`).
+        if (isExpression && formatted) {
+            return withExpressionMarker((0, jsx_runtime_1.jsx)("span", { style: __assign({ minWidth: 0, flex: '1 1 auto' }, (full ? {} : { overflow: 'hidden' })), children: (0, jsx_runtime_1.jsx)(DpqlRendering_1.DpqlRendering, { text: formatted, templates: ownTemplates }) }));
+        }
+        // a color reads as ReqraftColorValue draws one, at its one-line size; a sensitive one is not shown
+        if (valueType === 'rgbcolor' && !(schema === null || schema === void 0 ? void 0 : schema.sensitive)) {
+            return (0, jsx_runtime_1.jsx)(colorValue_1.ReqraftColorValue, { value: field === null || field === void 0 ? void 0 : field.value, size: 'compact', wrap: full });
         }
         if (valueType === 'file') {
             var fileSize = (0, readFirst_1.getFileSize)(field === null || field === void 0 ? void 0 : field.value);
@@ -353,6 +399,7 @@ exports.CompactRow = (0, react_1.memo)(function (_a) {
             // trailing key pill (the editor renders it as a ReqoreButton badge).
             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 }));
         }
+        // a yes/no holding a template has read as the template, above, not as Yes (qorus#646)
         if (valueType === 'bool' || valueType === 'boolean') {
             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 }));
@@ -368,7 +415,7 @@ exports.CompactRow = (0, react_1.memo)(function (_a) {
         // only surface still printing them as prose.
         //
         // `intent` is a FILL, which is what a tag is — the hazard the other
-        // branches warn about is only ever using an intent as a TEXT colour.
+        // branches warn about is only ever using an intent as a TEXT color.
         //
         // Falls through to the plain summary unless EVERY entry yields a name: a
         // partly-chipped row would read as though the unnamed cases were missing.
@@ -437,27 +484,6 @@ exports.CompactRow = (0, react_1.memo)(function (_a) {
         if (allowedIcon) {
             return ((0, jsx_runtime_1.jsxs)("span", { style: wrapStyle, children: [(0, jsx_runtime_1.jsx)(reqore_1.ReqoreIcon, { icon: allowedIcon, size: '16px', style: { flexShrink: 0 } }), (0, jsx_runtime_1.jsx)("span", { style: textStyle, children: formatted })] }));
         }
-        // Template value ($local:…): the read-only template picker — the SAME chip
-        // TemplateField renders when disabled, so a template reads identically here
-        // and in the editor (qorus-ide intent scheme: info / qorus purple).
-        //
-        // A field may also declare templates OF ITS OWN, and a value drawn from
-        // that list is just as much a template even when it does not look like
-        // `$name:key` — `isValueTemplate` is a guess at the shape of the built-in
-        // grammar, and a host's own grammar (a Qorus test's `$.order.id`) fails it.
-        // Asking the field's list whether it CONTAINS the value settles it without
-        // guessing at syntax, and hands back the entry whose label the chip prints,
-        // so a reference reads as the name it was chosen by here as well as in the
-        // editor rather than as a raw path.
-        var ownTemplates = (_a = schema === null || schema === void 0 ? void 0 : schema.templates) !== null && _a !== void 0 ? _a : templates;
-        // The grammar the field declares its references in, when it speaks one of
-        // its own — the same schema key its rich-text editor is given.
-        var templateGrammar = schema === null || schema === void 0 ? void 0 : schema.templateToken;
-        if (typeof (field === null || field === void 0 ? void 0 : field.value) === 'string' &&
-            !field.is_expression &&
-            ((0, templates_1.isValueTemplate)(field.value) || !!(0, templates_1.findTemplate)(ownTemplates !== null && ownTemplates !== void 0 ? ownTemplates : {}, field.value))) {
-            return (0, jsx_runtime_1.jsx)(ReadOnlyTemplateTag_1.ReadOnlyTemplateTag, { value: field.value, templates: ownTemplates, size: 'small' });
-        }
         // A LIST whose elements are rich-text envelopes is a list of strings, so it
         // reads as those strings. Without this the row fell through to the generic
         // list summary and printed a bare count ("1 item") above the structured
@@ -478,14 +504,6 @@ exports.CompactRow = (0, react_1.memo)(function (_a) {
                 return (0, jsx_runtime_1.jsx)(TemplateText_1.TemplateText, { segments: segments, templates: ownTemplates, full: full });
             }
         }
-        // An expression reads as DPQL wherever it is shown without being edited:
-        // the same rendering its Explain panel and Preview use — monospace,
-        // coloured by the language server, template references as chips — so a
-        // collapsed row and the editor it opens never disagree about what the
-        // value looks like. See `DpqlRendering`.
-        if ((field === null || field === void 0 ? void 0 : field.is_expression) && formatted) {
-            return withExpressionMarker((0, jsx_runtime_1.jsx)("span", { style: __assign({ minWidth: 0, flex: '1 1 auto' }, (full ? {} : { overflow: 'hidden' })), children: (0, jsx_runtime_1.jsx)(DpqlRendering_1.DpqlRendering, { text: formatted, templates: ownTemplates }) }));
-        }
         /* A value that MENTIONS a reference rather than being one.
         
            The branch above answers "is this value a template?", and a predicate is
@@ -587,9 +605,13 @@ exports.CompactRow = (0, react_1.memo)(function (_a) {
     var chipGroups = unmetGroups.length ? unmetGroups : memberGroups;
     var groupResolved = !!memberGroups.length && !unmetGroups.length;
     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'
+        (0, jsx_runtime_1.jsx)("span", { style: { display: 'inline-flex' }, role: 'presentation', onClick: function (e) { return e.stopPropagation(); }, onKeyDown: function (e) { return e.stopPropagation(); }, 
+            // a mouse's hover, not a tap's emulated one: see `isHoveringPointer`
+            onPointerEnter: function (e) {
+                if ((0, hoveringPointer_1.isHoveringPointer)(e)) {
+                    setHighlightedOptions(requiredGroupsInfo.members[chipGroups[0]] || []);
+                }
+            }, onPointerLeave: 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 ?
@@ -609,6 +631,20 @@ exports.CompactRow = (0, react_1.memo)(function (_a) {
     var editType = (_d = (fixedAllowedValueOption ?
         (schema === null || schema === void 0 ? void 0 : schema.type) || (schema === null || schema === void 0 ? void 0 : schema.ui_type)
         : (schema === null || schema === void 0 ? void 0 : schema.ui_type) || (schema === null || schema === void 0 ? void 0 : schema.type))) !== null && _d !== void 0 ? _d : '';
+    /* A complex field (a tall or nested editor) opens in the card below the row: reqraft's own complex types, and
+       the host's editors it names (`cardEditorTypes`): a host editor of its own, such as a sheet contract, opened
+       in the row's value column, about 240px wide (qorus#646). */
+    var isHostCardEditor = !!(cardEditorTypes === null || cardEditorTypes === void 0 ? void 0 : cardEditorTypes.includes(editType));
+    var opensInCard = COMPACT_COMPLEX_TYPES.has(editType) || isHostCardEditor;
+    /* What the host draws for the row when it is closed (`readSummaries`): a summary of its own, under which the
+       row draws no preview of the value (see `hostSummarizes`). */
+    var readSummaryUiType = schema === null || schema === void 0 ? void 0 : schema.ui_type;
+    var ReadSummary = readSummaryUiType ? readSummaries === null || readSummaries === void 0 ? void 0 : readSummaries[readSummaryUiType] : undefined;
+    /* In a read-only form, a row whose content its line does not show - a host editor that opens in the card, or a
+       row the host summarizes - opens its card with the editor read-only, and its fullscreen view: the summary is
+       one line ("4 columns · 1 rule"), and with no preview under it, the card is where what it holds is read
+       (qorus#646). Any other read-only row shows all it holds and opens nothing. */
+    var readOnlyOpens = !!readOnly && !hidden && (isHostCardEditor || !!ReadSummary);
     // Scalars edit in place inside the row; complex fields (tall or nested
     // editors) still open the expanded card below.
     var inlineEditableNow = !readOnly &&
@@ -618,7 +654,7 @@ exports.CompactRow = (0, react_1.memo)(function (_a) {
         !optionField.is_expression &&
         // A choice with per-option logos (e.g. language) reads better collapsed.
         !(0, readFirst_1.optionHasImages)(schema) &&
-        !COMPACT_COMPLEX_TYPES.has(editType);
+        !opensInCard;
     /* Which of the two editors a row gets is settled when the row OPENS.
      *
      * Every term above reads the VALUE or a schema derived from it, so the
@@ -794,7 +830,11 @@ exports.CompactRow = (0, react_1.memo)(function (_a) {
     var editEntryValue = react_1.default.useRef(undefined);
     react_1.default.useEffect(function () {
         if (isExpanded) {
-            editEntryValue.current = { value: optionField === null || optionField === void 0 ? void 0 : optionField.value, type: optionField === null || optionField === void 0 ? void 0 : optionField.type };
+            editEntryValue.current = {
+                value: optionField === null || optionField === void 0 ? void 0 : optionField.value,
+                type: optionField === null || optionField === void 0 ? void 0 : optionField.type,
+                is_expression: !!(optionField === null || optionField === void 0 ? void 0 : optionField.is_expression),
+            };
         }
         else {
             editEntryValue.current = undefined;
@@ -804,15 +844,25 @@ exports.CompactRow = (0, react_1.memo)(function (_a) {
     var editedSinceOpened = isExpanded &&
         !!editEntryValue.current &&
         !(0, isEqual_1.default)(editEntryValue.current.value, optionField === null || optionField === void 0 ? void 0 : optionField.value);
+    // What this row's own editor has typed and not yet reported: its fields report after a pause, and the
+    // row closing takes the pause with it. Done sends it before the row closes; Cancel and Escape drop it
+    // (see `usePendingEdit`).
+    var pendingEdits = (0, pendingEdit_1.usePendingEdits)();
     // Discard whatever was typed since the field was opened and close it. Used
     // by both the Cancel button and Escape, so the two cannot diverge.
     var cancelEdit = react_1.default.useCallback(function () {
+        // an edit still waiting for its pause is part of what is discarded
+        pendingEdits.discard();
         var snapshot = editEntryValue.current;
-        if (snapshot && !(0, isEqual_1.default)(snapshot.value, optionField === null || optionField === void 0 ? void 0 : optionField.value)) {
-            handleValueChange(optionName, snapshot.value, snapshot.type);
+        // the field as it was opened: an expression is put back as one, a value as a value
+        if (snapshot &&
+            (!(0, isEqual_1.default)(snapshot.value, optionField === null || optionField === void 0 ? void 0 : optionField.value) ||
+                snapshot.is_expression !==
+                    !!(optionField === null || optionField === void 0 ? void 0 : optionField.is_expression))) {
+            handleValueChange.apply(void 0, __spreadArray([optionName], (0, argumentPresence_1.restoredFieldChange)(snapshot), false));
         }
         toggleExpandedOption(optionName);
-    }, [handleValueChange, optionField === null || optionField === void 0 ? void 0 : optionField.value, optionName, toggleExpandedOption]);
+    }, [handleValueChange, optionField === null || optionField === void 0 ? void 0 : optionField.value, optionName, toggleExpandedOption, pendingEdits]);
     // The sub-schema describing this field's value, when it has one. A value the
     // form knows the shape of is previewed THROUGH that shape (see
     // `SchemaDataView`); only genuinely undescribed data falls through to the
@@ -881,9 +931,9 @@ exports.CompactRow = (0, react_1.memo)(function (_a) {
     // whole-field revert is the only undo that makes sense.
     var revertButton = changed ?
         (0, jsx_runtime_1.jsx)(reqore_1.ReqoreButton, { className: 'options-readfirst-revert', size: 'small', flat: true, minimal: true, icon: 'HistoryLine', tooltip: 'Revert changes', onClick: function (e) {
-                var _a, _b, _c, _d;
+                var _a;
                 e.stopPropagation();
-                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);
+                handleValueChange.apply(void 0, __spreadArray([optionName], (0, argumentPresence_1.restoredFieldChange)((_a = originalValue.current) === null || _a === void 0 ? void 0 : _a[optionName]), false));
             } })
         : null;
     // Clear-value: empties a set field (keeps the field; the value goes blank)
@@ -923,7 +973,8 @@ exports.CompactRow = (0, react_1.memo)(function (_a) {
     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 } })
         : null;
-    var isPassiveCloseAction = fixedAllowedValueOption;
+    // nothing can have been typed where the value is a fixed choice, or the form is read-only (a card opened to read)
+    var isPassiveCloseAction = fixedAllowedValueOption || !!readOnly;
     // Cancel — the counterpart to Done, and the answer to "how do I get out of
     // here without keeping this". Done was the only way to leave an open field,
     // so every way out committed: the check, clicking away, and Escape (which
@@ -945,10 +996,18 @@ 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', 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 () {
+            // what was typed inside the field's pause reaches the form before the row closes
+            pendingEdits.flush();
+            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;
+    /* A field not set yet keeps quiet in the Optional box, but not once it is opened: its editor is where
+       its messages are read, and one saying why the field cannot be used is the answer to opening it. Such
+       a row used to show them only when its editor reported '' on opening, which put the field in the form
+       (qorus#646: the Qorus IDE's "Wait (ms)", disabled while "Until Step" is set). */
+    var infoActive = !hidden || isExpanded;
     var schemaMessages = infoActive ?
         (0, OptionFieldMessages_1.getShownSchemaMessages)(schema === null || schema === void 0 ? void 0 : schema.messages, availableOptions, options).map(function (m) { return ({
             intent: m.intent,
@@ -974,14 +1033,15 @@ exports.CompactRow = (0, react_1.memo)(function (_a) {
         }).map(function (m) { return ({ intent: m.intent, content: String(m.label) }); })
         : [];
     // TWO display channels, matching the Focus prototype:
-    //  • dedicated schema `messages` → prominent coloured PANELS below the row;
+    //  • dedicated schema `messages` → prominent colored PANELS below the row;
     //  • everything else (validation reasons, the unmet-dependency hint, the
     //    default-value note) → a compact INLINE reason strip — not a panel.
     var panelMessages = schemaMessages;
     var inlineMessages = __spreadArray(__spreadArray([], fieldMessages, true), (infoActive && (schema === null || schema === void 0 ? void 0 : schema.default_value_desc) ?
         [
             {
-                content: "Default: ".concat(schema.default_value_display_name || '', " \u2014 ").concat(schema.default_value_desc).trim(),
+                // the default's description is the server's markdown: its words, not its marks
+                content: "Default: ".concat(schema.default_value_display_name || '', " \u2014 ").concat((0, readFirst_1.markdownToProse)(schema.default_value_desc)).trim(),
             },
         ]
         : []), true);
@@ -1002,7 +1062,7 @@ exports.CompactRow = (0, react_1.memo)(function (_a) {
     // 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) ?
-        (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) {
+        (0, jsx_runtime_1.jsx)(reqore_1.ReqoreIcon, { icon: 'QuestionLine', size: '12px', effect: { opacity: rowInks.helpOpacity }, 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);
             } })
@@ -1024,17 +1084,16 @@ exports.CompactRow = (0, react_1.memo)(function (_a) {
        `compact` for the same reason the row inset asks for it: this is a strip
        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. */
+       renderer it reads as the plain text its markdown renders to (`plainTextNode`). */
     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))); };
+            : (0, markdownText_1.plainTextNode)(m.content) }, "".concat(m.content, "-").concat(index))); };
+    // in the intent's shade that reads on the row (the intents themselves did not: a danger reason was 2.7:1)
     var reasonColor = function (intent) {
-        var _a;
-        return intent === 'danger' ? cDanger
-            : intent === 'warning' ? cWarning
-                : intent === 'success' ?
-                    ((_a = theme === null || theme === void 0 ? void 0 : theme.intents) === null || _a === void 0 ? void 0 : _a.success) || cInfo
-                    : "".concat(cMuted, "cc");
+        return intent === 'danger' ? rowInks.danger
+            : intent === 'warning' ? rowInks.warning
+                : intent === 'success' ? rowInks.success
+                    : rowInks.mutedReason;
     };
     var infoToggle = null;
     // Cluster (required-group connection) — shared by the read row, its block
@@ -1054,8 +1113,13 @@ exports.CompactRow = (0, react_1.memo)(function (_a) {
     var clusterNode = null;
     var clusterHoverProps = clustered && clusterMembers.length ?
         {
-            onMouseEnter: function () { return setHighlightedOptions(clusterMembers); },
-            onMouseLeave: function () { return setHighlightedOptions([]); },
+            // a mouse's hover, not a tap's emulated one: see `isHoveringPointer`
+            onPointerEnter: function (e) {
+                if ((0, hoveringPointer_1.isHoveringPointer)(e)) {
+                    setHighlightedOptions(clusterMembers);
+                }
+            },
+            onPointerLeave: function () { return setHighlightedOptions([]); },
         }
         : {};
     // Items the EDITOR inside this row published — see `rowMenuContext`.
@@ -1065,8 +1129,10 @@ exports.CompactRow = (0, react_1.memo)(function (_a) {
     // just before the Done ✓ in both expanded layouts.
     var moreMenu = ((0, jsx_runtime_1.jsx)(reqore_1.ReqoreDropdown, { className: 'options-readfirst-more', icon: 'More2Fill', flat: true, minimal: true, fixed: true, size: 'small', tooltip: 'More actions', items: __spreadArray(__spreadArray(__spreadArray([
             {
-                label: 'Edit fullscreen',
+                // a card opened to read is viewed in full, not edited
+                label: readOnly ? 'View fullscreen' : 'Edit fullscreen',
                 icon: 'FullscreenLine',
+                className: 'options-readfirst-fullscreen',
                 onClick: function () { return setFocusedEditing(optionName); },
             }
         ], (removable && !hidden ?
@@ -1125,12 +1191,16 @@ exports.CompactRow = (0, react_1.memo)(function (_a) {
         optionField.value !== '') ?
         (function () {
             var _a = (0, codeSize_1.describeCodeSize)(optionField.value), lines = _a.lines, chars = _a.chars;
-            return ((0, jsx_runtime_1.jsx)(reqore_1.ReqoreP, { className: 'options-readfirst-label-code-size', size: 'tiny', effect: { opacity: 0.45, textAlign: 'left' }, style: { fontFamily: 'monospace' }, children: "".concat((0, codeSize_1.formatCodeChars)(chars), " ").concat((0, codeSize_1.formatCodeLines)(lines)) }));
+            return ((0, jsx_runtime_1.jsx)(reqore_1.ReqoreP, { className: 'options-readfirst-label-code-size', size: 'tiny', effect: { opacity: rowInks.noteOpacity, textAlign: 'left' }, style: { fontFamily: compactRowStyles_1.MONO_FONT_STACK }, children: "".concat((0, codeSize_1.formatCodeChars)(chars), " ").concat((0, codeSize_1.formatCodeLines)(lines)) }));
         })()
         : null;
-    if (isExpanded && !readOnly) {
+    if (isExpanded && (!readOnly || readOnlyOpens)) {
         if (inlineEditable) {
-            var collapse_1 = function () { return toggleExpandedOption(optionName); };
+            // closing the row by its label keeps what was typed, as Done does
+            var collapse_1 = function () {
+                pendingEdits.flush();
+                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) {
@@ -1139,9 +1209,9 @@ exports.CompactRow = (0, react_1.memo)(function (_a) {
                                         collapse_1();
                                     }
                                 }, children: [label, required ?
-                                        (0, jsx_runtime_1.jsx)(reqore_1.ReqoreIcon, { icon: 'Asterisk', color: 'danger', size: '10px' })
+                                        (0, jsx_runtime_1.jsx)(reqore_1.ReqoreIcon, { icon: 'Asterisk', color: rowInks.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 })
+                                (0, jsx_runtime_1.jsx)(compactRowStyles_1.StyledLabelDesc, { className: 'options-readfirst-label-desc', size: 'small', effect: { opacity: rowInks.descOpacity }, children: (0, readFirst_1.markdownToProse)(labelShortDesc) })
                                 : null, codeSizeNode] }), (0, jsx_runtime_1.jsxs)("div", { ref: editorRef, style: { minWidth: 0 }, onKeyDown: function (event) {
                             if (event.key === 'Escape') {
                                 event.stopPropagation();
@@ -1153,7 +1223,11 @@ exports.CompactRow = (0, react_1.memo)(function (_a) {
                             }
                         }, children: [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, absorbedNodes, (0, jsx_runtime_1.jsx)(rowOpenPicker_1.RowOpenPickerContext.Provider, { value: openThePicker, children: (0, jsx_runtime_1.jsx)(rowMenuContext_1.RowMenuContext.Provider, { value: rowMenu, children: renderOption(optionName, optionField, 'small', true) }) })] }), (0, jsx_runtime_1.jsxs)(compactRowStyles_1.StyledRowActions, { children: [draftChip, editRowRevertButton, cancelEditButton, clearValueButton, inlineOptionActions.map(function (action, index) {
+                                : null, absorbedNodes, (0, jsx_runtime_1.jsx)(rowOpenPicker_1.RowOpenPickerContext.Provider, { value: openThePicker, children: (0, jsx_runtime_1.jsx)(rowMenuContext_1.RowMenuContext.Provider, { value: rowMenu, children: (0, jsx_runtime_1.jsx)(pendingEdit_1.PendingEditsContext.Provider, { value: pendingEdits, children: renderOption(optionName, optionField, 'small', true) }) }) }), movesTo ?
+                                (0, jsx_runtime_1.jsx)(reqore_1.ReqoreP, { size: 'small', className: 'options-readfirst-moves-to', effect: {
+                                        color: movesTo === 'attention' ? rowInks.warning : rowInks.success,
+                                    }, style: { marginTop: 4 }, children: "Moves to \"".concat(BOX_NAMES[movesTo], "\" when you close it (\u2713)") })
+                                : null] }), (0, jsx_runtime_1.jsxs)(compactRowStyles_1.StyledRowActions, { children: [draftChip, editRowRevertButton, cancelEditButton, clearValueButton, inlineOptionActions.map(function (action, index) {
                                 return renderInjectedOptionAction(action, index);
                             }), moreMenu, closeExpandedFieldButton] }), clusterNode] }), optionName));
             // ALWAYS wrap the editing row in the same StyledColumn so its parent stays
@@ -1163,7 +1237,7 @@ exports.CompactRow = (0, react_1.memo)(function (_a) {
             // them. The wrapper carries the cluster rail class so the connection
             // persists while a member is being edited.
             return ((0, jsx_runtime_1.jsxs)(compactRowStyles_1.StyledColumn, { "data-field": optionName, className: clusterBlockClass || undefined, children: [editingRow, focusedEditing === optionName ?
-                        (0, jsx_runtime_1.jsxs)(FocusedEditing_1.FocusedEditing, { isFullscreen: true, modalOnly: true, onClose: function () { return setFocusedEditing(undefined); }, description: (schema === null || schema === void 0 ? void 0 : schema.display_name) || optionName, children: [(0, jsx_runtime_1.jsx)(Description_1.Description, { longDescription: schema === null || schema === void 0 ? void 0 : schema.desc, shortDescription: schema === null || schema === void 0 ? void 0 : schema.short_desc, longDescriptionShownByDefault: true }), renderOption(optionName, optionField)] })
+                        (0, jsx_runtime_1.jsxs)(FocusedEditing_1.FocusedEditing, { isFullscreen: true, modalOnly: true, onClose: function () { return setFocusedEditing(undefined); }, description: (schema === null || schema === void 0 ? void 0 : schema.display_name) || optionName, children: [(0, jsx_runtime_1.jsx)(Description_1.Description, { longDescription: schema === null || schema === void 0 ? void 0 : schema.desc, shortDescription: schema === null || schema === void 0 ? void 0 : schema.short_desc, longDescriptionShownByDefault: true }), (0, jsx_runtime_1.jsx)(pendingEdit_1.PendingEditsContext.Provider, { value: pendingEdits, children: renderOption(optionName, optionField) })] })
                         : null] }, optionName));
         }
         // Card chrome: badge / actions / tags render here — the row only fits
@@ -1179,16 +1253,18 @@ exports.CompactRow = (0, react_1.memo)(function (_a) {
             : undefined;
         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"), 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", { className: 'options-readfirst-card-header', style: {
                         display: 'flex',
-                        alignItems: 'flex-start',
+                        // a heading of one line is centred on the card's actions; one with a description or tags under
+                        // its name lines up by its top (David's review of qorus#646: the name sat above the buttons)
+                        alignItems: (schema === null || schema === void 0 ? void 0 : schema.short_desc) || cardTags.length ? 'flex-start' : 'center',
                         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) ||
                                             (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 ?
-                                                    (0, jsx_runtime_1.jsx)(reqore_1.ReqoreIcon, { icon: 'Asterisk', color: 'danger', size: '10px' })
+                                                    (0, jsx_runtime_1.jsx)(reqore_1.ReqoreIcon, { icon: 'Asterisk', color: rowInks.danger, size: '10px' })
                                                     : null, helpIcon] }), cardBadges.map(function (badge, index) {
                                             return typeof badge === 'object' ?
                                                 (0, jsx_runtime_1.jsx)(reqore_1.ReqoreTag, __assign({ size: 'small', minimal: true, className: 'options-readfirst-card-badge' }, badge), index)
@@ -1209,9 +1285,9 @@ exports.CompactRow = (0, react_1.memo)(function (_a) {
                             event.stopPropagation();
                             cancelEdit();
                         }
-                    }, children: (0, jsx_runtime_1.jsxs)(FocusedEditing_1.FocusedEditing, { isFullscreen: focusedEditing === optionName, onClose: function () { return setFocusedEditing(undefined); }, description: (schema === null || schema === void 0 ? void 0 : schema.display_name) || optionName, children: [focusedEditing === optionName ?
+                    }, children: (0, jsx_runtime_1.jsxs)(FocusedEditing_1.FocusedEditing, __assign({ isFullscreen: focusedEditing === optionName, onClose: function () { return setFocusedEditing(undefined); }, description: (schema === null || schema === void 0 ? void 0 : schema.display_name) || optionName }, (readOnly ? { label: 'Focused View' } : {}), { children: [focusedEditing === optionName ?
                                 (0, jsx_runtime_1.jsx)(Description_1.Description, { longDescription: schema === null || schema === void 0 ? void 0 : schema.desc, shortDescription: schema === null || schema === void 0 ? void 0 : schema.short_desc, longDescriptionShownByDefault: true })
-                                : null, (0, jsx_runtime_1.jsx)(rowMenuContext_1.RowMenuContext.Provider, { value: rowMenu, children: renderOption(optionName, optionField) })] }) })] }, optionName));
+                                : null, (0, jsx_runtime_1.jsx)(rowMenuContext_1.RowMenuContext.Provider, { value: rowMenu, children: (0, jsx_runtime_1.jsx)(pendingEdit_1.PendingEditsContext.Provider, { value: pendingEdits, children: renderOption(optionName, optionField) }) })] })) })] }, optionName));
     }
     var formatted = (0, readFirst_1.formatOptionValue)(optionField, schema);
     var empty = formatted === '';
@@ -1266,7 +1342,12 @@ exports.CompactRow = (0, react_1.memo)(function (_a) {
         typeof optionField.value === 'object' &&
         !Array.isArray(optionField.value) &&
         !isExpression;
-    var hashEntries = !hidden && (isPlainHashType || isObjectValuedType) ?
+    /* Where the host draws the row's summary (`readSummaries`), the row draws no preview of its own under it: the
+       host's summary says what the value is ("4 columns · 1 rule"), and a structured preview of the same value
+       under it ("columns · List · 4 items") said it again, in reqraft's words (qorus#646). The card, which a
+       read-only form opens for such a row too (`readOnlyOpens`), is where the value is read in full. */
+    var hostSummarizes = !!ReadSummary;
+    var hashEntries = !hidden && !hostSummarizes && (isPlainHashType || isObjectValuedType) ?
         (0, readFirst_1.getHashEntries)(optionField, schema)
         : [];
     // A LIST OF HASHES/objects gets the same expandable structured preview a hash
@@ -1274,6 +1355,7 @@ exports.CompactRow = (0, react_1.memo)(function (_a) {
     // never print "[object Object]"). StructuredDataView unwraps each item's
     // {type,value} envelope. Plain scalar lists keep just their joined summary.
     var isHashList = !hidden &&
+        !hostSummarizes &&
         (valueType === 'list' || valueType === 'free-list' || valueType === 'array') &&
         Array.isArray(optionField === null || optionField === void 0 ? void 0 : optionField.value) &&
         optionField.value.length > 0 &&
@@ -1293,6 +1375,7 @@ exports.CompactRow = (0, react_1.memo)(function (_a) {
     // "Show more" reveals the rest.  Sits in the same inset the hash/list
     // preview uses — mutually exclusive with `showStructuredPreview`.
     var showCodePreview = !hidden &&
+        !hostSummarizes &&
         valueType === 'code-editor' &&
         typeof (optionField === null || optionField === void 0 ? void 0 : optionField.value) === 'string' &&
         optionField.value.length > 0;
@@ -1339,6 +1422,7 @@ exports.CompactRow = (0, react_1.memo)(function (_a) {
     // rendered as the row's own text, and a second copy of it below would make
     // every description row tall for nothing.
     var showMarkdownPreview = !hidden &&
+        !hostSummarizes &&
         !showCodePreview &&
         !!markdownRenderer &&
         // keyed on the schema's ui_type, not on getValueType(): a markdown value
@@ -1360,6 +1444,7 @@ exports.CompactRow = (0, react_1.memo)(function (_a) {
     // sentence's worth of characters (a short value wraps in place).
     var showLongTextInset = readOnly &&
         !hidden &&
+        !hostSummarizes &&
         !showCodePreview &&
         !showMarkdownPreview &&
         !showStructuredPreview &&
@@ -1439,7 +1524,13 @@ exports.CompactRow = (0, react_1.memo)(function (_a) {
     // "Depends on" dropdown whose items are the blocking fields (an "any of:"
     // divider for OR-groups), each clickable to flash/locate the blocker.
     var dependsOnChip = fieldDisabled && dependencyEntries.length ?
-        (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(depHighlightNames); }, onMouseLeave: function () { return setHighlightedOptions([]); }, children: (0, jsx_runtime_1.jsx)(reqore_1.ReqoreDropdown, { className: 'options-readfirst-lock-deps', size: 'tiny', minimal: true, flat: true, compact: true, icon: 'LockLine', tooltip: 'Disabled \u2014 depends on other fields. Click to locate them.', items: __spreadArray([
+        (0, jsx_runtime_1.jsx)("span", { style: { display: 'inline-flex' }, role: 'presentation', onClick: function (e) { return e.stopPropagation(); }, onKeyDown: function (e) { return e.stopPropagation(); }, 
+            // a mouse's hover, not a tap's emulated one: see `isHoveringPointer`
+            onPointerEnter: function (e) {
+                if ((0, hoveringPointer_1.isHoveringPointer)(e)) {
+                    setHighlightedOptions(depHighlightNames);
+                }
+            }, onPointerLeave: function () { return setHighlightedOptions([]); }, children: (0, jsx_runtime_1.jsx)(reqore_1.ReqoreDropdown, { className: 'options-readfirst-lock-deps', size: 'tiny', minimal: true, flat: true, compact: true, icon: 'LockLine', tooltip: 'Disabled \u2014 depends on other fields. Click to locate them.', items: __spreadArray([
                     { divider: true, label: 'Unlocked by:', dividerAlign: 'left' }
                 ], dependencyEntries.flatMap(function (entry) { return __spreadArray(__spreadArray([], (Array.isArray(entry) ?
                     [{ divider: true, label: 'any of:', dividerAlign: 'left' }]
@@ -1470,7 +1561,11 @@ exports.CompactRow = (0, react_1.memo)(function (_a) {
         // change has said exactly what they want, and answering with silence
         // teaches them the surface is broken.
         if (fieldDisabled || readOnly) {
-            if (readOnly && !fieldDisabled) {
+            // ...except a row whose line cannot show what it holds: it opens its card to be read (`readOnlyOpens`)
+            if (readOnlyOpens && !fieldDisabled) {
+                toggleExpandedOption(optionName);
+            }
+            else if (readOnly && !fieldDisabled) {
                 onReadOnlyActivate === null || onReadOnlyActivate === void 0 ? void 0 : onReadOnlyActivate(optionName);
             }
             return;
@@ -1530,23 +1625,28 @@ exports.CompactRow = (0, react_1.memo)(function (_a) {
        go. Then it takes a button's role, focus and keyboard handling, because
        a thing that acts on a click has to be reachable without a mouse and has
        to announce what it does — and "Edit X", not "X", is what it does. */
-    var readOnlyIsAWayIn = !!readOnly && !fieldDisabled && !!onReadOnlyActivate;
-    var actsOnClick = !readOnly || readOnlyIsAWayIn;
+    var readOnlyIsAWayIn = !!readOnly && !fieldDisabled && !readOnlyOpens && !!onReadOnlyActivate;
+    var actsOnClick = !readOnly || readOnlyIsAWayIn || readOnlyOpens;
     var row = ((0, jsx_runtime_1.jsxs)("div", __assign({ "data-field": optionName, role: actsOnClick ? 'button' : undefined, tabIndex: actsOnClick ? 0 : undefined, "aria-label": readOnlyIsAWayIn ? "Edit ".concat(label)
-            : readOnly ? undefined
-                : label, className: "readfirst-row options-readfirst-value".concat(readOnly ? ' readfirst-row-read' : '').concat(readOnlyIsAWayIn ? ' readfirst-row-way-in' : '').concat(hidden ? ' readfirst-row-hidden' : '').concat(fieldDisabled ? ' readfirst-row-disabled' : '').concat(isHighlighted ? ' readfirst-row-group-highlight' : '').concat(isFlashed ? ' readfirst-row-flash' : '').concat(showLabelDesc ? ' readfirst-row-info-open' : '').concat(panelMessages.length || showStructuredPreview || showCodePreview || showMarkdownPreview || showLongTextInset ? ' readfirst-row-tall' : '').concat(clusterBlockClass ? ' ' + clusterBlockClass : ''), "aria-disabled": fieldDisabled || undefined, style: readOnlyIsAWayIn ? __assign(__assign({}, stripeStyle), { cursor: 'pointer' }) : stripeStyle, onClick: actsOnClick ? activate : undefined, onKeyDown: !actsOnClick ? undefined : (function (event) {
+            : readOnlyOpens ?
+                "View ".concat(label)
+                : readOnly ?
+                    undefined
+                    : label, className: "readfirst-row options-readfirst-value".concat(readOnly ? ' readfirst-row-read' : '').concat(readOnlyIsAWayIn || readOnlyOpens ? ' readfirst-row-way-in' : '').concat(readOnlyOpens ? ' readfirst-row-opens' : '').concat(hidden ? ' readfirst-row-hidden' : '').concat(fieldDisabled ? ' readfirst-row-disabled' : '').concat(isHighlighted ? ' readfirst-row-group-highlight' : '').concat(isFlashed ? ' readfirst-row-flash' : '').concat(showLabelDesc ? ' readfirst-row-info-open' : '').concat(panelMessages.length || showStructuredPreview || showCodePreview || showMarkdownPreview || showLongTextInset ? ' readfirst-row-tall' : '').concat(clusterBlockClass ? ' ' + clusterBlockClass : ''), "aria-disabled": fieldDisabled || undefined, style: readOnlyIsAWayIn || readOnlyOpens ? __assign(__assign({}, stripeStyle), { cursor: 'pointer' }) : stripeStyle, onClick: actsOnClick ? activate : undefined, onKeyDown: !actsOnClick ? undefined : (function (event) {
             if (event.key === 'Enter' || event.key === ' ') {
                 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 ?
-                                        (0, jsx_runtime_1.jsx)(reqore_1.ReqoreIcon, { icon: 'Asterisk', color: 'danger', size: '10px', margin: 'left', marginSize: 'tiny' })
+                                        (0, jsx_runtime_1.jsx)(reqore_1.ReqoreIcon, { icon: 'Asterisk', color: rowInks.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 } })
+                                (0, jsx_runtime_1.jsx)(reqore_1.ReqoreTag, { size: 'tiny', minimal: true, label: typeLabel, labelEffect: { opacity: rowInks.descOpacity } })
                                 : null] }), showLabelDesc ?
-                        (0, jsx_runtime_1.jsx)(compactRowStyles_1.StyledLabelDesc, { className: 'options-readfirst-label-desc', size: 'small', effect: { opacity: 0.55 }, children: labelShortDesc })
+                        /* A sentence in the label's own type, clamped to three lines: drawn as the prose its markdown
+                           renders to, never its marks (`markdownToProse`). */
+                        (0, jsx_runtime_1.jsx)(compactRowStyles_1.StyledLabelDesc, { className: 'options-readfirst-label-desc', size: 'small', effect: { opacity: rowInks.descOpacity }, children: (0, readFirst_1.markdownToProse)(labelShortDesc) })
                         : null, codeSizeNode, lineCountNote ?
-                        (0, jsx_runtime_1.jsx)(reqore_1.ReqoreP, { className: 'options-readfirst-label-lines', size: 'tiny', effect: { opacity: 0.45, textAlign: 'left' }, style: { fontFamily: 'monospace' }, children: lineCountNote })
+                        (0, jsx_runtime_1.jsx)(reqore_1.ReqoreP, { className: 'options-readfirst-label-lines', size: 'tiny', effect: { opacity: rowInks.noteOpacity, textAlign: 'left' }, style: { fontFamily: compactRowStyles_1.MONO_FONT_STACK }, children: lineCountNote })
                         : null] }), (0, jsx_runtime_1.jsxs)(compactRowStyles_1.StyledRowValue
             // A code field draws its whole value in the preview below, with
             // "Show more" for the rest, so a hover carrying the same text is
@@ -1574,12 +1674,22 @@ 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": empty || hidden ? rowInks.emptyValue : cKey, "$empty": empty || hidden, children: [(showMarkdownPreview || showLongTextInset || (previewWithSchema && showStructuredPreview)) ?
                         null
-                        : (0, jsx_runtime_1.jsx)("span", { className: 'options-readfirst-valuetext', children: hidden || empty ?
-                                formattedDefault || '—'
-                                : renderReadFirstValue(optionField, schema, formatted, readOnly) }), readOnlyChoiceDesc ?
-                        (0, jsx_runtime_1.jsx)("span", { className: 'options-readfirst-choice-desc', children: readOnlyChoiceDesc })
+                        : (0, jsx_runtime_1.jsx)("span", { className: 'options-readfirst-valuetext', children: ReadSummary && !hidden ?
+                                /* the host's own summary: an editor that reports a status says it here, set or not
+                                   ("Field mappings required", "… incomplete"), where "2 items" said nothing of it (qorus#646) */
+                                (0, jsx_runtime_1.jsx)(ReadSummary, { name: optionName, value: optionField === null || optionField === void 0 ? void 0 : optionField.value, schema: schema, formatted: formatted })
+                                : hidden || empty ?
+                                    formattedDefault || '—'
+                                    : renderReadFirstValue(optionField, schema, formatted, readOnly) }), readOnlyChoiceDesc ?
+                        /* What the chosen option means, on its own line: the server writes it in markdown ("Each
+                           `POST /conversations` ..."), so the host's renderer draws it, as it draws the schema messages
+                           below; without one, it reads as the plain text it renders to, its paragraphs kept. A block, as
+                           what is drawn is. */
+                        (0, jsx_runtime_1.jsx)("div", { className: 'options-readfirst-choice-desc', children: markdownRenderer ?
+                                markdownRenderer({ value: readOnlyChoiceDesc, compact: true })
+                                : (0, markdownText_1.plainTextNode)(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 ?
                         (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 ?
@@ -1622,7 +1732,7 @@ exports.CompactRow = (0, react_1.memo)(function (_a) {
                                                 // lives (qorus-ide registers its brand purple there).
                                                 // Falling back to `info` keeps this working for a
                                                 // consumer that registers nothing — the heading is
-                                                // accented either way, just in the theme's own colour
+                                                // accented either way, just in the theme's own color
                                                 // rather than one this library picked.
                                                 accent: ((_q = theme === null || theme === void 0 ? void 0 : theme.intents) === null || _q === void 0 ? void 0 : _q.custom1) || cInfo,
                                             }, onItemClick: function () { return activate(); } })
@@ -1656,9 +1766,9 @@ exports.CompactRow = (0, react_1.memo)(function (_a) {
                             onClick: function (event) { return event.stopPropagation(); }, children: (0, jsx_runtime_1.jsx)(reqore_1.ReqoreDropdown, { className: 'options-injected-actions-menu', icon: 'MoreFill', flat: true, minimal: true, fixed: true, size: 'tiny', tooltip: 'Field actions', items: injectedOptionActionMenuItems }) })
                         : null, (0, jsx_runtime_1.jsx)(compactRowStyles_1.StyledActionSlot, { className: 'options-readfirst-statusdot-slot', "$width": 12, children: changed && !readOnly && !hidden ?
                             (0, jsx_runtime_1.jsx)(reqore_1.ReqoreButton, { className: 'options-readfirst-revert', size: 'tiny', flat: true, minimal: true, compact: true, icon: 'HistoryLine', tooltip: 'Revert changes', onClick: function (e) {
-                                    var _a, _b, _c, _d;
+                                    var _a;
                                     e.stopPropagation();
-                                    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);
+                                    handleValueChange.apply(void 0, __spreadArray([optionName], (0, argumentPresence_1.restoredFieldChange)((_a = originalValue.current) === null || _a === void 0 ? void 0 : _a[optionName]), false));
                                 } })
                             : dotColor ?
                                 (0, jsx_runtime_1.jsx)(compactRowStyles_1.StyledStatusDot, { "$color": dotColor, "$ring": dotStatus !== 'set', "aria-hidden": true })