@qoretechnologies/reqraft 0.10.64 → 0.10.65-pr.137.g62fcecc

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

@@ -33,6 +33,42 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
+    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
 var __rest = (this && this.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
@@ -57,7 +93,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TemplateField = exports.isTemplateAwareUiType = exports.BuiltInTemplateAwareUiTypes = 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.DEFAULT_VALUE_TABS_LABELS = 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,
@@ -76,7 +112,6 @@ Object.defineProperty(exports, "getTemplateValue", { enumerable: true, get: func
 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");
@@ -87,16 +122,19 @@ var builder_1 = require("../../expressions/builder");
 var ExpressionField_1 = require("../../expressions/ExpressionField");
 var useExpressions_1 = require("../../expressions/useExpressions");
 var AutoFormField_1 = require("../auto/AutoFormField");
-var Boolean_1 = __importDefault(require("../boolean/Boolean"));
+var Boolean_1 = __importStar(require("../boolean/Boolean"));
 var Date_1 = require("../date/Date");
 var File_1 = require("../file/File");
 var LongString_1 = __importDefault(require("../long-string/LongString"));
-var Number_1 = __importDefault(require("../number/Number"));
+var Number_1 = __importStar(require("../number/Number"));
 var ReadOnlyTemplateTag_1 = require("./ReadOnlyTemplateTag");
 var RichText_1 = require("../rich-text/RichText");
+var TemplateBrowser_1 = require("./TemplateBrowser");
 var common_1 = require("../../../../helpers/common");
 var singleLineString_1 = require("../../../../helpers/singleLineString");
 var optionUiTypes_1 = require("../../../../helpers/optionUiTypes");
+var expressions_1 = require("../../../../helpers/expressions");
+var writtenAsText_1 = require("./writtenAsText");
 var rowMenuContext_1 = require("../../engine/rowMenuContext");
 /**
  * How long the author must pause before typed text is sent to the DPQL
@@ -128,13 +166,15 @@ var LongStringField = function (_a) {
     var name = _a.name, onChange = _a.onChange, type = _a.type, level = _a.level, allowTemplates = _a.allowTemplates, rest = __rest(_a, ["name", "onChange", "type", "level", "allowTemplates"]);
     return ((0, jsx_runtime_1.jsx)(LongString_1.default, __assign({}, rest, { type: type, onChange: function (value) { return onChange === null || onChange === void 0 ? void 0 : onChange(name, value); } })));
 };
+// `type` becomes the kind of number it holds: without it, a float field took every number for a
+// whole one.
 var Number = function (_a) {
     var name = _a.name, onChange = _a.onChange, type = _a.type, level = _a.level, allowTemplates = _a.allowTemplates, rest = __rest(_a, ["name", "onChange", "type", "level", "allowTemplates"]);
-    return ((0, jsx_runtime_1.jsx)(Number_1.default, __assign({}, rest, { onChange: function (value) { return onChange === null || onChange === void 0 ? void 0 : onChange(name, value); } })));
+    return ((0, jsx_runtime_1.jsx)(Number_1.default, __assign({}, rest, { type: (0, Number_1.numberKindOf)(type), onChange: function (value) { return onChange === null || onChange === void 0 ? void 0 : onChange(name, value); } })));
 };
 var BooleanField = function (_a) {
     var name = _a.name, onChange = _a.onChange, value = _a.value, type = _a.type, level = _a.level, allowTemplates = _a.allowTemplates, rest = __rest(_a, ["name", "onChange", "value", "type", "level", "allowTemplates"]);
-    return ((0, jsx_runtime_1.jsx)(Boolean_1.default, __assign({}, rest, { checked: !!value, onChange: function (checked) { return onChange === null || onChange === void 0 ? void 0 : onChange(name, checked); } })));
+    return ((0, jsx_runtime_1.jsx)(Boolean_1.default, __assign({}, rest, { checked: (0, Boolean_1.yesNoShown)(value), onChange: function (checked) { return onChange === null || onChange === void 0 ? void 0 : onChange(name, checked); } })));
 };
 var DateField = function (_a) {
     var name = _a.name, onChange = _a.onChange, type = _a.type, level = _a.level, allowTemplates = _a.allowTemplates, rest = __rest(_a, ["name", "onChange", "type", "level", "allowTemplates"]);
@@ -148,6 +188,15 @@ var FileField = function (_a) {
     var name = _a.name, onChange = _a.onChange, type = _a.type, level = _a.level, allowTemplates = _a.allowTemplates, rest = __rest(_a, ["name", "onChange", "type", "level", "allowTemplates"]);
     return ((0, jsx_runtime_1.jsx)(File_1.ReqraftFileFormField, __assign({}, rest, { onChange: function (value) { return onChange === null || onChange === void 0 ? void 0 : onChange(name, value); } })));
 };
+/** The box a value written as text is drawn in, by `textWidth` (see it). */
+var FIELD_WIDTH_BOX = {
+    width: '150px',
+    maxWidth: '100%',
+    minWidth: 'fit-content',
+};
+var CONTENT_WIDTH_BOX = { width: 'auto', maxWidth: '100%', minWidth: 0 };
+/** The editor in a `content` box: never narrower than a free text field. */
+var CONTENT_WIDTH_EDITOR = { minWidth: '150px' };
 exports.ComponentMap = {
     string: LongStringField,
     number: Number,
@@ -162,6 +211,45 @@ exports.ComponentMap = {
     richtext: RichTextField,
     file: FileField,
 };
+/** The keyboard a whole number or a number is typed on, on the Value tab. */
+var TEXTABLE_INPUT_MODES = {
+    int: 'numeric',
+    integer: 'numeric',
+    softint: 'numeric',
+    number: 'decimal',
+    float: 'decimal',
+    softfloat: 'decimal',
+    softnumber: 'decimal',
+};
+exports.DEFAULT_VALUE_TABS_LABELS = {
+    value: 'Value',
+    expression: 'Expression',
+    visual: 'Visual',
+    template: 'Template',
+    expressionTooltip: 'Write an expression - it also takes templates',
+    visualTooltip: 'Build the expression visually',
+    templateTooltip: 'Choose a template',
+    cannotShowExpression: "This expression can't be shown as a value.",
+    condition: 'Condition',
+    conditionTooltip: 'Write the condition - it also takes templates',
+    conditionVisualTooltip: 'Build the condition visually',
+    cannotShowCondition: "This condition can't be shown as a value.",
+    templateShownOn: function (tab) { return "A template is shown on the ".concat(tab, " tab, not here."); },
+    replaceWithAValue: 'Replace it with a value',
+    // the sentence starts with the first type
+    conversion: function (from, to) {
+        return "".concat(from.charAt(0).toUpperCase()).concat(from.slice(1), " is converted to ").concat(to, " when the value is used; a value that does not convert fails");
+    },
+    undo: 'Undo',
+    undoTooltip: function (text) { return "Keep \"".concat(text, "\" as a value instead"); },
+    expressionDraftNotUsed: 'The Expression tab holds text that does not parse, so the field keeps this value until it does.',
+};
+var DEFAULT_SAVED_VALUES_LABELS = {
+    save: 'Save this value',
+    saveTooltip: 'Save this value to use it again',
+    use: 'Use a saved value',
+    remove: 'Remove saved value',
+};
 var renderMenuActionRows = function (actions, closePopover, size) {
     return actions.items.map(function (item, index) {
         if ('isDivider' in item) {
@@ -215,12 +303,9 @@ exports.CustomMenuItems = (0, react_2.memo)(function (_a) {
         }) })));
 });
 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]);
