@qoretechnologies/reqraft 0.10.38 → 0.10.39-pr.95.g3503e91

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

@@ -33,6 +33,42 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
 var __rest = (this && this.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
@@ -57,11 +93,12 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.CompactRow = void 0;
+exports.CompactRow = exports.richtextItemText = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
 var reqore_1 = require("@qoretechnologies/reqore");
 var optionActions_1 = require("./optionActions");
 var flatten_1 = __importDefault(require("lodash/flatten"));
+var isEqual_1 = __importDefault(require("lodash/isEqual"));
 var size_1 = __importDefault(require("lodash/size"));
 var react_1 = __importStar(require("react"));
 var use_context_selector_1 = require("use-context-selector");
@@ -69,12 +106,15 @@ var validations_1 = require("../../../helpers/validations");
 var templates_1 = require("../../../helpers/templates");
 var common_1 = require("../../../helpers/common");
 var ReadOnlyTemplateTag_1 = require("../fields/template/ReadOnlyTemplateTag");
+var codeSize_1 = require("../../codeSize");
 var Description_1 = require("../../Description");
 var markdownRendererContext_1 = require("../../Description/markdownRendererContext");
 var FocusedEditing_1 = require("../../FocusedEditing");
 var compactRowContext_1 = require("./compactRowContext");
 var compactRowStyles_1 = require("./compactRowStyles");
 var OptionFieldMessages_1 = require("./OptionFieldMessages");
+var SchemaDataView_1 = require("./_structuredData/SchemaDataView");
+var fetch_1 = require("../../../utils/fetch");
 var readFirst_1 = require("./readFirst");
 var StructuredDataView_1 = require("./_structuredData/StructuredDataView");
 /**
@@ -138,13 +178,40 @@ var MAX_INLINE_OPTION_ACTIONS = 2;
 // One read-first row: label | value | action collapsed; the real editor (the
 // classic renderOption) expanded. `hidden` = search-surfaced optional —
 // activating the row adds the field first.
+/**
+ * The text inside a rich-text envelope, when a list item is one.
+ *
+ * An option like Gmail's `to` is `type: "list"`, `element_type: "string"`,
+ * `supports_templates: true`: each element is a plain string that may carry
+ * template tags, so its editor is a rich-text one and the element value arrives
+ * wrapped as `{type: "richtext", value: [{type: "paragraph", …}]}`.
+ *
+ * That envelope is a string in a coat, not structured data. The hash-list test
+ * unwraps `item.value`, found the Slate document — an object — and classed a
+ * list of email addresses as a list of hashes, so the row drew an expandable
+ * `type / children / text` tree instead of the address the operator typed.
+ */
+var richtextItemText = function (item) {
+    return item && typeof item === 'object' && item.type === 'richtext' ?
+        (0, common_1.richtextToString)(item.value)
+        : undefined;
+};
+exports.richtextItemText = richtextItemText;
 exports.CompactRow = (0, react_1.memo)(function (_a) {
     var _b;
-    var _c, _d, _e, _f, _g, _h, _j;
-    var optionName = _a.optionName, optionField = _a.optionField, _k = _a.hidden, hidden = _k === void 0 ? false : _k, _l = _a.clustered, clustered = _l === void 0 ? false : _l, _m = _a.clusterFirst, clusterFirst = _m === void 0 ? false : _m, _o = _a.clusterLast, clusterLast = _o === void 0 ? false : _o;
+    var _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
+    var optionName = _a.optionName, optionField = _a.optionField, _o = _a.hidden, hidden = _o === void 0 ? false : _o, _p = _a.clustered, clustered = _p === void 0 ? false : _p, _q = _a.clusterFirst, clusterFirst = _q === void 0 ? false : _q, _r = _a.clusterLast, clusterLast = _r === void 0 ? false : _r, absorbedFields = _a.absorbedFields;
     var readOnly = (0, use_context_selector_1.useContextSelector)(compactRowContext_1.CompactRowContext, function (v) { return v.readOnly; });
     var commitMode = (0, use_context_selector_1.useContextSelector)(compactRowContext_1.CompactRowContext, function (v) { return v.commitMode; });
     var options = (0, use_context_selector_1.useContextSelector)(compactRowContext_1.CompactRowContext, function (v) { return v.options; });
+    // An absorbed field keeps its own name — it is a different field, not a
+    // property of its host — so the label comes from its schema exactly as it
+    // would on its own row.
+    var getAbsorbedLabel = function (absorbedName) {
+        var _a;
+        return ((_a = options === null || options === void 0 ? void 0 : options[absorbedName]) === null || _a === void 0 ? void 0 : _a.display_name) ||
+            absorbedName;
+    };
     var codePreviewRenderer = (0, use_context_selector_1.useContextSelector)(compactRowContext_1.CompactRowContext, function (v) { return v.codePreviewRenderer; });
     var markdownRenderer = (0, markdownRendererContext_1.useMarkdownRenderer)();
     var operators = (0, use_context_selector_1.useContextSelector)(compactRowContext_1.CompactRowContext, function (v) { return v.operators; });
@@ -191,6 +258,26 @@ exports.CompactRow = (0, react_1.memo)(function (_a) {
     // renderer when it supplied one, reqraft's own otherwise.
     // Value-cell content: colour adds a swatch, file an icon + size; hash keeps
     // its "N fields" summary (sub-fields reveal beneath the row).
+    /**
+     * Flattens the line breaks in one prose segment of a richtext SUMMARY.
+     *
+     * The read-first row is a single line: every other value type reaches it
+     * through `whiteSpace: 'nowrap'`, which collapses newlines for free. The
+     * richtext branch is the only one that opts into `'pre'` — it has to, or the
+     * spaces that separate a word from the chip beside it are dropped — and `pre`
+     * also honours the newlines, which `nowrap` would have eaten.
+     *
+     * So a genuinely multi-line value (an alert rule's Gmail message body is five
+     * `\n`-separated lines) gave each segment after the first a blank first line.
+     * The wrapper centres its items, so a two-line-tall box centred against
+     * one-line chips put every word 12px below the chip beside it, and the row
+     * read as a staircase. Measured on supah: prose boxes 30px against 14px chips.
+     *
+     * A space, not nothing: consecutive prose segments are merged before they get
+     * here, so a value with a break and no chip between its lines would otherwise
+     * lose the word boundary entirely.
+     */
+    var collapseSummaryBreaks = function (text) { return text.replace(/\s*\r?\n\s*/g, ' '); };
     var renderReadFirstValue = function (field, schema, formatted) {
         var valueType = (0, readFirst_1.getValueType)(field, schema);
         var wrapStyle = {
@@ -229,9 +316,18 @@ exports.CompactRow = (0, react_1.memo)(function (_a) {
         // see `showCodePreview` below. Keeps the row height fixed while making
         // multi-line source readable without opening the full editor.
         if (valueType === 'code-editor' && typeof (field === null || field === void 0 ? void 0 : field.value) === 'string') {
-            var lines = field.value.split('\n').length;
-            var chars = field.value.length;
-            return ((0, jsx_runtime_1.jsx)(reqore_1.ReqoreTag, { size: 'small', minimal: true, intent: 'info', icon: 'CodeLine', label: "".concat(lines, " ").concat(lines === 1 ? 'line' : 'lines'), labelKey: "".concat(chars, " ").concat(chars === 1 ? 'char' : 'chars') }));
+            // An absorbed sibling has no row of its own, so a COLLAPSED host has to
+            // carry its value or it disappears from the form entirely when closed.
+            // 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;
+                    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));
+                }) }));
         }
         // Markdown read summary: the row prints the value's prose (the markdown
         // markers are stripped by `formatOptionValue`), so a multi-line document
@@ -265,6 +361,14 @@ exports.CompactRow = (0, react_1.memo)(function (_a) {
             (0, templates_1.isValueTemplate)(field.value)) {
             return (0, jsx_runtime_1.jsx)(ReadOnlyTemplateTag_1.ReadOnlyTemplateTag, { value: field.value, templates: templates, 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
+        // tree, never the address itself.
+        if (Array.isArray(field === null || field === void 0 ? void 0 : field.value) && field.value.some(function (item) { return (0, exports.richtextItemText)(item) !== undefined; })) {
+            var texts = field.value.map(function (item) { var _a; return (_a = (0, exports.richtextItemText)(item)) !== null && _a !== void 0 ? _a : String(item !== null && item !== void 0 ? item : ''); });
+            return (0, jsx_runtime_1.jsx)("span", { style: textStyle, children: texts.filter(function (text) { return text !== ''; }).join(', ') });
+        }
         // Richtext read-first summary: inline $-chips for embedded template tags
         // with the prose around them (the IDE intent scheme via getTemplateTagStyle),
         // kept lightweight instead of mounting the full editor — that lives in the
@@ -284,7 +388,7 @@ exports.CompactRow = (0, react_1.memo)(function (_a) {
                                 // size makes centring align the baselines too, at whatever font
                                 // size the consuming app uses.
                                 style: { fontSize: 'inherit' }, icon: 'ExchangeDollarLine', label: segment.text || segment.value, tooltip: segment.value }, (0, templates_1.getTemplateTagStyle)((_a = (templates ? (0, templates_1.findTemplate)(templates, segment.value || '') : undefined)) === null || _a === void 0 ? void 0 : _a.metadata)), index)
-                            : (0, jsx_runtime_1.jsx)("span", { style: { whiteSpace: 'pre' }, children: segment.text }, index);
+                            : (0, jsx_runtime_1.jsx)("span", { style: { whiteSpace: 'pre' }, children: collapseSummaryBreaks(segment.text) }, index);
                     }) }));
             }
         }
