@qoretechnologies/reqraft 0.10.55-pr.124.g77dd26c → 0.10.55

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,17 @@ 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 singleLineString_1 = require("../../../../helpers/singleLineString");
+var optionUiTypes_1 = require("../../../../helpers/optionUiTypes");
+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',
@@ -172,24 +196,31 @@ var MenuTrailingItems = (0, react_2.memo)(function (_a) {
 // A direct child of `ReqoreMenu`, like `CustomMenuItems`, so the menu hands it
 // the popover's `closePopover` — a section does not pass it on to its rows.
 var MenuActionsSection = (0, react_2.memo)(function (_a) {
-    var actions = _a.actions, closePopover = _a.closePopover, size = _a.size, rest = __rest(_a, ["actions", "closePopover", "size"]);
-    return ((0, jsx_runtime_1.jsx)(reqore_1.ReqoreMenuSection, __assign({ label: actions.label, icon: actions.icon, isCollapsed: true, transparent: true, className: 'template-menu-actions', size: size }, rest, { children: renderMenuActionRows(actions, closePopover, size) })));
+    var actions = _a.actions, closePopover = _a.closePopover, size = _a.size, startExpanded = _a.startExpanded, rest = __rest(_a, ["actions", "closePopover", "size", "startExpanded"]);
+    return ((0, jsx_runtime_1.jsx)(reqore_1.ReqoreMenuSection, __assign({ label: actions.label, icon: actions.icon, isCollapsed: !startExpanded, transparent: true, className: 'template-menu-actions', size: size }, rest, { children: renderMenuActionRows(actions, closePopover, size) })));
 });
 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();
-                    });
-                } })));
+    var items = _a.items, closePopover = _a.closePopover, setIsTemplate = _a.setIsTemplate, setTemplateValue = _a.setTemplateValue, startExpanded = _a.startExpanded, rest = __rest(_a, ["items", "closePopover", "setIsTemplate", "setTemplateValue", "startExpanded"]);
+    return ((0, jsx_runtime_1.jsx)(reqore_1.ReqoreMenuSection, __assign({ label: 'Set Custom Value', isCollapsed: !startExpanded, 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();
+                        });
+                    } }));
         }) })));
 });
 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
