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

package/README.md

@@ -35,7 +35,7 @@ to **LyteNyte Grid PRO** for advanced enterprise features and support.
 [![NPM Version](https://img.shields.io/npm/v/%401771technologies%2Flytenyte-core?label=Core&style=flat&logo=npm&logoColor=white)](https://www.npmjs.com/package/@1771technologies/lytenyte-core)
 [![GitHub branch status](https://img.shields.io/github/checks-status/1771-Technologies/lytenyte/main?style=flat&logo=github)](https://github.com/1771-Technologies/lytenyte/tree/main)
 [![GitHub Repo stars](https://img.shields.io/github/stars/1771-Technologies/lytenyte?style=flat&logo=github)](https://github.com/1771-Technologies/lytenyte)
-[![Contributor Covenant](https://img.shields.io/badge/Contributor%20Covenant-2.1-4baaaa?style=flat)](code_of_conduct.md)
+[![Contributor Covenant](https://img.shields.io/badge/Contributor%20Covenant-2.1-4baaaa?style=flat)](https://github.com/1771-Technologies/lytenyte/blob/main/CODE_OF_CONDUCT.md)
 [![CI Status](https://img.shields.io/github/actions/workflow/status/1771-Technologies/lytenyte/release.yml?branch=main&style=flat&label=CI&logo=github)](https://github.com/1771-Technologies/lytenyte/actions/workflows/release.yml?query=branch%3Amain)
 [![Follow on X](https://img.shields.io/twitter/follow/1771tech?label=follow+1771tech&style=social&logo=x&logoColor=black)](https://x.com/1771tech)
 [![LinkedIn](https://img.shields.io/badge/LinkedIn-Follow-0A66C2?style=flat&logo=linkedin&logoColor=white)](https://www.linkedin.com/company/1771technologies)
@@ -55,14 +55,34 @@ to **LyteNyte Grid PRO** for advanced enterprise features and support.
 
 LyteNyte Grid is available in two editions:
 
-1. **LyteNyte Grid Core: Free, open-source edition** for building high-performance data tables.
-   Includes sorting, filtering, editing, row selection, detail views, and more. Also includes advanced
-   features such as aggregation, row grouping, and data export, often locked behind paywalls in other grids.
+1. **LyteNyte Grid Core:** Free, **open-source edition** for building high-performance data tables. Includes sorting,
+   filtering, editing, row selection, detail views, and more. Also includes advanced features such
+   as aggregation, row grouping, and cell range selection, often locked behind paywalls in other grids.
 
-2. **LyteNyte Grid PRO: Commercial edition** that extends Core with powerful enterprise
-   features such as server-side data loading, pivoting, tree data, component managers,
-   and advanced filtering. Build custom menus, popovers and dialogs,
-   and workflow-driven UIs with ease.
+2. **LyteNyte Grid PRO: Commercial edition** that extends Core with powerful enterprise features,
+   including server-side data loading, pivoting, tree data, component managers, and advanced
+   filtering. Build custom menus, popovers, expressions, and workflow-driven UIs with ease.
+
+## AI-Enhanced Workflows
+
+**LyteNyte Grid AI Skills** are structured context files for Claude Code, Windsurf, Cursor, and other AI coding agents.
+Skills provide agents with accurate, curated context for LyteNyte Grid, allowing them to generate complex
+grid implementations with greater speed and reliability.
+
+Instead of building the grid manually, developers can describe the
+desired result and let the agent generate the implementation.
+
+**Install LyteNyte Grid AI Skills**
+
+```bash
+npx skills add 1771-Technologies/lytenyte
+```
+
+Once installed, the Skill activates automatically whenever you work on a LyteNyte Grid task. No
+special prompting is needed. Skills are actively maintained by the 1771 Technologies
+team and versioned alongside each LyteNyte Grid release.
+
+See our [AI Skills Overview guide](https://1771technologies.com/docs/ai-skills-overview) to learn more.
 
 ## Features
 
@@ -79,6 +99,16 @@ LyteNyte Grid is available in two editions:
 
 </details>
 
+<details>
+<summary><b>🤖&nbsp; AI Enhanced Workflows</b></summary>
+<br>
+
+| Feature                                                               | Core | PRO |
+| --------------------------------------------------------------------- | :--: | :-: |
+| [AI Skills](https://www.1771technologies.com/docs/ai-skills-overview) |  ✅  | ✅  |
+
+</details>
+
 <details>
 <summary><b>🔌&nbsp; API Extensions</b></summary>
 <br>
@@ -198,8 +228,8 @@ LyteNyte Grid is available in two editions:
 | &nbsp;&nbsp;&nbsp;↳ [Checkbox Row Selection](https://www.1771technologies.com/docs/row-selection#checkbox-selection)     |  ✅  | ✅  |
 | &nbsp;&nbsp;&nbsp;↳ [Isolated Row Selection](https://www.1771technologies.com/docs/row-selection#isolated-row-selection) |  ✅  | ✅  |
 | &nbsp;&nbsp;&nbsp;↳ [Linked Row Selection](https://www.1771technologies.com/docs/row-selection#linked-row-selection)     |  ✅  | ✅  |
-| [Cell Selection](https://www.1771technologies.com/docs/cell-selection#single-range-selection)                            |  —   | ✅  |
-| [Cell Range Selection](https://www.1771technologies.com/docs/cell-selection#multi-range-selection)                       |  —   | ✅  |
+| [Cell Selection](https://www.1771technologies.com/docs/cell-selection#single-range-selection)                            |  ✅  | ✅  |
+| [Cell Range Selection](https://www.1771technologies.com/docs/cell-selection#multi-range-selection)                       |  ✅  | ✅  |
 
 </details>
 
@@ -239,6 +269,19 @@ LyteNyte Grid is available in two editions:
 
 </details>
 
+<details>
+<summary><b>🧮&nbsp; Expressions</b> &nbsp;</summary>
+<br>
+
+| Feature                                                                          | Core | PRO |
+| -------------------------------------------------------------------------------- | :--: | :-: |
+| [Expressions Engine](https://www.1771technologies.com/docs/expressions-overview) |  —   | ✅  |
+| [Filter Expressions](https://www.1771technologies.com/docs/expression-filters)   |  —   | ✅  |
+| [Expression Editor](https://www.1771technologies.com/docs/expression-editor)     |  —   | ✅  |
+| [Expression Plugins](https://www.1771technologies.com/docs/expression-plugins)   |  —   | ✅  |
+
+</details>
+
 <details>
 <summary><b>📦&nbsp; Grouping & Aggregations</b></summary>
 <br>
@@ -377,7 +420,7 @@ npm install --save @1771technologies/lytenyte-pro
 
 > [!NOTE]
 > You can install and use LyteNyte Grid PRO
-> without license but a watermark will be displayed.
+> without a license, but a watermark will be displayed.
 
 **Core:**
 

package/css/components/expression-editor.css

@@ -2,6 +2,7 @@
   [data-ln-expression-editor] {
     --ln-expr-number: light-dark(#b45309, #fab387);
     --ln-expr-string: light-dark(#15803d, #a6e3a1);
+    --ln-expr-date: light-dark(#0e7490, #89dceb);
     --ln-expr-keyword: light-dark(#7c3aed, #cba6f7);
     --ln-expr-identifier: light-dark(#0369a1, #89b4fa);
     --ln-expr-operator: light-dark(#be185d, #f38ba8);
@@ -13,7 +14,7 @@
   [data-ln-expression-editor] {
     font-family:
       ui-monospace, "Cascadia Code", "Segoe UI Mono", "Liberation Mono", Menlo, Monaco, Consolas, monospace;
-    font-size: 16px;
+    font-size: var(--ln-font-sm);
     white-space: nowrap;
     word-break: normal;
     overflow-wrap: normal;

package/dist/components/expressions-editor/create-completion-provider.d.ts

@@ -1,3 +1,10 @@
 import type { Token } from "../../expressions/lexer/types.js";
 import type { CompletionItem } from "./types.js";
-export declare function createCompletionProvider(context: Record<string, unknown>): (tokens: Token[], cursorPosition: number) => CompletionItem[];
+export type ContextEntry = {
+    value: unknown;
+    type: "string" | "number" | "array" | "object" | "function" | "boolean" | "date";
+    return?: "string" | "number" | "array" | "object" | "date";
+};
+type CompletionContext = Record<string, ContextEntry>;
+export declare function createCompletionProvider(context: CompletionContext): (tokens: Token[], cursorPosition: number) => CompletionItem[];
+export {};

package/dist/components/expressions-editor/create-completion-provider.js

@@ -48,28 +48,250 @@ const ARRAY_METHODS = [
     { label: "sort", kind: "function" },
     { label: "values", kind: "function" },
 ];
+const DATE_METHODS = [
+    { label: "getTime", kind: "function" },
+    { label: "toISOString", kind: "function" },
+];
+const NUMBER_METHODS = [
+    { label: "toExponential", kind: "function" },
+    { label: "toFixed", kind: "function" },
+    { label: "toLocaleString", kind: "function" },
+    { label: "toPrecision", kind: "function" },
+    { label: "toString", kind: "function" },
+    { label: "valueOf", kind: "function" },
+];
 function isDot(token) {
     return (token.type === "Punctuation" && token.value === ".") || token.type === "OptionalChain";
 }
 function isClosingBracket(token) {
     return token.type === "Punctuation" && token.value === "]";
 }
+function isCompleteValue(token) {
+    return (token.type === "Identifier" ||
+        token.type === "QuotedIdentifier" ||
+        token.type === "Number" ||
+        token.type === "String" ||
+        token.type === "TemplateLiteral" ||
+        (token.type === "Punctuation" && (token.value === ")" || token.value === "]")));
+}
 function isStringLiteral(token) {
     return token.type === "String" || token.type === "TemplateLiteral";
 }
-function analyzeTokens(tokens, cursorPosition) {
+const BINARY_OPERATORS = [
+    { label: "+  Plus", kind: "operator", value: "+" },
+    { label: "-  Minus", kind: "operator", value: "-" },
+    { label: "*  Multiply", kind: "operator", value: "*" },
+    { label: "/  Divide", kind: "operator", value: "/" },
+    { label: "%  Modulus", kind: "operator", value: "%" },
+    { label: "** Exponentiation", kind: "operator", value: "**" },
+    { label: "== Equal To", kind: "operator", value: "==" },
+    { label: "!= Not Equal To", kind: "operator", value: "!=" },
+    { label: "<  Less Than", kind: "operator", value: "<" },
+    { label: "<= Less Than Or Equal To", kind: "operator", value: "<=" },
+    { label: ">  Greater Than", kind: "operator", value: ">" },
+    { label: ">= Greater Than Or Equal To", kind: "operator", value: ">=" },
+    { label: "&& AND", kind: "operator", value: "&&" },
+    { label: "|| OR", kind: "operator", value: "||" },
+    { label: "?? OR if Null", kind: "operator", value: "??" },
+    { label: "|> Pipe", kind: "operator", value: "|>" },
+];
+const STRING_METHOD_RETURNS = {
+    at: "string",
+    charAt: "string",
+    charCodeAt: "number",
+    endsWith: "unknown",
+    includes: "unknown",
+    indexOf: "number",
+    lastIndexOf: "number",
+    match: "array",
+    padEnd: "string",
+    padStart: "string",
+    repeat: "string",
+    replace: "string",
+    replaceAll: "string",
+    slice: "string",
+    split: "array",
+    startsWith: "unknown",
+    substring: "string",
+    toLowerCase: "string",
+    toUpperCase: "string",
+    trim: "string",
+    trimEnd: "string",
+    trimStart: "string",
+};
+const ARRAY_METHOD_RETURNS = {
+    at: "unknown",
+    concat: "array",
+    entries: "unknown",
+    every: "unknown",
+    filter: "array",
+    find: "unknown",
+    findIndex: "number",
+    flat: "array",
+    flatMap: "array",
+    forEach: "unknown",
+    includes: "unknown",
+    indexOf: "number",
+    join: "string",
+    keys: "unknown",
+    map: "array",
+    reduce: "unknown",
+    reduceRight: "unknown",
+    reverse: "array",
+    slice: "array",
+    some: "unknown",
+    sort: "array",
+    values: "unknown",
+};
+const DATE_METHOD_RETURNS = {
+    getTime: "number",
+    toISOString: "string",
+};
+function kindOf(value) {
+    if (typeof value === "function")
+        return "function";
+    if (Array.isArray(value))
+        return "array";
+    if (typeof value === "string")
+        return "string";
+    if (typeof value === "number")
+        return "number";
+    if (typeof value === "boolean")
+        return "boolean";
+    if (typeof value === "object" && value !== null)
+        return "object";
+    return "unknown";
+}
+function isContextEntry(v) {
+    return v != null && typeof v === "object" && "type" in v && "value" in v;
+}
+function resolveEntry(context, path) {
+    if (path.length === 0)
+        return undefined;
+    let entry = context[path[0]];
+    for (let i = 1; i < path.length; i++) {
+        if (!entry || entry.value == null || typeof entry.value !== "object")
+            return undefined;
+        const nested = entry.value[path[i]];
+        if (isContextEntry(nested)) {
+            entry = nested;
+        }
+        else if (nested !== undefined) {
+            entry = { value: nested, type: kindOf(nested) };
+        }
+        else {
+            return undefined;
+        }
+    }
+    return entry;
+}
+function findMatchingOpenParen(relevant, closeIndex) {
+    let depth = 1;
+    let i = closeIndex - 1;
+    while (i >= 0) {
+        if (relevant[i].type === "Punctuation") {
+            if (relevant[i].value === ")")
+                depth++;
+            else if (relevant[i].value === "(") {
+                if (--depth === 0)
+                    return i;
+            }
+        }
+        i--;
+    }
+    return -1;
+}
+function buildPathFromTokens(relevant, i) {
+    const tokenName = (t) => (t.type === "QuotedIdentifier" ? t.value.slice(2, -1) : t.value);
+    const token = relevant[i];
+    if (!token || (token.type !== "Identifier" && token.type !== "QuotedIdentifier"))
+        return null;
+    const path = [tokenName(token)];
+    let j = i - 1;
+    while (j >= 1 && isDot(relevant[j])) {
+        j--;
+        if (relevant[j].type !== "Identifier" && relevant[j].type !== "QuotedIdentifier")
+            break;
+        path.unshift(tokenName(relevant[j]));
+        j--;
+    }
+    return path;
+}
+function resolveTypeOf(relevant, i, context) {
+    const token = relevant[i];
+    if (!token)
+        return "unknown";
+    if (token.type === "DateLiteral")
+        return "date";
+    if (isStringLiteral(token))
+        return "string";
+    if (isClosingBracket(token))
+        return "array";
+    if (token.type === "Punctuation" && token.value === ")") {
+        const openIdx = findMatchingOpenParen(relevant, i);
+        if (openIdx < 1)
+            return "unknown";
+        const methodToken = relevant[openIdx - 1];
+        if (methodToken?.type !== "Identifier")
+            return "unknown";
+        const hasDot = openIdx >= 2 && isDot(relevant[openIdx - 2]);
+        if (!hasDot) {
+            // Top-level function call: fn(...)
+            const funcEntry = context[methodToken.value];
+            if (funcEntry?.type === "function" && funcEntry.return)
+                return funcEntry.return;
+            return "unknown";
+        }
+        // Method call: receiver.method(...)
+        // First try resolving the receiver as a context object to find a typed method entry
+        const receiverPath = buildPathFromTokens(relevant, openIdx - 3);
+        if (receiverPath) {
+            const receiverEntry = resolveEntry(context, receiverPath);
+            if (receiverEntry?.type === "object" && receiverEntry.value != null) {
+                const methodVal = receiverEntry.value[methodToken.value];
+                const methodEntry = isContextEntry(methodVal) ? methodVal : undefined;
+                if (methodEntry?.type === "function" && methodEntry.return)
+                    return methodEntry.return;
+            }
+        }
+        // Fall back to builtin method return-type maps (string/array prototype methods)
+        const receiverType = resolveTypeOf(relevant, openIdx - 3, context);
+        if (receiverType === "string")
+            return STRING_METHOD_RETURNS[methodToken.value] ?? "unknown";
+        if (receiverType === "array")
+            return ARRAY_METHOD_RETURNS[methodToken.value] ?? "unknown";
+        if (receiverType === "date")
+            return DATE_METHOD_RETURNS[methodToken.value] ?? "unknown";
+        return "unknown";
+    }
+    if (token.type === "Identifier" || token.type === "QuotedIdentifier") {
+        const path = buildPathFromTokens(relevant, i);
+        if (!path)
+            return "unknown";
+        const entry = resolveEntry(context, path);
+        const kind = entry?.type ?? "unknown";
+        if (kind === "string" || kind === "number" || kind === "array" || kind === "object")
+            return kind;
+        return "unknown";
+    }
+    return "unknown";
+}
+function analyzeTokens(tokens, cursorPosition, context) {
     const relevant = tokens.filter((t) => t.end <= cursorPosition && t.type !== "EOF" && t.type !== "Whitespace");
     if (relevant.length === 0)
         return { kind: "top-level" };
     let i = relevant.length - 1;
-    // Skip the partial word the user is currently typing
-    if (relevant[i].type === "Identifier")
+    // Skip the partial word the user is currently typing (only if cursor is at its end)
+    if (relevant[i].type === "Identifier" && relevant[i].end === cursorPosition)
         i--;
     if (i < 0)
         return { kind: "top-level" };
-    // If the token before the word isn't a dot, we're at the top level
-    if (!isDot(relevant[i]))
+    // If the token before the word isn't a dot, check if it's a complete value
+    if (!isDot(relevant[i])) {
+        if (isCompleteValue(relevant[i]))
+            return { kind: "after-value" };
         return { kind: "top-level" };
+    }
     // Step over the dot
     i--;
     if (i < 0)
@@ -81,79 +303,87 @@ function analyzeTokens(tokens, cursorPosition) {
     // [1,2,3]. → array methods
     if (isClosingBracket(beforeDot))
         return { kind: "array-literal" };
-    // identifier chain: walk back through alternating Identifier / dot tokens
-    if (beforeDot.type === "Identifier") {
-        const path = [beforeDot.value];
+    // d"2023-02-11". → date methods
+    if (beforeDot.type === "DateLiteral")
+        return { kind: "date-value" };
+    // fn(). → resolve call return type recursively
+    if (beforeDot.type === "Punctuation" && beforeDot.value === ")") {
+        const resultType = resolveTypeOf(relevant, i, context);
+        if (resultType === "string")
+            return { kind: "string-literal" };
+        if (resultType === "number")
+            return { kind: "number-value" };
+        if (resultType === "array")
+            return { kind: "array-literal" };
+        if (resultType === "date")
+            return { kind: "date-value" };
+        return { kind: "none" };
+    }
+    // identifier chain: walk back through alternating Identifier / QuotedIdentifier / dot tokens
+    if (beforeDot.type === "Identifier" || beforeDot.type === "QuotedIdentifier") {
+        const tokenName = (t) => (t.type === "QuotedIdentifier" ? t.value.slice(2, -1) : t.value);
+        const path = [tokenName(beforeDot)];
         i--;
         while (i >= 1) {
             if (!isDot(relevant[i]))
                 break;
             i--;
-            if (relevant[i].type !== "Identifier")
+            if (relevant[i].type !== "Identifier" && relevant[i].type !== "QuotedIdentifier")
                 break;
-            path.unshift(relevant[i].value);
+            path.unshift(tokenName(relevant[i]));
             i--;
         }
         return { kind: "context-path", path };
     }
     return { kind: "none" };
 }
-function resolveValue(context, path) {
-    let current = context;
-    for (const key of path) {
-        if (current == null || typeof current !== "object")
-            return undefined;
-        current = current[key];
-    }
-    return current;
-}
-function kindOf(value) {
-    if (typeof value === "function")
-        return "function";
-    if (Array.isArray(value))
-        return "array";
-    if (typeof value === "string")
-        return "string";
-    if (typeof value === "number")
-        return "number";
-    if (typeof value === "boolean")
-        return "boolean";
-    if (typeof value === "object" && value !== null)
-        return "object";
-    return "unknown";
-}
+const VALID_IDENTIFIER = /^[a-zA-Z_$][a-zA-Z0-9_$]*$/;
 function objectCompletions(obj) {
     return Object.entries(obj).map(([key, val]) => ({
         label: key,
-        kind: kindOf(val),
+        kind: isContextEntry(val) ? val.type : kindOf(val),
         id: key,
+        value: VALID_IDENTIFIER.test(key) ? undefined : `@"${key}"`,
     }));
 }
 function builtinCompletions(methods) {
-    return methods.map((m) => ({ label: m.label, kind: m.kind, id: m.label }));
+    return methods.map((m) => ({ label: m.label, kind: m.kind, id: m.label, value: m.value }));
+}
+function binaryOperatorCompletions() {
+    return builtinCompletions(BINARY_OPERATORS);
 }
 export function createCompletionProvider(context) {
     return function completionProvider(tokens, cursorPosition) {
-        const analysis = analyzeTokens(tokens, cursorPosition);
+        const analysis = analyzeTokens(tokens, cursorPosition, context);
         switch (analysis.kind) {
             case "top-level":
                 return objectCompletions(context);
             case "string-literal":
                 return builtinCompletions(STRING_METHODS);
+            case "number-value":
+                return builtinCompletions(NUMBER_METHODS);
+            case "date-value":
+                return builtinCompletions(DATE_METHODS);
             case "array-literal":
                 return builtinCompletions(ARRAY_METHODS);
             case "context-path": {
-                const value = resolveValue(context, analysis.path);
-                if (value == null)
+                const entry = resolveEntry(context, analysis.path);
+                if (!entry)
                     return [];
-                if (typeof value === "string")
+                if (entry.type === "string")
                     return builtinCompletions(STRING_METHODS);
-                if (Array.isArray(value))
+                if (entry.type === "number")
+                    return builtinCompletions(NUMBER_METHODS);
+                if (entry.type === "array")
                     return builtinCompletions(ARRAY_METHODS);
-                if (typeof value === "object")
-                    return objectCompletions(value);
+                if (entry.type === "date")
+                    return builtinCompletions(DATE_METHODS);
+                if (entry.type === "object" && entry.value != null && typeof entry.value === "object")
+                    return objectCompletions(entry.value);
                 return [];
             }
+            case "after-value":
+                return binaryOperatorCompletions();
             case "none":
                 return [];
         }

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

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

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

@@ -1,17 +1,33 @@
-import { useState, useCallback } from "react";
+import { useRef, useCallback } from "react";
 import { measureCursorPosition } from "./measure-cursor-at-pointer.js";
 export function useCursorPosition(textareaRef) {
-    const [coordinates, setCoordinates] = useState({
-        top: 0,
-        left: 0,
-        lineHeight: 22,
+    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;
-        const coords = measureCursorPosition(textarea, textarea.selectionStart);
-        setCoordinates(coords);
+        cursorIndexRef.current = textarea.selectionStart;
     }, [textareaRef]);
-    return { coordinates, update };
+    return { virtualElement: virtualElement.current, update };
 }

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

@@ -17,7 +17,7 @@ const sharedFontStyle = {
     lineHeight: "inherit",
     padding: "0",
 };
-const triggerCharacters = ["."];
+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.
@@ -27,11 +27,6 @@ export function ExpressionEditor({ value, onChange: onValueChange, tokenize, hig
     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) => {
@@ -40,6 +35,18 @@ export function ExpressionEditor({ value, onChange: onValueChange, tokenize, hig
         },
         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,
@@ -80,7 +87,20 @@ export function ExpressionEditor({ value, onChange: onValueChange, tokenize, hig
         deps.onValueChange(newValue);
         const word = getWordAtCursor(newValue, selectionStart);
         if (deps.isOpen) {
-            deps.updateFilter(word.word);
+            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);
     }, []);
@@ -107,8 +127,8 @@ export function ExpressionEditor({ value, onChange: onValueChange, tokenize, hig
         boxSizing: "border-box",
     };
     const popoverValue = useMemo(() => {
-        return { isOpen: completions.isOpen, coordinates: cursorPosition.coordinates };
-    }, [completions.isOpen, cursorPosition.coordinates]);
+        return { isOpen: completions.isOpen, referenceElement: cursorPosition.virtualElement };
+    }, [completions.isOpen, cursorPosition.virtualElement]);
     const listValue = useMemo(() => {
         return {
             items: completions.filteredItems,

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

@@ -15,3 +15,4 @@ export declare const ExpressionEditor: {
 };
 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/intellisence/completion-context.d.ts

@@ -1,7 +1,8 @@
-import type { CompletionItem, CursorCoordinates } from "../types";
+import type { VirtualElement } from "../../external/floating-ui.js";
+import type { CompletionItem } from "../types";
 interface ContextPopover {
     readonly isOpen: boolean;
-    readonly coordinates: CursorCoordinates;
+    readonly referenceElement: VirtualElement | null;
 }
 export declare const CompletionPopoverProvider: import("react").Provider<ContextPopover>;
 export declare const useCompletionPopover: () => ContextPopover;

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

@@ -2,8 +2,9 @@ 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, coordinates } = useCompletionPopover();
+    const { isOpen, referenceElement } = useCompletionPopover();
     const popoverRef = useRef(null);
     useEffect(() => {
         const el = popoverRef.current;
@@ -18,11 +19,27 @@ function CompletionPopoverImpl({ children, ...props }, ref) {
                 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: coordinates.top + coordinates.lineHeight,
-            left: coordinates.left,
+            top: 0,
+            left: 0,
             margin: 0,
             inset: "unset",
         }, children: isOpen ? children : null }));

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

@@ -3,12 +3,14 @@ const tokenToSyntaxColor = {
     Number: "number",
     String: "string",
     TemplateLiteral: "string",
+    DateLiteral: "date",
     Spread: "operator",
     Punctuation: "operator",
     Pipe: "operator",
     Operator: "operator",
     Arrow: "operator",
     Identifier: "identifier",
+    QuotedIdentifier: "identifier",
     ExpressionError: "error",
     Unparsed: "punctuation",
 };

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

@@ -4,6 +4,7 @@ export type CompletionItem = {
     label: string;
     kind: string;
     id: string;
+    value?: string;
 };
 export type KeybindingConfig = {
     accept?: string[];

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

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

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

@@ -1,16 +1,37 @@
 import { useCallback } from "react";
 import { replaceWordAtCursor } from "./replace-word-at-cursor.js";
-export function useKeyboardNavigation({ onValueChange, onDismiss, textareaRef }) {
+export function useKeyboardNavigation({ onValueChange, onAccepted, textareaRef }) {
     const acceptCompletion = useCallback((item, word) => {
         const textarea = textareaRef.current;
         if (!textarea)
             return;
-        const { value, cursorPosition } = replaceWordAtCursor(textarea.value, word, item.label);
+        // Extend the replacement range to consume any @"..." / @'...' prefix the user already typed.
+        // The partial word may contain spaces (e.g. @"Age Gr → word is "Gr"), so scan backwards
+        // through word chars and spaces to find the opening @" / @'.
+        let adjustedWord = word;
+        const text = textarea.value;
+        let scan = word.start - 1;
+        // skip back over any chars that could be part of a quoted identifier value (spaces included)
+        while (scan > 0 && text[scan] !== '"' && text[scan] !== "'")
+            scan--;
+        if (scan >= 1 && (text[scan] === '"' || text[scan] === "'") && text[scan - 1] === "@") {
+            adjustedWord = { ...word, start: scan - 1 };
+        }
+        const charBeforeWord = adjustedWord.start > 0 ? text[adjustedWord.start - 1] : "";
+        const noSpaceBefore = charBeforeWord === "" ||
+            charBeforeWord === " " ||
+            charBeforeWord === "." ||
+            charBeforeWord === "(" ||
+            charBeforeWord === "[" ||
+            charBeforeWord === "{";
+        const rawInsertText = item.value ?? item.label;
+        const insertText = noSpaceBefore ? rawInsertText : " " + rawInsertText;
+        const { value, cursorPosition } = replaceWordAtCursor(text, adjustedWord, insertText);
         textarea.value = value;
         textarea.selectionStart = cursorPosition;
         textarea.selectionEnd = cursorPosition;
         onValueChange(value);
-        onDismiss();
-    }, [onValueChange, onDismiss, textareaRef]);
+        onAccepted(value, cursorPosition);
+    }, [onValueChange, onAccepted, textareaRef]);
     return { acceptCompletion };
 }

package/dist/expressions/index.d.ts

@@ -1,5 +1,7 @@
 export { Evaluator } from "./evaluator/evaluate.js";
 export type { Plugin, EvalFn } from "./plugin.js";
 export type { Token } from "./lexer/types.js";
-export { accessPlugin, arrowsPlugin, booleansPlugin, collectionsPlugin, comparisonPlugin, logicalPlugin, membershipPlugin, pipePlugin, standardPlugins, stringsPlugin, ternaryPlugin, } from "./plugins/standard.js";
+export { accessPlugin, arrowsPlugin, booleansPlugin, collectionsPlugin, comparisonPlugin, logicalPlugin, membershipPlugin, pipePlugin, standardPlugins, stringsPlugin, ternaryPlugin, quotedIdentifierPlugin, } from "./plugins/standard.js";
 export { createResolvedIdentifierPlugin } from "./plugins/resolved-identifier.js";
+export { dateLiteralPlugin } from "./plugins/date-literal.js";
+export { createDateIdentifierPlugin } from "./plugins/date-identifier.js";

package/dist/expressions/index.js

@@ -1,3 +1,5 @@
 export { Evaluator } from "./evaluator/evaluate.js";
-export { accessPlugin, arrowsPlugin, booleansPlugin, collectionsPlugin, comparisonPlugin, logicalPlugin, membershipPlugin, pipePlugin, standardPlugins, stringsPlugin, ternaryPlugin, } from "./plugins/standard.js";
+export { accessPlugin, arrowsPlugin, booleansPlugin, collectionsPlugin, comparisonPlugin, logicalPlugin, membershipPlugin, pipePlugin, standardPlugins, stringsPlugin, ternaryPlugin, quotedIdentifierPlugin, } from "./plugins/standard.js";
 export { createResolvedIdentifierPlugin } from "./plugins/resolved-identifier.js";
+export { dateLiteralPlugin } from "./plugins/date-literal.js";
+export { createDateIdentifierPlugin } from "./plugins/date-identifier.js";

package/dist/expressions/parser/types.d.ts

@@ -93,5 +93,9 @@ export interface ArrowFunctionExpression extends BaseNode {
     params: string[];
     body: ASTNode;
 }
-export type ASTNode = NumberLiteral | StringLiteral | BooleanLiteral | NullLiteral | UndefinedLiteral | Identifier | BinaryExpression | UnaryExpression | ConditionalExpression | MemberExpression | OptionalMemberExpression | ArrayLiteral | ObjectLiteral | CallExpression | PipeExpression | TemplateLiteral | SpreadElement | ArrowFunctionExpression;
+export interface DateLiteralNode extends BaseNode {
+    type: "DateLiteralNode";
+    value: string;
+}
+export type ASTNode = NumberLiteral | StringLiteral | BooleanLiteral | NullLiteral | UndefinedLiteral | Identifier | BinaryExpression | UnaryExpression | ConditionalExpression | MemberExpression | OptionalMemberExpression | ArrayLiteral | ObjectLiteral | CallExpression | PipeExpression | TemplateLiteral | SpreadElement | ArrowFunctionExpression | DateLiteralNode;
 export {};

package/dist/expressions/plugins/date-identifier.d.ts

@@ -0,0 +1,4 @@
+import type { Plugin } from "../plugin.js";
+export declare function createDateIdentifierPlugin(options: {
+    identifiers: string[];
+}): Plugin;

package/dist/expressions/plugins/date-identifier.js

@@ -0,0 +1,29 @@
+function toDate(value) {
+    if (value instanceof Date)
+        return value;
+    if (typeof value === "string" || typeof value === "number") {
+        const d = new Date(value);
+        return isNaN(d.getTime()) ? null : d;
+    }
+    return null;
+}
+export function createDateIdentifierPlugin(options) {
+    const identifierSet = new Set(options.identifiers);
+    return {
+        name: "date-identifier",
+        evaluate: (node, context) => {
+            if (node.type !== "Identifier")
+                return null;
+            if (!identifierSet.has(node.name))
+                return null;
+            const raw = context[node.name];
+            const date = toDate(raw);
+            if (date === null) {
+                if (raw === undefined || raw === null)
+                    return { value: null };
+                throw new Error(`Context value for "${node.name}" cannot be coerced to a Date`);
+            }
+            return { value: date };
+        },
+    };
+}

package/dist/expressions/plugins/date-literal.d.ts

@@ -0,0 +1,2 @@
+import type { Plugin } from "../plugin.js";
+export declare const dateLiteralPlugin: Plugin;

package/dist/expressions/plugins/date-literal.js

@@ -0,0 +1,71 @@
+import { scanString } from "../lexer/tokenize/scan-string.js";
+import { current, advance } from "../parser/parser-context.js";
+import { ExpressionError } from "../errors/expression-error.js";
+const DATE_OPS = new Set(["==", "!=", "<", ">", "<=", ">="]);
+export const dateLiteralPlugin = {
+    name: "date-literal",
+    scan(source, pos) {
+        if (source[pos] !== "d")
+            return null;
+        const next = source[pos + 1];
+        if (next !== '"' && next !== "'")
+            return null;
+        try {
+            const r = scanString(source, pos + 1);
+            // Store the full source text (d"2023-02-11") so the editor overlay renders it correctly.
+            return { type: "DateLiteral", value: source.slice(pos, r.end), end: r.end };
+        }
+        catch (e) {
+            if (e instanceof ExpressionError) {
+                throw new ExpressionError(e.rawMessage, { source, start: pos, end: e.end });
+            }
+            throw e;
+        }
+    },
+    parsePrefix(ctx) {
+        const tok = current(ctx);
+        if (tok.type !== "DateLiteral")
+            return null;
+        advance(ctx);
+        // tok.value is the full d"2023-02-11" — strip the d" prefix and closing quote for the AST.
+        const dateStr = tok.value.slice(2, -1);
+        return { type: "DateLiteralNode", value: dateStr, start: tok.start, end: tok.end };
+    },
+    evaluate(node, context, evalFn) {
+        if (node.type === "DateLiteralNode") {
+            const d = new Date(node.value);
+            if (isNaN(d.getTime())) {
+                throw new Error(`Invalid date literal: "${node.value}"`);
+            }
+            return { value: d };
+        }
+        // Intercept comparison operators when at least one operand is a Date.
+        // This must run before comparisonPlugin (place dateLiteralPlugin first in the array).
+        if (node.type === "BinaryExpression") {
+            const op = node.operator;
+            if (!DATE_OPS.has(op))
+                return null;
+            const left = evalFn(node.left, context);
+            const right = evalFn(node.right, context);
+            if (!(left instanceof Date) && !(right instanceof Date))
+                return null;
+            const lt = left instanceof Date ? left.getTime() : Number(left);
+            const rt = right instanceof Date ? right.getTime() : Number(right);
+            switch (op) {
+                case "==":
+                    return { value: lt === rt };
+                case "!=":
+                    return { value: lt !== rt };
+                case "<":
+                    return { value: lt < rt };
+                case ">":
+                    return { value: lt > rt };
+                case "<=":
+                    return { value: lt <= rt };
+                case ">=":
+                    return { value: lt >= rt };
+            }
+        }
+        return null;
+    },
+};

package/dist/expressions/plugins/quoted-identifier.d.ts

@@ -0,0 +1,2 @@
+import type { Plugin } from "../plugin.js";
+export declare const quotedIdentifierPlugin: Plugin;

package/dist/expressions/plugins/quoted-identifier.js

@@ -0,0 +1,35 @@
+import { scanString } from "../lexer/tokenize/scan-string.js";
+import { current, advance } from "../parser/parser-context.js";
+import { ExpressionError } from "../errors/expression-error.js";
+export const quotedIdentifierPlugin = {
+    name: "quoted-identifier",
+    scan(source, pos) {
+        if (source[pos] !== "@")
+            return null;
+        const next = source[pos + 1];
+        if (next !== '"' && next !== "'")
+            return null;
+        try {
+            const r = scanString(source, pos + 1);
+            // Store the full source text (@"Age Group") so the token overlay renders correctly.
+            return { type: "QuotedIdentifier", value: source.slice(pos, r.end), end: r.end };
+        }
+        catch (e) {
+            // Rethrow with start=pos so the ExpressionError token covers the leading @ character.
+            // Without this, scanString reports start at the opening quote (pos+1), leaving @ uncovered.
+            if (e instanceof ExpressionError) {
+                throw new ExpressionError(e.rawMessage, { source, start: pos, end: e.end });
+            }
+            throw e;
+        }
+    },
+    parsePrefix(ctx) {
+        const tok = current(ctx);
+        if (tok.type !== "QuotedIdentifier")
+            return null;
+        advance(ctx);
+        // Strip the leading @" (or @') and the trailing quote to get the bare identifier name.
+        const name = tok.value.slice(2, -1);
+        return { type: "Identifier", name, start: tok.start, end: tok.end };
+    },
+};

package/dist/expressions/plugins/standard.d.ts

@@ -9,5 +9,7 @@ import { membershipPlugin } from "./membership.js";
 import { accessPlugin } from "./access.js";
 import { arrowsPlugin } from "./arrows.js";
 import { collectionsPlugin } from "./collections.js";
+import { quotedIdentifierPlugin } from "./quoted-identifier.js";
+import { dateLiteralPlugin } from "./date-literal.js";
 export declare const standardPlugins: Plugin[];
-export { stringsPlugin, booleansPlugin, comparisonPlugin, logicalPlugin, ternaryPlugin, pipePlugin, membershipPlugin, accessPlugin, arrowsPlugin, collectionsPlugin, };
+export { dateLiteralPlugin, stringsPlugin, booleansPlugin, comparisonPlugin, logicalPlugin, ternaryPlugin, pipePlugin, membershipPlugin, accessPlugin, arrowsPlugin, collectionsPlugin, quotedIdentifierPlugin, };

package/dist/expressions/plugins/standard.js

@@ -8,7 +8,10 @@ import { membershipPlugin } from "./membership.js";
 import { accessPlugin } from "./access.js";
 import { arrowsPlugin } from "./arrows.js";
 import { collectionsPlugin } from "./collections.js";
+import { quotedIdentifierPlugin } from "./quoted-identifier.js";
+import { dateLiteralPlugin } from "./date-literal.js";
 export const standardPlugins = [
+    dateLiteralPlugin,
     arrowsPlugin,
     collectionsPlugin,
     stringsPlugin,
@@ -19,5 +22,6 @@ export const standardPlugins = [
     ternaryPlugin,
     pipePlugin,
     accessPlugin,
+    quotedIdentifierPlugin,
 ];
-export { stringsPlugin, booleansPlugin, comparisonPlugin, logicalPlugin, ternaryPlugin, pipePlugin, membershipPlugin, accessPlugin, arrowsPlugin, collectionsPlugin, };
+export { dateLiteralPlugin, stringsPlugin, booleansPlugin, comparisonPlugin, logicalPlugin, ternaryPlugin, pipePlugin, membershipPlugin, accessPlugin, arrowsPlugin, collectionsPlugin, quotedIdentifierPlugin, };

package/package.json

@@ -1,12 +1,13 @@
 {
   "name": "@1771technologies/lytenyte-pro",
   "description": "Blazingly fast headless React data grid with 100s of features.",
-  "version": "2.0.4-dev.4",
+  "version": "2.1.0",
   "type": "module",
   "license": "COMMERCIAL",
   "files": [
     "dist",
     "css",
+    "skills",
     "LICENSE",
     "SECURITY.md",
     "README.md"
@@ -85,12 +86,12 @@
     "access": "public"
   },
   "dependencies": {
-    "@1771technologies/lytenyte-shared": "2.0.4-dev.4",
-    "@1771technologies/lytenyte-core": "2.0.4-dev.4",
-    "@1771technologies/lytenyte-design": "2.0.4-dev.4"
+    "@1771technologies/lytenyte-core": "2.1.0",
+    "@1771technologies/lytenyte-shared": "2.1.0",
+    "@1771technologies/lytenyte-design": "2.1.0"
   },
   "devDependencies": {
-    "@1771technologies/grid-sample-data": "2.0.4-dev.4"
+    "@1771technologies/grid-sample-data": "2.1.0"
   },
   "peerDependencies": {
     "react": "18.0.0 || ^19.0.0",

package/dist/components/expressions-editor/(expressions)/expression.play.d.ts

@@ -1,4 +0,0 @@
-import "../../../../css/light-dark.css";
-import "../../../../css/components/expression-editor.css";
-import "./expression.css";
-export default function App(): import("react/jsx-runtime").JSX.Element;

package/dist/components/expressions-editor/(expressions)/expression.play.js

@@ -1,69 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState, useCallback, useMemo } from "react";
-import { createCompletionProvider, ExpressionEditor } from "../index.js";
-import { Evaluator, standardPlugins } from "../../../expressions/index.js";
-import "../../../../css/light-dark.css";
-import "../../../../css/components/expression-editor.css";
-import "./expression.css";
-import { CompletionPopover } from "../intellisence/completion-popover.js";
-import { CompletionList } from "../intellisence/completion-list.js";
-import { CompletionListItem } from "../intellisence/completion-item.js";
-const CONTEXT = {
-    user: {
-        name: "Alice",
-        age: 30,
-        email: "alice@example.com",
-        address: {
-            city: "Portland",
-            state: "OR",
-            zip: "97201",
-        },
-    },
-    order: {
-        total: 99.99,
-        status: "shipped",
-        items: 3,
-    },
-    Math: {
-        PI: 3.14159,
-        abs: "function",
-        max: "function",
-        min: "function",
-        round: "function",
-    },
-};
-const EXAMPLES = [
-    {
-        label: "Property access",
-        value: "user.address.city",
-    },
-    {
-        label: "Math",
-        value: "Math.round(order.total * 1.08)",
-    },
-    {
-        label: "Conditional",
-        value: "if order.total > 100 and user.age >= 18",
-    },
-    {
-        label: "Object literal",
-        value: "{name: user.name, total: order.total, tax: order.total * 0.08}",
-    },
-    {
-        label: "Error token",
-        value: "user.name or undefined",
-    },
-];
-export default function App() {
-    const [value, setValue] = useState("user.name");
-    const evaluator = useMemo(() => new Evaluator(standardPlugins), []);
-    const tokenize = useCallback((input) => evaluator.tokensSafe(input, true), [evaluator]);
-    const provider = useMemo(() => {
-        return createCompletionProvider(CONTEXT);
-    }, []);
-    return (_jsxs("div", { className: "demo-container", children: [_jsx("label", { className: "demo-label", children: "Single-line" }), _jsx(ExpressionEditor.Root, { value: value, onChange: setValue, tokenize: tokenize, completionProvider: provider, placeholder: "Type an expression...", children: _jsx(CompletionPopover, { children: _jsx(CompletionList, { children: ({ items }) => {
-                            return items.map((item, index) => {
-                                return (_jsxs(CompletionListItem, { item: item, index: index, className: "completion-item", children: [_jsx("span", { className: "completion-kind", children: item.kind }), _jsx("span", { className: "completion-label", children: item.label })] }, item.id));
-                            });
-                        } }) }) }), _jsx("div", { className: "examples-row", children: EXAMPLES.map((ex) => (_jsx("button", { className: `example-btn${value === ex.value ? "active" : ""}`, onClick: () => setValue(ex.value), children: ex.label }, ex.label))) })] }));
-}