@qoretechnologies/reqraft 0.10.61 → 0.10.62-pr.137.g86641aa

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

@@ -97,6 +97,7 @@ var RichText_1 = require("../rich-text/RichText");
 var common_1 = require("../../../../helpers/common");
 var singleLineString_1 = require("../../../../helpers/singleLineString");
 var optionUiTypes_1 = require("../../../../helpers/optionUiTypes");
+var writtenAsText_1 = require("./writtenAsText");
 var rowMenuContext_1 = require("../../engine/rowMenuContext");
 /**
  * How long the author must pause before typed text is sent to the DPQL
@@ -261,10 +262,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, extraActions = _a.extraActions, componentOverrides = _a.componentOverrides, _k = _a.allowCustomValues, allowCustomValues = _k === void 0 ? true : _k, _l = _a.filterTemplatesByType, filterTemplatesByType = _l === void 0 ? true : _l, 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", "extraActions", "componentOverrides", "allowCustomValues", "filterTemplatesByType", "filterTemplatesFunc", "componentFromType", "isFunction", "isDefaultFunction", "isDefaultTemplate", "returnType", "level", "className", "menuItems", "menuActions", "menuTrailingItems", "reorder", "label"]);
     var qorusTypes = (0, useQorusTypes_1.useQorusTypes)();
     var functions = (0, useExpressions_1.useExpressions)({
         allow: !!allowFunctions,
@@ -369,17 +370,53 @@ 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';
+    /** 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 _m = (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 = _m[0], setTab = _m[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 _o = (0, react_2.useState)(opensInExpressionText ? (0, writtenAsText_1.expressionTextOfValue)(value) : null), expressionSeed = _o[0], setExpressionSeed = _o[1];
+    var _p = (0, react_2.useState)(tabsKind ?
+        tab === 'template' || (tab === 'value' && valueTabIsText)
+        : (isDefaultTemplate ||
+            (0, templates_1.isValueTemplate)(value) ||
+            !allowCustomValues ||
+            opensOnTemplates ||
+            nullWrittenAsText) &&
+            !!allowTemplates), isTemplateState = _p[0], setIsTemplate = _p[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 _q = (0, react_2.useState)(tabsKind ? tab === 'expression' || tab === 'visual' : !!isDefaultFunction && !!allowFunctions), internalIsFunction = _q[0], setInternalIsFunction = _q[1];
+    var _r = (0, react_2.useState)(value), templateValue = _r[0], setTemplateValue = _r[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 _s = (0, react_2.useState)(null), dpqlOffer = _s[0], setDpqlOffer = _s[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 _t = (0, react_2.useState)(null), expressionFromText = _t[0], setExpressionFromText = _t[1];
     // Texts the author has said no to. Without this, dismissing an offer (or
     // undoing a switch) would re-detect the same text on the next render and
     // ask again forever.
@@ -392,6 +429,12 @@ var TemplateFieldImpl = (0, react_2.memo)(function (_a) {
         if (isTemplate && (0, templates_1.isValueTemplate)(value)) {
             setTemplateValue(value);
         }
+        /* Emptied from outside the editor - the card's "Clear value", an undo, a host's reset - the text the
+           value is written in is emptied too. It kept its own copy, so a cleared value went on showing what it
+           had held (qorus#646: "Clear value" had no effect). The editor's own emptying sets this already. */
+        if (isEmptyValue && templateValue) {
+            setTemplateValue(null);
+        }
     }, [JSON.stringify(value)]);
     /* Clearing an untyped field returns it to the template selector, which is
        where mounting it empty already lands.
@@ -450,8 +493,19 @@ var TemplateFieldImpl = (0, react_2.memo)(function (_a) {
             setIsTemplate(false);
         }
     }, [allowCustomValues]);
+    // null arriving later (written in the Text tab, say) is written in the text field too - see above
+    (0, react_2.useEffect)(function () {
+        if (!isTemplate && nullWrittenAsText && allowTemplates) {
+            setTemplateValue(null);
+            setIsTemplate(true);
+        }
+    }, [nullWrittenAsText, allowTemplates]);
     (0, react_2.useEffect)(function () {
-        if (!isTemplate && (0, templates_1.isValueTemplate)(value) && allowTemplates) {
+        // a template on the Expression tab stays there: it is the expression editor's to show
+        if (!isTemplate &&
+            (0, templates_1.isValueTemplate)(value) &&
+            allowTemplates &&
+            !(tabsKind && internalIsFunction)) {
             // In auto mode, leave user-typed dollar-strings alone ('$foo: hello'
             // passes the loose check) — but a string that IS one well-formed token
             // ($data:{…}, $config:item) must still flip into template mode, or an
@@ -478,20 +532,19 @@ 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) {
+            /* Read from the text where the field is written as text: a lone template takes its own
+               type in an untyped field, a scalar's literal is that literal, other text is text. */
+            if (templateSupportsCustomValues) {
+                var read = (0, writtenAsText_1.templateTextValue)(templateValue, type, filteredTemplates);
+                onChange === null || onChange === void 0 ? void 0 : onChange(name, read.value, read.type, effectiveIsFunction);
+                return;
+            }
             onChange === null || onChange === void 0 ? void 0 : onChange(name, templateValue, type, effectiveIsFunction);
         }
     }, [JSON.stringify(templateValue)]);
     // an editor that takes templates into its own text has no template mode to switch to: "Use Template"
     // there emptied the field and showed nothing in its place
     var showTemplateToggle = allowCustomValues && allowTemplates && !rest.arg_schema && !editorHandlesTemplates;
