@aquera/nile-visualization 2.9.2 → 2.9.3

package/dist/src/nile-filter-chart/utils/prompt.js

@@ -0,0 +1,676 @@
+import { html, nothing } from 'lit';
+const PUNCT_TOKENS = new Set(['(', ')', '[', ']', ',']);
+/**
+ * Splits the input into the tokens analyzePromptCtx reasons about:
+ *   - whitespace-delimited words (numbers, identifiers, operators)
+ *   - double / single-quoted strings (atomic so `"Birat Datta"` is one token)
+ *   - parens, brackets, commas (each is its own atomic token — needed so
+ *     `status in [` produces three tokens, not one fused word)
+ */
+function splitRespectingQuotes(input) {
+    const tokens = [];
+    const n = input.length;
+    let i = 0;
+    while (i < n) {
+        while (i < n && /\s/.test(input[i]))
+            i++;
+        if (i >= n)
+            break;
+        const c = input[i];
+        if (PUNCT_TOKENS.has(c)) {
+            tokens.push(c);
+            i++;
+            continue;
+        }
+        let j = i;
+        if (c === '"' || c === "'") {
+            const quote = c;
+            j = i + 1;
+            while (j < n && input[j] !== quote) {
+                if (input[j] === '\\' && j + 1 < n)
+                    j++;
+                j++;
+            }
+            if (j < n)
+                j++; // include closing quote
+        }
+        else {
+            while (j < n && !/\s/.test(input[j]) && !PUNCT_TOKENS.has(input[j]) && input[j] !== '"' && input[j] !== "'")
+                j++;
+        }
+        tokens.push(input.slice(i, j));
+        i = j;
+    }
+    return tokens;
+}
+/**
+ * Walks the input from the right and decides which suggestion bucket should
+ * show. Layered routing:
+ *
+ *   1. Inside an unmatched `[` → `value` (array element) scoped to the field
+ *      sitting before the `[` (so `status in [Op…` filters status values).
+ *   2. After `order by …` → sort-field on the empty slot, `sort-direction`
+ *      after a field, sort-field again after a comma.
+ *   3. Directly after `(` or `,` (when not inside an array) → `field`.
+ *      This is what makes function args (`contains(|`, `contains(name, |`)
+ *      and sub-expressions (`(|`) suggest attributes.
+ *   4. Otherwise the original four-state logic: field / operator / value /
+ *      connector — based on the last completed token.
+ */
+function analyzePromptCtx(input, fieldNames, operatorTokens, connectorTokens) {
+    const tokens = splitRespectingQuotes(input);
+    const lastToken = tokens[tokens.length - 1];
+    const hasTrailingSpace = input.length > 0 && /\s$/.test(input);
+    // Punctuation tokens are always "completed" — typing `[` ends the previous
+    // partial and starts the inside-array context, even with no space after.
+    const lastIsPunct = !!lastToken && PUNCT_TOKENS.has(lastToken);
+    const isCompleted = hasTrailingSpace || lastIsPunct;
+    const partial = isCompleted ? '' : (lastToken ?? '');
+    const completed = isCompleted ? tokens : tokens.slice(0, -1);
+    const before = isCompleted ? input : input.slice(0, input.length - partial.length);
+    const isField = (t) => !!t && fieldNames.has(t);
+    const isOp = (t) => !!t && operatorTokens.has(t);
+    const isConn = (t) => !!t && connectorTokens.has(t.toLowerCase());
+    // Bracket scan — find the deepest unmatched `[` and the attribute it
+    // belongs to (the nearest field token to its left, scanning across
+    // intermediate tokens like `in` / `not in`).
+    const bracketStack = [];
+    for (let i = 0; i < completed.length; i++) {
+        const t = completed[i];
+        if (t === '[') {
+            let attribute;
+            for (let j = i - 1; j >= 0; j--) {
+                if (isField(completed[j])) {
+                    attribute = completed[j];
+                    break;
+                }
+            }
+            bracketStack.push({ attribute });
+        }
+        else if (t === ']') {
+            bracketStack.pop();
+        }
+    }
+    const inArray = bracketStack.length > 0;
+    const arrayAttribute = inArray ? bracketStack[bracketStack.length - 1].attribute : undefined;
+    // Last `order by` pair — `order` then `by` (case-insensitive, adjacent).
+    let orderByEnd = -1;
+    for (let i = completed.length - 1; i >= 1; i--) {
+        if (completed[i].toLowerCase() === 'by' && completed[i - 1].toLowerCase() === 'order') {
+            orderByEnd = i;
+            break;
+        }
+    }
+    const inSortClause = orderByEnd >= 0;
+    const last1 = completed[completed.length - 1];
+    const last2 = completed[completed.length - 2];
+    // 1. Array-element wins over everything else — inside `[ … ]` the user
+    //    is typing array values regardless of what came before.
+    if (inArray) {
+        return { position: 'value', partial, before, attribute: arrayAttribute };
+    }
+    // 2. Sort sub-routing.
+    if (inSortClause) {
+        if (orderByEnd === completed.length - 1) {
+            return { position: 'field', partial, before }; // `order by |`
+        }
+        if (orderByEnd === completed.length - 2 && isField(last1)) {
+            return { position: 'sort-direction', partial, before }; // `order by status |`
+        }
+        if (last1 === ',') {
+            return { position: 'field', partial, before }; // `order by a, |`
+        }
+    }
+    // 3. After `(` (sub-expression / function start) or `,` (function args).
+    if (last1 === '(' || last1 === ',') {
+        return { position: 'field', partial, before };
+    }
+    // 4. Standard routing.
+    if (!last1 || isConn(last1))
+        return { position: 'field', partial, before };
+    if (isField(last1))
+        return { position: 'operator', partial, before };
+    if (isOp(last1)) {
+        const attribute = isField(last2) ? last2 : undefined;
+        return { position: 'value', partial, before, attribute };
+    }
+    if (isOp(last2))
+        return { position: 'connector', partial, before };
+    return { position: 'field', partial, before };
+}
+const BUILT_IN_FILTREX_FNS = {
+    contains: (s, sub) => String(s ?? '').includes(String(sub ?? '')),
+    startsWith: (s, p) => String(s ?? '').startsWith(String(p ?? '')),
+    endsWith: (s, p) => String(s ?? '').endsWith(String(p ?? '')),
+    lower: (s) => String(s ?? '').toLowerCase(),
+    upper: (s) => String(s ?? '').toUpperCase(),
+    len: (s) => (s == null ? 0 : Array.isArray(s) ? s.length : String(s).length),
+    isEmpty: (s) => s == null || s === '' || (Array.isArray(s) && s.length === 0),
+    isNotEmpty: (s) => !(s == null || s === '' || (Array.isArray(s) && s.length === 0)),
+    between: (n, lo, hi) => Number(n) >= Number(lo) && Number(n) <= Number(hi),
+    year: (d) => new Date(d).getFullYear(),
+    month: (d) => new Date(d).getMonth() + 1,
+    day: (d) => new Date(d).getDate(),
+    daysAgo: (d) => (Date.now() - +new Date(d)) / 86400000,
+    matches: (s, re) => new RegExp(String(re ?? '')).test(String(s ?? '')),
+    coalesce: (...xs) => xs.find(x => x != null && x !== '') ?? null,
+};
+let filtrexLoading = null;
+async function getFiltrex() {
+    if (!filtrexLoading) {
+        filtrexLoading = import('filtrex').then(m => {
+            const mod = m.default ?? m;
+            if (typeof mod.compileExpression !== 'function') {
+                throw new Error('filtrex: compileExpression export not found');
+            }
+            return mod;
+        });
+    }
+    return filtrexLoading;
+}
+let jsepLoading = null;
+async function getJsep() {
+    if (!jsepLoading) {
+        jsepLoading = import('jsep').then(m => {
+            const candidate = m.default ?? m;
+            if (typeof candidate !== 'function') {
+                throw new Error('jsep: function export not found');
+            }
+            const fn = candidate;
+            try {
+                fn.addBinaryOp?.('and', 2);
+                fn.addBinaryOp?.('or', 1);
+                fn.addBinaryOp?.('in', 6);
+                fn.addUnaryOp?.('not');
+            }
+            catch {
+                /* parser already augmented */
+            }
+            return fn;
+        });
+    }
+    return jsepLoading;
+}
+/**
+ * Parse + compile a strict-mode prompt expression. Resolves with both the
+ * parsed AST (jsep) and the compiled filtrex predicate, or rejects with
+ * a parse / compile Error.
+ */
+export async function validatePromptExpression(value, ctrl) {
+    const ql = ctrl.queryLanguage;
+    const jsep = await getJsep();
+    // jsep first — its syntax errors are more readable than filtrex's.
+    const ast = jsep(value);
+    const filtrex = await getFiltrex();
+    const extraFunctions = {
+        ...BUILT_IN_FILTREX_FNS,
+        ...(ql?.extraFunctions ?? {}),
+    };
+    // Pick a customProp resolver. Priority: explicit fn > combined flags > none.
+    let customProp = ql?.customProp;
+    if (!customProp) {
+        if (ql?.dotAccess && ql?.optionalChaining)
+            customProp = filtrex.useDotAccessOperatorAndOptionalChaining;
+        else if (ql?.dotAccess)
+            customProp = filtrex.useDotAccessOperator;
+        else if (ql?.optionalChaining)
+            customProp = filtrex.useOptionalChaining;
+    }
+    const opts = { extraFunctions };
+    if (ql?.constants)
+        opts.constants = ql.constants;
+    if (ql?.operators)
+        opts.operators = ql.operators;
+    if (customProp)
+        opts.customProp = customProp;
+    const evaluate = filtrex.compileExpression(value, opts);
+    return { ast, evaluate };
+}
+/**
+ * Renders one segment of the Basic / NQL toggle. Defaults match the Jira-style
+ * layout: Basic shows "Basic" text; NQL shows "JQL" text. Either segment can
+ * be overridden with a label, an icon, or both.
+ */
+function renderModeToggleSegment(segValue, cfg) {
+    const defaults = segValue === 'basic'
+        ? { label: 'Basic', icon: undefined, aria: 'Basic mode' }
+        : { label: 'JQL', icon: undefined, aria: 'JQL / expression mode' };
+    const label = cfg?.label ?? defaults.label;
+    const icon = cfg?.icon ?? defaults.icon;
+    const aria = cfg?.ariaLabel ?? label ?? defaults.aria;
+    return html `
+    <nile-button-toggle value="${segValue}" aria-label="${aria}">
+      ${icon ? html `<nile-icon class="fc-prompt__mode-icon" name="${icon}" size="14"></nile-icon>` : nothing}
+      ${label ? html `<span>${label}</span>` : nothing}
+    </nile-button-toggle>
+  `;
+}
+function renderModeToggle(host, ctrl, mode) {
+    const toggleCfg = ctrl.queryLanguage?.toggle;
+    return html `
+    <nile-button-toggle-group
+      class="fc-prompt__mode"
+      aria-label="Query mode"
+      .value="${mode}"
+      @nile-change="${(e) => {
+        e.stopPropagation();
+        const next = e.detail?.value;
+        if (next === 'basic' || next === 'nql')
+            host.setPromptMode(ctrl, next);
+    }}"
+    >
+      ${renderModeToggleSegment('nql', toggleCfg?.nql)}
+      ${renderModeToggleSegment('basic', toggleCfg?.basic)}
+    </nile-button-toggle-group>
+  `;
+}
+export function renderPrompt(host, ctrl) {
+    const value = String(host.selectedValues.get(ctrl.id) ?? '');
+    const animated = host.promptPlaceholder.get(ctrl.id) ?? '';
+    const error = host.promptErrors.get(ctrl.id);
+    const mode = host.promptModes.get(ctrl.id);
+    // Toggle shows only when the consumer explicitly opted into a hybrid surface —
+    // the standalone `expression` variant is filtrex-only by design and never
+    // renders a Basic / JQL switch even though queryLanguage is enabled.
+    const showToggle = !!ctrl.queryLanguage?.enabled && !!mode && ctrl.variant !== 'expression';
+    // Suggestions + inline syntax highlighting are filtrex-mode-only:
+    //   - `expression` variant → always on
+    //   - `hybrid` variant     → only when the toggle is on Expression (`nql`)
+    //   - `prompt` variant     → never (plain free text)
+    const isFiltrexMode = ctrl.variant === 'expression'
+        || (ctrl.variant === 'hybrid' && mode === 'nql');
+    const styleParts = [];
+    if (ctrl.gradientColors && ctrl.gradientColors.length > 0) {
+        const dir = ctrl.gradientDirection ?? '90deg';
+        styleParts.push(`--fc-prompt-gradient: linear-gradient(${dir}, ${ctrl.gradientColors.join(', ')})`);
+    }
+    else if (ctrl.gradientDirection) {
+        // Direction-only override: keep the default palette but rotate it.
+        styleParts.push(`--fc-prompt-gradient: linear-gradient(${ctrl.gradientDirection},` +
+            ' #2563eb 0%, #3b82f6 18%, #06b6d4 36%, #6366f1 54%,' +
+            ' #8b5cf6 72%, #2563eb 100%)');
+    }
+    if (typeof ctrl.gradientSpeedMs === 'number' && ctrl.gradientSpeedMs > 0) {
+        styleParts.push(`--fc-prompt-gradient-speed: ${ctrl.gradientSpeedMs}ms`);
+    }
+    const inlineStyle = styleParts.length ? styleParts.join('; ') + ';' : '';
+    // Suggestion catalog: prefer the control's own `suggestions` if the consumer
+    // shipped one, otherwise fall back to `host.config.aq.autocomplete` (the
+    // single backend-supplied catalog every prompt-like control draws from).
+    const aqItems = host
+        .config?.aq?.autocomplete;
+    const userSuggestions = Array.isArray(ctrl.suggestions)
+        ? ctrl.suggestions
+        : (Array.isArray(aqItems) ? aqItems : []);
+    // The SuggestionItem shape is `{ id?, label, type }`. `type` drives routing
+    // and colour. `label` is the display text. `id` is overloaded:
+    //   - on attributes / operators / connectors / keywords / functions → the
+    //     technical token inserted on pick (falls back to `label` when omitted)
+    //   - on values → the parent attribute's `id` (matched against ctx.attribute
+    //     to scope the value to a single field). NOT inserted on pick.
+    const tokenOf = (s) => s.id ?? s.label;
+    const fieldNames = new Set(userSuggestions.filter(s => s.type === 'attribute').map(tokenOf));
+    const operatorTokens = new Set(userSuggestions.filter(s => s.type === 'operator').map(tokenOf));
+    // Connectors (and/or/not/in) live in the new `connector` bucket. `clause`
+    // is the deprecated alias — accept it so existing demos still work.
+    const connectorTokens = new Set(userSuggestions
+        .filter(s => s.type === 'connector' || s.type === 'clause')
+        .map(s => tokenOf(s).toLowerCase()));
+    // Decide what kind of token comes next, then pre-filter the suggestion list
+    // to that context. The combobox's own substring filter is bypassed below
+    // (via `getSearchText`) so this pre-filter is the single source of truth.
+    const ctx = analyzePromptCtx(value, fieldNames, operatorTokens, connectorTokens);
+    const candidates = (() => {
+        switch (ctx.position) {
+            case 'operator':
+                return userSuggestions.filter(s => s.type === 'operator');
+            case 'value':
+                // For values, `id` is the parent attribute's id. A value with no `id`
+                // is cross-attribute (e.g. true / false / null) and shows everywhere.
+                return userSuggestions.filter(s => s.type === 'value' && (!s.id || s.id === ctx.attribute));
+            case 'connector':
+                // `clause` is deprecated but routes here too. `keyword` (ORDER BY etc.)
+                // also lives at end-of-predicate, so surface both.
+                return userSuggestions.filter(s => s.type === 'connector' || s.type === 'keyword' || s.type === 'clause');
+            case 'sort-direction':
+                // Only keywords show after `order by <attr>`. We drop ORDER BY itself
+                // here (cheap heuristic: filter out labels containing 'order') so the
+                // dropdown doesn't suggest nesting another sort clause.
+                return userSuggestions.filter(s => s.type === 'keyword' && !s.label.toLowerCase().includes('order'));
+            case 'field':
+            default:
+                return userSuggestions.filter(s => s.type === 'attribute'
+                    || s.type === 'function'
+                    || s.type === 'snippet'
+                    || !s.type);
+        }
+    })();
+    const partialLower = ctx.partial.toLowerCase();
+    const suggestionData = ctx.partial
+        ? candidates.filter(s => s.label.toLowerCase().includes(partialLower))
+        : [...candidates];
+    // Highlighted suggestion index for keyboard nav. Clamp to bounds so a stale
+    // index from a previous candidate set never points past the current list.
+    const rawActive = host.promptActiveIndex.get(ctrl.id) ?? -1;
+    const activeIdx = rawActive >= 0 && rawActive < suggestionData.length ? rawActive : -1;
+    // Bypass the combobox's own substring filter by stuffing the current input
+    // into searchText so the substring check always passes; our pre-filter
+    // (context + partial) is the source of truth for what shows.
+    //
+    // Each row is wrapped in a coloured <span> keyed by `type`. Colours are
+    // INLINE on the span (not class-based) because the combobox's listbox is
+    // ── Plain-input + custom dropdown ────────────────────────────────────
+    // Native <input> for the typed value; suggestions render as a sibling div
+    // beneath it. Mousedown on a suggestion fires before the input's blur, so
+    // we preventDefault to keep focus and update the value via our token-merge.
+    //
+    // Suggestion rows are intentionally NOT coloured by type — they're plain
+    // text rows so the dropdown stays neutral. Colour only paints the typed
+    // expression itself (the inline syntax highlighter below).
+    // Inline syntax highlighter — paints the typed expression in the input's
+    // overlay div using nile-color CSS variables (with sensible fallbacks).
+    // The mapping reuses the same five token colours as the spec.
+    const TOKEN_COLOR = {
+        string: 'var(--nile-colors-green-600, var(--ng-colors-text-success-primary-600, #16a34a))',
+        number: 'var(--nile-colors-green-600, var(--ng-colors-text-success-primary-600, #16a34a))',
+        operator: 'var(--nile-colors-green-600, var(--ng-colors-text-success-primary-600, #16a34a))',
+        keyword: 'var(--nile-colors-pink-600, var(--ng-colors-text-error-primary-600, #db2777))',
+        function: 'var(--nile-colors-violet-600, var(--ng-colors-text-brand-secondary-700, #7c3aed))',
+        identifier: 'var(--nile-colors-dark-900, var(--ng-colors-text-primary-900, #1f2937))',
+        punctuation: 'var(--nile-colors-neutral-700, var(--ng-colors-text-tertiary-600, #6b7280))',
+        whitespace: 'transparent',
+    };
+    const KEYWORDS = new Set([
+        'and', 'or', 'not', 'in', 'mod', 'of',
+        'if', 'then', 'else',
+        'order', 'by', 'asc', 'desc',
+    ]);
+    const tokenize = (src) => {
+        const out = [];
+        const n = src.length;
+        let i = 0;
+        while (i < n) {
+            const c = src[i];
+            // Whitespace
+            if (/\s/.test(c)) {
+                let j = i;
+                while (j < n && /\s/.test(src[j]))
+                    j++;
+                out.push({ text: src.slice(i, j), type: 'whitespace' });
+                i = j;
+                continue;
+            }
+            // Double-quoted string
+            if (c === '"') {
+                let j = i + 1;
+                while (j < n && src[j] !== '"') {
+                    if (src[j] === '\\' && j + 1 < n)
+                        j++;
+                    j++;
+                }
+                if (j < n)
+                    j++;
+                out.push({ text: src.slice(i, j), type: 'string' });
+                i = j;
+                continue;
+            }
+            // Single-quoted identifier
+            if (c === "'") {
+                let j = i + 1;
+                while (j < n && src[j] !== "'")
+                    j++;
+                if (j < n)
+                    j++;
+                out.push({ text: src.slice(i, j), type: 'identifier' });
+                i = j;
+                continue;
+            }
+            // Number
+            if (/\d/.test(c) || (c === '.' && /\d/.test(src[i + 1] ?? ''))) {
+                let j = i;
+                while (j < n && /[\d.]/.test(src[j]))
+                    j++;
+                out.push({ text: src.slice(i, j), type: 'number' });
+                i = j;
+                continue;
+            }
+            // Operators (longest match)
+            const ops = ['<=', '>=', '==', '!=', '~=', '<', '>', '=', '+', '-', '*', '/', '^', '?', ':'];
+            const op = ops.find(o => src.startsWith(o, i));
+            if (op) {
+                out.push({ text: op, type: 'operator' });
+                i += op.length;
+                continue;
+            }
+            // Identifier / keyword / function
+            if (/[A-Za-z_]/.test(c)) {
+                let j = i;
+                while (j < n && /[\w.]/.test(src[j]))
+                    j++;
+                const word = src.slice(i, j);
+                const next = src[j];
+                const type = KEYWORDS.has(word.toLowerCase())
+                    ? 'keyword'
+                    : (next === '(' || next === '[') ? 'function' : 'identifier';
+                out.push({ text: word, type });
+                i = j;
+                continue;
+            }
+            // Punctuation (parens, brackets, comma, etc.)
+            out.push({ text: c, type: 'punctuation' });
+            i++;
+        }
+        return out;
+    };
+    const tokens = tokenize(value);
+    const onInput = (e) => {
+        const inputEl = e.target;
+        const next = inputEl.value;
+        const atEnd = () => inputEl.selectionStart === inputEl.value.length;
+        if (atEnd()) {
+            const s = inputEl.selectionStart ?? next.length;
+            inputEl.setSelectionRange(s, s);
+        }
+        // Typing changes which suggestions match — clear any highlighted item so
+        // the user starts fresh. They can press ArrowDown to highlight the first.
+        host.setPromptActiveIndex(ctrl.id, -1);
+        host.handlePromptInput(ctrl, next);
+        requestAnimationFrame(() => {
+            if (inputEl.isConnected && atEnd()) {
+                // Over-scroll past max so the browser pins to the absolute right edge.
+                inputEl.scrollLeft = inputEl.scrollWidth + 100;
+            }
+        });
+    };
+    const pickItem = (item, inputEl) => {
+        const tokenLike = item.type === 'attribute'
+            || item.type === 'operator'
+            || item.type === 'connector'
+            || item.type === 'keyword'
+            || item.type === 'clause';
+        let next;
+        if (tokenLike) {
+            const beforeTrimmed = ctx.before.replace(/\s+$/, '');
+            const sep = beforeTrimmed.length > 0 ? ' ' : '';
+            next = beforeTrimmed + sep + tokenOf(item) + ' ';
+        }
+        else if (item.type === 'value') {
+            const beforeTrimmed = ctx.before.replace(/\s+$/, '');
+            const sep = beforeTrimmed.length > 0 ? ' ' : '';
+            // In filtrex, bare identifiers reference properties — so a value like
+            // `Open` MUST be quoted as `"Open"` to parse as the string literal.
+            // Pass-through cases: numbers, booleans, null, and labels the consumer
+            // already wrapped in quotes.
+            const raw = item.label;
+            const alreadyQuoted = (raw.startsWith('"') && raw.endsWith('"'))
+                || (raw.startsWith("'") && raw.endsWith("'"));
+            const isNumeric = /^-?\d+(\.\d+)?$/.test(raw);
+            const isLiteral = raw === 'true' || raw === 'false' || raw === 'null';
+            const inserted = alreadyQuoted || isNumeric || isLiteral
+                ? raw
+                : `"${raw.replace(/"/g, '\\"')}"`;
+            next = beforeTrimmed + sep + inserted + ' ';
+        }
+        else if (item.type === 'function') {
+            const beforeTrimmed = ctx.before.replace(/\s+$/, '');
+            const sep = beforeTrimmed.length > 0 ? ' ' : '';
+            // Function labels may already include their own parens (e.g. "abs(value)").
+            // Only append "(" for bare names.
+            const tail = item.label.includes('(') ? '' : '(';
+            next = beforeTrimmed + sep + item.label + tail;
+        }
+        else {
+            next = item.label;
+        }
+        host.handlePromptInput(ctrl, next);
+        host.submitPrompt(ctrl);
+        // Clear the keyboard cursor — picking commits to a value, so the new
+        // candidate set should start with no row pre-highlighted. Avoids the
+        // confusing "stuck on the old index" state after a pick.
+        host.setPromptActiveIndex(ctrl.id, -1);
+        // Imperatively sync the input for immediate visual feedback.
+        inputEl.value = next;
+        // Defer focus + caret-to-end to AFTER Lit's microtask-scheduled re-render.
+        // If we focus synchronously, Lit's subsequent re-render can detach /
+        // reattach DOM inside the shadow root and clear shadowRoot.activeElement.
+        // Re-query by id in case the element was replaced; stable id makes this
+        // safe even when the original `inputEl` reference is now stale.
+        const root = inputEl.getRootNode();
+        const inputId = `fc-prompt-${ctrl.id}`;
+        requestAnimationFrame(() => {
+            const inp = root.querySelector(`#${CSS.escape(inputId)}`);
+            if (!inp)
+                return;
+            inp.focus({ preventScroll: true });
+            inp.setSelectionRange(inp.value.length, inp.value.length);
+            // After focus + caret-to-end, snap scroll to right so the new caret
+            // position is visible (mirrors what onInput does for typing).
+            inp.scrollLeft = inp.scrollWidth;
+        });
+    };
+    const onKeyDown = (e) => {
+        const inputEl = e.currentTarget;
+        const len = suggestionData.length;
+        // Read fresh from host (don't rely on the closure-captured `activeIdx`,
+        // which is from this render — fine in theory but defensive against any
+        // Lit re-binding edge case).
+        const rawActive = host.promptActiveIndex.get(ctrl.id) ?? -1;
+        const current = rawActive >= 0 && rawActive < len ? rawActive : -1;
+        // Arrow nav only kicks in when there's a non-empty suggestion list. With
+        // no list, ArrowUp/Down behave normally (caret movement inside the input).
+        if (len > 0 && (e.key === 'ArrowDown' || e.key === 'ArrowUp')) {
+            e.preventDefault();
+            e.stopPropagation(); // avoid any parent (combobox / scroll-trap) intercept
+            const next = e.key === 'ArrowDown'
+                ? (current < 0 ? 0 : (current + 1) % len)
+                : (current <= 0 ? len - 1 : current - 1);
+            host.setPromptActiveIndex(ctrl.id, next);
+            // After Lit applies the active class, scroll the now-active row into
+            // view (the dropdown caps at 280px with overflow-y: auto).
+            const root = inputEl.getRootNode();
+            requestAnimationFrame(() => {
+                const activeBtn = root.querySelector('.fc-prompt__suggestion--active');
+                activeBtn?.scrollIntoView({ block: 'nearest' });
+            });
+            return;
+        }
+        if (e.key === 'Enter') {
+            e.preventDefault();
+            e.stopPropagation();
+            // If a suggestion is highlighted, pick it; otherwise submit the prompt.
+            if (current >= 0 && current < len) {
+                pickItem(suggestionData[current], inputEl);
+            }
+            else {
+                host.submitPrompt(ctrl);
+            }
+            return;
+        }
+        if (e.key === 'Escape' && current >= 0) {
+            e.preventDefault();
+            e.stopPropagation();
+            host.setPromptActiveIndex(ctrl.id, -1);
+        }
+    };
+    // The native <input> scrolls horizontally to keep the caret visible, but
+    // the syntax-highlight overlay (`.fc-prompt__highlight`) is `overflow:
+    // hidden` and would otherwise clip at the right edge — leaving the typed
+    // text invisible past the field width. Mirror the input's scrollLeft onto
+    // the overlay so both layers stay aligned.
+    const onScroll = (e) => {
+        const inputEl = e.currentTarget;
+        const highlightEl = inputEl.parentElement?.querySelector('.fc-prompt__highlight');
+        if (highlightEl)
+            highlightEl.scrollLeft = inputEl.scrollLeft;
+    };
+    const classes = [
+        'fc-prompt',
+        ctrl.noAiBorder ? 'fc-prompt--no-ai-border' : '',
+        error ? 'fc-prompt--error' : '',
+    ].filter(Boolean).join(' ');
+    return html `
+    <div class="fc-prompt-row">
+      <div class="${classes} fc-prompt--row-input" part="filter-prompt" style="${inlineStyle}">
+        <div class="fc-prompt__inner">
+          <div class="fc-prompt__field${isFiltrexMode ? ' fc-prompt__field--highlight' : ''}" part="filter-prompt-field">
+            ${isFiltrexMode ? html `
+              <div class="fc-prompt__highlight" aria-hidden="true">${tokens.map((tok) => {
+        const color = TOKEN_COLOR[tok.type] ?? 'inherit';
+        return html `<span style="color:${color};${tok.type === 'keyword' ? 'font-weight:600;' : ''}">${tok.text}</span>`;
+    })}</div>
+            ` : nothing}
+            <input
+              type="text"
+              class="fc-prompt__input"
+              id="fc-prompt-${ctrl.id}"
+              name="${ctrl.id}"
+              part="filter-prompt-input"
+              autocomplete="off"
+              spellcheck="false"
+              aria-invalid="${error ? 'true' : 'false'}"
+              placeholder="${animated || (ctrl.placeholders?.[0] ?? '')}"
+              .value="${value}"
+              @input="${onInput}"
+              @keydown="${onKeyDown}"
+              @scroll="${onScroll}"
+            />
+          </div>
+          ${isFiltrexMode && suggestionData.length > 0 ? html `
+            <div class="fc-prompt__suggestions" part="filter-prompt-suggestions">
+              ${suggestionData.map((item, idx) => html `
+                <button
+                  type="button"
+                  class="fc-prompt__suggestion${idx === activeIdx ? ' fc-prompt__suggestion--active' : ''}"
+                  @mouseenter="${() => {
+        if (idx !== activeIdx)
+            host.setPromptActiveIndex(ctrl.id, idx);
+    }}"
+                  @mousedown="${(e) => {
+        // Prevent focus loss on the input so we can update its
+        // value imperatively after the merge.
+        e.preventDefault();
+        const inputEl = e.currentTarget
+            .closest('.fc-prompt__inner')
+            ?.querySelector('input.fc-prompt__input');
+        if (inputEl)
+            pickItem(item, inputEl);
+    }}"
+                >
+                  <span class="fc-prompt__suggestion-label">${item.label}</span>
+                  ${item.type ? html `<span class="fc-prompt__suggestion-tag">${item.type}</span>` : nothing}
+                </button>
+              `)}
+            </div>
+          ` : nothing}
+          ${showToggle ? renderModeToggle(host, ctrl, mode) : nothing}
+        </div>
+        ${error ? html `
+          <div class="fc-prompt__error" role="alert">
+            <span class="fc-prompt__error-icon" aria-hidden="true">!</span>
+            <span class="fc-prompt__error-msg">${error}</span>
+          </div>
+        ` : nothing}
+      </div>
+    </div>`;
+}
+//# sourceMappingURL=prompt.js.map

package/dist/src/nile-filter-chart/utils/radio.d.ts

@@ -0,0 +1,3 @@
+import { TemplateResult } from 'lit';
+import type { FilterChartHost, NormalizedFilterControl } from './types.js';
+export declare function renderRadio(host: FilterChartHost, ctrl: NormalizedFilterControl): TemplateResult;