@qoretechnologies/reqraft 0.10.46-pr.95.ge595a13 → 0.10.46

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

@@ -93,7 +93,7 @@ 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");
@@ -178,6 +178,25 @@ 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, _l, _m;
@@ -239,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 = {
@@ -281,14 +320,14 @@ exports.CompactRow = (0, react_1.memo)(function (_a) {
             // 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.jsxs)(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));
-                    }), (0, jsx_runtime_1.jsx)(codeSize_1.ReqraftCodeSizeTag, { code: field.value })] }));
+            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
@@ -322,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
@@ -341,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);
                     }) }));
             }
@@ -635,7 +709,7 @@ exports.CompactRow = (0, react_1.memo)(function (_a) {
     // 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, 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) {
+        (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();
             } })
@@ -702,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
@@ -770,7 +849,11 @@ exports.CompactRow = (0, react_1.memo)(function (_a) {
             var absorbedField = availableOptions === null || availableOptions === void 0 ? void 0 : availableOptions[absorbedName];
             if (!absorbedField)
                 return null;
-            return ((0, jsx_runtime_1.jsxs)(compactRowStyles_1.StyledAbsorbedField, { className: 'options-readfirst-absorbed', children: [(0, jsx_runtime_1.jsx)(compactRowStyles_1.StyledAbsorbedLabel, { size: 'small', effect: { opacity: 0.6 }, children: getAbsorbedLabel(absorbedName) }), (0, jsx_runtime_1.jsx)("div", { style: { minWidth: 0, flex: 1 }, children: renderOption(absorbedName, absorbedField, 'small', true) })] }, absorbedName));
+            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;
@@ -778,12 +861,31 @@ exports.CompactRow = (0, react_1.memo)(function (_a) {
     // 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();
@@ -792,7 +894,7 @@ 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.jsxs)("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();
                                 // Escape discards. It used to call `collapse()`, which closed
@@ -801,9 +903,9 @@ exports.CompactRow = (0, react_1.memo)(function (_a) {
                                 // without saving" was the quietest way to commit.
                                 cancelEdit();
                             }
-                        }, children: [absorbedNodes, valueType === 'code-editor' && typeof (optionField === null || optionField === void 0 ? void 0 : optionField.value) === 'string' ?
-                                (0, jsx_runtime_1.jsx)("div", { className: 'options-readfirst-editing-summary', children: (0, jsx_runtime_1.jsx)(codeSize_1.ReqraftCodeSizeTag, { code: optionField.value }) })
-                                : null, renderOption(optionName, optionField, 'small', true)] }), (0, jsx_runtime_1.jsxs)(compactRowStyles_1.StyledRowActions, { children: [draftChip, editRowRevertButton, cancelEditButton, 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
@@ -852,14 +954,38 @@ exports.CompactRow = (0, react_1.memo)(function (_a) {
                                     return ((0, jsx_runtime_1.jsx)(reqore_1.ReqoreButton, __assign({ size: 'small', minimal: true, flat: true, fixed: true, className: 'options-readfirst-card-action' }, actionProps, { children: actionLabel }), index));
                                 }), inlineOptionActions.map(function (action, index) {
                                     return renderInjectedOptionAction(action, index);
-                                }), hasValue && !readOnly ?
+                                }), editRowRevertButton, cancelEditButton, hasValue && !readOnly ?
                                     (0, jsx_runtime_1.jsx)(reqore_1.ReqoreButton, { size: 'small', icon: 'DeleteBinLine', minimal: true, flat: true, fixed: true, intent: 'danger', className: 'options-readfirst-clear', "aria-label": 'Clear value', tooltip: 'Clear value', onClick: confirmClearValue })
-                                    : null, moreMenu, closeExpandedFieldButton] })] }), absorbedNodes, (0, jsx_runtime_1.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));
+                                    : null, moreMenu, closeExpandedFieldButton] })] }), absorbedNodes, (0, jsx_runtime_1.jsx)("div", { style: { display: 'contents' }, onKeyDown: function (event) {
+                        if (event.key === 'Escape') {
+                            event.stopPropagation();
+                            cancelEdit();
+                        }
+                    }, children: (0, jsx_runtime_1.jsxs)(FocusedEditing_1.FocusedEditing, { isFullscreen: focusedEditing === optionName, onClose: function () { return setFocusedEditing(undefined); }, description: (schema === null || schema === void 0 ? void 0 : schema.display_name) || optionName, children: [focusedEditing === optionName ?
+                                (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));
     }
     var formatted = (0, readFirst_1.formatOptionValue)(optionField, schema);
     var empty = formatted === '';
+    // A field with no value of its own but a declared default is not simply
+    // unanswered: the default is what the server will use, and an em-dash says
+    // the opposite. Render the default in its place, through the same formatter
+    // so a list or an enum reads the way a real value would.
+    //
+    // This does NOT make the field count as answered. `empty` stays true, so the
+    // row keeps the dimmed italic treatment that distinguishes a default from an
+    // answer, and bucketing — which reads the field's own value, not this — still
+    // files it under Optional and leaves it behind the collapse.
+    //
+    // `hidden` is included deliberately: it marks a field the form has not added
+    // yet, which is the case that benefits most — the row is the author's first
+    // sight of the field, and the default is what it will contribute if left
+    // alone. Both flags only ever route to the em-dash below, so there is no
+    // real value being displaced.
+    var defaultValue = hidden || empty ? (0, common_1.getDefaultValue)(schema) : undefined;
+    var formattedDefault = defaultValue === undefined || defaultValue === null ?
+        ''
+        : (0, readFirst_1.formatOptionValue)(__assign(__assign({}, optionField), { value: defaultValue }), schema);
     // Inline reasons shown on the value line: validation / dependency / one-of /
     // default-value hints, plus a read-only covered-by note (editable covered rows
     // carry that in their chip instead).
@@ -882,6 +1008,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;
@@ -897,6 +1026,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
@@ -930,32 +1071,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)
@@ -1038,34 +1189,41 @@ 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 ?
+                            formattedDefault || '—'
+                            : 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