@seljs/editor 1.0.0 → 1.0.1

package/dist/completion/schema-completion.js

@@ -1,220 +0,0 @@
-import { autocompletion, } from "@codemirror/autocomplete";
-import { isTypeCompatible } from "@seljs/checker";
-import { createContractCompletions, createFunctionCompletions, createMacroCompletions, createMethodCompletions, createVariableCompletions, } from "./completion-items";
-import { getCompletionContext } from "./tree-context";
-/**
- * Determine the CodeMirror completion type from a checker CompletionItem.
- * Method details start with "(" (e.g., "(owner: sol_address): sol_int"),
- * while struct field details are plain type names (e.g., "sol_int").
- */
-const completionKind = (item) => item.detail?.startsWith("(") ? "method" : "property";
-export class SchemaCompletionProvider {
-    topLevelCompletions;
-    allDotCompletions;
-    checker;
-    constructor(schema, checker) {
-        this.checker = checker;
-        const contractCompletions = createContractCompletions(schema.contracts);
-        const variableCompletions = createVariableCompletions(schema.variables);
-        const freeFunctions = schema.functions.filter((f) => !f.receiverType);
-        const functionCompletions = createFunctionCompletions(freeFunctions);
-        const macroCompletions = createMacroCompletions(schema.macros);
-        const atomCompletions = [
-            { label: "true", type: "keyword" },
-            { label: "false", type: "keyword" },
-            { label: "null", type: "keyword" },
-        ];
-        this.topLevelCompletions = [
-            ...contractCompletions,
-            ...variableCompletions,
-            ...functionCompletions,
-            ...atomCompletions,
-        ];
-        // Broad matching: all methods + macros + struct fields + receiver methods
-        const allMethods = [];
-        for (const contract of schema.contracts) {
-            allMethods.push(...createMethodCompletions(contract));
-        }
-        const structFields = [];
-        for (const type of schema.types) {
-            if (type.kind === "struct" && type.fields) {
-                for (const field of type.fields) {
-                    structFields.push({
-                        label: field.name,
-                        type: "property",
-                        detail: field.type,
-                        info: field.description,
-                    });
-                }
-            }
-        }
-        const receiverMethods = [];
-        for (const fn of schema.functions) {
-            if (fn.receiverType) {
-                receiverMethods.push({
-                    label: fn.name,
-                    type: "method",
-                    detail: fn.signature,
-                    info: fn.description,
-                });
-            }
-        }
-        this.allDotCompletions = [
-            ...allMethods,
-            ...macroCompletions,
-            ...structFields,
-            ...receiverMethods,
-        ];
-    }
-    completionSource = (context) => {
-        const treeCtx = getCompletionContext(context.state, context.pos);
-        switch (treeCtx.kind) {
-            case "dot-access":
-                return this.handleDotAccess(context, treeCtx);
-            case "call-arg":
-                return this.handleCallArg(context, treeCtx);
-            case "top-level":
-                return this.handleTopLevel(context, treeCtx);
-        }
-    };
-    handleDotAccess(context, treeCtx) {
-        const { receiverText, from } = treeCtx;
-        // Skip numeric identifiers (e.g., 3.14)
-        if (/^\d+$/.test(receiverText)) {
-            return this.handleTopLevel(context, { kind: "top-level", from });
-        }
-        // Use checker's direct API — tree-context already provides receiverText
-        const info = this.checker.dotCompletions(receiverText);
-        // Checker resolved the type and found members
-        if (info.items.length > 0) {
-            return {
-                from,
-                options: info.items.map((item) => ({
-                    label: item.label,
-                    type: completionKind(item),
-                    detail: item.detail,
-                    info: item.description,
-                })),
-                filter: true,
-            };
-        }
-        /*
-         * Checker resolved to a known type but no members — no completions
-         * When receiverType !== receiverText, the checker actually resolved the type
-         */
-        if (info.receiverType !== receiverText) {
-            return null;
-        }
-        // Unresolved receiver (checker echoes identifier back) — broad fallback
-        return this.allDotCompletions.length
-            ? { from, options: this.allDotCompletions, filter: true }
-            : null;
-    }
-    handleCallArg(context, treeCtx) {
-        // Use checker's direct API with structured context from tree
-        const expectedType = this.checker.expectedTypeFor({
-            kind: "function-arg",
-            functionName: treeCtx.functionName,
-            receiverName: treeCtx.receiverName,
-            paramIndex: treeCtx.paramIndex,
-        });
-        if (expectedType) {
-            // Filter pre-built top-level completions by type compatibility
-            const filtered = this.topLevelCompletions.filter((c) => {
-                if (c.type === "keyword") {
-                    // null is dyn — always compatible
-                    if (c.label === "null") {
-                        return true;
-                    }
-                    if (c.label === "true" || c.label === "false") {
-                        return isTypeCompatible("bool", expectedType);
-                    }
-                }
-                // Variables have their type in detail
-                if (c.type === "variable" && c.detail) {
-                    return isTypeCompatible(c.detail, expectedType);
-                }
-                // Contracts: check contract type name compatibility
-                if (c.type === "class" && c.label) {
-                    return isTypeCompatible(`SEL_Contract_${c.label}`, expectedType);
-                }
-                // Functions — include (return type not easily available)
-                return true;
-            });
-            if (filtered.length > 0) {
-                const wordMatch = context.matchBefore(/\w+/);
-                const from = wordMatch?.from ?? treeCtx.from;
-                return { from, options: filtered, filter: true };
-            }
-        }
-        // No expected type or no compatible items — fall back to top-level
-        return this.handleTopLevel(context, {
-            kind: "top-level",
-            from: treeCtx.from,
-        });
-    }
-    handleTopLevel(context, treeCtx) {
-        const wordMatch = context.matchBefore(/\w+/);
-        const from = wordMatch?.from ?? treeCtx.from;
-        const hasText = !!wordMatch;
-        // Type-aware narrowing
-        const narrowed = this.narrowByExpectedType(context, from);
-        if (narrowed && narrowed.length > 0) {
-            return { from, options: narrowed, filter: true };
-        }
-        // Unfiltered top-level
-        if (hasText) {
-            return this.topLevelCompletions.length
-                ? { from, options: this.topLevelCompletions, filter: true }
-                : null;
-        }
-        // Explicit activation (Ctrl+Space) with no text
-        if (context.explicit && this.topLevelCompletions.length) {
-            return {
-                from: context.pos,
-                options: this.topLevelCompletions,
-                filter: true,
-            };
-        }
-        return null;
-    }
-    /**
-     * Use the checker to infer the expected type at cursor position
-     * and filter completions to only type-compatible items.
-     * Returns undefined when narrowing is not possible.
-     */
-    narrowByExpectedType(context, from) {
-        const doc = context.state.doc.toString();
-        const info = this.checker.completionsAt(doc, from);
-        if (!info.expectedType) {
-            return undefined;
-        }
-        const expectedType = info.expectedType;
-        // Filter checker items by type compatibility
-        const filtered = info.items
-            .filter((item) => isTypeCompatible(item.type, expectedType))
-            .map((item) => ({
-            label: item.label,
-            type: item.type.startsWith("SEL_Contract_")
-                ? "class"
-                : item.detail
-                    ? "function"
-                    : "variable",
-            detail: item.detail ?? item.type,
-            info: item.description,
-        }));
-        // Also include keywords when compatible
-        if (isTypeCompatible("bool", expectedType)) {
-            filtered.push({ label: "true", type: "keyword" }, { label: "false", type: "keyword" });
-        }
-        // null is dyn — always compatible
-        filtered.push({ label: "null", type: "keyword" });
-        return filtered.length > 0 ? filtered : undefined;
-    }
-}
-export const createSchemaCompletion = (schema, checker) => {
-    const provider = new SchemaCompletionProvider(schema, checker);
-    return autocompletion({
-        override: [provider.completionSource],
-    });
-};

