@qoretechnologies/reqraft 0.10.66-pr.145.gcb1e59d → 0.10.66

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.NO_TEMPLATES_ON_OFFER = 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,18 +122,22 @@ 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 qorusTypeCatalogue_1 = require("../../../../helpers/qorusTypeCatalogue");
+var expressions_1 = require("../../../../helpers/expressions");
+var templateCompletions_1 = require("../../../smartEditor/templateCompletions");
+var writtenAsText_1 = require("./writtenAsText");
 var rowMenuContext_1 = require("../../engine/rowMenuContext");
-var savedValues_1 = require("../allowed-values/savedValues");
 /**
  * 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
@@ -129,13 +168,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"]);
@@ -149,6 +190,17 @@ 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 };
+/** A value beside the offer of an expression: the row's room left of the offer, never narrower than a text field. */
+var OFFER_BESIDE_VALUE_BOX = { flex: '1 1 150px', width: 'auto', minWidth: '150px' };
+/** 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,
@@ -163,6 +215,53 @@ exports.ComponentMap = {
     richtext: RichTextField,
     file: FileField,
 };
+/** Why a field that takes templates offers none here: its context's catalogue has none of its type. */
+exports.NO_TEMPLATES_ON_OFFER = 'No templates are offered here for this field.';
+/** 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.",
+    conditionTooltip: 'Write the condition as an expression',
+    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',
+};
+/** A badge's words: its label, or the badge itself when it is a string or a number. */
+var badgeText = function (badge) {
+    var label = badge !== null && typeof badge === 'object' && 'label' in badge ?
+        badge.label
+        : badge;
+    return typeof label === 'string' || typeof label === 'number' ? String(label) : undefined;
+};
 var renderMenuActionRows = function (actions, closePopover, size) {
     return actions.items.map(function (item, index) {
         if ('isDivider' in item) {
@@ -216,12 +315,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, wholeRecords = _a.wholeRecords, rest = __rest(_a, ["onItemSelect", "onRemoveClick", "items", "templates", "allowCustomValues", "hasOnlyAllowedValues", "value", "size", "templateBadge", "wholeRecords"]);
+    /* 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
@@ -236,10 +332,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, wholeRecords: wholeRecords, 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] })] }));
 });
@@ -262,10 +358,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;
+    var rowMenu = _a.rowMenu, value = _a.value, name = _a.name, onChange = _a.onChange, _h = _a.component, Comp = _h === void 0 ? AutoFormField_1.AutoFormField : _h, templates = _a.templates, interfaceContext = _a.interfaceContext, // eslint-disable-line @typescript-eslint/no-unused-vars
+    _j = _a.allowTemplates, // eslint-disable-line @typescript-eslint/no-unused-vars
+    allowTemplates = _j === void 0 ? true : _j, allowFunctions = _a.allowFunctions, allowTextExpressions = _a.allowTextExpressions, valueTabs = _a.valueTabs, valueTabsLabels = _a.valueTabsLabels, expressionModeLabels = _a.expressionModeLabels, _k = _a.textWidth, textWidth = _k === void 0 ? 'field' : _k, savedValues = _a.savedValues, templateBadge = _a.templateBadge, extraActions = _a.extraActions, componentOverrides = _a.componentOverrides, _l = _a.allowCustomValues, allowCustomValues = _l === void 0 ? true : _l, _m = _a.filterTemplatesByType, filterTemplatesByType = _m === void 0 ? true : _m, 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,
@@ -292,7 +388,7 @@ var TemplateFieldImpl = (0, react_2.memo)(function (_a) {
         }
         var result = templates;
         if (filterTemplatesByType) {
-            result = (0, templates_1.filterTemplatesByType)(templates, type, !!rest.arg_schema);
+            result = (0, templates_1.filterTemplatesByType)(templates, type, !!rest.arg_schema, qorusTypes.value, rest.base_type);
         }
         if (filterTemplatesFunc) {
             result = filterTemplatesFunc(result);
@@ -318,7 +414,19 @@ var TemplateFieldImpl = (0, react_2.memo)(function (_a) {
         filterTemplatesByType,
         JSON.stringify(rest.arg_schema),
         filterTemplatesFunc,
+        qorusTypes.value,
+        rest.base_type,
     ]);
+    /* Where each template comes from, as the host says (`templateBadge`): the template picker showed it beside
+       the template held, and the lists of templates the value's text and an expression's text open show it in
+       the template's row - a text field's templates are picked there, not on a tab of their own (qorus#646). */
+    var sourceOfTemplate = (0, react_2.useMemo)(function () {
+        return templateBadge ?
+            function (template) { return badgeText(templateBadge(template)); }
+            : undefined;
+    }, [templateBadge]);
+    var listedTemplates = (0, react_2.useMemo)(function () { return (0, templateCompletions_1.withTemplateSources)(filteredTemplates, sourceOfTemplate); }, [filteredTemplates, sourceOfTemplate]);
+    var listedCatalogue = (0, react_2.useMemo)(function () { return (0, templateCompletions_1.withTemplateSources)(templates, sourceOfTemplate); }, [templates, sourceOfTemplate]);
     // An `any`-typed field has no editor of its own until a concrete type is
     // chosen, so it opened on the TYPE PICKER: before an author could say what
     // they meant, they had to answer a question about storage — "is this a Text
@@ -343,6 +451,10 @@ var TemplateFieldImpl = (0, react_2.memo)(function (_a) {
     // 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);
+    /* a field of any type or a hash takes a record whole: a record and a Qog state's data are offered whole as well
+       as opened (qorus#646, David's review); a scalar field's are only opened */
+    var takesRecords = typeIsAnyLike ||
+        (0, qorusTypeCatalogue_1.qorusTypeTakesRecords)(qorusTypes.value, type, rest.base_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
@@ -370,21 +482,82 @@ 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 _o = (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 = _o[0], setTab = _o[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 _p = (0, react_2.useState)(opensInExpressionText ? (0, writtenAsText_1.expressionTextOfValue)(value) : null), expressionSeed = _p[0], setExpressionSeed = _p[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 _q = (0, react_2.useState)(null), expressionDraftText = _q[0], setExpressionDraftText = _q[1];
+    /** Whether the Expression tab was left with a draft (see the Value tab's note); read with the value it holds. */
+    var _r = (0, react_2.useState)(false), leftWithDraft = _r[0], setLeftWithDraft = _r[1];
+    var hasExpressionDraft = leftWithDraft && !!expressionDraft.current && (0, lodash_1.isEqual)(expressionDraft.current.over, value);
+    var _s = (0, react_2.useState)(tabsKind ?
+        tab === 'template' || (tab === 'value' && valueTabIsText)
+        : (isDefaultTemplate ||
+            (0, templates_1.isValueTemplate)(value) ||
+            !allowCustomValues ||
+            opensOnTemplates ||
+            nullWrittenAsText) &&
+            !!allowTemplates), isTemplateState = _s[0], setIsTemplate = _s[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 _t = (0, react_2.useState)(tabsKind ? tab === 'expression' || tab === 'visual' : !!isDefaultFunction && !!allowFunctions), internalIsFunction = _t[0], setInternalIsFunction = _t[1];
+    var _u = (0, react_2.useState)(value), templateValue = _u[0], setTemplateValue = _u[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 _v = (0, react_2.useState)(null), dpqlOffer = _v[0], setDpqlOffer = _v[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 _w = (0, react_2.useState)(null), expressionFromText = _w[0], setExpressionFromText = _w[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 _x = (0, react_2.useState)('text'), expressionMode = _x[0], setExpressionMode = _x[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());
+    /* What detection found for each text: the server's expression, and whether the text could stay a value of
+       the field's type ('offer') or could not ('switch'). An undone switch is asked about again (see
+       `undoExpressionFromText`), so the expression it would become is kept here. */
+    var detectedTexts = (0, react_2.useRef)(new Map());
     var detectTimer = (0, react_2.useRef)(null);
     var probeDpql = (0, useDpqlProbe_1.useDpqlProbe)();
     var effectiveIsFunction = isFunction || internalIsFunction;
@@ -393,6 +566,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.
@@ -451,8 +630,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
@@ -479,20 +669,25 @@ 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. The Value
+               tab's text is the value written as text too, even where the field takes no value of the
+               author's own (an untyped field's templates are picked there: qorus#646). */
+            if (templateSupportsCustomValues || (tabsKindRef.current && valueTabIsText)) {
+                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
@@ -508,9 +703,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
@@ -530,8 +732,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);
@@ -540,13 +745,14 @@ 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
     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' ?
+        // the template's type (`templateType`): a list's badge is its type's name
+        var value = (0, templates_1.templateType)(item) === 'richtext' ?
             [
                 {
                     type: 'paragraph',
@@ -572,23 +778,20 @@ var TemplateFieldImpl = (0, react_2.memo)(function (_a) {
                 },
             ]
             : item.value;
-        onChange(name, value, hasOnlyAllowedValues ? type : item.badge);
+        onChange(name, value, hasOnlyAllowedValues ? type : (0, templates_1.templateType)(item));
     }, [name, onChange]);
-    /* Saving a value for reuse goes to the HOST, which keeps saved values and
-       asks what to call this one (`SavedValuesContext`). Offered where a value
-       can be typed in — a field of fixed choices has nothing of its own to
-       save, and neither does a yes/no — and only once there is a value. */
-    var savedValues = (0, react_2.useContext)(savedValues_1.SavedValuesContext);
-    var canSaveValue = !!rest.allowSaving &&
-        !!(savedValues === null || savedValues === void 0 ? void 0 : savedValues.saveValue) &&
-        (!rest.allowed_values || !!rest.allowed_values_creatable) &&
-        type !== 'bool' &&
-        type !== 'boolean' &&
-        !rest.readonly &&
-        !rest.disabled &&
-        value !== undefined &&
-        value !== null &&
-        value !== '';
+    // 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
@@ -644,6 +847,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);
@@ -653,11 +996,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
@@ -673,12 +1028,16 @@ var TemplateFieldImpl = (0, react_2.memo)(function (_a) {
     // `helpers/dpqlDetection` for why a successful parse alone means nothing.
     var validationField = (0, react_2.useMemo)(function () { return ({
         validation_regex: rest.validation_regex,
+        validation_regex_desc: rest.validation_regex_desc,
+        example_value: rest.example_value,
         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.validation_regex_desc,
+        JSON.stringify(rest.example_value),
         rest.has_to_be_valid_identifier,
         rest.has_to_have_value,
         JSON.stringify(rest.rules),
@@ -688,9 +1047,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
@@ -703,8 +1069,20 @@ 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);
+        /* Text that cannot be a value of the field's type (`12 + 2` in a whole number) is not a value it can
+           keep: put back, it is a value the field refuses. It is offered again as an expression, beside that
+           refusal, so the way back is in sight; text that can be a value is kept as one, as the undo asked
+           (David on FormEngine · Expression Typed On Value Switches With Undo, qorus#646). */
+        var detected = detectedTexts.current.get(expressionFromText);
+        if ((detected === null || detected === void 0 ? void 0 : detected.outcome) === 'switch') {
+            setDpqlOffer({ text: expressionFromText, expression: detected.expression });
+        }
     }, [expressionFromText, name, onChange, type]);
     var declineDpqlOffer = (0, react_2.useCallback)(function () {
         if (dpqlOffer) {
@@ -717,22 +1095,29 @@ var TemplateFieldImpl = (0, react_2.memo)(function (_a) {
             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]);
+    /* The offer of an expression detected in text the field keeps, beside the field, in every layout: on the
+       Value tab of a form's tabs too, where it is how an undone switch's text is made an expression again. */
+    var dpqlOfferPrompt = 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, "\" 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;
+    /* The offer beside the field it is of, to its right, and under it only where the row has no room for both: under
+       it, with the field's message under that, an offer was one more line to read before the value (Foxhoundn, qlip
+       #392: "move the `Use as an expression` to the right of the field"). */
+    var withOfferBeside = function (field) {
+        return dpqlOfferPrompt ?
+            (0, jsx_runtime_1.jsxs)(reqore_1.ReqoreControlGroup, { fluid: true, wrap: true, gapSize: 'small', verticalAlign: 'flex-start', className: 'dpql-offer-beside', children: [field, dpqlOfferPrompt] })
+            : field;
+    };
     // 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 &&
+        /* the template editor is text too: an expression written around a template is detected there; and a
+           form's Value tab written as text takes any text, whatever the field says of custom values (an untyped
+           option's did, and an expression typed there was kept as text, offered as nothing: qorus#646) */
+        (!isTemplate || templateSupportsCustomValues || (tabsKind === 'full' && valueTabIsText)) &&
         !hasOnlyAllowedValues &&
         !rest.readonly &&
         !rest.readOnly &&
@@ -757,10 +1142,12 @@ var TemplateFieldImpl = (0, react_2.memo)(function (_a) {
         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)) {
+        if (text && canDetectDpql && declinedTexts.current.has(text)) {
+            // asked about already: an offer made for this very text (an undone switch's) stands, any other goes
+            setDpqlOffer(function (offer) { return ((offer === null || offer === void 0 ? void 0 : offer.text) === text ? offer : null); });
+            return undefined;
+        }
+        if (!canDetectDpql || !text || !(0, dpqlDetection_1.mightBeDpqlExpression)(text)) {
             setDpqlOffer(null);
             return undefined;
         }
@@ -773,10 +1160,13 @@ 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') {
-                    enterExpressionRef.current(text, parsed.expression);
+                if (outcome !== 'none') {
+                    detectedTexts.current.set(text, { expression: parsed.expression, outcome: outcome });
                 }
-                else if (outcome === 'offer') {
+                /* An expression detected is offered, never switched to: the author chooses (qorus#646, David's
+                   review: "@pos + @bezeichnung" became an expression without asking). Text that cannot be a value
+                   of the field's type is said to be one it refuses, beside the offer. */
+                if (outcome !== 'none') {
                     setDpqlOffer({ text: text, expression: parsed.expression });
                 }
                 else {
@@ -807,89 +1197,89 @@ 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 () {
-        var _a;
-        return __spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray([], (canOfferExpression && !hasOnlyExpressions && !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,
-                },
+    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), (canSaveValue
-            ? [
-                {
-                    label: (_a = savedValues === null || savedValues === void 0 ? void 0 : savedValues.saveLabel) !== null && _a !== void 0 ? _a : 'Save value',
-                    icon: 'SaveLine',
-                    onClick: function () { var _a; return (_a = savedValues === null || savedValues === void 0 ? void 0 : savedValues.saveValue) === null || _a === void 0 ? void 0 : _a.call(savedValues, { value: value, type: type }); },
-                },
+            : []), true), (canOfferTemplate ?
+            [
+                __assign(__assign({ label: 'Use Template', icon: 'MoneyDollarCircleLine' }, (hasTemplatesOnOffer ?
+                    { tooltip: 'Use a template' }
+                    : {
+                        disabled: true,
+                        description: exports.NO_TEMPLATES_ON_OFFER,
+                        tooltip: exports.NO_TEMPLATES_ON_OFFER,
+                    })), { onClick: handleTemplateToggleClick }),
             ]
-            : []), true), (menuItems !== null && menuItems !== void 0 ? menuItems : [])
-            .filter(function (item) { return !('isDivider' in item); })
-            .map(function (item) { return ({
-            label: item.label,
-            description: item.description,
-            onClick: function () {
-                var _a;
-                return (_a = item.onClick) === null || _a === void 0 ? void 0 : _a.call(item, undefined, function () {
-                    setIsTemplate(false);
-                    setTemplateValue(null);
-                });
+            : []), true)), true), (canOfferCustomValue && !tabsKind ?
+        [
+            {
+                label: 'Use Custom Value',
+                icon: 'EditLine',
+                tooltip: 'Write the value here instead of choosing a template',
+                onClick: handleUseCustomValueClick,
             },
-        }); }), true);
-    }, [
+        ]
+        : []), 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), savedValueItems, true); }, [
         canOfferExpression,
         functions.loading,
         canOfferTemplate,
+        hasTemplatesOnOffer,
         canOfferCustomValue,
         menuItems,
         handleSelectFunctionChange,
         handleTemplateToggleClick,
         handleUseCustomValueClick,
+        // the saved values offered, and whether this value can be saved
         canSaveValue,
-        savedValues,
         value,
-        type,
-        hasOnlyExpressions,
+        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
        by value would loop. */
     var publishedKey = [
-        canOfferExpression && !hasOnlyExpressions && !functions.loading ? 'expression' : '',
-        canOfferTemplate ? 'template' : '',
+        canOfferExpression && !functions.loading ? 'expression' : '',
+        canOfferTemplate ? "template".concat(hasTemplatesOnOffer ? '' : '-none-on-offer') : '',
         canOfferCustomValue ? 'custom-value' : '',
-        canSaveValue ? 'save-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
@@ -903,15 +1293,23 @@ 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;
-        /* A field that takes nothing BUT an expression has one way in, and it is
-           its editor, not a menu item — so it is drawn in a form row too. Behind
-           the row's ⋮ the field read as having nowhere to write anything. */
+        /* 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 () {
+                    : (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, {
@@ -920,16 +1318,6 @@ var TemplateFieldImpl = (0, react_2.memo)(function (_a) {
                         } })
                 : null);
         }
-        /* 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 (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: {
                     icon: 'More2Fill',
@@ -972,15 +1360,33 @@ 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.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", ' '] })
+                                : (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', 
+                                // none on offer: shown, not taken, and saying why (as the menu's item does)
+                                tooltip: hasTemplatesOnOffer ? 'Use a template' : exports.NO_TEMPLATES_ON_OFFER, disabled: !hasTemplatesOnOffer, 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, 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] }) }));
@@ -992,11 +1398,13 @@ var TemplateFieldImpl = (0, react_2.memo)(function (_a) {
         handleSelectFunctionChange,
         handleTemplateToggleClick,
         handleUseCustomValueClick,
+        allowTextExpressions,
         hasOnlyAllowedValues,
         isTemplate,
         rest.readonly,
         rest.size,
         showTemplateToggle,
+        hasTemplatesOnOffer,
         // reaches the menu through `templateSupportsCustomValues`
         allowCustomValues,
         hasOnlyExpressions,
@@ -1010,6 +1418,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
@@ -1031,6 +1445,105 @@ 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 is called Expression, as every field's is: a condition is written as
+           an expression, and the tab's hover says so (qorus#646). */
+        var conditionField_1 = (0, expressions_1.isConditionOption)(rest);
+        var expressionTabLabel_1 = 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 ?
+            (0, templates_1.templateType)((0, templates_1.findTemplate)(templates !== null && templates !== void 0 ? templates : {}, loneTemplate_1))
+            : 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) {
+                var valueText = ((0, jsx_runtime_1.jsx)(RichText_1.RichTextFormField, __assign({ wholeRecords: takesRecords, 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: listedTemplates, 
+                    // 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), (dpqlOfferPrompt ? OFFER_BESIDE_VALUE_BOX : { width: '100%' })) }), "aria-label": fieldAriaLabel })));
+                return ((0, jsx_runtime_1.jsxs)(reqore_1.ReqoreControlGroup, { vertical: true, fluid: true, gapSize: 'small', children: [withOfferBeside(valueText), 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));
+            }
+            var ownControl = ((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") })));
+            // an expression detected in what the type's own control holds is offered beside it, as on the text
+            return withOfferBeside(ownControl);
+        };
+        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: listedCatalogue, type: type, returnType: (returnType || expressionDataType), 
+                        // a field of a type the catalogue does not list takes what its base type takes
+                        returnBaseType: returnType ? undefined : rest.base_type, onChange: handleExpressionChange, readOnly: rest.readOnly || rest.disabled, expressions: rest.expressions, expressionsUrl: rest.expressions_url, fields: rest.dpql_fields, 
+                        /* The record the server names for the option (`dpql_provider`: its connection and path), with the
+                           server's own default record type. It was never read: the server sends it, and the Text view
+                           offered no field of the record (qorus#646). */
+                        provider: rest.dpql_provider, recordType: rest.dpql_provider ? 'record' : undefined, 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, { wholeRecords: takesRecords, 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 })); };
+        /* A field that takes templates and no expression, whose value is written as text: the text takes its
+           templates as chips, from the list it opens, so a Template tab beside it would be a second way to do the
+           one thing (qorus#646, David). It is the value alone, with the field's menu beside it. */
+        if (tabsKind === 'template' && valueTabIsText) {
+            var controls = renderControls();
+            return ((0, jsx_runtime_1.jsx)(reqore_1.ReqoreControlGroup, { vertical: true, fluid: true, gapSize: 'small', className: 'value-tabs-field value-only', children: controls ?
+                    (0, jsx_runtime_1.jsxs)(reqore_1.ReqoreControlGroup, { fluid: true, size: rest.size, verticalAlign: 'flex-start', children: [valueBody(), controls] })
+                    : valueBody() }));
+        }
+        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
@@ -1045,13 +1558,21 @@ var TemplateFieldImpl = (0, react_2.memo)(function (_a) {
                             // 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, 
+                            componentOverrides: componentOverrides, localTemplates: listedCatalogue, type: type, returnType: (returnType || expressionDataType), 
+                            // a field of a type the catalogue does not list takes what its base type takes
+                            returnBaseType: returnType ? undefined : rest.base_type, 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, 
+                            // the record the server names for the option (see above)
+                            provider: rest.dpql_provider, recordType: rest.dpql_provider ? 'record' : undefined, 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.
@@ -1061,27 +1582,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: listedCatalogue, level: level, type: type, returnType: (returnType || expressionDataType), 
+                        // a field of a type the catalogue does not list takes what its base type takes
+                        returnBaseType: returnType ? undefined : rest.base_type, 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, 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, !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({ wholeRecords: takesRecords, 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 : (((_f = (0, writtenAsText_1.untypedTextOf)(value, type)) !== null && _f !== void 0 ? _f : '')), templates: listedTemplates, 
+                    // 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({}, (_g = rest.panelProps) === null || _g === void 0 ? void 0 : _g.style), (textWidth === 'content' ? CONTENT_WIDTH_BOX : FIELD_WIDTH_BOX)) }), (textWidth === 'content' ? { contentStyle: CONTENT_WIDTH_EDITOR } : {})), "aria-label": fieldAriaLabel }))
+                : null, dpqlOfferPrompt, showTemplatesDropdown ?
+                (0, jsx_runtime_1.jsx)(exports.TemplateDropdownSelector, { wholeRecords: takesRecords, 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()] })));
 });
 /**