@aquera/nile-visualization 2.9.2 → 2.9.4

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

@@ -4,6 +4,19 @@ import { html, nothing } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
 import { styles } from './nile-filter-chart.css.js';
 import NileElement from '../internal/nile-element.js';
+import { renderBadge } from './utils/badge.js';
+import { renderDropdown } from './utils/dropdown.js';
+import { renderSegmented } from './utils/segmented.js';
+import { renderRadio } from './utils/radio.js';
+import { renderToggle } from './utils/toggle.js';
+import { renderSearch } from './utils/search.js';
+import { renderComparison } from './utils/comparison.js';
+import { renderThreshold } from './utils/threshold.js';
+import { renderPreset } from './utils/preset.js';
+import { renderPrompt, validatePromptExpression } from './utils/prompt.js';
+// Lowercase + ASCII-safe slug used to derive a control's `id` from its
+// `label` when the author hasn't provided one explicitly.
+const slugify = (s) => s.toLowerCase().trim().replace(/[^a-z0-9]+/g, '_').replace(/^_+|_+$/g, '');
 let NileFilterChart = NileFilterChart_1 = class NileFilterChart extends NileElement {
     constructor() {
         super(...arguments);
@@ -11,30 +24,163 @@ let NileFilterChart = NileFilterChart_1 = class NileFilterChart extends NileElem
         this.selectedValues = new Map();
         this.collapsedGroups = new Set();
         /** Currently displayed (animated) placeholder text per prompt-variant control id. */
-        this._promptPlaceholder = new Map();
+        this.promptPlaceholder = new Map();
+        /** Validation messages per prompt control id (strict-mode parse failures). */
+        this.promptErrors = new Map();
+        /** Runtime mode per prompt control id. Only populated for controls with `queryLanguage.enabled`. */
+        this.promptModes = new Map();
+        /** Highlighted suggestion index per prompt control id (-1 = none highlighted). */
+        this.promptActiveIndex = new Map();
         /** Active typewriter timers per prompt control id (so we can stop them). */
         this._promptTimers = new Map();
+        /** Compiled filtrex predicates per prompt control id (strict-mode successes). */
+        this._promptEvaluators = new Map();
+        /** Parsed AST per prompt control id (strict-mode successes). */
+        this._promptAsts = new Map();
+        /** Monotonic per-control token used to ignore stale async validations. */
+        this._validationTokens = new Map();
+        /** Pending debounce timers for prompt input — gates validation + nile-change emission. */
+        this._promptDebounce = new Map();
     }
     static get styles() {
         return [styles];
     }
     connectedCallback() {
         super.connectedCallback();
+        this._normalizeIds();
         this._initValues();
         this.emit('nile-init');
     }
     disconnectedCallback() {
         super.disconnectedCallback();
         this._stopAllPromptAnimations();
+        for (const t of this._promptDebounce.values())
+            clearTimeout(t);
+        this._promptDebounce.clear();
         this.emit('nile-destroy');
     }
     updated(changed) {
         super.updated(changed);
         if (changed.has('config')) {
+            this._normalizeIds();
             this._initValues();
             this._syncPromptAnimations();
         }
     }
+    // ── FilterChartHost surface ─────────────────────────────────────────────────
+    setValue(id, value) {
+        this.selectedValues = new Map(this.selectedValues).set(id, value);
+        this._emitChange();
+    }
+    /**
+     * Update a prompt control's value. The value lands in `selectedValues`
+     * immediately so the input stays responsive, but validation, error
+     * rendering, and the `nile-change` event are debounced — they only
+     * fire after `_PROMPT_DEBOUNCE_MS` of keyboard quiet.
+     */
+    handlePromptInput(ctrl, value) {
+        this.selectedValues = new Map(this.selectedValues).set(ctrl.id, value);
+        const existing = this._promptDebounce.get(ctrl.id);
+        if (existing)
+            clearTimeout(existing);
+        const timer = setTimeout(() => {
+            this._promptDebounce.delete(ctrl.id);
+            this._validateOrClear(ctrl, value);
+        }, NileFilterChart_1._PROMPT_DEBOUNCE_MS);
+        this._promptDebounce.set(ctrl.id, timer);
+    }
+    /**
+     * Switch the runtime mode for a prompt control. Leaving NQL clears
+     * validation; entering NQL re-validates the current value. The mode
+     * toggle is an explicit user action, so any pending typing debounce
+     * is cancelled and the change applies immediately (regardless of
+     * `validateOn`).
+     */
+    setPromptMode(ctrl, mode) {
+        if (this.promptModes.get(ctrl.id) === mode)
+            return;
+        this.promptModes = new Map(this.promptModes).set(ctrl.id, mode);
+        const pending = this._promptDebounce.get(ctrl.id);
+        if (pending) {
+            clearTimeout(pending);
+            this._promptDebounce.delete(ctrl.id);
+        }
+        const value = String(this.selectedValues.get(ctrl.id) ?? '');
+        this._validateOrClear(ctrl, value, { explicit: true });
+    }
+    /**
+     * Force-validate a prompt's current value. Used by `validateOn: 'submit'`
+     * on Enter — bypasses the debounce and runs validation right away.
+     */
+    submitPrompt(ctrl) {
+        const pending = this._promptDebounce.get(ctrl.id);
+        if (pending) {
+            clearTimeout(pending);
+            this._promptDebounce.delete(ctrl.id);
+        }
+        const value = String(this.selectedValues.get(ctrl.id) ?? '');
+        this._validateOrClear(ctrl, value, { explicit: true });
+    }
+    setPromptActiveIndex(id, idx) {
+        this.promptActiveIndex = new Map(this.promptActiveIndex).set(id, idx);
+    }
+    _validateOrClear(ctrl, value, opts = {}) {
+        const isNql = this.promptModes.get(ctrl.id) === 'nql';
+        if (value.trim() === '') {
+            this._clearPromptValidation(ctrl.id);
+            this._emitChange();
+            return;
+        }
+        // In `validateOn: 'submit'` mode, automatic (debounced) ticks just
+        // emit the change without validating. Validation runs only when the
+        // call is `explicit` — i.e. Enter was pressed or the mode toggled.
+        if (isNql && ctrl.queryLanguage?.validateOn === 'submit' && !opts.explicit) {
+            this._emitChange();
+            return;
+        }
+        // Bump the validation token so any earlier in-flight parse is ignored.
+        const token = (this._validationTokens.get(ctrl.id) ?? 0) + 1;
+        this._validationTokens.set(ctrl.id, token);
+        this._emitChange();
+        validatePromptExpression(value, ctrl).then(({ ast, evaluate }) => {
+            if (this._validationTokens.get(ctrl.id) !== token)
+                return;
+            const errs = new Map(this.promptErrors);
+            errs.delete(ctrl.id);
+            this.promptErrors = errs;
+            this._promptEvaluators.set(ctrl.id, evaluate);
+            this._promptAsts.set(ctrl.id, ast);
+            this._emitChange();
+        }, err => {
+            if (this._validationTokens.get(ctrl.id) !== token)
+                return;
+            const error = err instanceof Error ? err : new Error(String(err));
+            // Basic mode swallows parse errors (suggestions can be partial / unfinished
+            // expressions); NQL surfaces them so the user sees what's wrong.
+            const errs = new Map(this.promptErrors);
+            if (isNql) {
+                console.error(`[nile-filter-chart] "${ctrl.id}" parse error:`, error.message);
+                errs.set(ctrl.id, error.message);
+            }
+            else {
+                errs.delete(ctrl.id);
+            }
+            this.promptErrors = errs;
+            this._promptEvaluators.delete(ctrl.id);
+            this._promptAsts.delete(ctrl.id);
+            this._emitChange();
+        });
+    }
+    _clearPromptValidation(id) {
+        this._validationTokens.set(id, (this._validationTokens.get(id) ?? 0) + 1);
+        if (this.promptErrors.has(id)) {
+            const errs = new Map(this.promptErrors);
+            errs.delete(id);
+            this.promptErrors = errs;
+        }
+        this._promptEvaluators.delete(id);
+        this._promptAsts.delete(id);
+    }
     // ── Prompt typewriter ────────────────────────────────────────────────────────
     _syncPromptAnimations() {
         const wanted = new Set();
@@ -52,9 +198,9 @@ let NileFilterChart = NileFilterChart_1 = class NileFilterChart extends NileElem
         }
     }
     _startPromptAnimation(ctrl) {
-        const phrases = (ctrl.placeholders && ctrl.placeholders.length
+        const phrases = ctrl.placeholders && ctrl.placeholders.length
             ? ctrl.placeholders
-            : [ctrl.placeholder ?? 'Ask anything…']);
+            : ['Ask anything…'];
         const typeSpeed = ctrl.typeSpeedMs ?? 60;
         const pauseAfterType = ctrl.pauseBeforeDeleteMs ?? 1400;
         const pauseBetween = ctrl.pauseBetweenMs ?? 400;
@@ -66,8 +212,8 @@ let NileFilterChart = NileFilterChart_1 = class NileFilterChart extends NileElem
             let nextDelay;
             if (!deleting) {
                 charIdx++;
-                const next = new Map(this._promptPlaceholder).set(ctrl.id, phrase.slice(0, charIdx));
-                this._promptPlaceholder = next;
+                const next = new Map(this.promptPlaceholder).set(ctrl.id, phrase.slice(0, charIdx));
+                this.promptPlaceholder = next;
                 if (charIdx >= phrase.length) {
                     deleting = true;
                     nextDelay = pauseAfterType;
@@ -78,8 +224,8 @@ let NileFilterChart = NileFilterChart_1 = class NileFilterChart extends NileElem
             }
             else {
                 charIdx--;
-                const next = new Map(this._promptPlaceholder).set(ctrl.id, phrase.slice(0, Math.max(0, charIdx)));
-                this._promptPlaceholder = next;
+                const next = new Map(this.promptPlaceholder).set(ctrl.id, phrase.slice(0, Math.max(0, charIdx)));
+                this.promptPlaceholder = next;
                 if (charIdx <= 0) {
                     deleting = false;
                     phraseIdx = (phraseIdx + 1) % phrases.length;
@@ -92,7 +238,7 @@ let NileFilterChart = NileFilterChart_1 = class NileFilterChart extends NileElem
             this._promptTimers.set(ctrl.id, setTimeout(tick, nextDelay));
         };
         // Kick it off
-        this._promptPlaceholder = new Map(this._promptPlaceholder).set(ctrl.id, '');
+        this.promptPlaceholder = new Map(this.promptPlaceholder).set(ctrl.id, '');
         this._promptTimers.set(ctrl.id, setTimeout(tick, 100));
     }
     _stopPromptAnimation(id) {
@@ -100,14 +246,50 @@ let NileFilterChart = NileFilterChart_1 = class NileFilterChart extends NileElem
         if (t)
             clearTimeout(t);
         this._promptTimers.delete(id);
-        const next = new Map(this._promptPlaceholder);
+        const next = new Map(this.promptPlaceholder);
         next.delete(id);
-        this._promptPlaceholder = next;
+        this.promptPlaceholder = next;
     }
     _stopAllPromptAnimations() {
         for (const id of [...this._promptTimers.keys()])
             this._stopPromptAnimation(id);
     }
+    // ── Config helpers ───────────────────────────────────────────────────────────
+    /**
+     * Walk the raw config and ensure every control has a unique string `id`.
+     * Authors may omit `id`; this fills it in from `label` (slugified) with a
+     * collision suffix, or `ctrl_<index>` if `label` is also missing. Mutates
+     * the raw control objects in place — consistent with existing behavior
+     * (e.g. `aq.autocomplete` is fanned out onto controls below).
+     */
+    _normalizeIds() {
+        const used = new Set();
+        let idx = 0;
+        const ensure = (c) => {
+            if (typeof c.id === 'string' && c.id.length > 0) {
+                used.add(c.id);
+                idx++;
+                return;
+            }
+            const base = slugify(c.label ?? '') || `ctrl_${idx}`;
+            let pick = base;
+            let n = 2;
+            while (used.has(pick))
+                pick = `${base}_${n++}`;
+            used.add(pick);
+            c.id = pick;
+            idx++;
+        };
+        for (const entry of this.config?.chart?.controls ?? []) {
+            if (entry.type === 'group') {
+                for (const c of entry.controls)
+                    ensure(c);
+            }
+            else {
+                ensure(entry);
+            }
+        }
+    }
     _flatControls() {
         const entries = this.config?.chart?.controls ?? [];
         const out = [];
@@ -124,7 +306,33 @@ let NileFilterChart = NileFilterChart_1 = class NileFilterChart extends NileElem
     _initValues() {
         const controls = this._flatControls();
         const map = new Map();
+        const modes = new Map();
+        // Single source of truth for suggestion catalogs: `aq.autocomplete`.
+        // Fan it out into every prompt-like control's `suggestions` so the
+        // renderer (which reads `ctrl.suggestions`) sees the same items the
+        // backend shipped under `aq`. Per-control overrides still win — only
+        // controls without their own `suggestions` get hydrated.
+        const acItems = this.config
+            ?.aq?.autocomplete;
+        if (Array.isArray(acItems)) {
+            for (const ctrl of controls) {
+                const isPromptLike = ctrl.variant === 'prompt'
+                    || ctrl.variant === 'expression'
+                    || ctrl.variant === 'hybrid';
+                if (isPromptLike && !Array.isArray(ctrl.suggestions)) {
+                    ctrl.suggestions = acItems;
+                }
+            }
+        }
         for (const ctrl of controls) {
+            if ((ctrl.variant === 'prompt' && ctrl.queryLanguage?.enabled)
+                || ctrl.variant === 'expression'
+                || ctrl.variant === 'hybrid') {
+                const initialMode = ctrl.variant === 'expression'
+                    ? 'nql'
+                    : (ctrl.queryLanguage?.mode ?? 'strict') === 'strict' ? 'nql' : 'basic';
+                modes.set(ctrl.id, initialMode);
+            }
             if (ctrl.value !== undefined) {
                 map.set(ctrl.id, ctrl.value);
                 if (ctrl.variant === 'comparison') {
@@ -136,10 +344,11 @@ let NileFilterChart = NileFilterChart_1 = class NileFilterChart extends NileElem
                 }
             }
             else {
-                if (ctrl.variant === 'slider') {
-                    map.set(ctrl.id, [ctrl.min ?? 0, ctrl.max ?? 100]);
-                }
-                else if (ctrl.variant === 'toggle') {
+                // slider variant: not yet implemented
+                // if (ctrl.variant === 'slider') {
+                //   map.set(ctrl.id, [ctrl.min ?? 0, ctrl.max ?? 100]);
+                // } else
+                if (ctrl.variant === 'toggle') {
                     const defaults = {};
                     (ctrl.options ?? []).forEach(o => { defaults[o.value] = false; });
                     map.set(ctrl.id, defaults);
@@ -159,433 +368,103 @@ let NileFilterChart = NileFilterChart_1 = class NileFilterChart extends NileElem
             }
         }
         this.selectedValues = map;
-    }
-    _set(id, value) {
-        this.selectedValues = new Map(this.selectedValues).set(id, value);
-        this._emitChange();
+        this.promptModes = modes;
     }
     _emitChange() {
         const filters = {};
-        this.selectedValues.forEach((val, id) => { filters[id] = val; });
-        this.emit('nile-change', { filters });
-    }
-    // ── Badge ────────────────────────────────────────────────────────────────────
-    _renderBadge(ctrl) {
-        const current = this.selectedValues.get(ctrl.id);
-        return html `
-      <div class="fc-badge-group" role="group" aria-label="${ctrl.label}">
-        ${(ctrl.options ?? []).map(opt => {
-            const sel = ctrl.selection === 'multi'
-                ? (Array.isArray(current) && current.includes(opt.value))
-                : current === opt.value;
-            return html `
-            <nile-tag
-              pill
-              size="medium"
-              variant="${sel ? (opt.ngVariant ?? 'primary') : 'normal'}"
-              @click="${() => {
-                if (ctrl.selection === 'single') {
-                    this._set(ctrl.id, sel ? '' : opt.value);
-                }
-                else {
-                    const arr = Array.isArray(current) ? [...current] : [];
-                    const idx = arr.indexOf(opt.value);
-                    if (idx === -1)
-                        arr.push(opt.value);
-                    else
-                        arr.splice(idx, 1);
-                    this._set(ctrl.id, arr);
-                }
-            }}"
-            >${opt.label}</nile-tag>`;
-        })}
-      </div>`;
-    }
-    // ── Dropdown ─────────────────────────────────────────────────────────────────
-    _renderDropdown(ctrl) {
-        const raw = this.selectedValues.get(ctrl.id);
-        const current = Array.isArray(raw) ? raw : (raw ? [raw] : []);
-        const isMulti = ctrl.selection === 'multi';
-        return html `
-      <nile-select
-        .value="${isMulti ? current : (current[0] ?? '')}"
-        ?multiple="${isMulti}"
-        searchEnabled
-        placeholder="${ctrl.placeholder ?? `Select ${ctrl.label || 'option'}…`}"
-        @nile-change="${(e) => {
-            e.stopPropagation();
-            this._set(ctrl.id, e.detail.value);
-        }}"
-      >
-        ${(ctrl.options ?? []).map(opt => html `
-          <nile-option
-            value="${opt.value}"
-            ?selected="${isMulti ? current.includes(opt.value) : current[0] === opt.value}"
-          >${opt.label}</nile-option>`)}
-      </nile-select>`;
-    }
-    // ── Segmented ────────────────────────────────────────────────────────────────
-    _renderSegmented(ctrl) {
-        return html `
-      <div class="fc-segmented-scroll">
-        <nile-button-toggle-group
-          .value="${this.selectedValues.get(ctrl.id) ?? ''}"
-          ?multiple="${ctrl.selection === 'multi'}"
-          @nile-change="${(e) => { e.stopPropagation(); this._set(ctrl.id, e.detail.value); }}"
-        >
-          ${(ctrl.options ?? []).map(opt => html `
-            <nile-button-toggle value="${opt.value}">${opt.label}</nile-button-toggle>`)}
-        </nile-button-toggle-group>
-      </div>`;
-    }
-    // ── Radio ────────────────────────────────────────────────────────────────────
-    _renderRadio(ctrl) {
-        const current = this.selectedValues.get(ctrl.id) ?? '';
-        return html `
-      <nile-radio-group
-        .value="${current}"
-        @nile-change="${(e) => { e.stopPropagation(); this._set(ctrl.id, e.detail.value); }}"
-      >
-        ${(ctrl.options ?? []).map(opt => html `
-          <nile-radio value="${opt.value}" ?checked="${current === opt.value}">${opt.label}</nile-radio>`)}
-      </nile-radio-group>`;
-    }
-    // ── Toggle ───────────────────────────────────────────────────────────────────
-    _renderToggle(ctrl) {
-        const current = this.selectedValues.get(ctrl.id) ?? {};
-        return html `
-      <div class="fc-toggle-group">
-        ${(ctrl.options ?? []).map(opt => html `
-          <nile-slide-toggle
-            label="${opt.label}"
-            ?isChecked="${!!current[opt.value]}"
-            fullWidth
-            @nile-change="${(e) => {
-            e.stopPropagation();
-            const updated = { ...current, [opt.value]: e.detail.checked };
-            this._set(ctrl.id, updated);
-        }}"
-          ></nile-slide-toggle>`)}
-      </div>`;
-    }
-    // ── Slider ───────────────────────────────────────────────────────────────────
-    // private _renderSlider(ctrl: FilterControl): TemplateResult {
-    //   const min = ctrl.min ?? 0;
-    //   const max = ctrl.max ?? 100;
-    //   const val: number[] = this.selectedValues.get(ctrl.id) ?? [min, max];
-    //   const fmt = (n: number) => `${ctrl.prefix ?? ''}${n.toLocaleString()}${ctrl.suffix ?? ''}`;
-    //
-    //   return html`
-    //     <div class="fc-slider-wrap">
-    //       <div class="fc-slider-label">
-    //         <span class="fc-slider-range">${fmt(val[0])} — <strong>${fmt(val[1])}</strong></span>
-    //       </div>
-    //       <nile-slider
-    //         .minValue="${min}"
-    //         .maxValue="${max}"
-    //         ?rangeSlider="${true}"
-    //         .rangeOneValue="${val[0]}"
-    //         .rangeTwoValue="${val[1]}"
-    //         @nile-button-first-change-end="${(e: CustomEvent) => {
-    //           e.stopPropagation();
-    //           this._set(ctrl.id, [e.detail.value, val[1]]);
-    //         }}"
-    //         @nile-button-last-change-end="${(e: CustomEvent) => {
-    //           e.stopPropagation();
-    //           this._set(ctrl.id, [val[0], e.detail.value]);
-    //         }}"
-    //       >
-    //         <span slot="prefix">${fmt(min)}</span>
-    //         <span slot="suffix">${fmt(max)}</span>
-    //       </nile-slider>
-    //     </div>`;
-    // }
-    // ── Search ───────────────────────────────────────────────────────────────────
-    _renderSearch(ctrl) {
-        return html `
-      <nile-input
-        type="search"
-        placeholder="${ctrl.placeholder ?? `Search ${ctrl.label}…`}"
-        .value="${this.selectedValues.get(ctrl.id) ?? ''}"
-        clearable
-        @nile-input="${(e) => { e.stopPropagation(); this._set(ctrl.id, e.detail.value); }}"
-      ></nile-input>`;
-    }
-    // ── Comparison ───────────────────────────────────────────────────────────────
-    _renderComparison(ctrl) {
-        const valA = this.selectedValues.get(ctrl.id) ?? '';
-        const valB = this.selectedValues.get(`${ctrl.id}__b`) ?? '';
-        return html `
-      <div class="fc-comparison">
-        <nile-select
-          .value="${valA}"
-          placeholder="Period A"
-          @nile-change="${(e) => { e.stopPropagation(); this._set(ctrl.id, e.detail.value); }}"
-        >
-          ${(ctrl.options ?? []).map(o => html `<nile-option value="${o.value}">${o.label}</nile-option>`)}
-        </nile-select>
-        <span class="fc-vs">VS</span>
-        <nile-select
-          .value="${valB}"
-          placeholder="Period B"
-          @nile-change="${(e) => { e.stopPropagation(); this._set(`${ctrl.id}__b`, e.detail.value); }}"
-        >
-          ${(ctrl.options ?? []).map(o => html `<nile-option value="${o.value}">${o.label}</nile-option>`)}
-        </nile-select>
-      </div>`;
-    }
-    // ── Threshold ────────────────────────────────────────────────────────────────
-    _renderThreshold(ctrl) {
-        const metric = this.selectedValues.get(ctrl.id) ?? '';
-        const op = this.selectedValues.get(`${ctrl.id}__op`) ?? '>';
-        const val = this.selectedValues.get(`${ctrl.id}__val`) ?? '';
-        const operators = [
-            { value: '>', label: '> (greater)' },
-            { value: '>=', label: '>= (min)' },
-            { value: '<', label: '< (less)' },
-            { value: '<=', label: '<= (max)' },
-            { value: '=', label: '= (equals)' },
-            { value: '!=', label: '≠ (not)' },
-        ];
-        const metricLabel = (ctrl.options ?? []).find(o => o.value === metric)?.label ?? metric;
-        const hasPreview = metric && val !== '';
-        const previewText = hasPreview ? `${metricLabel}  ${op}  ${val}` : 'Set metric, condition, and value above';
-        return html `
-      <div class="fc-threshold">
-        <div class="fc-threshold-metric-row">
-          <span class="fc-threshold-where">WHERE</span>
-          <div class="fc-threshold-field fc-threshold-field--metric">
-            <span class="fc-threshold-field-label">Metric</span>
-            <nile-select
-              .value="${metric}"
-              placeholder="Select metric…"
-              @nile-change="${(e) => { e.stopPropagation(); this._set(ctrl.id, e.detail.value); }}"
-            >
-              ${(ctrl.options ?? []).map(o => html `<nile-option value="${o.value}">${o.label}</nile-option>`)}
-            </nile-select>
-          </div>
-        </div>
-        <div class="fc-threshold-cond-row">
-          <div class="fc-threshold-field fc-threshold-field--op">
-            <span class="fc-threshold-field-label">Condition</span>
-            <nile-select
-              .value="${op}"
-              @nile-change="${(e) => { e.stopPropagation(); this._set(`${ctrl.id}__op`, e.detail.value); }}"
-            >
-              ${operators.map(o => html `<nile-option value="${o.value}">${o.label}</nile-option>`)}
-            </nile-select>
-          </div>
-          <div class="fc-threshold-field fc-threshold-field--val">
-            <span class="fc-threshold-field-label">Value</span>
-            <nile-input
-              type="number"
-              placeholder="e.g. 10000"
-              .value="${String(val)}"
-              @nile-input="${(e) => { e.stopPropagation(); this._set(`${ctrl.id}__val`, e.detail.value); }}"
-            ></nile-input>
-          </div>
-        </div>
-        <div class="fc-threshold-preview ${hasPreview ? '' : 'fc-threshold-preview--empty'}">
-          ${hasPreview ? html `<strong>Filter:</strong>` : nothing}
-          ${previewText}
-        </div>
-      </div>`;
-    }
-    // ── Tree ─────────────────────────────────────────────────────────────────────
-    // private _renderTree(ctrl: FilterControl): TemplateResult {
-    //   const renderNodes = (nodes: TreeNode[]): TemplateResult[] =>
-    //     nodes.map(node => html`
-    //       <nile-tree-item value="${node.value}" ?expanded="${node.expanded ?? false}">
-    //         <span>${node.label}</span>
-    //         ${node.children ? renderNodes(node.children) : nothing}
-    //       </nile-tree-item>`);
-    //
-    //   return html`
-    //     <nile-tree
-    //       selection="${ctrl.selection === 'multi' ? 'multiple' : 'single'}"
-    //       @nile-selection-change="${(e: CustomEvent) => {
-    //         e.stopPropagation();
-    //         this._set(ctrl.id, e.detail?.detail?.selection ?? []);
-    //       }}"
-    //     >
-    //       ${renderNodes(ctrl.treeData ?? [])}
-    //     </nile-tree>`;
-    // }
-    // ── Preset ───────────────────────────────────────────────────────────────────
-    _renderPreset(ctrl) {
-        const current = this.selectedValues.get(ctrl.id);
-        return html `
-      <div class="fc-preset-list">
-        ${(ctrl.options ?? []).map(opt => html `
-          <button
-            class="fc-preset-item ${current === opt.value ? 'fc-preset-item--selected' : ''}"
-            @click="${() => this._set(ctrl.id, opt.value)}"
-          >
-            ${opt.icon ? html `<span class="fc-preset-icon">${opt.icon}</span>` : nothing}
-            ${opt.label}
-          </button>`)}
-      </div>`;
-    }
-    static async _getCompileExpression() {
-        if (!NileFilterChart_1._filtrexLoading) {
-            NileFilterChart_1._filtrexLoading = import('filtrex').then(m => {
-                const fn = m.compileExpression
-                    ?? m.default?.compileExpression;
-                if (typeof fn !== 'function') {
-                    throw new Error('filtrex: compileExpression export not found');
-                }
-                return fn;
-            });
-        }
-        return NileFilterChart_1._filtrexLoading;
-    }
-    static async _getJsep() {
-        if (!NileFilterChart_1._jsepLoading) {
-            NileFilterChart_1._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 {
-                }
-                return fn;
-            });
-        }
-        return NileFilterChart_1._jsepLoading;
-    }
-    async _handleSubmit(value, ctrl) {
-        const ql = ctrl.queryLanguage;
-        if (!ql?.enabled || (ql.mode ?? 'auto') === 'auto') {
-            this.emit('nile-prompt-submit', { id: ctrl.id, value });
-            if (typeof ctrl.onSubmit === 'function')
-                ctrl.onSubmit(value, ctrl.id);
-            return;
-        }
-        try {
-            const jsep = await NileFilterChart_1._getJsep();
-            const ast = jsep(value);
-            const compileExpression = await NileFilterChart_1._getCompileExpression();
-            const extraFunctions = {
-                ...NileFilterChart_1._builtInFiltrexFns,
-                ...(ql.extraFunctions ?? {}),
-            };
-            const evaluate = compileExpression(value, {
-                extraFunctions,
-                ...(ql.customProp ? { customProp: ql.customProp } : {}),
-            });
-            const json = { source: value, ast };
-            this.emit('nile-prompt-submit', { id: ctrl.id, value: json, evaluate });
-            if (typeof ctrl.onSubmit === 'function')
-                ctrl.onSubmit(json, ctrl.id, evaluate);
+        this.selectedValues.forEach((val, id) => {
+            // Prompt controls in NQL mode with a successful parse emit the
+            // structured `{ source, ast }` payload so downstream consumers get
+            // both the typed text and the parsed shape. Basic mode (and NQL
+            // pre-validation / parse-failure) emit the raw string — the same
+            // shape every other variant uses.
+            const mode = this.promptModes.get(id);
+            const ast = this._promptAsts.get(id);
+            if (mode === 'nql' && ast && typeof val === 'string' && val.trim() !== '') {
+                filters[id] = { source: val, ast };
+            }
+            else {
+                filters[id] = val;
+            }
+        });
+        const detail = { filters };
+        if (this.promptErrors.size > 0) {
+            const errors = {};
+            this.promptErrors.forEach((msg, id) => { errors[id] = msg; });
+            detail.errors = errors;
         }
-        catch (err) {
-            const error = err instanceof Error ? err : new Error(String(err));
-            this.emit('nile-prompt-parse-error', {
-                id: ctrl.id,
-                input: value,
-                error: { message: error.message },
+        if (this._promptEvaluators.size > 0) {
+            // Only surface evaluators for controls whose active mode is NQL.
+            // In Basic / Prompt mode the consumer expects a plain-string payload
+            // — leaking the cached evaluator from the last NQL pass would lie
+            // about what the user has selected.
+            const evaluators = {};
+            this._promptEvaluators.forEach((fn, id) => {
+                if (this.promptModes.get(id) === 'nql')
+                    evaluators[id] = fn;
             });
-            if (typeof ctrl.onParseError === 'function') {
-                ctrl.onParseError(value, error, ctrl.id);
-            }
+            if (Object.keys(evaluators).length > 0)
+                detail.evaluators = evaluators;
         }
+        this.emit('nile-change', detail);
     }
-    _renderPrompt(ctrl) {
-        const value = String(this.selectedValues.get(ctrl.id) ?? '');
-        const animated = this._promptPlaceholder.get(ctrl.id) ?? '';
-        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('; ') + ';' : '';
-        return html `
-      <div class="fc-prompt" part="filter-prompt" style="${inlineStyle}">
-        <div class="fc-prompt__inner">
-          <input
-            class="fc-prompt__input"
-            type="text"
-            autocomplete="off"
-            spellcheck="false"
-            .value="${value}"
-            placeholder="${animated}"
-            @input="${(e) => {
-            const t = e.target;
-            // Update the internal map (also fires the bulk `nile-change`
-            // event with every control's value).
-            this._set(ctrl.id, t.value);
-            // Dedicated, prompt-specific stream — every keystroke emits
-            // just this control's typed string so consumers don't have to
-            // sift through the full filters map for live updates (e.g.
-            // debounced AI suggestions, auto-complete, character counters).
-            this.emit('nile-prompt-input', { id: ctrl.id, value: t.value });
-            // Optional inline callback supplied via the config — same
-            // payload, shaped as a function call instead of an event.
-            if (typeof ctrl.onType === 'function') {
-                ctrl.onType(t.value, ctrl.id);
-            }
-        }}"
-            @keydown="${(e) => {
-            if (e.key === 'Enter') {
-                const t = e.target;
-                this._handleSubmit(t.value, ctrl);
-            }
-        }}"
-          />
-        </div>
-      </div>`;
-    }
-    // ── Card wrapper ─────────────────────────────────────────────────────────────
+    // ── Render ───────────────────────────────────────────────────────────────────
     _renderControl(ctrl) {
         let body;
         switch (ctrl.variant) {
             case 'badge':
-                body = this._renderBadge(ctrl);
+                body = renderBadge(this, ctrl);
                 break;
             case 'dropdown':
-                body = this._renderDropdown(ctrl);
+                body = renderDropdown(this, ctrl);
                 break;
             case 'segmented':
-                body = this._renderSegmented(ctrl);
+                body = renderSegmented(this, ctrl);
                 break;
             case 'radio':
-                body = this._renderRadio(ctrl);
+                body = renderRadio(this, ctrl);
                 break;
             case 'toggle':
-                body = this._renderToggle(ctrl);
+                body = renderToggle(this, ctrl);
                 break;
-            // case 'slider':      body = this._renderSlider(ctrl); break;
             case 'search':
-                body = this._renderSearch(ctrl);
+                body = renderSearch(this, ctrl);
                 break;
             case 'comparison':
-                body = this._renderComparison(ctrl);
+                body = renderComparison(this, ctrl);
                 break;
             case 'threshold':
-                body = this._renderThreshold(ctrl);
+                body = renderThreshold(this, ctrl);
                 break;
-            // case 'tree':        body = this._renderTree(ctrl); break;
             case 'preset':
-                body = this._renderPreset(ctrl);
+                body = renderPreset(this, ctrl);
                 break;
             case 'prompt':
-                body = this._renderPrompt(ctrl);
+                body = renderPrompt(this, ctrl);
+                break;
+            case 'expression':
+                body = renderPrompt(this, {
+                    ...ctrl,
+                    queryLanguage: {
+                        ...(ctrl.queryLanguage ?? {}),
+                        enabled: true,
+                        mode: 'strict',
+                    },
+                });
+                break;
+            case 'hybrid':
+                body = renderPrompt(this, {
+                    ...ctrl,
+                    queryLanguage: {
+                        ...(ctrl.queryLanguage ?? {}),
+                        enabled: true,
+                        mode: ctrl.queryLanguage?.mode ?? 'strict',
+                        toggle: {
+                            basic: { label: ctrl.queryLanguage?.toggle?.basic?.label ?? 'Prompt' },
+                            nql: { label: ctrl.queryLanguage?.toggle?.nql?.label ?? 'Expression' },
+                        },
+                    },
+                });
                 break;
             default: body = html ``;
         }
@@ -596,6 +475,18 @@ let NileFilterChart = NileFilterChart_1 = class NileFilterChart extends NileElem
         <div class="fc-control__body">${body}</div>
       </div>`;
     }
+    /**
+     * If any prompt control in `controls` has its toggle enabled and is currently
+     * in NQL mode, collapse the visible set down to just that prompt — Basic mode
+     * shows everything, JQL mode shows only the expression input.
+     */
+    _filterByPromptMode(controls) {
+        const nqlPrompt = controls.find(c => ((c.variant === 'prompt' && c.queryLanguage?.enabled)
+            || c.variant === 'hybrid'
+            || c.variant === 'expression')
+            && this.promptModes.get(c.id) === 'nql');
+        return nqlPrompt ? [nqlPrompt] : controls;
+    }
     _renderGroup(group) {
         const collapsed = this.collapsedGroups.has(group.label);
         const toggle = () => {
@@ -606,6 +497,7 @@ let NileFilterChart = NileFilterChart_1 = class NileFilterChart extends NileElem
                 next.add(group.label);
             this.collapsedGroups = next;
         };
+        const visible = this._filterByPromptMode(group.controls);
         return html `
       <div class="fc-group" part="filter-group">
         <div class="fc-group__header ${group.collapsible ? 'fc-group__header--collapsible' : ''}"
@@ -620,39 +512,32 @@ let NileFilterChart = NileFilterChart_1 = class NileFilterChart extends NileElem
         </div>
         ${collapsed ? nothing : html `
           <div class="fc-group__body">
-            ${group.controls.map(ctrl => this._renderControl(ctrl))}
+            ${visible.map(ctrl => this._renderControl(ctrl))}
           </div>`}
       </div>`;
     }
     render() {
+        this._normalizeIds();
         const entries = this.config?.chart?.controls ?? [];
+        // Top-level prompt-mode collapse: if a top-level prompt is in NQL mode,
+        // hide its top-level sibling controls (groups stay; their own collapse
+        // happens inside `_renderGroup`).
+        const topLevelControls = entries.filter(e => e.type !== 'group');
+        const visibleTop = new Set(this._filterByPromptMode(topLevelControls));
         return html `
       <div class="fc-root" part="filter-root">
-        ${entries.map(entry => entry.type === 'group'
-            ? this._renderGroup(entry)
-            : this._renderControl(entry))}
+        ${entries.map(entry => {
+            if (entry.type === 'group') {
+                return this._renderGroup(entry);
+            }
+            const ctrl = entry;
+            return visibleTop.has(ctrl) ? this._renderControl(ctrl) : nothing;
+        })}
       </div>`;
     }
 };
-NileFilterChart._builtInFiltrexFns = {
-    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,
-};
-NileFilterChart._filtrexLoading = null;
-NileFilterChart._jsepLoading = null;
+/** Pause after the last keystroke before validating and emitting nile-change. */
+NileFilterChart._PROMPT_DEBOUNCE_MS = 500;
 __decorate([
     property({ attribute: false })
 ], NileFilterChart.prototype, "config", void 0);
@@ -664,7 +549,16 @@ __decorate([
 ], NileFilterChart.prototype, "collapsedGroups", void 0);
 __decorate([
     state()
-], NileFilterChart.prototype, "_promptPlaceholder", void 0);
+], NileFilterChart.prototype, "promptPlaceholder", void 0);
+__decorate([
+    state()
+], NileFilterChart.prototype, "promptErrors", void 0);
+__decorate([
+    state()
+], NileFilterChart.prototype, "promptModes", void 0);
+__decorate([
+    state()
+], NileFilterChart.prototype, "promptActiveIndex", void 0);
 NileFilterChart = NileFilterChart_1 = __decorate([
     customElement('nile-filter-chart')
 ], NileFilterChart);