@health-samurai/react-components 0.0.0-alpha.18 → 0.0.0-alpha.20

package/dist/src/components/code-editor/index.js

@@ -1,21 +1,24 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { acceptCompletion, autocompletion, closeBrackets, closeBracketsKeymap, completionKeymap } from "@codemirror/autocomplete";
+import { acceptCompletion, autocompletion, closeBrackets, closeBracketsKeymap, completionKeymap, completionStatus, moveCompletionSelection } from "@codemirror/autocomplete";
 import { defaultKeymap, history, historyKeymap } from "@codemirror/commands";
 import { json, jsonParseLinter } from "@codemirror/lang-json";
 import { SQLDialect, sql } from "@codemirror/lang-sql";
 import { yaml } from "@codemirror/lang-yaml";
-import { bracketMatching, foldGutter, foldKeymap, HighlightStyle, indentOnInput, syntaxHighlighting } from "@codemirror/language";
-import { linter, lintGutter, lintKeymap } from "@codemirror/lint";
+import { bracketMatching, foldGutter, foldKeymap, HighlightStyle, indentOnInput, syntaxHighlighting, syntaxTree } from "@codemirror/language";
+import { linter, lintKeymap } from "@codemirror/lint";
 import { closeSearchPanel, findNext, findPrevious, getSearchQuery, highlightSelectionMatches, SearchQuery, search, searchKeymap, setSearchQuery } from "@codemirror/search";
-import { Compartment, EditorState, RangeSet, StateEffect, StateField } from "@codemirror/state";
-import { crosshairCursor, Decoration, drawSelection, dropCursor, EditorView, GutterMarker, gutterLineClass, highlightActiveLine, highlightActiveLineGutter, highlightSpecialChars, keymap, lineNumbers, rectangularSelection } from "@codemirror/view";
+import { Compartment, EditorState, Prec, RangeSet, StateEffect, StateField } from "@codemirror/state";
+import { crosshairCursor, Decoration, drawSelection, dropCursor, EditorView, GutterMarker, gutterLineClass, highlightSpecialChars, keymap, lineNumbers, rectangularSelection } from "@codemirror/view";
 import { tags } from "@lezer/highlight";
-import { Braces, ChevronDown, ChevronUp, Terminal, X } from "lucide-react";
+import { vim } from "@replit/codemirror-vim";
+import { ChevronDown, ChevronsRight, ChevronUp, Heading, Table2, Terminal, X } from "lucide-react";
 import * as React from "react";
 import { flushSync } from "react-dom";
 import { createRoot } from "react-dom/client";
-import { ComplexTypeIcon, SquareFunctionIcon, TypCodeIcon } from "../../icons.js";
+import { ComplexTypeIcon, ResourceIcon, SquareFunctionIcon, TypCodeIcon } from "../../icons.js";
+import { buildFhirCompletionExtension, fhirDiagnosticsField } from "./fhir-autocomplete.js";
 import { http } from "./http/index.js";
+import { buildSqlCompletionExtensions, fetchSqlMetadata } from "./sql-completion.js";
 class ErrorLineGutterMarker extends GutterMarker {
     elementClass = "cm-errorLineGutter";
 }
@@ -25,33 +28,80 @@ const errorLineDecoration = Decoration.line({
 });
 const setIssueLinesEffect = StateEffect.define();
 let errorTooltipEl = null;
