@1771technologies/lytenyte-pro 2.0.4-dev.2 → 2.0.4-dev.4

package/dist/components/expressions-editor/expression-editor.js

@@ -0,0 +1,138 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useRef, useCallback, useMemo, Fragment } from "react";
+import { useCompletions } from "./intellisence/use-completions.js";
+import { useCompletionTrigger } from "./intellisence/use-complete-trigger.js";
+import { useKeyboardNavigation } from "./use-keyboard-navigation.js";
+import { useCursorPosition } from "./cursor-position/use-cursor-position.js";
+import { createKeyDownHandler } from "./create-key-down-handler.js";
+import { getWordAtCursor } from "./intellisence/get-word-at-cursor.js";
+import { DefaultTokenHighlighter } from "./token-highlighter-default.js";
+import { CompletionListProvider, CompletionPopoverProvider } from "./intellisence/completion-context.js";
+const sharedFontStyle = {
+    fontFamily: "inherit",
+    fontSize: "inherit",
+    fontWeight: "inherit",
+    fontStyle: "inherit",
+    letterSpacing: "inherit",
+    lineHeight: "inherit",
+    padding: "0",
+};
+const triggerCharacters = ["."];
+export function ExpressionEditor({ value, onChange: onValueChange, tokenize, highlight: Highlighter = DefaultTokenHighlighter, completionProvider, placeholder, disabled, readOnly, className, style, children, }) {
+    // TODO @Lee: we should eventually allow multiline expressions but for now there isn't really a valid
+    // use case that requires multiline expressions without also allow variable support.
+    const multiline = false;
+    const textareaRef = useRef(null);
+    const depsRef = useRef(null);
+    const tokens = useMemo(() => tokenize(value), [value, tokenize]);
+    const completions = useCompletions(completionProvider);
+    const cursorPosition = useCursorPosition(textareaRef);
+    const navigation = useKeyboardNavigation({
+        onValueChange,
+        onDismiss: completions.dismiss,
+        textareaRef,
+    });
+    const trigger = useCompletionTrigger({
+        triggerCharacters,
+        onTrigger: (toks, pos, word) => {
+            cursorPosition.update();
+            completions.fetchCompletions(toks, pos, word);
+        },
+        tokenize,
+    });
+    depsRef.current = {
+        isOpen: completions.isOpen,
+        selectedItem: completions.selectedItem,
+        navigate: completions.navigate,
+        dismiss: completions.dismiss,
+        acceptCompletion: navigation.acceptCompletion,
+        triggerManually: trigger.triggerManually,
+        onValueChange,
+        multiline,
+        updateFilter: completions.updateFilter,
+        handleInputChange: trigger.handleInputChange,
+        cancel: trigger.cancel,
+    };
+    const handleKeyDown = useCallback((e) => {
+        const deps = depsRef.current;
+        const textarea = e.currentTarget;
+        const wordAtCursor = getWordAtCursor(textarea.value, textarea.selectionStart);
+        const handler = createKeyDownHandler({
+            isPopoverOpen: deps.isOpen,
+            multiline: deps.multiline,
+            selectedItem: deps.selectedItem,
+            wordAtCursor,
+            onAcceptCompletion: deps.acceptCompletion,
+            onNavigate: deps.navigate,
+            onDismiss: deps.dismiss,
+            onCancelTrigger: deps.cancel,
+            onManualTrigger: () => {
+                deps.triggerManually(textarea.value, textarea.selectionStart);
+            },
+            onValueChange: deps.onValueChange,
+            onExternalKeyDown: deps.onExternalKeyDown,
+        });
+        handler(e);
+    }, []);
+    const handleChange = useCallback((e) => {
+        const { value: newValue, selectionStart } = e.currentTarget;
+        const deps = depsRef.current;
+        deps.onValueChange(newValue);
+        const word = getWordAtCursor(newValue, selectionStart);
+        if (deps.isOpen) {
+            deps.updateFilter(word.word);
+        }
+        deps.handleInputChange(newValue, selectionStart);
+    }, []);
+    const handleBlur = useCallback(() => {
+        const deps = depsRef.current;
+        deps.dismiss();
+        deps.cancel();
+    }, []);
+    const handleItemSelect = useCallback((item) => {
+        const textarea = textareaRef.current;
+        if (!textarea)
+            return;
+        const wordAtCursor = getWordAtCursor(textarea.value, textarea.selectionStart);
+        depsRef.current.acceptCompletion(item, wordAtCursor);
+    }, []);
+    const whiteSpace = multiline ? "pre-wrap" : "pre";
+    const wordBreak = multiline ? "break-word" : undefined;
+    const gridCell = {
+        gridArea: "1 / 1",
+        ...sharedFontStyle,
+        whiteSpace,
+        wordBreak,
+        overflowWrap: multiline ? "break-word" : undefined,
+        boxSizing: "border-box",
+    };
+    const popoverValue = useMemo(() => {
+        return { isOpen: completions.isOpen, coordinates: cursorPosition.coordinates };
+    }, [completions.isOpen, cursorPosition.coordinates]);
+    const listValue = useMemo(() => {
+        return {
+            items: completions.filteredItems,
+            loading: completions.isLoading,
+            selectedIndex: completions.selectedIndex,
+            onSelect: handleItemSelect,
+        };
+    }, [completions.filteredItems, completions.isLoading, completions.selectedIndex, handleItemSelect]);
+    return (_jsxs("div", { className: className, style: {
+            display: "grid",
+            width: "100%",
+            ...style,
+        }, "data-ln-expression-editor": true, children: [_jsx("textarea", { ref: textareaRef, value: value, onChange: handleChange, onKeyDown: handleKeyDown, onBlur: handleBlur, disabled: disabled, readOnly: readOnly, placeholder: placeholder, rows: multiline ? undefined : 1, "data-ln-expression-input": true, style: {
+                    ...gridCell,
+                    display: "block",
+                    width: "100%",
+                    resize: multiline ? "vertical" : "none",
+                    background: "transparent",
+                    color: "transparent",
+                    WebkitTextFillColor: "transparent",
+                    outline: "none",
+                    overflow: multiline ? "auto" : "hidden",
+                    margin: 0,
+                    border: 0,
+                    zIndex: 1,
+                }, autoCapitalize: "off", autoComplete: "off", autoCorrect: "off", spellCheck: false }), _jsx("div", { "aria-hidden": "true", style: { ...gridCell, pointerEvents: "none", overflow: "hidden", zIndex: 0 }, "data-ln-expression--tokens": true, children: tokens.map((token) => (_jsx(Fragment, { children: _jsx(Highlighter, { token: token }) }, token.start))) }), _jsx(CompletionPopoverProvider, { value: popoverValue, children: _jsx(CompletionListProvider, { value: listValue, children: children }) })] }));
+}

