elastic-input 0.3.2 → 0.3.4

package/README.md

@@ -127,6 +127,8 @@ Implicit AND is supported — `status:active level:ERROR` is equivalent to `stat
 | `onTab` | `(context) => TabActionResult` | — | Override Tab key behavior (accept/blur/submit) |
 | `validateValue` | `(ctx) => ValidateReturn` | — | Custom validation for all value types |
 | `parseDate` | `(value: string) => Date \| null` | — | Custom date parser for validation and date picker init |
+| `plainModeLength` | `number` | — | Character count at which highlighting, autocomplete, and validation are disabled for performance |
+| `interceptPaste` | `(text, event) => string \| null \| Promise<…>` | — | Transform or cancel pasted text before insertion; supports async |
 
 ## Field Configuration
 
@@ -348,6 +350,14 @@ const myColors: ColorConfig = {
   cursor: '#1f2328',
   dropdownSelected: '#0969da',
   dropdownHover: '#f6f8fa',
+  // Per-field-type value colors (overrides fieldValue for typed fields)
+  valueTypes: {
+    string: '#0550ae',
+    number: '#0a3069',
+    date: '#8250df',
+    boolean: '#cf222e',
+    ip: '#116329',
+  },
 };
 ```
 

package/dist/components/HighlightedContent.d.ts

@@ -1,9 +1,11 @@
 import { Token } from '../lexer/tokens';
-import { ColorConfig } from '../types';
+import { ColorConfig, FieldType } from '../types';
 
 export interface HighlightOptions {
     cursorOffset?: number;
     /** Custom class name appended to every token span. */
     tokenClassName?: string;
+    /** Field lookup map for per-type value coloring (keyed by field name and aliases). */
+    fieldTypeMap?: Map<string, FieldType>;
 }
 export declare function buildHighlightedHTML(tokens: Token[], colorConfig?: ColorConfig, options?: HighlightOptions): string;

package/dist/elastic-input.es.js

