@qoretechnologies/reqraft 0.10.65 → 0.10.66-pr.137.ga1983bf

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");
@@ -114,6 +115,11 @@ var Description_1 = require("../../Description");
 var markdownRendererContext_1 = require("../../Description/markdownRendererContext");
 var FocusedEditing_1 = require("../../FocusedEditing");
 var compactRowContext_1 = require("./compactRowContext");
+var useCoarsePointer_1 = require("../../../hooks/useCoarsePointer");
+var qorusTypeCatalogue_1 = require("../../../helpers/qorusTypeCatalogue");
+var typeSentenceForm_1 = require("../typeSentenceForm");
+var inheritProps_1 = require("./inheritProps");
+var noDescription_1 = require("../../../helpers/noDescription");
 var revealRow_1 = require("./revealRow");
 var compactRowStyles_1 = require("./compactRowStyles");
 var OptionFieldMessages_1 = require("./OptionFieldMessages");
@@ -121,9 +127,14 @@ 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");
+var webLink_1 = require("../../../helpers/webLink");
 /**
  * Does this markdown value have more document in it than one row can show?
  *
@@ -209,6 +220,38 @@ var richtextItemText = function (item) {
         : undefined;
 };
 exports.richtextItemText = richtextItemText;
+/**
+ * An editable row's plain text: wrapped, up to three lines (see `renderReadFirstValue`). Its newlines fold into
+ * the line, as the one-line summary folded them.
+ */
+var SUMMARY_TEXT_STYLE = Object.freeze({
+    display: '-webkit-box',
+    WebkitBoxOrient: 'vertical',
+    WebkitLineClamp: 3,
+    overflow: 'hidden',
+    whiteSpace: 'normal',
+    overflowWrap: 'anywhere',
+    minWidth: 0,
+});
+/**
+ * A value that is a web address, as a link to it: it opens in a new tab, and a click or Enter on it follows it
+ * without opening the row it is in. Reached with Tab, it says where it goes and that it opens a new tab, and
+ * shows its focus ring (`.options-readfirst-link`); its address is copied as a link's is.
+ */
+var WebLink = (0, react_1.memo)(function (_a) {
+    var address = _a.address, color = _a.color;
+    return ((0, jsx_runtime_1.jsx)("a", { className: 'options-readfirst-link', href: address, target: '_blank', rel: 'noopener noreferrer', "aria-label": "".concat(address, " (opens in a new tab)"), style: color ? { color: color } : undefined, 
+        // the link's, not the row's: the row opens on a click and on Enter or Space
+        onClick: function (event) { return event.stopPropagation(); }, onKeyDown: function (event) {
+            if (event.key === 'Enter' || event.key === ' ') {
+                event.stopPropagation();
+            }
+        }, children: address }));
+});
+WebLink.displayName = 'WebLink';
+/** The status boxes by name, as their headers say them. */
+/** A read-only editor's change: there is none to take. */
+var ignoreReadOnlyChange = function () { return undefined; };
 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,14 +268,23 @@ 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 CodeEditor = (0, use_context_selector_1.useContextSelector)(compactRowContext_1.CompactRowContext, function (v) { return v.codeEditor; });
+    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; });
     var showFieldTypes = (0, use_context_selector_1.useContextSelector)(compactRowContext_1.CompactRowContext, function (v) { return v.showFieldTypes; });
+    // a finger's target is `small`, a mouse's `tiny` (the help button)
+    var coarse = (0, useCoarsePointer_1.useCoarsePointer)();
+    // what kind of value the option takes, in the words the form's type catalogue names it
+    var typeName = (0, typeSentenceForm_1.useTypeName)();
+    var typeSentenceForm = (0, typeSentenceForm_1.useTypeSentenceForm)();
     var showAllDescriptions = (0, use_context_selector_1.useContextSelector)(compactRowContext_1.CompactRowContext, function (v) { return v.showAllDescriptions; });
     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 isHighlighted = (0, use_context_selector_1.useContextSelector)(compactRowContext_1.CompactRowContext, function (v) {
         return v.highlightedOptions.includes(optionName);
     });
