@qoretechnologies/reqraft 0.10.53 → 0.10.54-pr.115.ge2d364c

package/dist/components/form/fields/template/TemplateField.js

@@ -44,11 +44,20 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TemplateField = exports.TemplateDropdownSelector = exports.CustomMenuItems = exports.ComponentMap = exports.TemplatesListProps = exports.isValueTemplate = exports.getTemplateValue = exports.getTemplateKey = void 0;
+exports.TemplateField = exports.isTemplateAwareUiType = exports.BuiltInTemplateAwareUiTypes = exports.TemplateDropdownSelector = exports.CustomMenuItems = exports.ComponentMap = exports.TemplatesListProps = exports.isValueTemplate = exports.getTemplateValue = exports.getTemplateKey = void 0;
 var react_1 = require("react");
 var jsx_runtime_1 = require("react/jsx-runtime");
 // Verbatim port of qorus-ide `src/components/Field/template.tsx` (774 LOC,
@@ -65,7 +74,11 @@ var templates_1 = require("../../../../helpers/templates");
 Object.defineProperty(exports, "getTemplateKey", { enumerable: true, get: function () { return templates_1.getTemplateKey; } });
 Object.defineProperty(exports, "getTemplateValue", { enumerable: true, get: function () { return templates_1.getTemplateValue; } });
 Object.defineProperty(exports, "isValueTemplate", { enumerable: true, get: function () { return templates_1.isValueTemplate; } });
+var dpqlDetection_1 = require("../../../../helpers/dpqlDetection");
+var templateItems_1 = require("../../../../helpers/templateItems");
+var markdownRendererContext_1 = require("../../../Description/markdownRendererContext");
 var validations_1 = require("../../../../helpers/validations");
+var useDpqlProbe_1 = require("../../../dpqlEditor/useDpqlProbe");
 var useQorusTypes_1 = require("../../../../hooks/useQorusTypes");
 var useWhyDidYouUpdate_1 = require("../../../../hooks/useWhyDidYouUpdate");
 var builder_1 = require("../../expressions/builder");
@@ -81,6 +94,15 @@ var LongString_1 = __importDefault(require("../long-string/LongString"));
 var Number_1 = __importDefault(require("../number/Number"));
 var ReadOnlyTemplateTag_1 = require("./ReadOnlyTemplateTag");
 var RichText_1 = require("../rich-text/RichText");