@@ -333,14 +437,14 @@ exports.CompactRow = (0, react_1.memo)(function (_a) {
     // hover-gated button is unreachable without a hover — and anything past the
     // inline cap overflows regardless, so a consumer injecting ten actions can
     // never push the row's value out of view.
-    var _p = react_1.default.useMemo(function () {
+    var _s = react_1.default.useMemo(function () {
         return collapseOptionActions ?
             [[], injectedOptionActions]
             : [
                 injectedOptionActions.slice(0, MAX_INLINE_OPTION_ACTIONS),
                 injectedOptionActions.slice(MAX_INLINE_OPTION_ACTIONS),
             ];
-    }, [collapseOptionActions, injectedOptionActions]), inlineOptionActions = _p[0], menuOptionActions = _p[1];
+    }, [collapseOptionActions, injectedOptionActions]), inlineOptionActions = _s[0], menuOptionActions = _s[1];
     var injectedOptionActionMenuItems = react_1.default.useMemo(function () {
         return menuOptionActions.map(function (action, index) {
             var _a, _b;
@@ -451,6 +555,103 @@ exports.CompactRow = (0, react_1.memo)(function (_a) {
         }, 60);
         return function () { return window.clearTimeout(id); };
     }, [isExpanded, optionName, autoFocusNameRef]);
+    // What the field held when it was opened — the baseline Cancel restores.
+    //
+    // Deliberately NOT `originalValue`, which is the whole form's load-time
+    // snapshot. That answers "undo every change ever made to this field", which
+    // is a different question from "forget what I just typed"; a Cancel sitting
+    // next to Done has to mean the second one, or it silently throws away edits
+    // the user made earlier and had already accepted.
+    //
+    // The dependency list is `isExpanded` alone on purpose: adding the value
+    // would re-take the snapshot on every keystroke, leaving nothing to cancel.
+    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 };
+        }
+        else {
+            editEntryValue.current = undefined;
+        }
+    }, [isExpanded]);
+    // True while the open editor holds something other than what it opened with.
+    var editedSinceOpened = isExpanded &&
+        !!editEntryValue.current &&
+        !(0, isEqual_1.default)(editEntryValue.current.value, optionField === null || optionField === void 0 ? void 0 : optionField.value);
+    // 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 () {
+        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);
+        }
+        toggleExpandedOption(optionName);
+    }, [handleValueChange, optionField === null || optionField === void 0 ? void 0 : optionField.value, optionName, toggleExpandedOption]);
+    // 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
+    // untyped data tree.
+    //
+    // The server does NOT inline that sub-schema. `encodeFieldsForUi()` registers
+    // it and sends an id string in its place, which the consumer fetches back —
+    // exactly what AutoFormField does to build the editor ("Some arg schemas are
+    // not provided as objects, but as strings so we need to fetch them"). A
+    // preview that understood only the inline object therefore fell through to
+    // the untyped tree for every field a real server describes: the schema view
+    // worked against hand-written story fixtures and nowhere else.
+    //
+    // Resolved here rather than beside the preview it feeds: the preview renders
+    // below an early return, so a hook placed there would run conditionally.
+    var rawArgSchema = schema === null || schema === void 0 ? void 0 : schema.arg_schema;
+    var argSchemaId = typeof rawArgSchema === 'string' ? rawArgSchema : undefined;
+    var _t = react_1.default.useState(undefined), resolvedArgSchema = _t[0], setResolvedArgSchema = _t[1];
+    // Only worth a request when there is a described value to preview: a row whose
+    // value is unset or scalar renders no inset, so fetching its schema would buy
+    // a round trip per row and show nothing. `query` caches GETs, so rows sharing
+    // an id (every row of one list) cost one request between them.
+    var valueLooksStructured = !!(optionField === null || optionField === void 0 ? void 0 : optionField.value) && typeof optionField.value === 'object';
+    react_1.default.useEffect(function () {
+        if (!argSchemaId || !valueLooksStructured) {
+            return undefined;
+        }
+        var cancelled = false;
+        (function () { return __awaiter(void 0, void 0, void 0, function () {
+            var response;
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0: return [4 /*yield*/, (0, fetch_1.query)({
+                            url: "dataprovider/arg_schemas/".concat(argSchemaId),
+                            method: 'GET',
+                        })];
+                    case 1:
+                        response = _a.sent();
+                        // A failed fetch is not an error state here: the preview simply stays the
+                        // untyped tree, which is what it was before the schema view existed.
+                        if (!cancelled && response.ok) {
+                            setResolvedArgSchema(response.data);
+                        }
+                        return [2 /*return*/];
+                }
+            });
+        }); })();
+        return function () {
+            cancelled = true;
+        };
+    }, [argSchemaId, valueLooksStructured]);
+    var previewArgSchema = argSchemaId ? resolvedArgSchema : rawArgSchema;
+    var previewWithSchema = react_1.default.useMemo(function () { return (0, SchemaDataView_1.canRenderWithSchema)(optionField === null || optionField === void 0 ? void 0 : optionField.value, previewArgSchema); }, [optionField === null || optionField === void 0 ? void 0 : optionField.value, previewArgSchema]);
+    // The form-load revert: back to the value the FORM was loaded with.
+    //
+    // In an open editor this is offered only when it would do something
+    // `cancelEditButton` does not — that is, when the field was already
+    // modified BEFORE it was opened, so "undo this edit" and "undo every edit"
+    // are different answers. On the usual path (open an untouched field, type,
+    // change your mind) the two are identical, and two buttons with the same
+    // effect and different names are worse than one.
+    //
+    // It is unconditional on the READ row, where it renders inline in the
+    // status-dot column — there is no edit in progress there to cancel, so the
+    // 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;
@@ -496,6 +697,27 @@ exports.CompactRow = (0, react_1.memo)(function (_a) {
         (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 || 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
+    // closed without discarding, so it committed too, silently).
+    //
+    // Shown only while there is something to discard. On an untouched field
+    // Cancel and Done would do exactly the same thing, and two buttons that
+    // differ in name but not in effect are worse than one.
+    //
+    // Not offered when the close action is passive (read-only, or a fixed
+    // choice) — nothing can have been typed, so there is nothing to cancel.
+    var cancelEditButton = !isPassiveCloseAction && editedSinceOpened ?
+        (0, jsx_runtime_1.jsx)(reqore_1.ReqoreButton, { className: 'options-readfirst-cancel', size: 'small', flat: true, minimal: true, fixed: true, icon: 'CloseLine', intent: 'warning', "aria-label": 'Cancel edit', tooltip: 'Cancel edit \u2014 discard the changes made since this field was opened', onClick: function (event) {
+                event.stopPropagation();
+                cancelEdit();
+            } })
+        : null;
+    // See `revertButton` above for why this is conditional in the edit row.
+    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); } }));
     // Info tiers: Tier 1 (danger/warning + dependency hints) must be visible
     // without interaction; Tier 2 (info/success, default notes) sits behind ⓘ.