@@ -207,13 +238,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, menuTrailingItems = _a.menuTrailingItems, 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", "menuTrailingItems", "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, menuTrailingItems = _a.menuTrailingItems, 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", "menuTrailingItems", "reorder", "label"]);
     var qorusTypes = (0, useQorusTypes_1.useQorusTypes)();
     var functions = (0, useExpressions_1.useExpressions)({
         allow: !!allowFunctions,
@@ -221,6 +272,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;
@@ -232,7 +296,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,
@@ -256,19 +333,59 @@ exports.TemplateField = (0, react_2.memo)(function (_a) {
     // Only while the field is EMPTY. A field already holding a literal must
     // open showing that literal — flipping to the template view would hide a
     // value the author put there and make it look lost.
-    // ...and only when there is actually something to pick. A field with no
-    // 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 === '';
+    //
+    // A field that may hold a custom value opens there whether or not templates
+    // are on offer, and whether or not they have ARRIVED: template mode gives it
+    // a typable editor, which offers the list once there is one. Waiting for the
+    // list decided the landing from data that is async — on a cold load the
+    // type-filtered list did not exist at mount, so the field fell to the type
+    // picker and stayed there. A pick-only field (no custom values) is in
+    // template mode regardless, by the `!allowCustomValues` term.
+    var typeIsAnyLike = (0, optionUiTypes_1.isUntypedOptionType)(type);
+    /* 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);
-    var _j = (0, react_2.useState)((isDefaultTemplate ||
-        (0, templates_1.isValueTemplate)(value) ||
-        !allowCustomValues ||
-        (typeIsAnyLike && isEmptyValue && hasTemplatesOnOffer)) &&
-        allowTemplates), isTemplate = _j[0], setIsTemplate = _j[1];
+    /* 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 hasOnlyAllowedValues = (0, react_2.useMemo)(function () { return !!(0, lodash_1.size)(rest.allowed_values) && !rest.allowed_values_creatable; }, [rest.allowed_values, rest.allowed_values_creatable]);
+    /** Where this field lands when it is empty: an untyped one in template mode — see above. */
+    var emptyLandsOnTemplates = typeIsAnyLike && (hasTemplatesOnOffer || (!!allowCustomValues && !hasOnlyAllowedValues));
+    var opensOnTemplates = isEmptyValue && emptyLandsOnTemplates;
+    var _j = (0, react_2.useState)((isDefaultTemplate || (0, templates_1.isValueTemplate)(value) || !allowCustomValues || opensOnTemplates) &&
+        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 () {
@@ -276,6 +393,58 @@ 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 &&
+            opensOnTemplates &&
+            allowTemplates &&
+            !effectiveIsFunction) {
+            restoreSelectorWhenSettled.current = false;
+            setTemplateValue(null);
+            setIsTemplate(true);
+        }
+    }, [isEmptyValue, opensOnTemplates, allowTemplates, effectiveIsFunction]);
     (0, react_2.useEffect)(function () {
         if (allowCustomValues && isTemplate && value && !(0, templates_1.isValueTemplate)(value)) {
             setIsTemplate(false);
@@ -292,6 +461,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);
         }
@@ -302,7 +481,6 @@ exports.TemplateField = (0, react_2.memo)(function (_a) {
             onChange === null || onChange === void 0 ? void 0 : onChange(name, templateValue, type, effectiveIsFunction);
         }
     }, [JSON.stringify(templateValue)]);
-    var hasOnlyAllowedValues = (0, react_2.useMemo)(function () { return !!(0, lodash_1.size)(rest.allowed_values) && !rest.allowed_values_creatable; }, [rest.allowed_values, rest.allowed_values_creatable]);
     var showTemplateToggle = allowCustomValues && allowTemplates && !rest.arg_schema;
     // Only a BRACED context ref (`$data:{…}` — machine-written, nobody types
     // one) renders as the picker chip (named via `resolveTemplateLabel`)
@@ -312,7 +490,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
@@ -331,23 +524,39 @@ exports.TemplateField = (0, react_2.memo)(function (_a) {
     var fieldAriaLabel = (_d = (_c = (_b = rest['aria-label']) !== null && _b !== void 0 ? _b : label) !== null && _c !== void 0 ? _c : rest.display_name) !== null && _d !== void 0 ? _d : name;
     var handleTemplateFieldChange = (0, react_2.useCallback)(function (_name, val) {
         if (!val) {
-            setIsTemplate(false);
+            /* Emptying the text leaves the field where an empty field lands. For
+               an untyped field that is THIS editor: switching to custom mode here
+               mounted a different editor in its place, so deleting the last
+               character lost the cursor. */
+            if (!(emptyLandsOnTemplates && allowTemplates)) {
+                setIsTemplate(false);
+            }
             setTemplateValue(null);
             onChange(name, undefined);
         }
         else {
             setTemplateValue(val);
         }
-    }, [name, onChange]);
+    }, [name, onChange, emptyLandsOnTemplates, allowTemplates]);
+    var handleTemplateTextChange = (0, react_2.useCallback)(function (val) { return handleTemplateFieldChange(name, typeof val === 'string' ? val : ''); }, [handleTemplateFieldChange, name]);
     var handleSelectTemplateFromList = (0, react_2.useCallback)(
     // 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,
@@ -355,6 +564,7 @@ exports.TemplateField = (0, react_2.memo)(function (_a) {
                             value: item.value,
                             metadata: item.metadata,
                         },
+                        { text: '' },
                     ],
                 },
             ]
@@ -365,7 +575,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);
@@ -393,6 +611,24 @@ exports.TemplateField = (0, react_2.memo)(function (_a) {
         type,
         value,
     ]);
+    /* Leaving template mode from the ⋮ — the counterpart of "Use Template".
+       Template mode's editor has no `×` of its own, so without this the author
+       who switched to a template had no way back and no menu to ask with. */
+    var handleUseCustomValueClick = (0, react_2.useCallback)(function () {
+        setIsTemplate(false);
+        /* A reference cannot stay in the custom editor: the field reads it as a
+           template again and switches straight back. Anything else is text the
+           author wrote, and it survives the switch. */
+        if ((0, templates_1.isValueTemplate)(value) || (0, templates_1.isCompleteTemplateToken)(templateValue)) {
+            /* Only where the value is actually cleared. The flag is read by the
+               "emptied" effect, which never runs when the text survives — setting
+               it unconditionally left it armed to swallow the NEXT genuine clear's
+               selector restore. */
+            suppressSelectorRestore.current = true;
+            setTemplateValue(null);
+            onChange === null || onChange === void 0 ? void 0 : onChange(name, undefined);
+        }
+    }, [name, onChange, value, templateValue]);
     var handleTemplateToggleClick = (0, react_2.useCallback)(function () {
         setInternalIsFunction(false);
         onChange(name, undefined, undefined, false);
@@ -402,22 +638,262 @@ 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, type, !remove);
-    }, [name, onChange, type, value]);
+        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;
+        }
+        /* 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;
+    /* The way back out, published on the same terms the field's own ⋮ draws it.
+       A field inside a form ROW draws no menu of its own — it publishes into
+       the row's — so leaving this out of the published list meant template mode
+       was a one-way door on the surface most options are edited from. */
+    var canOfferCustomValue = showTemplateToggle && isTemplate && templateSupportsCustomValues;
+    var publishedItems = (0, react_2.useMemo)(function () { return __spreadArray(__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), (canOfferCustomValue
+        ? [
+            {
+                label: 'Use Custom Value',
+                icon: 'EditLine',
+                tooltip: 'Write the value here instead of choosing a template',
+                onClick: handleUseCustomValueClick,
+            },
+        ]
+        : []), 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,
+        canOfferCustomValue,
+        menuItems,
+        handleSelectFunctionChange,
+        handleTemplateToggleClick,
+        handleUseCustomValueClick,
+    ]);
+    /* 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' : '',
+        canOfferCustomValue ? 'custom-value' : '',
+        "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 way back out of template mode, where the editor draws no `×`.
+        var showCustomValueButton = showTemplateToggle && isTemplate && templateSupportsCustomValues;
         // 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;
+        var hasValueRows = showFunctionsDropdown || showTemplatesButton || showCustomValueButton || (0, lodash_1.size)(menuItems) > 0;
+        /* A lone group opens itself. Two of the menu's groups are collapsed
+           sections, so a menu holding nothing but one of them asked for a click
+           to reach the only thing on offer — on an untyped field, "Set Custom
+           Value" hiding the type rows behind it. Expanded, it still names what
+           its rows are and can still be collapsed. The same rule the template
+           list follows for a lone category, and the row menu already publishes
+           these rows flat. */
+        var loneSectionStartsExpanded = [
+            showFunctionsDropdown,
+            showTemplatesButton,
+            showCustomValueButton,
+            (0, lodash_1.size)(menuActions === null || menuActions === void 0 ? void 0 : menuActions.items) > 0,
+            (0, lodash_1.size)(menuItems) > 0,
+        ].filter(Boolean).length === 1;
+        /* 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 || (0, lodash_1.size)(menuTrailingItems) > 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: {
@@ -427,10 +903,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 ?
                         {
@@ -450,7 +934,21 @@ 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, (0, lodash_1.size)(menuTrailingItems) > 0 ? ((0, jsx_runtime_1.jsx)(MenuTrailingItems, { items: menuTrailingItems, size: rest.size })) : 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, showCustomValueButton ?
+                            (0, jsx_runtime_1.jsxs)(reqore_1.ReqoreButton, { transparent: true, icon: 'EditLine', className: 'template-custom-value', tooltip: 'Write the value here instead of choosing a template', compact: true, size: rest.size, onClick: handleUseCustomValueClick, children: [' ', "Use Custom Value", ' '] })
+                            : 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, startExpanded: loneSectionStartsExpanded })
+                            : null, (0, lodash_1.size)(menuItems) > 0 ?
+                            (0, jsx_runtime_1.jsx)(exports.CustomMenuItems, { items: menuItems, setIsTemplate: setIsTemplate, setTemplateValue: setTemplateValue, startExpanded: loneSectionStartsExpanded })
+                            : null, (0, lodash_1.size)(menuTrailingItems) > 0 ?
+                            (0, jsx_runtime_1.jsx)(MenuTrailingItems, { items: menuTrailingItems, size: rest.size })
+                            : null] }) }));
         }
         return null;
     }, [
@@ -458,11 +956,14 @@ exports.TemplateField = (0, react_2.memo)(function (_a) {
         functions.expressions,
         handleSelectFunctionChange,
         handleTemplateToggleClick,
+        handleUseCustomValueClick,
         hasOnlyAllowedValues,
         isTemplate,
         rest.readonly,
         rest.size,
         showTemplateToggle,
+        // reaches the menu through `templateSupportsCustomValues`
+        allowCustomValues,
         hasOnlyExpressions,
         type,
         value,
@@ -470,17 +971,31 @@ exports.TemplateField = (0, react_2.memo)(function (_a) {
         menuActions,
         menuTrailingItems,
         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
+    /* `undefined` when nothing is on offer, rather than a list with no items:
+       an editor given a list draws the control that opens it, so a field whose
+       templates were all filtered out by type opened an EMPTY menu. */
     var componentTemplates = (0, react_2.useMemo)(function () {
-        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 (type === 'list' && (rest.ui_element_type || rest.element_type)) {
+            return templates;
+        }
+        return (0, lodash_1.size)(filteredTemplates === null || filteredTemplates === void 0 ? void 0 : filteredTemplates.items) ? __assign(__assign({}, filteredTemplates), exports.TemplatesListProps) : undefined;
+    }, [
+        JSON.stringify(filteredTemplates),
+        // the list-with-element-type branch hands this back untouched
+        templates,
+        rest.ui_element_type,
+        rest.element_type,
+        type,
+    ]);
     if (effectiveIsFunction && !hasOnlyAllowedValues) {
         // SEAM (reqraft): `allowTextExpressions` swaps the IDE's bare builder
         // for the ExpressionField shell (Visual = the same builder, Text = the
@@ -490,12 +1005,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) {
@@ -505,9 +1034,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)(RichText_1.RichTextFormField, __assign({ className: 'template-selector', valueFormat: 'text', singleLine: (0, singleLineString_1.isSingleLineStringType)('string'), value: typeof templateValue === 'string' ? templateValue : '', templates: filteredTemplates, allowTemplates: true, onChange: handleTemplateTextChange }, 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