+var common_1 = require("../../../../helpers/common");
+var rowMenuContext_1 = require("../../engine/rowMenuContext");
+/**
+ * How long the author must pause before typed text is sent to the DPQL
+ * probe. Long enough that a probe is not sent for every prefix of what is
+ * being typed, short enough that the offer appears while they are still
+ * looking at the field.
+ */
+var DPQL_DETECT_DEBOUNCE_MS = 400;
 exports.TemplatesListProps = {
     useTargetWidth: true,
     handler: 'focus',
@@ -165,18 +187,25 @@ var MenuActionsSection = (0, react_2.memo)(function (_a) {
 exports.CustomMenuItems = (0, react_2.memo)(function (_a) {
     var items = _a.items, closePopover = _a.closePopover, setIsTemplate = _a.setIsTemplate, setTemplateValue = _a.setTemplateValue, rest = __rest(_a, ["items", "closePopover", "setIsTemplate", "setTemplateValue"]);
     return ((0, jsx_runtime_1.jsx)(reqore_1.ReqoreMenuSection, __assign({ label: 'Set Custom Value', isCollapsed: true, transparent: true, icon: 'Text' }, rest, { children: items.map(function (menuItem, index) {
-            return 'isDivider' in menuItem ? ((0, jsx_runtime_1.jsx)(divider_1.default, __assign({}, menuItem), index)) : ((0, react_1.createElement)(reqore_1.ReqoreButton, __assign({}, rest, menuItem, { key: index, onClick: function (e) {
-                    var _a, _b;
-                    (_b = (_a = menuItem).onClick) === null || _b === void 0 ? void 0 : _b.call(_a, e, function () {
-                        setIsTemplate(false);
-                        setTemplateValue(null);
-                        closePopover === null || closePopover === void 0 ? void 0 : closePopover();
-                    });
-                } })));
+            return 'isDivider' in menuItem ?
+                (0, jsx_runtime_1.jsx)(divider_1.default, __assign({}, menuItem), index)
+                : (0, react_1.createElement)(reqore_1.ReqoreButton, __assign({}, rest, menuItem, { key: index, onClick: function (e) {
+                        var _a, _b;
+                        (_b = (_a = menuItem).onClick) === null || _b === void 0 ? void 0 : _b.call(_a, e, function () {
+                            setIsTemplate(false);
+                            setTemplateValue(null);
+                            closePopover === null || closePopover === void 0 ? void 0 : closePopover();
+                        });
+                    } }));
         }) })));
 });
 exports.TemplateDropdownSelector = (0, react_2.memo)(function (_a) {
     var onItemSelect = _a.onItemSelect, onRemoveClick = _a.onRemoveClick, items = _a.items, templates = _a.templates, allowCustomValues = _a.allowCustomValues, hasOnlyAllowedValues = _a.hasOnlyAllowedValues, value = _a.value, size = _a.size, rest = __rest(_a, ["onItemSelect", "onRemoveClick", "items", "templates", "allowCustomValues", "hasOnlyAllowedValues", "value", "size"]);
+    /* The LAST hop before Reqore, which is the only place a drawn description
+       may be made: `filteredTemplates` upstream is a `JSON.stringify` memo key,
+       and an element in it throws on its own circular owner. */
+    var renderMarkdown = (0, markdownRendererContext_1.useMarkdownRenderer)();
+    var shownItems = (0, react_2.useMemo)(function () { return (0, templateItems_1.renderTemplateItemDescriptions)((0, templateItems_1.templateItemsToShow)(items), renderMarkdown); }, [items, renderMarkdown]);
     // One resolver for every surface that names a reference — the picker chip
     // here, the read-only tag, and the compact row's expression summary. The
     // row and this editor must agree: a reference that reads as its path when
@@ -194,13 +223,33 @@ exports.TemplateDropdownSelector = (0, react_2.memo)(function (_a) {
     // SEAM (reqraft): the IDE resolves the template's app/action via
     // `useGetAppActionData` and renders the action's display name as a badge
     // here — the app catalogue is IDE-only, so the badge is dropped.
-    return ((0, jsx_runtime_1.jsxs)(reqore_1.ReqoreControlGroup, { vertical: true, fluid: true, children: [hasOnlyAllowedValues && ((0, jsx_runtime_1.jsx)(reqore_1.ReqoreMessage, { intent: 'warning', size: 'small', opaque: false, children: "This field has pre-defined allowed values, make sure the template you select is compatible with those" })), (0, jsx_runtime_1.jsxs)(reqore_1.ReqoreControlGroup, { stack: true, children: [(0, jsx_runtime_1.jsx)(reqore_1.ReqoreDropdown, __assign({ className: 'template-selector', customTheme: exports.TemplatesListProps.listCustomTheme, minimal: true, compact: true, onItemSelect: onItemSelect, items: items, label: label, leftIconProps: leftIconProps, caretPosition: 'right', filterable: true, size: size }, exports.TemplatesListProps)), allowCustomValues || value ? ((0, jsx_runtime_1.jsx)(reqore_1.ReqoreButton, { customTheme: exports.TemplatesListProps.listCustomTheme, fixed: true, icon: 'CloseLine', tooltip: 'Remove template value', minimal: true, className: 'template-remove', compact: true, size: size, onClick: onRemoveClick })) : null] })] }));
+    return ((0, jsx_runtime_1.jsxs)(reqore_1.ReqoreControlGroup, { vertical: true, fluid: true, children: [hasOnlyAllowedValues && ((0, jsx_runtime_1.jsx)(reqore_1.ReqoreMessage, { intent: 'warning', size: 'small', opaque: false, children: "This field has pre-defined allowed values, make sure the template you select is compatible with those" })), (0, jsx_runtime_1.jsxs)(reqore_1.ReqoreControlGroup, { stack: true, children: [(0, jsx_runtime_1.jsx)(reqore_1.ReqoreDropdown, __assign({ className: 'template-selector', customTheme: exports.TemplatesListProps.listCustomTheme, minimal: true, compact: true, onItemSelect: onItemSelect, items: shownItems, label: label, leftIconProps: leftIconProps, caretPosition: 'right', filterable: true, size: size }, exports.TemplatesListProps)), allowCustomValues || value ?
+                        (0, jsx_runtime_1.jsx)(reqore_1.ReqoreButton, { customTheme: exports.TemplatesListProps.listCustomTheme, fixed: true, icon: 'CloseLine', tooltip: 'Remove template value', minimal: true, className: 'template-remove', compact: true, size: size, onClick: onRemoveClick })
+                        : null] })] }));
 });
-exports.TemplateField = (0, react_2.memo)(function (_a) {
+/**
+ * `ui_type`s whose OWN editor renders templates as chips inline.
+ *
+ * For these the template SELECTOR must not take over: it replaces a control the
+ * author can type in with one they can only pick from. A Qorus test assertion's
+ * `Value` is the case this was written for — the IDE's own `auto.tsx` already
+ * renders it as template rich text (type freely, references become chips), and
+ * the same field reached through this form engine offered a dropdown and no way
+ * to type at all.
+ *
+ * `richtext` is reqraft's own; a consumer adds its types through the
+ * `templateAwareUiTypes` prop, exactly as it adds `rendererOnlyUiTypes`.
+ */
+exports.BuiltInTemplateAwareUiTypes = ['richtext'];
+var isTemplateAwareUiType = function (uiType, extra) {
+    return !!uiType && __spreadArray(__spreadArray([], exports.BuiltInTemplateAwareUiTypes, true), (extra !== null && extra !== void 0 ? extra : []), true).includes(uiType);
+};
+exports.isTemplateAwareUiType = isTemplateAwareUiType;
+var TemplateFieldImpl = (0, react_2.memo)(function (_a) {
     var _b, _c, _d;
-    var value = _a.value, name = _a.name, onChange = _a.onChange, _e = _a.component, Comp = _e === void 0 ? AutoFormField_1.AutoFormField : _e, templates = _a.templates, interfaceContext = _a.interfaceContext, // eslint-disable-line @typescript-eslint/no-unused-vars
+    var rowMenu = _a.rowMenu, value = _a.value, name = _a.name, onChange = _a.onChange, _e = _a.component, Comp = _e === void 0 ? AutoFormField_1.AutoFormField : _e, templates = _a.templates, interfaceContext = _a.interfaceContext, // eslint-disable-line @typescript-eslint/no-unused-vars
     _f = _a.allowTemplates, // eslint-disable-line @typescript-eslint/no-unused-vars
-    allowTemplates = _f === void 0 ? true : _f, allowFunctions = _a.allowFunctions, allowTextExpressions = _a.allowTextExpressions, extraActions = _a.extraActions, _g = _a.allowCustomValues, allowCustomValues = _g === void 0 ? true : _g, _h = _a.filterTemplatesByType, filterTemplatesByType = _h === void 0 ? true : _h, filterTemplatesFunc = _a.filterTemplatesFunc, componentFromType = _a.componentFromType, isFunction = _a.isFunction, isDefaultFunction = _a.isDefaultFunction, isDefaultTemplate = _a.isDefaultTemplate, returnType = _a.returnType, level = _a.level, className = _a.className, menuItems = _a.menuItems, menuActions = _a.menuActions, reorder = _a.reorder, label = _a.label, rest = __rest(_a, ["value", "name", "onChange", "component", "templates", "interfaceContext", "allowTemplates", "allowFunctions", "allowTextExpressions", "extraActions", "allowCustomValues", "filterTemplatesByType", "filterTemplatesFunc", "componentFromType", "isFunction", "isDefaultFunction", "isDefaultTemplate", "returnType", "level", "className", "menuItems", "menuActions", "reorder", "label"]);
+    allowTemplates = _f === void 0 ? true : _f, allowFunctions = _a.allowFunctions, allowTextExpressions = _a.allowTextExpressions, extraActions = _a.extraActions, componentOverrides = _a.componentOverrides, _g = _a.allowCustomValues, allowCustomValues = _g === void 0 ? true : _g, _h = _a.filterTemplatesByType, filterTemplatesByType = _h === void 0 ? true : _h, filterTemplatesFunc = _a.filterTemplatesFunc, componentFromType = _a.componentFromType, isFunction = _a.isFunction, isDefaultFunction = _a.isDefaultFunction, isDefaultTemplate = _a.isDefaultTemplate, returnType = _a.returnType, level = _a.level, className = _a.className, menuItems = _a.menuItems, menuActions = _a.menuActions, reorder = _a.reorder, label = _a.label, rest = __rest(_a, ["rowMenu", "value", "name", "onChange", "component", "templates", "interfaceContext", "allowTemplates", "allowFunctions", "allowTextExpressions", "extraActions", "componentOverrides", "allowCustomValues", "filterTemplatesByType", "filterTemplatesFunc", "componentFromType", "isFunction", "isDefaultFunction", "isDefaultTemplate", "returnType", "level", "className", "menuItems", "menuActions", "reorder", "label"]);
     var qorusTypes = (0, useQorusTypes_1.useQorusTypes)();
     var functions = (0, useExpressions_1.useExpressions)({
         allow: !!allowFunctions,
@@ -208,6 +257,19 @@ exports.TemplateField = (0, react_2.memo)(function (_a) {
         extraExpressions: rest.expressions,
     });
     var type = rest.ui_type || rest.type || rest.defaultType;
+    /* The type an EXPRESSION must return, and is stored with, is a DATA type.
+       `type` above deliberately prefers `ui_type`, because that is what decides
+       which editor to render — but a ui_type says how a value is EDITED, not
+       what it is. The IDE's reference fields carry `ui_type: 'test-reference'`
+       (a rich-text editor that turns `$.` paths into chips), and feeding that
+       to the expression builder asked it for an expression RETURNING
+       `test-reference`: no expression returns one, so every choice was refused
+       with *"the expected return type is test-reference"*, and the ui_type was
+       then stored on the saved expression as its declared type.
+
+       The declared data type is the constraint; the ui_type is only a fallback
+       for a field that declares no type at all. */
+    var expressionDataType = rest.type || rest.defaultType || rest.ui_type;
     var filteredTemplates = (0, react_2.useMemo)(function () {
         if (!allowTemplates) {
             return undefined;
@@ -219,7 +281,20 @@ exports.TemplateField = (0, react_2.memo)(function (_a) {
         if (filterTemplatesFunc) {
             result = filterTemplatesFunc(result);
         }
-        return result;
+        /* A lone category is opened, once, HERE — where this control resolves the
+           templates every one of its pickers then reads: the "Select Template"
+           dropdown, the in-editor `$` list, the numeric field's focus dropdown and
+           the expression builder's argument picker. Applying it per picker meant
+           each new one had to remember, and the ones that forgot made the author
+           click through a header naming the only category on offer to reach the
+           only values on offer.
+  
+           LAST, after both filters. `filterTemplatesFunc` is given the grouped
+           shape on purpose — the Qog expression builder filters top-level items by
+           `metadata.dataRole`, which is a property of the CATEGORY — so flattening
+           before it would hand it values and quietly change what it keeps. This
+           only changes what is finally shown. */
+        return __assign(__assign({}, result), { items: (0, templateItems_1.templateItemsToShow)(result === null || result === void 0 ? void 0 : result.items) });
     }, [
         JSON.stringify(templates),
         type,
@@ -247,15 +322,49 @@ exports.TemplateField = (0, react_2.memo)(function (_a) {
     // templates on offer would otherwise open on an EMPTY picker, which is a
     // worse place to start than the type picker it replaced.
     var typeIsAnyLike = type === 'any' || type === 'auto';
-    var isEmptyValue = value === undefined || value === null || value === '';
+    /* An EMPTY field, for the purpose of offering the template selector.
+   
+       `null` is deliberately not empty. It is the DPQL null literal — a value
+       an author writes to say "this is nothing", and the only way to assert
+       that a call returned no value. Counted as emptiness here, an argument
+       holding it was treated as a field the author had just cleared: with a
+       type of `any` and templates on offer, the selector-restore effect below
+       flipped the field into template mode with a null template value, and
+       that reported the field as cleared — so writing `null` in the Text tab
+       and switching to Visual silently erased it, leaving `{type: "any"}` in
+       the draft and the message "Value for argument 1 ("any") is invalid:
+       Value is empty".
+   
+       `undefined` is the cleared state; `null` is a value. Same rule as
+       `expressions/argumentPresence`, which states it canonically. */
+    var isEmptyValue = value === undefined || value === '';
     var hasTemplatesOnOffer = !!(0, lodash_1.size)(filteredTemplates === null || filteredTemplates === void 0 ? void 0 : filteredTemplates.items);
+    /* The field's own editor already renders templates inline, so the selector
+       is not merely unnecessary here — it is a downgrade, swapping a typable
+       control for a pick-only one. Derived rather than folded into the state
+       below so every `setIsTemplate` path keeps working untouched; they simply
+       stop having anything to say for these fields. */
+    var editorHandlesTemplates = !!allowTemplates && (0, exports.isTemplateAwareUiType)(type, rest.templateAwareUiTypes);
     var _j = (0, react_2.useState)((isDefaultTemplate ||
         (0, templates_1.isValueTemplate)(value) ||
         !allowCustomValues ||
         (typeIsAnyLike && isEmptyValue && hasTemplatesOnOffer)) &&
-        allowTemplates), isTemplate = _j[0], setIsTemplate = _j[1];
+        allowTemplates), isTemplateState = _j[0], setIsTemplate = _j[1];
+    var isTemplate = editorHandlesTemplates ? false : isTemplateState;
     var _k = (0, react_2.useState)(!!isDefaultFunction && !!allowFunctions), internalIsFunction = _k[0], setInternalIsFunction = _k[1];
     var _l = (0, react_2.useState)(value), templateValue = _l[0], setTemplateValue = _l[1];
+    // Typed text that turned out to be an expression the author may accept.
+    var _m = (0, react_2.useState)(null), dpqlOffer = _m[0], setDpqlOffer = _m[1];
+    // The literal this field held before typed text switched it into
+    // expression mode — kept so the switch is undoable, and so the editor
+    // opens on the Text view the author was already writing in.
+    var _o = (0, react_2.useState)(null), expressionFromText = _o[0], setExpressionFromText = _o[1];
+    // Texts the author has said no to. Without this, dismissing an offer (or
+    // undoing a switch) would re-detect the same text on the next render and
+    // ask again forever.
+    var declinedTexts = (0, react_2.useRef)(new Set());
+    var detectTimer = (0, react_2.useRef)(null);
+    var probeDpql = (0, useDpqlProbe_1.useDpqlProbe)();
     var effectiveIsFunction = isFunction || internalIsFunction;
     (0, useWhyDidYouUpdate_1.useWhyDidYouUpdate)("Template field ".concat(name), __assign({ name: name, onChange: onChange, value: value }, rest));
     (0, react_2.useEffect)(function () {
@@ -263,6 +372,60 @@ exports.TemplateField = (0, react_2.memo)(function (_a) {
             setTemplateValue(value);
         }
     }, [JSON.stringify(value)]);
+    /* Clearing an untyped field returns it to the template selector, which is
+       where mounting it empty already lands.
+
+       The rule above that opens an `any`-like field on the template selector is
+       a `useState` INITIALISER, so it only ever ran on mount. Clearing a value
+       in place does not remount anything, so the field fell through to the TYPE
+       picker and demanded `string`/`int`/`hash` before it would let the author
+       name a value they had already captured -- the very question that rule
+       exists to stop asking. Reloading the page fixed it, which is the tell:
+       same field, same empty value, different landing, because only one of the
+       two paths ran the rule.
+
+       Watched as a TRANSITION from a value to no value, not as "the value is
+       empty": an author who picks `Set Custom Value` on an empty field is
+       asking for the type picker, and re-asserting the template view on every
+       render while the field sat empty would take it away again immediately. */
+    var hadValue = (0, react_2.useRef)(!isEmptyValue);
+    /* A clear is REMEMBERED rather than acted on in the same render.
+
+       While the field holds a value its resolved type is that VALUE's type — a
+       reference reads as `test-reference`, not `auto` — and clearing reverts it
+       to the schema's `auto` one render LATER than the value empties. Acting
+       only on the transition therefore ran while `typeIsAnyLike` was still
+       false and did nothing, and by the time the type settled the transition
+       had passed. Measured in the live IDE at the moment of the clear:
+       `{ wasCleared: true, typeIsAnyLike: false, type: "test-reference",
+       hasTemplatesOnOffer: true }`, then `typeIsAnyLike: true` on the very next
+       render with `wasCleared` already false. */
+    var restoreSelectorWhenSettled = (0, react_2.useRef)(false);
+    /** Set by the template control's own `×`, which is an author saying "not a
+     *  template" — that clear must not be answered with the selector again. */
+    var suppressSelectorRestore = (0, react_2.useRef)(false);
+    (0, react_2.useEffect)(function () {
+        if (hadValue.current && isEmptyValue) {
+            restoreSelectorWhenSettled.current = !suppressSelectorRestore.current;
+            suppressSelectorRestore.current = false;
+        }
+        if (!isEmptyValue) {
+            // A value arrived: whatever the author did, they are not sitting on an
+            // empty field waiting to be offered the list.
+            restoreSelectorWhenSettled.current = false;
+        }
+        hadValue.current = !isEmptyValue;
+        if (restoreSelectorWhenSettled.current &&
+            isEmptyValue &&
+            typeIsAnyLike &&
+            hasTemplatesOnOffer &&
+            allowTemplates &&
+            !effectiveIsFunction) {
+            restoreSelectorWhenSettled.current = false;
+            setTemplateValue(null);
+            setIsTemplate(true);
+        }
+    }, [isEmptyValue, typeIsAnyLike, hasTemplatesOnOffer, allowTemplates, effectiveIsFunction]);
     (0, react_2.useEffect)(function () {
         if (allowCustomValues && isTemplate && value && !(0, templates_1.isValueTemplate)(value)) {
             setIsTemplate(false);
@@ -279,6 +442,16 @@ exports.TemplateField = (0, react_2.memo)(function (_a) {
                 !(0, templates_1.isCompleteTemplateToken)(value)) {
                 return;
             }
+            // A template reference with an OPERATOR on it (`$local:count + 1`) is
+            // an expression, not a template. The loose check above passes it —
+            // it starts with `$` and has a colon — so without this every such
+            // string was swallowed into template mode, where the arithmetic is
+            // dead text and no affordance can reach it. A token standing alone
+            // (`$local:count`, `$data:{1.field}`) has no operator and still
+            // flips, which is the case template mode is for.
+            if (!(0, templates_1.isCompleteTemplateToken)(value) && (0, dpqlDetection_1.mightBeDpqlExpression)(value)) {
+                return;
+            }
             setIsTemplate(true);
             setTemplateValue(value);
         }
@@ -299,7 +472,22 @@ exports.TemplateField = (0, react_2.memo)(function (_a) {
     // keep the string editor too; the chip-in-editor treatment arrives with
     // the rich-text string mode.
     var templateValueIsBracedToken = (0, templates_1.isBracedTemplateToken)(templateValue);
-    var templateSupportsCustomValues = allowCustomValues && type === 'string' && !hasOnlyAllowedValues;
+    /* An UNTYPED field can be typed into as well as picked from.
+    
+       Template mode has a typable editor whenever the field's type can hold
+       arbitrary text, and `any`/`auto` can — it is the type that has not been
+       narrowed yet, not a type that excludes text. Restricting this to
+       `string` meant an empty untyped field opened on template mode with no
+       editor to offer, so it fell through to the pick-only "Select Template"
+       dropdown: a control that can only choose from a list, on exactly the
+       fields where an author most often needs to write something the list
+       cannot hold — a deeper walk, a literal, or an expression.
+    
+       Reported against a Qorus assertion's Expected Value, and it was never
+       specific to that field: every empty untyped field with templates on
+       offer got the same downgrade. The editor still offers the same templates
+       on focus, so nothing is lost by being able to type as well. */
+    var templateSupportsCustomValues = allowCustomValues && (type === 'string' || typeIsAnyLike) && !hasOnlyAllowedValues;
     var showTemplatesDropdown = allowTemplates && (!allowCustomValues || (isTemplate && !templateSupportsCustomValues));
     var hasOnlyExpressions = !allowCustomValues && !allowTemplates && allowFunctions;
     // True when some input control renders besides the ⋮ menu. When nothing
@@ -330,11 +518,20 @@ exports.TemplateField = (0, react_2.memo)(function (_a) {
     // If the field has allowed values and supports templates, we do not want to overwrite the field type with the template type
     function (item) {
         // If the template type is richtext, we need to wrap the template value in the richtext template format
-        var value = item.badge === 'richtext'
-            ? [
+        var value = item.badge === 'richtext' ?
+            [
                 {
                     type: 'paragraph',
+                    /* The empty text nodes on either side are load-bearing. A
+                         chip is an inline VOID: it holds no text of its own, so the
+                         only places a cursor can go are the text nodes AROUND it.
+                         Slate treats that as an invariant and repairs it during
+                         normalisation, which runs on edits but NOT on a document
+                         handed in whole as a controlled value — which is what this
+                         is. Without them the picked template renders as a chip that
+                         cannot be typed after, so it can never be extended by hand. */
                     children: [
+                        { text: '' },
                         {
                             children: [{ text: '' }],
                             label: item.label,
@@ -342,6 +539,7 @@ exports.TemplateField = (0, react_2.memo)(function (_a) {
                             value: item.value,
                             metadata: item.metadata,
                         },
+                        { text: '' },
                     ],
                 },
             ]
@@ -352,7 +550,15 @@ exports.TemplateField = (0, react_2.memo)(function (_a) {
     // `SaveValueButton` in the controls menu — the saved-values storage is
     // IDE-only, so the menu item is dropped (`allowSaving` is inert).
     var handleRemoveTemplateClick = (0, react_2.useCallback)(function () {
+        /* This is the `×` ON the template control, and it means "I do not want a
+           template here" — on a field whose menu offers no `Set Custom Value` it
+           is the ONLY way to reach a literal. So it still drops to the custom
+           value editor, and it tells the empty-field rule below to keep its hands
+           off this particular clear: that rule watches the value going away, and
+           this handler clears the value too, so without the flag it would send
+           the author straight back to the selector they just dismissed. */
         if (allowCustomValues) {
+            suppressSelectorRestore.current = true;
             setIsTemplate(false);
         }
         setTemplateValue(null);
@@ -389,22 +595,229 @@ exports.TemplateField = (0, react_2.memo)(function (_a) {
     var handleExpressionChange = (0, react_2.useCallback)(function (expressionValue, remove) {
         if (remove) {
             setInternalIsFunction(false);
+            // The expression is gone, so there is no longer a switch to undo.
+            setExpressionFromText(null);
+        }
+        onChange(name, expressionValue === null || expressionValue === void 0 ? void 0 : expressionValue.value, expressionDataType, !remove);
+    }, [name, onChange, expressionDataType, value]);
+    // ─── Text typed into a plain field that is really a DPQL expression ───
+    //
+    // A field that accepts expressions still gets DPQL TYPED into it, in the
+    // ordinary editor, by an author who never opened the expression view.
+    // What happens then depends on the field's own type, and the asymmetry is
+    // deliberate: text that could stand as a literal here is only ever
+    // OFFERED, because silently rewriting the string `a + b` into a
+    // concatenation would destroy a value the author meant. Text that could
+    // NOT be a literal here was already an error the moment it was typed, so
+    // switching costs nothing and explains the error.
+    //
+    // The server decides whether the text is an expression at all — see
+    // `helpers/dpqlDetection` for why a successful parse alone means nothing.
+    var validationField = (0, react_2.useMemo)(function () { return ({
+        validation_regex: rest.validation_regex,
+        has_to_be_valid_identifier: rest.has_to_be_valid_identifier,
+        has_to_have_value: rest.has_to_have_value,
+        rules: rest.rules,
+        arg_schema: rest.arg_schema,
+    }); }, [
+        rest.validation_regex,
+        rest.has_to_be_valid_identifier,
+        rest.has_to_have_value,
+        JSON.stringify(rest.rules),
+        JSON.stringify(rest.arg_schema),
+    ]);
+    var enterExpressionFromText = (0, react_2.useCallback)(function (text, expression) {
+        var _a;
+        setDpqlOffer(null);
+        setExpressionFromText(text);
+        setInternalIsFunction(true);
+        setIsTemplate(false);
+        setTemplateValue(null);
+        // `dpql/parse` answers with the field-ready envelope
+        // (`{is_expression, value}`); this field stores the inner AST and
+        // signals the flag through `onChange`'s fourth argument, exactly as
+        // `handleExpressionChange` does.
+        onChange === null || onChange === void 0 ? void 0 : onChange(name, (_a = expression === null || expression === void 0 ? void 0 : expression.value) !== null && _a !== void 0 ? _a : expression, expressionDataType, true);
+    }, [name, onChange, expressionDataType]);
+    var undoExpressionFromText = (0, react_2.useCallback)(function () {
+        if (expressionFromText === null) {
+            return;
+        }
+        declinedTexts.current.add(expressionFromText);
+        setInternalIsFunction(false);
+        setExpressionFromText(null);
+        onChange === null || onChange === void 0 ? void 0 : onChange(name, expressionFromText, type, false);
+    }, [expressionFromText, name, onChange, type]);
+    var declineDpqlOffer = (0, react_2.useCallback)(function () {
+        if (dpqlOffer) {
+            declinedTexts.current.add(dpqlOffer.text);
+        }
+        setDpqlOffer(null);
+    }, [dpqlOffer]);
+    var acceptDpqlOffer = (0, react_2.useCallback)(function () {
+        if (dpqlOffer) {
+            enterExpressionFromText(dpqlOffer.text, dpqlOffer.expression);
+        }
+    }, [dpqlOffer, enterExpressionFromText]);
+    // Held in a ref so the debounce below does not depend on it. `onChange`
+    // comes from the host form and can be a fresh function on any render;
+    // with the callback in the effect's deps, a re-render caused by a
+    // DIFFERENT field would restart this field's timer, and a form the
+    // author is typing in re-renders constantly.
+    var enterExpressionRef = (0, react_2.useRef)(enterExpressionFromText);
+    (0, react_2.useEffect)(function () {
+        enterExpressionRef.current = enterExpressionFromText;
+    }, [enterExpressionFromText]);
+    // Detection only runs on a field that could hold an expression and is
+    // currently showing a plain editor — never on a read-only field, a
+    // fixed-value list, or one already in template or expression mode.
+    var canDetectDpql = !!allowFunctions &&
+        !!allowTextExpressions &&
+        !effectiveIsFunction &&
+        !isTemplate &&
+        !hasOnlyAllowedValues &&
+        !rest.readonly &&
+        !rest.readOnly &&
+        !rest.disabled;
+    (0, react_2.useEffect)(function () {
+        if (detectTimer.current) {
+            clearTimeout(detectTimer.current);
+            detectTimer.current = null;
         }
-        onChange(name, expressionValue === null || expressionValue === void 0 ? void 0 : expressionValue.value, type, !remove);
-    }, [name, onChange, type, value]);
+        /* A richtext field is still text. It hands its value back as a Slate
+           DOCUMENT rather than a flattened string — deliberately, so a chosen
+           reference cannot fuse with text typed beside it — and reading only
+           `typeof value === 'string'` here silently switched detection off for
+           every one of them the moment the field changed shape. A test
+           assertion's Value is exactly that field, and `1 + 2` typed into it
+           stopped being offered as an expression.
+  
+           `richtextToString` flattens a tag to its raw value, so a document
+           holding only a chosen reference reads as `$.result` — no operator, so
+           `mightBeDpqlExpression` rejects it below and the server is never
+           asked. */
+        var text = typeof value === 'string' ? value
+            : Array.isArray(value) ? (0, common_1.richtextToString)(value)
+                : undefined;
+        if (!canDetectDpql ||
+            !text ||
+            declinedTexts.current.has(text) ||
+            !(0, dpqlDetection_1.mightBeDpqlExpression)(text)) {
+            setDpqlOffer(null);
+            return undefined;
+        }
+        var cancelled = false;
+        detectTimer.current = setTimeout(function () {
+            detectTimer.current = null;
+            void probeDpql(text)
+                .then(function (parsed) {
+                if (cancelled) {
+                    return;
+                }
+                var outcome = (0, dpqlDetection_1.classifyTypedText)({ text: text, type: type, field: validationField, parsed: parsed });
+                if (outcome === 'switch') {
+                    enterExpressionRef.current(text, parsed.expression);
+                }
+                else if (outcome === 'offer') {
+                    setDpqlOffer({ text: text, expression: parsed.expression });
+                }
+                else {
+                    setDpqlOffer(null);
+                }
+            })
+                .catch(function () {
+                // Detection is an offer of help, never a reason for a field to
+                // break: an unreachable instance or a classifier that threw leaves
+                // the author's text exactly where they put it.
+                if (!cancelled) {
+                    setDpqlOffer(null);
+                }
+            });
+        }, DPQL_DETECT_DEBOUNCE_MS);
+        return function () {
+            cancelled = true;
+            if (detectTimer.current) {
+                clearTimeout(detectTimer.current);
+                detectTimer.current = null;
+            }
+        };
+    }, [value, canDetectDpql, type, validationField, probeDpql]);
+    var canOfferExpression = allowFunctions && !hasOnlyAllowedValues && !rest.readonly && !internalIsFunction;
+    var canOfferTemplate = showTemplateToggle && !isTemplate;
+    var publishedItems = (0, react_2.useMemo)(function () { return __spreadArray(__spreadArray(__spreadArray([], (canOfferExpression && !functions.loading
+        ? [
+            {
+                label: 'Use Expression',
+                icon: 'Functions',
+                tooltip: 'Run a function on this value',
+                onClick: handleSelectFunctionChange,
+            },
+        ]
+        : []), true), (canOfferTemplate
+        ? [
+            {
+                label: 'Use Template',
+                icon: 'MoneyDollarCircleLine',
+                tooltip: 'Use a template',
+                onClick: handleTemplateToggleClick,
+            },
+        ]
+        : []), true), (menuItems !== null && menuItems !== void 0 ? menuItems : [])
+        .filter(function (item) { return !('isDivider' in item); })
+        .map(function (item) { return ({
+        label: item.label,
+        description: item.description,
+        onClick: function () {
+            var _a;
+            return (_a = item.onClick) === null || _a === void 0 ? void 0 : _a.call(item, undefined, function () {
+                setIsTemplate(false);
+                setTemplateValue(null);
+            });
+        },
+    }); }), true); }, [
+        canOfferExpression,
+        functions.loading,
+        canOfferTemplate,
+        menuItems,
+        handleSelectFunctionChange,
+        handleTemplateToggleClick,
+    ]);
+    /* Keyed on WHICH items are offered, never on the items: they carry
+       handlers, so they are a new array every render and a row comparing them
+       by value would loop. */
+    var publishedKey = [
+        canOfferExpression && !functions.loading ? 'expression' : '',
+        canOfferTemplate ? 'template' : '',
+        "custom:".concat((menuItems !== null && menuItems !== void 0 ? menuItems : []).map(function (item) { var _a; return String((_a = item.label) !== null && _a !== void 0 ? _a : ''); }).join('|')),
+    ].join(',');
+    (0, rowMenuContext_1.useRowMenuPublisher)(rowMenu, publishedKey, publishedItems);
     var renderControls = (0, react_2.useCallback)(function () {
         var showFunctionsDropdown = allowFunctions && !hasOnlyAllowedValues && !rest.readonly && !internalIsFunction;
         var showTemplatesButton = showTemplateToggle && !isTemplate;
         // The "Set value" label promises a way to set one — reorder rows alone don't.
         var hasValueRows = showFunctionsDropdown || showTemplatesButton || (0, lodash_1.size)(menuItems) > 0;
+        /* ONE menu per control. Where this field sits in a form ROW, the row
+           already renders a ⋮ of its own, and drawing a second one beside it
+           put two menus of slightly different widths on the same control —
+           with the type choices an `any` field offers hidden in the narrower
+           one. The items are published to the row instead (see
+           `rowMenuContext`); outside a row there is nothing to publish into,
+           so the field goes on drawing its own. */
+        if (rowMenu) {
+            return null;
+        }
         if (hasOnlyExpressions) {
-            return showFunctionsDropdown ? (functions.loading ? ((0, jsx_runtime_1.jsx)(reqore_1.ReqoreSkeleton, { size: rest.size })) : ((0, jsx_runtime_1.jsx)(reqore_1.ReqoreButton, { compact: true, minimal: true, label: 'Create New Expression', className: 'function-selector', icon: 'Functions', tooltip: 'This field only accepts expressions', onClick: function () {
-                    setIsTemplate(false);
-                    setTemplateValue(null);
-                    onChange === null || onChange === void 0 ? void 0 : onChange(name, {
-                        args: [],
-                    }, undefined, true);
-                } }))) : null;
+            return (showFunctionsDropdown ?
+                functions.loading ?
+                    (0, jsx_runtime_1.jsx)(reqore_1.ReqoreSkeleton, { size: rest.size })
+                    : (0, jsx_runtime_1.jsx)(reqore_1.ReqoreButton, { compact: true, minimal: true, label: 'Create New Expression', className: 'function-selector', icon: 'Functions', tooltip: 'This field only accepts expressions', onClick: function () {
+                            setIsTemplate(false);
+                            setTemplateValue(null);
+                            onChange === null || onChange === void 0 ? void 0 : onChange(name, {
+                                args: [],
+                            }, undefined, true);
+                        } })
+                : null);
         }
         if (hasValueRows || (0, lodash_1.size)(menuActions === null || menuActions === void 0 ? void 0 : menuActions.items) > 0) {
             return ((0, jsx_runtime_1.jsx)(reqore_1.ReqorePopover, { component: reqore_1.ReqoreButton, closeOnTargetClick: true, closeOnInsideClick: false, isReqoreComponent: true, noWrapper: true, noArrow: true, placement: 'bottom-end', componentProps: {
@@ -414,10 +827,18 @@ exports.TemplateField = (0, react_2.memo)(function (_a) {
                     transparent: true,
                     size: rest.size,
                     fixed: true,
-                    // Centre the trailing menu in its flex line so it lines up with
-                    // sibling action buttons (reqore alignSelf; replaces a reqraft
-                    // `align-self !important` override of this button).
-                    alignSelf: 'center',
+                    /* Centre the trailing menu in its flex line so it lines up
+                       with sibling action buttons (reqore alignSelf; replaces a
+                       reqraft `align-self !important` override of this button).
+                    
+                       Centring is only right beside a ONE-LINE editor. The
+                       expression shell is a toolbar with an editor, a type message
+                       and a preview stacked under it, so centring put this menu
+                       somewhere down the side of that block — level with nothing,
+                       over the editor, and a long way from the Undo it belongs
+                       beside. There it goes to the top, which is where the shell's
+                       own toolbar is. */
+                    alignSelf: effectiveIsFunction ? 'flex-start' : 'center',
                     label: hasInputAffordance || !hasValueRows ? undefined : 'Set value',
                     style: hasInputAffordance ?
                         {
@@ -437,7 +858,17 @@ exports.TemplateField = (0, react_2.memo)(function (_a) {
                             },
                         },
                     },
-                }, handler: 'click', content: (0, jsx_runtime_1.jsxs)(reqore_1.ReqoreMenu, { size: rest.size, maxHeight: '400px', style: { overflow: 'auto' }, children: [showFunctionsDropdown ? (functions.loading ? ((0, jsx_runtime_1.jsx)(reqore_1.ReqoreSkeleton, { size: rest.size })) : ((0, jsx_runtime_1.jsx)(reqore_1.ReqoreButton, { compact: true, transparent: true, label: 'Use Expression', className: 'function-selector', icon: 'Functions', tooltip: 'Run a function on this value', onClick: handleSelectFunctionChange }))) : null, showTemplatesButton ? ((0, jsx_runtime_1.jsxs)(reqore_1.ReqoreButton, { transparent: true, icon: 'MoneyDollarCircleLine', className: 'template-toggle', tooltip: 'Use a template', compact: true, size: rest.size, onClick: handleTemplateToggleClick, children: [' ', "Use Template", ' '] })) : null, (0, lodash_1.size)(menuActions === null || menuActions === void 0 ? void 0 : menuActions.items) > 0 ? ((0, jsx_runtime_1.jsx)(MenuActionsSection, { actions: menuActions, size: rest.size })) : null, (0, lodash_1.size)(menuItems) > 0 ? ((0, jsx_runtime_1.jsx)(exports.CustomMenuItems, { items: menuItems, setIsTemplate: setIsTemplate, setTemplateValue: setTemplateValue })) : null] }) }));
+                }, handler: 'click', content: (0, jsx_runtime_1.jsxs)(reqore_1.ReqoreMenu, { size: rest.size, maxHeight: '400px', style: { overflow: 'auto' }, children: [showFunctionsDropdown ?
+                            functions.loading ?
+                                (0, jsx_runtime_1.jsx)(reqore_1.ReqoreSkeleton, { size: rest.size })
+                                : (0, jsx_runtime_1.jsx)(reqore_1.ReqoreButton, { compact: true, transparent: true, label: 'Use Expression', className: 'function-selector', icon: 'Functions', tooltip: 'Run a function on this value', onClick: handleSelectFunctionChange })
+                            : null, showTemplatesButton ?
+                            (0, jsx_runtime_1.jsxs)(reqore_1.ReqoreButton, { transparent: true, icon: 'MoneyDollarCircleLine', className: 'template-toggle', tooltip: 'Use a template', compact: true, size: rest.size, onClick: handleTemplateToggleClick, children: [' ', "Use Template", ' '] })
+                            : null, (0, lodash_1.size)(menuActions === null || menuActions === void 0 ? void 0 : menuActions.items) > 0 ?
+                            (0, jsx_runtime_1.jsx)(MenuActionsSection, { actions: menuActions, size: rest.size })
+                            : null, (0, lodash_1.size)(menuItems) > 0 ?
+                            (0, jsx_runtime_1.jsx)(exports.CustomMenuItems, { items: menuItems, setIsTemplate: setIsTemplate, setTemplateValue: setTemplateValue })
+                            : null] }) }));
         }
         return null;
     }, [
@@ -456,15 +887,18 @@ exports.TemplateField = (0, react_2.memo)(function (_a) {
         menuItems,
         menuActions,
         internalIsFunction,
+        effectiveIsFunction,
         hasInputAffordance,
+        // the row decides whether this field draws a menu at all
+        rowMenu,
     ]);
     // When the type is a list, and it has an element type - that element type is different
     // from the field type, so we need to send down the full templates object
     // and the actual rendered field will filter it's own templates
     // This is a special case only for lists with element types
     var componentTemplates = (0, react_2.useMemo)(function () {
-        return type === 'list' && (rest.ui_element_type || rest.element_type)
-            ? templates
+        return type === 'list' && (rest.ui_element_type || rest.element_type) ?
+            templates
             : __assign(__assign({}, filteredTemplates), exports.TemplatesListProps);
     }, [JSON.stringify(filteredTemplates), rest.ui_element_type, rest.element_type, type]);
     if (effectiveIsFunction && !hasOnlyAllowedValues) {
@@ -476,12 +910,26 @@ exports.TemplateField = (0, react_2.memo)(function (_a) {
             return ((0, jsx_runtime_1.jsxs)(reqore_1.ReqoreControlGroup, { children: [(0, jsx_runtime_1.jsx)(reqore_1.ReqoreErrorBoundary, { children: (0, jsx_runtime_1.jsx)(ExpressionField_1.ExpressionField, { value: {
                                 is_expression: true,
                                 value: value,
-                            }, localTemplates: templates, type: type, returnType: (returnType || type), onChange: handleExpressionChange, readOnly: rest.readOnly || rest.disabled, expressions: rest.expressions, expressionsUrl: rest.expressions_url, serverHandled: rest.server_expression_handling, extraActions: extraActions, size: rest.size, reorder: reorder }) }), renderControls()] }));
+                            }, 
+                            // The host's per-ui_type editors reach this field through the
+                            // rest-spread; the expression shell needs them explicitly or the
+                            // builder's operands render "Unknown type!" for any consumer
+                            // ui_type (an assertion's `test-reference` Value, for one).
+                            componentOverrides: componentOverrides, localTemplates: templates, type: type, returnType: (returnType || expressionDataType), onChange: handleExpressionChange, readOnly: rest.readOnly || rest.disabled, expressions: rest.expressions, expressionsUrl: rest.expressions_url, serverHandled: rest.server_expression_handling, extraActions: extraActions, size: rest.size, 
+                            // An author who typed the expression as text is already
+                            // writing in that language — dropping them into the visual
+                            // builder would make them find their own sentence again.
+                            defaultMode: expressionFromText !== null ? 'text' : 'visual', reorder: reorder }) }), expressionFromText !== null ?
+                        (0, jsx_runtime_1.jsx)(reqore_1.ReqoreButton, { fixed: true, compact: true, minimal: true, icon: 'ArrowGoBackLine', 
+                            // No `intent` with `minimal`: a Reqore intent is a FILL, and
+                            // `muted` as TEXT is 1.3:1 on the app surface.
+                            size: rest.size, className: 'dpql-detected-undo', tooltip: "Keep \"".concat(expressionFromText, "\" as plain text instead"), onClick: undoExpressionFromText, children: "Undo" })
+                        : null, renderControls()] }));
         }
         return ((0, jsx_runtime_1.jsxs)(reqore_1.ReqoreControlGroup, { children: [(0, jsx_runtime_1.jsx)(reqore_1.ReqoreErrorBoundary, { children: (0, jsx_runtime_1.jsx)(builder_1.ExpressionBuilder, { value: {
                             is_expression: true,
                             value: value,
-                        }, localTemplates: templates, level: level, type: type, returnType: (returnType || type), onChange: handleExpressionChange, readOnly: rest.readOnly || rest.disabled, expressions: rest.expressions, expressionsUrl: rest.expressions_url, serverHandled: rest.server_expression_handling, extraActions: extraActions, reorder: reorder }) }), renderControls()] }));
+                        }, componentOverrides: componentOverrides, localTemplates: templates, level: level, type: type, returnType: (returnType || expressionDataType), onChange: handleExpressionChange, readOnly: rest.readOnly || rest.disabled, expressions: rest.expressions, expressionsUrl: rest.expressions_url, serverHandled: rest.server_expression_handling, extraActions: extraActions, reorder: reorder }) }), renderControls()] }));
     }
     if (rest.disabled) {
         if (isTemplate) {
@@ -491,9 +939,28 @@ exports.TemplateField = (0, react_2.memo)(function (_a) {
             // IDE's intent scheme. Shared with the compact read-first row.
             return (0, jsx_runtime_1.jsx)(ReadOnlyTemplateTag_1.ReadOnlyTemplateTag, { value: templateValue, templates: templates, size: rest.size });
         }
-        return (0, jsx_runtime_1.jsx)(Comp, __assign({ value: value, onChange: onChange, name: name }, rest));
+        return ((0, jsx_runtime_1.jsx)(Comp, __assign({ value: value, onChange: onChange, name: name }, rest, { componentOverrides: componentOverrides })));
     }
-    return ((0, jsx_runtime_1.jsxs)(reqore_1.ReqoreControlGroup, __assign({ fluid: rest.fluid, fixed: rest.fixed, size: rest.size }, rest, { stack: false, verticalAlign: 'flex-start', children: [!isTemplate && allowCustomValues ? ((0, jsx_runtime_1.jsx)(Component, __assign({ value: value, allowTemplates: allowTemplates, onChange: onChange, name: name, level: level }, rest, componentTypeProp, { "aria-label": fieldAriaLabel, className: "".concat(className, " template-selector"), templates: componentTemplates }))) : null, isTemplate && templateSupportsCustomValues && !templateValueIsBracedToken ? ((0, jsx_runtime_1.jsx)(LongStringField, __assign({ className: 'template-selector', type: 'string', name: 'templateVal', level: level, value: templateValue, templates: __assign(__assign({}, filteredTemplates), exports.TemplatesListProps), onChange: handleTemplateFieldChange }, rest, { "aria-label": fieldAriaLabel }))) : null, showTemplatesDropdown ||
-                (isTemplate && templateSupportsCustomValues && templateValueIsBracedToken) ? ((0, jsx_runtime_1.jsx)(exports.TemplateDropdownSelector, { allowCustomValues: allowCustomValues, templates: templates, value: templateValue, items: filteredTemplates === null || filteredTemplates === void 0 ? void 0 : filteredTemplates.items, onItemSelect: handleSelectTemplateFromList, onRemoveClick: handleRemoveTemplateClick, size: rest.size, label: label, hasOnlyAllowedValues: hasOnlyAllowedValues })) : null, renderControls()] })));
+    return ((0, jsx_runtime_1.jsxs)(reqore_1.ReqoreControlGroup, __assign({ fluid: rest.fluid, fixed: rest.fixed, size: rest.size }, rest, { stack: false, verticalAlign: 'flex-start', children: [!isTemplate && allowCustomValues ?
+                (0, jsx_runtime_1.jsx)(Component, __assign({ value: value, allowTemplates: allowTemplates, onChange: onChange, name: name, level: level }, rest, { componentOverrides: componentOverrides }, componentTypeProp, { "aria-label": fieldAriaLabel, className: "".concat(className, " template-selector"), templates: componentTemplates }))
+                : null, isTemplate && templateSupportsCustomValues && !templateValueIsBracedToken ?
+                (0, jsx_runtime_1.jsx)(LongStringField, __assign({ className: 'template-selector', type: 'string', name: 'templateVal', level: level, value: templateValue, templates: __assign(__assign({}, filteredTemplates), exports.TemplatesListProps), onChange: handleTemplateFieldChange }, rest, { "aria-label": fieldAriaLabel }))
+                : null, dpqlOffer ?
+                (0, jsx_runtime_1.jsxs)(reqore_1.ReqoreControlGroup, { fixed: true, stack: true, size: rest.size, children: [(0, jsx_runtime_1.jsx)(reqore_1.ReqoreButton, { compact: true, icon: 'Functions', intent: 'info', className: 'dpql-detected-offer', tooltip: "\"".concat(dpqlOffer.text, "\" reads as an expression. It is also valid text here, so nothing has been changed \u2014 use it as an expression?"), onClick: acceptDpqlOffer, children: "Use as expression" }), (0, jsx_runtime_1.jsx)(reqore_1.ReqoreButton, { compact: true, icon: 'CloseLine', intent: 'info', className: 'dpql-detected-dismiss', tooltip: 'Keep it as plain text', onClick: declineDpqlOffer })] })
+                : null, (showTemplatesDropdown ||
+                (isTemplate && templateSupportsCustomValues && templateValueIsBracedToken)) ?
+                (0, jsx_runtime_1.jsx)(exports.TemplateDropdownSelector, { allowCustomValues: allowCustomValues, templates: templates, value: templateValue, items: filteredTemplates === null || filteredTemplates === void 0 ? void 0 : filteredTemplates.items, onItemSelect: handleSelectTemplateFromList, onRemoveClick: handleRemoveTemplateClick, size: rest.size, label: label, hasOnlyAllowedValues: hasOnlyAllowedValues })
+                : null, renderControls()] })));
+});
+/**
+ * The row channel belongs to the row's OWN editor: this field. It is read here
+ * and hidden from everything this field renders, so a field nested inside it —
+ * an expression operand, a list item — keeps drawing its own menu instead of
+ * publishing actions into a row menu that cannot say which value they act on.
+ * `undefined` outside a row, where this field draws its own menu too.
+ */
+exports.TemplateField = (0, react_2.memo)(function (props) {
+    var rowMenu = (0, rowMenuContext_1.useRowMenu)();
+    return ((0, jsx_runtime_1.jsx)(rowMenuContext_1.RowMenuContext.Provider, { value: undefined, children: (0, jsx_runtime_1.jsx)(TemplateFieldImpl, __assign({}, props, { rowMenu: rowMenu })) }));
 });
 //# sourceMappingURL=TemplateField.js.map