-    // Only a BRACED context ref (`$data:{…}` — machine-written, nobody types
-    // one) renders as the picker chip (named via `resolveTemplateLabel`)
-    // rather than as its raw text in a string editor. Plain word-path tokens
-    // (`$local:id`) are typeable, so per the build #123 review they keep the
-    // input that offers templates while typing. Mixed text-and-token strings
-    // keep the string editor too; the chip-in-editor treatment arrives with
-    // the rich-text string mode.
-    var templateValueIsBracedToken = (0, templates_1.isBracedTemplateToken)(templateValue);
     /* An UNTYPED field can be typed into as well as picked from.
     
        Template mode has a typable editor whenever the field's type can hold
@@ -507,9 +560,16 @@ var TemplateFieldImpl = (0, react_2.memo)(function (_a) {
        specific to that field: every empty untyped field with templates on
        offer got the same downgrade. The editor still offers the same templates
        on focus, so nothing is lost by being able to type as well. */
-    var templateSupportsCustomValues = allowCustomValues && (type === 'string' || typeIsAnyLike) && !hasOnlyAllowedValues;
+    /* And so can a scalar: a whole number, a number or a yes/no is written as text too
+       (qorus#646). A template chosen into it is a chip in that text, not a pick-only
+       control that holds the template and nothing else, so text can be written around it;
+       what the field then holds is read from the text (writtenAsText). A date keeps its
+       date control. */
+    var templateSupportsCustomValues = allowCustomValues && (0, writtenAsText_1.isWrittenAsText)(type) && !hasOnlyAllowedValues;
     var showTemplatesDropdown = allowTemplates && (!allowCustomValues || (isTemplate && !templateSupportsCustomValues));
     var hasOnlyExpressions = !allowCustomValues && !allowTemplates && allowFunctions;
+    /** A date field with templates on offer: they are offered beside its date control. */
+    var dateTakesTemplates = type === 'date' && !!allowTemplates && hasTemplatesOnOffer && !hasOnlyAllowedValues;
     // True when some input control renders besides the ⋮ menu. When nothing
     // does (an empty `any` field: custom values are disallowed and the value's
     // type is picked FROM the menu), the menu trigger is the field's only