@@ -278,7 +330,8 @@ exports.CompactRow = (0, react_1.memo)(function (_a) {
     var availableOptions = (0, use_context_selector_1.useContextSelector)(compactRowContext_1.CompactRowContext, function (v) { return v.availableOptions; });
     var requiredGroupsInfo = (0, use_context_selector_1.useContextSelector)(compactRowContext_1.CompactRowContext, function (v) { return v.requiredGroupsInfo; });
     var handleValueChange = (0, use_context_selector_1.useContextSelector)(compactRowContext_1.CompactRowContext, function (v) { return v.handleValueChange; });
-    var toggleExpandedOption = (0, use_context_selector_1.useContextSelector)(compactRowContext_1.CompactRowContext, function (v) { return v.toggleExpandedOption; });
+    var expandOption = (0, use_context_selector_1.useContextSelector)(compactRowContext_1.CompactRowContext, function (v) { return v.expandOption; });
+    var collapseOption = (0, use_context_selector_1.useContextSelector)(compactRowContext_1.CompactRowContext, function (v) { return v.collapseOption; });
     var flashOption = (0, use_context_selector_1.useContextSelector)(compactRowContext_1.CompactRowContext, function (v) { return v.flashOption; });
     var hasOptionChanged = (0, use_context_selector_1.useContextSelector)(compactRowContext_1.CompactRowContext, function (v) { return v.hasOptionChanged; });
     var handleOptionLabelClick = (0, use_context_selector_1.useContextSelector)(compactRowContext_1.CompactRowContext, function (v) { return v.handleOptionLabelClick; });
@@ -291,6 +344,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,20 +354,25 @@ 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
-    // summary you click to open. A read-only row is the only rendering the
-    // value gets, so it wraps.
+    /* An editable row's plain text wraps, up to three lines: its value line is a summary you click to open,
+       and the whole value is in the row's editor. It was one line with an ellipsis, and an address or a
+       sentence lost its end at every width (qorus#646, Foxhoundn on qlip #383: "wrap texts so users on both
+       phones and desktops can easily read and copy it"; David, 2026-10-22). A read-only row is the only
+       rendering the value gets, so it wraps in full (`full`), a long text moving to the inset under the row
+       with "Show more". */
     full) {
         var _a;
         if (full === void 0) { full = false; }
         var valueType = (0, readFirst_1.getValueType)(field, schema);
         var wrapStyle = __assign({ display: 'inline-flex', alignItems: 'center', gap: 6, minWidth: 0, maxWidth: '100%' }, (full ? { flexWrap: 'wrap' } : {}));
-        var textStyle = full ?
-            { whiteSpace: 'pre-wrap', overflowWrap: 'anywhere' }
-            : { overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' };
+        var textStyle = full ? { whiteSpace: 'pre-wrap', overflowWrap: 'anywhere' } : SUMMARY_TEXT_STYLE;
+        // 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 +385,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 +398,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 +442,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 +458,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.
@@ -396,12 +486,17 @@ exports.CompactRow = (0, react_1.memo)(function (_a) {
             // It reads as a chip beside the size chip — "Qore · 62 lines" — which
             // is the same summary the read-only interface pages already show.
             return ((0, jsx_runtime_1.jsx)(reqore_1.ReqoreControlGroup, { gapSize: 'tiny', verticalAlign: 'center', wrap: true, children: (absorbedFields !== null && absorbedFields !== void 0 ? absorbedFields : []).map(function (absorbedName) {
-                    var _a;
-                    var absorbedValue = (_a = availableOptions === null || availableOptions === void 0 ? void 0 : availableOptions[absorbedName]) === null || _a === void 0 ? void 0 : _a.value;
+                    var absorbedField = availableOptions === null || availableOptions === void 0 ? void 0 : availableOptions[absorbedName];
+                    var absorbedValue = absorbedField === null || absorbedField === void 0 ? void 0 : absorbedField.value;
                     if (absorbedValue === undefined || absorbedValue === null || absorbedValue === '') {
                         return null;
                     }
-                    return ((0, jsx_runtime_1.jsx)(reqore_1.ReqoreTag, { className: 'options-readfirst-absorbed-tag', size: 'small', minimal: true, label: String(absorbedValue), tooltip: getAbsorbedLabel(absorbedName) }, absorbedName));
+                    /* What the value is called and its picture, as its own control draws it: a language is "Qore" with
+                       its logo, not the value it is stored as, "qore" (qorus#646, David's review). */
+                    var absorbedSchema = options === null || options === void 0 ? void 0 : options[absorbedName];
+                    var choice = (0, readFirst_1.findAllowedValueOption)(absorbedValue, absorbedSchema);
+                    return ((0, jsx_runtime_1.jsx)(reqore_1.ReqoreTag, { className: 'options-readfirst-absorbed-tag', size: 'small', minimal: true, icon: (choice === null || choice === void 0 ? void 0 : choice.image) ? 'CheckboxBlankLine' : undefined, leftIconProps: (choice === null || choice === void 0 ? void 0 : choice.image) ? { image: choice.image } : undefined, label: (0, readFirst_1.formatOptionValue)(absorbedField, absorbedSchema) ||
+                            String(absorbedValue), tooltip: getAbsorbedLabel(absorbedName) }, absorbedName));
                 }) }));
         }
         // Markdown read summary: the row prints the value's prose (the markdown
@@ -437,27 +532,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 +552,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
@@ -506,10 +572,23 @@ exports.CompactRow = (0, react_1.memo)(function (_a) {
         if (templateSegments.some(function (segment) { return segment.kind === 'tag'; })) {
             return withExpressionMarker((0, jsx_runtime_1.jsx)(TemplateText_1.TemplateText, { segments: templateSegments, templates: ownTemplates, full: full }));
         }
-        return withExpressionMarker(full ? (0, jsx_runtime_1.jsx)("span", { style: textStyle, children: formatted }) : formatted);
+        /* A value that is a web address is a link to it, in an editable row and a read-only one: it opens in a
+           new tab, and a click or a key on it follows it and does not open the row (Foxhoundn on qlip #383:
+           "Please render links as links"; David, 2026-10-22). Only the value as typed: a value drawn as a label
+           or masked is not its address. */
+        var link = formatted === (field === null || field === void 0 ? void 0 : field.value) ? (0, webLink_1.webLinkOf)(formatted) : undefined;
+        return withExpressionMarker((0, jsx_runtime_1.jsx)("span", { style: textStyle, children: link ?
+                (0, jsx_runtime_1.jsx)(WebLink, { address: link, color: cInfo })
+                : formatted }));
     };
     var schema = options === null || options === void 0 ? void 0 : options[optionName];
     var label = (schema === null || schema === void 0 ? void 0 : schema.display_name) || optionName;
+    /* The name and its asterisk, which a word joiner (U+2060) holds to the name's last character: it is on the
+       name's (last) line, never on a line of its own under it (Foxhoundn, qlip #392). The name stays one text,
+       found by its words as it always was. */
+    var nameWithAsterisk = function (asterisk) { return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [label, asterisk ?
+                (0, jsx_runtime_1.jsxs)(compactRowStyles_1.StyledLabelAsterisk, { className: 'options-readfirst-required', children: ['\u2060', (0, jsx_runtime_1.jsx)(reqore_1.ReqoreIcon, { icon: 'Asterisk', color: rowInks.danger, size: "".concat(compactRowStyles_1.LABEL_ASTERISK_SIZE, "px"), margin: 'left', marginSize: 'tiny' })] })
+                : null] })); };
     var injectedOptionActions = react_1.default.useMemo(function () {
         return schema ?
             (0, optionActions_1.resolveOptionActions)(optionActions, {
@@ -587,9 +666,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 +692,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 +715,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 +891,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 +905,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]);
+        collapseOption(optionName);
+    }, [handleValueChange, optionField === null || optionField === void 0 ? void 0 : optionField.value, optionName, collapseOption, 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 +992,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 +1034,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 +1057,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();
+            collapseOption(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 +1094,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);
@@ -1001,12 +1122,40 @@ exports.CompactRow = (0, react_1.memo)(function (_a) {
     // the inline editor: opening a field used to drop it, leaving an editing row
     // with no route to the field's description at all. Stops propagation because
     // both labels are click targets themselves (the row expands / collapses).
-    var helpIcon = (schema === null || schema === void 0 ? void 0 : schema.desc) ?
-        (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) {
+    /* A real button (qorus#646, David's decision): in the tab order with a focus ring, a finger's size on a touch
+       screen (`small`) and a mouse's on a desktop (`tiny`), opening the help on a click, Enter or Space. It was a
+       12px icon the keyboard could not reach. It sits in a label or a row that opens or closes on the same keys and
+       clicks, so it keeps them: the row does not also open or close. */
+    /* What kind of value the option takes (qorus#646, David's review: "type information should be shown on hover or
+       after clicking the 'Show all field information' control rather than by default"): in its name's hover and
+       in its help, beside its description, and beside its name only while the form shows all field information or
+       its types. */
+    var typeWords = (0, qorusTypeCatalogue_1.optionTypeWords)(schema, typeName);
+    var typeSentence = (0, qorusTypeCatalogue_1.optionTypeSentence)(schema, typeName, typeSentenceForm);
+    // what the option is, or, where it has no description at all, why nothing says so (qorus#646)
+    var labelHover = [
+        (schema === null || schema === void 0 ? void 0 : schema.short_desc) || (!(schema === null || schema === void 0 ? void 0 : schema.desc) && typeSentence ? noDescription_1.NO_OPTION_DESCRIPTION : undefined),
+        typeSentence && "Takes ".concat(typeSentence, "."),
+    ]
+        .filter(Boolean)
+        .join('\n') || undefined;
+    var typeShown = !!showFieldTypes || showAllDescriptions === true;
+    /* the help says what the option takes, and its description where it has one: every option with either has
+       it, a short description too, so a touch screen, which has no hover, reaches the type (qorus#646, David) */
+    var helpIcon = (schema === null || schema === void 0 ? void 0 : schema.desc) || (schema === null || schema === void 0 ? void 0 : schema.short_desc) || typeSentence ?
+        (0, jsx_runtime_1.jsx)(reqore_1.ReqoreButton, { icon: 'QuestionLine', size: coarse ? 'small' : 'tiny', minimal: true, flat: true, fixed: true, className: "options-readfirst-help".concat(coarse ? ' options-readfirst-help-touch' : ''), "aria-label": "Help: ".concat(label), tooltip: 'Help', effect: { opacity: rowInks.helpOpacity }, onClick: function (event) {
                 event.stopPropagation();
                 handleOptionLabelClick(optionName);
+            }, onKeyDown: function (event) {
+                if (event.key === 'Enter' || event.key === ' ') {
+                    event.stopPropagation();
+                }
             } })
         : null;
+    // beside the name, muted: it is about the field, not its value
+    var typeTag = typeWords && typeShown ?
+        (0, jsx_runtime_1.jsx)(reqore_1.ReqoreTag, { size: 'tiny', minimal: true, className: 'options-readfirst-type', label: typeWords, labelEffect: { opacity: rowInks.descOpacity } })
+        : null;
     // The gap rides on the message itself rather than on the panel around it:
     // the panel is a vertical ReqoreControlGroup, which owns its own layout and
     // stacks children flush, and the class rule that used to carry a 4px gap
@@ -1024,17 +1173,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 +1202,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 +1218,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,23 +1280,25 @@ 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();
+                collapseOption(optionName);
+            };
             var editingRow = ((0, jsx_runtime_1.jsxs)("div", __assign({ ref: rowRef, "data-field": optionName, className: 'readfirst-row readfirst-row-editing options-readfirst-inline options-readfirst-value', style: readRowHeights.current[optionName] ?
                     { minHeight: readRowHeights.current[optionName] }
-                    : undefined }, clusterHoverProps, { children: [(0, jsx_runtime_1.jsxs)(compactRowStyles_1.StyledLabelBlock, { className: 'options-readfirst-label-block', children: [(0, jsx_runtime_1.jsxs)(compactRowStyles_1.StyledRowLabel, { role: 'button', tabIndex: 0, "aria-label": "Collapse ".concat(label), title: (schema === null || schema === void 0 ? void 0 : schema.short_desc) || undefined, "$color": cKey, "$pointer": true, onClick: collapse_1, onKeyDown: function (event) {
+                    : undefined }, clusterHoverProps, { children: [(0, jsx_runtime_1.jsxs)(compactRowStyles_1.StyledLabelBlock, { className: 'options-readfirst-label-block', children: [(0, jsx_runtime_1.jsx)(compactRowStyles_1.StyledRowLabel, { role: 'button', tabIndex: 0, "aria-label": "Collapse ".concat(label), title: labelHover, "$color": cKey, "$pointer": true, onClick: collapse_1, onKeyDown: function (event) {
                                     if (event.key === 'Enter' || event.key === ' ') {
                                         event.preventDefault();
                                         collapse_1();
                                     }
-                                }, 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 })
+                                }, children: (0, jsx_runtime_1.jsxs)(compactRowStyles_1.StyledLabelName, { "$fill": true, children: [(0, jsx_runtime_1.jsxs)("span", { className: 'options-readfirst-label-text', style: { minWidth: 0 }, children: [nameWithAsterisk(!!required), typeTag] }), helpIcon] }) }), 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 +1310,7 @@ 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) }) }) })] }), (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 +1320,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,17 +1336,17 @@ 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) ||
+                    }, children: [(0, jsx_runtime_1.jsxs)(compactRowStyles_1.StyledCardHeading, { children: [(0, jsx_runtime_1.jsxs)(compactRowStyles_1.StyledCardLabel, { "$color": cKey, title: labelHover, 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' })
-                                                    : null, helpIcon] }), cardBadges.map(function (badge, index) {
+                                            : null, (0, jsx_runtime_1.jsxs)(compactRowStyles_1.StyledLabelName, { children: [(0, jsx_runtime_1.jsx)("span", { className: 'options-readfirst-label-text', style: { minWidth: 0 }, children: nameWithAsterisk(!!required) }), helpIcon] }), typeTag, 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)
                                                 : (0, jsx_runtime_1.jsx)(reqore_1.ReqoreTag, { size: 'small', minimal: true, className: 'options-readfirst-card-badge', label: badge }, index);
@@ -1209,9 +1366,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 +1423,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 +1436,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 +1456,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 +1503,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 +1525,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 &&
@@ -1384,9 +1550,8 @@ exports.CompactRow = (0, react_1.memo)(function (_a) {
         isMultilineMarkdown(optionField.value)) ?
         "".concat(optionField.value.trim().split('\n').length, " lines")
         : undefined;
-    var typeLabel = showFieldTypes ?
-        "<".concat((schema === null || schema === void 0 ? void 0 : schema.ui_type) || (schema === null || schema === void 0 ? void 0 : schema.type) || 'auto').concat((schema === null || schema === void 0 ? void 0 : schema.ui_element_type) ? "[".concat(schema.ui_element_type, "]") : '', ">")
-        : null;
+    // the option's type beside its name, while the form shows field types: in words, as an open option says it
+    var typeLabel = typeShown ? typeWords : undefined;
     // A `readonly` field is one the system owns — an assigned id, a recorded
     // provenance. The server states that on the field itself; only the older
     // compat projection also mapped it to `disabled`, so on this path the form
@@ -1439,7 +1604,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 +1641,12 @@ 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) {
+                // what the row was drawn as decides: open, it closes; closed, it opens (see expandOption)
+                (isExpanded ? collapseOption : expandOption)(optionName);
+            }
+            else if (readOnly && !fieldDisabled) {
                 onReadOnlyActivate === null || onReadOnlyActivate === void 0 ? void 0 : onReadOnlyActivate(optionName);
             }
             return;
@@ -1487,7 +1663,11 @@ exports.CompactRow = (0, react_1.memo)(function (_a) {
         // not-yet-set field just expands its editor (with an empty value); it joins
         // the form's output the moment a value is set (and moves to Set / Needs
         // attention), and drops back to Optional when cleared. No explicit add step.
-        toggleExpandedOption(optionName);
+        //
+        // What the row was drawn as decides, not the state by the time the update lands: a click on a row drawn
+        // closed opens it, even if the first-required scan's update has opened it in the meantime (a toggle closed
+        // it again: qorus#646, the Qorus IDE's Schema "Draft Is Saved").
+        (isExpanded ? collapseOption : expandOption)(optionName);
     };
     // Row chrome: icon/image before the label; schema `intent` as the edge
     // stripe (message-severity stripes win when both apply).
@@ -1530,23 +1710,26 @@ 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' })
-                                        : null, helpIcon] }), typeLabel ?
-                                (0, jsx_runtime_1.jsx)(reqore_1.ReqoreTag, { size: 'tiny', minimal: true, label: typeLabel, labelEffect: { opacity: 0.55 } })
-                                : null] }), showLabelDesc ?
-                        (0, jsx_runtime_1.jsx)(compactRowStyles_1.StyledLabelDesc, { className: 'options-readfirst-label-desc', size: 'small', effect: { opacity: 0.55 }, children: labelShortDesc })
+        }) }, 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: labelHover, "$color": cKey, children: [rowChromeIcon, (0, jsx_runtime_1.jsxs)(compactRowStyles_1.StyledLabelName, { "$fill": true, children: [(0, jsx_runtime_1.jsxs)("span", { className: 'options-readfirst-label-text', style: { minWidth: 0 }, children: [nameWithAsterisk(requiredMark), typeLabel ?
+                                                (0, jsx_runtime_1.jsx)(reqore_1.ReqoreTag, { size: 'tiny', minimal: true, className: 'options-readfirst-type', label: typeLabel, labelEffect: { opacity: rowInks.descOpacity } })
+                                                : null] }), helpIcon] })] }), showLabelDesc ?
+                        /* 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 +1757,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 +1815,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(); } })
@@ -1636,7 +1829,12 @@ exports.CompactRow = (0, react_1.memo)(function (_a) {
                                         options: options,
                                         values: availableOptions,
                                     })
-                                    : (0, jsx_runtime_1.jsx)(compactRowStyles_1.StyledCodePreview, { className: 'options-readfirst-code', "$bg": cHover, "$border": "".concat(cDivider, "88"), "$fg": cKey, children: optionField.value }) }) })
+                                    : CodeEditor ?
+                                        /* Code is shown as the host shows code: its own editor, read-only, given what it inherits (its
+                                           language) - highlighted, with its language server - and as a plain block only where there is
+                                           none (qorus#646, David's decision). */
+                                        (0, jsx_runtime_1.jsx)("div", { className: 'options-readfirst-code options-readfirst-code-editor', children: (0, jsx_runtime_1.jsx)(CodeEditor, __assign({}, schema, (0, inheritProps_1.resolveInheritProps)(schema === null || schema === void 0 ? void 0 : schema.inherit_props, availableOptions), { name: optionName, value: optionField.value, readOnly: true, onChange: ignoreReadOnlyChange })) })
+                                        : (0, jsx_runtime_1.jsx)(compactRowStyles_1.StyledCodePreview, { className: 'options-readfirst-code', "$bg": cHover, "$border": "".concat(cDivider, "88"), "$fg": cKey, children: optionField.value }) }) })
                         : null, showMarkdownPreview ?
                         (0, jsx_runtime_1.jsx)(compactRowStyles_1.StyledRowInset, { className: 'options-readfirst-inset options-readfirst-markdown-inset', onClick: function (e) { return e.stopPropagation(); }, children: (0, jsx_runtime_1.jsx)(reqore_1.ReqoreCollapsibleContent, { maxCollapsedHeight: 96, buttonProps: { className: 'options-readfirst-viewmore' }, children: (0, jsx_runtime_1.jsx)("div", { className: 'options-readfirst-markdown', children: markdownRenderer({ value: optionField.value, compact: true }) }) }) })
                         : null, showLongTextInset ?
@@ -1656,9 +1854,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 })