elastic-input 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 krtools
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,461 @@
+# elastic-input
+
+A syntax-aware smart autocomplete input for building structured queries. Supports field:value pairs, boolean operators, comparison operators, saved searches, history references, date pickers, and real-time validation — all in a single React component.
+
+Built with React functional components and hooks (compatible with React 16.8+), zero runtime dependencies beyond React/ReactDOM, and fully inline-styled (no CSS imports required).
+
+Vibe-coded as a proof of concept with Claude Code
+
+## Features
+
+- **Syntax highlighting** — field names, values, operators, quoted strings, and special tokens are color-coded in real time
+- **Context-aware autocomplete** — suggestions adapt based on cursor position (field names, values, operators, saved searches, history)
+- **Built-in date picker** — calendar UI with single date and date range selection for date-typed fields
+- **Validation with squiggly underlines** — unknown fields, type mismatches, and custom validators shown as red wavy underlines with hover tooltips
+- **Deferred error display** — validation errors only appear after the cursor leaves the error range
+- **Saved searches (`#`)** — reference saved queries by name with autocomplete
+- **History references (`!`)** — recall previous searches with autocomplete
+- **Keyboard-driven** — Tab to accept + continue, Enter to accept + submit, Ctrl+Enter to force submit, arrow keys to navigate
+- **Fully configurable** — colors, structural styles, fonts, and layout are all customizable via props
+- **Dark mode ready** — ships with `DARK_COLORS` and `DARK_STYLES` presets
+
+## Quick Start
+
+```tsx
+import { ElasticInput } from 'elastic-input';
+import type { FieldConfig } from 'elastic-input';
+
+const fields: FieldConfig[] = [
+  {
+    name: 'status',
+    label: 'Status',
+    type: 'string',
+    suggestions: ['active', 'inactive', 'pending'],
+    description: 'Account status',
+  },
+  {
+    name: 'created',
+    label: 'Created Date',
+    type: 'date',
+    description: 'When the record was created',
+  },
+  {
+    name: 'price',
+    label: 'Price',
+    type: 'number',
+    description: 'Item price',
+  },
+  {
+    name: 'is_active',
+    label: 'Active',
+    type: 'boolean',
+  },
+];
+
+function App() {
+  return (
+    <ElasticInput
+      fields={fields}
+      placeholder="Search... e.g. status:active AND price:>100"
+      onSearch={(query, ast) => {
+        console.log('Search:', query);
+        console.log('AST:', ast);
+      }}
+      onChange={(query, ast) => {
+        console.log('Changed:', query);
+      }}
+    />
+  );
+}
+```
+
+## Query Syntax
+
+| Syntax | Example | Description |
+|--------|---------|-------------|
+| `field:value` | `status:active` | Field equals value |
+| `field:"quoted value"` | `name:"John Doe"` | Quoted value with spaces |
+| `field:>value` | `price:>100` | Greater than (also `>=`, `<`, `<=`) |
+| `AND` / `OR` / `NOT` | `a AND b OR NOT c` | Boolean operators (case-insensitive) |
+| `(...)` | `(a OR b) AND c` | Grouping with parentheses |
+| `-field:value` | `-status:inactive` | Negation (shorthand for NOT) |
+| `#name` | `#vip-active` | Saved search reference |
+| `!partial` | `!recent` | History search reference |
+| `value*` | `stat*` | Wildcard matching |
+| `"phrase"` | `"error occurred"` | Bare phrase (full-text) |
+
+Implicit AND is supported — `status:active level:ERROR` is equivalent to `status:active AND level:ERROR`.
+
+## Props
+
+### Required
+
+| Prop | Type | Description |
+|------|------|-------------|
+| `fields` | `FieldConfig[] \| () => Promise<FieldConfig[]>` | Field definitions for autocomplete and validation |
+
+### Optional
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `onSearch` | `(query, ast) => void` | — | Called on search submission |
+| `onChange` | `(query, ast) => void` | — | Called on every input change |
+| `onValidationChange` | `(errors) => void` | — | Called when validation errors change |
+| `value` | `string` | — | Controlled input value |
+| `defaultValue` | `string` | — | Initial uncontrolled value |
+| `savedSearches` | `SavedSearch[] \| () => Promise<SavedSearch[]>` | — | Saved search definitions (sync or async) |
+| `searchHistory` | `HistoryEntry[] \| () => Promise<HistoryEntry[]>` | — | Search history entries (sync or async) |
+| `fetchSuggestions` | `(field, partial) => Promise<SuggestionItem[]>` | — | Async suggestion provider for field values |
+| `colors` | `ColorConfig` | `DEFAULT_COLORS` | Syntax highlighting and UI colors |
+| `styles` | `StyleConfig` | `DEFAULT_STYLES` | Structural/layout style overrides |
+| `placeholder` | `string` | `"Search..."` | Placeholder text |
+| `className` | `string` | — | CSS class for the outer container |
+| `style` | `CSSProperties` | — | Inline styles for the outer container |
+| `inputRef` | `(api) => void` | — | Receive an imperative API handle |
+| `dropdown` | `DropdownConfig` | `{}` | Dropdown behavior and rendering (mode, triggers, renderers) |
+| `features` | `FeaturesConfig` | `{}` | Feature toggles (multiline, smartSelectAll, expandSelection, wildcardWrap, savedSearches, historySearch) |
+| `onKeyDown` | `(e) => void` | — | Called before internal keyboard handling |
+| `onFocus` | `() => void` | — | Called when the input gains focus |
+| `onBlur` | `() => void` | — | Called when the input loses focus |
+| `onTab` | `(context) => TabActionResult` | — | Override Tab key behavior (accept/blur/submit) |
+| `validateValue` | `(ctx) => ValidateReturn` | — | Custom validation for all value types |
+
+## Field Configuration
+
+```typescript
+interface FieldConfig {
+  name: string;          // Field identifier used in queries
+  label?: string;        // Display label (used in autocomplete)
+  type: FieldType;       // 'string' | 'number' | 'date' | 'boolean' | 'ip'
+  suggestions?: string[];// Autocomplete values (any field type can have suggestions)
+  operators?: string[];  // Allowed operators (future use)
+  description?: string;  // Shown in autocomplete dropdown
+}
+```
+
+### Field Types
+
+| Type | Autocomplete | Validation | Comparison Ops |
+|------|-------------|------------|----------------|
+| `boolean` | Shows `true` / `false` | Must be `true` or `false` | No |
+| `number` | Shows hint "Enter a number" | Must be numeric | Yes (`>`, `>=`, `<`, `<=`) |
+| `date` | Opens date picker with calendar | ISO dates, relative dates (`now-7d`) | Yes |
+| `ip` | Shows hint "Enter an IP address" | Valid IPv4, supports wildcards (`192.168.*`) | No |
+| `string` | No default hint (use `placeholder` for custom) | No validation (anything accepted) | No |
+
+## Imperative API
+
+Access via `inputRef`:
+
+```tsx
+let api;
+
+<ElasticInput
+  fields={fields}
+  inputRef={(ref) => { api = ref; }}
+/>
+
+// Later:
+api.getValue();              // Returns current query string
+api.setValue('status:active');// Sets query programmatically
+api.focus();                 // Focuses the input
+api.blur();                  // Blurs the input
+api.getAST();                // Returns the parsed AST
+api.getValidationErrors();   // Returns current validation errors
+```
+
+## Validation
+
+Validation runs automatically on every input change. Errors appear as red wavy underlines beneath the invalid text. Hover over a squiggly to see the error message.
+
+### Deferred Display
+
+Errors are only shown visually after the cursor moves away from the error range, so the user isn't distracted while still typing.
+
+### External Error Access
+
+Use `onValidationChange` to receive errors outside the component:
+
+```tsx
+<ElasticInput
+  fields={fields}
+  onValidationChange={(errors) => {
+    // errors: Array<{ message: string, start: number, end: number, field?: string }>
+    if (errors.length > 0) {
+      console.log('Validation errors:', errors);
+    }
+  }}
+/>
+```
+
+Or use the imperative API:
+
+```tsx
+const errors = api.getValidationErrors();
+```
+
+### Custom Validators
+
+```typescript
+const fields: FieldConfig[] = [
+  {
+    name: 'rating',
+    type: 'number',
+    validate: (value) => {
+      const n = Number(value);
+      return (n >= 1 && n <= 5) ? null : 'Rating must be between 1 and 5';
+    },
+  },
+  {
+    name: 'phone',
+    type: 'string',
+    validate: (value) =>
+      /^[\d\-\+\(\)\s]+$/.test(value) ? null : 'Invalid phone format',
+  },
+];
+```
+
+## Saved Searches
+
+Reference saved queries with `#`:
+
+```tsx
+const savedSearches = [
+  { id: '1', name: 'vip-active', query: 'status:active AND is_vip:true', description: 'All active VIPs' },
+  { id: '2', name: 'high-value', query: 'deal_value:>10000', description: 'Deals over $10k' },
+];
+
+<ElasticInput
+  fields={fields}
+  savedSearches={savedSearches}
+/>
+```
+
+Type `#` in the input to see saved search suggestions. Selecting one replaces the `#token` with the saved query text.
+
+Supports async loading:
+
+```tsx
+<ElasticInput
+  fields={fields}
+  savedSearches={() => fetch('/api/saved-searches').then(r => r.json())}
+/>
+```
+
+## Search History
+
+Reference previous searches with `!`:
+
+```tsx
+const history = [
+  { query: 'status:active AND deal_value:>5000', label: 'Active high-value deals' },
+  { query: 'level:ERROR AND service:api-gateway', label: 'API errors' },
+];
+
+<ElasticInput
+  fields={fields}
+  searchHistory={history}
+/>
+```
+
+Type `!` to see history suggestions. Selecting one inserts the query (wrapped in parentheses if it contains boolean operators).
+
+## Async Suggestions
+
+Provide dynamic suggestions for field values:
+
+```tsx
+<ElasticInput
+  fields={fields}
+  fetchSuggestions={async (fieldName, partial) => {
+    const res = await fetch(`/api/suggest?field=${fieldName}&q=${partial}`);
+    const data = await res.json();
+    return data.map(item => ({
+      text: item.value,
+      label: item.display,
+      description: item.desc,
+      type: fieldName,
+    }));
+  }}
+  dropdown={{ suggestDebounceMs: 300 }}
+/>
+```
+
+## Keyboard Shortcuts
+
+| Key | Context | Behavior |
+|-----|---------|----------|
+| Tab | Dropdown open | Accept suggestion; append space if completing a value/search/history at end of input |
+| Enter | Dropdown open (field value) | Accept value and submit search |
+| Enter | Dropdown open (other) | Accept suggestion without submitting |
+| Enter | No dropdown | Submit search |
+| Ctrl+Enter | Any | Force submit, bypassing autocomplete |
+| Escape | Dropdown/picker open | Close without accepting |
+| Arrow Up/Down | Dropdown open | Navigate suggestions |
+| Arrow Left/Right | Any | Move cursor; suggestions update for new position |
+
+## Theming
+
+### Colors
+
+```tsx
+import { ElasticInput, DARK_COLORS } from 'elastic-input';
+import type { ColorConfig } from 'elastic-input';
+
+// Use the built-in dark preset
+<ElasticInput fields={fields} colors={DARK_COLORS} />
+
+// Or customize individual colors
+const myColors: ColorConfig = {
+  fieldName: '#0550ae',
+  fieldValue: '#1a7f37',
+  operator: '#cf222e',
+  booleanOp: '#8250df',
+  quoted: '#0a3069',
+  paren: '#656d76',
+  savedSearch: '#bf8700',
+  historyRef: '#6639ba',
+  wildcard: '#953800',
+  error: '#cf222e',
+  background: '#ffffff',
+  text: '#1f2328',
+  placeholder: '#656d76',
+  cursor: '#1f2328',
+  dropdownSelected: '#0969da',
+  dropdownHover: '#f6f8fa',
+};
+```
+
+### Structural Styles
+
+```tsx
+import { ElasticInput, DARK_STYLES } from 'elastic-input';
+import type { StyleConfig } from 'elastic-input';
+
+const myStyles: StyleConfig = {
+  fontFamily: "'JetBrains Mono', monospace",
+  fontSize: '16px',
+  inputPadding: '12px 16px',
+  inputBorderRadius: '12px',
+  inputFocusBorderColor: '#7c3aed',
+  inputFocusShadow: '0 0 0 3px rgba(124, 58, 237, 0.3)',
+  dropdownBorderRadius: '12px',
+  dropdownShadow: '0 12px 32px rgba(0, 0, 0, 0.2)',
+};
+
+<ElasticInput fields={fields} styles={myStyles} />
+```
+
+### Full Dark Mode
+
+```tsx
+import { DARK_COLORS, DARK_STYLES } from 'elastic-input';
+
+<ElasticInput
+  fields={fields}
+  colors={DARK_COLORS}
+  styles={DARK_STYLES}
+/>
+```
+
+## AST Output
+
+The `onSearch` and `onChange` callbacks receive a parsed AST alongside the raw query string. AST node types:
+
+| Node Type | Description | Example |
+|-----------|-------------|---------|
+| `FieldValue` | Field:value pair | `status:active` |
+| `BooleanExpr` | AND/OR expression | `a AND b` |
+| `Not` | Negation | `NOT x`, `-x` |
+| `Group` | Parenthesized group | `(a OR b)` |
+| `BareTerm` | Unstructured text | `hello`, `"phrase"` |
+| `SavedSearch` | Saved search ref | `#my-search` |
+| `HistoryRef` | History ref | `!recent` |
+| `Error` | Parse error | malformed input |
+
+All nodes include `start` and `end` character offsets for mapping back to the source text.
+
+## Advanced: Using the Parser Directly
+
+The lexer, parser, and validator are exported for standalone use:
+
+```typescript
+import { Lexer, Parser, Validator } from 'elastic-input';
+import type { FieldConfig } from 'elastic-input';
+
+const query = 'status:active AND price:>100';
+
+// Tokenize
+const lexer = new Lexer(query);
+const tokens = lexer.tokenize();
+
+// Parse to AST
+const parser = new Parser(tokens);
+const ast = parser.parse();
+
+// Validate
+const fields: FieldConfig[] = [
+  { name: 'status', type: 'string', suggestions: ['active', 'inactive'] },
+  { name: 'price', type: 'number' },
+];
+const validator = new Validator(fields);
+const errors = validator.validate(ast);
+```
+
+## Standalone Syntax Highlighting
+
+The syntax highlighter is a pure function — no React or DOM required. Use it to render highlighted queries anywhere (read-only displays, logs, documentation):
+
+```typescript
+import { Lexer, buildHighlightedHTML, DEFAULT_COLORS } from 'elastic-input';
+
+const tokens = new Lexer('status:active AND price:>100').tokenize();
+const html = buildHighlightedHTML(tokens, DEFAULT_COLORS);
+// Returns an HTML string with inline styles — set innerHTML on any element
+```
+
+Pass `HighlightOptions` for matched-paren highlighting:
+
+```typescript
+buildHighlightedHTML(tokens, DEFAULT_COLORS, { cursorOffset: 5 });
+```
+
+## Requirements
+
+### Runtime (Browser)
+
+| Browser | Minimum Version |
+|---------|----------------|
+| Chrome  | 85+            |
+| Firefox | 103+           |
+| Safari  | 16.4+          |
+| Edge    | 85+ (Chromium) |
+
+The compiled output targets **ES2018**. Uses modern Range/Selection APIs for text insertion (no deprecated `document.execCommand`).
+
+### Build / Development
+
+| Dependency | Minimum Version |
+|------------|----------------|
+| Node.js    | 18.0.0+        |
+| React      | 16.8.0+ (hooks) |
+| React DOM  | 16.8.0+        |
+
+These constraints are also declared in `package.json` via `engines` and `browserslist`.
+
+No runtime dependencies beyond React/ReactDOM.
+
+## Development
+
+```bash
+yarn install
+yarn dev          # Start demo dev server
+yarn test         # Run tests
+yarn test:watch   # Run tests in watch mode
+yarn build        # Build library (ES + CJS)
+yarn build:demo   # Build demo page
+```
+
+## License
+
+MIT