package/dist/components/expressions-editor/get-indentation.d.ts

@@ -0,0 +1 @@
+export declare function getIndentation(text: string, cursorPosition: number): string;

package/dist/components/expressions-editor/get-indentation.js

@@ -0,0 +1,7 @@
+export function getIndentation(text, cursorPosition) {
+    const textBeforeCursor = text.substring(0, cursorPosition);
+    const lines = textBeforeCursor.split("\n");
+    const currentLine = lines[lines.length - 1];
+    const match = currentLine.match(/^(\s*)/);
+    return match ? match[1] : "";
+}

package/dist/components/expressions-editor/handle-completion-key-down.d.ts

@@ -0,0 +1,2 @@
+import type { CompletionAction, KeybindingConfig } from "./types.js";
+export declare function handleCompletionKeyDown(key: string, keybindings?: KeybindingConfig): CompletionAction;

package/dist/components/expressions-editor/handle-completion-key-down.js

@@ -0,0 +1,22 @@
+const DEFAULT_KEYBINDINGS = {
+    accept: ["Enter", "Tab"],
+    dismiss: ["Escape"],
+    navigateUp: ["ArrowUp"],
+    navigateDown: ["ArrowDown"],
+};
+export function handleCompletionKeyDown(key, keybindings) {
+    const bindings = { ...DEFAULT_KEYBINDINGS, ...keybindings };
+    if (bindings.navigateUp.includes(key)) {
+        return { type: "navigate", direction: "up" };
+    }
+    if (bindings.navigateDown.includes(key)) {
+        return { type: "navigate", direction: "down" };
+    }
+    if (bindings.accept.includes(key)) {
+        return { type: "accept" };
+    }
+    if (bindings.dismiss.includes(key)) {
+        return { type: "dismiss" };
+    }
+    return { type: "none" };
+}

