@qoretechnologies/reqraft 0.10.54 → 0.10.55-pr.115.g37abdfc

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

@@ -96,6 +96,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.CompactRow = exports.richtextItemText = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
 var reqore_1 = require("@qoretechnologies/reqore");
+var rowMenuContext_1 = require("./rowMenuContext");
 var optionActions_1 = require("./optionActions");
 var flatten_1 = __importDefault(require("lodash/flatten"));
 var isEqual_1 = __importDefault(require("lodash/isEqual"));
@@ -105,7 +106,9 @@ var use_context_selector_1 = require("use-context-selector");
 var validations_1 = require("../../../helpers/validations");
 var templates_1 = require("../../../helpers/templates");
 var common_1 = require("../../../helpers/common");
+var templateText_1 = require("../../../helpers/templateText");
 var ReadOnlyTemplateTag_1 = require("../fields/template/ReadOnlyTemplateTag");
+var TemplateText_1 = require("../fields/template/TemplateText");
 var codeSize_1 = require("../../codeSize");
 var Description_1 = require("../../Description");
 var markdownRendererContext_1 = require("../../Description/markdownRendererContext");
@@ -113,10 +116,13 @@ var FocusedEditing_1 = require("../../FocusedEditing");
 var compactRowContext_1 = require("./compactRowContext");
 var compactRowStyles_1 = require("./compactRowStyles");
 var OptionFieldMessages_1 = require("./OptionFieldMessages");
+var rowFocus_1 = require("./rowFocus");
+var rowOpenPicker_1 = require("./rowOpenPicker");
 var SchemaDataView_1 = require("./_structuredData/SchemaDataView");
 var fetch_1 = require("../../../utils/fetch");
 var readFirst_1 = require("./readFirst");
 var StructuredDataView_1 = require("./_structuredData/StructuredDataView");
+var DpqlRendering_1 = require("../expressions/DpqlRendering");
 /**
  * Does this markdown value have more document in it than one row can show?
  *
@@ -170,11 +176,6 @@ var COMPACT_SINGLE_VALUE_TYPES = new Set([
     'timeout',
     'method-name',
 ]);
-// How many consumer-injected actions may sit inline in a row before the rest
-// overflow into the row's menu. A row's action slot shares space with the
-// value; an unbounded button strip would squeeze the value out, and the
-// consumer controls how many actions it injects.
-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.
@@ -199,8 +200,8 @@ var richtextItemText = function (item) {
 exports.richtextItemText = richtextItemText;
 exports.CompactRow = (0, react_1.memo)(function (_a) {
     var _b;
-    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 _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q;
+    var optionName = _a.optionName, optionField = _a.optionField, _r = _a.hidden, hidden = _r === void 0 ? false : _r, _s = _a.clustered, clustered = _s === void 0 ? false : _s, _t = _a.clusterFirst, clusterFirst = _t === void 0 ? false : _t, _u = _a.clusterLast, clusterLast = _u === void 0 ? false : _u, 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; });
@@ -221,7 +222,6 @@ exports.CompactRow = (0, react_1.memo)(function (_a) {
     var isExpanded = (0, use_context_selector_1.useContextSelector)(compactRowContext_1.CompactRowContext, function (v) {
         return v.expandedOptions.includes(optionName);
     });
-    var autoFocusNameRef = (0, use_context_selector_1.useContextSelector)(compactRowContext_1.CompactRowContext, function (v) { return v.autoFocusNameRef; });
     var isHighlighted = (0, use_context_selector_1.useContextSelector)(compactRowContext_1.CompactRowContext, function (v) {
         return v.highlightedOptions.includes(optionName);
     });
@@ -231,6 +231,38 @@ exports.CompactRow = (0, react_1.memo)(function (_a) {
     var setHighlightedOptions = (0, use_context_selector_1.useContextSelector)(compactRowContext_1.CompactRowContext, function (v) { return v.setHighlightedOptions; });
     var setFocusedEditing = (0, use_context_selector_1.useContextSelector)(compactRowContext_1.CompactRowContext, function (v) { return v.setFocusedEditing; });
     var readRowHeights = (0, use_context_selector_1.useContextSelector)(compactRowContext_1.CompactRowContext, function (v) { return v.readRowHeights; });
+    var onReadOnlyActivate = (0, use_context_selector_1.useContextSelector)(compactRowContext_1.CompactRowContext, function (v) { return v.onReadOnlyActivate; });
+    /**
+     * The floor recorded when a row is opened lasts until the author changes
+     * something.
+     *
+     * `activate()` measures the row as it was READ and pins that as the
+     * editing row's `min-height`, so opening a row cannot yank the content
+     * below it up under the pointer. That is right for the transition and
+     * wrong for the rest of the session: a row that was tall because it
+     * carried a warning keeps that height after the author fixes the very
+     * thing the warning was about, leaving a large empty box where the
+     * explanation used to be — reported as "the chip is removed, but the
+     * vertical size of the option remains the same".
+     *
+     * Released on the first change to the value, which is exactly the moment
+     * the author has acted and the row should settle to what it now holds.
+     * Nothing is yanked by that: the author caused it and is looking at it.
+     *
+     * Keyed on a STRING rather than the value itself. A form value is often a
+     * fresh object on every render (`{source, value}` for a reference), so a
+     * dependency on its identity would drop the floor on the first re-render
+     * and the transition it exists for would never be smoothed at all.
+     */
+    var valueKey = (optionField === null || optionField === void 0 ? void 0 : optionField.value) === null || typeof (optionField === null || optionField === void 0 ? void 0 : optionField.value) !== 'object' ?
+        String(optionField === null || optionField === void 0 ? void 0 : optionField.value)
+        : JSON.stringify(optionField === null || optionField === void 0 ? void 0 : optionField.value);
+    /* `valueKey` alone, deliberately - see above. No eslint-disable: this repo
+       does not load `react-hooks`, so a suppression for a rule that is not
+       there is itself an error, and the pre-push lint refuses the push. */
+    react_1.default.useEffect(function () {
+        delete readRowHeights.current[optionName];
+    }, [valueKey]);
     var originalValue = (0, use_context_selector_1.useContextSelector)(compactRowContext_1.CompactRowContext, function (v) { return v.originalValue; });
     var availableOptions = (0, use_context_selector_1.useContextSelector)(compactRowContext_1.CompactRowContext, function (v) { return v.availableOptions; });
     var requiredGroupsInfo = (0, use_context_selector_1.useContextSelector)(compactRowContext_1.CompactRowContext, function (v) { return v.requiredGroupsInfo; });