@@ -554,7 +776,12 @@ exports.CompactRow = (0, react_1.memo)(function (_a) {
                 handleOptionLabelClick(optionName);
             } })
         : null;
-    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, children: m.content }, "".concat(m.content, "-").concat(index))); };
+    // 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
+    // never reached this element at all — which is why two messages read as one
+    // two-tone block with no space between them.
+    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: m.content }, "".concat(m.content, "-").concat(index))); };
     var reasonColor = function (intent) {
         var _a;
         return intent === 'danger' ? cDanger
@@ -568,7 +795,7 @@ exports.CompactRow = (0, react_1.memo)(function (_a) {
     // wrapper AND the inline editor, so the rail/node/highlight persist across
     // view↔edit. The node is opaque (it masks the rail behind it); hovering any
     // member lights up the whole group via the shared highlight state.
-    var clusterGroup = clustered ? (_e = schema === null || schema === void 0 ? void 0 : schema.required_groups) === null || _e === void 0 ? void 0 : _e[0] : undefined;
+    var clusterGroup = clustered ? (_g = schema === null || schema === void 0 ? void 0 : schema.required_groups) === null || _g === void 0 ? void 0 : _g[0] : undefined;
     var clusterMembers = clusterGroup ? requiredGroupsInfo.members[clusterGroup] || [] : [];
     // The group is fulfilled once any member is set — the whole rail then reads
     // success (not just the satisfying node).
@@ -609,12 +836,48 @@ exports.CompactRow = (0, react_1.memo)(function (_a) {
                 },
             ]
             : []), true), injectedOptionActionMenuItems, true) }));