+    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, templateBadge = _a.templateBadge, rest = __rest(_a, ["onItemSelect", "onRemoveClick", "items", "templates", "allowCustomValues", "hasOnlyAllowedValues", "value", "size", "templateBadge"]);
+    /* The catalogue browsed: `TemplateBrowser` draws its descriptions at the hand-off to Reqore. */
+    var browsed = (0, react_2.useMemo)(function () { return ({ items: items }); }, [items]);
     // 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
@@ -235,10 +320,10 @@ exports.TemplateDropdownSelector = (0, react_2.memo)(function (_a) {
             icon: 'ExchangeDollarLine',
         });
     }, [template]);
-    // 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: shownItems, label: label, leftIconProps: leftIconProps, caretPosition: 'right', filterable: true, size: size }, exports.TemplatesListProps)), allowCustomValues || value ?
+    // SEAM (reqraft): where the template comes from (the IDE: the app action that captures it), as the
+    // host says, beside its name
+    var badge = template && templateBadge ? templateBadge(template) : undefined;
+    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)(TemplateBrowser_1.TemplateBrowser, __assign({ className: 'template-selector', customTheme: exports.TemplatesListProps.listCustomTheme, minimal: true, compact: true, onItemSelect: onItemSelect, templates: browsed, focusFilter: true, label: label, leftIconProps: leftIconProps, badge: badge, caretPosition: 'right', 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] })] }));
 });
