@qoretechnologies/reqraft 0.10.66-pr.152.g3349989 → 0.10.66

package/dist/components/smartEditor/SmartEditor.js

@@ -1,4 +1,8 @@
 "use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
 var __assign = (this && this.__assign) || function () {
     __assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -10,28 +14,41 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
+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 };
     }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
 };
 var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
@@ -42,28 +59,42 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
     }
     return to.concat(ar || Array.prototype.slice.call(from));
 };
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SmartEditor = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
 // Copyright 2026 Qore Technologies, s.r.o.
 var reqore_1 = require("@qoretechnologies/reqore");
 var Popover_1 = require("@qoretechnologies/reqore/dist/components/Popover");
+var sizes_1 = require("@qoretechnologies/reqore/dist/constants/sizes");
 var RichTextEditor_1 = require("@qoretechnologies/reqore/dist/components/RichTextEditor");
 var colors_1 = require("@qoretechnologies/reqore/dist/helpers/colors");
-var react_1 = __importStar(require("react"));
+var react_1 = require("react");
+var react_use_1 = require("react-use");
+var styled_components_1 = __importDefault(require("styled-components"));
 var slate_1 = require("slate");
 var slate_react_1 = require("slate-react");
 var emittedValues_1 = require("../form/fields/emittedValues");
 var helpers_1 = require("./helpers");
+var useTemplateTags_1 = require("../form/fields/rich-text/useTemplateTags");
+var CompletionMenu_1 = require("./CompletionMenu");
 var MarkdownDoc_1 = require("./MarkdownDoc");
-var styling_1 = require("./styling");
+var typedReferences_1 = require("./typedReferences");
 var useLspAutocomplete_1 = require("./useLspAutocomplete");
 var useLspDiagnosticDecorations_1 = require("./useLspDiagnosticDecorations");
 var useLspHover_1 = require("./useLspHover");
+var useCoarsePointer_1 = require("../../hooks/useCoarsePointer");
 var useLspSemanticTokens_1 = require("./useLspSemanticTokens");
 var useLspSignatureHelp_1 = require("./useLspSignatureHelp");
+var templateTree_1 = require("../../helpers/templateTree");
+var useTabCameIn_1 = require("./useTabCameIn");
+var templateTree_2 = require("../../helpers/templateTree");
+var typedReferences_2 = require("./typedReferences");
+var useEditingAids_1 = require("./useEditingAids");
 // One-Dark-ish palette keyed off the LSP semantic-token legend; absent
-// types fall through to Slate's default text colour.
+// types fall through to Slate's default text color.
 var SEMANTIC_TOKEN_COLORS = {
     keyword: '#c678dd', // purple — control flow, `in`, `not`, `between`, …
     operator: '#56b6c2', // cyan — ==, !=, &&, ||, =~, !~, …
@@ -82,56 +113,6 @@ var SEMANTIC_TOKEN_COLORS = {
     decorator: '#c678dd', // purple
     namespace: '#e5c07b', // yellow
 };
-// Kind chip + a Warning chip (Qonsole flags mutating verbs) for a
-// completion row; undefined when neither applies.
-function buildKindBadge(item) {
-    var _a;
-    var kindIntent = ((_a = item.metadata) === null || _a === void 0 ? void 0 : _a.kind) !== undefined ? styling_1.COMPLETION_KIND_INTENTS[item.metadata.kind] : undefined;
-    var kindBadge = item.kindLabel ?
-        {
-            label: item.kindLabel,
-            minimal: true,
-            size: 'small',
-            intent: kindIntent,
-        }
-        : null;
-    var warningBadge = item.warning ?
-        {
-            label: 'Warning',
-            size: 'small',
-            intent: 'warning',
-            tooltip: item.warning,
-        }
-        : null;
-    if (warningBadge && kindBadge)
-        return [kindBadge, warningBadge];
-    if (warningBadge)
-        return [warningBadge];
-    if (kindBadge)
-        return kindBadge;
-    return undefined;
-}
-// Tooltip prop rendering a row's LSP `documentation` (markdown/plaintext),
-// or undefined when there is none.
-function buildDocTooltip(item) {
-    var _a;
-    var doc = item.documentation;
-    if (!doc)
-        return undefined;
-    var isMarkdown = typeof doc === 'object' && doc !== null && doc.kind === 'markdown';
-    var text = typeof doc === 'string' ? doc : ((_a = doc === null || doc === void 0 ? void 0 : doc.value) !== null && _a !== void 0 ? _a : '');
-    if (!text)
-        return undefined;
-    return {
-        content: (0, jsx_runtime_1.jsx)(MarkdownDoc_1.MarkdownDoc, { content: text, markdown: isMarkdown }),
-        placement: 'right',
-        delay: 200,
-        // The cast covers popover props missing from the older tooltip type.
-        flat: true,
-        transparent: true,
-        backgroundBlur: 20,
-    };
-}
 // Applies the server's `textEdit` (replacing the typed partial token so
 // `-` + `--desc=` doesn't become `---desc=`), else inserts at the cursor.
 // DPQL/Qonsole wrappers override this to insert tag chips.
@@ -175,19 +156,6 @@ var defaultCompletionInserter = function (item, editor, ctx) {
         // Editor may not be focused.
     }
 };
-// Module-scoped so the reference is stable across renders — an inline
-// object would defeat ReqoreMenuItem's memoization.
-var COMPLETION_ITEM_STYLE = { fontFamily: 'monospace' };
-// Memoized completion row so badge/tooltip derivation runs once per item,
-// not on every SmartEditor re-render.
-var CompletionMenuItem = (0, react_1.memo)(function (_a) {
-    var item = _a.item, isFocused = _a.isFocused, onSelect = _a.onSelect;
-    var badge = (0, react_1.useMemo)(function () { return buildKindBadge(item); }, [item]);
-    var tooltip = (0, react_1.useMemo)(function () { return buildDocTooltip(item); }, [item]);
-    var handleClick = (0, react_1.useCallback)(function () { return onSelect(item); }, [onSelect, item]);
-    return ((0, jsx_runtime_1.jsx)(reqore_1.ReqoreMenuItem, { icon: item.icon, label: item.label, description: item.description, badge: badge, tooltip: tooltip, selected: isFocused, active: isFocused, minimal: true, scrollIntoView: isFocused, onClick: handleClick, compact: true, style: COMPLETION_ITEM_STYLE }));
-});
-CompletionMenuItem.displayName = 'CompletionMenuItem';
 // Memoized signature pill. Prefers ABOVE the caret line, falling back to
 // BELOW when that would clip the viewport top; horizontally clamped to the
 // viewport.
@@ -246,14 +214,61 @@ var SignatureHelpPill = (0, react_1.memo)(function (_a) {
             boxShadow: '0 4px 16px rgba(0,0,0,0.3)',
             pointerEvents: 'none',
             zIndex: 100,
-        }, children: [(0, jsx_runtime_1.jsx)(reqore_1.ReqoreCallout, { size: 'small', paddingSize: 'tiny', style: { fontFamily: 'monospace' }, label: label }), paramDoc && ((0, jsx_runtime_1.jsx)("div", { style: { marginTop: 4, opacity: 0.85 }, children: (0, jsx_runtime_1.jsx)(MarkdownDoc_1.MarkdownDoc, { content: paramDoc, markdown: true }) }))] }, "sig-".concat(position.left, "-").concat(position.top, "-").concat(placeBelow)));
+        }, children: [(0, jsx_runtime_1.jsx)(reqore_1.ReqoreCallout, { size: 'small', paddingSize: 'tiny', style: { fontFamily: reqore_1.ReqoreFonts.mono }, label: label }), paramDoc && ((0, jsx_runtime_1.jsx)("div", { style: { marginTop: 4, opacity: 0.85 }, children: (0, jsx_runtime_1.jsx)(MarkdownDoc_1.MarkdownDoc, { content: paramDoc, markdown: true }) }))] }, "sig-".concat(position.left, "-").concat(position.top, "-").concat(placeBelow)));
 });
 SignatureHelpPill.displayName = 'SignatureHelpPill';