package/dist/components/expressions-editor/handle-enter-key.d.ts

@@ -0,0 +1,4 @@
+export declare function handleEnterKey(value: string, selectionStart: number, selectionEnd: number, multiline: boolean): {
+    value: string;
+    cursorPosition: number;
+} | null;

package/dist/components/expressions-editor/handle-enter-key.js

@@ -0,0 +1,11 @@
+import { getIndentation } from "./get-indentation.js";
+export function handleEnterKey(value, selectionStart, selectionEnd, multiline) {
+    if (!multiline) {
+        return null;
+    }
+    const indent = getIndentation(value, selectionStart);
+    const insertion = "\n" + indent;
+    const newValue = value.substring(0, selectionStart) + insertion + value.substring(selectionEnd);
+    const cursorPosition = selectionStart + insertion.length;
+    return { value: newValue, cursorPosition };
+}

package/dist/components/expressions-editor/handle-manual-trigger.d.ts

@@ -0,0 +1,2 @@
+import type { KeyboardEvent } from "react";
+export declare function isManualTrigger(e: KeyboardEvent<HTMLTextAreaElement>): boolean;

package/dist/components/expressions-editor/handle-manual-trigger.js

@@ -0,0 +1,3 @@
+export function isManualTrigger(e) {
+    return (e.ctrlKey || e.metaKey) && e.key === " ";
+}

package/dist/components/expressions-editor/index.d.ts

@@ -0,0 +1,17 @@
+import { ExpressionEditor as Expr } from "./expression-editor.js";
+export declare const ExpressionEditor: {
+    Root: typeof Expr;
+    CompletionPopover: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    CompletionList: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, "children"> & {
+        children?: (props: {
+            readonly items: import("./types.js").CompletionItem[];
+            readonly loading: boolean;
+        }) => import("react").ReactNode;
+    }, "ref"> & import("react").RefAttributes<HTMLUListElement>>;
+    CompletionListItem: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLLIElement> & import("react").LiHTMLAttributes<HTMLLIElement> & {
+        readonly item: import("./types.js").CompletionItem;
+        readonly index: number;
+    }, "ref"> & import("react").RefAttributes<HTMLLIElement>>;
+};
+export { createCompletionProvider } from "./create-completion-provider.js";
+export type { CompletionItem } from "./types.js";

package/dist/components/expressions-editor/index.js

@@ -0,0 +1,11 @@
+import { ExpressionEditor as Expr } from "./expression-editor.js";
+import { CompletionListItem } from "./intellisence/completion-item.js";
+import { CompletionList } from "./intellisence/completion-list.js";
+import { CompletionPopover } from "./intellisence/completion-popover.js";
+export const ExpressionEditor = {
+    Root: Expr,
+    CompletionPopover,
+    CompletionList,
+    CompletionListItem,
+};
+export { createCompletionProvider } from "./create-completion-provider.js";

package/dist/components/expressions-editor/intellisence/completion-context.d.ts

@@ -0,0 +1,16 @@
+import type { CompletionItem, CursorCoordinates } from "../types";
+interface ContextPopover {
+    readonly isOpen: boolean;
+    readonly coordinates: CursorCoordinates;
+}
+export declare const CompletionPopoverProvider: import("react").Provider<ContextPopover>;
+export declare const useCompletionPopover: () => ContextPopover;
+interface ContextList {
+    readonly items: CompletionItem[];
+    readonly loading: boolean;
+    readonly selectedIndex: number;
+    readonly onSelect: (item: CompletionItem) => void;
+}
+export declare const CompletionListProvider: import("react").Provider<ContextList>;
+export declare const useCompletionListContext: () => ContextList;
+export {};