@@ -261,10 +346,10 @@ var isTemplateAwareUiType = function (uiType, extra) {
 };
 exports.isTemplateAwareUiType = isTemplateAwareUiType;
 var TemplateFieldImpl = (0, react_2.memo)(function (_a) {
-    var _b, _c, _d;
-    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, 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 _b, _c, _d, _e, _f, _g, _h;
+    var rowMenu = _a.rowMenu, value = _a.value, name = _a.name, onChange = _a.onChange, _j = _a.component, Comp = _j === void 0 ? AutoFormField_1.AutoFormField : _j, templates = _a.templates, interfaceContext = _a.interfaceContext, // eslint-disable-line @typescript-eslint/no-unused-vars
+    _k = _a.allowTemplates, // eslint-disable-line @typescript-eslint/no-unused-vars
+    allowTemplates = _k === void 0 ? true : _k, allowFunctions = _a.allowFunctions, allowTextExpressions = _a.allowTextExpressions, valueTabs = _a.valueTabs, valueTabsLabels = _a.valueTabsLabels, expressionModeLabels = _a.expressionModeLabels, _l = _a.textWidth, textWidth = _l === void 0 ? 'field' : _l, savedValues = _a.savedValues, templateBadge = _a.templateBadge, extraActions = _a.extraActions, componentOverrides = _a.componentOverrides, _m = _a.allowCustomValues, allowCustomValues = _m === void 0 ? true : _m, _o = _a.filterTemplatesByType, filterTemplatesByType = _o === void 0 ? true : _o, 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", "valueTabs", "valueTabsLabels", "expressionModeLabels", "textWidth", "savedValues", "templateBadge", "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,
@@ -369,17 +454,74 @@ var TemplateFieldImpl = (0, react_2.memo)(function (_a) {
     /** 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];
+    /* An untyped field holding null is written in the same text field, as `null`: the editor an untyped
+       field otherwise falls to drew null as an empty box, the same as a field holding nothing, so the
+       author could not tell the two apart (qorus#646). */
+    var nullWrittenAsText = value === null && typeIsAnyLike && !!allowCustomValues && !hasOnlyAllowedValues;
+    /* The tabs a value is entered on (qorus#646, David): Value · Expression · Visual where the field takes
+       templates and expressions written as text, Value · Template where it takes templates only, none where
+       it takes no templates. One value, three views: see `selectTab`. */
+    var valueTabIsText = (0, writtenAsText_1.isWrittenAsTextOnTheValueTab)(type) && !hasOnlyAllowedValues;
+    var tabsKind = !valueTabs || !allowTemplates || editorHandlesTemplates || rest.arg_schema ? undefined
+        : allowFunctions && allowTextExpressions && !hasOnlyAllowedValues ? 'full'
+            : 'template';
+    /** The value is an expression (its AST), as the host says. */
+    var valueIsExpression = !!(isFunction || isDefaultFunction) && value !== null && typeof value === 'object';
+    /** An expression that is nothing but one template (`value($record:{pos})`, as a host may hold a reference to
+     *  a field): the Value tab shows it as that template, where it can show no other expression (qorus#646). */
+    var expressionTemplate = valueIsExpression ? (0, writtenAsText_1.templateOfExpression)(value) : undefined;
+    /** Where a saved value opens: an expression on Expression; a template on Value where it is written as
+     *  text, else on Expression (or Template, for a template-only field); anything else on Value. */
+    var _p = (0, react_2.useState)(function () {
+        if (!tabsKind)
+            return 'value';
+        if (valueIsExpression)
+            return tabsKind === 'full' ? 'expression' : 'value';
+        if (typeof value === 'string' && (0, templates_1.isValueTemplate)(value) && !valueTabIsText) {
+            return tabsKind === 'full' ? 'expression' : 'template';
+        }
+        return 'value';
+    }), tab = _p[0], setTab = _p[1];
+    var opensInExpressionText = tabsKind === 'full' && tab === 'expression' && !valueIsExpression;
+    var tabsKindRef = (0, react_2.useRef)(tabsKind);
+    tabsKindRef.current = tabsKind;
+    /** What the Text view is seeded with when the value is not an expression yet; null outside it. */
+    var _q = (0, react_2.useState)(opensInExpressionText ? (0, writtenAsText_1.expressionTextOfValue)(value) : null), expressionSeed = _q[0], setExpressionSeed = _q[1];
+    /* What the author wrote on the Expression tab that the field does not hold (it did not parse), and the value
+       it was written over. The tab's editor goes when the tab is left; the next visit shows the text as it was
+       written while the field still holds that value, not the value written out (qorus#646). */
+    var expressionDraft = (0, react_2.useRef)(null);
+    var valueRef = (0, react_2.useRef)(value);
+    valueRef.current = value;
+    var handleExpressionDraft = (0, react_2.useCallback)(function (text) {
+        expressionDraft.current = text === undefined ? null : { text: text, over: valueRef.current };
+    }, []);
+    /** The draft the Expression tab's editor is given back on this visit; null when there is none. */
+    var _r = (0, react_2.useState)(null), expressionDraftText = _r[0], setExpressionDraftText = _r[1];
+    /** Whether the Expression tab was left with a draft (see the Value tab's note); read with the value it holds. */
+    var _s = (0, react_2.useState)(false), leftWithDraft = _s[0], setLeftWithDraft = _s[1];
+    var hasExpressionDraft = leftWithDraft && !!expressionDraft.current && (0, lodash_1.isEqual)(expressionDraft.current.over, value);
+    var _t = (0, react_2.useState)(tabsKind ?
+        tab === 'template' || (tab === 'value' && valueTabIsText)
+        : (isDefaultTemplate ||
+            (0, templates_1.isValueTemplate)(value) ||
+            !allowCustomValues ||
+            opensOnTemplates ||
+            nullWrittenAsText) &&
+            !!allowTemplates), isTemplateState = _t[0], setIsTemplate = _t[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];
+    var _u = (0, react_2.useState)(tabsKind ? tab === 'expression' || tab === 'visual' : !!isDefaultFunction && !!allowFunctions), internalIsFunction = _u[0], setInternalIsFunction = _u[1];
+    var _v = (0, react_2.useState)(value), templateValue = _v[0], setTemplateValue = _v[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];
+    var _w = (0, react_2.useState)(null), dpqlOffer = _w[0], setDpqlOffer = _w[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];
+    var _x = (0, react_2.useState)(null), expressionFromText = _x[0], setExpressionFromText = _x[1];
+    /* The view the expression editor (without value tabs) is on. It opens on Text (qorus#646, David); when it
+       is mounted again - an expression removed in Visual and put back empty by its host, as a row rule's
+       condition is - it opens where the author was, not back on Text. */
+    var _y = (0, react_2.useState)('text'), expressionMode = _y[0], setExpressionMode = _y[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.
@@ -392,6 +534,12 @@ var TemplateFieldImpl = (0, react_2.memo)(function (_a) {
         if (isTemplate && (0, templates_1.isValueTemplate)(value)) {
             setTemplateValue(value);
         }
+        /* Emptied from outside the editor - the card's "Clear value", an undo, a host's reset - the text the
+           value is written in is emptied too. It kept its own copy, so a cleared value went on showing what it
+           had held (qorus#646: "Clear value" had no effect). The editor's own emptying sets this already. */
+        if (isEmptyValue && templateValue) {
+            setTemplateValue(null);
+        }
     }, [JSON.stringify(value)]);
     /* Clearing an untyped field returns it to the template selector, which is
        where mounting it empty already lands.
@@ -450,8 +598,19 @@ var TemplateFieldImpl = (0, react_2.memo)(function (_a) {
             setIsTemplate(false);
         }
     }, [allowCustomValues]);
+    // null arriving later (written in the Text tab, say) is written in the text field too - see above
+    (0, react_2.useEffect)(function () {
+        if (!isTemplate && nullWrittenAsText && allowTemplates) {
+            setTemplateValue(null);
+            setIsTemplate(true);
+        }
+    }, [nullWrittenAsText, allowTemplates]);
     (0, react_2.useEffect)(function () {
-        if (!isTemplate && (0, templates_1.isValueTemplate)(value) && allowTemplates) {
+        // a template on the Expression tab stays there: it is the expression editor's to show
+        if (!isTemplate &&
+            (0, templates_1.isValueTemplate)(value) &&
+            allowTemplates &&
+            !(tabsKind && internalIsFunction)) {
             // In auto mode, leave user-typed dollar-strings alone ('$foo: hello'
             // passes the loose check) — but a string that IS one well-formed token
             // ($data:{…}, $config:item) must still flip into template mode, or an
@@ -478,20 +637,23 @@ var TemplateFieldImpl = (0, react_2.memo)(function (_a) {
     // When template key or template value change run the onChange function
     (0, react_use_1.useUpdateEffect)(function () {
         if (templateValue) {
-            onChange === null || onChange === void 0 ? void 0 : onChange(name, templateValue, type, effectiveIsFunction);
+            /* On the tabs this text is the Value or the Template tab's - a value, never an expression -
+               whichever tab is open by the time it arrives: an edit sent as its field goes away (the tab
+               switched straight after it) arrives on the next tab (qorus#646). */
+            var asExpression = tabsKindRef.current ? false : effectiveIsFunction;
+            /* Read from the text where the field is written as text: a lone template takes its own
+               type in an untyped field, a scalar's literal is that literal, other text is text. */
+            if (templateSupportsCustomValues) {
+                var read = (0, writtenAsText_1.templateTextValue)(templateValue, type, filteredTemplates);
+                onChange === null || onChange === void 0 ? void 0 : onChange(name, read.value, read.type, asExpression);
+                return;
+            }
+            onChange === null || onChange === void 0 ? void 0 : onChange(name, templateValue, type, asExpression);
         }
     }, [JSON.stringify(templateValue)]);
     // an editor that takes templates into its own text has no template mode to switch to: "Use Template"
     // there emptied the field and showed nothing in its place
     var showTemplateToggle = allowCustomValues && allowTemplates && !rest.arg_schema && !editorHandlesTemplates;
-    // Only a BRACED context ref (`$data:{…}` — machine-written, nobody types
-    // one) renders as the picker chip (named via `resolveTemplateLabel`)
-    // rather than as its raw text in a string editor. Plain word-path tokens
-    // (`$local:id`) are typeable, so per the build #123 review they keep the
-    // input that offers templates while typing. Mixed text-and-token strings
-    // keep the string editor too; the chip-in-editor treatment arrives with
-    // the rich-text string mode.
-    var templateValueIsBracedToken = (0, templates_1.isBracedTemplateToken)(templateValue);
     /* 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
@@ -507,9 +669,16 @@ var TemplateFieldImpl = (0, react_2.memo)(function (_a) {
        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;
+    /* And so can a scalar: a whole number, a number or a yes/no is written as text too
+       (qorus#646). A template chosen into it is a chip in that text, not a pick-only
+       control that holds the template and nothing else, so text can be written around it;
+       what the field then holds is read from the text (writtenAsText). A date keeps its
+       date control. */
+    var templateSupportsCustomValues = allowCustomValues && (0, writtenAsText_1.isWrittenAsText)(type) && !hasOnlyAllowedValues;
     var showTemplatesDropdown = allowTemplates && (!allowCustomValues || (isTemplate && !templateSupportsCustomValues));
     var hasOnlyExpressions = !allowCustomValues && !allowTemplates && allowFunctions;
+    /** A date field with templates on offer: they are offered beside its date control. */
+    var dateTakesTemplates = type === 'date' && !!allowTemplates && hasTemplatesOnOffer && !hasOnlyAllowedValues;
     // True when some input control renders besides the ⋮ menu. When nothing
     // does (an empty `any` field: custom values are disallowed and the value's
     // type is picked FROM the menu), the menu trigger is the field's only
@@ -529,8 +698,11 @@ var TemplateFieldImpl = (0, react_2.memo)(function (_a) {
             /* 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)) {
+               character lost the cursor. A field written as text (a whole number, a
+               number, a yes/no) is the same: deleting the template in it left a
+               different, empty editor in its place, and what was typed next went
+               nowhere. */
+            if (!((emptyLandsOnTemplates || templateSupportsCustomValues) && allowTemplates)) {
                 setIsTemplate(false);
             }
             setTemplateValue(null);
@@ -539,7 +711,7 @@ var TemplateFieldImpl = (0, react_2.memo)(function (_a) {
         else {
             setTemplateValue(val);
         }
-    }, [name, onChange, emptyLandsOnTemplates, allowTemplates]);
+    }, [name, onChange, emptyLandsOnTemplates, templateSupportsCustomValues, 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
@@ -576,6 +748,15 @@ var TemplateFieldImpl = (0, react_2.memo)(function (_a) {
     // SEAM (reqraft): the IDE computes `canSaveValue` here and renders a
     // `SaveValueButton` in the controls menu — the saved-values storage is
     // IDE-only, so the menu item is dropped (`allowSaving` is inert).
+    /* A template chosen beside a date control is the value at once, IN the template control: handed to
+       the form while the field was still drawing its date control, the reference reached the date
+       picker first, which threw on it ("Invalid ISO 8601 date time string"). */
+    var handleSelectDateTemplate = (0, react_2.useCallback)(function (item) {
+        if (typeof (item === null || item === void 0 ? void 0 : item.value) !== 'string')
+            return;
+        setIsTemplate(true);
+        setTemplateValue(item.value);
+    }, []);
     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
@@ -631,6 +812,146 @@ var TemplateFieldImpl = (0, react_2.memo)(function (_a) {
             onChange === null || onChange === void 0 ? void 0 : onChange(name, undefined);
         }
     }, [name, onChange, value, templateValue]);
+    /* One value, three views (qorus#646, David). Value → Expression writes the literal or template as
+       expression text, emitting nothing until it is edited. Expression ↔ Visual is the editor's own toggle.
+       Expression → Value converts only a literal or a lone template; any other expression stays, and the
+       Value tab says it cannot show it and offers to replace it. Nothing is lost silently. */
+    /** Reads the Expression tab's text typed and not yet read (see `ExpressionField.flushRef`). */
+    var expressionFlush = (0, react_2.useRef)(null);
+    var selectTab = (0, react_2.useCallback)(function (next) { return __awaiter(void 0, void 0, void 0, function () {
+        var flushed, _a, envelope, template, literal, draft, keepsDraft;
+        var _b;
+        return __generator(this, function (_c) {
+            switch (_c.label) {
+                case 0:
+                    if (next === tab)
+                        return [2 /*return*/];
+                    if (!(tab === 'expression')) return [3 /*break*/, 2];
+                    return [4 /*yield*/, ((_b = expressionFlush.current) === null || _b === void 0 ? void 0 : _b.call(expressionFlush))];
+                case 1:
+                    _a = _c.sent();
+                    return [3 /*break*/, 3];
+                case 2:
+                    _a = undefined;
+                    _c.label = 3;
+                case 3:
+                    flushed = _a;
+                    // left with text that did not parse: the Value tab says the field keeps its value
+                    setLeftWithDraft(tab === 'expression' && !flushed && !!expressionDraft.current);
+                    envelope = flushed !== null && flushed !== void 0 ? flushed : (valueIsExpression ? { is_expression: true, value: value } : undefined);
+                    if (next === 'value' || next === 'template') {
+                        if (envelope) {
+                            template = (0, writtenAsText_1.loneTemplateOf)(envelope);
+                            literal = template === undefined ? (0, writtenAsText_1.loneValueOf)(envelope) : undefined;
+                            if (template !== undefined) {
+                                setTemplateValue(template);
+                                onChange === null || onChange === void 0 ? void 0 : onChange(name, template, type, false);
+                            }
+                            else if (literal !== undefined) {
+                                setTemplateValue((0, writtenAsText_1.valueTextOf)(literal.value, type) || null);
+                                onChange === null || onChange === void 0 ? void 0 : onChange(name, literal.value, type, false);
+                            }
+                        }
+                        setInternalIsFunction(false);
+                        setExpressionFromText(null);
+                        setIsTemplate(next === 'template' || valueTabIsText);
+                    }
+                    else {
+                        /* The seed is the value written as text while it is not an expression yet. One that is shows itself:
+                           a seed left from an earlier visit was shown in its place - the value as it was opened, not the
+                           expression written since - and leaving the tab saved it (qorus#646). */
+                        setExpressionSeed(!flushed && !valueIsExpression ? (0, writtenAsText_1.expressionTextOfValue)(value) : null);
+                        draft = expressionDraft.current;
+                        keepsDraft = !flushed && !!draft && (0, lodash_1.isEqual)(draft.over, value);
+                        if (!keepsDraft)
+                            expressionDraft.current = null;
+                        setExpressionDraftText(keepsDraft ? draft.text : null);
+                        setInternalIsFunction(true);
+                    }
+                    setTab(next);
+                    return [2 /*return*/];
+            }
+        });
+    }); }, [tab, valueIsExpression, value, name, onChange, type, valueTabIsText]);
+    /** Replace what a tab cannot show with an empty value of its own kind. */
+    var replaceWithAValue = (0, react_2.useCallback)(function () {
+        setInternalIsFunction(false);
+        setTemplateValue(null);
+        setExpressionSeed(null);
+        onChange === null || onChange === void 0 ? void 0 : onChange(name, undefined, type, false);
+    }, [name, onChange, type]);
+    /* A saved value is the value at once, shown where its kind is: a template on the Value tab where the
+       field is written as text, else on the Expression tab (or Template, for a template-only field); any
+       other value on the Value tab - or, without tabs, in template mode for a template. */
+    var takeSavedValue = (0, react_2.useCallback)(function (saved) {
+        var isSavedTemplate = typeof saved === 'string' && (0, templates_1.isValueTemplate)(saved);
+        setExpressionFromText(null);
+        setTemplateValue(typeof saved === 'string' ? saved : null);
+        if (tabsKindRef.current) {
+            var next = isSavedTemplate && !valueTabIsText ?
+                tabsKindRef.current === 'full' ?
+                    'expression'
+                    : 'template'
+                : 'value';
+            setExpressionSeed(next === 'expression' ? (0, writtenAsText_1.expressionTextOfValue)(saved) : null);
+            setInternalIsFunction(next === 'expression');
+            setIsTemplate(next === 'template' || (next === 'value' && valueTabIsText));
+            setTab(next);
+        }
+        else {
+            setExpressionSeed(null);
+            setInternalIsFunction(false);
+            setIsTemplate(isSavedTemplate && !!allowTemplates);
+        }
+        onChange === null || onChange === void 0 ? void 0 : onChange(name, saved, type, false);
+    }, [name, onChange, type, valueTabIsText, allowTemplates]);
+    // the values saved for this field's type, and whether this value can be saved
+    var savedWords = __assign(__assign({}, DEFAULT_SAVED_VALUES_LABELS), savedValues === null || savedValues === void 0 ? void 0 : savedValues.labels);
+    var savedForType = (0, react_2.useMemo)(function () { var _a; return ((_a = savedValues === null || savedValues === void 0 ? void 0 : savedValues.items) !== null && _a !== void 0 ? _a : []).filter(function (item) { return item.type === type; }); }, [savedValues === null || savedValues === void 0 ? void 0 : savedValues.items, type]);
+    var editable = !rest.readonly && !rest.readOnly && !rest.disabled;
+    var canSaveValue = !!(savedValues === null || savedValues === void 0 ? void 0 : savedValues.onSave) &&
+        editable &&
+        type !== 'bool' &&
+        type !== 'boolean' &&
+        !hasOnlyAllowedValues &&
+        !valueIsExpression &&
+        !isEmptyValue &&
+        value !== null;
+    var canUseSavedValue = editable && savedForType.length > 0;
+    var savedValueItems = __spreadArray(__spreadArray([], (canSaveValue ?
+        [
+            {
+                label: savedWords.save,
+                icon: 'SaveLine',
+                tooltip: savedWords.saveTooltip,
+                className: 'save-value',
+                onClick: function () { return savedValues.onSave(value, type); },
+            },
+        ]
+        : []), true), (canUseSavedValue ?
+        [
+            {
+                label: savedWords.use,
+                icon: 'HistoryLine',
+                className: 'use-saved-value',
+                items: savedForType.map(function (item) { return (__assign({ label: item.label, description: item.description, className: 'saved-value', onClick: function () { return takeSavedValue(item.value); } }, ((savedValues === null || savedValues === void 0 ? void 0 : savedValues.onRemove) ?
+                    {
+                        rightAction: {
+                            icon: 'DeleteBinLine',
+                            intent: 'danger',
+                            minimal: true,
+                            className: 'saved-value-remove',
+                            tooltip: savedWords.remove,
+                            onClick: function (event) {
+                                event.stopPropagation();
+                                savedValues.onRemove(item.id);
+                            },
+                        },
+                    }
+                    : {}))); }),
+            },
+        ]
+        : []), true);
     var handleTemplateToggleClick = (0, react_2.useCallback)(function () {
         setInternalIsFunction(false);
         onChange(name, undefined, undefined, false);
@@ -640,11 +961,23 @@ var TemplateFieldImpl = (0, react_2.memo)(function (_a) {
     var handleExpressionChange = (0, react_2.useCallback)(function (expressionValue, remove) {
         if (remove) {
             setInternalIsFunction(false);
+            setExpressionSeed(null);
             // The expression is gone, so there is no longer a switch to undo.
             setExpressionFromText(null);
         }
+        /* On the Expression tab a lone template is kept as the expression the server parses it into,
+           template(...): the option takes expressions (qorus#646, David). A template-only option has no
+           Expression tab and keeps the bare template. A lone value (12, true) is that value, the field's own
+           shape (see `loneValueOf`). */
+        var onTabs = !!tabsKindRef.current;
+        var literal = remove || !onTabs ? undefined : (0, writtenAsText_1.loneValueOf)(expressionValue);
+        if (literal !== undefined) {
+            setExpressionSeed((0, writtenAsText_1.expressionSeedOf)(literal.value));
+            onChange(name, literal.value, type, false);
+            return;
+        }
         onChange(name, expressionValue === null || expressionValue === void 0 ? void 0 : expressionValue.value, expressionDataType, !remove);
-    }, [name, onChange, expressionDataType, value]);
+    }, [name, onChange, expressionDataType, value, type]);
     // ─── 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
@@ -675,9 +1008,16 @@ var TemplateFieldImpl = (0, react_2.memo)(function (_a) {
         var _a;
         setDpqlOffer(null);
         setExpressionFromText(text);
+        /* The value is an expression now, and the Text view shows it. A seed left from an earlier visit to
+           the Expression tab - the value as it was then - was shown in its place, and leaving the tab saved
+           it: what had just been typed was lost (qorus#646). */
+        setExpressionSeed(null);
         setInternalIsFunction(true);
         setIsTemplate(false);
         setTemplateValue(null);
+        // the Value tab never holds an expression: detected, it moves to the Expression tab, with an undo
+        if (tabsKindRef.current === 'full')
+            setTab('expression');
         // `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
@@ -690,6 +1030,10 @@ var TemplateFieldImpl = (0, react_2.memo)(function (_a) {
         }
         declinedTexts.current.add(expressionFromText);
         setInternalIsFunction(false);
+        if (tabsKind) {
+            setTab('value');
+            setIsTemplate(valueTabIsText);
+        }
         setExpressionFromText(null);
         onChange === null || onChange === void 0 ? void 0 : onChange(name, expressionFromText, type, false);
     }, [expressionFromText, name, onChange, type]);
@@ -719,7 +1063,8 @@ var TemplateFieldImpl = (0, react_2.memo)(function (_a) {
     var canDetectDpql = !!allowFunctions &&
         !!allowTextExpressions &&
         !effectiveIsFunction &&
-        !isTemplate &&
+        // the template editor is text too: an expression written around a template is detected there
+        (!isTemplate || templateSupportsCustomValues) &&
         !hasOnlyAllowedValues &&
         !rest.readonly &&
         !rest.readOnly &&
@@ -760,7 +1105,8 @@ var TemplateFieldImpl = (0, react_2.memo)(function (_a) {
                     return;
                 }
                 var outcome = (0, dpqlDetection_1.classifyTypedText)({ text: text, type: type, field: validationField, parsed: parsed });
-                if (outcome === 'switch') {
+                // on tabs, an expression detected switches (with an undo) rather than being offered
+                if (outcome === 'switch' || (outcome === 'offer' && tabsKindRef.current === 'full')) {
                     enterExpressionRef.current(text, parsed.expression);
                 }
                 else if (outcome === 'offer') {
@@ -794,26 +1140,25 @@ var TemplateFieldImpl = (0, react_2.memo)(function (_a) {
        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
-        ? [
+    var publishedItems = (0, react_2.useMemo)(function () { return __spreadArray(__spreadArray(__spreadArray(__spreadArray([], (tabsKind ?
+        []
+        : __spreadArray(__spreadArray([], (canOfferExpression && !functions.loading ?
+            [
+                __assign(__assign({ 
+                    // in a condition field the label says what it is for; the value's tooltip would only repeat it
+                    label: (0, expressions_1.isConditionOption)(rest) ? 'Write a condition' : 'Use Expression', icon: 'Functions' }, ((0, expressions_1.isConditionOption)(rest) ? {} : { tooltip: 'Run a function on this value' })), { onClick: handleSelectFunctionChange }),
+            ]
+            : []), true), (canOfferTemplate ?
+            [
+                {
+                    label: 'Use Template',
+                    icon: 'MoneyDollarCircleLine',
+                    tooltip: 'Use a template',
+                    onClick: handleTemplateToggleClick,
+                },
+            ]
+            : []), true)), true), (canOfferCustomValue && !tabsKind ?
+        [
             {
                 label: 'Use Custom Value',
                 icon: 'EditLine',
@@ -833,7 +1178,7 @@ var TemplateFieldImpl = (0, react_2.memo)(function (_a) {
                 setTemplateValue(null);
             });
         },
-    }); }), true); }, [
+    }); }), true), savedValueItems, true); }, [
         canOfferExpression,
         functions.loading,
         canOfferTemplate,
@@ -842,6 +1187,11 @@ var TemplateFieldImpl = (0, react_2.memo)(function (_a) {
         handleSelectFunctionChange,
         handleTemplateToggleClick,
         handleUseCustomValueClick,
+        // the saved values offered, and whether this value can be saved
+        canSaveValue,
+        value,
+        savedForType,
+        takeSavedValue,
     ]);
     /* 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
@@ -851,15 +1201,26 @@ var TemplateFieldImpl = (0, react_2.memo)(function (_a) {
         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('|')),
+        canSaveValue ? "save:".concat(JSON.stringify(value)) : '',
+        canUseSavedValue ? "saved:".concat(savedForType.map(function (item) { return item.id; }).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;
+        // on tabs, the tabs are the mode switch: the menu keeps value actions only
+        var showFunctionsDropdown = !tabsKind &&
+            allowFunctions &&
+            !hasOnlyAllowedValues &&
+            !rest.readonly &&
+            !internalIsFunction;
+        var showTemplatesButton = !tabsKind && showTemplateToggle && !isTemplate;
         // The way back out of template mode, where the editor draws no `×`.
-        var showCustomValueButton = showTemplateToggle && isTemplate && templateSupportsCustomValues;
+        var showCustomValueButton = !tabsKind && showTemplateToggle && isTemplate && templateSupportsCustomValues;
         // The "Set value" label promises a way to set one — reorder rows alone don't.
-        var hasValueRows = showFunctionsDropdown || showTemplatesButton || showCustomValueButton || (0, lodash_1.size)(menuItems) > 0;
+        var hasValueRows = showFunctionsDropdown ||
+            showTemplatesButton ||
+            showCustomValueButton ||
+            (0, lodash_1.size)(menuItems) > 0 ||
+            savedValueItems.length > 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
@@ -873,6 +1234,7 @@ var TemplateFieldImpl = (0, react_2.memo)(function (_a) {
             showCustomValueButton,
             (0, lodash_1.size)(menuActions === null || menuActions === void 0 ? void 0 : menuActions.items) > 0,
             (0, lodash_1.size)(menuItems) > 0,
+            canUseSavedValue,
         ].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
@@ -888,7 +1250,7 @@ var TemplateFieldImpl = (0, react_2.memo)(function (_a) {
             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 () {
+                    : (0, jsx_runtime_1.jsx)(reqore_1.ReqoreButton, { compact: true, minimal: true, label: 'Create New Expression', className: 'function-selector', icon: 'Functions', tooltip: 'This field takes an expression.', onClick: function () {
                             setIsTemplate(false);
                             setTemplateValue(null);
                             onChange === null || onChange === void 0 ? void 0 : onChange(name, {
@@ -939,8 +1301,8 @@ var TemplateFieldImpl = (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.jsx)(reqore_1.ReqoreButton, { compact: true, transparent: true, label: (0, expressions_1.isConditionOption)(rest) ? 'Write a condition' : 'Use Expression', className: 'function-selector', icon: 'Functions', tooltip: (0, expressions_1.isConditionOption)(rest) ? undefined : 'Run a function on this value', onClick: handleSelectFunctionChange })
+                            : null, showTemplatesButton && !(showFunctionsDropdown && allowTextExpressions) ?
                             (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", ' '] })
@@ -948,6 +1310,22 @@ var TemplateFieldImpl = (0, react_2.memo)(function (_a) {
                             (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, canSaveValue ?
+                            (0, jsx_runtime_1.jsx)(reqore_1.ReqoreButton, { compact: true, transparent: true, icon: 'SaveLine', className: 'save-value', tooltip: savedWords.saveTooltip, size: rest.size, onClick: function () { return savedValues.onSave(value, type); }, children: savedWords.save })
+                            : null, canUseSavedValue ?
+                            (0, jsx_runtime_1.jsx)(reqore_1.ReqoreMenuSection, { label: savedWords.use, icon: 'HistoryLine', className: 'use-saved-value', transparent: true, isCollapsed: !loneSectionStartsExpanded, children: savedForType.map(function (item) { return ((0, jsx_runtime_1.jsx)(reqore_1.ReqoreMenuItem, { className: 'saved-value', label: item.label, description: item.description, onClick: function () { return takeSavedValue(item.value); }, rightAction: (savedValues === null || savedValues === void 0 ? void 0 : savedValues.onRemove) ?
+                                        {
+                                            icon: 'DeleteBinLine',
+                                            intent: 'danger',
+                                            minimal: true,
+                                            className: 'saved-value-remove',
+                                            tooltip: savedWords.remove,
+                                            onClick: function (event) {
+                                                event.stopPropagation();
+                                                savedValues.onRemove(item.id);
+                                            },
+                                        }
+                                        : undefined }, item.id)); }) })
                             : null, (0, lodash_1.size)(menuTrailingItems) > 0 ?
                             (0, jsx_runtime_1.jsx)(MenuTrailingItems, { items: menuTrailingItems, size: rest.size })
                             : null] }) }));
@@ -959,6 +1337,7 @@ var TemplateFieldImpl = (0, react_2.memo)(function (_a) {
         handleSelectFunctionChange,
         handleTemplateToggleClick,
         handleUseCustomValueClick,
+        allowTextExpressions,
         hasOnlyAllowedValues,
         isTemplate,
         rest.readonly,
@@ -977,6 +1356,12 @@ var TemplateFieldImpl = (0, react_2.memo)(function (_a) {
         hasInputAffordance,
         // the row decides whether this field draws a menu at all
         rowMenu,
+        tabsKind,
+        canSaveValue,
+        canUseSavedValue,
+        savedForType,
+        takeSavedValue,
+        savedValues,
     ]);
     // 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
@@ -998,6 +1383,87 @@ var TemplateFieldImpl = (0, react_2.memo)(function (_a) {
         rest.element_type,
         type,
     ]);
+    // ─── Value · Expression · Visual (or Value · Template) ───────────────────────────────────────────
+    if (tabsKind && !rest.disabled) {
+        var words_1 = __assign(__assign({}, exports.DEFAULT_VALUE_TABS_LABELS), valueTabsLabels);
+        /** A type named inside a sentence: the host's own words, or the type catalogue's sentence form (none for no type). */
+        var typeInSentence = (_e = words_1.typeName) !== null && _e !== void 0 ? _e : qorusTypes.getTypeSentenceForm;
+        /* A condition field's Expression tab holds what is used as a condition, so it is called one (qorus#646):
+           "condition" where the value is used as a condition, "expression" everywhere else. */
+        var conditionField_1 = (0, expressions_1.isConditionOption)(rest);
+        var expressionTabLabel_1 = conditionField_1 ? words_1.condition : words_1.expression;
+        var tabButton = function (key, label, icon, tooltip) { return ((0, jsx_runtime_1.jsx)(reqore_1.ReqoreButton, { compact: true, size: rest.size, icon: icon, active: tab === key, "aria-pressed": tab === key, "data-tab": key, className: "value-tab value-tab-".concat(key), tooltip: tooltip, disabled: rest.readOnly || rest.readonly, onClick: function () { return selectTab(key); }, children: label }, key)); };
+        /* A lone template of another type than the field's is converted when the value is used: said as a
+           warning, not a block - whether it converts depends on the data (qorus#646, David). */
+        var loneTemplate_1 = typeof value === 'string' && (0, templates_1.isCompleteTemplateToken)(value) ? value : expressionTemplate;
+        var loneTemplateType = loneTemplate_1 && !typeIsAnyLike ?
+            (_f = (0, templates_1.findTemplate)(templates !== null && templates !== void 0 ? templates : {}, loneTemplate_1)) === null || _f === void 0 ? void 0 : _f.badge
+            : undefined;
+        // the types inside the sentence; with either one not known there is nothing to say converts to what
+        var conversionFrom = typeof loneTemplateType === 'string' && !(0, writtenAsText_1.sameValueType)(loneTemplateType, type) ?
+            typeInSentence(loneTemplateType)
+            : undefined;
+        var conversionTo = conversionFrom ? typeInSentence(type) : undefined;
+        var conversionNote_1 = conversionFrom && conversionTo ? words_1.conversion(conversionFrom, conversionTo) : undefined;
+        var cannotShow_1 = function (message) { return ((0, jsx_runtime_1.jsxs)(reqore_1.ReqoreMessage, { size: 'small', flat: true, opaque: false, intent: 'muted', className: 'value-tab-cannot-show', children: [message, ' ', (0, jsx_runtime_1.jsx)(reqore_1.ReqoreButton, { compact: true, size: rest.size, className: 'value-tab-replace', onClick: replaceWithAValue, disabled: rest.readOnly || rest.readonly, children: words_1.replaceWithAValue })] })); };
+        var valueBody = function () {
+            var _a;
+            if (valueIsExpression && expressionTemplate === undefined) {
+                return cannotShow_1(conditionField_1 ? words_1.cannotShowCondition : words_1.cannotShowExpression);
+            }
+            if (valueTabIsText) {
+                return ((0, jsx_runtime_1.jsxs)(reqore_1.ReqoreControlGroup, { vertical: true, fluid: true, gapSize: 'small', children: [(0, jsx_runtime_1.jsx)(RichText_1.RichTextFormField, __assign({ className: 'template-selector value-tab-text', valueFormat: 'text', 
+                            /* A whole number or a number is typed on a numeric keyboard where the device has one, as its own
+                               input was (qorus#646); templates are picked from the list the field opens, and an expression
+                               is written on the Expression tab. */
+                            inputMode: TEXTABLE_INPUT_MODES[type], singleLine: (0, singleLineString_1.isSingleLineStringType)('string'), value: typeof templateValue === 'string' ? templateValue : ((expressionTemplate !== null && expressionTemplate !== void 0 ? expressionTemplate : (0, writtenAsText_1.valueTextOf)(value, type))), templates: filteredTemplates, 
+                            // a chip of a field not of this type is named as the catalogue names it
+                            namingTemplates: templates, allowTemplates: true, onChange: handleTemplateTextChange }, rest, { fixed: false, fluid: true, 
+                            /* The value takes the row the tabs give it (qorus#646, David: a small box beside empty room
+                               was clicked beside, and offered nothing). An operand's own field sizes itself to its
+                               column instead - that is the field outside the tabs. */
+                            panelProps: __assign(__assign({}, rest.panelProps), { style: __assign(__assign({}, (_a = rest.panelProps) === null || _a === void 0 ? void 0 : _a.style), { width: '100%' }) }), "aria-label": fieldAriaLabel })), conversionNote_1 ?
+                            (0, jsx_runtime_1.jsx)(reqore_1.ReqoreMessage, { size: 'small', flat: true, opaque: false, intent: 'warning', className: 'value-tab-conversion', children: conversionNote_1 })
+                            : null] }));
+            }
+            if (loneTemplate_1 !== undefined || (typeof value === 'string' && (0, templates_1.isValueTemplate)(value))) {
+                return cannotShow_1(words_1.templateShownOn(tabsKind === 'full' ? expressionTabLabel_1 : words_1.template));
+            }
+            return ((0, jsx_runtime_1.jsx)(Component, __assign({ value: value, allowTemplates: false, onChange: onChange, name: name, level: level }, rest, { componentOverrides: componentOverrides }, componentTypeProp, { "aria-label": fieldAriaLabel, className: "".concat(className, " template-selector") })));
+        };
+        var expressionBody = function () { return ((0, jsx_runtime_1.jsxs)(reqore_1.ReqoreControlGroup, { vertical: true, fluid: true, gapSize: 'small', children: [(0, jsx_runtime_1.jsx)(reqore_1.ReqoreErrorBoundary, { children: (0, jsx_runtime_1.jsx)(ExpressionField_1.ExpressionField
+                    /* A value that is not an expression yet is shown as the server reads it written alone:
+                       value(12) - so the Visual tab starts from the value, not from an operand with no operation. */
+                    , { 
+                        /* A value that is not an expression yet is shown as the server reads it written alone:
+                           value(12) - so the Visual tab starts from the value, not from an operand with no operation. */
+                        value: {
+                            is_expression: true,
+                            value: value !== null && typeof value === 'object' ? value
+                                : !isEmptyValue && value !== null ?
+                                    { exp: 'value', args: [{ type: type, value: value }] }
+                                    : undefined,
+                        }, initialText: expressionSeed !== null && expressionSeed !== void 0 ? expressionSeed : undefined, draftText: expressionDraftText !== null && expressionDraftText !== void 0 ? expressionDraftText : undefined, onDraftChange: handleExpressionDraft, heldAsValue: !isEmptyValue && value !== null && typeof value !== 'object', componentOverrides: componentOverrides, localTemplates: templates, type: type, returnType: (returnType || expressionDataType), onChange: handleExpressionChange, readOnly: rest.readOnly || rest.disabled, expressions: rest.expressions, expressionsUrl: rest.expressions_url, fields: rest.dpql_fields, serverHandled: rest.server_expression_handling, 
+                        // a condition (a Qog if state's value, a while or for block's condition), marked by the host
+                        condition: (0, expressions_1.isConditionOption)(rest), extraActions: extraActions, size: rest.size, defaultMode: tab === 'visual' ? 'visual' : 'text', requestedMode: tab === 'visual' ? 'visual' : 'text', hideModeToggle: true, flushRef: expressionFlush, 
+                        // no language server: the Visual tab is where the expression is built
+                        onTextUnavailable: function () { return setTab('visual'); }, reorder: reorder }) }), expressionFromText !== null ?
+                    (0, jsx_runtime_1.jsx)(reqore_1.ReqoreButton, { fixed: true, compact: true, minimal: true, icon: 'ArrowGoBackLine', size: rest.size, className: 'dpql-detected-undo', tooltip: words_1.undoTooltip(expressionFromText), onClick: undoExpressionFromText, children: words_1.undo })
+                    : null] })); };
+        var templateBody = function () { return ((0, jsx_runtime_1.jsx)(exports.TemplateDropdownSelector, { allowCustomValues: false, templates: templates, value: typeof value === 'string' && (0, templates_1.isValueTemplate)(value) ? value : null, items: filteredTemplates === null || filteredTemplates === void 0 ? void 0 : filteredTemplates.items, onItemSelect: handleSelectTemplateFromList, onRemoveClick: replaceWithAValue, templateBadge: templateBadge, size: rest.size, label: label, hasOnlyAllowedValues: hasOnlyAllowedValues })); };
+        return ((0, jsx_runtime_1.jsxs)(reqore_1.ReqoreControlGroup, { vertical: true, fluid: true, gapSize: 'small', className: 'value-tabs-field', children: [(0, jsx_runtime_1.jsxs)(reqore_1.ReqoreControlGroup, { fluid: true, size: rest.size, verticalAlign: 'center', children: [(0, jsx_runtime_1.jsxs)(reqore_1.ReqoreControlGroup, { stack: true, size: rest.size, className: 'value-tabs', fixed: true, children: [tabButton('value', words_1.value, 'EditLine'), tabsKind === 'full' ?
+                                    [
+                                        tabButton('expression', expressionTabLabel_1, 'CodeLine', conditionField_1 ? words_1.conditionTooltip : words_1.expressionTooltip),
+                                        tabButton('visual', words_1.visual, 'NodeTree', conditionField_1 ? words_1.conditionVisualTooltip : words_1.visualTooltip),
+                                    ]
+                                    : tabButton('template', words_1.template, 'MoneyDollarCircleLine', words_1.templateTooltip)] }), renderControls()] }), tab === 'value' && hasExpressionDraft ?
+                    (0, jsx_runtime_1.jsx)(reqore_1.ReqoreMessage, { size: 'small', flat: true, opaque: false, intent: 'warning', className: 'value-tab-expression-draft', children: words_1.expressionDraftNotUsed })
+                    : null, tab === 'value' ?
+                    valueBody()
+                    : tab === 'template' ?
+                        templateBody()
+                        : expressionBody()] }));
+    }
     if (effectiveIsFunction && !hasOnlyAllowedValues) {
         // SEAM (reqraft): `allowTextExpressions` swaps the IDE's bare builder
         // for the ExpressionField shell (Visual = the same builder, Text = the
@@ -1014,11 +1480,15 @@ var TemplateFieldImpl = (0, react_2.memo)(function (_a) {
                             // 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, 
                             // the record's fields for the Text view, from the field's schema (`dpql_fields`)
-                            fields: rest.dpql_fields, 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 ?
+                            fields: rest.dpql_fields, serverHandled: rest.server_expression_handling, 
+                            // a condition (a Qog if state's value, a while or for block's condition), marked by the host
+                            condition: (0, expressions_1.isConditionOption)(rest), extraActions: extraActions, size: rest.size, modeLabels: expressionModeLabels, 
+                            /* An expression opens on its Text view, the first of Text · Visual, as the value's tabs open on
+                               Expression before Visual (qorus#646, David); without a language server it falls back to
+                               Visual by itself. It opened on Visual, on an empty "Select operation", unless the
+                               expression had just been typed as text. Mounted again, it opens on the view the author
+                               was on - except for an expression just typed as text, which is shown as the text it is. */
+                            defaultMode: expressionFromText !== null ? 'text' : expressionMode, onModeChange: setExpressionMode, 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.
@@ -1028,27 +1498,44 @@ var TemplateFieldImpl = (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)(builder_1.ExpressionBuilder, { value: {
                             is_expression: true,
                             value: value,
-                        }, 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()] }));
+                        }, 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, 
+                        // a condition (a Qog if state's value, a while or for block's condition), marked by the host
+                        condition: (0, expressions_1.isConditionOption)(rest), extraActions: extraActions, reorder: reorder }) }), renderControls()] }));
     }
     if (rest.disabled) {
         if (isTemplate) {
             // SEAM (reqraft): the IDE renders a bare `<ReqoreTag label={templateValue}/>`
             // here; reqraft upgrades the read-only template to a proper picker chip —
-            // the $-dollar icon + resolved display name + app image, coloured by the
+            // the $-dollar icon + resolved display name + app image, colored by the
             // 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)(ReadOnlyTemplateTag_1.ReadOnlyTemplateTag, { value: templateValue, templates: templates });
         }
         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, { 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, !isTemplate && allowCustomValues && dateTakesTemplates ?
+                (0, jsx_runtime_1.jsx)(TemplateBrowser_1.TemplateBrowser, { className: 'date-template-picker', icon: 'MoneyDollarCircleLine', fixed: true, compact: true, size: rest.size, tooltip: 'Use a template', "aria-label": 'Use a template', templates: filteredTemplates, focusFilter: true, onItemSelect: handleSelectDateTemplate })
+                : null, isTemplate && templateSupportsCustomValues ?
+                (0, jsx_runtime_1.jsx)(RichText_1.RichTextFormField, __assign({ className: 'template-selector', valueFormat: 'text', singleLine: (0, singleLineString_1.isSingleLineStringType)('string'), 
+                    /* null shows as null, not as an empty field: the two are different values, and an
+                       untyped field holding null looked exactly like one holding nothing (qorus#646) */
+                    value: typeof templateValue === 'string' ? templateValue : (((_g = (0, writtenAsText_1.untypedTextOf)(value, type)) !== null && _g !== void 0 ? _g : '')), templates: filteredTemplates, 
+                    // a chip of a field not of this type (text around it, say) is named as the catalogue names it
+                    namingTemplates: templates, allowTemplates: true, onChange: handleTemplateTextChange }, rest, { 
+                    /* The text the value is written in takes the room its row gives it and gives it back: a
+                       caller's \`fixed\` sized a picker chip, and on a text field it kept the field at its full
+                       width, pushing the ⋮ past an operand's row in a narrow column. */
+                    fixed: false, fluid: true, 
+                    /* As wide as `textWidth` says. A field: 150px, as a free text field is, wider for what it
+                       holds, and narrower only where its row has less room, as a number's input is (a fixed 150px
+                       minimum held it at full width in a narrow column). Its content: the box takes its width from
+                       what it holds, with no minimum, and the editor in it keeps 150px. */
+                    panelProps: __assign(__assign(__assign({}, rest.panelProps), { style: __assign(__assign({}, (_h = rest.panelProps) === null || _h === void 0 ? void 0 : _h.style), (textWidth === 'content' ? CONTENT_WIDTH_BOX : FIELD_WIDTH_BOX)) }), (textWidth === 'content' ? { contentStyle: CONTENT_WIDTH_EDITOR } : {})), "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 })
+                (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, "\" could be an expression. It is kept as text; use it as an expression instead?"), 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 ?
+                (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, templateBadge: templateBadge, size: rest.size, label: label, hasOnlyAllowedValues: hasOnlyAllowedValues })
                 : null, renderControls()] })));
 });
 /**