+/** Distinguishes the completion lists of the editors on a page, for each editor's `aria-controls`. */
+var completionMenuCounter = 0;
+/* The text's box in its row: it takes the row, and gives it up to the Details button beside it on a touch
+   screen. */
+/** The width of the editor's row (Reqore's phone width) at or below which its Details button is its icon alone. */
+var DETAILS_WORD_MIN_ROW_WIDTH = 480;
+/**
+ * The box the text is drawn in, as a code editor draws it where asked: lines that do not wrap (`wordWrap: off`),
+ * scrolled inside the box, no wider than it; a height the text scrolls within (`maxHeight`); each line's number
+ * before it (`lineNumbers`), counted by its paragraph.
+ */
+var StyledEditorBox = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  [data-slate-editor] {\n    ", "\n    ", "\n    ", "\n  }\n  ", "\n"], ["\n  [data-slate-editor] {\n    ", "\n    ", "\n    ", "\n  }\n  ", "\n"])), function (_a) {
+    var $wordWrap = _a.$wordWrap;
+    return $wordWrap === 'off' ? 'white-space: pre !important; overflow-wrap: normal !important; overflow-x: auto;' : '';
+}, function (_a) {
+    var $maxHeight = _a.$maxHeight;
+    return ($maxHeight ? "max-height: ".concat($maxHeight, "; overflow-y: auto;") : '');
+}, function (_a) {
+    var $lineNumbers = _a.$lineNumbers;
+    return ($lineNumbers ? 'counter-reset: smart-editor-line; padding-left: 3em !important;' : '');
+}, function (_a) {
+    var $lineNumbers = _a.$lineNumbers;
+    return $lineNumbers ?
+        "[data-slate-editor] > [data-slate-node='element'] {\n        position: relative;\n        counter-increment: smart-editor-line;\n      }\n      [data-slate-editor] > [data-slate-node='element']::before {\n        content: counter(smart-editor-line);\n        position: absolute;\n        left: -3em;\n        width: 2.2em;\n        text-align: right;\n        opacity: 0.45;\n        user-select: none;\n        pointer-events: none;\n      }"
+        : '';
+});
+var EDITOR_BOX_STYLE = {
+    position: 'relative',
+    flex: '1 1 auto',
+    minWidth: 0,
+};
+/**
+ * The button beside the text that opens the template picker for a pick at the caret (qorus#646): where a value
+ * cannot be written after the text before the caret (`insertableAt`), it says why and cannot be pressed. Its press
+ * keeps the focus, and the caret the pick goes at, in the text.
+ */
+var TemplateButton = function (_a) {
+    var size = _a.size, insertable = _a.insertable, notInsertable = _a.notInsertable, open = _a.open;
+    return ((0, jsx_runtime_1.jsx)(reqore_1.ReqoreButton, { className: 'smart-editor-template-button', icon: 'MoneyDollarCircleLine', fixed: true, size: size !== null && size !== void 0 ? size : 'normal', "aria-label": 'Insert a template', tooltip: insertable ? 'Insert a template' : notInsertable, disabled: !insertable, onMouseDown: function (event) { return event.preventDefault(); }, onClick: function (event) {
+            var _a = event.currentTarget.getBoundingClientRect(), left = _a.left, bottom = _a.bottom;
+            open({ left: left, bottom: bottom });
+        } }));
+};
 exports.SmartEditor = (0, react_1.forwardRef)(function (_a, ref) {
-    var session = _a.session, value = _a.value, onChange = _a.onChange, decorate = _a.decorate, customRenderLeaf = _a.customRenderLeaf, tagRenderer = _a.tagRenderer, onTagClick = _a.onTagClick, triggerCharacters = _a.triggerCharacters, _b = _a.converter, converter = _b === void 0 ? helpers_1.defaultSlateConverter : _b, _c = _a.completionInserter, completionInserter = _c === void 0 ? defaultCompletionInserter : _c, topActions = _a.topActions, height = _a.height, _d = _a.readOnly, readOnly = _d === void 0 ? false : _d, _e = _a.showDiagnostics, showDiagnostics = _e === void 0 ? true : _e, onBlur = _a.onBlur, loadingIndicator = _a.loadingIndicator, _f = _a.enableHover, enableHover = _f === void 0 ? true : _f, _g = _a.isLoading, isLoading = _g === void 0 ? false : _g, _h = _a.enableSignatureHelp, enableSignatureHelp = _h === void 0 ? true : _h;
+    var _b, _c;
+    var session = _a.session, value = _a.value, onChange = _a.onChange, decorate = _a.decorate, customRenderLeaf = _a.customRenderLeaf, tagRenderer = _a.tagRenderer, onTagClick = _a.onTagClick, triggerCharacters = _a.triggerCharacters, _d = _a.converter, converter = _d === void 0 ? helpers_1.defaultSlateConverter : _d, _e = _a.completionInserter, completionInserter = _e === void 0 ? defaultCompletionInserter : _e, topActions = _a.topActions, height = _a.height, size = _a.size, _f = _a.readOnly, readOnly = _f === void 0 ? false : _f, _g = _a.showDiagnostics, showDiagnostics = _g === void 0 ? true : _g, onBlur = _a.onBlur, tags = _a.tags, loadingIndicator = _a.loadingIndicator, _h = _a.enableHover, enableHover = _h === void 0 ? true : _h, hoverDelayMs = _a.hoverDelayMs, _j = _a.isLoading, isLoading = _j === void 0 ? false : _j, _k = _a.enableSignatureHelp, enableSignatureHelp = _k === void 0 ? true : _k, _l = _a.completeOnClick, completeOnClick = _l === void 0 ? false : _l, completionsWith = _a.completionsWith, emptyCompletionMessage = _a.emptyCompletionMessage, presentDiagnostics = _a.presentDiagnostics, diagnosticAction = _a.diagnosticAction, referenceNamesNothing = _a.referenceNamesNothing, templateRoots = _a.templateRoots, templateButton = _a.templateButton, editingLanguage = _a.editingLanguage, formatDocument = _a.formatDocument, _m = _a.wordWrap, wordWrap = _m === void 0 ? 'on' : _m, maxHeight = _a.maxHeight, _o = _a.lineNumbers, lineNumbers = _o === void 0 ? false : _o;
     var theme = (0, reqore_1.useReqoreTheme)();
     var editorRef = (0, react_1.useRef)(null);
+    var completionMenuId = (0, react_1.useMemo)(function () { return "completion-menu-".concat(++completionMenuCounter); }, []);
     var lastPlainTextRef = (0, react_1.useRef)(value);
+    // what an emptied text opens (set where the picker's roots are known, below)
+    var emptiedRef = (0, react_1.useRef)(function () { return undefined; });
     // Cached Slate nodes, refreshed only on EXTERNAL value changes — not on
     // the typing echo. Passing a fresh ref every keystroke re-runs
     // ReqoreRichTextEditor's tokenizer mid-token (typed `@s` collapses to a
@@ -264,9 +279,9 @@ exports.SmartEditor = (0, react_1.forwardRef)(function (_a, ref) {
        from outside — a leading chip gains an empty text leaf before it — without
        changing its text, so `value` never changes and the cache above kept the
        tree the editor no longer had. Every offset computed from it (token
-       colours, diagnostics, signature help) then pointed one leaf off: a Text
+       colors, diagnostics, signature help) then pointed one leaf off: a Text
        view seeded with `"$local:name" == "John"` was never highlighted. */
-    var _j = (0, react_1.useReducer)(function (count) { return count + 1; }, 0), editorTreeVersion = _j[0], noteEditorTree = _j[1];
+    var _p = (0, react_1.useReducer)(function (count) { return count + 1; }, 0), editorTreeVersion = _p[0], noteEditorTree = _p[1];
     (0, react_1.useImperativeHandle)(ref, function () { return editorRef.current; }, []);
     // Gates all LSP hooks on both the connection (`isReady`) and any
     // wrapper context binding (`isContextReady`) — without the latter,
@@ -274,16 +289,117 @@ exports.SmartEditor = (0, react_1.forwardRef)(function (_a, ref) {
     // the server context-less and the dropdown silently closes. Generic
     // sessions set `isContextReady: true`, collapsing this to `isReady`.
     var lspReady = session.isReady && session.isContextReady;
+    /* What the list offers at the caret: the server's answer, with the host's own entries merged in where they
+       can be written (`completionsWith`). Where no server can be asked, the host's alone. */
+    var noServer = session.isUnavailable && !!completionsWith;
+    var askServer = session.getCompletions;
+    var getCompletions = (0, react_1.useCallback)(function (plainText, offset, typedInText) { return __awaiter(void 0, void 0, void 0, function () {
+        var serverItems, _a;
+        return __generator(this, function (_b) {
+            switch (_b.label) {
+                case 0:
+                    if (!noServer) return [3 /*break*/, 1];
+                    _a = undefined;
+                    return [3 /*break*/, 3];
+                case 1: return [4 /*yield*/, askServer(plainText, offset)];
+                case 2:
+                    _a = _b.sent();
+                    _b.label = 3;
+                case 3:
+                    serverItems = _a;
+                    return [2 /*return*/, completionsWith ?
+                            completionsWith({ plainText: plainText, offset: offset, serverItems: serverItems, typedInText: typedInText })
+                            : (serverItems !== null && serverItems !== void 0 ? serverItems : [])];
+            }
+        });
+    }); }, [noServer, askServer, completionsWith]);
+    /* What the language server completes where a value can be written (the start of the text), for the template
+       picker to offer beside the field's own templates: the record's fields, the template contexts, the functions
+       and the values (qorus#646, David: "users should be supported with all available completions in the template
+       picker"). Asked once the server is ready, again as the field's templates change, and when the picker opens. */
+    var _q = (0, react_1.useState)(), serverValues = _q[0], setServerValues = _q[1];
+    var askedValuesRef = (0, react_1.useRef)(0);
+    var askServerValues = (0, react_1.useCallback)(function () { return __awaiter(void 0, void 0, void 0, function () {
+        var asked, items;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    // only an editor of templates has a template picker to offer them in (`templateRoots`)
+                    if (noServer || !lspReady || !templateRoots)
+                        return [2 /*return*/];
+                    asked = ++askedValuesRef.current;
+                    return [4 /*yield*/, askServer('', 0)];
+                case 1:
+                    items = _a.sent();
+                    // only the latest answer, and only while the editor is there
+                    if (asked === askedValuesRef.current && mountedRef.current)
+                        setServerValues(items);
+                    return [2 /*return*/];
+            }
+        });
+    }); }, [noServer, lspReady, askServer, templateRoots]);
+    var mountedRef = (0, react_1.useRef)(true);
+    (0, react_1.useEffect)(function () { return function () {
+        mountedRef.current = false;
+    }; }, []);
+    // asked when the server is ready and as the field's templates change
+    (0, react_1.useEffect)(function () {
+        void askServerValues();
+    }, [lspReady, templateRoots]);
+    var pickerRoots = (0, react_1.useMemo)(
+    // a lone group of the field's opened only where nothing is added beside it
+    function () { return (templateRoots ? (0, templateTree_2.openLoneGroup)((0, templateTree_2.withServerCompletions)(templateRoots, serverValues)) : []); }, [templateRoots, serverValues]);
     var autocomplete = (0, useLspAutocomplete_1.useLspAutocomplete)({
-        getCompletions: session.getCompletions,
-        isReady: lspReady,
+        getCompletions: getCompletions,
+        isReady: lspReady || noServer,
         triggerCharacters: triggerCharacters,
         converter: converter,
         inserter: completionInserter,
+        emptyMessage: emptyCompletionMessage,
+        // what to write next, above the rows, where none of them is what is written
+        noteAt: emptyCompletionMessage,
+        // Enter or Tab where nothing more is listed: what is written at the caret, a whole reference, is its chip
+        commitTyped: function (editor) {
+            var _a;
+            return (0, typedReferences_2.commitTypedReferences)(editor, converter, referenceNamesNothing, (_a = editor.selection) === null || _a === void 0 ? void 0 : _a.anchor.path[0]);
+        },
     });
+    // the picker opened: what the server completes asked again, for the record and the context bound now
+    var pickerOpen = !!autocomplete.browse;
+    (0, react_1.useEffect)(function () {
+        if (pickerOpen)
+            void askServerValues();
+    }, [pickerOpen, askServerValues]);
     var hover = (0, useLspHover_1.useLspHover)(session, editorRef, converter, {
         enabled: enableHover,
+        debounceMs: hoverDelayMs,
+        // a chip whose props carry a tooltip (a field the record describes) shows that, not the server's hover too
+        chipHasOwnHover: function (tag) {
+            var _a;
+            return !!((_a = tagRenderer === null || tagRenderer === void 0 ? void 0 : tagRenderer(tag)) === null || _a === void 0 ? void 0 : _a.tooltip);
+        },
     });
+    /* The hover the popover drawn in this render is of: what it dismisses when it closes, and nothing newer. */
+    var shownHoverId = hover.hoverId;
+    /* A finger cannot hover: where the pointer is one, "Details" shows what the server says of the word at the
+       caret, in the same pop-up a mouse gets by hovering. Only where the server says anything (`hoverProvider`). */
+    var coarse = (0, useCoarsePointer_1.useCoarsePointer)();
+    /* The row the text and its Details button share, measured: in a row a phone's width or narrower, Details is its
+       icon alone - its word took the text's room (Foxhoundn on qlip #383: "The details button should be just an icon
+       on such small screen / container size"). The row, not the screen: an editor in a narrow card on a wide
+       screen is as short of room. */
+    var _r = (0, react_use_1.useMeasure)(), rowRef = _r[0], rowWidth = _r[1].width;
+    var detailsSaysItsWord = !rowWidth || rowWidth > DETAILS_WORD_MIN_ROW_WIDTH;
+    var showDetailsButton = coarse &&
+        // Details says what the word at the caret is, and a read-only text has no caret: a tap on a read-only
+        // rendering (a collapsed row's expression) opens what holds it, where Details is
+        !readOnly &&
+        enableHover &&
+        session.isReady &&
+        !!((_c = (_b = session.client) === null || _b === void 0 ? void 0 : _b.capabilities) === null || _c === void 0 ? void 0 : _c.hoverProvider);
+    /* The hover Details showed, drawn as a card under the button rather than over the text (`showAtCaret`). */
+    var _s = (0, react_1.useState)(), detailsHoverId = _s[0], setDetailsHoverId = _s[1];
+    var detailsShown = detailsHoverId !== undefined && hover.hoverId === detailsHoverId;
     /* What the editor has reported and the host has not handed back yet. A host can hand an emit back
        after the next key is already in the editor - one that debounces, or a render that lands between
        two keys - and that stale value is not a change: rebuilding the document from it replaced the text
@@ -309,7 +425,7 @@ exports.SmartEditor = (0, react_1.forwardRef)(function (_a, ref) {
     }, [value, converter, editorTreeVersion]);
     /* A value set from outside is a change to the document as much as typing
        is — a Text view seeded after mount, a Preview following the author. The
-       server colours and diagnoses its own copy of the text, so it must hold
+       server colors and diagnoses its own copy of the text, so it must hold
        this one; typing already sent its text, and is not resent. */
     var syncDocument = session.didChange;
     (0, react_1.useEffect)(function () {
@@ -323,21 +439,82 @@ exports.SmartEditor = (0, react_1.forwardRef)(function (_a, ref) {
         lastPlainTextRef.current = value;
         syncDocument(value);
     }, [syncDocument, value, emitted]);
-    var diagnosticDecorate = (0, useLspDiagnosticDecorations_1.useLspDiagnosticDecorations)(session.diagnostics, converter, slateValue);
+    /* The server's diagnostics as the editor says them: in the host's words for what it wrote itself
+       (`presentDiagnostics`), and without the error of a reference half-typed at the caret while its list is open
+       or on its way - a `$` typed to ask for a template is not a mistake yet (qorus#646, David's decision). It
+       is said once the list is put away. */
+    var listActive = autocomplete.isActive;
+    var shownDiagnostics = (0, react_1.useMemo)(function () {
+        var _a;
+        var editor = editorRef.current;
+        var nodes = (_a = editor === null || editor === void 0 ? void 0 : editor.children) !== null && _a !== void 0 ? _a : slateValue;
+        var said = presentDiagnostics ?
+            presentDiagnostics(session.diagnostics, converter.fromSlateNodes(nodes))
+            : session.diagnostics;
+        var at = editor === null || editor === void 0 ? void 0 : editor.selection;
+        if (!listActive || !converter.referenceBeingWritten || !at || !slate_1.Range.isCollapsed(at)) {
+            return said;
+        }
+        var _b = at.anchor.path, index = _b[0], child = _b[1];
+        var paragraph = nodes[index];
+        if (at.anchor.path.length !== 2 || !paragraph) {
+            return said;
+        }
+        var end = converter.selectionToOffset([paragraph], [0, child], at.anchor.offset);
+        var written = converter.referenceBeingWritten(converter.fromSlateNodes([paragraph]).slice(0, end));
+        /* what is said of the reference being written, which reaches the caret: from where it starts in what is
+           being written, or a whole reference that ends at the caret (`$data:receive_order.ev`, of which only `ev`
+           is being written) */
+        return said.filter(function (_a) {
+            var _b = _a.range, start = _b.start, to = _b.end;
+            return !(start.line === index &&
+                ((written > 0 && start.character >= end - written && start.character < end) ||
+                    (start.character < end && to.line === index && to.character === end)));
+        });
+    }, [session.diagnostics, presentDiagnostics, converter, slateValue, listActive]);
+    var diagnosticDecorate = (0, useLspDiagnosticDecorations_1.useLspDiagnosticDecorations)(shownDiagnostics, converter, slateValue);
     // Server-driven syntax highlighting (replaces the old client-side regex
     // highlighter — see design doc §7).
     var semanticDecorate = (0, useLspSemanticTokens_1.useLspSemanticTokens)(session, converter, slateValue);
     // No-ops when the server doesn't advertise `signatureHelpProvider`.
     var signatureHelp = (0, useLspSignatureHelp_1.useLspSignatureHelp)(session, editorRef, converter, slateValue, { enabled: enableSignatureHelp });
+    /* What a code editor does for what is typed (`useEditingAids`): pairs closed, a selection wrapped, the
+       bracket at the caret matched, the search (Ctrl+F) and its replace, lines moved and copied, the document
+       formatted (Shift+Alt+F), completion asked for (Ctrl+Space). */
+    // the editing aids follow every change of the editor, its caret's included (the bracket match)
+    var aidsChangeRef = (0, react_1.useRef)(function () { return undefined; });
+    var aids = (0, useEditingAids_1.useEditingAids)({
+        editorRef: editorRef,
+        converter: converter,
+        nodes: slateValue,
+        language: editingLanguage,
+        readOnly: readOnly,
+        onFormat: formatDocument,
+        onComplete: function () {
+            var editor = editorRef.current;
+            var at = editor === null || editor === void 0 ? void 0 : editor.selection;
+            if (!editor || !at)
+                return;
+            try {
+                var rect = slate_react_1.ReactEditor.toDOMRange(editor, at).getBoundingClientRect();
+                autocomplete.openAtCaret(editor, at.anchor, { left: rect.left, bottom: rect.bottom });
+            }
+            catch (_a) {
+                // the caret is not drawn: nothing is asked
+            }
+        },
+    });
+    aidsChangeRef.current = aids.onEditorChange;
     var composedDecorate = (0, react_1.useCallback)(function (entry) {
         var _a;
         var userRanges = (_a = decorate === null || decorate === void 0 ? void 0 : decorate(entry)) !== null && _a !== void 0 ? _a : [];
         var semanticRanges = semanticDecorate(entry);
+        var aidRanges = aids.decorate(entry);
         var diagRanges = showDiagnostics ? diagnosticDecorate(entry) : [];
         // Diagnostics last so the wavy underline isn't overdrawn.
-        return __spreadArray(__spreadArray(__spreadArray([], userRanges, true), semanticRanges, true), diagRanges, true);
-    }, [decorate, semanticDecorate, diagnosticDecorate, showDiagnostics]);
-    // Paints semantic-token colours and diagnostic underlines, falling
+        return __spreadArray(__spreadArray(__spreadArray(__spreadArray([], userRanges, true), semanticRanges, true), aidRanges, true), diagRanges, true);
+    }, [decorate, semanticDecorate, diagnosticDecorate, showDiagnostics, aids.decorate]);
+    // Paints semantic-token colors and diagnostic underlines, falling
     // through to the consumer's `customRenderLeaf` for everything else.
     var renderLeafWithMarks = (0, react_1.useCallback)(function (props) {
         var _a, _b, _c, _d, _e, _f, _g, _h;
@@ -358,7 +535,19 @@ exports.SmartEditor = (0, react_1.forwardRef)(function (_a, ref) {
                     }, children: child }));
             }
         }
