@1771technologies/lytenyte-pro 2.0.4-dev.3 → 2.1.0

package/dist/components/expressions-editor/create-key-down-handler.d.ts

@@ -0,0 +1,18 @@
+import type { KeyboardEvent } from "react";
+import type { CompletionItem, KeybindingConfig, WordAtCursor } from "./types.js";
+interface KeyDownDeps {
+    readonly isPopoverOpen: boolean;
+    readonly multiline: boolean;
+    readonly keybindings?: KeybindingConfig;
+    readonly selectedItem: CompletionItem | null;
+    readonly wordAtCursor: WordAtCursor | null;
+    readonly onAcceptCompletion: (item: CompletionItem, word: WordAtCursor) => void;
+    readonly onNavigate: (direction: "up" | "down") => void;
+    readonly onDismiss: () => void;
+    readonly onCancelTrigger: () => void;
+    readonly onManualTrigger: () => void;
+    readonly onValueChange: (value: string) => void;
+    readonly onExternalKeyDown?: (e: KeyboardEvent<HTMLTextAreaElement>) => void;
+}
+export declare function createKeyDownHandler(deps: KeyDownDeps): (e: KeyboardEvent<HTMLTextAreaElement>) => void;
+export {};

package/dist/components/expressions-editor/create-key-down-handler.js

@@ -0,0 +1,49 @@
+import { handleCompletionKeyDown } from "./handle-completion-key-down.js";
+import { handleEnterKey } from "./handle-enter-key.js";
+import { isManualTrigger } from "./handle-manual-trigger.js";
+export function createKeyDownHandler(deps) {
+    return (e) => {
+        if (deps.onExternalKeyDown) {
+            deps.onExternalKeyDown(e);
+            if (e.defaultPrevented)
+                return;
+        }
+        if (deps.isPopoverOpen) {
+            const action = handleCompletionKeyDown(e.key, deps.keybindings);
+            if (action.type === "navigate") {
+                e.preventDefault();
+                deps.onNavigate(action.direction);
+                return;
+            }
+            if (action.type === "accept" && deps.selectedItem && deps.wordAtCursor) {
+                e.preventDefault();
+                deps.onAcceptCompletion(deps.selectedItem, deps.wordAtCursor);
+                return;
+            }
+            if (action.type === "dismiss") {
+                e.preventDefault();
+                deps.onDismiss();
+                deps.onCancelTrigger();
+                return;
+            }
+        }
+        if (isManualTrigger(e)) {
+            e.preventDefault();
+            deps.onManualTrigger();
+            return;
+        }
+        if (e.key === "Enter") {
+            const { value, selectionStart, selectionEnd } = e.currentTarget;
+            const result = handleEnterKey(value, selectionStart, selectionEnd, deps.multiline);
+            if (result === null) {
+                e.preventDefault();
+                return;
+            }
+            e.preventDefault();
+            e.currentTarget.value = result.value;
+            e.currentTarget.selectionStart = result.cursorPosition;
+            e.currentTarget.selectionEnd = result.cursorPosition;
+            deps.onValueChange(result.value);
+        }
+    };
+}

package/dist/components/expressions-editor/cursor-position/measure-cursor-at-pointer.d.ts

@@ -0,0 +1,2 @@
+import type { CursorCoordinates } from "../types.js";
+export declare function measureCursorPosition(textarea: HTMLTextAreaElement, cursorIndex: number): CursorCoordinates;

package/dist/components/expressions-editor/cursor-position/measure-cursor-at-pointer.js

@@ -0,0 +1,56 @@
+export function measureCursorPosition(textarea, cursorIndex) {
+    const mirror = document.createElement("div");
+    const computed = window.getComputedStyle(textarea);
+    const propertiesToCopy = [
+        "fontFamily",
+        "fontSize",
+        "fontWeight",
+        "fontStyle",
+        "letterSpacing",
+        "lineHeight",
+        "textTransform",
+        "wordSpacing",
+        "textIndent",
+        "paddingTop",
+        "paddingRight",
+        "paddingBottom",
+        "paddingLeft",
+        "borderTopWidth",
+        "borderRightWidth",
+        "borderBottomWidth",
+        "borderLeftWidth",
+        "boxSizing",
+        "whiteSpace",
+        "wordBreak",
+        "overflowWrap",
+        "tabSize",
+    ];
+    mirror.style.position = "absolute";
+    mirror.style.top = "-9999px";
+    mirror.style.left = "-9999px";
+    mirror.style.visibility = "hidden";
+    mirror.style.overflow = "hidden";
+    mirror.style.width = computed.width;
+    for (const prop of propertiesToCopy) {
+        mirror.style[prop] = computed[prop];
+    }
+    const textBeforeCursor = textarea.value.substring(0, cursorIndex);
+    const textNode = document.createTextNode(textBeforeCursor);
+    const marker = document.createElement("span");
+    marker.textContent = "\u200b";
+    mirror.appendChild(textNode);
+    mirror.appendChild(marker);
+    document.body.appendChild(mirror);
+    try {
+        const textareaRect = textarea.getBoundingClientRect();
+        const markerRect = marker.getBoundingClientRect();
+        const mirrorRect = mirror.getBoundingClientRect();
+        const top = textareaRect.top + (markerRect.top - mirrorRect.top) - textarea.scrollTop;
+        const left = textareaRect.left + (markerRect.left - mirrorRect.left) - textarea.scrollLeft;
+        const lineHeight = parseFloat(computed.lineHeight) || markerRect.height;
+        return { top, left, lineHeight };
+    }
+    finally {
+        document.body.removeChild(mirror);
+    }
+}