@@ -258,37 +290,43 @@ 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, 
     // An editable row gets one line and an ellipsis — its value line is a
     // summary you click to open. A read-only row is the only rendering the
     // value gets, so it wraps.
     full) {
+        var _a;
         if (full === void 0) { full = false; }
         var valueType = (0, readFirst_1.getValueType)(field, schema);
         var wrapStyle = __assign({ display: 'inline-flex', alignItems: 'center', gap: 6, minWidth: 0, maxWidth: '100%' }, (full ? { flexWrap: 'wrap' } : {}));
         var textStyle = full ?
             { whiteSpace: 'pre-wrap', overflowWrap: 'anywhere' }
             : { overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' };
+        /* A row has to SAY when its value is an expression.
+        
+           Reported from the live IDE: an author accepted the *Use as expression*
+           offer on one field and not on the other, and the two rows read exactly
+           the same - `1 + 2` and `2 + 1`, both plain text - so there was no way
+           to tell which had been converted. The assertion then compared the
+           string `"1 + 2"` against the number `3` and the author had no way to
+           see why.
+        
+           The same Σ the expression editor uses, so the mark means the same thing
+           wherever it appears. */
+        var withExpressionMarker = function (rendered) {
+            if (!(field === null || field === void 0 ? void 0 : field.is_expression)) {
+                return rendered;
+            }
+            return ((0, jsx_runtime_1.jsxs)("span", { style: __assign(__assign({}, wrapStyle), { gap: 4 }), children: [(0, jsx_runtime_1.jsx)(reqore_1.ReqoreIcon, { icon: 'Functions', size: 'tiny', 
+                        /* A stable hook: reqore renders every icon as a bare
+                           `.reqore-icon`, so without this there is nothing to select the
+                           mark by — in a test or in a consumer's stylesheet. */
+                        className: 'reqraft-expression-marker', 
+                        /* Opacity through `effect`, which is how this repo dims a reqore
+                           component (see the card's `short_desc` below); only the flex
+                           rule, which reqore has no prop for, stays inline. */
+                        effect: { opacity: 0.7 }, style: { flexShrink: 0 }, tooltip: 'This value is an expression' }), rendered] }));
+        };
         if (valueType === 'rgbcolor') {
             var swatch = (0, readFirst_1.colorToCss)(field === null || field === void 0 ? void 0 : field.value);
             return ((0, jsx_runtime_1.jsxs)("span", { style: swatch ? __assign(__assign({}, wrapStyle), { 
@@ -307,6 +345,34 @@ exports.CompactRow = (0, react_1.memo)(function (_a) {
             var truthy = (field === null || field === void 0 ? void 0 : field.value) === true || (field === null || field === void 0 ? void 0 : field.value) === 'true';
             return ((0, jsx_runtime_1.jsx)(reqore_1.ReqoreTag, { size: 'small', minimal: true, intent: truthy ? 'success' : 'danger', label: formatted }));
         }
+        // A test's cases read as CHIPS here, the same as the names in the table
+        // this row opens (`CasesTable`, qorus-ide). `test-cases` is a
+        // renderer-only ui_type, so it reached none of the branches above and
+        // fell through to the generic summary, which flattens the array of case
+        // hashes to a comma-joined string — "case_1, resolved_expected_values".
+        // A case name is an identifier the author types into `$.` references and
+        // skip conditions, and a chip is how the rest of the product writes an
+        // identifier down; the table already agreed, so the collapsed row was the
+        // only surface still printing them as prose.
+        //
+        // `intent` is a FILL, which is what a tag is — the hazard the other
+        // branches warn about is only ever using an intent as a TEXT colour.
+        //
+        // Falls through to the plain summary unless EVERY entry yields a name: a
+        // partly-chipped row would read as though the unnamed cases were missing.
+        if (valueType === 'test-cases' && Array.isArray(field === null || field === void 0 ? void 0 : field.value)) {
+            var caseNames = field.value.map(function (item) {
+                var name = item === null || item === void 0 ? void 0 : item.name;
+                return typeof name === 'string' ? name.trim() : '';
+            });
+            if (caseNames.length > 0 && caseNames.every(function (name) { return name !== ''; })) {
+                return ((0, jsx_runtime_1.jsx)(reqore_1.ReqoreControlGroup, { gapSize: 'tiny', verticalAlign: 'center', 
+                    // An editable row is ONE line: further chips clip with the row
+                    // instead of growing it. A read-only row is the only rendering
+                    // the value gets, so it wraps and shows every case.
+                    wrap: full, style: full ? undefined : { minWidth: 0, overflow: 'hidden' }, children: caseNames.map(function (name, index) { return ((0, jsx_runtime_1.jsx)(reqore_1.ReqoreTag, { className: 'options-readfirst-case-tag', size: 'small', minimal: true, intent: 'info', label: name }, "".concat(name, "-").concat(index))); }) }));
+            }
+        }
         // Code-editor read summary: replace the truncated string with a chip
         // showing line count + character count. The actual code renders below
         // the row as a monospace `<pre>` inside a `ReqoreCollapsibleContent` —
@@ -350,13 +416,35 @@ exports.CompactRow = (0, react_1.memo)(function (_a) {
         if (allowedImage) {
             return ((0, jsx_runtime_1.jsxs)("span", { style: wrapStyle, children: [(0, jsx_runtime_1.jsx)(reqore_1.ReqoreIcon, { image: allowedImage, size: '16px', style: { flexShrink: 0 } }), (0, jsx_runtime_1.jsx)("span", { style: textStyle, children: formatted })] }));
         }
+        // The same, for an option whose mark is an ICON rather than a logo. Only
+        // images were drawn here, so a list whose entries are told apart by their
+        // icon — every interface kind is a bare word, `Service`, `Job`, `Qog` —
+        // showed the mark while choosing and lost it the moment the row went
+        // read-only, which is where a reader spends most of their time.
+        var allowedIcon = (0, readFirst_1.getAllowedValueIcon)(field === null || field === void 0 ? void 0 : field.value, schema);
+        if (allowedIcon) {
+            return ((0, jsx_runtime_1.jsxs)("span", { style: wrapStyle, children: [(0, jsx_runtime_1.jsx)(reqore_1.ReqoreIcon, { icon: allowedIcon, size: '16px', style: { flexShrink: 0 } }), (0, jsx_runtime_1.jsx)("span", { style: textStyle, children: formatted })] }));
+        }
         // Template value ($local:…): the read-only template picker — the SAME chip
         // TemplateField renders when disabled, so a template reads identically here
         // and in the editor (qorus-ide intent scheme: info / qorus purple).
+        //
+        // A field may also declare templates OF ITS OWN, and a value drawn from
+        // that list is just as much a template even when it does not look like
+        // `$name:key` — `isValueTemplate` is a guess at the shape of the built-in
+        // grammar, and a host's own grammar (a Qorus test's `$.order.id`) fails it.
+        // Asking the field's list whether it CONTAINS the value settles it without
+        // guessing at syntax, and hands back the entry whose label the chip prints,
+        // so a reference reads as the name it was chosen by here as well as in the
+        // editor rather than as a raw path.
+        var ownTemplates = (_a = schema === null || schema === void 0 ? void 0 : schema.templates) !== null && _a !== void 0 ? _a : templates;
+        // The grammar the field declares its references in, when it speaks one of
+        // its own — the same schema key its rich-text editor is given.
+        var templateGrammar = schema === null || schema === void 0 ? void 0 : schema.templateToken;
         if (typeof (field === null || field === void 0 ? void 0 : field.value) === 'string' &&
             !field.is_expression &&
-            (0, templates_1.isValueTemplate)(field.value)) {
-            return (0, jsx_runtime_1.jsx)(ReadOnlyTemplateTag_1.ReadOnlyTemplateTag, { value: field.value, templates: templates, size: 'small' });
+            ((0, templates_1.isValueTemplate)(field.value) || !!(0, templates_1.findTemplate)(ownTemplates !== null && ownTemplates !== void 0 ? ownTemplates : {}, field.value))) {
+            return (0, jsx_runtime_1.jsx)(ReadOnlyTemplateTag_1.ReadOnlyTemplateTag, { value: field.value, templates: ownTemplates, size: 'small' });
         }
         // A LIST whose elements are rich-text envelopes is a list of strings, so it
         // reads as those strings. Without this the row fell through to the generic
@@ -375,49 +463,38 @@ exports.CompactRow = (0, react_1.memo)(function (_a) {
         if (valueType === 'richtext' && Array.isArray(field === null || field === void 0 ? void 0 : field.value)) {
             var segments = (0, common_1.richtextToSegments)(field.value);
             if (segments.some(function (segment) { return segment.kind === 'tag'; })) {
-                return ((0, jsx_runtime_1.jsx)("span", { style: __assign(__assign({}, wrapStyle), { gap: 4, overflow: 'hidden' }), children: segments.map(function (segment, index) {
-                        var _a;
-                        return segment.kind === 'tag' ?
-                            (0, jsx_runtime_1.jsx)(reqore_1.ReqoreTag, __assign({ size: 'tiny', 
-                                // The chip's label has to be the same size as the prose it is
-                                // embedded in. The wrapper centres boxes, so two different text
-                                // sizes centred against each other cannot share a baseline, and
-                                // the chips visibly float above the words. Inheriting the row's
-                                // 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: full ? 'pre-wrap' : 'pre' }, children: full ? segment.text : collapseSummaryBreaks(segment.text) }, index);
-                    }) }));
+                return (0, jsx_runtime_1.jsx)(TemplateText_1.TemplateText, { segments: segments, templates: ownTemplates, full: full });
             }
         }
-        // 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.
+        // An expression reads as DPQL wherever it is shown without being edited:
+        // the same rendering its Explain panel and Preview use — monospace,
+        // coloured by the language server, template references as chips — so a
+        // collapsed row and the editor it opens never disagree about what the
+        // value looks like. See `DpqlRendering`.
         if ((field === null || field === void 0 ? void 0 : field.is_expression) && formatted) {
-            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: full ? 'pre-wrap' : 'pre' }, children: segment.text }, index);
-                    }) }));
-            }
+            return withExpressionMarker((0, jsx_runtime_1.jsx)("span", { style: __assign({ minWidth: 0, flex: '1 1 auto' }, (full ? {} : { overflow: 'hidden' })), children: (0, jsx_runtime_1.jsx)(DpqlRendering_1.DpqlRendering, { text: formatted, templates: ownTemplates }) }));
         }
-        return full ? (0, jsx_runtime_1.jsx)("span", { style: textStyle, children: formatted }) : formatted;
+        /* A value that MENTIONS a reference rather than being one.
+        
+           The branch above answers "is this value a template?", and a predicate is
+           not: `$._case.mode != 'simulate'` is a comparison the author wrote with a
+           reference inside it. So it fell all the way through to the plain string
+           and the row printed the engine's own spelling of a value the author had
+           picked by name — the one thing the template mechanism exists to stop.
+           Reported against the Skip-when field of a test case, where the list
+           above the drawer already named it and the drawer contradicted it.
+        
+           Drawn from `formatted` rather than from the raw value, so everything the
+           formatter already did — a joined list, a sensitive value's dots — still
+           holds, and only the references inside the resulting line become chips.
+           The author's own text around them survives exactly as typed. */
+        var templateSegments = typeof formatted === 'string' && formatted ?
+            (0, templateText_1.templateTextSegments)(formatted, ownTemplates, templateGrammar)
+            : [];
+        if (templateSegments.some(function (segment) { return segment.kind === 'tag'; })) {
+            return withExpressionMarker((0, jsx_runtime_1.jsx)(TemplateText_1.TemplateText, { segments: templateSegments, templates: ownTemplates, full: full }));
+        }
+        return withExpressionMarker(full ? (0, jsx_runtime_1.jsx)("span", { style: textStyle, children: formatted }) : formatted);
     };
     var schema = options === null || options === void 0 ? void 0 : options[optionName];
     var label = (schema === null || schema === void 0 ? void 0 : schema.display_name) || optionName;
@@ -431,33 +508,9 @@ exports.CompactRow = (0, react_1.memo)(function (_a) {
             : [];
     }, [availableOptions === null || availableOptions === void 0 ? void 0 : availableOptions[optionName], optionActions, optionName, schema]);
     // Which injected actions stay as inline buttons, and which move into the
-    // overflow menu. Everything collapses on touch / narrow viewports — 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 _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 = _s[0], menuOptionActions = _s[1];
-    var injectedOptionActionMenuItems = react_1.default.useMemo(function () {
-        return menuOptionActions.map(function (action, index) {
-            var _a, _b;
-            return ({
-                // A panel action labels itself with `label`, but an icon-only one
-                // (the IDE's AI-assist button) carries its name in the tooltip —
-                // a menu row has no hover affordance to fall back on.
-                label: (_b = (_a = action.label) !== null && _a !== void 0 ? _a : action.tooltip) !== null && _b !== void 0 ? _b : "Action ".concat(index + 1),
-                icon: action.icon,
-                intent: action.intent,
-                disabled: action.disabled,
-                onClick: function () { var _a; return (_a = action.onClick) === null || _a === void 0 ? void 0 : _a.call(action); },
-            });
-        });
-    }, [menuOptionActions]);
+    // overflow menu — see `splitOptionActions`.
+    var _v = react_1.default.useMemo(function () { return (0, optionActions_1.splitOptionActions)(injectedOptionActions, !!collapseOptionActions); }, [collapseOptionActions, injectedOptionActions]), inlineOptionActions = _v[0], menuOptionActions = _v[1];
+    var injectedOptionActionMenuItems = react_1.default.useMemo(function () { return menuOptionActions.map(optionActions_1.optionActionAsMenuItem); }, [menuOptionActions]);
     var renderInjectedOptionAction = function (action, index, size) {
         if (size === void 0) { size = 'small'; }
         // `show` drives visibility here instead of reaching the DOM. The classic
@@ -486,7 +539,22 @@ exports.CompactRow = (0, react_1.memo)(function (_a) {
     var changed = !hidden && !readOnly && hasOptionChanged(optionField === null || optionField === void 0 ? void 0 : optionField.value, optionName);
     // "Has a value" = set to anything non-empty. Drives the edit-row Clear
     // button and the cluster node's filled state (see `memberSet`).
-    var hasValue = (optionField === null || optionField === void 0 ? void 0 : optionField.value) !== undefined && (optionField === null || optionField === void 0 ? void 0 : optionField.value) !== null && (optionField === null || optionField === void 0 ? void 0 : optionField.value) !== '';
+    /* "Is there anything to clear?" — this predicate has exactly one job, and
+       both of its uses are the Clear-value button.
+    
+       An empty list is not a value. `[]` is neither `undefined`, `null` nor `''`,
+       so a field whose last item had just been removed went on offering to clear
+       it, and the confirmation asked whether to clear nothing. A test's cases
+       table is where this shows: delete the last case and a red clear-all sat
+       above an empty table, guarding a no-op.
+    
+       Deliberately arrays only. An empty hash is arguable — "present but empty"
+       can be a real state for a hash — and nothing has demonstrated the same
+       defect there, so widening this predicate would be a guess. */
+    var hasValue = (optionField === null || optionField === void 0 ? void 0 : optionField.value) !== undefined &&
+        (optionField === null || optionField === void 0 ? void 0 : optionField.value) !== null &&
+        (optionField === null || optionField === void 0 ? void 0 : optionField.value) !== '' &&
+        !(Array.isArray(optionField.value) && optionField.value.length === 0);
     // Required-group membership shows a PERSISTENT chip on every member: amber
     // "One of" while the group is unmet (tap → flash siblings), then a muted-green
     // resolution once satisfied — "Covers" on the field that satisfied it,
@@ -531,7 +599,7 @@ exports.CompactRow = (0, react_1.memo)(function (_a) {
         : (schema === null || schema === void 0 ? void 0 : schema.ui_type) || (schema === null || schema === void 0 ? void 0 : schema.type))) !== null && _d !== void 0 ? _d : '';
     // Scalars edit in place inside the row; complex fields (tall or nested
     // editors) still open the expanded card below.
-    var inlineEditable = !readOnly &&
+    var inlineEditableNow = !readOnly &&
         !(schema === null || schema === void 0 ? void 0 : schema.arg_schema) &&
         !(operators && (0, size_1.default)(operators)) &&
         // Expression fields open the builder/DPQL editor — too tall for inline.
@@ -539,22 +607,165 @@ exports.CompactRow = (0, react_1.memo)(function (_a) {
         // A choice with per-option logos (e.g. language) reads better collapsed.
         !(0, readFirst_1.optionHasImages)(schema) &&
         !COMPACT_COMPLEX_TYPES.has(editType);
-    // Auto-focus the editor's first input when a field is opened, so you can type
-    // straight away (matches the prototype's tap-to-edit feel).
+    /* Which of the two editors a row gets is settled when the row OPENS.
+     *
+     * Every term above reads the VALUE or a schema derived from it, so the
+     * answer can change while the author is inside the control — and the two
+     * branches are different subtrees, so a changed answer does not restyle
+     * the editor, it unmounts one and mounts the other. Everything the old one
+     * held goes with it: what was typed, the caret, and any state the editor
+     * keeps about how it was entered.
+     *
+     * `is_expression` is the term that actually fires, and it fires on the one
+     * interaction that exists to keep the author where they are: accepting
+     * "Use as expression" is the moment the value becomes an expression, and
+     * the expression shell opens on its Text view precisely because the author
+     * has just written the expression as text. The remount discarded that and
+     * dropped them into the visual builder, so the sentence they had typed was
+     * nowhere on screen. Clicking Text then appeared to work and bounced back,
+     * because the next value change remounted the row again.
+     *
+     * So the row keeps the editor it opened with for as long as it is open,
+     * and asks the question again when it is next opened — the same trade
+     * `editEntryValue` above makes for a different reason, and the one
+     * qorus-ide's `referenceEditorLatch` makes for this exact one. A field that
+     * already holds an expression when it is opened still gets the card; it is
+     * only a field that BECOMES one under the author that stays put.
+     *
+     * Held in a ref and settled during render rather than in an effect: an
+     * effect lands one render late, and one render late is a visible flash of
+     * the wrong editor — which is the thing being fixed.
+     */
+    var inlineEditableLatch = react_1.default.useRef(undefined);
+    /* Whether THIS opening was the author asking to change the value.
+     *
+     * A click (or Enter/Space) on a closed row means "let me edit this"; a row
+     * opened by the form itself — `initialExpandedOptions` from an address, the
+     * first-attention row, a diagram opening the step it is showing — means
+     * "here it is". Only the first answers the question the picker answers, so
+     * only the first opens one (see the caret effect below). A ref, because it
+     * is read by the effect that runs after the open and must not itself cause
+     * a render. */
+    var openedByAuthor = react_1.default.useRef(false);
+    if (!isExpanded) {
+        inlineEditableLatch.current = undefined;
+    }
+    else if (inlineEditableLatch.current === undefined) {
+        inlineEditableLatch.current = inlineEditableNow;
+    }
+    var inlineEditable = isExpanded ? !!inlineEditableLatch.current : inlineEditableNow;
+    /* The author's intent survives until the row is closed again, and no longer.
+     *
+     * An EFFECT, keyed on the row actually closing, rather than a line in the
+     * render body: between the click and the row opening there is a committed
+     * render that still reads `expandedOptions` without this row in it (the
+     * context propagates a beat after the handler runs), and clearing the flag
+     * on every collapsed render cleared it in that gap — the picker then never
+     * opened, which is the defect this whole mechanism exists to fix. Keyed on
+     * `isExpanded`, the transient render is not a change and the effect does
+     * not run; a genuine collapse is, and it does. */
+    react_1.default.useEffect(function () {
+        if (!isExpanded) {
+            openedByAuthor.current = false;
+        }
+    }, [isExpanded]);
+    /* The instruction the row gives its editor when it opens into a picker.
+     *
+     * State, not a call on the control: reqore's popover binds its own click
+     * listener in an effect keyed on the trigger element arriving, so a
+     * synthetic click dispatched from the row's own effect lands before
+     * anything is listening and does nothing at all. The editor opening itself
+     * from a prop has no such ordering to lose. */
+    var _w = react_1.default.useState(false), openThePicker = _w[0], setOpenThePicker = _w[1];
+    react_1.default.useEffect(function () {
+        // One shot: true for the commit the editor acts on, false again after.
+        if (openThePicker) {
+            setOpenThePicker(false);
+        }
+    }, [openThePicker]);
+    // Put the caret in the row's editor when the row opens, so the reader can
+    // answer straight away (the prototype's tap-to-edit feel) — and so
+    // `autoFocusFirstRequired` means what it says.
+    //
+    // Whatever control the row OFFERS: `findRowFocusTarget` knows a pick-one is
+    // a set of `[tabindex]` checkboxes and a selector is a `<button>`, which a
+    // text-only scan skipped — so the engine opened the right row and the caret
+    // never moved. That is most of the first questions a form asks.
+    //
+    // The row is revealed before the caret lands in it, `block: 'nearest'` on
+    // the ROW. A caret nobody can see is not a caret: a form opened by a click
+    // usually mounts below the fold, and focusing something 700px down changes
+    // nothing on screen while the next keystroke goes somewhere invisible.
+    // `nearest` is by spec a no-op for a row already in view, so a form on
+    // screen never jumps, and it is the row that carries the label saying what
+    // the question is. A caller that wants the row opened WITHOUT the caret
+    // has `expandFirstRequired` for exactly that.
+    //
+    // A MutationObserver, not a timer: a host editor that resolves a catalogue
+    // before it can draw a control mounts it several commits after this effect
+    // runs, and there is no fixed time to wait for it — the control appearing
+    // IS the event. The 60ms timer this replaces missed every such editor, and
+    // fired too early or too late for every other one. One shot, and it gives
+    // up the moment the caret belongs to someone outside this row, so it can
+    // never pull a reader out of a control they moved into themselves.
     var editorRef = react_1.default.useRef(null);
+    var rowRef = react_1.default.useRef(null);
     react_1.default.useEffect(function () {
         if (!isExpanded)
             return undefined;
-        var id = window.setTimeout(function () {
-            var _a;
-            var el = (_a = editorRef.current) === null || _a === void 0 ? void 0 : _a.querySelector('input:not([type="hidden"]):not([disabled]), textarea, [contenteditable="true"]');
-            // A user-driven expand scrolls the just-opened editor into view; the
-            // programmatic `autoFocusFirstRequired` expand must NOT — otherwise an
-            // off-screen / below-the-fold form scrolls itself into view on mount.
-            el === null || el === void 0 ? void 0 : el.focus((autoFocusNameRef === null || autoFocusNameRef === void 0 ? void 0 : autoFocusNameRef.current) === optionName ? { preventScroll: true } : undefined);
-        }, 60);
-        return function () { return window.clearTimeout(id); };
-    }, [isExpanded, optionName, autoFocusNameRef]);
+        var editor = editorRef.current;
+        if (!editor)
+            return undefined;
+        var settled = false;
+        var takeCaret = function () {
+            var _a, _b, _c;
+            if (settled)
+                return true;
+            var active = document.activeElement;
+            if (active && active !== document.body && !((_a = rowRef.current) === null || _a === void 0 ? void 0 : _a.contains(active))) {
+                // Someone else holds the caret — a field the reader moved into while
+                // this row's editor was still arriving. Leave it where it is.
+                settled = true;
+                return true;
+            }
+            var control = (0, rowFocus_1.findRowFocusTarget)(editor);
+            if (!control)
+                return false;
+            // Optional call: jsdom does not implement `scrollIntoView`.
+            (_c = (_b = rowRef.current) === null || _b === void 0 ? void 0 : _b.scrollIntoView) === null || _c === void 0 ? void 0 : _c.call(_b, { block: 'nearest', inline: 'nearest' });
+            // `preventScroll`, because the reveal above has already put the row
+            // where it belongs; letting focus scroll as well moves it twice.
+            control.focus({ preventScroll: true });
+            /* …and if the control the row offers is a PICKER, open it.
+             *
+             * A closed picker prints the value it holds, which is exactly what the
+             * read row printed — so the row opened, nothing on screen changed, and
+             * changing the value still cost a second click. Read-first is the
+             * COLLAPSED row's job; an open row is the editor.
+             *
+             * Narrow on purpose, and each term is a case where read-first is still
+             * right: only a row the author opened themselves (a form that opens a
+             * row to SHOW it must not throw a list over it), only an inline scalar
+             * row (a complex field opens a card that is a form in its own right —
+             * its first control is one of several and nobody asked for it), and
+             * only a control that declares itself a picker, so nothing else is
+             * ever clicked on the author's behalf. */
+            if (openedByAuthor.current && inlineEditable && (0, rowFocus_1.isClosedPickerTrigger)(control)) {
+                openedByAuthor.current = false;
+                setOpenThePicker(true);
+            }
+            settled = true;
+            return true;
+        };
+        if (takeCaret() || typeof MutationObserver === 'undefined')
+            return undefined;
+        var observer = new MutationObserver(function () {
+            if (takeCaret())
+                observer.disconnect();
+        });
+        observer.observe(editor, { childList: true, subtree: true });
+        return function () { return observer.disconnect(); };
+    }, [isExpanded, optionName, inlineEditable]);
     // What the field held when it was opened — the baseline Cancel restores.
     //
     // Deliberately NOT `originalValue`, which is the whole form's load-time
@@ -604,7 +815,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 _t = react_1.default.useState(undefined), resolvedArgSchema = _t[0], setResolvedArgSchema = _t[1];
+    var _x = react_1.default.useState(undefined), resolvedArgSchema = _x[0], setResolvedArgSchema = _x[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
@@ -786,7 +997,22 @@ exports.CompactRow = (0, react_1.memo)(function (_a) {
     // 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))); };
+    /* A message is PROSE, so it is drawn by the host's prose renderer.
+    
+       `markdownRendererContext` says this package renders markdown "in exactly
+       one place — a field's description". That was one place short: a schema
+       message is written by the same author, in the same dialect, and it landed
+       here as a raw string. A Qorus warning reading "Give that step a **Fixture
+       Output**" showed the asterisks, and every reference inside it stayed a raw
+       `$.` path where the editor two lines above renders it as a named chip.
+    
+       `compact` for the same reason the row inset asks for it: this is a strip
+       inside a row, never a page, and markdown authored as a document opens with
+       a heading that would outgrow the field label above it. Without a host
+       renderer the string is drawn as it always was. */
+    var renderInfoStrip = function (m, index) { return ((0, jsx_runtime_1.jsx)(reqore_1.ReqoreMessage, { size: 'small', opaque: false, flat: true, intent: m.intent, title: m.title, style: { marginBottom: 8 }, children: markdownRenderer && typeof m.content === 'string' ?
+            markdownRenderer({ value: m.content, compact: true })
+            : m.content }, "".concat(m.content, "-").concat(index))); };
     var reasonColor = function (intent) {
         var _a;
         return intent === 'danger' ? cDanger
@@ -817,10 +1043,12 @@ exports.CompactRow = (0, react_1.memo)(function (_a) {
             onMouseLeave: function () { return setHighlightedOptions([]); },
         }
         : {};
+    // Items the EDITOR inside this row published — see `rowMenuContext`.
+    var _y = (0, rowMenuContext_1.useRowMenuRegistry)(), rowMenu = _y.rowMenu, editorMenuItems = _y.items;
     // Secondary edit actions tuck into a "More" (⋮) menu so the card header stays
     // calm: Fullscreen always, plus Remove field for a removable option. Rendered
     // just before the Done ✓ in both expanded layouts.
-    var moreMenu = ((0, jsx_runtime_1.jsx)(reqore_1.ReqoreDropdown, { className: 'options-readfirst-more', icon: 'More2Fill', flat: true, minimal: true, fixed: true, size: 'small', tooltip: 'More actions', items: __spreadArray(__spreadArray([
+    var moreMenu = ((0, jsx_runtime_1.jsx)(reqore_1.ReqoreDropdown, { className: 'options-readfirst-more', icon: 'More2Fill', flat: true, minimal: true, fixed: true, size: 'small', tooltip: 'More actions', items: __spreadArray(__spreadArray(__spreadArray([
             {
                 label: 'Edit fullscreen',
                 icon: 'FullscreenLine',
@@ -840,7 +1068,7 @@ exports.CompactRow = (0, react_1.memo)(function (_a) {
                     },
                 },
             ]
-            : []), true), injectedOptionActionMenuItems, true) }));
+            : []), true), injectedOptionActionMenuItems, true), editorMenuItems, true) }));
     // The absorbed siblings' controls, rendered inside this row.
     //
     // Each keeps its own label so it is still identifiable — it is a different
@@ -888,7 +1116,7 @@ exports.CompactRow = (0, react_1.memo)(function (_a) {
     if (isExpanded && !readOnly) {
         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] ?
+            var editingRow = ((0, jsx_runtime_1.jsxs)("div", __assign({ ref: rowRef, "data-field": optionName, className: 'readfirst-row readfirst-row-editing options-readfirst-inline options-readfirst-value', style: readRowHeights.current[optionName] ?
                     { minHeight: readRowHeights.current[optionName] }
                     : undefined }, clusterHoverProps, { children: [(0, jsx_runtime_1.jsxs)(compactRowStyles_1.StyledLabelBlock, { className: 'options-readfirst-label-block', children: [(0, jsx_runtime_1.jsxs)(compactRowStyles_1.StyledRowLabel, { role: 'button', tabIndex: 0, "aria-label": "Collapse ".concat(label), title: (schema === null || schema === void 0 ? void 0 : schema.short_desc) || undefined, "$color": cKey, "$pointer": true, onClick: collapse_1, onKeyDown: function (event) {
                                     if (event.key === 'Enter' || event.key === ' ') {
@@ -910,7 +1138,7 @@ exports.CompactRow = (0, react_1.memo)(function (_a) {
                             }
                         }, children: [panelMessages.length ?
                                 (0, jsx_runtime_1.jsx)(reqore_1.ReqoreControlGroup, { className: 'options-readfirst-info-panel', vertical: true, fluid: true, gapSize: 'normal', children: panelMessages.map(renderInfoStrip) })
-                                : null, absorbedNodes, renderOption(optionName, optionField, 'small', true)] }), (0, jsx_runtime_1.jsxs)(compactRowStyles_1.StyledRowActions, { children: [draftChip, editRowRevertButton, cancelEditButton, clearValueButton, inlineOptionActions.map(function (action, index) {
+                                : null, absorbedNodes, (0, jsx_runtime_1.jsx)(rowOpenPicker_1.RowOpenPickerContext.Provider, { value: openThePicker, children: (0, jsx_runtime_1.jsx)(rowMenuContext_1.RowMenuContext.Provider, { value: rowMenu, children: 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
@@ -968,7 +1196,7 @@ exports.CompactRow = (0, react_1.memo)(function (_a) {
                         }
                     }, 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));
+                                : null, (0, jsx_runtime_1.jsx)(rowMenuContext_1.RowMenuContext.Provider, { value: rowMenu, children: renderOption(optionName, optionField) })] }) })] }, optionName));
     }
     var formatted = (0, readFirst_1.formatOptionValue)(optionField, schema);
     var empty = formatted === '';
@@ -999,9 +1227,19 @@ 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.
+    /* An EXPRESSION is not a hash, whatever shape it is stored in.
+    
+       `{is_expression: true, value: {exp, args}}` is hash-shaped, so a field
+       holding one earned the structured inset and the row printed the syntax
+       tree — `is_expression true / value / exp + / args 1 2` — directly under a
+       summary line that already read `1 + 2`. The AST is how an expression is
+       STORED, not what it is; the row's line is the whole value, and the
+       expression editor is where its parts are looked at. Same exclusion, and
+       for the same reason, as `schema-definition` beside it. */
     var hashEntries = (!hidden &&
         (valueType === 'hash' || valueType === 'free-hash') &&
-        (schema === null || schema === void 0 ? void 0 : schema.ui_type) !== 'schema-definition') ?
+        (schema === null || schema === void 0 ? void 0 : schema.ui_type) !== 'schema-definition' &&
+        (0, readFirst_1.getExpressionAst)(optionField) === undefined) ?
         (0, readFirst_1.getHashEntries)(optionField, schema)
         : [];
     // A LIST OF HASHES/objects gets the same expandable structured preview a hash
@@ -1043,6 +1281,26 @@ exports.CompactRow = (0, react_1.memo)(function (_a) {
         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'; });
+    /* The same pair, for a value that IS one template rather than prose with
+       templates embedded in it. `showsTemplateChips` above closed the richtext
+       case and left this one open: a chosen reference renders as
+       `ReadOnlyTemplateTag`, which carries its own popover, while the row went
+       on setting a native `title` holding the raw reference. Hovering fired
+       both — two tooltips in two places, and the one that says something useful
+       is not the one a screenshot captures. */
+    var showsTemplateTag = !hidden &&
+        typeof (optionField === null || optionField === void 0 ? void 0 : optionField.value) === 'string' &&
+        !(optionField === null || optionField === void 0 ? void 0 : optionField.is_expression) &&
+        ((0, templates_1.isValueTemplate)(optionField.value) ||
+            !!(0, templates_1.findTemplate)((_l = (_k = schema === null || schema === void 0 ? void 0 : schema.templates) !== null && _k !== void 0 ? _k : templates) !== null && _l !== void 0 ? _l : {}, optionField.value));
+    /* And once more for a value that only MENTIONS references — a predicate, a
+       greeting with a name in it. The row draws those as prose plus chips too,
+       so a native `title` would hover the raw spelling of exactly what the chips
+       replaced, and each chip's own popover would fire alongside it. */
+    var showsTemplateText = !hidden &&
+        !showsTemplateTag &&
+        !!formatted &&
+        (0, templateText_1.hasTemplateText)(formatted, (_m = schema === null || schema === void 0 ? void 0 : schema.templates) !== null && _m !== void 0 ? _m : templates, schema === null || schema === void 0 ? void 0 : schema.templateToken);
     // 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
@@ -1134,11 +1392,17 @@ exports.CompactRow = (0, react_1.memo)(function (_a) {
         return {
             name: depName,
             exists: !!(options === null || options === void 0 ? void 0 : options[depName]),
-            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,
+            // `!name` compares against nothing — it is satisfied by the sibling
+            // being unanswered — so it says so, rather than going through the
+            // comparison template and reading `Name ≠ undefined`.
+            label: op === '!' ? "".concat(depLabel, " unset")
+                : !op ? depLabel
+                    : "".concat(depLabel, " ").concat(op === '=' ? '=' : '≠', " ").concat(expected),
+            fulfilled: op === '!' ? (0, readFirst_1.isOptionValueEmpty)(depValue)
+                : !op ? !(0, readFirst_1.isOptionValueEmpty)(depValue)
+                    : depValue == null ? false
+                        : op === '=' ? String(depValue) === expected
+                            : String(depValue) !== expected,
         };
     };
     var depHighlightNames = (0, flatten_1.default)(dependencyEntries)
@@ -1172,14 +1436,26 @@ exports.CompactRow = (0, react_1.memo)(function (_a) {
         // with `readOnly` handed down (an id in a greyed-out input, a choice
         // that could still be changed); then into a read view of the same
         // value — which showed nothing the row could not show itself once it
-        // stopped truncating. So it shows everything, and opens nothing.
+        // stopped truncating. So it shows everything, and opens nothing HERE.
+        //
+        // Where the consumer says the field is editable somewhere else, the row
+        // is the way in to that place: a reader clicking a value they want to
+        // change has said exactly what they want, and answering with silence
+        // teaches them the surface is broken.
         if (fieldDisabled || readOnly) {
+            if (readOnly && !fieldDisabled) {
+                onReadOnlyActivate === null || onReadOnlyActivate === void 0 ? void 0 : onReadOnlyActivate(optionName);
+            }
             return;
         }
         var target = event === null || event === void 0 ? void 0 : event.currentTarget;
         if ((_a = target === null || target === void 0 ? void 0 : target.classList) === null || _a === void 0 ? void 0 : _a.contains('readfirst-row')) {
             readRowHeights.current[optionName] = Math.round(target.getBoundingClientRect().height);
         }
+        // The author asked for this one — so the row opens all the way (a picker
+        // opens its list rather than reprinting the value as a closed trigger).
+        // Only when it is OPENING: the same handler collapses an open row.
+        openedByAuthor.current = !isExpanded;
         // Optional fields aren't "added" — every one is editable in place. Opening a
         // not-yet-set field just expands its editor (with an empty value); it joins
         // the form's output the moment a value is set (and moves to Set / Needs
@@ -1193,7 +1469,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) ?
-        (_k = theme === null || theme === void 0 ? void 0 : theme.intents) === null || _k === void 0 ? void 0 : _k[schema.intent]
+        (_o = theme === null || theme === void 0 ? void 0 : theme.intents) === null || _o === void 0 ? void 0 : _o[schema.intent]
         : undefined;
     var rowStripeColor = (showStripe ? intentColor : undefined) || rowSchemaIntentColor;
     // Intent stripe on the block ROOT so it spans the field's whole territory:
@@ -1208,7 +1484,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 = (_l = theme === null || theme === void 0 ? void 0 : theme.intents) === null || _l === void 0 ? void 0 : _l.success;
+    var cSuccess = (_p = theme === null || theme === void 0 ? void 0 : theme.intents) === null || _p === void 0 ? void 0 : _p.success;
     var rowStatus = (0, readFirst_1.getReadFirstStatus)({
         empty: empty,
         required: required,
@@ -1223,7 +1499,15 @@ exports.CompactRow = (0, react_1.memo)(function (_a) {
         : dotStatus === 'todo' ? cWarning
             : dotStatus === 'set' ? cSuccess || cInfo
                 : undefined;
-    var row = ((0, jsx_runtime_1.jsxs)("div", __assign({ "data-field": optionName, role: readOnly ? undefined : 'button', tabIndex: readOnly ? undefined : 0, "aria-label": readOnly ? undefined : label, className: "readfirst-row options-readfirst-value".concat(readOnly ? ' readfirst-row-read' : '').concat(hidden ? ' readfirst-row-hidden' : '').concat(fieldDisabled ? ' readfirst-row-disabled' : '').concat(isHighlighted ? ' readfirst-row-group-highlight' : '').concat(isFlashed ? ' readfirst-row-flash' : '').concat(showLabelDesc ? ' readfirst-row-info-open' : '').concat(panelMessages.length || showStructuredPreview || showCodePreview || showMarkdownPreview || showLongTextInset ? ' readfirst-row-tall' : '').concat(clusterBlockClass ? ' ' + clusterBlockClass : ''), "aria-disabled": fieldDisabled || undefined, style: stripeStyle, onClick: readOnly ? undefined : activate, onKeyDown: readOnly ? undefined : (function (event) {
+    /* A read-only row is a control only when the consumer gave it somewhere to
+       go. Then it takes a button's role, focus and keyboard handling, because
+       a thing that acts on a click has to be reachable without a mouse and has
+       to announce what it does — and "Edit X", not "X", is what it does. */
+    var readOnlyIsAWayIn = !!readOnly && !fieldDisabled && !!onReadOnlyActivate;
+    var actsOnClick = !readOnly || readOnlyIsAWayIn;
+    var row = ((0, jsx_runtime_1.jsxs)("div", __assign({ "data-field": optionName, role: actsOnClick ? 'button' : undefined, tabIndex: actsOnClick ? 0 : undefined, "aria-label": readOnlyIsAWayIn ? "Edit ".concat(label)
+            : readOnly ? undefined
+                : label, className: "readfirst-row options-readfirst-value".concat(readOnly ? ' readfirst-row-read' : '').concat(readOnlyIsAWayIn ? ' readfirst-row-way-in' : '').concat(hidden ? ' readfirst-row-hidden' : '').concat(fieldDisabled ? ' readfirst-row-disabled' : '').concat(isHighlighted ? ' readfirst-row-group-highlight' : '').concat(isFlashed ? ' readfirst-row-flash' : '').concat(showLabelDesc ? ' readfirst-row-info-open' : '').concat(panelMessages.length || showStructuredPreview || showCodePreview || showMarkdownPreview || showLongTextInset ? ' readfirst-row-tall' : '').concat(clusterBlockClass ? ' ' + clusterBlockClass : ''), "aria-disabled": fieldDisabled || undefined, style: readOnlyIsAWayIn ? __assign(__assign({}, stripeStyle), { cursor: 'pointer' }) : stripeStyle, onClick: actsOnClick ? activate : undefined, onKeyDown: !actsOnClick ? undefined : (function (event) {
             if (event.key === 'Enter' || event.key === ' ') {
                 event.preventDefault();
                 activate(event);
@@ -1259,6 +1543,8 @@ exports.CompactRow = (0, react_1.memo)(function (_a) {
                     !showCodePreview &&
                     !showMarkdownPreview &&
                     !showsTemplateChips &&
+                    !showsTemplateTag &&
+                    !showsTemplateText &&
                     typeof formatted === 'string') ?
                     formatted
                     : undefined, "$color": empty || hidden ? "".concat(cMuted, "66") : cKey, "$empty": empty || hidden, children: [(showMarkdownPreview || showLongTextInset || (previewWithSchema && showStructuredPreview)) ?
@@ -1311,7 +1597,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: ((_m = theme === null || theme === void 0 ? void 0 : theme.intents) === null || _m === void 0 ? void 0 : _m.custom1) || cInfo,
+                                                accent: ((_q = theme === null || theme === void 0 ? void 0 : theme.intents) === null || _q === void 0 ? void 0 : _q.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 ?