-        // Underline outermost so it overlays the syntax colour; hex
+        // the bracket matching the one at the caret, and the search's matches (the current one stronger)
+        if (leaf.bracketMatch || leaf.findMatch) {
+            child = ((0, jsx_runtime_1.jsx)("span", { className: leaf.findCurrent ? 'smart-editor-find-current'
+                    : leaf.findMatch ? 'smart-editor-find-match'
+                        : 'smart-editor-bracket-match', style: {
+                    borderRadius: 2,
+                    background: leaf.findCurrent ? 'rgba(255, 200, 0, 0.55)'
+                        : leaf.findMatch ? 'rgba(255, 200, 0, 0.25)'
+                            : 'rgba(255, 255, 255, 0.12)',
+                    outline: leaf.bracketMatch ? '1px solid rgba(255, 255, 255, 0.45)' : undefined,
+                }, children: child }));
+        }
+        // Underline outermost so it overlays the syntax color; hex
         // fallbacks cover host themes that omit a diagnostic intent.
         if (leaf.error) {
             var underlineColor = leaf.severity === 2 ? ((_d = (_c = theme.intents) === null || _c === void 0 ? void 0 : _c.warning) !== null && _d !== void 0 ? _d : '#f0a500')
@@ -372,8 +561,90 @@ exports.SmartEditor = (0, react_1.forwardRef)(function (_a, ref) {
         }
         return child;
     }, [customRenderLeaf, theme]);