-function showErrorTooltip(anchor, message) {
-    hideErrorTooltip();
-    const tooltip = document.createElement("div");
-    tooltip.textContent = message;
-    Object.assign(tooltip.style, {
-        position: "fixed",
+function formatErrorTypeTitle(code) {
+    return code.split("-").map((w)=>w.charAt(0).toUpperCase() + w.slice(1)).join(" ");
+}
+function renderErrorCard(msg) {
+    const card = document.createElement("div");
+    Object.assign(card.style, {
         backgroundColor: "var(--color-bg-primary)",
         border: "1px solid var(--color-border-primary)",
         borderRadius: "var(--radius-md)",
         padding: "6px 10px",
+        boxShadow: "0 2px 6px rgba(0, 0, 0, 0.08)"
+    });
+    const newlineIdx = msg.indexOf("\n");
+    if (newlineIdx !== -1) {
+        const title = msg.slice(0, newlineIdx);
+        const body = msg.slice(newlineIdx + 1);
+        const titleEl = document.createElement("div");
+        titleEl.textContent = formatErrorTypeTitle(title);
+        Object.assign(titleEl.style, {
+            fontWeight: "600"
+        });
+        const hr = document.createElement("div");
+        Object.assign(hr.style, {
+            borderTop: "1px solid var(--color-border-primary)",
+            margin: "4px 0"
+        });
+        const bodyEl = document.createElement("div");
+        bodyEl.textContent = body;
+        Object.assign(bodyEl.style, {
+            whiteSpace: "pre-wrap"
+        });
+        card.append(titleEl, hr, bodyEl);
+    } else {
+        card.textContent = msg;
+        card.style.whiteSpace = "pre-wrap";
+    }
+    return card;
+}
+function showErrorTooltip(message, x, y) {
+    hideErrorTooltip();
+    const tooltip = document.createElement("div");
+    Object.assign(tooltip.style, {
+        position: "fixed",
         fontSize: "12px",
         lineHeight: "1.4",
         color: "var(--color-text-error-primary)",
         fontFamily: "var(--font-family-sans)",
-        boxShadow: "0 4px 12px rgba(0, 0, 0, 0.1)",
         zIndex: "1000",
         pointerEvents: "none",
         maxWidth: "400px",
-        whiteSpace: "pre-wrap"
+        display: "flex",
+        flexDirection: "column",
+        gap: "6px"
     });
+    const parts = message.split("\n\x00\n");
+    for (const part of parts){
+        tooltip.append(renderErrorCard(part ?? ""));
+    }
     document.body.appendChild(tooltip);
     errorTooltipEl = tooltip;
-    const guttersEl = anchor.closest(".cm-gutters");
-    const guttersRect = guttersEl ? guttersEl.getBoundingClientRect() : anchor.getBoundingClientRect();
-    const anchorRect = anchor.getBoundingClientRect();
-    tooltip.style.left = `${guttersRect.right + 4}px`;
-    tooltip.style.top = `${anchorRect.top}px`;
+    const tooltipRect = tooltip.getBoundingClientRect();
+    let top = y - tooltipRect.height - 8;
+    // If tooltip goes above viewport, show below cursor instead
+    if (top < 4) {
+        top = y + 20;
+    }
+    // If it still goes below viewport, clamp to bottom
+    if (top + tooltipRect.height > window.innerHeight - 4) {
+        top = window.innerHeight - tooltipRect.height - 4;
+    }
+    // Final clamp to top
+    if (top < 4) top = 4;
+    tooltip.style.left = `${x}px`;
+    tooltip.style.top = `${top}px`;
 }
 function hideErrorTooltip() {
     errorTooltipEl?.remove();
@@ -89,6 +139,21 @@ const issueLinesField = StateField.define({
                 };
             }
         }
+        if (tr.docChanged) {
+            try {
+                return {
+                    gutterMarkers: state.gutterMarkers.map(tr.changes),
+                    lineDecorations: state.lineDecorations.map(tr.changes),
+                    messages: state.messages
+                };
+            } catch  {
+                return {
+                    gutterMarkers: RangeSet.empty,
+                    lineDecorations: Decoration.none,
+                    messages: new Map()
+                };
+            }
+        }
         return state;
     },
     provide (field) {
@@ -98,28 +163,49 @@ const issueLinesField = StateField.define({
         ];
     }
 });
-const errorTooltipHandler = EditorView.domEventHandlers({
-    mouseover (event, view) {
-        const target = event.target;
-        const gutterEl = target.closest(".cm-lineNumbers .cm-gutterElement");
-        if (!gutterEl) {
-            hideErrorTooltip();
-            return false;
-        }
+function getErrorMessageForLine(view, lineNo) {
+    const issueMsg = view.state.field(issueLinesField).messages.get(lineNo);
+    if (issueMsg) return issueMsg;
+    try {
+        return view.state.field(fhirDiagnosticsField).messages.get(lineNo);
+    } catch  {
+        return undefined;
+    }
+}
+function handleErrorTooltipMove(event, view) {
+    const target = event.target;
+    const mouseEvent = event;
+    // Check gutter line number
+    const gutterEl = target.closest(".cm-lineNumbers .cm-gutterElement");
+    if (gutterEl) {
         const lineNo = Number.parseInt(gutterEl.textContent ?? "", 10);
-        if (Number.isNaN(lineNo)) {
-            hideErrorTooltip();
-            return false;
+        if (!Number.isNaN(lineNo)) {
+            const message = getErrorMessageForLine(view, lineNo);
+            if (message) {
+                showErrorTooltip(message, mouseEvent.clientX, mouseEvent.clientY);
+                return false;
+            }
         }
-        const { messages } = view.state.field(issueLinesField);
-        const message = messages.get(lineNo);
-        if (!message) {
-            hideErrorTooltip();
+        hideErrorTooltip();
+        return false;
+    }
+    // Check content line (cm-line) — follow cursor
+    const lineEl = target.closest(".cm-line");
+    if (lineEl) {
+        const pos = view.posAtDOM(lineEl);
+        const lineNo = view.state.doc.lineAt(pos).number;
+        const message = getErrorMessageForLine(view, lineNo);
+        if (message) {
+            showErrorTooltip(message, mouseEvent.clientX, mouseEvent.clientY);
             return false;
         }
-        showErrorTooltip(gutterEl, message);
-        return false;
-    },
+    }
+    hideErrorTooltip();
+    return false;
+}
+const errorTooltipHandler = EditorView.domEventHandlers({
+    mouseover: handleErrorTooltipMove,
+    mousemove: handleErrorTooltipMove,
     mouseleave () {
         hideErrorTooltip();
         return false;
@@ -155,23 +241,38 @@ const baseTheme = EditorView.theme({
         fontFamily: "var(--font-family-mono)"
     },
     ".cm-gutters": {
-        backgroundColor: "var(--color-bg-primary)",
+        backgroundColor: "transparent",
         border: "none"
     },
     ".cm-lineNumbers": {
-        paddingLeft: "16px"
+        minWidth: "3.5ch"
     },
-    ".cm-activeLineGutter": {
+    ".cm-lineNumbers .cm-gutterElement": {
+        minWidth: "3.5ch",
+        paddingRight: "4px",
+        color: "var(--color-text-quaternary)"
+    },
+    ".cm-lineNumbers .cm-gutterElement.cm-activeLineGutter": {
         backgroundColor: "var(--color-bg-primary)",
-        color: "var(--color-text-primary)"
+        color: "var(--color-text-secondary)"
+    },
+    ".cm-activeLineGutter": {
+        backgroundColor: "transparent !important"
     },
     ".cm-activeLine": {
-        backgroundColor: "rgba(255, 255, 255, 0)"
+        backgroundColor: "transparent !important"
     },
-    ".cm-errorLineGutter": {
+    ".cm-lineNumbers .cm-gutterElement.cm-errorLineGutter": {
         color: "var(--color-text-error-primary)",
         backgroundColor: "color-mix(in srgb, var(--color-text-error-primary) 7%, transparent)"
     },
+    ".cm-foldGutter .cm-gutterElement.cm-errorLineGutter": {
+        color: "var(--color-text-error-primary)",
+        backgroundColor: "color-mix(in srgb, var(--color-text-error-primary) 7%, transparent)",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center"
+    },
     ".cm-errorLine": {
         backgroundColor: "color-mix(in srgb, var(--color-text-error-primary) 7%, transparent)"
     }
@@ -187,7 +288,15 @@ const completionTheme = EditorView.theme({
     },
     ".cm-completionLabel": {
         flex: "1",
-        minWidth: "0"
+        minWidth: "0",
+        fontFamily: "var(--font-family-mono)",
+        fontSize: "var(--font-size-sm)",
+        lineHeight: "var(--font-leading-5)"
+    },
+    ".cm-completionMatchedText": {
+        textDecoration: "none",
+        fontWeight: "600",
+        color: "var(--color-text-link)"
     },
     ".cm-completionDetail": {
         color: "var(--color-text-tertiary)",
@@ -200,9 +309,10 @@ const completionTheme = EditorView.theme({
         border: "1px solid var(--color-border-primary)",
         borderRadius: "var(--radius-md)",
         color: "var(--color-text-secondary)",
-        fontFamily: "var(--font-family-sans)",
-        fontSize: "12px",
+        fontFamily: "var(--font-family-mono)",
+        fontSize: "14px",
         padding: "8px 12px",
+        marginLeft: "8px",
         lineHeight: "1.4",
         whiteSpace: "normal",
         maxWidth: "300px"
@@ -247,19 +357,34 @@ const readOnlyTheme = EditorView.theme({
         border: "none"
     },
     ".cm-lineNumbers": {
-        paddingLeft: "16px"
+        minWidth: "3.5ch"
     },
-    ".cm-activeLineGutter": {
+    ".cm-lineNumbers .cm-gutterElement": {
+        minWidth: "3.5ch",
+        paddingRight: "4px",
+        color: "var(--color-text-quaternary)"
+    },
+    ".cm-lineNumbers .cm-gutterElement.cm-activeLineGutter": {
         backgroundColor: "var(--color-bg-secondary)",
-        color: "var(--color-text-primary)"
+        color: "var(--color-text-secondary)"
+    },
+    ".cm-activeLineGutter": {
+        backgroundColor: "transparent !important"
     },
     ".cm-activeLine": {
-        backgroundColor: "rgba(255, 255, 255, 0)"
+        backgroundColor: "transparent !important"
     },
-    ".cm-errorLineGutter": {
+    ".cm-lineNumbers .cm-gutterElement.cm-errorLineGutter": {
         color: "var(--color-text-error-primary)",
         backgroundColor: "color-mix(in srgb, var(--color-text-error-primary) 7%, transparent)"
     },
+    ".cm-foldGutter .cm-gutterElement.cm-errorLineGutter": {
+        color: "var(--color-text-error-primary)",
+        backgroundColor: "color-mix(in srgb, var(--color-text-error-primary) 7%, transparent)",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center"
+    },
     ".cm-errorLine": {
         backgroundColor: "color-mix(in srgb, var(--color-text-error-primary) 7%, transparent)"
     }
@@ -336,6 +461,7 @@ function createSearchPanel(view) {
                 alignItems: "center",
                 gap: "2px",
                 padding: "6px 8px",
+                marginTop: "4px",
                 backgroundColor: "var(--color-bg-primary)",
                 border: "1px solid var(--color-border-primary)",
                 borderRadius: "var(--radius-md)",
@@ -460,10 +586,10 @@ function createSearchPanel(view) {
         }
     };
 }
-const searchPanelTheme = EditorView.baseTheme({
-    ".cm-panels-top": {
+const searchPanelTheme = EditorView.theme({
+    "& .cm-panels-top": {
         position: "absolute",
-        top: "4px",
+        top: "8px",
         right: "4px",
         left: "auto",
         zIndex: "10",
@@ -471,10 +597,13 @@ const searchPanelTheme = EditorView.baseTheme({
         border: "none"
     },
     ".cm-searchMatch": {
-        backgroundColor: "#e9f2fc"
+        backgroundColor: "var(--color-blue-200) !important"
     },
     ".cm-searchMatch-selected": {
-        backgroundColor: "#d0e2f8"
+        backgroundColor: "var(--color-blue-400) !important"
+    },
+    ".cm-selectionMatch": {
+        backgroundColor: "var(--color-blue-100) !important"
     }
 });
 const customSearchExtension = [
@@ -626,13 +755,89 @@ const customSQLDialect = SQLDialect.define({
     keywords: SQL_KEYWORDS.join(" "),
     builtin: SQL_BUILTIN.join(" ")
 });
-function languageExtensions(mode, sqlExtraBuiltins) {
+function computeYamlNewlineIndent(lineText) {
+    const indent = lineText.match(/^(\s*)/)?.[1] ?? "";
+    const trimmed = lineText.trimEnd();
+    if (trimmed.endsWith(":")) {
+        // After "key:" with no value — increase indent
+        // For "  - key:", base indent is at the dash content level
+        const dashMatch = trimmed.match(/^(\s*-\s+)/);
+        const baseIndent = dashMatch?.[1] ? " ".repeat(dashMatch[1].length) : indent;
+        return `${baseIndent}  `;
+    }
+    if (/^\s*-\s*$/.test(trimmed)) {
+        // After bare "- " (array item marker only) — align to content after dash
+        const dashMatch = trimmed.match(/^(\s*-\s*)/);
+        return dashMatch?.[1] ? " ".repeat(dashMatch[1].length) : indent;
+    }
+    // Preserve current indent; for "  - key: val" align to key level
+    const dashKeyMatch = trimmed.match(/^(\s*-\s+)\S/);
+    return dashKeyMatch?.[1] ? " ".repeat(dashKeyMatch[1].length) : indent;
+}
+function yamlEnterKeymap() {
+    return keymap.of([
+        {
+            key: "Enter",
+            run: (view)=>{
+                const { state } = view;
+                const pos = state.selection.main.head;
+                const line = state.doc.lineAt(pos);
+                const newIndent = computeYamlNewlineIndent(line.text);
+                view.dispatch({
+                    changes: {
+                        from: pos,
+                        insert: `\n${newIndent}`
+                    },
+                    selection: {
+                        anchor: pos + 1 + newIndent.length
+                    }
+                });
+                return true;
+            }
+        }
+    ]);
+}
+function httpYamlEnterKeymap() {
+    return keymap.of([
+        {
+            key: "Enter",
+            run: (view)=>{
+                const { state } = view;
+                const pos = state.selection.main.head;
+                const doc = state.doc.toString();
+                // Only handle if cursor is in YAML body (after blank line separator)
+                const textBeforeCursor = doc.slice(0, pos);
+                const blankLineIdx = textBeforeCursor.indexOf("\n\n");
+                if (blankLineIdx === -1 || pos <= blankLineIdx + 1) return false;
+                // Check if the body looks like YAML (not JSON)
+                const bodyStart = blankLineIdx + 2;
+                const bodyPrefix = doc.slice(bodyStart, bodyStart + 20).trimStart();
+                if (bodyPrefix.startsWith("{") || bodyPrefix.startsWith("[")) return false;
+                const line = state.doc.lineAt(pos);
+                const newIndent = computeYamlNewlineIndent(line.text);
+                view.dispatch({
+                    changes: {
+                        from: pos,
+                        insert: `\n${newIndent}`
+                    },
+                    selection: {
+                        anchor: pos + 1 + newIndent.length
+                    }
+                });
+                return true;
+            }
+        }
+    ]);
+}
+function languageExtensions(mode, sqlExtraBuiltins, getUrlSuggestions) {
     if (mode === "http") {
         const jsonLang = json();
         const yamlLang = yaml();
         return [
-            http((ct)=>ct === "application/json" ? jsonLang.language : ct === "text/yaml" || ct === "application/yaml" || ct === "application/x-yaml" ? yamlLang.language : null),
-            syntaxHighlighting(customHighlightStyle)
+            http((ct)=>ct === "application/json" ? jsonLang.language : ct === "text/yaml" || ct === "application/yaml" || ct === "application/x-yaml" ? yamlLang.language : null, getUrlSuggestions),
+            syntaxHighlighting(customHighlightStyle),
+            jsonAutoExpandBraces(),
+            httpYamlEnterKeymap()
         ];
     } else if (mode === "sql") {
         let dialect = customSQLDialect;
@@ -654,21 +859,86 @@ function languageExtensions(mode, sqlExtraBuiltins) {
     } else if (mode === "yaml") {
         return [
             yaml(),
-            syntaxHighlighting(customHighlightStyle)
+            syntaxHighlighting(customHighlightStyle),
+            yamlEnterKeymap()
         ];
     } else {
         return [
             json(),
-            linter(jsonParseLinter(), {
+            linter((view)=>{
+                if (!view.state.doc.toString().trim()) return [];
+                return jsonParseLinter()(view);
+            }, {
                 delay: 300
             }),
-            syntaxHighlighting(customHighlightStyle)
+            syntaxHighlighting(customHighlightStyle),
+            jsonAutoExpandBraces()
         ];
     }
 }
-export function CodeEditor({ defaultValue, currentValue, onChange, onUpdate, viewCallback, readOnly = false, id, mode = "json", isReadOnlyTheme = false, additionalExtensions, issueLineNumbers, foldGutter: enableFoldGutter = true, lintGutter: enableLintGutter = true, lineNumbers: enableLineNumbers = true, sqlExtraBuiltins }) {
+function jsonAutoExpandBraces() {
+    return EditorState.transactionFilter.of((tr)=>{
+        if (!tr.docChanged) return tr;
+        let braceFrom = -1;
+        let braceTo = -1;
+        let changeCount = 0;
+        tr.changes.iterChanges((fromA, toA, _fromB, _toB, inserted)=>{
+            changeCount++;
+            if (inserted.toString() === "{}") {
+                braceFrom = fromA;
+                braceTo = toA;
+            }
+        });
+        if (changeCount !== 1 || braceFrom === -1) return tr;
+        const tree = syntaxTree(tr.startState);
+        const nodeBefore = tree.resolveInner(braceFrom, -1);
+        if (nodeBefore.name === "String" || nodeBefore.parent?.name === "String") {
+            return tr;
+        }
+        const line = tr.startState.doc.lineAt(braceFrom);
+        const indent = line.text.match(/^(\s*)/)?.[1] ?? "";
+        const inner = `${indent}  `;
+        // Check if { is inside an extension array — insert {"url": ""} snippet
+        const docText = tr.startState.doc.toString();
+        const textBefore = docText.slice(0, braceFrom);
+        const isInExtArray = /"(?:extension|modifierExtension)"\s*:\s*\[\s*(?:\{[\s\S]*?\}\s*,?\s*)*$/s.test(textBefore);
+        if (isInExtArray) {
+            const insert = `{\n${inner}"url": ""\n${indent}}`;
+            return {
+                changes: {
+                    from: braceFrom,
+                    to: braceTo,
+                    insert
+                },
+                selection: {
+                    anchor: braceFrom + insert.lastIndexOf('""') + 1
+                }
+            };
+        }
+        return {
+            changes: {
+                from: braceFrom,
+                to: braceTo,
+                insert: `{\n${inner}\n${indent}}`
+            },
+            selection: {
+                anchor: braceFrom + 2 + inner.length
+            }
+        };
+    });
+}
+export function CodeEditor({ defaultValue, currentValue, onChange, onUpdate, viewCallback, readOnly = false, id, mode = "json", isReadOnlyTheme = false, additionalExtensions, issueLineNumbers, foldGutter: enableFoldGutter = true, lineNumbers: enableLineNumbers = true, sql, getStructureDefinitions, resourceTypeHint, expandValueSet, getUrlSuggestions, vimMode = false }) {
     const domRef = React.useRef(null);
     const [view, setView] = React.useState(null);
+    const safeDispatch = React.useCallback((spec)=>{
+        try {
+            view?.dispatch(spec);
+        } catch  {
+        // Ignore RangeError from stale decoration positions during reconfigure
+        }
+    }, [
+        view
+    ]);
     const initialValue = React.useRef(defaultValue ?? "");
     const onChangeComparment = React.useRef(new Compartment());
     const onUpdateComparment = React.useRef(new Compartment());
@@ -676,6 +946,11 @@ export function CodeEditor({ defaultValue, currentValue, onChange, onUpdate, vie
     const readOnlyCompartment = React.useRef(new Compartment());
     const themeCompartment = React.useRef(new Compartment());
     const additionalExtensionsCompartment = React.useRef(new Compartment());
+    const sqlCompletionCompartment = React.useRef(new Compartment());
+    const fhirCompletionCompartment = React.useRef(new Compartment());
+    const vimCompartment = React.useRef(new Compartment());
+    const [sqlFunctions, setSqlFunctions] = React.useState();
+    const executeSqlRef = React.useRef(sql?.executeSql);
     React.useEffect(()=>{
         if (!domRef.current) {
             return;
@@ -685,6 +960,7 @@ export function CodeEditor({ defaultValue, currentValue, onChange, onUpdate, vie
             state: EditorState.create({
                 doc: initialValue.current,
                 extensions: [
+                    vimCompartment.current.of(vimMode ? vim() : []),
                     EditorView.contentAttributes.of({
                         "data-gramm": "false"
                     }),
@@ -693,7 +969,18 @@ export function CodeEditor({ defaultValue, currentValue, onChange, onUpdate, vie
                         lineNumbers()
                     ] : [],
                     ...enableFoldGutter ? [
-                        foldGutter()
+                        foldGutter({
+                            markerDOM: (open)=>{
+                                const el = document.createElement("span");
+                                el.style.display = "flex";
+                                el.style.alignItems = "center";
+                                el.style.justifyContent = "center";
+                                el.style.width = "100%";
+                                el.style.height = "100%";
+                                el.innerHTML = open ? '<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>' : '<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>';
+                                return el;
+                            }
+                        })
                     ] : [],
                     highlightSpecialChars(),
                     history(),
@@ -707,6 +994,7 @@ export function CodeEditor({ defaultValue, currentValue, onChange, onUpdate, vie
                     autocompletion({
                         icons: false,
                         maxRenderedOptions: 1000,
+                        defaultKeymap: false,
                         addToOptions: [
                             {
                                 render: renderCompletionIcon,
@@ -723,29 +1011,56 @@ export function CodeEditor({ defaultValue, currentValue, onChange, onUpdate, vie
                     }),
                     rectangularSelection(),
                     crosshairCursor(),
-                    highlightActiveLine(),
-                    highlightActiveLineGutter(),
                     highlightSelectionMatches(),
+                    Prec.highest(keymap.of([
+                        {
+                            key: "Tab",
+                            run: (v)=>{
+                                if (completionStatus(v.state) === "active") {
+                                    return moveCompletionSelection(true)(v);
+                                }
+                                return false;
+                            }
+                        },
+                        {
+                            key: "Shift-Tab",
+                            run: (v)=>{
+                                if (completionStatus(v.state) === "active") {
+                                    return moveCompletionSelection(false)(v);
+                                }
+                                return false;
+                            }
+                        },
+                        {
+                            key: "Enter",
+                            run: (v)=>{
+                                if (completionStatus(v.state) === "active") {
+                                    return acceptCompletion(v);
+                                }
+                                return false;
+                            }
+                        }
+                    ])),
                     themeCompartment.current.of(baseTheme),
                     completionTheme,
                     keymap.of([
                         ...closeBracketsKeymap,
+                        ...completionKeymap.filter((b)=>b.key !== "Enter"),
                         ...defaultKeymap,
                         ...searchKeymap,
                         ...historyKeymap,
                         ...foldKeymap,
-                        ...completionKeymap,
                         ...lintKeymap
                     ]),
-                    ...enableLintGutter ? [
-                        lintGutter()
-                    ] : [],
                     issueLinesField,
                     errorTooltipHandler,
+                    EditorView.exceptionSink.of(()=>{}),
                     ...customSearchExtension,
                     onChangeComparment.current.of([]),
                     onUpdateComparment.current.of([]),
-                    additionalExtensionsCompartment.current.of([])
+                    additionalExtensionsCompartment.current.of([]),
+                    sqlCompletionCompartment.current.of([]),
+                    fhirCompletionCompartment.current.of([])
                 ]
             })
         });
@@ -757,7 +1072,55 @@ export function CodeEditor({ defaultValue, currentValue, onChange, onUpdate, vie
     }, [
         enableFoldGutter,
         enableLineNumbers,
-        enableLintGutter
+        vimMode
+    ]);
+    React.useEffect(()=>{
+        executeSqlRef.current = sql?.executeSql;
+    });
+    React.useEffect(()=>{
+        if (!view || !sql) {
+            if (view) {
+                safeDispatch({
+                    effects: sqlCompletionCompartment.current.reconfigure([])
+                });
+            }
+            setSqlFunctions(undefined);
+            return;
+        }
+        let cancelled = false;
+        fetchSqlMetadata(sql.executeSql).then((metadata)=>{
+            if (cancelled) return;
+            setSqlFunctions(metadata.functions);
+            const extensions = buildSqlCompletionExtensions(metadata, (query, type)=>executeSqlRef.current?.(query, type) ?? Promise.resolve([]));
+            safeDispatch({
+                effects: sqlCompletionCompartment.current.reconfigure(extensions)
+            });
+        }).catch(()=>{});
+        return ()=>{
+            cancelled = true;
+        };
+    }, [
+        view,
+        sql,
+        safeDispatch
+    ]);
+    React.useEffect(()=>{
+        if (!view) return;
+        if (getStructureDefinitions) {
+            safeDispatch({
+                effects: fhirCompletionCompartment.current.reconfigure(buildFhirCompletionExtension(getStructureDefinitions, resourceTypeHint, expandValueSet))
+            });
+        } else {
+            safeDispatch({
+                effects: fhirCompletionCompartment.current.reconfigure([])
+            });
+        }
+    }, [
+        view,
+        getStructureDefinitions,
+        resourceTypeHint,
+        expandValueSet,
+        safeDispatch
     ]);
     React.useEffect(()=>{
         if (viewCallback && view) {
@@ -768,7 +1131,7 @@ export function CodeEditor({ defaultValue, currentValue, onChange, onUpdate, vie
         viewCallback
     ]);
     React.useEffect(()=>{
-        view?.dispatch({
+        safeDispatch({
             effects: onChangeComparment.current.reconfigure([
                 EditorView.updateListener.of((update)=>{
                     if (update.docChanged && onChange) {
@@ -778,11 +1141,11 @@ export function CodeEditor({ defaultValue, currentValue, onChange, onUpdate, vie
             ])
         });
     }, [
-        view,
-        onChange
+        onChange,
+        safeDispatch
     ]);
     React.useEffect(()=>{
-        view?.dispatch({
+        safeDispatch({
             effects: onUpdateComparment.current.reconfigure([
                 EditorView.updateListener.of((update)=>{
                     if (onUpdate) {
@@ -792,8 +1155,8 @@ export function CodeEditor({ defaultValue, currentValue, onChange, onUpdate, vie
             ])
         });
     }, [
-        view,
-        onUpdate
+        onUpdate,
+        safeDispatch
     ]);
     // FIXME: it is probably better to have CM manage its state.
     React.useEffect(()=>{
@@ -802,7 +1165,7 @@ export function CodeEditor({ defaultValue, currentValue, onChange, onUpdate, vie
         }
         const currentDoc = view.state.doc.toString();
         if (currentDoc !== currentValue) {
-            view.dispatch({
+            safeDispatch({
                 changes: {
                     from: 0,
                     to: currentDoc.length,
@@ -812,69 +1175,98 @@ export function CodeEditor({ defaultValue, currentValue, onChange, onUpdate, vie
         }
     }, [
         currentValue,
-        view
+        view,
+        safeDispatch
+    ]);
+    const getUrlSuggestionsRef = React.useRef(getUrlSuggestions);
+    getUrlSuggestionsRef.current = getUrlSuggestions;
+    const stableGetUrlSuggestions = React.useMemo(()=>{
+        if (!getUrlSuggestions) return undefined;
+        return (path, method)=>getUrlSuggestionsRef.current?.(path, method) ?? [];
+    }, [
+        getUrlSuggestions
     ]);
     React.useEffect(()=>{
         if (view === null) {
             return;
         }
-        view.dispatch({
-            effects: languageCompartment.current.reconfigure(languageExtensions(mode, sqlExtraBuiltins))
+        safeDispatch({
+            effects: languageCompartment.current.reconfigure(languageExtensions(mode, sqlFunctions, stableGetUrlSuggestions))
         });
     }, [
         mode,
         view,
-        sqlExtraBuiltins
+        sqlFunctions,
+        stableGetUrlSuggestions,
+        safeDispatch
     ]);
     React.useEffect(()=>{
         if (view === null) {
             return;
         }
-        view.dispatch({
+        safeDispatch({
             effects: [
                 readOnlyCompartment.current.reconfigure(EditorState.readOnly.of(readOnly))
             ]
         });
     }, [
         readOnly,
-        view
+        view,
+        safeDispatch
     ]);
     React.useEffect(()=>{
         if (view === null) {
             return;
         }
-        view.dispatch({
+        safeDispatch({
             effects: [
                 themeCompartment.current.reconfigure(isReadOnlyTheme ? readOnlyTheme : baseTheme)
             ]
         });
     }, [
         isReadOnlyTheme,
-        view
+        view,
+        safeDispatch
     ]);
     React.useEffect(()=>{
         if (view === null) {
             return;
         }
-        view.dispatch({
+        safeDispatch({
+            effects: [
+                vimCompartment.current.reconfigure(vimMode ? vim() : [])
+            ]
+        });
+    }, [
+        vimMode,
+        view,
+        safeDispatch
+    ]);
+    React.useEffect(()=>{
+        if (view === null) {
+            return;
+        }
+        safeDispatch({
             effects: [
                 additionalExtensionsCompartment.current.reconfigure(additionalExtensions ?? [])
             ]
         });
     }, [
         additionalExtensions,
-        view
+        view,
+        safeDispatch
     ]);
     React.useEffect(()=>{
         if (view === null) {
             return;
         }
-        view.dispatch({
+        safeDispatch({
             effects: setIssueLinesEffect.of(issueLineNumbers ?? [])
         });
     }, [
         issueLineNumbers,
-        view
+        view,
+        safeDispatch
     ]);
     return /*#__PURE__*/ _jsx("div", {
         className: "h-full w-full",
@@ -937,7 +1329,15 @@ const KeywordIcon = ()=>/*#__PURE__*/ _jsx(Terminal, {
         size: 16,
         color: "#717684"
     });
-const OperatorIcon = ()=>/*#__PURE__*/ _jsx(Braces, {
+const OperatorIcon = ()=>/*#__PURE__*/ _jsx(ChevronsRight, {
+        size: 16,
+        color: "#717684"
+    });
+const TableIcon = ()=>/*#__PURE__*/ _jsx(Table2, {
+        size: 16,
+        color: "#717684"
+    });
+const HeaderIcon = ()=>/*#__PURE__*/ _jsx(Heading, {
         size: 16,
         color: "#717684"
     });
@@ -945,15 +1345,22 @@ function getCompletionIcon(completion) {
     if (completion.type === "function") return SquareFunctionIcon;
     if (completion.type === "keyword") return KeywordIcon;
     if (completion.type === "operator") return OperatorIcon;
+    if (completion.type === "table") return TableIcon;
+    if (completion.type === "header") return HeaderIcon;
+    if (completion.type === "text") return TypCodeIcon;
+    if (completion.type === "type") return ResourceIcon;
+    if (completion.type === "search-param") return null;
     const detail = completion.detail;
     if (!detail) {
         if (completion.type === "variable") return SquareFunctionIcon;
-        return null;
+        return TypCodeIcon;
     }
     const typeName = detail.replace(/\[\]$/, "");
-    if (!typeName) return null;
+    if (!typeName) return TypCodeIcon;
+    // Search param types (TOKEN, REFERENCE) — no icon
+    if (typeName === typeName.toUpperCase()) return null;
     const firstChar = typeName[0];
-    if (!firstChar) return null;
+    if (!firstChar) return TypCodeIcon;
     const isComplex = firstChar === firstChar.toUpperCase();
     return isComplex ? ComplexTypeIcon : TypCodeIcon;
 }
@@ -965,6 +1372,8 @@ function renderCompletionIcon(completion) {
         flushSync(()=>{
             createRoot(container).render(/*#__PURE__*/ _jsx(Icon, {}));
         });
+    } else {
+        container.style.display = "none";
     }
     return container;
 }