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

package/dist/components/smartEditor/SmartEditor.js

@@ -10,28 +10,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++) {
@@ -48,22 +61,27 @@ 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 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");
 // 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 +100,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 +143,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,13 +201,26 @@ 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;
+var EDITOR_BOX_STYLE = {
+    position: 'relative',
+    flex: '1 1 auto',
+    minWidth: 0,
+};
 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;
     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);
     // Cached Slate nodes, refreshed only on EXTERNAL value changes — not on
     // the typing echo. Passing a fresh ref every keystroke re-runs
@@ -264,9 +232,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 _m = (0, react_1.useReducer)(function (count) { return count + 1; }, 0), editorTreeVersion = _m[0], noteEditorTree = _m[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 +242,68 @@ 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) { 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 })
+                            : (serverItems !== null && serverItems !== void 0 ? serverItems : [])];
+            }
+        });
+    }); }, [noServer, askServer, completionsWith]);
     var autocomplete = (0, useLspAutocomplete_1.useLspAutocomplete)({
-        getCompletions: session.getCompletions,
-        isReady: lspReady,
+        getCompletions: getCompletions,
+        isReady: lspReady || noServer,
         triggerCharacters: triggerCharacters,
         converter: converter,
         inserter: completionInserter,
+        emptyMessage: emptyCompletionMessage,
     });
     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 _o = (0, react_use_1.useMeasure)(), rowRef = _o[0], rowWidth = _o[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 _p = (0, react_1.useState)(), detailsHoverId = _p[0], setDetailsHoverId = _p[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 +329,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,7 +343,37 @@ 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));
+        return written > 0 ?
+            said.filter(function (_a) {
+                var start = _a.range.start;
+                return !(start.line === index && start.character >= end - written && start.character < end);
+            })
+            : said;
+    }, [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);
@@ -337,7 +387,7 @@ exports.SmartEditor = (0, react_1.forwardRef)(function (_a, ref) {
         // 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
+    // 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 +408,7 @@ exports.SmartEditor = (0, react_1.forwardRef)(function (_a, ref) {
                     }, children: child }));
             }
         }
-        // Underline outermost so it overlays the syntax colour; hex
+        // 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,6 +422,79 @@ 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 = function (editor, index, rechipped) {
+        slate_1.Editor.withoutNormalizing(editor, function () {
+            var paragraph = editor.children[index];
+            for (var child = paragraph.children.length - 1; child >= 0; child -= 1) {
+                slate_1.Transforms.removeNodes(editor, { at: [index, child] });
+            }
+            slate_1.Transforms.insertNodes(editor, rechipped.children, {
+                at: [index, 0],
+            });
+        });
+        if (rechipped.caret) {
+            slate_1.Transforms.select(editor, rechipped.caret);
+        }
+    };
+    // 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) {
+            editor.children.forEach(function (paragraph, index) {
+                var rechipped = (0, typedReferences_1.rechipTypedReferences)(converter, paragraph, index);
+                if (rechipped) {
+                    drawTypedReferences(editor, index, rechipped);
+                }
+            });
+        }
+        onBlur === null || onBlur === void 0 ? void 0 : onBlur();
+    }, [converter, readOnly, onBlur]);
+    /* 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]);
     var handleSlateChange = (0, react_1.useCallback)(function (newNodes) {
         var plainText = converter.fromSlateNodes(newNodes);
         // A selection change reports the same tree; anything else is the tree
@@ -390,6 +513,18 @@ 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 _a = at.anchor.path, index = _a[0], child = _a[1];
+                var paragraph = newNodes[index];
+                var rechipped = paragraph &&
+                    (0, typedReferences_1.rechipTypedReferences)(converter, paragraph, index, converter.selectionToOffset([paragraph], [0, child], at.anchor.offset));
+                if (rechipped) {
+                    drawTypedReferences(editor, index, rechipped);
+                }
+            }
         }
         if (editorRef.current && !readOnly) {
             autocomplete.onSlateChange(editorRef.current, newNodes);
@@ -398,22 +533,62 @@ exports.SmartEditor = (0, react_1.forwardRef)(function (_a, ref) {
     // 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,
-            });
+            /* 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]);
+    /* 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;
+    var completeAtPageCaret = (0, react_1.useCallback)(function (target) {
+        var editor = editorRef.current;
+        if (!completeOnClick || 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();
+            openAtCaret(editor, caret.anchor, { left: at.left, bottom: at.bottom });
+        }
+        catch (_a) {
+            // the editor is not drawn, or the page's caret is not in it: nothing is asked
+        }
+    }, [completeOnClick, readOnly, openAtCaret]);
     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 +606,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,82 +619,95 @@ 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, (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)("div", { style: EDITOR_BOX_STYLE, onClick: function (event) { return completeAtPageCaret(event.target); }, 
+                        // Tab's key comes up in the editor it moved the focus into
+                        onKeyUp: function (event) {
+                            if (event.key === 'Tab')
+                                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, 
+                                // 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, 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
+                            , __assign({ 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 floats over the word it is of, as glass. What Details shows is a card of its
+                                   own, under the button and beside the text, on a surface it reads on. */
+                                placement: detailsShown ? 'bottom-end' : 'top', handler: 'hover', closeOnOutsideClick: true, minWidth: '220px' }, (detailsShown ? {} : { flat: true, transparent: true, backgroundBlur: 20 }), { 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 }))] }), 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.jsx)(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))); }) }))] }));