package/dist/completion/tree-context.d.ts

@@ -1,23 +0,0 @@
-import type { EditorState } from "@codemirror/state";
-/**
- * Completion context extracted from the syntax tree at the cursor position.
- */
-export type TreeCompletionContext = {
-    kind: "dot-access";
-    receiverText: string;
-    from: number;
-} | {
-    kind: "call-arg";
-    functionName: string;
-    receiverName?: string;
-    paramIndex: number;
-    from: number;
-} | {
-    kind: "top-level";
-    from: number;
-};
-/**
- * Extract completion context from the Lezer syntax tree at the given position.
- */
-export declare const getCompletionContext: (state: EditorState, pos: number) => TreeCompletionContext;
-//# sourceMappingURL=tree-context.d.ts.map

package/dist/completion/tree-context.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"tree-context.d.ts","sourceRoot":"","sources":["../../src/completion/tree-context.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AA+KrD;;GAEG;AACH,MAAM,MAAM,qBAAqB,GAC9B;IAAE,IAAI,EAAE,YAAY,CAAC;IAAC,YAAY,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAA;CAAE,GAC1D;IACA,IAAI,EAAE,UAAU,CAAC;IACjB,YAAY,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,UAAU,EAAE,MAAM,CAAC;IACnB,IAAI,EAAE,MAAM,CAAC;CACZ,GACD;IAAE,IAAI,EAAE,WAAW,CAAC;IAAC,IAAI,EAAE,MAAM,CAAA;CAAE,CAAC;AAEvC;;GAEG;AACH,eAAO,MAAM,oBAAoB,GAChC,OAAO,WAAW,EAClB,KAAK,MAAM,KACT,qBAsBF,CAAC"}