+    /* A reference typed out in full is drawn as its chip, as one picked from the completion list is: the
+       paragraph is redrawn from its text, which the converter reads it in (`rechipTypedReferences`). The text is
+       the same, so nothing is reported for it. */
+    var drawTypedReferences = typedReferences_2.drawRechipped;
+    // the editor has been left: every reference typed in it is drawn as its chip
+    var handleBlur = (0, react_1.useCallback)(function () {
+        var editor = editorRef.current;
+        if (editor && !readOnly) {
+            (0, typedReferences_2.commitTypedReferences)(editor, converter, referenceNamesNothing);
+        }
+        onBlur === null || onBlur === void 0 ? void 0 : onBlur();
+    }, [converter, readOnly, onBlur, referenceNamesNothing]);
+    /* A chip put in at the caret takes the place of the reference being written there, wherever it is picked
+       from (qorus#646, David's review). The completion list's inserter takes it away itself; the list the
+       editor's templates are browsed in is reqore's, which puts a chip in at the caret as it is: a `$` typed to
+       ask for a template stayed in front of the one picked, and `pos + 1 + $pos` is refused by the server. A
+       Slate plugin on the editor reqore made for this one (its `insertNodes`), so both are one step of one
+       change - one text sent, one undo. A chip put in at a place of its own (`at`: a typed reference drawn as its
+       chip, a chip replaced) is left alone. */
+    var referenceBeingWritten = readOnly ? undefined : converter.referenceBeingWritten;
+    (0, react_1.useEffect)(function () {
+        var editor = editorRef.current;
+        if (!editor || !referenceBeingWritten) {
+            return undefined;
+        }
+        var insertNodes = editor.insertNodes;
+        editor.insertNodes = function (nodes, options) {
+            var at = editor.selection;
+            var inserted = Array.isArray(nodes) ? nodes : [nodes];
+            var chip = inserted.length === 1 && inserted[0].type === 'tag';
+            if (chip && !(options === null || options === void 0 ? void 0 : options.at) && at && slate_1.Range.isCollapsed(at) && at.anchor.path.length === 2) {
+                var _a = at.anchor.path, index = _a[0], child = _a[1];
+                var paragraph = editor.children[index];
+                if (paragraph) {
+                    var before = converter
+                        .fromSlateNodes([paragraph])
+                        .slice(0, converter.selectionToOffset([paragraph], [0, child], at.anchor.offset));
+                    var written = referenceBeingWritten(before);
+                    // what is being written is typed text, in the text the caret is in
+                    if (written > 0 && written <= at.anchor.offset) {
+                        slate_1.Transforms.delete(editor, {
+                            at: {
+                                anchor: { path: at.anchor.path, offset: at.anchor.offset - written },
+                                focus: at.anchor,
+                            },
+                        });
+                    }
+                }
+            }
+            insertNodes(nodes, options);
+        };
+        return function () {
+            editor.insertNodes = insertNodes;
+        };
+    }, [converter, referenceBeingWritten]);
+    /* Whether a template can be written at the caret, for the template button: asked again at every change of the
+       editor, a move of its caret included, so the button is never left as it was for a caret that has moved. */
+    var _t = (0, react_1.useState)(true), insertableAtCaret = _t[0], setInsertableAtCaret = _t[1];
+    var insertableAt = templateButton === null || templateButton === void 0 ? void 0 : templateButton.insertableAt;
+    var askInsertable = (0, react_1.useCallback)(function () {
+        var _a;
+        var editor = editorRef.current;
+        if (!editor || !insertableAt)
+            return;
+        try {
+            var nodes = editor.children;
+            var plainText = converter.fromSlateNodes(nodes);
+            var at = (_a = editor.selection) === null || _a === void 0 ? void 0 : _a.anchor;
+            var offset = at ? converter.selectionToOffset(nodes, at.path, at.offset) : plainText.length;
+            setInsertableAtCaret(insertableAt(plainText.slice(0, offset)));
+        }
+        catch (_b) {
+            // a selection the editor no longer has: the end of the text is asked about
+            setInsertableAtCaret(insertableAt(converter.fromSlateNodes(editor.children)));
+        }
+    }, [insertableAt, converter]);
+    (0, react_1.useEffect)(askInsertable, [askInsertable, value]);
+    var askInsertableRef = (0, react_1.useRef)(askInsertable);
+    askInsertableRef.current = askInsertable;
     var handleSlateChange = (0, react_1.useCallback)(function (newNodes) {
+        var _a;
         var plainText = converter.fromSlateNodes(newNodes);
+        // the text emptied by this edit (cleared, or its last character deleted): see below
+        var emptied = !!((_a = lastPlainTextRef.current) === null || _a === void 0 ? void 0 : _a.trim()) && !plainText.trim();
         // A selection change reports the same tree; anything else is the tree
         // the editor now holds, and the one every offset is computed against.
         if (newNodes !== slateValueRef.current) {
@@ -390,30 +661,151 @@ exports.SmartEditor = (0, react_1.forwardRef)(function (_a, ref) {
             // parameter never advances.
             onChange(plainText);
             session.didChange(plainText);
+            // a reference typed out in full, and left by the character just typed, is drawn as its chip
+            var editor = editorRef.current;
+            var at = editor === null || editor === void 0 ? void 0 : editor.selection;
+            if (editor && at && slate_1.Range.isCollapsed(at) && !readOnly && converter.endsReference) {
+                var _b = at.anchor.path, index = _b[0], child = _b[1];
+                var paragraph = newNodes[index];
+                var rechipped = paragraph &&
+                    (0, typedReferences_1.rechipTypedReferences)(converter, paragraph, index, converter.selectionToOffset([paragraph], [0, child], at.anchor.offset), referenceNamesNothing);
+                if (rechipped) {
+                    drawTypedReferences(editor, index, rechipped);
+                }
+            }
         }
         if (editorRef.current && !readOnly) {
             autocomplete.onSlateChange(editorRef.current, newNodes);
+            /* A text emptied where the author is writing offers what an empty text offers: its templates and
+               fields, the picker at its top, as a click in it opens it - not nothing, nor a list of one row that
+               only leads there (Foxhoundn on qlip #425; David: the picker offers every completion in every
+               state). */
+            if (emptied)
+                emptiedRef.current();
         }
+        aidsChangeRef.current();
+        askInsertableRef.current();
     }, [onChange, session, readOnly, autocomplete, converter, emitted]);
     // Replace mode: open the dropdown at the chip's DOM rect (not the
     // editor selection — clicks on a Slate VOID inline don't reliably
     // update `editor.selection`) and atomically swap the chip on select.
+    var hasBrowseList = !!tags && Object.keys(tags).length > 0;
     var handleTagClickDefault = (0, react_1.useCallback)(function (tag, editor) {
         if (readOnly)
             return;
+        /* An editor with a browse list (`tags`) answers a click on a chip with that list, as a click anywhere
+           in its text, and as a value's text does: one list at a time. Opening the chip's replacements beside
+           it put two lists over the text, and what was typed then reached neither (qorus#646, David: "you
+           can't type"). */
+        if (hasBrowseList)
+            return;
         try {
             var tagPath = slate_react_1.ReactEditor.findPath(editor, tag);
             var domNode = slate_react_1.ReactEditor.toDOMNode(editor, tag);
             var rect = domNode.getBoundingClientRect();
-            autocomplete.openAtChip(editor, tagPath, {
-                left: rect.left,
-                bottom: rect.bottom,
-            });
+            /* A chip the field's templates or fields list opens the picker where it is - its group, its row the
+               keyboard's - and the pick takes its place (qorus#646). A second click on it puts the picker away. */
+            var listed = (templateRoots === null || templateRoots === void 0 ? void 0 : templateRoots.length) && typeof tag.value === 'string' ?
+                (0, templateTree_1.templateNodeFor)(templateRoots, tag.value)
+                : undefined;
+            if (listed) {
+                if (autocomplete.browse && autocomplete.isReplaceMode) {
+                    autocomplete.close();
+                    return;
+                }
+                autocomplete.openBrowse(editor, {
+                    rect: { left: rect.left, bottom: rect.bottom },
+                    replacementPath: tagPath,
+                    levelId: listed.trailIds[listed.trailIds.length - 1],
+                    selectedValue: tag.value,
+                });
+                return;
+            }
+            /* An editor that completes on a click lists what can stand in the chip's place - the fields and
+               templates the chip is one of - and the pick replaces it (qorus#646, David: a click on pos listed
+               nothing). */
+            autocomplete.openAtChip(editor, tagPath, { left: rect.left, bottom: rect.bottom }, { inItsPlace: completeOnClick });
         }
         catch (_a) {
             // Tag may have been removed mid-render — ignore.
         }
-    }, [readOnly, autocomplete]);
+    }, [readOnly, autocomplete, hasBrowseList, completeOnClick, templateRoots]);
+    /* A click, a tap or Tab into the text asks what can be written at the caret (`completeOnClick`): the caret the
+       page put there, which Slate's selection follows only later. Not a click on a chip, which is a control of
+       its own, nor anything outside the text: the list's rows are drawn elsewhere, and their clicks reach this
+       box through React. */
+    var openAtCaret = autocomplete.openAtCaret, openBrowse = autocomplete.openBrowse;
+    var browsesOnClick = !!pickerRoots.length;
+    // the picker at the top of an emptied text, where it has templates and the author is in it
+    emptiedRef.current = function () {
+        var editor = editorRef.current;
+        if (!browsesOnClick || readOnly || !editor)
+            return;
+        try {
+            if (!slate_react_1.ReactEditor.isFocused(editor))
+                return;
+            var at = slate_react_1.ReactEditor.toDOMNode(editor, editor).getBoundingClientRect();
+            openBrowse(editor, {
+                rect: { left: at.left, bottom: at.bottom },
+                caret: slate_1.Editor.start(editor, []),
+                arrows: true,
+            });
+        }
+        catch (_a) {
+            // the editor is not drawn: nothing opens
+        }
+    };
+    // whether the Tab whose key comes up brought the focus into the editor (`onKeyUp` below)
+    var tabCameIn = (0, useTabCameIn_1.useTabCameIn)(function () {
+        var editor = editorRef.current;
+        return editor ? slate_react_1.ReactEditor.toDOMNode(editor, editor) : null;
+    });
+    var completeAtPageCaret = (0, react_1.useCallback)(function (target) {
+        var _a;
+        var editor = editorRef.current;
+        if ((!completeOnClick && !browsesOnClick) || readOnly || !editor)
+            return;
+        try {
+            var root = slate_react_1.ReactEditor.toDOMNode(editor, editor);
+            if (!(target instanceof Node) || !root.contains(target))
+                return;
+            if (target instanceof Element && target.closest('[data-slate-void="true"]'))
+                return;
+            var page = slate_react_1.ReactEditor.getWindow(editor).getSelection();
+            if (!page || page.rangeCount === 0 || !page.isCollapsed)
+                return;
+            var caret = slate_react_1.ReactEditor.toSlateRange(editor, page, {
+                exactMatch: false,
+                suppressThrow: true,
+            });
+            if (!caret)
+                return;
+            var box = page.getRangeAt(0).getBoundingClientRect();
+            // a caret in an empty line has no box of its own: the text's
+            var at = box.width || box.height ? box : root.getBoundingClientRect();
+            /* An empty text offers its templates and fields: the picker, at its top (qorus#646, David: a click in an
+               empty field shows the templates, the record's fields among them). */
+            var empty = !converter.fromSlateNodes(editor.children).trim();
+            /* A reference being written at the caret is completed where it is - what is listed of it, what to write
+               next and Browse all templates to put a working one in its place - not left for the picker at the top
+               (qorus#646, David's review: a click at the end of `$dynamic:` showed the picker's top silently). */
+            // what is typed in the text the caret is in: a chip before it is a value, not a reference being written
+            var leaf = slate_1.Editor.leaf(editor, caret.anchor)[0];
+            var writing = /[$@][\w.:{}*-]*$/.test(((_a = leaf.text) !== null && _a !== void 0 ? _a : '').slice(0, caret.anchor.offset));
+            if (browsesOnClick && !writing && (empty || !completeOnClick)) {
+                openBrowse(editor, {
+                    rect: { left: at.left, bottom: at.bottom },
+                    caret: caret.anchor,
+                    arrows: empty,
+                });
+                return;
+            }
+            openAtCaret(editor, caret.anchor, { left: at.left, bottom: at.bottom });
+        }
+        catch (_b) {
+            // the editor is not drawn, or the page's caret is not in it: nothing is asked
+        }
+    }, [completeOnClick, browsesOnClick, readOnly, openAtCaret, openBrowse, converter]);
     var resolvedTagClick = onTagClick !== null && onTagClick !== void 0 ? onTagClick : handleTagClickDefault;
     // ReqoreRichTextEditor memoizes `renderElement` without `onTagClick` in
     // its deps, so it captures the FIRST render's handler forever (stale