@@ -529,8 +589,11 @@ var TemplateFieldImpl = (0, react_2.memo)(function (_a) {
             /* Emptying the text leaves the field where an empty field lands. For
                an untyped field that is THIS editor: switching to custom mode here
                mounted a different editor in its place, so deleting the last
-               character lost the cursor. */
-            if (!(emptyLandsOnTemplates && allowTemplates)) {
+               character lost the cursor. A field written as text (a whole number, a
+               number, a yes/no) is the same: deleting the template in it left a
+               different, empty editor in its place, and what was typed next went
+               nowhere. */
+            if (!((emptyLandsOnTemplates || templateSupportsCustomValues) && allowTemplates)) {
                 setIsTemplate(false);
             }
             setTemplateValue(null);
@@ -539,7 +602,7 @@ var TemplateFieldImpl = (0, react_2.memo)(function (_a) {
         else {
             setTemplateValue(val);
         }
-    }, [name, onChange, emptyLandsOnTemplates, allowTemplates]);
+    }, [name, onChange, emptyLandsOnTemplates, templateSupportsCustomValues, allowTemplates]);
     var handleTemplateTextChange = (0, react_2.useCallback)(function (val) { return handleTemplateFieldChange(name, typeof val === 'string' ? val : ''); }, [handleTemplateFieldChange, name]);
     var handleSelectTemplateFromList = (0, react_2.useCallback)(
     // If the field has allowed values and supports templates, we do not want to overwrite the field type with the template type
@@ -576,6 +639,15 @@ var TemplateFieldImpl = (0, react_2.memo)(function (_a) {
     // SEAM (reqraft): the IDE computes `canSaveValue` here and renders a
     // `SaveValueButton` in the controls menu — the saved-values storage is
     // IDE-only, so the menu item is dropped (`allowSaving` is inert).
+    /* A template chosen beside a date control is the value at once, IN the template control: handed to
+       the form while the field was still drawing its date control, the reference reached the date
+       picker first, which threw on it ("Invalid ISO 8601 date time string"). */
+    var handleSelectDateTemplate = (0, react_2.useCallback)(function (item) {
+        if (typeof (item === null || item === void 0 ? void 0 : item.value) !== 'string')
+            return;
+        setIsTemplate(true);
+        setTemplateValue(item.value);
+    }, []);
     var handleRemoveTemplateClick = (0, react_2.useCallback)(function () {
         /* This is the `×` ON the template control, and it means "I do not want a
            template here" — on a field whose menu offers no `Set Custom Value` it
@@ -631,6 +703,45 @@ 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. */
+    var selectTab = (0, react_2.useCallback)(function (next) {
+        if (next === tab)
+            return;
+        if (next === 'value' || next === 'template') {
+            if (valueIsExpression) {
+                var envelope = { is_expression: true, value: value };
+                var template = (0, writtenAsText_1.loneTemplateOf)(envelope);
+                var 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 {
+            if (!valueIsExpression)
+                setExpressionSeed((0, writtenAsText_1.expressionTextOfValue)(value));
+            setInternalIsFunction(true);
+        }
+        setTab(next);
+    }, [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]);
     var handleTemplateToggleClick = (0, react_2.useCallback)(function () {
         setInternalIsFunction(false);
         onChange(name, undefined, undefined, false);
@@ -640,11 +751,29 @@ 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 the template: stored bare, as every consumer
+           evaluates it (see `loneTemplateOf`) - the server evaluates its expression form, template(...),
+           to the template's parts, not to its value. The Text view stays, seeded with it. */
+        var onTabs = !!tabsKindRef.current;
+        var lone = remove || !onTabs ? undefined : (0, writtenAsText_1.loneTemplateOf)(expressionValue);
+        if (lone !== undefined) {
+            setExpressionSeed(lone);
+            onChange(name, lone, type, false);
+            return;
+        }
+        // and a lone value (12, true) is that value, the field's own shape (see `loneValueOf`)
+        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
@@ -678,6 +807,9 @@ var TemplateFieldImpl = (0, react_2.memo)(function (_a) {
         setInternalIsFunction(true);
         setIsTemplate(false);
         setTemplateValue(null);
+        // the Value tab never holds an expression: detected, it moves to the Expression tab, with an undo
+        if (tabsKindRef.current === 'full')
+            setTab('expression');
         // `dpql/parse` answers with the field-ready envelope
         // (`{is_expression, value}`); this field stores the inner AST and
         // signals the flag through `onChange`'s fourth argument, exactly as
@@ -690,6 +822,10 @@ var TemplateFieldImpl = (0, react_2.memo)(function (_a) {
         }
         declinedTexts.current.add(expressionFromText);
         setInternalIsFunction(false);
+        if (tabsKind) {
+            setTab('value');
+            setIsTemplate(valueTabIsText);
+        }
         setExpressionFromText(null);
         onChange === null || onChange === void 0 ? void 0 : onChange(name, expressionFromText, type, false);
     }, [expressionFromText, name, onChange, type]);
@@ -719,7 +855,8 @@ var TemplateFieldImpl = (0, react_2.memo)(function (_a) {
     var canDetectDpql = !!allowFunctions &&
         !!allowTextExpressions &&
         !effectiveIsFunction &&
-        !isTemplate &&
+        // the template editor is text too: an expression written around a template is detected there
+        (!isTemplate || templateSupportsCustomValues) &&
         !hasOnlyAllowedValues &&
         !rest.readonly &&
         !rest.readOnly &&
@@ -760,7 +897,8 @@ var TemplateFieldImpl = (0, react_2.memo)(function (_a) {
                     return;
                 }
                 var outcome = (0, dpqlDetection_1.classifyTypedText)({ text: text, type: type, field: validationField, parsed: parsed });
-                if (outcome === 'switch') {
+                // on tabs, an expression detected switches (with an undo) rather than being offered
+                if (outcome === 'switch' || (outcome === 'offer' && tabsKindRef.current === 'full')) {
                     enterExpressionRef.current(text, parsed.expression);
                 }
                 else if (outcome === 'offer') {
@@ -794,26 +932,28 @@ var TemplateFieldImpl = (0, react_2.memo)(function (_a) {
        the row's — so leaving this out of the published list meant template mode
        was a one-way door on the surface most options are edited from. */
     var canOfferCustomValue = showTemplateToggle && isTemplate && templateSupportsCustomValues;
-    var publishedItems = (0, react_2.useMemo)(function () { return __spreadArray(__spreadArray(__spreadArray(__spreadArray([], (canOfferExpression && !functions.loading
-        ? [
-            {
-                label: 'Use Expression',
-                icon: 'Functions',
-                tooltip: 'Run a function on this value',
-                onClick: handleSelectFunctionChange,
-            },
-        ]
-        : []), true), (canOfferTemplate
-        ? [
-            {
-                label: 'Use Template',
-                icon: 'MoneyDollarCircleLine',
-                tooltip: 'Use a template',
-                onClick: handleTemplateToggleClick,
-            },
-        ]
-        : []), true), (canOfferCustomValue
-        ? [
+    var publishedItems = (0, react_2.useMemo)(function () { return __spreadArray(__spreadArray(__spreadArray([], (tabsKind ?
+        []
+        : __spreadArray(__spreadArray([], (canOfferExpression && !functions.loading ?
+            [
+                {
+                    label: 'Use Expression',
+                    icon: 'Functions',
+                    tooltip: 'Run a function on this value',
+                    onClick: handleSelectFunctionChange,
+                },
+            ]
+            : []), true), (canOfferTemplate ?
+            [
+                {
+                    label: 'Use Template',
+                    icon: 'MoneyDollarCircleLine',
+                    tooltip: 'Use a template',
+                    onClick: handleTemplateToggleClick,
+                },
+            ]
+            : []), true)), true), (canOfferCustomValue && !tabsKind ?
+        [
             {
                 label: 'Use Custom Value',
                 icon: 'EditLine',
@@ -854,12 +994,20 @@ var TemplateFieldImpl = (0, react_2.memo)(function (_a) {
     ].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;
         /* 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
@@ -940,7 +1088,7 @@ var TemplateFieldImpl = (0, react_2.memo)(function (_a) {
                             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 ?
+                            : null, showTemplatesButton && !(showFunctionsDropdown && allowTextExpressions) ?
                             (0, jsx_runtime_1.jsxs)(reqore_1.ReqoreButton, { transparent: true, icon: 'MoneyDollarCircleLine', className: 'template-toggle', tooltip: 'Use a template', compact: true, size: rest.size, onClick: handleTemplateToggleClick, children: [' ', "Use Template", ' '] })
                             : null, showCustomValueButton ?
                             (0, jsx_runtime_1.jsxs)(reqore_1.ReqoreButton, { transparent: true, icon: 'EditLine', className: 'template-custom-value', tooltip: 'Write the value here instead of choosing a template', compact: true, size: rest.size, onClick: handleUseCustomValueClick, children: [' ', "Use Custom Value", ' '] })
@@ -959,6 +1107,7 @@ var TemplateFieldImpl = (0, react_2.memo)(function (_a) {
         handleSelectFunctionChange,
         handleTemplateToggleClick,
         handleUseCustomValueClick,
+        allowTextExpressions,
         hasOnlyAllowedValues,
         isTemplate,
         rest.readonly,
@@ -977,6 +1126,7 @@ var TemplateFieldImpl = (0, react_2.memo)(function (_a) {
         hasInputAffordance,
         // the row decides whether this field draws a menu at all
         rowMenu,
+        tabsKind,
     ]);
     // When the type is a list, and it has an element type - that element type is different
     // from the field type, so we need to send down the full templates object
@@ -998,6 +1148,67 @@ var TemplateFieldImpl = (0, react_2.memo)(function (_a) {
         rest.element_type,
         type,
     ]);
+    // ─── Value · Expression · Visual (or Value · Template) ───────────────────────────────────────────
+    if (tabsKind && !rest.disabled) {
+        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": label, 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 : undefined;
+        var templateBadge = loneTemplate_1 && !typeIsAnyLike ?
+            (_e = (0, templates_1.findTemplate)(templates !== null && templates !== void 0 ? templates : {}, loneTemplate_1)) === null || _e === void 0 ? void 0 : _e.badge
+            : undefined;
+        var conversionNote_1 = (typeof templateBadge === 'string' &&
+            templateBadge &&
+            !(0, writtenAsText_1.sameValueType)(templateBadge, type)) ?
+            "".concat((0, writtenAsText_1.templateTypeName)(templateBadge), " is converted to ").concat((0, writtenAsText_1.templateTypeName)(type).toLowerCase(), " when the value is used; a value that does not convert fails")
+            : 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: "Replace it with a value" })] })); };
+        var valueBody = function () {
+            var _a;
+            if (valueIsExpression) {
+                return cannotShow_1("This expression can't be shown as a value.");
+            }
+            if (valueTabIsText) {
+                return ((0, jsx_runtime_1.jsxs)(reqore_1.ReqoreControlGroup, { vertical: true, fluid: true, gapSize: 'small', children: [(0, jsx_runtime_1.jsx)(RichText_1.RichTextFormField, __assign({ className: 'template-selector value-tab-text', valueFormat: 'text', singleLine: (0, singleLineString_1.isSingleLineStringType)('string'), value: typeof templateValue === 'string' ? templateValue : ((0, writtenAsText_1.valueTextOf)(value, type)), templates: filteredTemplates, 
+                            // a chip of a field not of this type is named as the catalogue names it
+                            namingTemplates: templates, allowTemplates: true, onChange: handleTemplateTextChange }, rest, { fixed: false, fluid: true, panelProps: __assign(__assign({}, rest.panelProps), { style: __assign(__assign({}, (_a = rest.panelProps) === null || _a === void 0 ? void 0 : _a.style), { width: '150px', maxWidth: '100%', minWidth: 'fit-content' }) }), "aria-label": fieldAriaLabel })), conversionNote_1 ?
+                            (0, jsx_runtime_1.jsx)(reqore_1.ReqoreMessage, { size: 'small', flat: true, opaque: false, intent: 'warning', className: 'value-tab-conversion', children: conversionNote_1 })
+                            : null] }));
+            }
+            if (loneTemplate_1 !== undefined || (typeof value === 'string' && (0, templates_1.isValueTemplate)(value))) {
+                return cannotShow_1("A template is shown on the ".concat(tabsKind === 'full' ? 'Expression' : 'Template', " tab, not here."));
+            }
+            return ((0, jsx_runtime_1.jsx)(Component, __assign({ value: value, allowTemplates: false, onChange: onChange, name: name, level: level }, rest, { componentOverrides: componentOverrides }, componentTypeProp, { "aria-label": fieldAriaLabel, className: "".concat(className, " template-selector") })));
+        };
+        var expressionBody = function () { return ((0, jsx_runtime_1.jsxs)(reqore_1.ReqoreControlGroup, { vertical: true, fluid: true, gapSize: 'small', children: [(0, jsx_runtime_1.jsx)(reqore_1.ReqoreErrorBoundary, { children: (0, jsx_runtime_1.jsx)(ExpressionField_1.ExpressionField
+                    /* A value that is not an expression yet is shown as the server reads it written alone:
+                       value(12) - so the Visual tab starts from the value, not from an operand with no operation. */
+                    , { 
+                        /* A value that is not an expression yet is shown as the server reads it written alone:
+                           value(12) - so the Visual tab starts from the value, not from an operand with no operation. */
+                        value: {
+                            is_expression: true,
+                            value: value !== null && typeof value === 'object' ? value
+                                : !isEmptyValue && value !== null ?
+                                    { exp: 'value', args: [{ type: type, value: value }] }
+                                    : undefined,
+                        }, initialText: expressionSeed !== null && expressionSeed !== void 0 ? expressionSeed : undefined, heldAsValue: !isEmptyValue && value !== null && typeof value !== 'object', componentOverrides: componentOverrides, localTemplates: templates, type: type, returnType: (returnType || expressionDataType), onChange: handleExpressionChange, readOnly: rest.readOnly || rest.disabled, expressions: rest.expressions, expressionsUrl: rest.expressions_url, fields: rest.dpql_fields, serverHandled: rest.server_expression_handling, extraActions: extraActions, size: rest.size, defaultMode: tab === 'visual' ? 'visual' : 'text', requestedMode: tab === 'visual' ? 'visual' : 'text', hideModeToggle: true, 
+                        // 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: "Keep \"".concat(expressionFromText, "\" as a value instead"), onClick: undoExpressionFromText, children: "Undo" })
+                    : null] })); };
+        var templateBody = function () { return ((0, jsx_runtime_1.jsx)(exports.TemplateDropdownSelector, { allowCustomValues: false, templates: templates, value: typeof value === 'string' && (0, templates_1.isValueTemplate)(value) ? value : null, items: filteredTemplates === null || filteredTemplates === void 0 ? void 0 : filteredTemplates.items, onItemSelect: handleSelectTemplateFromList, onRemoveClick: replaceWithAValue, size: rest.size, label: label, hasOnlyAllowedValues: hasOnlyAllowedValues })); };
+        return ((0, jsx_runtime_1.jsxs)(reqore_1.ReqoreControlGroup, { vertical: true, fluid: true, gapSize: 'small', className: 'value-tabs-field', children: [(0, jsx_runtime_1.jsxs)(reqore_1.ReqoreControlGroup, { fluid: true, size: rest.size, verticalAlign: 'center', children: [(0, jsx_runtime_1.jsxs)(reqore_1.ReqoreControlGroup, { stack: true, size: rest.size, className: 'value-tabs', fixed: true, children: [tabButton('value', 'Value', 'EditLine'), tabsKind === 'full' ?
+                                    [
+                                        tabButton('expression', 'Expression', 'CodeLine', 'Write an expression - it also takes templates'),
+                                        tabButton('visual', 'Visual', 'NodeTree', 'Build the expression visually'),
+                                    ]
+                                    : tabButton('template', 'Template', 'MoneyDollarCircleLine', 'Choose a template')] }), renderControls()] }), 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
@@ -1042,12 +1253,26 @@ var TemplateFieldImpl = (0, react_2.memo)(function (_a) {
     }
     return ((0, jsx_runtime_1.jsxs)(reqore_1.ReqoreControlGroup, __assign({ fluid: rest.fluid, fixed: rest.fixed, size: rest.size }, rest, { stack: false, verticalAlign: 'flex-start', children: [!isTemplate && allowCustomValues ?
                 (0, jsx_runtime_1.jsx)(Component, __assign({ value: value, allowTemplates: allowTemplates, onChange: onChange, name: name, level: level }, rest, { componentOverrides: componentOverrides }, componentTypeProp, { "aria-label": fieldAriaLabel, className: "".concat(className, " template-selector"), templates: componentTemplates }))
-                : null, isTemplate && templateSupportsCustomValues && !templateValueIsBracedToken ?
-                (0, jsx_runtime_1.jsx)(RichText_1.RichTextFormField, __assign({ className: 'template-selector', valueFormat: 'text', singleLine: (0, singleLineString_1.isSingleLineStringType)('string'), value: typeof templateValue === 'string' ? templateValue : '', templates: filteredTemplates, allowTemplates: true, onChange: handleTemplateTextChange }, rest, { "aria-label": fieldAriaLabel }))
+                : null, !isTemplate && allowCustomValues && dateTakesTemplates ?
+                (0, jsx_runtime_1.jsx)(reqore_1.ReqoreDropdown, { className: 'date-template-picker', icon: 'MoneyDollarCircleLine', fixed: true, compact: true, size: rest.size, tooltip: 'Use a template', "aria-label": 'Use a template', filterable: true, items: filteredTemplates === null || filteredTemplates === void 0 ? void 0 : filteredTemplates.items, onItemSelect: handleSelectDateTemplate })
+                : null, isTemplate && templateSupportsCustomValues ?
+                (0, jsx_runtime_1.jsx)(RichText_1.RichTextFormField, __assign({ className: 'template-selector', valueFormat: 'text', singleLine: (0, singleLineString_1.isSingleLineStringType)('string'), 
+                    /* null shows as null, not as an empty field: the two are different values, and an
+                       untyped field holding null looked exactly like one holding nothing (qorus#646) */
+                    value: typeof templateValue === 'string' ? templateValue : (((_f = (0, writtenAsText_1.untypedTextOf)(value, type)) !== null && _f !== void 0 ? _f : '')), templates: filteredTemplates, 
+                    // a chip of a field not of this type (text around it, say) is named as the catalogue names it
+                    namingTemplates: templates, allowTemplates: true, onChange: handleTemplateTextChange }, rest, { 
+                    /* The text the value is written in takes the room its row gives it and gives it back: a
+                       caller's \`fixed\` sized a picker chip, and on a text field it kept the field at its full
+                       width, pushing the ⋮ past an operand's row in a narrow column. */
+                    fixed: false, fluid: true, 
+                    /* 150px wide, as a free text field is, wider for what it holds, and narrower only where its
+                       row has less room - an operand in a narrow column - as a number's input is: a fixed
+                       150px minimum held it at full width there. */
+                    panelProps: __assign(__assign({}, rest.panelProps), { style: __assign(__assign({}, (_g = rest.panelProps) === null || _g === void 0 ? void 0 : _g.style), { width: '150px', maxWidth: '100%', minWidth: 'fit-content' }) }), "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)) ?
+                : null, showTemplatesDropdown ?
                 (0, jsx_runtime_1.jsx)(exports.TemplateDropdownSelector, { allowCustomValues: allowCustomValues, templates: templates, value: templateValue, items: filteredTemplates === null || filteredTemplates === void 0 ? void 0 : filteredTemplates.items, onItemSelect: handleSelectTemplateFromList, onRemoveClick: handleRemoveTemplateClick, size: rest.size, label: label, hasOnlyAllowedValues: hasOnlyAllowedValues })
                 : null, renderControls()] })));
 });