package/dist/components/expressions-editor/intellisence/completion-context.js

@@ -0,0 +1,7 @@
+import { createContext, useContext } from "react";
+const context = createContext({});
+export const CompletionPopoverProvider = context.Provider;
+export const useCompletionPopover = () => useContext(context);
+const contextList = createContext({});
+export const CompletionListProvider = contextList.Provider;
+export const useCompletionListContext = () => useContext(contextList);

package/dist/components/expressions-editor/intellisence/completion-item.d.ts

@@ -0,0 +1,5 @@
+import type { CompletionItem } from "../types.js";
+export declare const CompletionListItem: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLLIElement> & import("react").LiHTMLAttributes<HTMLLIElement> & {
+    readonly item: CompletionItem;
+    readonly index: number;
+}, "ref"> & import("react").RefAttributes<HTMLLIElement>>;

package/dist/components/expressions-editor/intellisence/completion-item.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { useCompletionListContext } from "./completion-context.js";
+function CompleteListItemBase({ item, index, ...props }, ref) {
+    const { selectedIndex, onSelect } = useCompletionListContext();
+    return (_jsx("li", { ...props, ref: ref, role: "option", "aria-selected": index === selectedIndex, "data-ln-selected": index === selectedIndex ? "" : undefined, onMouseDown: (e) => {
+            e.preventDefault();
+            onSelect(item);
+        }, "data-ln-expression-completion-item": true }));
+}
+export const CompletionListItem = forwardRef(CompleteListItemBase);

package/dist/components/expressions-editor/intellisence/completion-list.d.ts

@@ -0,0 +1,8 @@
+import { type ReactNode } from "react";
+import type { CompletionItem } from "../types.js";
+export declare const CompletionList: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, "children"> & {
+    children?: (props: {
+        readonly items: CompletionItem[];
+        readonly loading: boolean;
+    }) => ReactNode;
+}, "ref"> & import("react").RefAttributes<HTMLUListElement>>;

package/dist/components/expressions-editor/intellisence/completion-list.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useRef, useEffect, forwardRef } from "react";
+import { useCompletionListContext } from "./completion-context.js";
+import { useCombinedRefs } from "@1771technologies/lytenyte-core/internal";
+function CompletionListBase({ children, ...props }, ref) {
+    const { selectedIndex, items, loading } = useCompletionListContext();
+    const listRef = useRef(null);
+    useEffect(() => {
+        const list = listRef.current;
+        if (!list)
+            return;
+        const selected = list.querySelector("[data-ln-selected]");
+        selected?.scrollIntoView({ block: "nearest" });
+    }, [selectedIndex]);
+    const combined = useCombinedRefs(listRef, ref);
+    return (_jsx("ul", { ...props, ref: combined, role: "listbox", "data-ln-expression-completion-list": true, children: children?.({ items, loading }) }));
+}
+export const CompletionList = forwardRef(CompletionListBase);

package/dist/components/expressions-editor/intellisence/completion-popover.d.ts

@@ -0,0 +1 @@
+export declare const CompletionPopover: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

package/dist/components/expressions-editor/intellisence/completion-popover.js

@@ -0,0 +1,30 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useRef, useEffect, forwardRef } from "react";
+import { useCompletionPopover } from "./completion-context.js";
+import { useCombinedRefs } from "@1771technologies/lytenyte-core/internal";
+function CompletionPopoverImpl({ children, ...props }, ref) {
+    const { isOpen, coordinates } = useCompletionPopover();
+    const popoverRef = useRef(null);
+    useEffect(() => {
+        const el = popoverRef.current;
+        if (!el)
+            return;
+        if (isOpen) {
+            if (!el.matches(":popover-open"))
+                el.showPopover();
+        }
+        else {
+            if (el.matches(":popover-open"))
+                el.hidePopover();
+        }
+    }, [isOpen]);
+    const combined = useCombinedRefs(ref, popoverRef);
+    return (_jsx("div", { ...props, ref: combined, popover: "manual", "data-ln-expression-popover": true, style: {
+            position: "fixed",
+            top: coordinates.top + coordinates.lineHeight,
+            left: coordinates.left,
+            margin: 0,
+            inset: "unset",
+        }, children: isOpen ? children : null }));
+}
+export const CompletionPopover = forwardRef(CompletionPopoverImpl);