@@ -1181,7 +1181,7 @@ const DEFAULT_COLORS = {
   regexText: "#0a3069",
   matchedParenBg: "#fff3cd",
   warning: "#d4a72c",
-  historyDescription: "#656d76"
+  valueTypes: {}
 };
 const DARK_COLORS = {
   fieldName: "#79c0ff",
@@ -1210,7 +1210,7 @@ const DARK_COLORS = {
   regexText: "#a5d6ff",
   matchedParenBg: "#3d3222",
   warning: "#e3b341",
-  historyDescription: "#484f58"
+  valueTypes: {}
 };
 const DEFAULT_STYLES = {
   fontFamily: "'SF Mono', 'Fira Code', 'Fira Mono', Menlo, Consolas, monospace",
@@ -2625,9 +2625,60 @@ function buildHighlightedHTML(tokens, colorConfig, options) {
   const colors = mergeColors(colorConfig);
   if (tokens.length === 0) return "";
   const parenMatch = (options == null ? void 0 : options.cursorOffset) !== void 0 ? findMatchingParen(tokens, options.cursorOffset) : null;
-  return tokens.map((token) => {
+  const valueTypes = colorConfig == null ? void 0 : colorConfig.valueTypes;
+  const fieldTypeMap = options == null ? void 0 : options.fieldTypeMap;
+  let tokenFieldTypes;
+  if (valueTypes && fieldTypeMap) {
+    tokenFieldTypes = new Array(tokens.length);
+    let pendingFieldName;
+    let sawColon = false;
+    const groupStack = [];
+    for (let i = 0; i < tokens.length; i++) {
+      const t = tokens[i];
+      if (t.type === TokenType.FIELD_NAME) {
+        pendingFieldName = t.value;
+        sawColon = false;
+      } else if (t.type === TokenType.COLON && pendingFieldName) {
+        sawColon = true;
+      } else if (t.type === TokenType.WHITESPACE) ;
+      else if (t.type === TokenType.LPAREN) {
+        if (sawColon && pendingFieldName) {
+          groupStack.push(fieldTypeMap.get(pendingFieldName.toLowerCase()));
+        } else {
+          groupStack.push(void 0);
+        }
+        pendingFieldName = void 0;
+        sawColon = false;
+      } else if (t.type === TokenType.RPAREN) {
+        groupStack.pop();
+        pendingFieldName = void 0;
+        sawColon = false;
+      } else if (t.type === TokenType.VALUE || t.type === TokenType.QUOTED_VALUE || t.type === TokenType.RANGE || t.type === TokenType.REGEX || t.type === TokenType.WILDCARD) {
+        if (sawColon && pendingFieldName) {
+          tokenFieldTypes[i] = fieldTypeMap.get(pendingFieldName.toLowerCase());
+        } else if (groupStack.length > 0) {
+          tokenFieldTypes[i] = groupStack[groupStack.length - 1];
+        }
+        pendingFieldName = void 0;
+        sawColon = false;
+      } else if (t.type === TokenType.AND || t.type === TokenType.OR || t.type === TokenType.NOT) {
+        pendingFieldName = void 0;
+        sawColon = false;
+      } else {
+        pendingFieldName = void 0;
+        sawColon = false;
+      }
+    }
+  }
+  return tokens.map((token, tokenIndex) => {
     const colorKey = TOKEN_COLOR_MAP[token.type] || "text";
-    const color = colors[colorKey] || colors.text;
+    let color = colors[colorKey] || colors.text;
+    if (valueTypes && tokenFieldTypes) {
+      const ft = tokenFieldTypes[tokenIndex];
+      if (ft && valueTypes[ft]) {
+        color = valueTypes[ft];
+      }
+    }
     const escapedValue = escapeHTML(token.value);
     if (token.type === TokenType.WHITESPACE) {
       return escapedValue.replace(/\n/g, "<br>");
@@ -2801,7 +2852,7 @@ function AutocompleteDropdown({
           whiteSpace: "normal",
           wordBreak: "break-all",
           width: "100%"
-        } }, highlightMatch(suggestion.label, suggestion.matchPartial, isSelected)), /* @__PURE__ */ React.createElement("span", { style: { display: "flex", alignItems: "center", gap: "8px", width: "100%" } }, suggestion.description != null && /* @__PURE__ */ React.createElement("span", { className: "ei-dropdown-item-desc", style: { ...getDropdownItemDescStyle(), flex: 1, color: mergedColors.historyDescription, opacity: 1 } }, suggestion.description), /* @__PURE__ */ React.createElement("span", { className: "ei-dropdown-item-type", style: { ...getDropdownItemTypeStyle(isSelected, mergedStyles), marginLeft: "auto" } }, "history")))
+        } }, highlightMatch(suggestion.label, suggestion.matchPartial, isSelected)), /* @__PURE__ */ React.createElement("span", { style: { display: "flex", alignItems: "center", gap: "8px", width: "100%" } }, suggestion.description != null && /* @__PURE__ */ React.createElement("span", { className: "ei-dropdown-item-desc", style: { ...getDropdownItemDescStyle(), flex: 1 } }, suggestion.description), /* @__PURE__ */ React.createElement("span", { className: "ei-dropdown-item-type", style: { ...getDropdownItemTypeStyle(isSelected, mergedStyles), marginLeft: "auto" } }, "history")))
       );
     }
     if (suggestion.type === "savedSearch" && renderSavedSearchItem && suggestion.sourceData) {
@@ -3727,7 +3778,9 @@ function ElasticInput(props) {
     onBlur: onBlurProp,
     onTab: onTabProp,
     validateValue,
-    parseDate: parseDateProp
+    parseDate: parseDateProp,
+    plainModeLength,
+    interceptPaste
   } = props;
   const dropdownOpen = (dropdownConfig == null ? void 0 : dropdownConfig.open) ?? (dropdownConfig == null ? void 0 : dropdownConfig.mode) ?? "always";
   const dropdownOpenIsCallback = typeof dropdownOpen === "function";
@@ -3749,6 +3802,7 @@ function ElasticInput(props) {
   const renderHistoryItem = dropdownConfig == null ? void 0 : dropdownConfig.renderHistoryItem;
   const renderSavedSearchItem = dropdownConfig == null ? void 0 : dropdownConfig.renderSavedSearchItem;
   const renderDropdownHeader = dropdownConfig == null ? void 0 : dropdownConfig.renderHeader;
+  const autoSelect = (dropdownConfig == null ? void 0 : dropdownConfig.autoSelect) ?? false;
   const multiline = (featuresConfig == null ? void 0 : featuresConfig.multiline) !== false;
   const smartSelectAll = (featuresConfig == null ? void 0 : featuresConfig.smartSelectAll) ?? false;
   const expandSelection = (featuresConfig == null ? void 0 : featuresConfig.expandSelection) ?? false;
@@ -3774,6 +3828,16 @@ function ElasticInput(props) {
       cancelled = true;
     };
   }, [fieldsProp]);