package/dist/autocomplete/AutocompleteEngine.d.ts

@@ -0,0 +1,36 @@
+import { Token } from '../lexer/tokens';
+import { CursorContext } from '../parser/Parser';
+import { FieldConfig, SavedSearch, HistoryEntry } from '../types';
+import { Suggestion } from './suggestionTypes';
+
+export interface AutocompleteResult {
+    suggestions: Suggestion[];
+    showDatePicker: boolean;
+    dateFieldName?: string;
+    context: CursorContext;
+}
+export interface AutocompleteOptions {
+    showSavedSearchHint?: boolean;
+    showHistoryHint?: boolean;
+}
+export declare class AutocompleteEngine {
+    private fields;
+    private fieldMap;
+    private savedSearches;
+    private searchHistory;
+    private maxSuggestions;
+    private options;
+    constructor(fields: FieldConfig[], savedSearches?: SavedSearch[], searchHistory?: HistoryEntry[], maxSuggestions?: number, options?: AutocompleteOptions);
+    /** Resolve a field name (or alias) to its FieldConfig. */
+    resolveField(fieldName: string): FieldConfig | undefined;
+    updateSavedSearches(searches: SavedSearch[]): void;
+    updateSearchHistory(history: HistoryEntry[]): void;
+    getSuggestions(tokens: Token[], cursorOffset: number): AutocompleteResult;
+    private getFieldSuggestions;
+    private getValueSuggestions;
+    private getOperatorSuggestions;
+    private sortByPriority;
+    private getSpecialHints;
+    private getSavedSearchSuggestions;
+    private getHistorySuggestions;
+}