package/dist/components/expressions-editor/intellisence/filter-completions-by-prefix.d.ts

@@ -0,0 +1,2 @@
+import type { CompletionItem } from "../types.js";
+export declare function filterCompletionsByPrefix(items: CompletionItem[], prefix: string): CompletionItem[];

package/dist/components/expressions-editor/intellisence/filter-completions-by-prefix.js

@@ -0,0 +1,6 @@
+export function filterCompletionsByPrefix(items, prefix) {
+    if (!prefix)
+        return items;
+    const lower = prefix.toLowerCase();
+    return items.filter((item) => item.label.toLowerCase().startsWith(lower));
+}

package/dist/components/expressions-editor/intellisence/get-word-at-cursor.d.ts

@@ -0,0 +1,2 @@
+import type { WordAtCursor } from "../types.js";
+export declare function getWordAtCursor(text: string, cursorPosition: number): WordAtCursor;

package/dist/components/expressions-editor/intellisence/get-word-at-cursor.js

@@ -0,0 +1,12 @@
+export function getWordAtCursor(text, cursorPosition) {
+    const wordPattern = /[a-zA-Z0-9_]/;
+    let start = cursorPosition;
+    while (start > 0 && wordPattern.test(text[start - 1])) {
+        start--;
+    }
+    return {
+        word: text.substring(start, cursorPosition),
+        start,
+        end: cursorPosition,
+    };
+}

package/dist/components/expressions-editor/intellisence/use-complete-trigger.d.ts

@@ -0,0 +1,13 @@
+import type { WordAtCursor } from "../types";
+import type { Token } from "../../../expressions/lexer/types";
+type TriggerConfig = {
+    triggerCharacters: string[];
+    onTrigger: (tokens: Token[], cursorPosition: number, word: WordAtCursor) => void;
+    tokenize: (value: string) => Token[];
+};
+export declare function useCompletionTrigger(config: TriggerConfig): {
+    handleInputChange: (value: string, cursorPosition: number) => void;
+    triggerManually: (value: string, cursorPosition: number) => void;
+    cancel: () => void;
+};
+export {};

package/dist/components/expressions-editor/intellisence/use-complete-trigger.js

@@ -0,0 +1,41 @@
+import { useCallback, useRef, useEffect } from "react";
+import { getWordAtCursor } from "./get-word-at-cursor.js";
+const DEBOUNCE_DELAY = 150;
+export function useCompletionTrigger(config) {
+    const timerRef = useRef(null);
+    const configRef = useRef(config);
+    configRef.current = config;
+    const cancel = useCallback(() => {
+        if (timerRef.current !== null) {
+            clearTimeout(timerRef.current);
+            timerRef.current = null;
+        }
+    }, []);
+    useEffect(() => cancel, [cancel]);
+    const triggerManually = useCallback((value, cursorPosition) => {
+        cancel();
+        const { tokenize, onTrigger } = configRef.current;
+        const tokens = tokenize(value);
+        const word = getWordAtCursor(value, cursorPosition);
+        onTrigger(tokens, cursorPosition, word);
+    }, [cancel]);
+    const handleInputChange = useCallback((value, cursorPosition) => {
+        cancel();
+        const { triggerCharacters, tokenize, onTrigger } = configRef.current;
+        const charBeforeCursor = value[cursorPosition - 1] || "";
+        if (triggerCharacters.includes(charBeforeCursor)) {
+            const tokens = tokenize(value);
+            const word = getWordAtCursor(value, cursorPosition);
+            onTrigger(tokens, cursorPosition, word);
+            return;
+        }
+        const word = getWordAtCursor(value, cursorPosition);
+        if (word.word.length > 0) {
+            timerRef.current = setTimeout(() => {
+                const tokens = configRef.current.tokenize(value);
+                configRef.current.onTrigger(tokens, cursorPosition, word);
+            }, DEBOUNCE_DELAY);
+        }
+    }, [cancel]);
+    return { handleInputChange, triggerManually, cancel };
+}