package/dist/completion/tree-context.js

@@ -1,154 +0,0 @@
-import { syntaxTree } from "@codemirror/language";
-/**
- * Walk up the tree looking for a MemberExpression ancestor.
- * A MemberExpression has two Identifier children (or child nodes) separated by ".".
- * The dot position is: firstChild.to + 1 (the "." character is between them).
- * We are in dot-access context when pos >= dotPos.
- */
-const findDotAccess = (state, node, pos) => {
-    let current = node;
-    while (current) {
-        /*
-         * Stop at ArgList boundary — don't match outer MemberExpressions
-         * that wrap the entire call (e.g., `erc20.balanceOf(user)` at `user`)
-         */
-        if (current.name === "ArgList") {
-            break;
-        }
-        if (current.name === "MemberExpression" ||
-            current.name === "OptionalExpression") {
-            const firstChild = current.firstChild;
-            if (firstChild) {
-                /*
-                 * The dot is immediately after the first child
-                 * For MemberExpression: firstChild.to is where the "." starts
-                 * (the token "." is not a named node, it's between firstChild and secondChild)
-                 */
-                // position after "."
-                const dotPos = firstChild.to + 1;
-                if (pos >= dotPos) {
-                    const receiverText = state.doc.sliceString(current.from, firstChild.to);
-                    return {
-                        kind: "dot-access",
-                        receiverText,
-                        from: dotPos,
-                    };
-                }
-            }
-        }
-        current = current.parent;
-    }
-    return undefined;
-};
-/**
- * Count commas in ArgList text that appear before pos.
- * Commas are anonymous tokens not exposed as named children,
- * so we scan the raw source text.
- */
-const countCommasBefore = (argList, state, pos) => {
-    /*
-     * Only scan from the opening "(" up to pos
-     * skip "("
-     */
-    const open = argList.from + 1;
-    const end = Math.min(pos, argList.to);
-    const text = state.doc.sliceString(open, end);
-    let count = 0;
-    for (const ch of text) {
-        if (ch === ",") {
-            count++;
-        }
-    }
-    return count;
-};
-/**
- * Extract function name and optional receiver name from a CallExpression node.
- *
- * Tree shapes:
- *   foo(...)          → CallExpression > Identifier, ArgList
- *   erc20.foo(...)    → CallExpression > MemberExpression(Identifier "erc20", Identifier "foo"), ArgList
- */
-const extractCallInfo = (state, callExpr) => {
-    // The callee is everything before the ArgList (first child)
-    const callee = callExpr.firstChild;
-    if (!callee) {
-        return undefined;
-    }
-    if (callee.name === "Identifier") {
-        // Simple function call: foo(...)
-        return { functionName: state.doc.sliceString(callee.from, callee.to) };
-    }
-    if (callee.name === "MemberExpression") {
-        /*
-         * Method call: receiver.method(...)
-         * MemberExpression has two children: receiver and method name (Identifier)
-         */
-        const lastChild = callee.lastChild;
-        if (lastChild?.name === "Identifier") {
-            const functionName = state.doc.sliceString(lastChild.from, lastChild.to);
-            // Receiver is first child of MemberExpression
-            const receiverNode = callee.firstChild;
-            const receiverName = receiverNode?.name === "Identifier"
-                ? state.doc.sliceString(receiverNode.from, receiverNode.to)
-                : undefined;
-            return { functionName, receiverName };
-        }
-    }
-    return undefined;
-};
-const findWordStart = (state, pos) => {
-    const text = state.doc.sliceString(0, pos);
-    const match = /\w+$/.exec(text);
-    return match ? pos - match[0].length : pos;
-};
-/**
- * Walk up the tree looking for an ArgList ancestor.
- * When found, count commas before pos to get paramIndex,
- * then extract function name and optional receiver from the CallExpression.
- */
-const findCallArg = (state, node, pos) => {
-    let current = node;
-    while (current) {
-        if (current.name === "ArgList") {
-            const paramIndex = countCommasBefore(current, state, pos);
-            const callExpr = current.parent;
-            if (callExpr?.name === "CallExpression") {
-                const info = extractCallInfo(state, callExpr);
-                if (info) {
-                    return {
-                        kind: "call-arg",
-                        functionName: info.functionName,
-                        receiverName: info.receiverName,
-                        paramIndex,
-                        from: pos,
-                    };
-                }
-            }
-        }
-        current = current.parent;
-    }
-    return undefined;
-};
-/**
- * Extract completion context from the Lezer syntax tree at the given position.
- */
-export const getCompletionContext = (state, pos) => {
-    const tree = syntaxTree(state);
-    const node = tree.resolveInner(pos, -1);
-    /*
-     * Check for dot-access first: cursor is after a "." in a MemberExpression
-     * This must come before call-arg so that dot-access inside parentheses
-     * (e.g., `contract.method(contract.)`) is handled correctly.
-     */
-    const dotAccess = findDotAccess(state, node, pos);
-    if (dotAccess) {
-        return dotAccess;
-    }
-    // Check for call-arg: cursor is inside an ArgList
-    const callArg = findCallArg(state, node, pos);
-    if (callArg) {
-        return callArg;
-    }
-    // Default: top-level completion
-    return { kind: "top-level", from: findWordStart(state, pos) };
-};