package/dist/autocomplete/suggestionTypes.d.ts

@@ -0,0 +1,16 @@
+export interface Suggestion {
+    text: string;
+    label: string;
+    description?: string;
+    type?: string;
+    replaceStart: number;
+    replaceEnd: number;
+    matchPartial?: string;
+    /** Higher priority items appear first. Operators=30, hints=20, fields=10. */
+    priority?: number;
+    /** Custom React content to render instead of the default label/description. Used by `renderFieldHint`. */
+    customContent?: any;
+    /** Original source data (HistoryEntry or SavedSearch) for custom renderers. */
+    sourceData?: any;
+}
+export type SuggestionSource = 'field' | 'value' | 'operator' | 'savedSearch' | 'history' | 'hint';

package/dist/components/AutocompleteDropdown.d.ts

@@ -0,0 +1,24 @@
+import { Suggestion } from '../autocomplete/suggestionTypes';
+import { ColorConfig, StyleConfig, HistoryEntry, SavedSearch } from '../types';
+import { CursorContext } from '../parser/Parser';
+import * as React from 'react';
+interface AutocompleteDropdownProps {
+    suggestions: Suggestion[];
+    selectedIndex: number;
+    onSelect: (suggestion: Suggestion) => void;
+    position: {
+        top: number;
+        left: number;
+    } | null;
+    colors?: ColorConfig;
+    styles?: StyleConfig;
+    visible: boolean;
+    /** When set, the dropdown uses this fixed width instead of min/max width constraints. */
+    fixedWidth?: number;
+    renderHistoryItem?: (entry: HistoryEntry, isSelected: boolean) => React.ReactNode | null | undefined;
+    renderSavedSearchItem?: (search: SavedSearch, isSelected: boolean) => React.ReactNode | null | undefined;
+    renderDropdownHeader?: (context: CursorContext) => React.ReactNode | null | undefined;
+    cursorContext?: CursorContext | null;
+}
+export declare function AutocompleteDropdown({ suggestions, selectedIndex, onSelect, position, colors, styles, visible, fixedWidth, renderHistoryItem, renderSavedSearchItem, renderDropdownHeader, cursorContext, }: AutocompleteDropdownProps): React.ReactPortal | null;
+export {};