+  const fieldTypeMap = React.useMemo(() => {
+    const map = /* @__PURE__ */ new Map();
+    for (const f of resolvedFields) {
+      map.set(f.name.toLowerCase(), f.type);
+      if (f.aliases) {
+        for (const a of f.aliases) map.set(a.toLowerCase(), f.type);
+      }
+    }
+    return map;
+  }, [resolvedFields]);
   const editorRef = React.useRef(null);
   const [editorEl, setEditorEl] = React.useState(null);
   const editorRefCallback = React.useCallback((el) => {
@@ -3820,6 +3884,9 @@ function ElasticInput(props) {
   const [validationErrors, setValidationErrors] = React.useState([]);
   const [isFocused, setIsFocused] = React.useState(false);
   const [isEmpty, setIsEmpty] = React.useState(!currentValueRef.current);
+  const [isPlainMode, setIsPlainMode] = React.useState(
+    plainModeLength != null && currentValueRef.current.length >= plainModeLength
+  );
   const [cursorOffset, setCursorOffset] = React.useState(0);
   const [selectionEnd, setSelectionEnd] = React.useState(0);
   const [autocompleteContext, setAutocompleteContext] = React.useState("");
@@ -3889,11 +3956,34 @@ function ElasticInput(props) {
   const HIGHLIGHT_DEBOUNCE_MS = 60;
   const applyHighlight = React.useCallback((tokens2, offset) => {
     if (!editorRef.current) return;
-    const html = buildHighlightedHTML(tokens2, colors, { cursorOffset: offset, tokenClassName: classNames == null ? void 0 : classNames.token });
+    const html = buildHighlightedHTML(tokens2, colors, { cursorOffset: offset, tokenClassName: classNames == null ? void 0 : classNames.token, fieldTypeMap });
     editorRef.current.innerHTML = html;
     setCaretCharOffset(editorRef.current, offset);
   }, [colors]);
   const processInput = React.useCallback((text, updateDropdown) => {
+    const plain = plainModeLength != null && text.length >= plainModeLength;
+    setIsPlainMode(plain);
+    if (plain) {
+      setTokens([]);
+      setAst(null);
+      setValidationErrors([]);
+      setIsEmpty(text.length === 0);
+      setSuggestions([]);
+      setShowDropdown(false);
+      setShowDatePicker(false);
+      if (editorRef.current) {
+        const offset = getCaretCharOffset(editorRef.current);
+        if (editorRef.current.querySelector("span")) {
+          editorRef.current.textContent = text;
+          setCaretCharOffset(editorRef.current, offset);
+        }
+        setCursorOffset(offset);
+        setSelectionEnd(offset);
+      }
+      if (onChange) onChange(text, null);
+      if (onValidationChange) onValidationChange([]);
+      return;
+    }
     const lexer = new Lexer(text, lexerOptions);
     const newTokens = lexer.tokenize();
     const parser = new Parser(newTokens);
@@ -3935,7 +4025,7 @@ function ElasticInput(props) {
     }
     if (onChange) onChange(text, newAst);
     if (onValidationChange) onValidationChange(newErrors);
-  }, [colors, onChange, onValidationChange, applyHighlight]);
+  }, [colors, onChange, onValidationChange, applyHighlight, plainModeLength]);
   const applyFieldHint = React.useCallback((suggestions2, context) => {
     if (!renderFieldHint || context.type !== "FIELD_VALUE" || !context.fieldName) return suggestions2;
     const resolved = engineRef.current.resolveField(context.fieldName);
@@ -4037,7 +4127,7 @@ function ElasticInput(props) {
         setSuggestions(newSuggestions);
         if (!dropdownAlignToInput) setShowDropdown(false);
         setShowDatePicker(false);
-        setSelectedSuggestionIndex(result.context.partial ? 0 : -1);
+        setSelectedSuggestionIndex(result.context.partial || autoSelect ? 0 : -1);
         setAutocompleteContext(contextType);
         showDropdownAtPosition(newSuggestions.length * 32, 300);
       } else {
@@ -4136,7 +4226,7 @@ function ElasticInput(props) {
           mapped = mapped.slice(0, effectiveMaxSuggestions);
           if (mapped.length > 0) {
             setSuggestions(mapped);
-            setSelectedSuggestionIndex(partial ? 0 : -1);
+            setSelectedSuggestionIndex(partial || autoSelect ? 0 : -1);
             showDropdownAtPosition(mapped.length * 32, 300);
           } else {
             const syncResult = engineRef.current.getSuggestions(stateRef.current.tokens, stateRef.current.cursorOffset);
@@ -4146,7 +4236,7 @@ function ElasticInput(props) {
             );
             if (hintSuggestions.length > 0) {
               setSuggestions(hintSuggestions);
-              setSelectedSuggestionIndex(syncResult.context.partial ? 0 : -1);
+              setSelectedSuggestionIndex(syncResult.context.partial || autoSelect ? 0 : -1);
               showDropdownAtPosition(hintSuggestions.length * 32, 300);
             } else {
               setShowDropdown(false);
@@ -4175,7 +4265,7 @@ function ElasticInput(props) {
         }
       }, debounceMs);
     }
-  }, [fetchSuggestionsProp, savedSearches, searchHistory, suggestDebounceMs, applyFieldHint, computeDropdownPosition, showDropdownAtPosition, dropdownAlignToInput, dropdownOpen, dropdownOpenIsCallback, dropdownMode, showOperators, effectiveMaxSuggestions, loadingDelay]);
+  }, [fetchSuggestionsProp, savedSearches, searchHistory, suggestDebounceMs, applyFieldHint, computeDropdownPosition, showDropdownAtPosition, dropdownAlignToInput, dropdownOpen, dropdownOpenIsCallback, dropdownMode, showOperators, effectiveMaxSuggestions, loadingDelay, autoSelect]);
   updateSuggestionsRef.current = updateSuggestionsFromTokens;
   const closeDropdown = React.useCallback(() => {
     var _a;
@@ -4233,7 +4323,7 @@ function ElasticInput(props) {
     const syntaxErrors = parser.getErrors().map((e) => ({ message: e.message, start: e.start, end: e.end }));
     const newErrors = [...syntaxErrors, ...validatorRef.current.validate(newAst, validateValueRef.current, parseDateProp)];
     if (editorRef.current) {
-      const html = buildHighlightedHTML(newTokens, colors, { cursorOffset: newCursorPos, tokenClassName: classNames == null ? void 0 : classNames.token });
+      const html = buildHighlightedHTML(newTokens, colors, { cursorOffset: newCursorPos, tokenClassName: classNames == null ? void 0 : classNames.token, fieldTypeMap });
       editorRef.current.innerHTML = html;
       setCaretCharOffset(editorRef.current, newCursorPos);
     }
@@ -4443,7 +4533,7 @@ function ElasticInput(props) {
     if (matchKey === prevParenMatchRef.current && !colorsChanged) return;
     prevParenMatchRef.current = matchKey;
     const savedOffset = getCaretCharOffset(editorRef.current);
-    const html = buildHighlightedHTML(currentTokens, colors, { cursorOffset: effectiveCursor, tokenClassName: classNames == null ? void 0 : classNames.token });
+    const html = buildHighlightedHTML(currentTokens, colors, { cursorOffset: effectiveCursor, tokenClassName: classNames == null ? void 0 : classNames.token, fieldTypeMap });
     editorRef.current.innerHTML = html;
     setCaretCharOffset(editorRef.current, savedOffset);
   }, [cursorOffset, selectionEnd, isFocused, colors]);
@@ -4505,7 +4595,7 @@ function ElasticInput(props) {
     const newErrors = [...syntaxErrors, ...validatorRef.current.validate(newAst, validateValueRef.current, parseDateProp)];
     const hasSelection = entry.selStart != null && entry.selStart !== entry.cursorPos;
     if (editorRef.current) {
-      const html = buildHighlightedHTML(newTokens, colors, { cursorOffset: entry.cursorPos, tokenClassName: classNames == null ? void 0 : classNames.token });
+      const html = buildHighlightedHTML(newTokens, colors, { cursorOffset: entry.cursorPos, tokenClassName: classNames == null ? void 0 : classNames.token, fieldTypeMap });
       editorRef.current.innerHTML = html;
       if (hasSelection) {
         setSelectionCharRange(editorRef.current, entry.selStart, entry.cursorPos);
@@ -4592,7 +4682,7 @@ function ElasticInput(props) {
           const newAst = parser.parse();
           const syntaxErrors = parser.getErrors().map((err) => ({ message: err.message, start: err.start, end: err.end }));
           const newErrors = [...syntaxErrors, ...validatorRef.current.validate(newAst, validateValueRef.current, parseDateProp)];
-          const html = buildHighlightedHTML(newTokens, colors, { cursorOffset: newSelEnd, tokenClassName: classNames == null ? void 0 : classNames.token });
+          const html = buildHighlightedHTML(newTokens, colors, { cursorOffset: newSelEnd, tokenClassName: classNames == null ? void 0 : classNames.token, fieldTypeMap });
           editorRef.current.innerHTML = html;
           setSelectionCharRange(editorRef.current, newSelStart, newSelEnd);
           setTokens(newTokens);
@@ -4682,15 +4772,29 @@ function ElasticInput(props) {
       switch (e.key) {
         case "ArrowDown":
           e.preventDefault();
-          setSelectedSuggestionIndex((i) => Math.min(i + 1, s.suggestions.length - 1));
+          setSelectedSuggestionIndex((i) => i >= s.suggestions.length - 1 ? 0 : i + 1);
           return;
         case "ArrowUp":
           e.preventDefault();
-          setSelectedSuggestionIndex((i) => Math.max(i - 1, -1));
+          setSelectedSuggestionIndex((i) => i <= 0 ? s.suggestions.length - 1 : i - 1);
+          return;
+        case "PageDown":
+          e.preventDefault();
+          setSelectedSuggestionIndex((i) => Math.min(i + 10, s.suggestions.length - 1));
+          return;
+        case "PageUp":
+          e.preventDefault();
+          setSelectedSuggestionIndex((i) => Math.max(i - 10, 0));
           return;
         case "Enter":
           if (s.selectedSuggestionIndex >= 0) {
             const selected = s.suggestions[s.selectedSuggestionIndex];
+            if (selected.type === "loading" || selected.type === "error") {
+              e.preventDefault();
+              closeDropdown();
+              if (onSearch) onSearch(currentValueRef.current, s.ast);
+              return;
+            }
             if (selected.type === "hint" && selected.text !== "#" && selected.text !== "!") {
               e.preventDefault();
               closeDropdown();
@@ -4713,7 +4817,10 @@ function ElasticInput(props) {
             acceptSuggestion(selected, "Enter");
             return;
           }
-          break;
+          e.preventDefault();
+          closeDropdown();
+          if (onSearch) onSearch(currentValueRef.current, s.ast);
+          return;
         case "Tab": {
           if (onTabProp) {
             e.preventDefault();
@@ -4799,12 +4906,10 @@ function ElasticInput(props) {
     requestAnimationFrame(() => {
       if (editorRef.current) {
         const toks = stateRef.current.tokens;
-        if (toks.length > 0) {
-          const offset = getCaretCharOffset(editorRef.current);
-          triggerSuggestionsFromNavigation(toks, offset);
-        } else {
-          triggerSuggestionsFromNavigation([], 0);
-        }
+        const offset = toks.length > 0 ? getCaretCharOffset(editorRef.current) : 0;
+        setCursorOffset(offset);
+        setSelectionEnd(offset);
+        triggerSuggestionsFromNavigation(toks, offset);
       }
     });
   }, [handleInput, triggerSuggestionsFromNavigation, onFocusProp]);
@@ -4829,16 +4934,31 @@ function ElasticInput(props) {
     }
     triggerSuggestionsFromNavigation(stateRef.current.tokens, selRange.start);
   }, [triggerSuggestionsFromNavigation, closeDropdown]);
-  const handlePaste = React.useCallback((e) => {
-    e.preventDefault();
-    const pastedText = normalizeTypographicChars(e.clipboardData.getData("text/plain"));
+  const doPaste = React.useCallback((text) => {
     if (typingGroupTimerRef.current) {
       clearTimeout(typingGroupTimerRef.current);
       typingGroupTimerRef.current = null;
     }
-    insertTextAtCursor(pastedText);
+    insertTextAtCursor(text);
     handleInput();
   }, [handleInput]);
+  const handlePaste = React.useCallback((e) => {
+    e.preventDefault();
+    const pastedText = normalizeTypographicChars(e.clipboardData.getData("text/plain"));
+    if (interceptPaste) {
+      const result = interceptPaste(pastedText, e);
+      if (result != null && typeof (result == null ? void 0 : result.then) === "function") {
+        result.then((transformed) => {
+          if (transformed != null) doPaste(transformed);
+        }).catch(() => {
+        });
+      } else if (result != null) {
+        doPaste(result);
+      }
+    } else {
+      doPaste(pastedText);
+    }
+  }, [interceptPaste, doPaste]);
   const handleDateSelect = React.useCallback((dateStr) => {
     const s = stateRef.current;
     const saved = datePickerReplaceRef.current;
@@ -5005,6 +5125,141 @@ function walk(node, groupField, out) {
       break;
   }
 }
+const INLINE_MAX_LENGTH = 60;
+const INDENT = "  ";
+function formatQuery(input) {
+  let ast;
+  if (typeof input === "string") {
+    const tokens = new Lexer(input, { savedSearches: true, historySearch: true }).tokenize();
+    const parser = new Parser(tokens);
+    ast = parser.parse();
+  } else {
+    ast = input;
+  }
+  if (!ast) return typeof input === "string" ? input : "";
+  return printNode(ast, 0);
+}
+function inline(node) {
+  switch (node.type) {
+    case "FieldValue": {
+      const val = node.quoted ? `"${node.value}"` : node.value;
+      const op = node.operator === ":" ? ":" : `:${node.operator}`;
+      let s = `${node.field}${op}${val}`;
+      if (node.fuzzy != null) s += `~${node.fuzzy}`;
+      if (node.proximity != null) s += `~${node.proximity}`;
+      if (node.boost != null) s += `^${node.boost}`;
+      return s;
+    }
+    case "BareTerm": {
+      let s = node.quoted ? `"${node.value}"` : node.value;
+      if (node.fuzzy != null) s += `~${node.fuzzy}`;
+      if (node.proximity != null) s += `~${node.proximity}`;
+      if (node.boost != null) s += `^${node.boost}`;
+      return s;
+    }
+    case "Range": {
+      const lb = node.lowerInclusive ? "[" : "{";
+      const rb = node.upperInclusive ? "]" : "}";
+      const lower = node.lowerQuoted ? `"${node.lower}"` : node.lower;
+      const upper = node.upperQuoted ? `"${node.upper}"` : node.upper;
+      const range = `${lb}${lower} TO ${upper}${rb}`;
+      return node.field ? `${node.field}:${range}` : range;
+    }
+    case "Regex":
+      return `/${node.pattern}/`;
+    case "SavedSearch":
+      return `#${node.name}`;
+    case "HistoryRef":
+      return `!${node.ref}`;
+    case "Not":
+      return `NOT ${inline(node.expression)}`;
+    case "Group": {
+      let s = `(${inline(node.expression)})`;
+      if (node.boost != null) s += `^${node.boost}`;
+      return s;
+    }
+    case "FieldGroup": {
+      let s = `${node.field}:(${inline(node.expression)})`;
+      if (node.boost != null) s += `^${node.boost}`;
+      return s;
+    }
+    case "BooleanExpr":
+      return `${inline(node.left)} ${node.operator} ${inline(node.right)}`;
+    case "Error":
+      return node.value;
+  }
+}
+function flattenChain(node) {
+  const op = node.operator;
+  const operands = [];
+  const collect = (n) => {
+    if (n.type === "BooleanExpr" && n.operator === op) {
+      collect(n.left);
+      collect(n.right);
+    } else {
+      operands.push(n);
+    }
+  };
+  collect(node);
+  return { operator: op, operands };
+}
+function containsGroups(node) {
+  if (node.type === "Group" || node.type === "FieldGroup") return true;
+  if (node.type === "BooleanExpr") return containsGroups(node.left) || containsGroups(node.right);
+  if (node.type === "Not") return containsGroups(node.expression);
+  return false;
+}
+function shouldBreakGroup(expr) {
+  const inlined = inline(expr);
+  if (inlined.length > INLINE_MAX_LENGTH) return true;
+  if (containsGroups(expr)) return true;
+  return false;
+}
+function printNode(node, depth) {
+  const pad = INDENT.repeat(depth);
+  switch (node.type) {
+    case "BooleanExpr": {
+      const { operator, operands } = flattenChain(node);
+      const inlined = operands.map((o) => inline(o)).join(` ${operator} `);
+      if (inlined.length <= INLINE_MAX_LENGTH) {
+        return inlined;
+      }
+      const lines = operands.map((operand, i) => {
+        const printed = printNode(operand, depth);
+        return i === 0 ? printed : `${pad}${operator} ${printed}`;
+      });
+      return lines.join("\n");
+    }
+    case "Group": {
+      if (!shouldBreakGroup(node.expression)) {
+        let s2 = `(${inline(node.expression)})`;
+        if (node.boost != null) s2 += `^${node.boost}`;
+        return s2;
+      }
+      const inner = printNode(node.expression, depth + 1);
+      let s = `(
+${indentLines(inner, depth + 1)}
+${pad})`;
+      if (node.boost != null) s += `^${node.boost}`;
+      return s;
+    }
+    case "FieldGroup": {
+      let s = `${node.field}:(${inline(node.expression)})`;
+      if (node.boost != null) s += `^${node.boost}`;
+      return s;
+    }
+    case "Not":
+      return `NOT ${printNode(node.expression, depth)}`;
+    default:
+      return inline(node);
+  }
+}
+function indentLines(text, depth) {
+  const pad = INDENT.repeat(depth);
+  return text.split("\n").map((line) => {
+    return line.startsWith(pad) ? line : pad + line;
+  }).join("\n");
+}
 export {
   AutocompleteEngine,
   DARK_COLORS,
@@ -5016,5 +5271,6 @@ export {
   Parser,
   Validator,
   buildHighlightedHTML,
-  extractValues
+  extractValues,
+  formatQuery
 };

package/dist/index.d.ts

@@ -9,6 +9,7 @@ export { AutocompleteEngine } from './autocomplete/AutocompleteEngine';
 export type { AutocompleteOptions } from './autocomplete/AutocompleteEngine';
 export { extractValues } from './utils/extractValues';
 export type { ExtractedValue, ExtractedValueKind } from './utils/extractValues';
+export { formatQuery } from './utils/formatQuery';
 export { DEFAULT_COLORS, DARK_COLORS, DEFAULT_STYLES, DARK_STYLES } from './constants';
 export type { ElasticInputProps, ElasticInputAPI, FieldConfig, FieldsSource, FieldType, SavedSearch, HistoryEntry, SuggestionItem, ColorConfig, StyleConfig, ValidateValueContext, ValidationResult, ValidateReturn, TabContext, TabActionResult, DropdownConfig, DropdownOpenContext, DropdownOpenProp, FeaturesConfig, ClassNamesConfig, } from './types';
 export type { Token, TokenType } from './lexer/tokens';

package/dist/types.d.ts

@@ -140,8 +140,14 @@ export interface ColorConfig {
     matchedParenBg?: string;
     /** Warning-severity squiggly underlines (e.g. ambiguous precedence). */
     warning?: string;
-    /** Color for history item descriptions. Set to `'transparent'` to hide. */
-    historyDescription?: string;
+    /** Per-field-type value colors. Overrides `fieldValue` for values belonging to a typed field. */
+    valueTypes?: {
+        string?: string;
+        number?: string;
+        date?: string;
+        boolean?: string;
+        ip?: string;
+    };
 }
 /**
  * Structural and layout style overrides for the input and dropdown.
@@ -259,6 +265,10 @@ export interface DropdownConfig {
     /** Custom renderer for a header above the suggestion list. Return a React element,
      *  or null/undefined for no header. */
     renderHeader?: (context: CursorContext) => React.ReactNode | null | undefined;
+    /** Automatically select the first suggestion when the dropdown opens, even with an
+     *  empty partial. When false, the first item is only pre-selected after the user
+     *  starts typing a partial match. @default false */
+    autoSelect?: boolean;
 }
 /**
  * Feature toggles for optional editing behaviors. All default to false except `multiline`.
@@ -297,21 +307,6 @@ export interface ElasticInputAPI {
     /** Selects a character range in the input. Focuses the input if not already focused. */
     setSelection: (start: number, end: number) => void;
 }
-/**
- * Props for the ElasticInput component.
- *
- * @example
- * ```tsx
- * <ElasticInput
- *   fields={[
- *     { name: 'status', type: 'string', suggestions: ['active', 'inactive'] },
- *     { name: 'price', type: 'number' },
- *   ]}
- *   onSearch={(query, ast) => console.log('Search:', query)}
- *   placeholder="Search..."
- * />
- * ```
- */
 /** Context passed to the `onTab` callback. */
 export interface TabContext {
     /** The currently selected suggestion, or `null` if nothing is highlighted. */
@@ -358,6 +353,21 @@ export interface ClassNamesConfig {
 }
 /** Field definitions — either a static array or an async loader function. */
 export type FieldsSource = FieldConfig[] | (() => Promise<FieldConfig[]>);
+/**
+ * Props for the ElasticInput component.
+ *
+ * @example
+ * ```tsx
+ * <ElasticInput
+ *   fields={[
+ *     { name: 'status', type: 'string', suggestions: ['active', 'inactive'] },
+ *     { name: 'price', type: 'number' },
+ *   ]}
+ *   onSearch={(query, ast) => console.log('Search:', query)}
+ *   placeholder="Search..."
+ * />
+ * ```
+ */
 export interface ElasticInputProps {
     /** Field definitions that determine autocomplete, validation, and syntax highlighting. Accepts a static array or an async loader function. */
     fields: FieldsSource;
@@ -440,4 +450,27 @@ export interface ElasticInputProps {
      * The built-in parser handles YYYY-MM-DD, ISO 8601, and `now±Xd` syntax.
      */
     parseDate?: (value: string) => Date | null;
+    /** When the input text reaches this character count, syntax highlighting, autocomplete,
+     *  and validation are disabled and the input becomes a plain text box. `0` = always plain. */
+    plainModeLength?: number;
+    /**
+     * Intercept paste events before text is inserted. Receives the plain-text clipboard
+     * content and the original ClipboardEvent. Return:
+     * - A `string` to insert that text instead of the original
+     * - `null` to cancel the paste entirely
+     * - A `Promise` resolving to either — the component remains fully interactive while
+     *   the promise is pending (no text is inserted until it resolves)
+     *
+     * @example
+     * ```tsx
+     * interceptPaste={async (text) => {
+     *   if (text.includes('\n')) {
+     *     const choice = await showDialog('Join lines with AND?');
+     *     return choice ? text.split('\n').join(' AND ') : text;
+     *   }
+     *   return text; // pass through unchanged
+     * }}
+     * ```
+     */
+    interceptPaste?: (text: string, event: React.ClipboardEvent) => string | null | Promise<string | null>;
 }

package/dist/utils/formatQuery.d.ts

@@ -0,0 +1,7 @@
+import { ASTNode } from '../parser/ast';
+
+/**
+ * Pretty-print an Elasticsearch query string.
+ * Accepts a raw query string or a pre-parsed AST node.
+ */
+export declare function formatQuery(input: string | ASTNode): string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "elastic-input",
-  "version": "0.3.2",
+  "version": "0.3.4",
   "description": "Syntax-aware smart autocomplete input for Elastic query syntax",
   "license": "MIT",
   "repository": {