package/dist/editor/create-editor.d.ts

@@ -1,4 +0,0 @@
-import { EditorView } from "@codemirror/view";
-import type { SELEditorConfig } from "./types";
-export declare function createSELEditor(config: SELEditorConfig): EditorView;
-//# sourceMappingURL=create-editor.d.ts.map

package/dist/editor/create-editor.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"create-editor.d.ts","sourceRoot":"","sources":["../../src/editor/create-editor.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAI9C,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAE/C,wBAAgB,eAAe,CAAC,MAAM,EAAE,eAAe,GAAG,UAAU,CAYnE"}

package/dist/editor/create-editor.js

@@ -1,14 +0,0 @@
-import { EditorState } from "@codemirror/state";
-import { EditorView } from "@codemirror/view";
-import { buildExtensions } from "./editor-config";
-export function createSELEditor(config) {
-    const extensions = buildExtensions(config);
-    const state = EditorState.create({
-        doc: config.value ?? "",
-        extensions,
-    });
-    return new EditorView({
-        state,
-        parent: config.parent,
-    });
-}

package/dist/editor/editor-config.d.ts

@@ -1,4 +0,0 @@
-import { type Extension } from "@codemirror/state";
-import type { SELEditorConfig } from "./types";
-export declare const buildExtensions: (config: SELEditorConfig) => Extension[];
-//# sourceMappingURL=editor-config.d.ts.map

package/dist/editor/editor-config.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"editor-config.d.ts","sourceRoot":"","sources":["../../src/editor/editor-config.ts"],"names":[],"mappings":"AAGA,OAAO,EAAe,KAAK,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAYhE,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAE/C,eAAO,MAAM,eAAe,GAAI,QAAQ,eAAe,KAAG,SAAS,EAqElE,CAAC"}

package/dist/editor/editor-config.js