package/dist/components/DatePicker.d.ts

@@ -0,0 +1,9 @@
+import { ColorConfig } from '../types';
+import * as React from 'react';
+interface DatePickerProps {
+    onSelect: (dateStr: string) => void;
+    colors?: ColorConfig;
+    selectedDate?: string;
+}
+export declare function DatePicker({ onSelect, colors, selectedDate }: DatePickerProps): React.JSX.Element;
+export {};

package/dist/components/DateRangePicker.d.ts

@@ -0,0 +1,16 @@
+import { ColorConfig, StyleConfig } from '../types';
+import * as React from 'react';
+interface DateRangePickerProps {
+    onSelect: (dateStr: string) => void;
+    colors?: ColorConfig;
+    styles?: StyleConfig;
+    initialMode?: 'single' | 'range';
+    initialStart?: Date | null;
+    initialEnd?: Date | null;
+    presets?: {
+        label: string;
+        value: string;
+    }[];
+}
+export declare function DateRangePicker({ onSelect, colors, styles: styleConfig, initialMode, initialStart, initialEnd, presets: presetsProp }: DateRangePickerProps): React.JSX.Element;
+export {};

package/dist/components/ElasticInput.d.ts

@@ -0,0 +1,39 @@
+import { ElasticInputProps } from '../types';
+import * as React from 'react';
+export interface DatePickerInit {
+    mode: 'single' | 'range';
+    start: Date | null;
+    end: Date | null;
+}
+/**
+ * Compute the date picker initialization state from an autocomplete result.
+ * Returns { mode: 'range', start, end } when cursor is inside a range
+ * expression on a date field, or null for single-date (FIELD_VALUE) contexts.
+ */
+export declare function computeDatePickerInit(context: {
+    type: string;
+    partial?: string;
+    token?: {
+        value: string;
+    };
+}): DatePickerInit | null;
+/**
+ * Determine whether the date picker needs to be unmounted and remounted.
+ * This is necessary when initial state changes because DateRangePicker
+ * uses useState which only reads the initial value on first mount.
+ * Returns true when mode or selected dates differ.
+ */
+export declare function shouldRemountDatePicker(prevInit: DatePickerInit | null, newInit: DatePickerInit | null): boolean;
+/**
+ * A rich search input component with Elasticsearch query_string syntax support.
+ *
+ * Features syntax highlighting, autocomplete, field validation, date picking,
+ * saved search/history references, and real-time error squiggles.
+ *
+ * Pasted text is automatically normalized (smart quotes → ASCII, em dashes → hyphens, etc.).
+ * Selected text can be wrapped with brackets/quotes by typing the opening character (VS Code style).
+ *
+ * @see {@link ElasticInputProps} for available props
+ * @see {@link ElasticInputAPI} for the imperative API (via `inputRef`)
+ */
+export declare function ElasticInput(props: ElasticInputProps): React.JSX.Element;

