@qoretechnologies/reqraft 0.10.41-pr.95.g294e5aa → 0.10.41

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

@@ -93,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");
@@ -105,6 +106,7 @@ 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");
@@ -176,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, _k;
-    var optionName = _a.optionName, optionField = _a.optionField, _l = _a.hidden, hidden = _l === void 0 ? false : _l, _m = _a.clustered, clustered = _m === void 0 ? false : _m, _o = _a.clusterFirst, clusterFirst = _o === void 0 ? false : _o, _p = _a.clusterLast, clusterLast = _p === void 0 ? false : _p;
+    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; });
@@ -229,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 = {
@@ -267,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
@@ -303,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
@@ -322,6 +388,33 @@ 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: collapseSummaryBreaks(segment.text) }, index);
+                    }) }));
+            }
+        }
+        // An expression summarises to one line of text, and a template reference
+        // inside it printed as its own raw token — `$data:{…}` renders a value as
+        // code where a name belongs. Chip every reference here, on the richtext
+        // branch's pattern above, so the wrapper (`trim(`…`)`) still reads as the
+        // text it is while the reference reads as a name.
+        //
+        // Unconditionally: a surface with no catalogue (the Automation Hub
+        // template preview never fetches one) still shows the reference's own
+        // path, which is the point — a conditional chip is no chip at all
+        // exactly where the raw token looks worst.
+        if ((field === null || field === void 0 ? void 0 : field.is_expression) && formatted) {
+            var segments = (0, templates_1.splitTemplateTokens)(formatted);
+            var named = segments.map(function (segment) {
+                return segment.kind === 'token' ? __assign(__assign({}, segment), (0, templates_1.describeTemplateReference)(templates, segment.text)) : segment;
+            });
+            if (named.some(function (segment) { return segment.kind === 'token'; })) {
+                return ((0, jsx_runtime_1.jsx)("span", { style: __assign(__assign({}, wrapStyle), { gap: 4, overflow: 'hidden' }), children: named.map(function (segment, index) {
+                        var _a;
+                        return segment.kind === 'token' ?
+                            (0, jsx_runtime_1.jsx)(reqore_1.ReqoreTag, __assign({ size: 'tiny', 
+                                // Inherit the row's font size so the chip shares a baseline
+                                // with the text around it — see the richtext branch above.
+                                style: { fontSize: 'inherit' }, icon: 'ExchangeDollarLine', label: segment.label, tooltip: segment.text }, (0, templates_1.getTemplateTagStyle)((_a = segment.item) === null || _a === void 0 ? void 0 : _a.metadata)), index)
                             : (0, jsx_runtime_1.jsx)("span", { style: { whiteSpace: 'pre' }, children: segment.text }, index);
                     }) }));
             }
@@ -344,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 _q = 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 = _q[0], menuOptionActions = _q[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;
@@ -462,6 +555,38 @@ 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
@@ -479,7 +604,7 @@ exports.CompactRow = (0, react_1.memo)(function (_a) {
     // 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 _r = react_1.default.useState(undefined), resolvedArgSchema = _r[0], setResolvedArgSchema = _r[1];
+    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
@@ -515,6 +640,18 @@ exports.CompactRow = (0, react_1.memo)(function (_a) {
     }, [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;
@@ -560,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 ⓘ.
@@ -618,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
@@ -632,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).
@@ -673,12 +836,56 @@ 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 count
+    // 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.
+    //
+    // It is a plain monospaced note rather than a tag, and deliberately the same
+    // one `lineCountNote` renders: both answer "how big is this field's value?"
+    // in the same corner of the same column, so stating one as a chip and the
+    // other as text made two spellings of one idea.
+    var codeSizeNode = valueType === 'code-editor' &&
+        typeof (optionField === null || optionField === void 0 ? void 0 : optionField.value) === 'string' &&
+        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)) }));
+        })()
+        : 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();
@@ -687,12 +894,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
@@ -711,10 +924,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'
@@ -743,7 +956,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));
     }