@@ -1,64 +0,0 @@
-import { closeBrackets, closeBracketsKeymap } from "@codemirror/autocomplete";
-import { defaultKeymap, history, historyKeymap } from "@codemirror/commands";
-import { bracketMatching } from "@codemirror/language";
-import { EditorState } from "@codemirror/state";
-import { EditorView, keymap, placeholder } from "@codemirror/view";
-import { celLanguageSupport } from "@seljs/cel-lezer";
-import { SELChecker, rules } from "@seljs/checker";
-import { selDarkTheme, selLightTheme } from "./theme";
-import { createTypeDisplay } from "./type-display";
-import { createSchemaCompletion } from "../completion/schema-completion";
-import { createSemanticHighlighter } from "../language/semantic-highlighter";
-import { createTokenizerConfig } from "../language/tokenizer-config";
-import { createSELLinter } from "../linting/sel-linter";
-export const buildExtensions = (config) => {
-    const checker = new SELChecker(config.schema, { rules: [...rules.builtIn] });
-    const extensions = [];
-    // Language support (includes syntax highlighting)
-    extensions.push(celLanguageSupport(config.dark));
-    extensions.push(bracketMatching());
-    // Semantic highlighting (schema-aware identifier coloring)
-    const tokenizerConfig = createTokenizerConfig(config.schema);
-    extensions.push(createSemanticHighlighter(tokenizerConfig, config.dark));
-    // Autocomplete (type-aware via checker)
-    extensions.push(createSchemaCompletion(config.schema, checker));
-    extensions.push(closeBrackets());
-    // Keybindings
-    extensions.push(keymap.of([...closeBracketsKeymap, ...defaultKeymap, ...historyKeymap]));
-    extensions.push(history());
-    // Theme
-    extensions.push(config.dark ? selDarkTheme : selLightTheme);
-    // Validation / linting (built-in checker used when no validate callback provided)
-    const validate = config.validate ??
-        ((expression) => checker.check(expression).diagnostics);
-    extensions.push(createSELLinter({
-        validate,
-        delay: config.validateDelay,
-    }));
-    // onChange listener
-    if (config.onChange) {
-        const onChange = config.onChange;
-        extensions.push(EditorView.updateListener.of((update) => {
-            if (update.docChanged) {
-                onChange(update.state.doc.toString());
-            }
-        }));
-    }
-    // Read-only
-    if (config.readOnly) {
-        extensions.push(EditorState.readOnly.of(true));
-    }
-    // Placeholder
-    if (config.placeholder) {
-        extensions.push(placeholder(config.placeholder));
-    }
-    // Type display panel
-    if (config.showType) {
-        extensions.push(createTypeDisplay(checker, config.dark ?? false));
-    }
-    // User-provided extensions (last, so they can override)
-    if (config.extensions) {
-        extensions.push(...config.extensions);
-    }
-    return extensions;
-};

package/dist/editor/index.d.ts

@@ -1,6 +0,0 @@
-export { createSELEditor } from "./create-editor";
-export { buildExtensions } from "./editor-config";
-export { selLightTheme, selDarkTheme } from "./theme";
-export type { SELEditorConfig } from "./types";
-export type { EditorView } from "@codemirror/view";
-//# sourceMappingURL=index.d.ts.map

package/dist/editor/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/editor/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAClD,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAClD,OAAO,EAAE,aAAa,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AACtD,YAAY,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAC/C,YAAY,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC"}

package/dist/editor/index.js

@@ -1,3 +0,0 @@
-export { createSELEditor } from "./create-editor";
-export { buildExtensions } from "./editor-config";
-export { selLightTheme, selDarkTheme } from "./theme";

package/dist/editor/theme.d.ts

@@ -1,3 +0,0 @@
-export declare const selLightTheme: import("@codemirror/state").Extension;
-export declare const selDarkTheme: import("@codemirror/state").Extension;
-//# sourceMappingURL=theme.d.ts.map

package/dist/editor/theme.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"theme.d.ts","sourceRoot":"","sources":["../../src/editor/theme.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,aAAa,uCAoBxB,CAAC;AAEH,eAAO,MAAM,YAAY,uCAuBxB,CAAC"}

package/dist/editor/theme.js