package/dist/components/HighlightedContent.d.ts

@@ -0,0 +1,7 @@
+import { Token } from '../lexer/tokens';
+import { ColorConfig } from '../types';
+
+export interface HighlightOptions {
+    cursorOffset?: number;
+}
+export declare function buildHighlightedHTML(tokens: Token[], colorConfig?: ColorConfig, options?: HighlightOptions): string;

package/dist/components/ValidationSquiggles.d.ts

@@ -0,0 +1,13 @@
+import { ValidationError } from '../validation/Validator';
+import { ColorConfig, StyleConfig } from '../types';
+import * as React from 'react';
+interface ValidationSquigglesProps {
+    errors: ValidationError[];
+    editorRef: HTMLDivElement | null;
+    cursorOffset: number;
+    colors?: ColorConfig;
+    styles?: StyleConfig;
+    containerRef?: HTMLDivElement | null;
+}
+export declare function ValidationSquiggles({ errors, editorRef, cursorOffset, colors, styles, containerRef }: ValidationSquigglesProps): React.JSX.Element | null;
+export {};

package/dist/constants.d.ts

@@ -0,0 +1,18 @@
+import { ColorConfig, StyleConfig } from './types';
+
+/** Default color palette for light backgrounds (GitHub-inspired). */
+export declare const DEFAULT_COLORS: Required<ColorConfig>;
+/** Dark mode color palette (GitHub Dark-inspired). */
+export declare const DARK_COLORS: Required<ColorConfig>;
+/** Default layout/structural styles for light mode. */
+export declare const DEFAULT_STYLES: Required<StyleConfig>;
+/** Dark mode style overrides. Extends `DEFAULT_STYLES` with darker borders, shadows, and badges. */
+export declare const DARK_STYLES: Required<StyleConfig>;
+/** Recognized boolean operators in query syntax. */
+export declare const BOOLEAN_OPERATORS: string[];
+/** Recognized comparison operators for numeric and date fields. */
+export declare const COMPARISON_OPERATORS: string[];
+/** Default debounce delay (ms) for async `fetchSuggestions` calls. */
+export declare const DEFAULT_DEBOUNCE_MS = 200;
+/** Default maximum number of suggestions shown in the autocomplete dropdown. */
+export declare const DEFAULT_MAX_SUGGESTIONS = 10;