@aquera/nile-visualization 2.9.2 → 2.9.4

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

@@ -194,6 +194,12 @@ export const styles = css `
     contain: none;
   }
 
+  
+  .nile-chart-inner--filter {
+    overflow: visible;
+    contain: none;
+  }
+
   /* ── Default slot (custom chart body only — not named slots) ── */
   slot:not([name])::slotted(*) {
     display: block;

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

@@ -382,26 +382,112 @@ export const styles = css `
     box-shadow: 0 6px 6px -6px rgba(59, 130, 246, 0.45);
   }
 
-  
+
   .fc-prompt:focus-within {
     box-shadow: 0 8px 8px -6px rgba(59, 130, 246, 0.6);
   }
 
+  .fc-prompt--no-ai-border {
+    padding: 0;
+    background: transparent;
+    animation: none;
+    box-shadow: none;
+  }
+
+  .fc-prompt--no-ai-border:focus-within {
+    box-shadow: none;
+  }
+
+  .fc-prompt--no-ai-border .fc-prompt__inner {
+    border: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));
+  }
+
+  /* ── Error state ─── */
+  /* Drop the animated AI gradient and the 2px outer ring; the error reads
+     as a thin red border directly on the input with a soft focus halo,
+     and a quiet inline message underneath — no heavy box. */
+  .fc-prompt--error {
+    padding: 0;
+    background: transparent;
+    animation: none;
+    box-shadow: none;
+  }
+
+  .fc-prompt--error:focus-within {
+    box-shadow: none;
+  }
+
+  .fc-prompt--error .fc-prompt__inner {
+    background: var(--nile-colors-white-base, var(--ng-colors-bg-primary, #fff));
+    border: 1.5px solid var(--nile-colors-error-500, var(--ng-colors-border-error, #f04438));
+    transition: border-color 0.15s ease, box-shadow 0.15s ease;
+  }
+
+  .fc-prompt--error:focus-within .fc-prompt__inner {
+    border-color: var(--nile-colors-error-600, var(--ng-colors-border-error-strong, #d92d20));
+    box-shadow: 0 0 0 4px rgba(240, 68, 56, 0.14);
+  }
+
+  .fc-prompt__error {
+    display: flex;
+    align-items: center;
+    gap: var(--nile-spacing-6px, var(--ng-spacing-1-5));
+    margin-top: var(--nile-spacing-6px, var(--ng-spacing-1-5));
+    padding: 0 var(--nile-spacing-2px, var(--ng-spacing-0-5));
+    color: var(--nile-colors-error-600, var(--ng-colors-text-error-primary-600, #d92d20));
+    font-size: var(--nile-type-scale-2, var(--ng-font-size-text-xs));
+    line-height: 1.4;
+    animation: fc-prompt-error-in 0.18s ease-out both;
+  }
+
+  .fc-prompt__error-icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 14px;
+    height: 14px;
+    border-radius: 50%;
+    background: var(--nile-colors-error-500, var(--ng-colors-bg-error-solid, #f04438));
+    color: var(--nile-colors-white-base, var(--ng-color-base-white));
+    font-weight: var(--nile-font-weight-bold, var(--ng-font-weight-700));
+    font-size: 10px;
+    line-height: 1;
+    flex-shrink: 0;
+  }
+
+  .fc-prompt__error-msg {
+    flex: 1;
+    word-break: break-word;
+  }
+
+  @keyframes fc-prompt-error-in {
+    from { opacity: 0; transform: translateY(-2px); }
+    to   { opacity: 1; transform: translateY(0); }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .fc-prompt__error { animation: none; }
+  }
+
   .fc-prompt__inner {
     position: relative;
-    display: block;
+    display: flex;
+    align-items: center;
+    gap: var(--nile-spacing-md, var(--ng-spacing-2));
+    padding-right: var(--nile-spacing-md, var(--ng-spacing-2));
     border-radius: var(--nile-radius-radius-xl, var(--ng-radius-md));
     background: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
   }
 
   .fc-prompt__input {
     display: block;
-    width: 100%;
+    flex: 1;
+    min-width: 0;
     border: 0;
     outline: none;
     background: transparent;
     border-radius: inherit;
-    padding: var(--nile-spacing-md, var(--ng-spacing-md)) var(--nile-spacing-lg, var(--ng-spacing-lg));
+    padding: var(--nile-spacing-2xl, var(--ng-spacing-5)) var(--nile-spacing-xl, var(--ng-spacing-4));
     font-family: var(--nile-font-family-serif, var(--ng-font-family-body));
     font-size: var(--nile-type-scale-4, var(--ng-font-size-text-md));
     color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));
@@ -409,6 +495,190 @@ export const styles = css `
     box-sizing: border-box;
   }
 
+  /* ── Mode toggle (Basic / NQL) ─── */
+  /* Uses <nile-button-toggle-group>; pin to the right of the input and
+     shrink the inner segments via the exposed "base" part so the toggle
+     doesn't dominate the prompt height. */
+  .fc-prompt__mode {
+    flex-shrink: 0;
+    align-self: center;
+    margin-left: var(--nile-spacing-md, var(--ng-spacing-2));
+    border-radius: var(--nile-radius-radius-lg, var(--ng-radius-lg));
+    overflow: hidden;
+  }
+
+  .fc-prompt__mode nile-button-toggle::part(base) {
+    height: 32px;
+    padding: 0 var(--nile-spacing-xl, var(--ng-spacing-4));
+    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));
+    letter-spacing: 0.03em;
+    gap: var(--nile-spacing-6px, var(--ng-spacing-1-5));
+  }
+
+  .fc-prompt__mode-icon {
+    display: inline-flex;
+    align-items: center;
+    line-height: 0;
+  }
+
+  /* ── Row layout: prompt input + mode toggle ─── */
+  .fc-prompt-row {
+    display: flex;
+    align-items: stretch;
+    gap: var(--nile-spacing-md, var(--ng-spacing-2));
+    width: 100%;
+  }
+
+  .fc-prompt-row .fc-prompt--row-input {
+    flex: 1;
+    min-width: 0;
+  }
+
+  .fc-prompt__mode nile-button-toggle:first-of-type::part(base) {
+    border-top-left-radius: var(--nile-radius-radius-lg, var(--ng-radius-lg));
+    border-bottom-left-radius: var(--nile-radius-radius-lg, var(--ng-radius-lg));
+  }
+
+  .fc-prompt__mode nile-button-toggle:last-of-type::part(base) {
+    border-top-right-radius: var(--nile-radius-radius-lg, var(--ng-radius-lg));
+    border-bottom-right-radius: var(--nile-radius-radius-lg, var(--ng-radius-lg));
+  }
+
+  /* ── Field wrapper + syntax-highlight overlay ─── */
+  /* The wrapper holds two layered elements:                              */
+  /*   1) .fc-prompt__highlight — paints the typed text in coloured spans.*/
+  /*   2) .fc-prompt__input     — transparent text, visible caret, takes  */
+  /*      keyboard input.                                                 */
+  /* Both elements share the SAME font + padding + line-height so token   */
+  /* positions align exactly. The overlay is non-interactive.             */
+  .fc-prompt__field {
+    position: relative;
+    flex: 1;
+    min-width: 0;
+    display: block;
+  }
+  .fc-prompt__field--highlight .fc-prompt__highlight,
+  .fc-prompt__field--highlight .fc-prompt__input {
+    box-sizing: border-box;
+    padding: var(--nile-spacing-md, var(--ng-spacing-2)) var(--nile-spacing-xl, var(--ng-spacing-4));
+    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));
+    font-size: var(--nile-type-scale-4, var(--ng-font-size-text-md));
+    font-weight: 400;
+    line-height: 1.4;
+    letter-spacing: normal;
+    white-space: pre;
+  }
+
+  .fc-prompt__highlight {
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));
+    /* overflow-x: auto (not hidden) so JS can sync scrollLeft to the input's
+       native horizontal scroll. Without it, white-space: pre content spills
+       past the field's right edge and visually overlaps the mode toggle.
+       Scrollbar is suppressed since the overlay is non-interactive (only the
+       input below it scrolls via keyboard). */
+    overflow-x: auto;
+    overflow-y: hidden;
+    scrollbar-width: none; /* Firefox */
+  }
+  .fc-prompt__highlight::-webkit-scrollbar { display: none; } /* Chrome / Safari */
+
+  .fc-prompt__input {
+    position: relative;
+    display: block;
+    width: 100%;
+    border: 0;
+    outline: none;
+    background: transparent;
+    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));
+    caret-color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));
+  }
+
+  /* When the syntax-highlight overlay is on (filtrex modes only) the input
+     itself is transparent — only the overlay paints the typed text. */
+  .fc-prompt__field--highlight .fc-prompt__input {
+    color: transparent;
+  }
+
+  /* ── Custom suggestion dropdown ─── */
+  /* Hidden by default; shown only when fc-prompt__inner has focus-within.*/
+  /* Mousedown on a suggestion preventDefaults to keep input focus, so    */
+  /* the dropdown stays open across picks. Click outside → focus-within   */
+  /* fails → dropdown hides.                                              */
+  .fc-prompt__suggestions {
+    display: none;
+    position: absolute;
+    top: calc(100% + 6px);
+    left: 0;
+    right: 0;
+    z-index: 20;
+    flex-direction: column;
+    max-height: 280px;
+    overflow-y: auto;
+    background: var(--nile-colors-white-base, var(--ng-colors-bg-primary));
+    border: 1px solid var(--nile-colors-neutral-400, var(--ng-colors-border-secondary));
+    border-radius: var(--nile-radius-md, var(--ng-radius-md));
+    box-shadow: 0 12px 24px -8px rgba(16, 24, 40, 0.12),
+                0 4px 8px -2px rgba(16, 24, 40, 0.06);
+    padding: var(--nile-spacing-4px, var(--ng-spacing-1));
+  }
+
+  .fc-prompt__inner:focus-within .fc-prompt__suggestions {
+    display: flex;
+  }
+
+  .fc-prompt__suggestion {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--nile-spacing-md, var(--ng-spacing-2));
+    width: 100%;
+    padding: var(--nile-spacing-8px, var(--ng-spacing-2)) var(--nile-spacing-md, var(--ng-spacing-2));
+    border: 0;
+    border-radius: var(--nile-radius-sm, var(--ng-radius-sm));
+    background: transparent;
+    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));
+    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));
+    font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-500));
+    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));
+    cursor: pointer;
+    text-align: left;
+    transition: background 0.1s ease;
+  }
+
+  .fc-prompt__suggestion:hover {
+    background: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary));
+  }
+  /* Keyboard-highlighted state — distinct from hover via brand-tinted bg
+     and a left accent bar so it's obvious which row Enter will select. */
+  .fc-prompt__suggestion--active,
+  .fc-prompt__suggestion--active:hover {
+    background: var(--nile-colors-blue-50, var(--ng-colors-bg-brand-secondary, #eff6ff));
+    box-shadow: inset 3px 0 0 var(--nile-colors-blue-500, var(--ng-colors-bg-brand-solid, #3b82f6));
+  }
+
+  .fc-prompt__suggestion-label {
+    flex: 1;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .fc-prompt__suggestion-tag {
+    flex-shrink: 0;
+    padding: 1px 8px;
+    border-radius: var(--nile-radius-full, var(--ng-radius-full));
+    background: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary));
+    color: var(--nile-colors-neutral-700, var(--ng-colors-text-quaternary-500));
+    font-size: 10px;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+  }
+
   .fc-prompt__input::placeholder {
     color: var(--nile-colors-neutral-700, var(--ng-colors-text-secondary-700));
     opacity: 0.85;

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

@@ -1,228 +1,81 @@
 import { CSSResultArray, TemplateResult } from 'lit';
 import NileElement from '../internal/nile-element.js';
-export type NileTagVariant = 'primary' | 'success' | 'normal' | 'warning' | 'error' | 'info';
-export interface FilterOption {
-    label: string;
-    value: string;
-    /** Optional color dot (CSS color string). */
-    color?: string;
-    /** Optional nile-tag semantic variant — uses ng tokens directly (preferred over color). */
-    ngVariant?: NileTagVariant;
-    /** Optional icon name for preset variant. */
-    icon?: string;
-}
-export interface TreeNode {
-    label: string;
-    value: string;
-    expanded?: boolean;
-    children?: TreeNode[];
-}
-export interface QueryLanguageConfig {
-    /** Enables the query layer at all. Default: false. */
-    enabled: boolean;
-    /**
-     * - `'auto'`   → submit emits the raw typed string.
-     * - `'strict'` → submit parses the input with filtrex and emits a
-     *                pure-JSON payload (`{ source }`) plus a sibling
-     *                `evaluate` function on the event detail. On
-     *                parse failure, `nile-prompt-parse-error` fires and
-     *                `nile-prompt-submit` does NOT fire.
-     * Default: `'auto'`.
-     */
-    mode?: 'auto' | 'strict';
-    /** Parser engine. Currently only `'filtrex'` is supported. */
-    engine?: 'filtrex';
-    /** Optional hint text shown beneath the input describing the syntax. */
-    syntaxHint?: string;
-    /**
-     * Extra functions registered with filtrex on top of the built-in set.
-     * Each function receives the resolved argument values from the
-     * expression and returns a value usable in further comparisons.
-     *
-     * Example: `{ daysAgo: (d) => (Date.now() - +new Date(d)) / 86400000 }`
-     * Used in expressions like `daysAgo(lastSeen) < 7`.
-     */
-    extraFunctions?: Record<string, (...args: any[]) => unknown>;
-    /**
-     * Optional value-getter for accessing row properties. Filtrex calls
-     * this for every identifier reference. Default: dotted property
-     * access (`row.foo.bar` works out of the box).
-     *
-     * Override when your data model uses a Map / class / proxy that
-     * standard property access can't read.
-     */
-    customProp?: (name: string, get: (key: string) => unknown, obj: unknown) => unknown;
-}
-/**
- * Recursive ESTree-shaped node returned by the AST parser. The shape
- * matches what `jsep` produces — a small, well-known JS-expression AST.
- * Pure JSON: every field is a string, number, boolean, null, or another
- * `QueryNode`, so `JSON.stringify` round-trips cleanly.
- */
-export type QueryNode = {
-    type: 'Identifier';
-    name: string;
-} | {
-    type: 'Literal';
-    value: string | number | boolean | null;
-    raw?: string;
-} | {
-    type: 'BinaryExpression';
-    operator: string;
-    left: QueryNode;
-    right: QueryNode;
-} | {
-    type: 'LogicalExpression';
-    operator: string;
-    left: QueryNode;
-    right: QueryNode;
-} | {
-    type: 'UnaryExpression';
-    operator: string;
-    argument: QueryNode;
-    prefix: boolean;
-} | {
-    type: 'CallExpression';
-    callee: QueryNode;
-    arguments: QueryNode[];
-} | {
-    type: 'MemberExpression';
-    computed: boolean;
-    object: QueryNode;
-    property: QueryNode;
-} | {
-    type: 'ArrayExpression';
-    elements: QueryNode[];
-} | {
-    type: 'Compound';
-    body: QueryNode[];
-};
-export type QueryJson = {
-    /** The exact string the user typed, retained for display / serialization. */
-    source: string;
-    ast: QueryNode;
-};
-export type QuerySubmitDetail = {
-    id: string;
-    /** JSON-serializable payload — string in auto mode, `QueryJson` in strict. */
-    value: string | QueryJson;
-    /** Compiled filtrex predicate. Only present in strict mode on success.
-     *  Use as `data.filter(e.detail.evaluate)`. */
-    evaluate?: (row: unknown) => unknown;
-};
-export interface FilterControl {
-    id: string;
-    label: string;
-    /** Optional subtitle shown below the label. */
-    description?: string;
-    selection: 'single' | 'multi';
-    variant: 'badge' | 'dropdown' | 'segmented' | 'radio' | 'toggle' | 'slider' | 'search' | 'comparison' | 'threshold' | 'tree' | 'preset' | 'prompt';
-    options?: FilterOption[];
-    value?: string | string[] | number[] | boolean;
-    min?: number;
-    max?: number;
-    step?: number;
-    prefix?: string;
-    suffix?: string;
-    placeholder?: string;
-    placeholders?: string[];
-    /** Typewriter speed in ms per character (default 60). */
-    typeSpeedMs?: number;
-    /** Pause before deleting a typed phrase (default 1400). */
-    pauseBeforeDeleteMs?: number;
-    /** Pause between phrases after deletion (default 400). */
-    pauseBetweenMs?: number;
-    /**
-     * Prompt variant only. Inline callback invoked on every keystroke with
-     * the current value of the input (the typed string) and the control id.
-     * Called *in addition to* the `nile-prompt-input` event — use whichever
-     * suits the consumer's wiring style.
-     */
-    onType?: (value: string, id: string) => void;
-    /**
-     * Prompt variant only. Inline callback invoked when the user presses
-     * Enter inside the prompt input. Called in addition to the
-     * `nile-prompt-submit` event.
-     *
-     *   - auto mode (default)  → `value` is the raw `string` the user typed.
-     *   - strict mode (success) → `value` is a `QueryJson` (pure-JSON
-     *                              `{ source }`); the compiled predicate is
-     *                              passed as the third argument so callers
-     *                              that want to filter inline can. JSON
-     *                              consumers can ignore that argument.
-     *   - strict mode (parse fail) → routes through `onParseError` instead;
-     *                              `onSubmit` is NOT called.
-     */
-    onSubmit?: (value: string | QueryJson, id: string, evaluate?: (row: unknown) => unknown) => void;
-    /**
-     * Prompt variant only. Inline callback invoked when `queryLanguage.mode`
-     * is `'strict'` and the user-typed expression FAILS to parse on submit.
-     * Mirrors the `nile-prompt-parse-error` event.
-     */
-    onParseError?: (input: string, error: Error, id: string) => void;
-    queryLanguage?: QueryLanguageConfig;
-    gradientColors?: string[];
-    gradientDirection?: string;
-    gradientSpeedMs?: number;
-    valueB?: string;
-    operator?: string;
-    thresholdValue?: number | string;
-    treeData?: TreeNode[];
-}
-export interface FilterGroup {
-    type: 'group';
-    label: string;
-    description?: string;
-    collapsible?: boolean;
-    controls: FilterControl[];
-}
-export type FilterEntry = FilterControl | FilterGroup;
-export type FilterChartConfig = {
-    type: 'filter';
-    controls: FilterEntry[];
-    [key: string]: unknown;
-};
-export type FilterChartSeparatedPayload = {
-    chart: FilterChartConfig;
-    aq?: Record<string, unknown>;
-};
-export declare class NileFilterChart extends NileElement {
+import type { FilterChartHost, FilterChartSeparatedPayload, NormalizedFilterControl, PromptMode } from './utils/types.js';
+export type { NileTagVariant, FilterOption, QueryLanguageConfig, QueryNode, QueryJson, FilterChangeDetail, FilterControl, FilterGroup, FilterEntry, FilterChartConfig, FilterChartSeparatedPayload, PromptMode, } from './utils/types.js';
+export declare class NileFilterChart extends NileElement implements FilterChartHost {
     static get styles(): CSSResultArray;
     config: FilterChartSeparatedPayload | null;
-    private selectedValues;
+    selectedValues: Map<string, unknown>;
     private collapsedGroups;
     /** Currently displayed (animated) placeholder text per prompt-variant control id. */
-    private _promptPlaceholder;
+    promptPlaceholder: Map<string, string>;
+    /** Validation messages per prompt control id (strict-mode parse failures). */
+    promptErrors: Map<string, string>;
+    /** Runtime mode per prompt control id. Only populated for controls with `queryLanguage.enabled`. */
+    promptModes: Map<string, PromptMode>;
+    /** Highlighted suggestion index per prompt control id (-1 = none highlighted). */
+    promptActiveIndex: Map<string, number>;
     /** Active typewriter timers per prompt control id (so we can stop them). */
     private _promptTimers;
+    /** Compiled filtrex predicates per prompt control id (strict-mode successes). */
+    private _promptEvaluators;
+    /** Parsed AST per prompt control id (strict-mode successes). */
+    private _promptAsts;
+    /** Monotonic per-control token used to ignore stale async validations. */
+    private _validationTokens;
+    /** Pending debounce timers for prompt input — gates validation + nile-change emission. */
+    private _promptDebounce;
+    /** Pause after the last keystroke before validating and emitting nile-change. */
+    private static readonly _PROMPT_DEBOUNCE_MS;
     connectedCallback(): void;
     disconnectedCallback(): void;
     updated(changed: Map<string, unknown>): void;
+    setValue(id: string, value: unknown): void;
+    /**
+     * 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: NormalizedFilterControl, value: string): void;
+    /**
+     * 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: NormalizedFilterControl, mode: PromptMode): void;
+    /**
+     * Force-validate a prompt's current value. Used by `validateOn: 'submit'`
+     * on Enter — bypasses the debounce and runs validation right away.
+     */
+    submitPrompt(ctrl: NormalizedFilterControl): void;
+    setPromptActiveIndex(id: string, idx: number): void;
+    private _validateOrClear;
+    private _clearPromptValidation;
     private _syncPromptAnimations;
     private _startPromptAnimation;
     private _stopPromptAnimation;
     private _stopAllPromptAnimations;
+    /**
+     * 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).
+     */
+    private _normalizeIds;
     private _flatControls;
     private _initValues;
-    private _set;
     private _emitChange;
-    private _renderBadge;
-    private _renderDropdown;
-    private _renderSegmented;
-    private _renderRadio;
-    private _renderToggle;
-    private _renderSearch;
-    private _renderComparison;
-    private _renderThreshold;
-    private _renderPreset;
-    private static readonly _builtInFiltrexFns;
-    private static _filtrexLoading;
-    private static _getCompileExpression;
-    private static _jsepLoading;
-    private static _getJsep;
-    private _handleSubmit;
-    private _renderPrompt;
     private _renderControl;
+    /**
+     * 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.
+     */
+    private _filterByPromptMode;
     private _renderGroup;
     render(): TemplateResult;
 }