@@ -1,43 +0,0 @@
-import { EditorView } from "@codemirror/view";
-export const selLightTheme = EditorView.theme({
-    "&": {
-        fontSize: "14px",
-        backgroundColor: "#ffffff",
-        color: "#1e1e1e",
-    },
-    ".cm-content": {
-        caretColor: "#000000",
-        fontFamily: "'JetBrains Mono', 'Fira Code', 'Consolas', monospace",
-        padding: "4px 0",
-    },
-    "&.cm-focused .cm-cursor": {
-        borderLeftColor: "#000000",
-    },
-    "&.cm-focused .cm-selectionBackground, .cm-selectionBackground": {
-        backgroundColor: "#d7d4f0",
-    },
-    ".cm-gutters": {
-        display: "none",
-    },
-});
-export const selDarkTheme = EditorView.theme({
-    "&": {
-        fontSize: "14px",
-        backgroundColor: "#1e1e1e",
-        color: "#d4d4d4",
-    },
-    ".cm-content": {
-        caretColor: "#ffffff",
-        fontFamily: "'JetBrains Mono', 'Fira Code', 'Consolas', monospace",
-        padding: "4px 0",
-    },
-    "&.cm-focused .cm-cursor": {
-        borderLeftColor: "#ffffff",
-    },
-    "&.cm-focused .cm-selectionBackground, .cm-selectionBackground": {
-        backgroundColor: "#264f78",
-    },
-    ".cm-gutters": {
-        display: "none",
-    },
-}, { dark: true });

package/dist/editor/type-display.d.ts

@@ -1,4 +0,0 @@
-import { type Extension } from "@codemirror/state";
-import type { SELChecker } from "@seljs/checker";
-export declare function createTypeDisplay(checker: SELChecker, dark: boolean): Extension;
-//# sourceMappingURL=type-display.d.ts.map

package/dist/editor/type-display.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"type-display.d.ts","sourceRoot":"","sources":["../../src/editor/type-display.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,SAAS,EAA2B,MAAM,mBAAmB,CAAC;AAG5E,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AA6DjD,wBAAgB,iBAAiB,CAChC,OAAO,EAAE,UAAU,EACnB,IAAI,EAAE,OAAO,GACX,SAAS,CA4BX"}

package/dist/editor/type-display.js

@@ -1,75 +0,0 @@
-import { StateEffect, StateField } from "@codemirror/state";
-import { EditorView, showPanel } from "@codemirror/view";
-const setType = StateEffect.define();
-const typeField = StateField.define({
-    create: () => null,
-    update(value, tr) {
-        for (const e of tr.effects) {
-            if (e.is(setType)) {
-                return e.value;
-            }
-        }
-        return value;
-    },
-});
-function createTypePanel(dark) {
-    return (view) => {
-        const dom = document.createElement("div");
-        dom.className = "sel-type-display";
-        dom.style.cssText = [
-            "display: flex",
-            "align-items: center",
-            "gap: 6px",
-            `padding: 3px 8px`,
-            "font-size: 12px",
-            `font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace`,
-            `color: ${dark ? "#9ca3af" : "#6b7280"}`,
-            `background: ${dark ? "#262626" : "#f9fafb"}`,
-            `border-top: 1px solid ${dark ? "#374151" : "#e5e7eb"}`,
-        ].join("; ");
-        const update = () => {
-            const type = view.state.field(typeField);
-            dom.textContent = "";
-            if (type) {
-                const label = document.createElement("span");
-                label.style.color = dark ? "#6b7280" : "#9ca3af";
-                label.textContent = "output";
-                const typeSpan = document.createElement("span");
-                typeSpan.style.color = dark ? "#93c5fd" : "#2563eb";
-                typeSpan.style.fontWeight = "500";
-                typeSpan.textContent = type;
-                dom.append(label, " ", typeSpan);
-            }
-        };
-        update();
-        return {
-            dom,
-            update: () => {
-                update();
-            },
-        };
-    };
-}
-export function createTypeDisplay(checker, dark) {
-    let debounceTimer;
-    const plugin = EditorView.updateListener.of((update) => {
-        if (!update.docChanged && !update.startState.field(typeField, false)) {
-            return;
-        }
-        if (debounceTimer) {
-            clearTimeout(debounceTimer);
-        }
-        debounceTimer = setTimeout(() => {
-            const doc = update.state.doc.toString().trim();
-            if (!doc) {
-                update.view.dispatch({ effects: setType.of(null) });
-                return;
-            }
-            const result = checker.check(doc);
-            update.view.dispatch({
-                effects: setType.of(result.valid ? (result.type ?? null) : null),
-            });
-        }, 200);
-    });
-    return [typeField, plugin, showPanel.of(createTypePanel(dark))];
-}