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

package/css/components/expression-editor.css

@@ -0,0 +1,105 @@
+@layer ln-grid {
+  [data-ln-expression-editor] {
+    --ln-expr-number: light-dark(#b45309, #fab387);
+    --ln-expr-string: light-dark(#15803d, #a6e3a1);
+    --ln-expr-keyword: light-dark(#7c3aed, #cba6f7);
+    --ln-expr-identifier: light-dark(#0369a1, #89b4fa);
+    --ln-expr-operator: light-dark(#be185d, #f38ba8);
+    --ln-expr-punctuation: light-dark(#6b7280, #6c7086);
+    --ln-expr-error: light-dark(#dc2626, #f38ba8);
+  }
+
+  /* These must be identical otherwise the highlight will not match the input. */
+  [data-ln-expression-editor] {
+    font-family:
+      ui-monospace, "Cascadia Code", "Segoe UI Mono", "Liberation Mono", Menlo, Monaco, Consolas, monospace;
+    font-size: 16px;
+    white-space: nowrap;
+    word-break: normal;
+    overflow-wrap: normal;
+    tab-size: 2;
+    box-sizing: border-box;
+  }
+
+  [data-ln-expression-input] {
+    caret-color: var(--ln-text);
+    box-sizing: border-box;
+
+    transition-property: border-color;
+    transition-duration: var(--ln-transition-duration);
+    transition-timing-function: var(--ln-transition-fn);
+  }
+
+  /* Completion popover */
+  @keyframes ln-expr-popover-in {
+    from {
+      opacity: 0;
+      translate: 0 -4px;
+    }
+    to {
+      opacity: 1;
+      translate: 0 0;
+    }
+  }
+
+  [data-ln-expression-popover] {
+    background-color: var(--ln-bg-popover);
+    border: 1px solid var(--ln-border-popover);
+    border-radius: var(--ln-radius-md);
+    box-shadow: var(--ln-shadow-400);
+    padding: var(--ln-space-05);
+    min-width: 200px;
+    max-width: 360px;
+    box-sizing: border-box;
+    overflow: hidden;
+
+    &:popover-open {
+      animation: ln-expr-popover-in var(--ln-transition-duration) var(--ln-transition-fn) both;
+    }
+  }
+
+  [data-ln-expression-completion-list] {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    max-height: 220px;
+    overflow-y: auto;
+    overscroll-behavior: contain;
+
+    /* Thin scrollbar */
+    scrollbar-width: thin;
+    scrollbar-color: var(--ln-border-strong) transparent;
+  }
+
+  [data-ln-expression-completion-item] {
+    display: flex;
+    align-items: center;
+    gap: var(--ln-space-10);
+    padding-block: var(--ln-space-05);
+    padding-inline: var(--ln-space-10);
+    border-radius: var(--ln-radius);
+    font-family:
+      ui-monospace, "Cascadia Code", "Segoe UI Mono", "Liberation Mono", Menlo, Monaco, Consolas, monospace;
+    font-size: var(--ln-font-sm);
+    color: var(--ln-text);
+    cursor: pointer;
+    user-select: none;
+
+    transition-property: background-color, color;
+    transition-duration: var(--ln-transition-duration);
+    transition-timing-function: var(--ln-transition-fn);
+
+    &:hover {
+      background-color: var(--ln-bg-row-hover);
+    }
+
+    &[data-ln-selected] {
+      background-color: var(--ln-primary-10);
+      color: var(--ln-text-dark);
+
+      &:hover {
+        background-color: var(--ln-primary-10);
+      }
+    }
+  }
+}

package/dist/components/column-manager/column-manager.d.ts

@@ -9,5 +9,10 @@ export interface ColumnManagerProps<Spec extends GridSpec = GridSpec> {
         columns: Column<Spec>[];
         row: RowNode<Spec["data"]>;
     }) => ReactNode;
+    /**
+     * @alpha
+     * Use with caution.
+     */
+    readonly getPillManagerTag?: (column: Column<Spec>) => Record<string, string>;
 }
-export declare function ColumnManager<Spec extends GridSpec = GridSpec>({ columns: provided, base, onColumnsChange, endElement, }: ColumnManagerProps<Spec>): import("react/jsx-runtime").JSX.Element;
+export declare function ColumnManager<Spec extends GridSpec = GridSpec>({ columns: provided, base, onColumnsChange, endElement, getPillManagerTag, }: ColumnManagerProps<Spec>): import("react/jsx-runtime").JSX.Element;

package/dist/components/column-manager/column-manager.js

@@ -3,7 +3,7 @@ import { useMemo } from "react";
 import { TreeView } from "../tree-view/index.js";
 import { Checkbox } from "../checkbox/checkbox.js";
 import { computePathMatrix } from "@1771technologies/lytenyte-shared";
-export function ColumnManager({ columns: provided, base, onColumnsChange, endElement, }) {
+export function ColumnManager({ columns: provided, base, onColumnsChange, endElement, getPillManagerTag, }) {
     const nonAdjacentSplit = useMemo(() => {
         const paths = computePathMatrix(provided);
         const adjusted = [];
@@ -24,7 +24,28 @@ export function ColumnManager({ columns: provided, base, onColumnsChange, endEle
     const items = useMemo(() => {
         return nonAdjacentSplit.map((x) => ({ id: x.id, path: x.groupPath ?? [], name: x.name, column: x }));
     }, [nonAdjacentSplit]);
-    return (_jsx(TreeView, { items: items, rowSelectionEnabled: false, draggable: true, rowHeight: 30, rowSelectAllShow: false, defaultExpansion: true, onItemsReordered: (x) => {
+    const getDragItems = useMemo(() => {
+        if (!getPillManagerTag)
+            return undefined;
+        return (row, leafs) => {
+            if (leafs.length || row.kind !== "leaf")
+                return {};
+            const column = row.data.column;
+            const mapTags = Object.entries(getPillManagerTag(column));
+            if (!mapTags.length)
+                return {};
+            return {
+                pill: {
+                    kind: "site",
+                    data: {
+                        id: "__external__",
+                        item: Object.fromEntries(mapTags),
+                    },
+                },
+            };
+        };
+    }, [getPillManagerTag]);
+    return (_jsx(TreeView, { items: items, rowSelectionEnabled: false, draggable: true, rowHeight: 30, rowSelectAllShow: false, getDragTags: getDragItems, defaultExpansion: true, onItemsReordered: (x) => {
             const columns = x.map((x) => provided.find((p) => p.id === x.column.id));
             onColumnsChange(columns);
         }, children: ({ row, leafs, toggle, dragProps, isOver, isBefore }) => {

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

@@ -0,0 +1,4 @@
+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

@@ -0,0 +1,69 @@
+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))) })] }));
+}

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

@@ -0,0 +1,3 @@
+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[];

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

@@ -0,0 +1,161 @@
+const STRING_METHODS = [
+    { label: "at", kind: "function" },
+    { label: "charAt", kind: "function" },
+    { label: "charCodeAt", kind: "function" },
+    { label: "endsWith", kind: "function" },
+    { label: "includes", kind: "function" },
+    { label: "indexOf", kind: "function" },
+    { label: "lastIndexOf", kind: "function" },
+    { label: "length", kind: "number" },
+    { label: "match", kind: "function" },
+    { label: "padEnd", kind: "function" },
+    { label: "padStart", kind: "function" },
+    { label: "repeat", kind: "function" },
+    { label: "replace", kind: "function" },
+    { label: "replaceAll", kind: "function" },
+    { label: "slice", kind: "function" },
+    { label: "split", kind: "function" },
+    { label: "startsWith", kind: "function" },
+    { label: "substring", kind: "function" },
+    { label: "toLowerCase", kind: "function" },
+    { label: "toUpperCase", kind: "function" },
+    { label: "trim", kind: "function" },
+    { label: "trimEnd", kind: "function" },
+    { label: "trimStart", kind: "function" },
+];
+const ARRAY_METHODS = [
+    { label: "at", kind: "function" },
+    { label: "concat", kind: "function" },
+    { label: "entries", kind: "function" },
+    { label: "every", kind: "function" },
+    { label: "filter", kind: "function" },
+    { label: "find", kind: "function" },
+    { label: "findIndex", kind: "function" },
+    { label: "flat", kind: "function" },
+    { label: "flatMap", kind: "function" },
+    { label: "forEach", kind: "function" },
+    { label: "includes", kind: "function" },
+    { label: "indexOf", kind: "function" },
+    { label: "join", kind: "function" },
+    { label: "keys", kind: "function" },
+    { label: "length", kind: "number" },
+    { label: "map", kind: "function" },
+    { label: "reduce", kind: "function" },
+    { label: "reduceRight", kind: "function" },
+    { label: "reverse", kind: "function" },
+    { label: "slice", kind: "function" },
+    { label: "some", kind: "function" },
+    { label: "sort", kind: "function" },
+    { label: "values", kind: "function" },
+];
+function isDot(token) {
+    return (token.type === "Punctuation" && token.value === ".") || token.type === "OptionalChain";
+}
+function isClosingBracket(token) {
+    return token.type === "Punctuation" && token.value === "]";
+}
+function isStringLiteral(token) {
+    return token.type === "String" || token.type === "TemplateLiteral";
+}
+function analyzeTokens(tokens, cursorPosition) {
+    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")
+        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]))
+        return { kind: "top-level" };
+    // Step over the dot
+    i--;
+    if (i < 0)
+        return { kind: "none" };
+    const beforeDot = relevant[i];
+    // "hello". or `hello`. → string methods
+    if (isStringLiteral(beforeDot))
+        return { kind: "string-literal" };
+    // [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];
+        i--;
+        while (i >= 1) {
+            if (!isDot(relevant[i]))
+                break;
+            i--;
+            if (relevant[i].type !== "Identifier")
+                break;
+            path.unshift(relevant[i].value);
+            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";
+}
+function objectCompletions(obj) {
+    return Object.entries(obj).map(([key, val]) => ({
+        label: key,
+        kind: kindOf(val),
+        id: key,
+    }));
+}
+function builtinCompletions(methods) {
+    return methods.map((m) => ({ label: m.label, kind: m.kind, id: m.label }));
+}
+export function createCompletionProvider(context) {
+    return function completionProvider(tokens, cursorPosition) {
+        const analysis = analyzeTokens(tokens, cursorPosition);
+        switch (analysis.kind) {
+            case "top-level":
+                return objectCompletions(context);
+            case "string-literal":
+                return builtinCompletions(STRING_METHODS);
+            case "array-literal":
+                return builtinCompletions(ARRAY_METHODS);
+            case "context-path": {
+                const value = resolveValue(context, analysis.path);
+                if (value == null)
+                    return [];
+                if (typeof value === "string")
+                    return builtinCompletions(STRING_METHODS);
+                if (Array.isArray(value))
+                    return builtinCompletions(ARRAY_METHODS);
+                if (typeof value === "object")
+                    return objectCompletions(value);
+                return [];
+            }
+            case "none":
+                return [];
+        }
+    };
+}

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 { CursorCoordinates } from "../types";
+export declare function useCursorPosition(textareaRef: React.RefObject<HTMLTextAreaElement | null>): {
+    coordinates: CursorCoordinates;
+    update: () => void;
+};

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

@@ -0,0 +1,17 @@
+import { useState, 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 update = useCallback(() => {
+        const textarea = textareaRef.current;
+        if (!textarea)
+            return;
+        const coords = measureCursorPosition(textarea, textarea.selectionStart);
+        setCoordinates(coords);
+    }, [textareaRef]);
+    return { coordinates, 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;