package/dist/components/expressions-editor/intellisence/use-completions.d.ts

@@ -0,0 +1,14 @@
+import type { CompletionItem, WordAtCursor } from "../types.js";
+import type { Token } from "../../../expressions/lexer/types.js";
+export declare function useCompletions(completionProvider?: (tokens: Token[], cursorPosition: number) => CompletionItem[] | Promise<CompletionItem[]>): {
+    selectedItem: CompletionItem | null;
+    fetchCompletions: (tokens: Token[], cursorPosition: number, word: WordAtCursor) => Promise<void>;
+    updateFilter: (prefix: string) => void;
+    navigate: (direction: "up" | "down") => void;
+    dismiss: () => void;
+    items: CompletionItem[];
+    filteredItems: CompletionItem[];
+    selectedIndex: number;
+    isOpen: boolean;
+    isLoading: boolean;
+};

package/dist/components/expressions-editor/intellisence/use-completions.js

@@ -0,0 +1,78 @@
+import { useState, useCallback, useRef } from "react";
+import { filterCompletionsByPrefix } from "./filter-completions-by-prefix.js";
+export function useCompletions(completionProvider) {
+    const [state, setState] = useState({
+        items: [],
+        filteredItems: [],
+        selectedIndex: 0,
+        isOpen: false,
+        isLoading: false,
+    });
+    const requestIdRef = useRef(0);
+    const fetchCompletions = useCallback(async (tokens, cursorPosition, word) => {
+        if (!completionProvider)
+            return;
+        const requestId = ++requestIdRef.current;
+        setState((prev) => ({ ...prev, isLoading: true, isOpen: true }));
+        try {
+            const result = await Promise.resolve(completionProvider(tokens, cursorPosition));
+            if (requestId !== requestIdRef.current)
+                return;
+            const filtered = filterCompletionsByPrefix(result, word.word);
+            setState({
+                items: result,
+                filteredItems: filtered,
+                selectedIndex: 0,
+                isOpen: filtered.length > 0,
+                isLoading: false,
+            });
+        }
+        catch {
+            if (requestId !== requestIdRef.current)
+                return;
+            setState((prev) => ({
+                ...prev,
+                isOpen: false,
+                isLoading: false,
+            }));
+        }
+    }, [completionProvider]);
+    const updateFilter = useCallback((prefix) => {
+        setState((prev) => {
+            const filtered = filterCompletionsByPrefix(prev.items, prefix);
+            return {
+                ...prev,
+                filteredItems: filtered,
+                selectedIndex: 0,
+                isOpen: filtered.length > 0,
+            };
+        });
+    }, []);
+    const navigate = useCallback((direction) => {
+        setState((prev) => {
+            if (prev.filteredItems.length === 0)
+                return prev;
+            const delta = direction === "down" ? 1 : -1;
+            const count = prev.filteredItems.length;
+            const nextIndex = (prev.selectedIndex + delta + count) % count;
+            return { ...prev, selectedIndex: nextIndex };
+        });
+    }, []);
+    const dismiss = useCallback(() => {
+        setState((prev) => ({
+            ...prev,
+            isOpen: false,
+            isLoading: false,
+            selectedIndex: 0,
+        }));
+    }, []);
+    const selectedItem = state.isOpen && state.filteredItems.length > 0 ? state.filteredItems[state.selectedIndex] : null;
+    return {
+        ...state,
+        selectedItem,
+        fetchCompletions,
+        updateFilter,
+        navigate,
+        dismiss,
+    };
+}

package/dist/components/expressions-editor/replace-word-at-cursor.d.ts

@@ -0,0 +1,5 @@
+import type { WordAtCursor } from "./types.js";
+export declare function replaceWordAtCursor(text: string, wordRange: WordAtCursor, replacement: string): {
+    value: string;
+    cursorPosition: number;
+};

package/dist/components/expressions-editor/replace-word-at-cursor.js