@@ -757,7 +970,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') ?
@@ -772,6 +984,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;
@@ -787,6 +1002,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
@@ -820,32 +1047,42 @@ exports.CompactRow = (0, react_1.memo)(function (_a) {
     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;
-    // Disabled rows (schema flag or unmet deps) can't open — a lock + reason
-    // renders instead. Form-level readOnly still opens in view mode (Close).
+    // 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
+    // was handed `readonly` alone and rendered an editable control for a value
+    // no answer of the user's can change.
+    var fieldReadonly = !!(schema === null || schema === void 0 ? void 0 : schema.readonly);
+    // Disabled rows (schema flag, readonly, or unmet deps) can't open — a lock +
+    // reason renders instead. Form-level readOnly still opens in view mode (Close).
     var fieldDisabled = !hidden &&
         !readOnly &&
         (!!(schema === null || schema === void 0 ? void 0 : schema.disabled) ||
+            fieldReadonly ||
             !(0, validations_1.hasAllDependenciesFullfilled)(schema === null || schema === void 0 ? void 0 : schema.depends_on, availableOptions, options || {}));
-    var fieldDisabledReason = (schema === null || schema === void 0 ? void 0 : schema.disabled) ? 'This field is disabled' : 'Disabled — dependencies are not fulfilled';
+    var fieldDisabledReason = (schema === null || schema === void 0 ? void 0 : schema.disabled) ? 'This field is disabled'
+        : fieldReadonly ? 'Set by Qorus — not editable'
+            : 'Disabled — dependencies are not fulfilled';
     // Dependency contract: top-level entries must ALL hold; a nested array
-    // means ANY of its entries; `name=value` requires that exact value.
-    var dependencyEntries = fieldDisabled && !(schema === null || schema === void 0 ? void 0 : schema.disabled) ?
+    // means ANY of its entries; `name=value` requires that exact value, and
+    // `name!=value` requires any other answer. Parsed by the same helper the
+    // predicate uses, so the lock cannot describe a rule the form does not apply.
+    var dependencyEntries = fieldDisabled && !(schema === null || schema === void 0 ? void 0 : schema.disabled) && !fieldReadonly ?
         ((schema === null || schema === void 0 ? void 0 : schema.depends_on) || [])
         : [];
     var describeDependency = function (dep) {
         var _a, _b;
-        var eqIndex = dep.indexOf('=');
-        var depName = eqIndex === -1 ? dep : dep.slice(0, eqIndex);
-        var expected = eqIndex === -1 ? undefined : dep.slice(eqIndex + 1);
+        var _c = (0, validations_1.parseDependency)(dep), depName = _c.name, op = _c.op, expected = _c.value;
         var depLabel = ((_a = options === null || options === void 0 ? void 0 : options[depName]) === null || _a === void 0 ? void 0 : _a.display_name) || depName;
         var depValue = (_b = availableOptions === null || availableOptions === void 0 ? void 0 : availableOptions[depName]) === null || _b === void 0 ? void 0 : _b.value;
         return {
             name: depName,
             exists: !!(options === null || options === void 0 ? void 0 : options[depName]),
-            label: expected === undefined ? depLabel : "".concat(depLabel, " = ").concat(expected),
-            fulfilled: expected === undefined ?
-                !(0, readFirst_1.isOptionValueEmpty)(depValue)
-                : depValue != null && String(depValue) === expected,
+            label: !op ? depLabel : "".concat(depLabel, " ").concat(op === '=' ? '=' : '≠', " ").concat(expected),
+            fulfilled: !op ? !(0, readFirst_1.isOptionValueEmpty)(depValue)
+                : depValue == null ? false
+                    : op === '=' ? String(depValue) === expected
+                        : String(depValue) !== expected,
         };
     };
     var depHighlightNames = (0, flatten_1.default)(dependencyEntries)
@@ -895,7 +1132,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:
@@ -910,7 +1147,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,
@@ -928,34 +1165,39 @@ 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 || 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)("div", { className: 'options-readfirst-info-panel', children: panelMessages.map(renderInfoStrip) })
+                    : undefined, "$color": empty || hidden ? "".concat(cMuted, "66") : cKey, "$empty": empty || hidden, children: [showMarkdownPreview || (previewWithSchema && showStructuredPreview) ? 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
@@ -998,7 +1240,7 @@ exports.CompactRow = (0, react_1.memo)(function (_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: ((_k = theme === null || theme === void 0 ? void 0 : theme.intents) === null || _k === void 0 ? void 0 : _k.custom1) || cInfo,
+                                                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 ?