@aquera/nile-visualization 2.9.8 → 2.9.10

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

@@ -1,4 +1,9 @@
 import { html, nothing } from 'lit';
+import { live } from 'lit/directives/live.js';
+import { ref } from 'lit/directives/ref.js';
+// Per-element ResizeObserver bookkeeping. WeakMap so observers are GC'd
+// alongside their elements when the prompt is unmounted.
+const _fieldObservers = new WeakMap();
 const PUNCT_TOKENS = new Set(['(', ')', '[', ']', ',']);
 /**
  * Splits the input into the tokens analyzePromptCtx reasons about:
@@ -227,21 +232,28 @@ export async function validatePromptExpression(value, ctrl) {
     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.
+ * Renders one segment of the Prompt / Expression toggle. Defaults: Prompt
+ * shows "Prompt"; Expression shows "Expression". 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 defaults = segValue === 'prompt'
+        ? { label: 'Prompt', icon: undefined, aria: 'Prompt mode', glyph: 'ng-sparkles' }
+        : { label: 'Expression', icon: undefined, aria: 'Expression mode', glyph: 'ng-code' };
     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}
+      ${label ? html `<span class="fc-prompt__mode-label">${label}</span>` : nothing}
+      <nile-glyph
+        class="fc-prompt__mode-glyph"
+        name="${defaults.glyph}"
+        size="14"
+        method="stroke"
+        aria-hidden="true"
+      ></nile-glyph>
     </nile-button-toggle>
   `;
 }
@@ -255,23 +267,16 @@ function renderModeToggle(host, ctrl, mode) {
       @nile-change="${(e) => {
         e.stopPropagation();
         const next = e.detail?.value;
-        if (next === 'basic' || next === 'nql')
+        if (next === 'prompt' || next === 'expression')
             host.setPromptMode(ctrl, next);
     }}"
     >
-      ${renderModeToggleSegment('nql', toggleCfg?.nql)}
-      ${renderModeToggleSegment('basic', toggleCfg?.basic)}
+      ${renderModeToggleSegment('expression', toggleCfg?.expression)}
+      ${renderModeToggleSegment('prompt', toggleCfg?.prompt)}
     </nile-button-toggle-group>
   `;
 }
-/**
- * Layout-only global stylesheet for the portaled suggestion menu. The portal
- * clones the panel into document.body, so component-scoped CSS can't reach
- * it — these two rules use nile-menu-item's exposed `label` part to grow the
- * label so the suffix (type pill) sticks to the row's right edge, and style
- * the pill itself. Idempotent: bails if already injected.
- */
-const SUGGESTION_LAYOUT_STYLE_ID = 'fc-prompt-suggestion-layout';
+const SUGGESTION_LAYOUT_STYLE_ID = 'fc-prompt-suggestion-layout-v4';
 function ensureSuggestionLayoutStyles() {
     if (typeof document === 'undefined')
         return;
@@ -283,6 +288,41 @@ function ensureSuggestionLayoutStyles() {
     .fc-prompt__menu nile-menu-item::part(label) {
       flex: 1;
       min-width: 0;
+      overflow: hidden;
+    }
+
+    .fc-prompt__suggestion-label {
+      display: block;
+      max-width: 100%;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+   
+    .fc-prompt__suggestion-tooltip {
+      display: block;
+      flex: 1;
+      min-width: 0;
+      overflow: hidden;
+    }
+ 
+   
+   
+    [data-tippy-root] {
+      max-width: var(--fc-prompt-tooltip-max-width, 320px);
+    }
+    [data-tippy-root] > .tippy-box,
+    .tippy-box[data-theme~='lite'] {
+      max-width: var(--fc-prompt-tooltip-max-width, 320px);
+      white-space: normal;
+      overflow-wrap: anywhere;
+      word-break: break-word;
+    }
+    [data-tippy-root] > .tippy-box > .tippy-content {
+      white-space: normal;
+      overflow-wrap: anywhere;
+      word-break: break-word;
+      max-width: 100%;
     }
     .fc-prompt__suggestion-tag {
       flex-shrink: 0;
@@ -304,16 +344,26 @@ export function renderPrompt(host, ctrl) {
     const animated = host.promptPlaceholder.get(ctrl.id) ?? '';
     const error = host.promptErrors.get(ctrl.id);
     const mode = host.promptModes.get(ctrl.id);
+    // Pick the placeholder for the active mode. Hybrid/Expression variants
+    // can expose mode-specific lists; everything else falls back to the shared
+    // `placeholders[0]`. The animated typewriter (when active) overrides all.
+    const supportsModePlaceholders = ctrl.variant === 'hybrid' || ctrl.variant === 'expression';
+    const modePlaceholder = supportsModePlaceholders && mode === 'expression' && ctrl.expressionPlaceholders?.length
+        ? ctrl.expressionPlaceholders[0]
+        : supportsModePlaceholders && mode === 'prompt' && ctrl.promptPlaceholders?.length
+            ? ctrl.promptPlaceholders[0]
+            : (ctrl.placeholders?.[0] ?? '');
+    const placeholder = animated || modePlaceholder;
     // 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`)
+    //   - `hybrid` variant     → only when the toggle is on Expression
     //   - `prompt` variant     → never (plain free text)
     const isFiltrexMode = ctrl.variant === 'expression'
-        || (ctrl.variant === 'hybrid' && mode === 'nql');
+        || (ctrl.variant === 'hybrid' && mode === 'expression');
     const styleParts = [];
     if (ctrl.gradientColors && ctrl.gradientColors.length > 0) {
         const dir = ctrl.gradientDirection ?? '90deg';
@@ -376,7 +426,7 @@ export function renderPrompt(host, ctrl) {
             default:
                 return userSuggestions.filter(s => s.type === 'attribute'
                     || s.type === 'function'
-                    || s.type === 'snippet'
+                    || s.type === 'suggestion'
                     || !s.type);
         }
     })();
@@ -511,10 +561,19 @@ export function renderPrompt(host, ctrl) {
         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;
-            }
+            if (!inputEl.isConnected || !atEnd())
+                return;
+            // Over-scroll past max so the browser pins to the absolute righ t edge.
+            inputEl.scrollLeft = inputEl.scrollWidth + 100;
+            // Explicitly re-sync the overlay AFTER Lit has re-rendered its tokens
+            // for the new value. Relying on @scroll for this fails: that event
+            // fires when the browser scrolls the input on keystroke (BEFORE the
+            // re-render), at which point the overlay's old, shorter content
+            // clamps the synced scrollLeft to its stale max — leaving the typed
+            // glyph offscreen and the caret visually one char ahead of the text.
+            const highlightEl = inputEl.parentElement?.querySelector('.fc-prompt__highlight');
+            if (highlightEl)
+                highlightEl.scrollLeft = inputEl.scrollLeft;
         });
     };
     const pickItem = (item, inputEl) => {
@@ -621,17 +680,19 @@ export function renderPrompt(host, ctrl) {
             }
             return;
         }
+        if (e.key === 'Tab' && !e.shiftKey && len > 0) {
+            const idx = current >= 0 ? current : 0;
+            e.preventDefault();
+            e.stopPropagation();
+            pickItem(suggestionData[idx], inputEl);
+            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');
@@ -640,7 +701,7 @@ export function renderPrompt(host, ctrl) {
     };
     const classes = [
         'fc-prompt',
-        ctrl.noAiBorder ? 'fc-prompt--no-ai-border' : '',
+        ctrl.aiBorder ? 'fc-prompt--ai-border' : '',
         error ? 'fc-prompt--error' : '',
     ].filter(Boolean).join(' ');
     const onFocus = () => host.setPromptFocused(ctrl.id, true);
@@ -664,6 +725,27 @@ export function renderPrompt(host, ctrl) {
     };
     const isFocused = host.promptFocusedId === ctrl.id;
     const dropdownOpen = isFiltrexMode && isFocused && suggestionData.length > 0;
+    // Clears the prompt value, fires the existing `nile-change` flow (via
+    // submitPrompt → _emitChange) and additionally emits a dedicated
+    // `nile-clear` event so consumers can distinguish a user-initiated clear
+    // from a normal value change. `source` lets them tell the two surfaces
+    // apart ('icon' = in-input cross, 'button' = sibling Clear filter button).
+    const clearValue = (e, source) => {
+        host.handlePromptInput(ctrl, '');
+        host.submitPrompt(ctrl);
+        host.setPromptActiveIndex(ctrl.id, -1);
+        host.emit('nile-clear', { id: ctrl.id, source });
+        const target = e.currentTarget;
+        const root = (target?.getRootNode() ?? document);
+        const inputId = `fc-prompt-${ctrl.id}`;
+        requestAnimationFrame(() => {
+            const inp = root.querySelector(`#${CSS.escape(inputId)}`);
+            if (!inp)
+                return;
+            inp.value = '';
+            inp.focus({ preventScroll: true });
+        });
+    };
     return html `
     <div class="fc-prompt-row">
       <div class="${classes} fc-prompt--row-input" part="filter-prompt" style="${inlineStyle}">
@@ -683,30 +765,64 @@ export function renderPrompt(host, ctrl) {
               slot="trigger"
               class="fc-prompt__field${isFiltrexMode ? ' fc-prompt__field--highlight' : ''}"
               part="filter-prompt-field"
+              ${ref((el) => {
+        if (!el)
+            return;
+        if (_fieldObservers.has(el))
+            return;
+        const obs = new ResizeObserver(([entry]) => {
+            if (entry)
+                host.setPromptFieldWidth(ctrl.id, entry.contentRect.width);
+        });
+        obs.observe(el);
+        _fieldObservers.set(el, obs);
+        host.setPromptFieldWidth(ctrl.id, el.getBoundingClientRect().width);
+    })}
             >
-              ${isFiltrexMode ? html `
-                <div class="fc-prompt__highlight" aria-hidden="true">${tokens.map((tok) => {
+              <div class="fc-prompt__field-input">
+                ${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>`;
+        return html `<span style="color:${color};">${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="${placeholder}"
+                  .value="${live(value)}"
+                  @input="${onInput}"
+                  @keydown="${onKeyDown}"
+                  @scroll="${onScroll}"
+                  @focus="${onFocus}"
+                  @blur="${onBlur}"
+                />
+              </div>
+              ${value && ctrl.showClearIcon !== false ? html `
+                <nile-button
+                  variant="ghost"
+                  class="fc-prompt__clear-icon"
+                  aria-label="Clear input"
+                  title="Clear"
+                  @mousedown="${(e) => e.preventDefault()}"
+                  @click="${(e) => clearValue(e, 'icon')}"
+                >
+                  <nile-glyph
+                    slot="prefix"
+                    name="close"
+                    size="14"
+                    method="fill"
+                    color="var(--nile-colors-neutral-700, var(--ng-colors-text-quaternary-500, #6b7280))"
+                  ></nile-glyph>
+                </nile-button>
               ` : 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}"
-                @focus="${onFocus}"
-                @blur="${onBlur}"
-              />
+              ${showToggle ? renderModeToggle(host, ctrl, mode) : nothing}
             </div>
             ${isFiltrexMode && suggestionData.length > 0 ? html `
               <nile-menu
@@ -717,28 +833,45 @@ export function renderPrompt(host, ctrl) {
         if (!item)
             return;
         const inputId = `fc-prompt-${ctrl.id}`;
-        const root = e.currentTarget.getRootNode();
-        const inputEl = (root.querySelector(`#${CSS.escape(inputId)}`)
-            ?? document.getElementById(inputId));
+        // The dropdown is portaled to <body>, so the bubbled
+        // event's root is `document` — not the chart's shadow
+        // root that owns the input. Look the input up via the
+        // host's shadow root directly.
+        const inputEl = host.shadowRoot
+            ?.querySelector(`#${CSS.escape(inputId)}`);
         if (inputEl)
             pickItem(item, inputEl);
     }}"
               >
-                ${suggestionData.map((item, idx) => html `
+                ${suggestionData.map((item, idx) => {
+        const fieldWidth = host.promptFieldWidth.get(ctrl.id) ?? 320;
+        const charBudget = Math.max(8, Math.floor((fieldWidth - 80) / 7));
+        const isTruncated = item.label.length > charBudget;
+        const wantsTooltip = ctrl.suggestionTooltip && isTruncated;
+        const showTypeBadge = fieldWidth >= 480;
+        return html `
                   <nile-menu-item
                     class="fc-prompt__suggestion"
-                    part="filter-prompt-suggestion${idx === activeIdx ? ' filter-prompt-suggestion-active' : ''}"
                     value="${idx}"
                     ?active="${idx === activeIdx}"
                   >
-                    ${item.label}
-                    ${item.type ? html `<span slot="suffix" class="fc-prompt__suggestion-tag">${item.type}</span>` : nothing}
-                  </nile-menu-item>
-                `)}
+                    ${wantsTooltip
+            ? html `<nile-lite-tooltip
+                          hoist
+                          placement="top"
+                          content="${item.label}"
+                          class="fc-prompt__suggestion-tooltip"
+                          .maxWidth=${fieldWidth}
+                        >
+                          <span class="fc-prompt__suggestion-label">${item.label}</span>
+                        </nile-lite-tooltip>`
+            : html `<span class="fc-prompt__suggestion-label">${item.label}</span>`}
+                    ${item.type && showTypeBadge ? html `<span slot="suffix" class="fc-prompt__suggestion-tag">${item.type}</span>` : nothing}
+                  </nile-menu-item>`;
+    })}
               </nile-menu>
             ` : nothing}
           </nile-dropdown>
-          ${showToggle ? renderModeToggle(host, ctrl, mode) : nothing}
         </div>
         ${error ? html `
           <div class="fc-prompt__error" role="alert">
@@ -747,6 +880,23 @@ export function renderPrompt(host, ctrl) {
           </div>
         ` : nothing}
       </div>
+      ${ctrl.showClearButton === true ? html `
+        <nile-button
+          variant="secondary"
+          class="fc-prompt__clear-filter"
+          ?disabled="${!value}"
+          @click="${(e) => clearValue(e, 'button')}"
+        >
+          <nile-glyph
+            slot="prefix"
+            name="close"
+            size="14"
+            method="fill"
+            color="currentColor"
+          ></nile-glyph>
+          Clear
+        </nile-button>
+      ` : nothing}
     </div>`;
 }
 //# sourceMappingURL=prompt.js.map

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

@@ -30,13 +30,13 @@ export interface SuggestionItem {
      *   - `attribute` → field position (status, priority, …)
      *   - `operator`  → after a known field (==, !=, <, …)
      *   - `value`     → after `<attr> <op>` (scope per-attribute by setting `id` to the attribute's id)
-     *   - `connector` → after a complete predicate (and, or, not, in)
-     *   - `keyword`   → trailing SQL-ish keywords (ORDER BY, ASC, DESC, LIMIT)
-     *   - `function`  → callable templates (abs(value), …)
-     *   - `snippet`   → ready-made full expressions
-     *   - `clause`    → DEPRECATED. Treated as `connector` at routing time.
+     *   - `connector`  → after a complete predicate (and, or, not, in)
+     *   - `keyword`    → trailing SQL-ish keywords (ORDER BY, ASC, DESC, LIMIT)
+     *   - `function`   → callable templates (abs(value), …)
+     *   - `suggestion` → ready-made full expressions
+     *   - `clause`     → DEPRECATED. Treated as `connector` at routing time.
      */
-    type?: 'attribute' | 'operator' | 'value' | 'connector' | 'keyword' | 'function' | 'snippet' | 'clause';
+    type?: 'attribute' | 'operator' | 'value' | 'connector' | 'keyword' | 'function' | 'suggestion' | 'clause';
     /** Legacy: text inserted on pick. New shape uses `label` for both. */
     value?: string;
     /** Legacy: muted secondary text. */
@@ -46,25 +46,25 @@ export interface SuggestionItem {
 }
 /** Visual config for one segment of the prompt's mode toggle. */
 export interface PromptModeToggleOption {
-    /** Visible text inside the segment. Defaults: 'Expression' for basic, '' for nql. */
+    /** Visible text inside the segment. Defaults: `'Prompt'` for the prompt segment, `'Expression'` for the expression segment. */
     label?: string;
-    /** nile-glyph icon name (e.g. `'ng-ai_magic'`). Defaults: none for basic, `'ng-ai_magic'` for nql. */
+    /** nile-glyph icon name (e.g. `'ng-ai_magic'`). Defaults: none. */
     icon?: string;
     /** ARIA label for screen readers — required when the segment is icon-only. */
     ariaLabel?: string;
 }
-/** Override the Basic / NQL toggle's two segments. */
+/** Override the Prompt / Expression toggle's two segments. */
 export interface PromptModeToggleConfig {
-    basic?: PromptModeToggleOption;
-    nql?: PromptModeToggleOption;
+    prompt?: PromptModeToggleOption;
+    expression?: PromptModeToggleOption;
 }
 export interface QueryLanguageConfig {
     /** Enables the query layer at all. Default: false. */
     enabled: boolean;
     /**
-     * Customise the Basic / NQL mode toggle's segments. Defaults:
-     *   - basic → label `'Basic'`
-     *   - nql   → label `'JQL'`
+     * Customise the Prompt / Expression mode toggle's segments. Defaults:
+     *   - prompt     → label `'Prompt'`
+     *   - expression → label `'Expression'`
      * Either segment can be overridden with a label, an icon, or both.
      */
     toggle?: PromptModeToggleConfig;
@@ -211,14 +211,14 @@ export type QueryJson = {
  * Detail emitted with `nile-change`.
  *
  * `filters[id]` shape depends on the variant + (for prompts) the runtime mode:
- *   - any non-prompt variant      → the variant's natural value
- *   - prompt in `'basic'` mode    → plain `string` (raw text)
- *   - prompt in `'nql'` mode,
- *     parse succeeded             → `QueryJson` ({ source, ast }) — JSON-serializable
- *   - prompt in `'nql'` mode,
- *     pre-validation / parse fail → plain `string` (the typed text)
+ *   - any non-prompt variant            → the variant's natural value
+ *   - prompt in `'prompt'` mode         → plain `string` (raw text)
+ *   - prompt in `'expression'` mode,
+ *     parse succeeded                   → `QueryJson` ({ source, ast }) — JSON-serializable
+ *   - prompt in `'expression'` mode,
+ *     pre-validation / parse fail       → plain `string` (the typed text)
  *
- * `errors` and `evaluators` are populated for prompt controls in NQL mode.
+ * `errors` and `evaluators` are populated for prompt controls in Expression mode.
  */
 export type FilterChangeDetail = {
     filters: Record<string, unknown>;
@@ -246,10 +246,26 @@ export interface FilterControl {
     /**
      * Placeholder text. Always an array — `placeholders[0]` is the initial /
      * static placeholder used by every variant (search, dropdown, prompt).
-     * For the `prompt` variant only, additional entries are cycled through
-     * with a typewriter effect.
+     * For the `prompt`, `hybrid`, and `expression` variants, additional
+     * entries are cycled through with a typewriter effect.
+     *
+     * For `hybrid`, you can supply mode-specific overrides via
+     * `promptPlaceholders` and `expressionPlaceholders`; when present they
+     * take precedence over `placeholders` for that mode.
      */
     placeholders?: string[];
+    /**
+     * Hybrid variant only. Placeholder phrases used while the toggle is on
+     * the Prompt side. Cycled with the typewriter effect when multiple
+     * entries are provided. Falls back to `placeholders` when unset.
+     */
+    promptPlaceholders?: string[];
+    /**
+     * Hybrid variant only. Placeholder phrases used while the toggle is on
+     * the Expression side. Cycled with the typewriter effect when multiple
+     * entries are provided. Falls back to `placeholders` when unset.
+     */
+    expressionPlaceholders?: string[];
     /** Typewriter speed in ms per character (default 60). */
     typeSpeedMs?: number;
     /** Pause before deleting a typed phrase (default 1400). */
@@ -260,8 +276,13 @@ export interface FilterControl {
     gradientColors?: string[];
     gradientDirection?: string;
     gradientSpeedMs?: number;
-    /** Prompt variant only. When true, disables the animated AI gradient border. */
-    noAiBorder?: boolean;
+    aiBorder?: boolean;
+    /**
+     * Prompt variant only. Shows the inline clear (×) icon inside the input
+     * when the value is non-empty. Defaults to `false` (hidden). Set `true` to
+     * opt in.
+     */
+    showClearIcon?: boolean;
     /**
      * Prompt variant only. Inline autocomplete suggestions shown below the
      * input when the prompt is focused (Basic mode). Items are filtered
@@ -275,6 +296,8 @@ export interface FilterControl {
      *   - `'append'`            → appends the suggestion to the existing text (space-separated)
      */
     suggestionInsert?: 'replace' | 'append';
+    suggestionTooltip?: boolean;
+    showClearButton?: boolean;
     valueB?: string;
     operator?: string;
     thresholdValue?: number | string;
@@ -290,6 +313,12 @@ export type FilterEntry = FilterControl | FilterGroup;
 export type FilterChartConfig = {
     type: 'filter';
     controls: FilterEntry[];
+    /**
+     * Visual appearance of the filter chart.
+     *   - `'default'` (omitted) → standard 16px / 20px padding around each control.
+     *   - `'minimal'`            → collapses control padding to 6px for compact layouts.
+     */
+    appearance?: 'default' | 'minimal';
     [key: string]: unknown;
 };
 export type FilterChartSeparatedPayload = {
@@ -301,8 +330,8 @@ export type FilterChartSeparatedPayload = {
  * The chart class implements this so render functions stay decoupled
  * from the LitElement subclass.
  */
-/** Runtime mode for a prompt control. `'basic'` = plain text, no validation. `'nql'` = strict filtrex parsing. */
-export type PromptMode = 'basic' | 'nql';
+/** Runtime mode for a prompt control. `'prompt'` = plain text, no validation. `'expression'` = strict filtrex parsing. */
+export type PromptMode = 'prompt' | 'expression';
 /**
  * A `FilterControl` after the chart has filled in a guaranteed `id` (either
  * the author-supplied one, or one derived from `label`). Render helpers and
@@ -335,4 +364,8 @@ export interface FilterChartHost {
     setPromptActiveIndex(id: string, idx: number): void;
     /** Mark a prompt control's input as focused / unfocused. */
     setPromptFocused(id: string, focused: boolean): void;
+    /** Pixel width of the bordered prompt field, keyed by control id. */
+    readonly promptFieldWidth: Map<string, number>;
+    /** Update the tracked width for a prompt control (called from a ResizeObserver). */
+    setPromptFieldWidth(id: string, width: number): void;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aquera/nile-visualization",
-  "version": "2.9.8",
+  "version": "2.9.10",
   "description": "A visualization Library for the Nile Design System",
   "license": "MIT",
   "author": "Aquera Inc",