package/dist/components/expressions-editor/cursor-position/use-cursor-position.d.ts

@@ -0,0 +1,5 @@
+import type { VirtualElement } from "../../external/floating-ui.js";
+export declare function useCursorPosition(textareaRef: React.RefObject<HTMLTextAreaElement | null>): {
+    virtualElement: VirtualElement;
+    update: () => void;
+};

package/dist/components/expressions-editor/cursor-position/use-cursor-position.js

@@ -0,0 +1,33 @@
+import { useRef, useCallback } from "react";
+import { measureCursorPosition } from "./measure-cursor-at-pointer.js";
+export function useCursorPosition(textareaRef) {
+    const cursorIndexRef = useRef(0);
+    const virtualElement = useRef({
+        getBoundingClientRect() {
+            const textarea = textareaRef.current;
+            if (!textarea)
+                return { top: 0, left: 0, right: 0, bottom: 0, x: 0, y: 0, width: 0, height: 0 };
+            const { top, left, lineHeight } = measureCursorPosition(textarea, cursorIndexRef.current);
+            return {
+                top,
+                left,
+                right: left,
+                bottom: top + lineHeight,
+                x: left,
+                y: top,
+                width: 0,
+                height: lineHeight,
+            };
+        },
+        get contextElement() {
+            return textareaRef.current ?? undefined;
+        },
+    });
+    const update = useCallback(() => {
+        const textarea = textareaRef.current;
+        if (!textarea)
+            return;
+        cursorIndexRef.current = textarea.selectionStart;
+    }, [textareaRef]);
+    return { virtualElement: virtualElement.current, update };
+}

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

@@ -0,0 +1,3 @@
+import type { ExpressionEditorProps } from "./types";
+import type { PropsWithChildren } from "react";
+export declare function ExpressionEditor({ value, onChange: onValueChange, tokenize, highlight: Highlighter, completionProvider, placeholder, disabled, readOnly, className, style, children, }: PropsWithChildren<ExpressionEditorProps>): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,158 @@
+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 trigger = useCompletionTrigger({
+        triggerCharacters,
+        onTrigger: (toks, pos, word) => {
+            cursorPosition.update();
+            completions.fetchCompletions(toks, pos, word);
+        },
+        tokenize,
+    });
+    const navigation = useKeyboardNavigation({
+        onValueChange,
+        onAccepted: (value, cursorPosition) => {
+            if (completionProvider) {
+                trigger.triggerManually(value, cursorPosition + 1);
+            }
+            else {
+                completions.dismiss();
+            }
+        },
+        textareaRef,
+    });
+    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) {
+            const charBefore = newValue[selectionStart - 1] || "";
+            if (word.word.length > 0) {
+                deps.updateFilter(word.word);
+            }
+            else if (charBefore === '"' || charBefore === "'") {
+                // String delimiter typed — close the popover rather than re-triggering.
+                deps.dismiss();
+                deps.cancel();
+            }
+            else if (!triggerCharacters.includes(charBefore)) {
+                // Non-word, non-trigger char (e.g. an operator) - re-fetch so the list
+                // reflects the new syntactic context rather than keeping stale results.
+                deps.triggerManually(newValue, selectionStart);
+            }
+        }
+        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, referenceElement: cursorPosition.virtualElement };
+    }, [completions.isOpen, cursorPosition.virtualElement]);
+    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,18 @@
+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";
+export type { ContextEntry } from "./create-completion-provider.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,17 @@
+import type { VirtualElement } from "../../external/floating-ui.js";
+import type { CompletionItem } from "../types";
+interface ContextPopover {
+    readonly isOpen: boolean;
+    readonly referenceElement: VirtualElement | null;
+}
+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,47 @@
+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";
+import { autoUpdate, computePosition, offset, shift } from "../../external/floating-ui.js";
+function CompletionPopoverImpl({ children, ...props }, ref) {
+    const { isOpen, referenceElement } = 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]);
+    useEffect(() => {
+        const el = popoverRef.current;
+        if (!isOpen || !el || !referenceElement)
+            return;
+        function update() {
+            computePosition(referenceElement, el, {
+                strategy: "fixed",
+                placement: "bottom-start",
+                middleware: [offset(4), shift({ padding: 8 })],
+            }).then(({ x, y }) => {
+                el.style.left = `${x}px`;
+                el.style.top = `${y}px`;
+            });
+        }
+        return autoUpdate(referenceElement, el, update);
+    }, [isOpen, referenceElement]);
+    const combined = useCombinedRefs(ref, popoverRef);
+    return (_jsx("div", { ...props, ref: combined, popover: "manual", "data-ln-expression-popover": true, style: {
+            position: "fixed",
+            top: 0,
+            left: 0,
+            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 };
+}