@@ -0,0 +1,7 @@
+export function replaceWordAtCursor(text, wordRange, replacement) {
+    const before = text.substring(0, wordRange.start);
+    const after = text.substring(wordRange.end);
+    const value = before + replacement + after;
+    const cursorPosition = wordRange.start + replacement.length;
+    return { value, cursorPosition };
+}

package/dist/components/expressions-editor/token-highlighter-default.d.ts

@@ -0,0 +1,4 @@
+import type { Token } from "../../expressions/lexer/types.js";
+export declare function DefaultTokenHighlighter({ token }: {
+    token: Token;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/components/expressions-editor/token-highlighter-default.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+const tokenToSyntaxColor = {
+    Number: "number",
+    String: "string",
+    TemplateLiteral: "string",
+    Spread: "operator",
+    Punctuation: "operator",
+    Pipe: "operator",
+    Operator: "operator",
+    Arrow: "operator",
+    Identifier: "identifier",
+    ExpressionError: "error",
+    Unparsed: "punctuation",
+};
+export function DefaultTokenHighlighter({ token }) {
+    const expr = tokenToSyntaxColor[token.type];
+    return _jsx("span", { style: { color: `var(--ln-expr-${expr})` }, children: token.value });
+}

package/dist/components/expressions-editor/types.d.ts

@@ -0,0 +1,47 @@
+import type { CSSProperties, ReactNode } from "react";
+import type { Token } from "../../expressions/lexer/types.js";
+export type CompletionItem = {
+    label: string;
+    kind: string;
+    id: string;
+};
+export type KeybindingConfig = {
+    accept?: string[];
+    dismiss?: string[];
+    navigateUp?: string[];
+    navigateDown?: string[];
+};
+export type CompletionAction = {
+    type: "navigate";
+    direction: "up" | "down";
+} | {
+    type: "accept";
+} | {
+    type: "dismiss";
+} | {
+    type: "none";
+};
+export type WordAtCursor = {
+    word: string;
+    start: number;
+    end: number;
+};
+export type CursorCoordinates = {
+    top: number;
+    left: number;
+    lineHeight: number;
+};
+export type ExpressionEditorProps = {
+    value: string;
+    onChange: (value: string) => void;
+    tokenize: (value: string) => Token[];
+    highlight?: (props: {
+        token: Token;
+    }) => ReactNode;
+    completionProvider?: (tokens: Token[], index: number) => CompletionItem[] | Promise<CompletionItem[]>;
+    placeholder?: string;
+    disabled?: boolean;
+    readOnly?: boolean;
+    className?: string;
+    style?: CSSProperties;
+};

package/dist/components/expressions-editor/types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/expressions-editor/use-keyboard-navigation.d.ts

@@ -0,0 +1,10 @@
+import type { CompletionItem, WordAtCursor } from "./types";
+interface NavigationDeps {
+    readonly onValueChange: (value: string) => void;
+    readonly onDismiss: () => void;
+    readonly textareaRef: React.RefObject<HTMLTextAreaElement | null>;
+}
+export declare function useKeyboardNavigation({ onValueChange, onDismiss, textareaRef }: NavigationDeps): {
+    acceptCompletion: (item: CompletionItem, word: WordAtCursor) => void;
+};
+export {};

package/dist/components/expressions-editor/use-keyboard-navigation.js

@@ -0,0 +1,16 @@
+import { useCallback } from "react";
+import { replaceWordAtCursor } from "./replace-word-at-cursor.js";
+export function useKeyboardNavigation({ onValueChange, onDismiss, textareaRef }) {
+    const acceptCompletion = useCallback((item, word) => {
+        const textarea = textareaRef.current;
+        if (!textarea)
+            return;
+        const { value, cursorPosition } = replaceWordAtCursor(textarea.value, word, item.label);
+        textarea.value = value;
+        textarea.selectionStart = cursorPosition;
+        textarea.selectionEnd = cursorPosition;
+        onValueChange(value);
+        onDismiss();
+    }, [onValueChange, onDismiss, textareaRef]);
+    return { acceptCompletion };
+}