+    // The absorbed siblings' controls, rendered inside this row.
+    //
+    // Each keeps its own label so it is still identifiable — it is a different
+    // field, not a property of this one — but it sits inside this row's
+    // container, above the editor, so the pair reads as the single decision it
+    // is. `renderOption` is the same function the row uses for its own editor,
+    // so an absorbed field renders exactly as it would have on its own row.
+    var absorbedNodes = (absorbedFields === null || absorbedFields === void 0 ? void 0 : absorbedFields.length) ?
+        absorbedFields
+            .map(function (absorbedName) {
+            var absorbedField = availableOptions === null || availableOptions === void 0 ? void 0 : availableOptions[absorbedName];
+            if (!absorbedField)
+                return null;
+            return (
+            // No label element of its own: the editor now heads itself with
+            // the field's name (see FieldAllowedValuesCheckGroup), so a label
+            // beside it printed the same word twice.
+            (0, jsx_runtime_1.jsx)(compactRowStyles_1.StyledAbsorbedField, { className: 'options-readfirst-absorbed', children: (0, jsx_runtime_1.jsx)("div", { style: { minWidth: 0, flex: 1 }, children: renderOption(absorbedName, absorbedField, 'small', true) }) }, absorbedName));
+        })
+            .filter(Boolean)
+        : null;
+    // Declared here rather than beside the hash rows below: the `isExpanded`
+    // branch returns before that point, and its editor needs to know whether it is
+    // holding code.
+    var valueType = (0, readFirst_1.getValueType)(optionField, schema);
+    // How much source there is describes the FIELD, not its value, so the chip
+    // sits under the field's name — the same rule `lineCountNote` already
+    // follows for a multi-line markdown value, and the same reason: the value
+    // column carries the value and nothing else. It renders on the read row and
+    // the open one alike, because "how much code is here?" is a question that
+    // outlives opening the editor.
+    var codeSizeNode = valueType === 'code-editor' &&
+        typeof (optionField === null || optionField === void 0 ? void 0 : optionField.value) === 'string' &&
+        optionField.value !== '' ?
+        (0, jsx_runtime_1.jsx)(codeSize_1.ReqraftCodeSizeTag, { className: 'options-readfirst-label-code-size', code: optionField.value })
+        : null;
     if (isExpanded) {
         if (inlineEditable) {
             var collapse_1 = function () { return toggleExpandedOption(optionName); };
             var editingRow = ((0, jsx_runtime_1.jsxs)("div", __assign({ "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, { children: [(0, jsx_runtime_1.jsxs)(compactRowStyles_1.StyledRowLabel, { role: 'button', tabIndex: 0, "aria-label": "Collapse ".concat(label), title: (schema === null || schema === void 0 ? void 0 : schema.short_desc) || undefined, "$color": cKey, "$pointer": true, onClick: collapse_1, onKeyDown: function (event) {
+                    : undefined }, clusterHoverProps, { children: [(0, jsx_runtime_1.jsxs)(compactRowStyles_1.StyledLabelBlock, { className: 'options-readfirst-label-block', children: [(0, jsx_runtime_1.jsxs)(compactRowStyles_1.StyledRowLabel, { role: 'button', tabIndex: 0, "aria-label": "Collapse ".concat(label), title: (schema === null || schema === void 0 ? void 0 : schema.short_desc) || undefined, "$color": cKey, "$pointer": true, onClick: collapse_1, onKeyDown: function (event) {
                                     if (event.key === 'Enter' || event.key === ' ') {
                                         event.preventDefault();
                                         collapse_1();
@@ -623,12 +886,18 @@ exports.CompactRow = (0, react_1.memo)(function (_a) {
                                         (0, jsx_runtime_1.jsx)(reqore_1.ReqoreIcon, { icon: 'Asterisk', color: 'danger', size: '10px' })
                                         : null, helpIcon] }), labelShortDesc ?
                                 (0, jsx_runtime_1.jsx)(compactRowStyles_1.StyledLabelDesc, { className: 'options-readfirst-label-desc', size: 'small', effect: { opacity: 0.55 }, children: labelShortDesc })
-                                : null] }), (0, jsx_runtime_1.jsx)("div", { ref: editorRef, style: { minWidth: 0 }, onKeyDown: function (event) {
+                                : null, codeSizeNode] }), (0, jsx_runtime_1.jsxs)("div", { ref: editorRef, style: { minWidth: 0 }, onKeyDown: function (event) {
                             if (event.key === 'Escape') {
                                 event.stopPropagation();
-                                collapse_1();
+                                // Escape discards. It used to call `collapse()`, which closed
+                                // the field and KEPT whatever had been typed — the one
+                                // keystroke every editor treats as "get me out of this
+                                // without saving" was the quietest way to commit.
+                                cancelEdit();
                             }
-                        }, children: renderOption(optionName, optionField, 'small', true) }), (0, jsx_runtime_1.jsxs)(compactRowStyles_1.StyledRowActions, { children: [draftChip, revertButton, clearValueButton, inlineOptionActions.map(function (action, index) {
+                        }, 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, 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
@@ -647,10 +916,10 @@ exports.CompactRow = (0, react_1.memo)(function (_a) {
         var cardBadges = schemaBadge !== undefined && schemaBadge !== null ?
             (Array.isArray(schemaBadge) ? schemaBadge : [schemaBadge])
             : [];
-        var cardActions = ((_f = schema === null || schema === void 0 ? void 0 : schema.actions) === null || _f === void 0 ? void 0 : _f.filter(function (action) { return !!action && typeof action === 'object'; })) || [];
+        var cardActions = ((_h = schema === null || schema === void 0 ? void 0 : schema.actions) === null || _h === void 0 ? void 0 : _h.filter(function (action) { return !!action && typeof action === 'object'; })) || [];
         var cardTags = ((schema === null || schema === void 0 ? void 0 : schema.tags) || []);
         var schemaIntentColor = (schema === null || schema === void 0 ? void 0 : schema.intent) ?
-            (_g = theme === null || theme === void 0 ? void 0 : theme.intents) === null || _g === void 0 ? void 0 : _g[schema.intent]
+            (_j = theme === null || theme === void 0 ? void 0 : theme.intents) === null || _j === void 0 ? void 0 : _j[schema.intent]
             : undefined;
         return ((0, jsx_runtime_1.jsxs)(compactRowStyles_1.StyledEditCard, { "data-field": optionName, className: COMPACT_SINGLE_VALUE_TYPES.has(editType) ?
                 'options-readfirst-card options-readfirst-card-single'
@@ -679,7 +948,7 @@ exports.CompactRow = (0, react_1.memo)(function (_a) {
                                     return renderInjectedOptionAction(action, index);
                                 }), hasValue && !readOnly ?
                                     (0, jsx_runtime_1.jsx)(reqore_1.ReqoreButton, { size: 'small', icon: 'DeleteBinLine', minimal: true, flat: true, fixed: true, intent: 'danger', className: 'options-readfirst-clear', "aria-label": 'Clear value', tooltip: 'Clear value', onClick: confirmClearValue })
-                                    : null, moreMenu, closeExpandedFieldButton] })] }), (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 ?
+                                    : null, moreMenu, closeExpandedFieldButton] })] }), absorbedNodes, (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 ?
                             (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, renderOption(optionName, optionField)] })] }, optionName));
     }
@@ -693,7 +962,6 @@ exports.CompactRow = (0, react_1.memo)(function (_a) {
         : []), true);
     // A hash row reveals its sub-fields as read-only sub-rows under a "view
     // more" disclosure; the row itself still expands the real editor on click.
-    var valueType = (0, readFirst_1.getValueType)(optionField, schema);
     var hashEntries = (!hidden &&
         (valueType === 'hash' || valueType === 'free-hash') &&
         (schema === null || schema === void 0 ? void 0 : schema.ui_type) !== 'schema-definition') ?
@@ -708,6 +976,9 @@ exports.CompactRow = (0, react_1.memo)(function (_a) {
         Array.isArray(optionField === null || optionField === void 0 ? void 0 : optionField.value) &&
         optionField.value.length > 0 &&
         optionField.value.some(function (item) {
+            if ((0, exports.richtextItemText)(item) !== undefined) {
+                return false;
+            }
             var inner = item && typeof item === 'object' && 'value' in item ?
                 item.value
                 : item;
@@ -723,6 +994,18 @@ exports.CompactRow = (0, react_1.memo)(function (_a) {
         valueType === 'code-editor' &&
         typeof (optionField === null || optionField === void 0 ? void 0 : optionField.value) === 'string' &&
         optionField.value.length > 0;
+    // A richtext value that renders as CHIPS is drawn in full by the row itself:
+    // the chips are the value, and the reader is looking straight at it. The
+    // native `title` below would then hover the raw source of the very thing the
+    // chips replace ("[$fsminput:severity] $fsminput:alert_code") — and, because
+    // each chip carries its own Reqore tooltip, hovering one fires BOTH: the chip
+    // popover and the row's browser tooltip, in different places, saying almost
+    // the same thing. Only the popover shows up in a screenshot, which is what
+    // made the pair hard to report.
+    var showsTemplateChips = !hidden &&
+        valueType === 'richtext' &&
+        Array.isArray(optionField === null || optionField === void 0 ? void 0 : optionField.value) &&
+        (0, common_1.richtextToSegments)(optionField.value).some(function (segment) { return segment.kind === 'tag'; });
     // Markdown reads the same way for the same reason: the row itself can only
     // show a line of text, and for markdown that line is the SOURCE — the reader
     // gets `## ` and `**` where the point of the value is what it looks like
@@ -831,7 +1114,7 @@ exports.CompactRow = (0, react_1.memo)(function (_a) {
         (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', className: 'options-readfirst-row-icon' })
         : null;
     var rowSchemaIntentColor = (schema === null || schema === void 0 ? void 0 : schema.intent) ?
-        (_h = theme === null || theme === void 0 ? void 0 : theme.intents) === null || _h === void 0 ? void 0 : _h[schema.intent]
+        (_k = theme === null || theme === void 0 ? void 0 : theme.intents) === null || _k === void 0 ? void 0 : _k[schema.intent]
         : undefined;
     var rowStripeColor = (showStripe ? intentColor : undefined) || rowSchemaIntentColor;
     // Intent stripe on the block ROOT so it spans the field's whole territory:
@@ -846,7 +1129,7 @@ exports.CompactRow = (0, react_1.memo)(function (_a) {
     // boxes — so the dot and the box can never disagree). Hidden (not-yet-added)
     // and dependency-locked rows show no dot (the add/lock affordance speaks for
     // them). worstIntent already folds in schema + validation messages.
-    var cSuccess = (_j = theme === null || theme === void 0 ? void 0 : theme.intents) === null || _j === void 0 ? void 0 : _j.success;
+    var cSuccess = (_l = theme === null || theme === void 0 ? void 0 : theme.intents) === null || _l === void 0 ? void 0 : _l.success;
     var rowStatus = (0, readFirst_1.getReadFirstStatus)({
         empty: empty,
         required: required,
@@ -864,40 +1147,84 @@ exports.CompactRow = (0, react_1.memo)(function (_a) {
                 event.preventDefault();
                 activate(event);
             }
-        } }, clusterHoverProps, { children: [clusterNode, (0, jsx_runtime_1.jsxs)(compactRowStyles_1.StyledLabelBlock, { 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, required ?
+        } }, 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, required ?
                                         (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 })
-                        : null, lineCountNote ?
+                        : 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 })
                         : 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
             // noise -- and a native tooltip holding a few hundred lines is
-            // unreadable anyway. Every other value keeps its hover, which is the
-            // only way to read one that the row had to truncate.
+            // unreadable anyway. A chipped richtext value is the same case: the row
+            // already draws it in full, and its chips carry their own tooltips.
+            // Every other value keeps its hover, which is the only way to read one
+            // that the row had to truncate.
             , { 
                 // 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
                 // noise -- and a native tooltip holding a few hundred lines is
-                // unreadable anyway. Every other value keeps its hover, which is the
-                // only way to read one that the row had to truncate.
+                // unreadable anyway. A chipped richtext value is the same case: the row
+                // already draws it in full, and its chips carry their own tooltips.
+                // Every other value keeps its hover, which is the only way to read one
+                // that the row had to truncate.
                 title: (!empty &&
                     !hidden &&
                     !showCodePreview &&
                     !showMarkdownPreview &&
+                    !showsTemplateChips &&
                     typeof formatted === 'string') ?
                     formatted
-                    : undefined, "$color": empty || hidden ? "".concat(cMuted, "66") : cKey, "$empty": empty || hidden, children: [showMarkdownPreview ? null : ((0, jsx_runtime_1.jsx)("span", { className: 'options-readfirst-valuetext', children: hidden || empty ? '—' : renderReadFirstValue(optionField, schema, formatted) })), 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)("div", { className: 'options-readfirst-info-panel', children: panelMessages.map(renderInfoStrip) })
+                    : undefined, "$color": empty || hidden ? "".concat(cMuted, "66") : cKey, "$empty": empty || hidden, children: [showMarkdownPreview || previewWithSchema ? null : ((0, jsx_runtime_1.jsx)("span", { className: 'options-readfirst-valuetext', children: hidden || empty ? '—' : renderReadFirstValue(optionField, schema, formatted) })), valueReasons.map(function (m, i) { return ((0, jsx_runtime_1.jsx)("span", { className: 'options-readfirst-reason', style: { color: reasonColor(m.intent) }, children: m.content }, "".concat(m.content, "-").concat(i))); }), panelMessages.length ?
+                        (0, jsx_runtime_1.jsx)(reqore_1.ReqoreControlGroup, { className: 'options-readfirst-info-panel', vertical: true, fluid: true, gapSize: 'normal', children: panelMessages.map(renderInfoStrip) })
                         : null, showStructuredPreview ?
                         // The inset lives inside the row now, so a click on a value chip would
                         // bubble to the row's onClick and fire activate() a SECOND time (the
                         // chip's onItemClick already calls it) — toggling the editor shut again.
                         // Stop the bubble here; the chip's own handler still opens the editor.
-                        (0, jsx_runtime_1.jsx)(compactRowStyles_1.StyledRowInset, { className: 'options-readfirst-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-structured', children: (0, jsx_runtime_1.jsx)(StructuredDataView_1.StructuredDataView, { value: optionField === null || optionField === void 0 ? void 0 : optionField.value, collapsibleRoot: false, showTypes: showFieldTypes, defaultExpandDepth: 2, onItemClick: function () { return activate(); } }) }) }) })
+                        (0, jsx_runtime_1.jsx)(compactRowStyles_1.StyledRowInset, { className: 'options-readfirst-inset', onClick: function (e) { return e.stopPropagation(); }, children: (0, jsx_runtime_1.jsx)(reqore_1.ReqoreCollapsibleContent
+                            // The schema view spends more height per datum than a data tree
+                            // does — a labelled row rather than a packed chip — but there is
+                            // far less of it to read, so it gets enough room to show a
+                            // couple of complete items instead of fading out mid-row. A tree
+                            // of unknown depth keeps the tighter cap.
+                            , { 
+                                // The schema view spends more height per datum than a data tree
+                                // does — a labelled row rather than a packed chip — but there is
+                                // far less of it to read, so it gets enough room to show a
+                                // couple of complete items instead of fading out mid-row. A tree
+                                // of unknown depth keeps the tighter cap.
+                                maxCollapsedHeight: previewWithSchema ? 140 : 96, buttonProps: { className: 'options-readfirst-viewmore' }, children: (0, jsx_runtime_1.jsx)("div", { className: 'options-readfirst-structured', children: previewWithSchema ?
+                                        // The form already knows this value's shape, names and
+                                        // choices, so the preview says it rather than making the
+                                        // reader decode it: "Scheme Type — Default RBAC", not a data
+                                        // tree announcing "Object · 1 field" over `type: default`.
+                                        (0, jsx_runtime_1.jsx)(SchemaDataView_1.SchemaDataView, { value: optionField === null || optionField === void 0 ? void 0 : optionField.value, schema: previewArgSchema, showTypes: showFieldTypes, colors: {
+                                                key: cKey,
+                                                muted: cMuted,
+                                                // Deliberately stronger than `cDivider`. That tier is for
+                                                // decorative hairlines between rows, where being nearly
+                                                // invisible is the point. This rule is load-bearing — it
+                                                // is the only thing saying which fields belong to which
+                                                // numbered item — so it gets the muted tier at partial
+                                                // alpha: quiet, but actually visible.
+                                                border: "".concat(cMuted, "66"),
+                                                // The identity accent for each item's heading.
+                                                //
+                                                // `custom1` first: BRAND_DESIGN §1 says apps may register
+                                                // their own named intents and reference them like the
+                                                // built-ins, and that is where a product's own accent
+                                                // 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
+                                                // rather than one this library picked.
+                                                accent: ((_m = theme === null || theme === void 0 ? void 0 : theme.intents) === null || _m === void 0 ? void 0 : _m.custom1) || cInfo,
+                                            }, onItemClick: function () { return activate(); } })
+                                        : (0, jsx_runtime_1.jsx)(StructuredDataView_1.StructuredDataView, { value: optionField === null || optionField === void 0 ? void 0 : optionField.value, collapsibleRoot: false, showTypes: showFieldTypes, defaultExpandDepth: 2, onItemClick: function () { return activate(); } }) }) }) })
                         : null, showCodePreview ?
                         (0, jsx_runtime_1.jsx)(compactRowStyles_1.StyledRowInset, { className: 'options-readfirst-inset options-readfirst-code-inset', onClick: function (e) { return e.stopPropagation(); }, children: (0, jsx_runtime_1.jsx)(reqore_1.ReqoreCollapsibleContent, { maxCollapsedHeight: 96, buttonProps: { className: 'options-readfirst-viewmore' }, children: codePreviewRenderer ?
                                     codePreviewRenderer({