@@ -431,15 +823,6 @@ exports.SmartEditor = (0, react_1.forwardRef)(function (_a, ref) {
             return;
         autocomplete.onItemSelect(item, editorRef.current);
     }, [autocomplete]);
-    // Flatten groups into rows carrying a flat index to compare against
-    // `focusedIndex` (which is flat across all groups).
-    var completionGroups = (0, react_1.useMemo)(function () {
-        var flatIndex = 0;
-        return autocomplete.groups.map(function (group) { return ({
-            label: group.label,
-            items: group.items.map(function (item) { return ({ item: item, index: flatIndex++ }); }),
-        }); });
-    }, [autocomplete.groups]);
     // Overlay shown while the session connects, a context binding resolves,
     // or the wrapper signals `isLoading` (e.g. DpqlEditor awaiting
     // `dpql/toRichtext`). The editor stays mounted underneath;
@@ -453,85 +836,128 @@ exports.SmartEditor = (0, react_1.forwardRef)(function (_a, ref) {
     var overlayContent = !showLoadingOverlay ? null
         : loadingIndicator !== undefined && loadingIndicator !== null ? loadingIndicator
             : (0, jsx_runtime_1.jsx)(reqore_1.ReqoreSpinner, { iconColor: 'info:lighten:2', size: 'small', centered: true, labelEffect: { textSize: 'small' }, children: defaultLoadingLabel });
-    return ((0, jsx_runtime_1.jsxs)(reqore_1.ReqoreControlGroup, { vertical: true, fluid: true, children: [topActions, (0, jsx_runtime_1.jsxs)("div", { style: { position: 'relative' }, children: [(0, jsx_runtime_1.jsx)(RichTextEditor_1.ReqoreRichTextEditor, { ref: editorRef, value: slateValue, onChange: handleSlateChange, readOnly: readOnly, customRenderLeaf: renderLeafWithMarks, decorate: composedDecorate, getTagProps: tagRenderer, onTagClick: stableOnTagClick, onBlur: onBlur, panelProps: {
-                            fluid: true,
-                            flat: true,
-                            style: {
-                                // Auto-grow: the editor sizes to its content and grows
-                                // as lines are added. `height` is an optional *minimum*
-                                // floor (e.g. a multi-line code editor); when omitted,
-                                // a single comfortable line so the empty field stays
-                                // clickable and the diagnostics panel hugs the input
-                                // instead of sitting below a tall reserved box.
-                                minHeight: height !== null && height !== void 0 ? height : '2.4em',
-                                fontFamily: 'monospace',
-                                fontSize: '13px',
-                            },
-                        } }), showLoadingOverlay && ((0, jsx_runtime_1.jsx)("div", { 
-                        // Absolutely-positioned, centred panel covering the
-                        // editor body. `backdrop-filter: blur` matches the
-                        // 20px backdrop blur Reqore uses for drawers — keeps
-                        // the editor content faintly readable underneath while
-                        // signalling "this surface is paused". Pointer events
-                        // pass through; the LSP-dependent paths short-circuit
-                        // on `!isReady` / `!isContextReady` anyway.
-                        style: {
-                            position: 'absolute',
-                            inset: 0,
-                            display: 'flex',
-                            alignItems: 'center',
-                            justifyContent: 'center',
-                            background: 'rgba(10, 10, 10, 0.35)',
-                            backdropFilter: 'blur(4px)',
-                            WebkitBackdropFilter: 'blur(4px)',
-                            borderRadius: 4,
-                            pointerEvents: 'none',
-                            zIndex: 2,
-                        }, children: overlayContent })), autocomplete.isOpen &&
-                        (autocomplete.items.length > 0 ||
-                            autocomplete.isReplaceMode ||
-                            autocomplete.isFetching) && ((0, jsx_runtime_1.jsx)(Popover_1.ReqorePopover, { component: 'span', wrapperStyle: {
-                            // `fixed` anchor at the cursor's screen coords — avoids
-                            // parent-offset math.
-                            position: 'fixed',
-                            top: autocomplete.position.top,
-                            left: autocomplete.position.left,
-                            width: '1px',
-                            height: '1px',
-                            pointerEvents: 'none',
-                        }, content: (0, jsx_runtime_1.jsxs)(reqore_1.ReqoreMenu, { rounded: true, flat: true, maxHeight: '300px', width: '300px', effect: styling_1.SMART_EDITOR_OVERLAY_EFFECT, customTheme: { main: '#1e0d29' }, children: [autocomplete.items.length === 0 &&
-                                    (autocomplete.isReplaceMode || autocomplete.isFetching) && ((0, jsx_runtime_1.jsx)(reqore_1.ReqoreMenuItem, { icon: 'LoaderLine', label: !session.isReady ? 'Connecting to language server…'
-                                        : !session.isContextReady ?
-                                            'Loading schema…'
-                                            : autocomplete.isFetching ?
-                                                'Loading completions…'
-                                                : 'No alternatives available', disabled: true, compact: true })), completionGroups.map(function (group) { return ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [group.label && ((0, jsx_runtime_1.jsx)(reqore_1.ReqoreMenuDivider, { label: group.label, 
-                                            // @ts-expect-error — intent type not in older Reqore
-                                            intent: 'muted' })), group.items.map(function (_a) {
-                                            var item = _a.item, index = _a.index;
-                                            return ((0, jsx_runtime_1.jsx)(CompletionMenuItem, { item: item, isFocused: index === autocomplete.focusedIndex, onSelect: handleCompletionSelect }, item.value));
-                                        })] }, group.label || '_default')); })] }), openOnMount: true, noArrow: true, placement: 'bottom-start', handler: 'click', closeOnOutsideClick: true, closeOnInsideClick: false, minWidth: '300px', flat: true, 
-                        // Transparent so the popover wrapper doesn't frame the menu.
-                        transparent: true, onToggleChange: autocomplete.handleExternalClose }, autocomplete.popoverKey)), hover.hoverContent && hover.hoverPosition && (
-                    // Non-interactive (`pointerEvents: none`) so typing/clicking
-                    // doesn't dismiss it via a focus trap.
-                    (0, jsx_runtime_1.jsx)(Popover_1.ReqorePopover, { component: 'span', wrapperStyle: {
-                            position: 'fixed',
-                            top: hover.hoverPosition.top,
-                            left: hover.hoverPosition.left,
-                            width: '1px',
-                            height: '1px',
-                            pointerEvents: 'none',
-                        }, content: (0, jsx_runtime_1.jsx)("div", { style: { padding: 4 }, children: (0, jsx_runtime_1.jsx)(MarkdownDoc_1.MarkdownDoc, { content: hover.hoverContent.value, markdown: hover.hoverContent.kind === 'markdown' }) }), openOnMount: true, noArrow: true, placement: 'top', handler: 'hover', closeOnOutsideClick: true, minWidth: '220px', flat: true, transparent: true, backgroundBlur: 20, onToggleChange: function (open) {
-                            if (!open)
-                                hover.clearHover();
-                        } }, "hover-".concat(hover.hoverPosition.left, "-").concat(hover.hoverPosition.top))), signatureHelp.signature && signatureHelp.position && ((0, jsx_runtime_1.jsx)(SignatureHelpPill, { signature: signatureHelp.signature, position: signatureHelp.position }))] }), showDiagnostics && session.diagnostics.length > 0 && (
-            // One ReqoreMessage per diagnostic, severity → intent. Same
-            // `session.diagnostics` source as the inline underline above.
-            (0, jsx_runtime_1.jsx)(reqore_1.ReqoreControlGroup, { vertical: true, fluid: true, size: 'small', children: session.diagnostics.map(function (diag, i) { return ((0, jsx_runtime_1.jsx)(reqore_1.ReqoreMessage, { intent: (0, useLspDiagnosticDecorations_1.severityToIntent)(diag.severity), icon: diag.severity === 2 ? 'AlertLine'
+    return ((0, jsx_runtime_1.jsxs)(reqore_1.ReqoreControlGroup, { vertical: true, fluid: true, children: [topActions, aids.findBar, (0, jsx_runtime_1.jsxs)(reqore_1.ReqoreControlGroup, { ref: rowRef, fluid: true, verticalAlign: 'flex-start', className: 'smart-editor-row', "data-completion": autocomplete.isOpen ? 'open'
+                    : autocomplete.isActive ?
+                        'asking'
+                        : 'idle', children: [(0, jsx_runtime_1.jsxs)(StyledEditorBox, { style: EDITOR_BOX_STYLE, "$wordWrap": wordWrap, "$maxHeight": maxHeight, "$lineNumbers": lineNumbers, className: 'smart-editor-box', onClick: function (event) { return completeAtPageCaret(event.target); }, 
+                        /* Tab's key comes up in the editor it moved the focus into. One that went down in the editor - a Tab
+                           that took a completion, or moved the focus on - asks nothing: its key coming up here reopened the
+                           list just taken from (qorus#646). */
+                        onKeyUp: function (event) {
+                            if (event.key === 'Tab' && tabCameIn())
+                                completeAtPageCaret(event.target);
+                        }, children: [(0, jsx_runtime_1.jsx)(RichTextEditor_1.ReqoreRichTextEditor, { ref: editorRef, value: slateValue, onChange: handleSlateChange, readOnly: readOnly, customRenderLeaf: renderLeafWithMarks, decorate: composedDecorate, getTagProps: tagRenderer, onTagClick: stableOnTagClick, size: size, onBlur: handleBlur, onKeyDown: function (event) {
+                                    aids.onKeyDown(event);
+                                }, 
+                                // the field's templates, browsed when the text is clicked, tapped or tabbed into: the browse list,
+                                // drawn as the completion list is
+                                tags: tags, tagsListProps: __assign({ useTargetWidth: true }, useTemplateTags_1.TEMPLATE_BROWSE_LIST_PROPS), "aria-autocomplete": 'list', "aria-expanded": autocomplete.isOpen, "aria-controls": completionMenuId, panelProps: {
+                                    fluid: true,
+                                    flat: true,
+                                    style: {
+                                        // Auto-grow: the editor sizes to its content and grows
+                                        // as lines are added. `height` is an optional *minimum*
+                                        // floor (e.g. a multi-line code editor); when omitted,
+                                        // a single comfortable line so the empty field stays
+                                        // clickable and the diagnostics panel hugs the input
+                                        // instead of sitting below a tall reserved box.
+                                        minHeight: height !== null && height !== void 0 ? height : '2.4em',
+                                        /* reqore's mono stack, as every other code-like text: the bare generic keyword is the browser's
+                                           default fixed-width font (Courier in Chrome on macOS), larger than the field's own face */
+                                        fontFamily: reqore_1.ReqoreFonts.mono,
+                                        /* the size the text is written in (the text area's, for this size), so the frame and its `em`
+                                           floor are the text's: a fixed 13px was larger than a small field's text, and the panel's own
+                                           size larger again, which made the frame taller than the field's other tabs */
+                                        fontSize: sizes_1.CONTROL_TEXT_FROM_SIZE[size !== null && size !== void 0 ? size : 'normal'],
+                                    },
+                                } }), showLoadingOverlay && ((0, jsx_runtime_1.jsx)("div", { 
+                                // Absolutely-positioned, centred panel covering the
+                                // editor body. `backdrop-filter: blur` matches the
+                                // 20px backdrop blur Reqore uses for drawers — keeps
+                                // the editor content faintly readable underneath while
+                                // signalling "this surface is paused". Pointer events
+                                // pass through; the LSP-dependent paths short-circuit
+                                // on `!isReady` / `!isContextReady` anyway.
+                                style: {
+                                    position: 'absolute',
+                                    inset: 0,
+                                    display: 'flex',
+                                    alignItems: 'center',
+                                    justifyContent: 'center',
+                                    background: 'rgba(10, 10, 10, 0.35)',
+                                    backdropFilter: 'blur(4px)',
+                                    WebkitBackdropFilter: 'blur(4px)',
+                                    borderRadius: 4,
+                                    pointerEvents: 'none',
+                                    zIndex: 2,
+                                }, children: overlayContent })), (0, jsx_runtime_1.jsx)(CompletionMenu_1.CompletionMenu, { autocomplete: autocomplete, id: completionMenuId, onSelect: handleCompletionSelect, templateRoots: pickerRoots, pendingLabel: !session.isReady ? 'Connecting to language server…'
+                                    : !session.isContextReady ? 'Loading schema…'
+                                        : undefined }), hover.hoverContent && hover.hoverPosition && (
+                            // Non-interactive (`pointerEvents: none`) so typing/clicking
+                            // doesn't dismiss it via a focus trap.
+                            (0, jsx_runtime_1.jsx)(Popover_1.ReqorePopover
+                            // one popover per hover: the next one is a popover of its own, wherever it is
+                            , { component: 'span', wrapperStyle: {
+                                    position: 'fixed',
+                                    top: hover.hoverPosition.top,
+                                    left: hover.hoverPosition.left,
+                                    width: '1px',
+                                    height: '1px',
+                                    pointerEvents: 'none',
+                                }, content: (0, jsx_runtime_1.jsx)("div", { style: { padding: 4 }, children: (0, jsx_runtime_1.jsx)(MarkdownDoc_1.MarkdownDoc, { content: hover.hoverContent.value, markdown: hover.hoverContent.kind === 'markdown' }) }), openOnMount: true, noArrow: true, 
+                                /* A mouse's hover is over the word it is of; what Details shows is under the button, beside the
+                                   text. Both are a popover's card, the surface a chip's hover is drawn on: drawn as glass, a hover
+                                   over an empty page was its words with nothing under them (Foxhoundn, qlip #392: "It looks like
+                                   the background is transparent? Is it not using a ReqorePopover / the tags tooltip?"). */
+                                placement: detailsShown ? 'bottom-end' : 'top', handler: 'hover', closeOnOutsideClick: true, minWidth: '220px', onToggleChange: function (open) {
+                                    // this hover only: a popover replaced by the next hover says it closed as it goes
+                                    if (!open)
+                                        hover.clearHover(shownHoverId);
+                                } }, "hover-".concat(hover.hoverId))), signatureHelp.signature && signatureHelp.position && ((0, jsx_runtime_1.jsx)(SignatureHelpPill, { signature: signatureHelp.signature, position: signatureHelp.position }))] }), templateButton && pickerRoots.length && !readOnly ?
+                        (0, jsx_runtime_1.jsx)(TemplateButton, { size: size, insertable: insertableAtCaret, notInsertable: templateButton.notInsertable, open: function (rect) {
+                                var editor = editorRef.current;
+                                if (!editor)
+                                    return;
+                                if (autocomplete.browse && !autocomplete.isReplaceMode) {
+                                    autocomplete.close();
+                                    return;
+                                }
+                                openBrowse(editor, {
+                                    rect: rect,
+                                    arrows: !converter.fromSlateNodes(editor.children).trim(),
+                                });
+                            } })
+                        : null, showDetailsButton && ((0, jsx_runtime_1.jsx)(reqore_1.ReqoreButton, { className: 'smart-editor-details', icon: 'InformationLine', fixed: true, flat: true, minimal: true, "aria-label": 'Show what the word at the cursor is', tooltip: detailsSaysItsWord ? undefined : 'Details', 
+                        // the press keeps the focus, and the caret the details are of, in the text
+                        onMouseDown: function (event) { return event.preventDefault(); }, onClick: function (event) {
+                            var _a;
+                            // anchored under the button's right edge: the card opens beside the text, not over it
+                            /* Under the row, not only under the button: an editor of more than one line is taller than
+                               the button, and the card drawn under the button covered the lines below the first
+                               (DpqlEditor · Details On A Chip On A Touch Screen, at 390px). */
+                            var _b = event.currentTarget.getBoundingClientRect(), right = _b.right, bottom = _b.bottom;
+                            var row = event.currentTarget.closest('.smart-editor-row');
+                            var rowBottom = (_a = row === null || row === void 0 ? void 0 : row.getBoundingClientRect().bottom) !== null && _a !== void 0 ? _a : bottom;
+                            void hover
+                                .showAtCaret({ left: right, top: Math.max(bottom, rowBottom) })
+                                .then(setDetailsHoverId);
+                        }, children: detailsSaysItsWord ? 'Details' : undefined }))] }), showDiagnostics && shownDiagnostics.length > 0 && (
+            // One ReqoreMessage per diagnostic, severity → intent. The same
+            // diagnostics as the inline underline above (`shownDiagnostics`).
+            (0, jsx_runtime_1.jsx)(reqore_1.ReqoreControlGroup, { vertical: true, fluid: true, size: 'small', children: shownDiagnostics.map(function (diag, i) { return ((0, jsx_runtime_1.jsxs)(reqore_1.ReqoreMessage, { intent: (0, useLspDiagnosticDecorations_1.severityToIntent)(diag.severity), "data-severity": (0, useLspDiagnosticDecorations_1.severityToIntent)(diag.severity), icon: diag.severity === 2 ? 'AlertLine'
                         : diag.severity && diag.severity >= 3 ?
                             'InformationLine'
-                            : 'ErrorWarningLine', size: 'small', opaque: false, children: diag.message }, "".concat(diag.range.start.line, ":").concat(diag.range.start.character, ":").concat(i))); }) }))] }));
+                            : 'ErrorWarningLine', size: 'small', opaque: false, children: [diag.message, (function () {
+                            // what the host can do about it, beside what is said of it
+                            var action = diagnosticAction === null || diagnosticAction === void 0 ? void 0 : diagnosticAction(diag);
+                            // as wide as its words, under what is said and apart from it: a message lays its children out at
+                            // its width. The size of the message's words with a pointer, a finger's on a touch screen
+                            // (Foxhoundn on qlip #425: "enormous compared to the text in the message")
+                            return action ?
+                                (0, jsx_runtime_1.jsx)(reqore_1.ReqoreControlGroup, { size: coarse ? 'small' : 'tiny', fluid: false, style: { marginTop: 8 }, children: (0, jsx_runtime_1.jsx)(reqore_1.ReqoreButton, { size: coarse ? 'small' : 'tiny', compact: true, fixed: true, className: 'smart-editor-diagnostic-action', intent: (0, useLspDiagnosticDecorations_1.severityToIntent)(diag.severity), onClick: action.onClick, children: action.label }) })
+                                : null;
+                        })()] }, "".concat(diag.range.start.line, ":").concat(diag.range.start.character, ":").concat(i))); }) }))] }));
 });
 exports.SmartEditor.displayName = 'SmartEditor';
+var templateObject_1;
 //# sourceMappingURL=SmartEditor.js.map