@tellaro/tql 0.1.1 → 0.1.3

package/dist/src/types.d.ts

@@ -205,6 +205,7 @@ export interface TqlInputProps {
     validateOnInput?: boolean;
     debounceMs?: number;
     fieldSchema?: TqlFieldSchema[];
+    fieldValues?: Record<string, string[]>;
     modelName?: string;
     snippets?: TqlSnippet[];
     showSnippetButton?: boolean;
@@ -212,6 +213,10 @@ export interface TqlInputProps {
     syntaxHighlighting?: boolean;
     /** Always show validation errors instead of requiring click on icon. Defaults to true. */
     alwaysShowErrors?: boolean;
+    /** Allow textarea to be resized (only applies when multiline is true) */
+    resizable?: boolean;
+    /** Minimum height for the input */
+    minHeight?: string;
     /** Show complexity badge and warnings (default: false) */
     showComplexity?: boolean;
     /** Show query history dropdown (default: false) */

package/dist/style.css

@@ -1 +1 @@
-.tql-autocomplete-dropdown[data-v-3df9a4be]{position:fixed;top:var(--dropdown-top);left:var(--dropdown-left);z-index:9999;min-width:280px;max-width:450px;max-height:var(--dropdown-max-height);background:var(--surface-overlay, #fff);border:1px solid var(--surface-border, #ddd);border-radius:var(--border-radius, 6px);box-shadow:0 4px 16px #00000026;overflow:hidden;display:flex;flex-direction:column}.tql-completion-list[data-v-3df9a4be]{overflow-y:auto;max-height:calc(var(--dropdown-max-height) - 60px)}.tql-completion-item[data-v-3df9a4be]{display:flex;align-items:center;gap:.5rem;padding:.5rem .75rem;cursor:pointer;transition:background-color .15s}.tql-completion-item[data-v-3df9a4be]:hover,.tql-completion-item.selected[data-v-3df9a4be]{background:var(--highlight-bg, #f0f0f0)}.tql-completion-icon[data-v-3df9a4be]{display:flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;border-radius:4px;font-size:.75rem}.tql-completion-icon.tql-completion-kind-field[data-v-3df9a4be]{background:var(--blue-100, #e3f2fd);color:var(--blue-600, #1e88e5)}.tql-completion-icon.tql-completion-kind-operator[data-v-3df9a4be]{background:var(--pink-100, #fce4ec);color:var(--pink-600, #d81b60)}.tql-completion-icon.tql-completion-kind-value[data-v-3df9a4be]{background:var(--green-100, #e8f5e9);color:var(--green-600, #43a047)}.tql-completion-icon.tql-completion-kind-keyword[data-v-3df9a4be]{background:var(--purple-100, #f3e5f5);color:var(--purple-600, #8e24aa)}.tql-completion-icon.tql-completion-kind-snippet[data-v-3df9a4be]{background:var(--orange-100, #fff3e0);color:var(--orange-600, #fb8c00)}.tql-completion-icon.tql-completion-kind-mutator[data-v-3df9a4be]{background:var(--cyan-100, #e0f7fa);color:var(--cyan-600, #00acc1)}.tql-completion-icon.tql-completion-kind-aggregation[data-v-3df9a4be]{background:var(--indigo-100, #e8eaf6);color:var(--indigo-600, #3949ab)}.tql-completion-icon.tql-completion-kind-logicalOp[data-v-3df9a4be]{background:var(--yellow-100, #fffde7);color:var(--yellow-700, #fbc02d)}.tql-completion-icon.tql-completion-kind-typeHint[data-v-3df9a4be]{background:var(--teal-100, #e0f2f1);color:var(--teal-600, #00897b)}.tql-completion-icon.tql-completion-kind-visualization[data-v-3df9a4be]{background:var(--red-100, #ffebee);color:var(--red-600, #e53935)}.tql-completion-content[data-v-3df9a4be]{flex:1;display:flex;flex-direction:column;min-width:0}.tql-completion-label[data-v-3df9a4be]{font-family:Courier New,monospace;font-size:.875rem;font-weight:500;color:var(--text-color, #333);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tql-completion-detail[data-v-3df9a4be]{font-size:.75rem;color:var(--text-color-secondary, #666);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tql-completion-kind-badge[data-v-3df9a4be]{font-size:.625rem;padding:.125rem .375rem;background:var(--surface-100, #f5f5f5);border-radius:3px;color:var(--text-color-secondary, #666);text-transform:uppercase;letter-spacing:.025em}.tql-completion-docs[data-v-3df9a4be]{padding:.5rem .75rem;border-top:1px solid var(--surface-border, #ddd);background:var(--surface-50, #fafafa);font-size:.75rem;color:var(--text-color-secondary, #666);max-height:60px;overflow-y:auto}.tql-preview[data-v-bae811e6]{font-family:ui-monospace,monospace;font-size:13px;line-height:1.5;padding:12px;border:1px solid var(--tql-preview-border, #e0e0e0);border-radius:6px;background:var(--tql-preview-bg, #fafafa)}.tql-preview--compact[data-v-bae811e6]{padding:8px;font-size:12px}.tql-preview--empty[data-v-bae811e6]{color:var(--tql-preview-muted, #888)}.tql-preview__empty[data-v-bae811e6]{text-align:center;padding:20px}.tql-preview__complexity[data-v-bae811e6]{display:flex;align-items:center;gap:12px;margin-bottom:12px}.tql-preview__complexity-badge[data-v-bae811e6]{padding:2px 8px;border-radius:4px;font-size:11px;font-weight:600;text-transform:uppercase}.tql-preview--low .tql-preview__complexity-badge[data-v-bae811e6]{background:var(--tql-preview-low-bg, #e8f5e9);color:var(--tql-preview-low-text, #2e7d32)}.tql-preview--medium .tql-preview__complexity-badge[data-v-bae811e6]{background:var(--tql-preview-medium-bg, #fff3e0);color:var(--tql-preview-medium-text, #e65100)}.tql-preview--high .tql-preview__complexity-badge[data-v-bae811e6]{background:var(--tql-preview-high-bg, #ffebee);color:var(--tql-preview-high-text, #c62828)}.tql-preview__field-count[data-v-bae811e6]{color:var(--tql-preview-muted, #666);font-size:12px}.tql-preview__warnings[data-v-bae811e6]{margin-bottom:12px}.tql-preview__warning[data-v-bae811e6]{display:flex;align-items:flex-start;gap:8px;padding:6px 8px;border-radius:4px;margin-bottom:4px}.tql-preview__warning--info[data-v-bae811e6]{background:var(--tql-preview-info-bg, #e3f2fd);color:var(--tql-preview-info-text, #1565c0)}.tql-preview__warning--warning[data-v-bae811e6]{background:var(--tql-preview-warning-bg, #fff3e0);color:var(--tql-preview-warning-text, #e65100)}.tql-preview__warning--error[data-v-bae811e6]{background:var(--tql-preview-error-bg, #ffebee);color:var(--tql-preview-error-text, #c62828)}.tql-preview__warning-icon[data-v-bae811e6]{font-weight:700;width:16px;text-align:center}.tql-preview__warning-text[data-v-bae811e6]{flex:1}.tql-preview__suggestions[data-v-bae811e6]{margin-bottom:12px;padding:8px;background:var(--tql-preview-suggestion-bg, #f5f5f5);border-radius:4px}.tql-preview__suggestions-header[data-v-bae811e6]{font-weight:600;margin-bottom:4px;color:var(--tql-preview-header, #333)}.tql-preview__suggestions-list[data-v-bae811e6]{margin:0;padding-left:20px}.tql-preview__suggestion[data-v-bae811e6]{color:var(--tql-preview-muted, #666);margin:2px 0}.tql-preview__tree[data-v-bae811e6]{margin-bottom:12px}.tql-preview__tree-header[data-v-bae811e6],.tql-preview__fields-header[data-v-bae811e6],.tql-preview__operators-header[data-v-bae811e6]{font-weight:600;margin-bottom:8px;color:var(--tql-preview-header, #333);font-size:12px;text-transform:uppercase;letter-spacing:.5px}.tql-preview__tree-content[data-v-bae811e6]{border:1px solid var(--tql-preview-tree-border, #e0e0e0);border-radius:4px;background:var(--tql-preview-tree-bg, #fff);padding:8px}.tql-preview__node[data-v-bae811e6]{margin:2px 0}.tql-preview__node-content[data-v-bae811e6]{display:flex;align-items:center;gap:4px;padding:2px 4px;border-radius:3px;cursor:pointer}.tql-preview__node-content[data-v-bae811e6]:hover{background:var(--tql-preview-node-hover, #f0f0f0)}.tql-preview__node-toggle[data-v-bae811e6]{width:16px;height:16px;border:none;background:var(--tql-preview-toggle-bg, #e0e0e0);border-radius:3px;cursor:pointer;font-size:12px;line-height:1;display:flex;align-items:center;justify-content:center}.tql-preview__node-toggle[data-v-bae811e6]:hover{background:var(--tql-preview-toggle-hover, #d0d0d0)}.tql-preview__node-toggle--leaf[data-v-bae811e6]{visibility:hidden}.tql-preview__node-type[data-v-bae811e6]{font-weight:600;color:var(--tql-preview-node-type, #666)}.tql-preview__node--and .tql-preview__node-type[data-v-bae811e6]{color:var(--tql-preview-and, #1976d2)}.tql-preview__node--or .tql-preview__node-type[data-v-bae811e6]{color:var(--tql-preview-or, #7b1fa2)}.tql-preview__node--not .tql-preview__node-type[data-v-bae811e6]{color:var(--tql-preview-not, #c62828)}.tql-preview__node--group .tql-preview__node-type[data-v-bae811e6]{color:var(--tql-preview-group, #666)}.tql-preview__node-label[data-v-bae811e6]{flex:1}.tql-preview__fields-list[data-v-bae811e6]{display:flex;flex-direction:column;gap:4px}.tql-preview__field[data-v-bae811e6]{display:flex;align-items:center;gap:6px;padding:4px 8px;background:var(--tql-preview-field-bg, #fff);border:1px solid var(--tql-preview-field-border, #e0e0e0);border-radius:4px;cursor:pointer}.tql-preview__field[data-v-bae811e6]:hover{background:var(--tql-preview-field-hover, #f5f5f5)}.tql-preview__field-name[data-v-bae811e6]{font-weight:600;color:var(--tql-preview-field-name, #1976d2)}.tql-preview__field-mutators[data-v-bae811e6]{color:var(--tql-preview-mutator, #7b1fa2)}.tql-preview__field-operator[data-v-bae811e6]{color:var(--tql-preview-operator, #666)}.tql-preview__field-value[data-v-bae811e6]{color:var(--tql-preview-value, #2e7d32)}.tql-preview__match-type[data-v-bae811e6]{margin-left:auto;padding:1px 4px;border-radius:3px;font-size:10px;font-weight:600;background:var(--tql-preview-match-bg, #f0f0f0)}.tql-preview__match-type--exact[data-v-bae811e6]{background:var(--tql-preview-match-exact-bg, #e8f5e9);color:var(--tql-preview-match-exact, #2e7d32)}.tql-preview__match-type--wildcard[data-v-bae811e6]{background:var(--tql-preview-match-wildcard-bg, #fff3e0);color:var(--tql-preview-match-wildcard, #e65100)}.tql-preview__match-type--regex[data-v-bae811e6]{background:var(--tql-preview-match-regex-bg, #fce4ec);color:var(--tql-preview-match-regex, #c2185b)}.tql-preview__match-type--range[data-v-bae811e6]{background:var(--tql-preview-match-range-bg, #e3f2fd);color:var(--tql-preview-match-range, #1565c0)}.tql-preview__match-type--cidr[data-v-bae811e6]{background:var(--tql-preview-match-cidr-bg, #f3e5f5);color:var(--tql-preview-match-cidr, #7b1fa2)}.tql-preview__operators-list[data-v-bae811e6]{display:flex;flex-wrap:wrap;gap:8px}.tql-preview__operator[data-v-bae811e6]{padding:2px 6px;background:var(--tql-preview-op-bg, #f0f0f0);border-radius:3px;font-size:11px}.tql-input-wrapper[data-v-debfa7f2]{position:relative;display:flex;align-items:flex-start;border:1px solid var(--surface-border, #ddd);border-radius:var(--border-radius, 6px);background:var(--surface-ground, #fff);transition:border-color .2s,box-shadow .2s}.tql-input-wrapper.tql-input-focused[data-v-debfa7f2]{border-color:var(--primary-color, #3b82f6);box-shadow:0 0 0 2px var(--primary-100, rgba(59, 130, 246, .2))}.tql-input-wrapper.tql-input-invalid[data-v-debfa7f2]{border-color:var(--red-500, #ef4444)}.tql-input-wrapper.tql-input-invalid.tql-input-focused[data-v-debfa7f2]{box-shadow:0 0 0 2px var(--red-100, rgba(239, 68, 68, .2))}.tql-input-wrapper.tql-input-disabled[data-v-debfa7f2]{opacity:.6;cursor:not-allowed}.tql-highlight-layer[data-v-debfa7f2]{position:absolute;top:0;left:0;right:0;bottom:0;padding:.5rem .75rem;pointer-events:none;white-space:pre-wrap;word-wrap:break-word;font-family:Courier New,monospace;font-size:.875rem;line-height:1.5;overflow:hidden}.tql-input-multiline .tql-highlight-layer[data-v-debfa7f2]{overflow-y:auto}.tql-input[data-v-debfa7f2]{flex:1;width:100%;padding:.5rem 8rem .5rem .75rem;border:none;background:transparent;font-family:Courier New,monospace;font-size:.875rem;line-height:1.5;color:var(--text-color, #333);outline:none;resize:none}.tql-input.tql-input-highlighted[data-v-debfa7f2]{color:transparent;caret-color:var(--text-color, #333)}.tql-input[data-v-debfa7f2]::placeholder{color:var(--text-color-secondary, #666);opacity:.7}.tql-input[data-v-debfa7f2]:disabled{cursor:not-allowed}.tql-token-field[data-v-debfa7f2]{color:var(--tql-field-color, var(--blue-600, #2563eb))}.tql-token-operator[data-v-debfa7f2]{color:var(--tql-operator-color, var(--pink-600, #db2777));font-weight:500}.tql-token-logicalOp[data-v-debfa7f2]{color:var(--tql-logical-color, var(--purple-600, #9333ea));font-weight:600}.tql-token-collectionOp[data-v-debfa7f2]{color:var(--tql-collection-color, var(--indigo-600, #4f46e5));font-weight:600}.tql-token-string[data-v-debfa7f2]{color:var(--tql-string-color, var(--green-600, #16a34a))}.tql-token-number[data-v-debfa7f2]{color:var(--tql-number-color, var(--orange-600, #ea580c))}.tql-token-boolean[data-v-debfa7f2]{color:var(--tql-boolean-color, var(--cyan-600, #0891b2))}.tql-token-null[data-v-debfa7f2]{color:var(--tql-null-color, var(--gray-500, #6b7280));font-style:italic}.tql-token-mutator[data-v-debfa7f2]{color:var(--tql-mutator-color, var(--teal-600, #0d9488));font-style:italic}.tql-token-aggregation[data-v-debfa7f2]{color:var(--tql-aggregation-color, var(--indigo-600, #4f46e5))}.tql-token-keyword[data-v-debfa7f2]{color:var(--tql-keyword-color, var(--purple-500, #a855f7))}.tql-token-typeHint[data-v-debfa7f2]{color:var(--tql-typehint-color, var(--teal-500, #14b8a6))}.tql-token-visualization[data-v-debfa7f2]{color:var(--tql-viz-color, var(--red-500, #ef4444))}.tql-token-arrow[data-v-debfa7f2]{color:var(--tql-arrow-color, var(--gray-600, #4b5563));font-weight:600}.tql-token-doubleColon[data-v-debfa7f2]{color:var(--tql-colon-color, var(--gray-500, #6b7280))}.tql-token-paren[data-v-debfa7f2],.tql-token-bracket[data-v-debfa7f2]{color:var(--tql-bracket-color, var(--gray-600, #4b5563))}.tql-token-error[data-v-debfa7f2]{color:var(--tql-error-color, var(--red-600, #dc2626));text-decoration:wavy underline;text-decoration-color:var(--red-400, #f87171)}.tql-token-error-range[data-v-debfa7f2]{background-color:var(--red-50, #fef2f2)}.tql-token-unknown[data-v-debfa7f2]{color:var(--text-color-secondary, #666)}.tql-validation-icon[data-v-debfa7f2]{position:absolute;right:.5rem;top:50%;transform:translateY(-50%);display:flex;align-items:center;justify-content:center}.tql-input-multiline .tql-validation-icon[data-v-debfa7f2]{top:.75rem;transform:none}.tql-icon-valid[data-v-debfa7f2]{color:var(--green-500, #22c55e)}.tql-icon-invalid[data-v-debfa7f2]{color:var(--red-500, #ef4444)}.tql-icon-clickable[data-v-debfa7f2]{cursor:pointer;transition:transform .2s}.tql-icon-clickable[data-v-debfa7f2]:hover{transform:scale(1.2)}.tql-icon-clickable[data-v-debfa7f2]:focus{outline:2px solid var(--primary-color, #3b82f6);outline-offset:2px;border-radius:50%}.tql-snippet-button[data-v-debfa7f2]{position:absolute;right:2rem;top:50%;transform:translateY(-50%);padding:.25rem;border:none;background:transparent;color:var(--text-color-secondary, #666);cursor:pointer;border-radius:var(--border-radius, 6px);transition:color .2s,background-color .2s}.tql-snippet-button[data-v-debfa7f2]:hover{color:var(--primary-color, #3b82f6);background:var(--surface-100, #f5f5f5)}.tql-input-multiline .tql-snippet-button[data-v-debfa7f2]{top:.75rem;transform:none}.tql-validation-messages[data-v-debfa7f2]{position:absolute;top:100%;left:0;right:0;margin-top:.25rem;background:var(--surface-overlay, #fff);border:1px solid var(--red-200, #fecaca);border-radius:var(--border-radius, 6px);padding:.5rem;z-index:10;box-shadow:0 2px 8px #0000001a}.tql-input-autocomplete-active .tql-validation-messages[data-v-debfa7f2],.tql-input-autocomplete-active .tql-complexity-warnings[data-v-debfa7f2],.tql-input-autocomplete-active .tql-history-dropdown[data-v-debfa7f2],.tql-input-autocomplete-active .tql-preview-panel[data-v-debfa7f2]{display:none!important}.tql-error-message[data-v-debfa7f2]{display:flex;align-items:flex-start;gap:.5rem;padding:.25rem 0;font-size:.75rem;color:var(--red-600, #dc2626)}.tql-error-message i[data-v-debfa7f2]{margin-top:.125rem;font-size:.75rem}.tql-error-suggestion[data-v-debfa7f2]{display:block;color:var(--text-color-secondary, #666);font-style:italic;margin-left:1.25rem}.sr-only[data-v-debfa7f2]{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.tql-toolbar[data-v-debfa7f2]{position:absolute;right:.5rem;top:50%;transform:translateY(-50%);display:flex;align-items:center;gap:.25rem}.tql-input-multiline .tql-toolbar[data-v-debfa7f2]{top:.5rem;transform:none}.tql-toolbar-button[data-v-debfa7f2]{padding:.25rem;border:none;background:transparent;color:var(--text-color-secondary, #666);cursor:pointer;border-radius:var(--border-radius, 4px);transition:color .2s,background-color .2s;display:flex;align-items:center;justify-content:center}.tql-toolbar-button[data-v-debfa7f2]:hover{color:var(--primary-color, #3b82f6);background:var(--surface-100, #f5f5f5)}.tql-toolbar-button--active[data-v-debfa7f2]{color:var(--primary-color, #3b82f6);background:var(--primary-100, rgba(59, 130, 246, .1))}.tql-validation-status[data-v-debfa7f2]{display:flex;align-items:center}.tql-complexity-badge[data-v-debfa7f2]{display:flex;align-items:center;gap:.25rem;padding:.125rem .5rem;border-radius:9999px;font-size:.625rem;font-weight:600;text-transform:uppercase;letter-spacing:.025em}.tql-complexity-low[data-v-debfa7f2]{background:var(--green-100, #dcfce7);color:var(--green-700, #15803d)}.tql-complexity-medium[data-v-debfa7f2]{background:var(--yellow-100, #fef9c3);color:var(--yellow-700, #a16207)}.tql-complexity-high[data-v-debfa7f2]{background:var(--red-100, #fee2e2);color:var(--red-700, #b91c1c)}.tql-complexity-count[data-v-debfa7f2]{display:inline-flex;align-items:center;justify-content:center;min-width:1rem;height:1rem;padding:0 .25rem;border-radius:9999px;background:currentColor;color:#fff;font-size:.5rem}.tql-complexity-low .tql-complexity-count[data-v-debfa7f2]{background:var(--green-600, #16a34a)}.tql-complexity-medium .tql-complexity-count[data-v-debfa7f2]{background:var(--yellow-600, #ca8a04)}.tql-complexity-high .tql-complexity-count[data-v-debfa7f2]{background:var(--red-600, #dc2626)}.tql-complexity-warnings[data-v-debfa7f2]{position:absolute;top:100%;left:0;right:0;margin-top:.25rem;background:var(--surface-overlay, #fff);border:1px solid var(--surface-border, #e0e0e0);border-radius:var(--border-radius, 6px);padding:.5rem;z-index:9;box-shadow:0 2px 8px #0000001a}.tql-complexity-warning[data-v-debfa7f2]{display:flex;align-items:flex-start;gap:.5rem;padding:.25rem 0;font-size:.75rem}.tql-complexity-warning i[data-v-debfa7f2]{margin-top:.125rem;font-size:.75rem}.tql-complexity-warning--info[data-v-debfa7f2]{color:var(--blue-600, #2563eb)}.tql-complexity-warning--warning[data-v-debfa7f2]{color:var(--yellow-600, #ca8a04)}.tql-complexity-warning--error[data-v-debfa7f2]{color:var(--red-600, #dc2626)}.tql-complexity-suggestions[data-v-debfa7f2]{margin-top:.5rem;padding-top:.5rem;border-top:1px solid var(--surface-border, #e0e0e0)}.tql-complexity-suggestion[data-v-debfa7f2]{display:flex;align-items:flex-start;gap:.5rem;padding:.25rem 0;font-size:.75rem;color:var(--text-color-secondary, #666)}.tql-complexity-suggestion i[data-v-debfa7f2]{color:var(--yellow-500, #eab308)}.tql-history-dropdown[data-v-debfa7f2]{position:absolute;top:100%;left:0;right:0;margin-top:.25rem;background:var(--surface-overlay, #fff);border:1px solid var(--surface-border, #e0e0e0);border-radius:var(--border-radius, 6px);z-index:20;box-shadow:0 4px 12px #00000026;max-height:300px;overflow:hidden;display:flex;flex-direction:column}.tql-history-header[data-v-debfa7f2]{padding:.5rem;border-bottom:1px solid var(--surface-border, #e0e0e0)}.tql-history-search[data-v-debfa7f2]{width:100%;padding:.375rem .5rem;border:1px solid var(--surface-border, #e0e0e0);border-radius:var(--border-radius, 4px);font-size:.75rem;outline:none}.tql-history-search[data-v-debfa7f2]:focus{border-color:var(--primary-color, #3b82f6)}.tql-history-list[data-v-debfa7f2]{overflow-y:auto;flex:1}.tql-history-item[data-v-debfa7f2]{display:flex;align-items:flex-start;gap:.5rem;padding:.5rem;cursor:pointer;border-bottom:1px solid var(--surface-50, #f9fafb);transition:background-color .15s}.tql-history-item[data-v-debfa7f2]:hover{background:var(--surface-100, #f5f5f5)}.tql-history-item--favorite[data-v-debfa7f2]{background:var(--yellow-50, #fefce8)}.tql-history-item--favorite[data-v-debfa7f2]:hover{background:var(--yellow-100, #fef9c3)}.tql-history-favorite[data-v-debfa7f2]{padding:.125rem;border:none;background:transparent;color:var(--text-color-secondary, #999);cursor:pointer;flex-shrink:0}.tql-history-favorite[data-v-debfa7f2]:hover,.tql-history-item--favorite .tql-history-favorite[data-v-debfa7f2]{color:var(--yellow-500, #eab308)}.tql-history-content[data-v-debfa7f2]{flex:1;min-width:0}.tql-history-label[data-v-debfa7f2]{font-size:.6875rem;font-weight:600;color:var(--text-color, #333);margin-bottom:.125rem}.tql-history-query[data-v-debfa7f2]{font-family:Courier New,monospace;font-size:.6875rem;color:var(--text-color-secondary, #666);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tql-history-time[data-v-debfa7f2]{font-size:.625rem;color:var(--text-color-secondary, #999);flex-shrink:0}.tql-history-empty[data-v-debfa7f2]{padding:1rem;text-align:center;color:var(--text-color-secondary, #666);font-size:.75rem}.tql-preview-panel[data-v-debfa7f2]{position:absolute;top:100%;left:0;right:0;margin-top:.25rem;background:var(--surface-overlay, #fff);border:1px solid var(--surface-border, #e0e0e0);border-radius:var(--border-radius, 6px);z-index:15;box-shadow:0 4px 12px #00000026;max-height:400px;overflow:hidden;display:flex;flex-direction:column}.tql-preview-header[data-v-debfa7f2]{display:flex;align-items:center;justify-content:space-between;padding:.5rem .75rem;border-bottom:1px solid var(--surface-border, #e0e0e0);font-size:.75rem;font-weight:600;color:var(--text-color, #333)}.tql-preview-close[data-v-debfa7f2]{padding:.125rem;border:none;background:transparent;color:var(--text-color-secondary, #666);cursor:pointer;border-radius:var(--border-radius, 4px)}.tql-preview-close[data-v-debfa7f2]:hover{background:var(--surface-100, #f5f5f5);color:var(--text-color, #333)}.tql-preview-panel[data-v-debfa7f2] .tql-preview{border:none;border-radius:0;max-height:350px;overflow-y:auto}
+.tql-autocomplete-dropdown[data-v-3df9a4be]{position:fixed;top:var(--dropdown-top);left:var(--dropdown-left);z-index:9999;min-width:280px;max-width:450px;max-height:var(--dropdown-max-height);background:var(--surface-overlay, #fff);border:1px solid var(--surface-border, #ddd);border-radius:var(--border-radius, 6px);box-shadow:0 4px 16px #00000026;overflow:hidden;display:flex;flex-direction:column}.tql-completion-list[data-v-3df9a4be]{overflow-y:auto;max-height:calc(var(--dropdown-max-height) - 60px)}.tql-completion-item[data-v-3df9a4be]{display:flex;align-items:center;gap:.5rem;padding:.5rem .75rem;cursor:pointer;transition:background-color .15s}.tql-completion-item[data-v-3df9a4be]:hover,.tql-completion-item.selected[data-v-3df9a4be]{background:var(--highlight-bg, #f0f0f0)}.tql-completion-icon[data-v-3df9a4be]{display:flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;border-radius:4px;font-size:.75rem}.tql-completion-icon.tql-completion-kind-field[data-v-3df9a4be]{background:var(--blue-100, #e3f2fd);color:var(--blue-600, #1e88e5)}.tql-completion-icon.tql-completion-kind-operator[data-v-3df9a4be]{background:var(--pink-100, #fce4ec);color:var(--pink-600, #d81b60)}.tql-completion-icon.tql-completion-kind-value[data-v-3df9a4be]{background:var(--green-100, #e8f5e9);color:var(--green-600, #43a047)}.tql-completion-icon.tql-completion-kind-keyword[data-v-3df9a4be]{background:var(--purple-100, #f3e5f5);color:var(--purple-600, #8e24aa)}.tql-completion-icon.tql-completion-kind-snippet[data-v-3df9a4be]{background:var(--orange-100, #fff3e0);color:var(--orange-600, #fb8c00)}.tql-completion-icon.tql-completion-kind-mutator[data-v-3df9a4be]{background:var(--cyan-100, #e0f7fa);color:var(--cyan-600, #00acc1)}.tql-completion-icon.tql-completion-kind-aggregation[data-v-3df9a4be]{background:var(--indigo-100, #e8eaf6);color:var(--indigo-600, #3949ab)}.tql-completion-icon.tql-completion-kind-logicalOp[data-v-3df9a4be]{background:var(--yellow-100, #fffde7);color:var(--yellow-700, #fbc02d)}.tql-completion-icon.tql-completion-kind-typeHint[data-v-3df9a4be]{background:var(--teal-100, #e0f2f1);color:var(--teal-600, #00897b)}.tql-completion-icon.tql-completion-kind-visualization[data-v-3df9a4be]{background:var(--red-100, #ffebee);color:var(--red-600, #e53935)}.tql-completion-content[data-v-3df9a4be]{flex:1;display:flex;flex-direction:column;min-width:0}.tql-completion-label[data-v-3df9a4be]{font-family:Courier New,monospace;font-size:.875rem;font-weight:500;color:var(--text-color, #333);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tql-completion-detail[data-v-3df9a4be]{font-size:.75rem;color:var(--text-color-secondary, #666);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tql-completion-kind-badge[data-v-3df9a4be]{font-size:.625rem;padding:.125rem .375rem;background:var(--surface-100, #f5f5f5);border-radius:3px;color:var(--text-color-secondary, #666);text-transform:uppercase;letter-spacing:.025em}.tql-completion-docs[data-v-3df9a4be]{padding:.5rem .75rem;border-top:1px solid var(--surface-border, #ddd);background:var(--surface-50, #fafafa);font-size:.75rem;color:var(--text-color-secondary, #666);max-height:60px;overflow-y:auto}.tql-preview[data-v-bae811e6]{font-family:ui-monospace,monospace;font-size:13px;line-height:1.5;padding:12px;border:1px solid var(--tql-preview-border, #e0e0e0);border-radius:6px;background:var(--tql-preview-bg, #fafafa)}.tql-preview--compact[data-v-bae811e6]{padding:8px;font-size:12px}.tql-preview--empty[data-v-bae811e6]{color:var(--tql-preview-muted, #888)}.tql-preview__empty[data-v-bae811e6]{text-align:center;padding:20px}.tql-preview__complexity[data-v-bae811e6]{display:flex;align-items:center;gap:12px;margin-bottom:12px}.tql-preview__complexity-badge[data-v-bae811e6]{padding:2px 8px;border-radius:4px;font-size:11px;font-weight:600;text-transform:uppercase}.tql-preview--low .tql-preview__complexity-badge[data-v-bae811e6]{background:var(--tql-preview-low-bg, #e8f5e9);color:var(--tql-preview-low-text, #2e7d32)}.tql-preview--medium .tql-preview__complexity-badge[data-v-bae811e6]{background:var(--tql-preview-medium-bg, #fff3e0);color:var(--tql-preview-medium-text, #e65100)}.tql-preview--high .tql-preview__complexity-badge[data-v-bae811e6]{background:var(--tql-preview-high-bg, #ffebee);color:var(--tql-preview-high-text, #c62828)}.tql-preview__field-count[data-v-bae811e6]{color:var(--tql-preview-muted, #666);font-size:12px}.tql-preview__warnings[data-v-bae811e6]{margin-bottom:12px}.tql-preview__warning[data-v-bae811e6]{display:flex;align-items:flex-start;gap:8px;padding:6px 8px;border-radius:4px;margin-bottom:4px}.tql-preview__warning--info[data-v-bae811e6]{background:var(--tql-preview-info-bg, #e3f2fd);color:var(--tql-preview-info-text, #1565c0)}.tql-preview__warning--warning[data-v-bae811e6]{background:var(--tql-preview-warning-bg, #fff3e0);color:var(--tql-preview-warning-text, #e65100)}.tql-preview__warning--error[data-v-bae811e6]{background:var(--tql-preview-error-bg, #ffebee);color:var(--tql-preview-error-text, #c62828)}.tql-preview__warning-icon[data-v-bae811e6]{font-weight:700;width:16px;text-align:center}.tql-preview__warning-text[data-v-bae811e6]{flex:1}.tql-preview__suggestions[data-v-bae811e6]{margin-bottom:12px;padding:8px;background:var(--tql-preview-suggestion-bg, #f5f5f5);border-radius:4px}.tql-preview__suggestions-header[data-v-bae811e6]{font-weight:600;margin-bottom:4px;color:var(--tql-preview-header, #333)}.tql-preview__suggestions-list[data-v-bae811e6]{margin:0;padding-left:20px}.tql-preview__suggestion[data-v-bae811e6]{color:var(--tql-preview-muted, #666);margin:2px 0}.tql-preview__tree[data-v-bae811e6]{margin-bottom:12px}.tql-preview__tree-header[data-v-bae811e6],.tql-preview__fields-header[data-v-bae811e6],.tql-preview__operators-header[data-v-bae811e6]{font-weight:600;margin-bottom:8px;color:var(--tql-preview-header, #333);font-size:12px;text-transform:uppercase;letter-spacing:.5px}.tql-preview__tree-content[data-v-bae811e6]{border:1px solid var(--tql-preview-tree-border, #e0e0e0);border-radius:4px;background:var(--tql-preview-tree-bg, #fff);padding:8px}.tql-preview__node[data-v-bae811e6]{margin:2px 0}.tql-preview__node-content[data-v-bae811e6]{display:flex;align-items:center;gap:4px;padding:2px 4px;border-radius:3px;cursor:pointer}.tql-preview__node-content[data-v-bae811e6]:hover{background:var(--tql-preview-node-hover, #f0f0f0)}.tql-preview__node-toggle[data-v-bae811e6]{width:16px;height:16px;border:none;background:var(--tql-preview-toggle-bg, #e0e0e0);border-radius:3px;cursor:pointer;font-size:12px;line-height:1;display:flex;align-items:center;justify-content:center}.tql-preview__node-toggle[data-v-bae811e6]:hover{background:var(--tql-preview-toggle-hover, #d0d0d0)}.tql-preview__node-toggle--leaf[data-v-bae811e6]{visibility:hidden}.tql-preview__node-type[data-v-bae811e6]{font-weight:600;color:var(--tql-preview-node-type, #666)}.tql-preview__node--and .tql-preview__node-type[data-v-bae811e6]{color:var(--tql-preview-and, #1976d2)}.tql-preview__node--or .tql-preview__node-type[data-v-bae811e6]{color:var(--tql-preview-or, #7b1fa2)}.tql-preview__node--not .tql-preview__node-type[data-v-bae811e6]{color:var(--tql-preview-not, #c62828)}.tql-preview__node--group .tql-preview__node-type[data-v-bae811e6]{color:var(--tql-preview-group, #666)}.tql-preview__node-label[data-v-bae811e6]{flex:1}.tql-preview__fields-list[data-v-bae811e6]{display:flex;flex-direction:column;gap:4px}.tql-preview__field[data-v-bae811e6]{display:flex;align-items:center;gap:6px;padding:4px 8px;background:var(--tql-preview-field-bg, #fff);border:1px solid var(--tql-preview-field-border, #e0e0e0);border-radius:4px;cursor:pointer}.tql-preview__field[data-v-bae811e6]:hover{background:var(--tql-preview-field-hover, #f5f5f5)}.tql-preview__field-name[data-v-bae811e6]{font-weight:600;color:var(--tql-preview-field-name, #1976d2)}.tql-preview__field-mutators[data-v-bae811e6]{color:var(--tql-preview-mutator, #7b1fa2)}.tql-preview__field-operator[data-v-bae811e6]{color:var(--tql-preview-operator, #666)}.tql-preview__field-value[data-v-bae811e6]{color:var(--tql-preview-value, #2e7d32)}.tql-preview__match-type[data-v-bae811e6]{margin-left:auto;padding:1px 4px;border-radius:3px;font-size:10px;font-weight:600;background:var(--tql-preview-match-bg, #f0f0f0)}.tql-preview__match-type--exact[data-v-bae811e6]{background:var(--tql-preview-match-exact-bg, #e8f5e9);color:var(--tql-preview-match-exact, #2e7d32)}.tql-preview__match-type--wildcard[data-v-bae811e6]{background:var(--tql-preview-match-wildcard-bg, #fff3e0);color:var(--tql-preview-match-wildcard, #e65100)}.tql-preview__match-type--regex[data-v-bae811e6]{background:var(--tql-preview-match-regex-bg, #fce4ec);color:var(--tql-preview-match-regex, #c2185b)}.tql-preview__match-type--range[data-v-bae811e6]{background:var(--tql-preview-match-range-bg, #e3f2fd);color:var(--tql-preview-match-range, #1565c0)}.tql-preview__match-type--cidr[data-v-bae811e6]{background:var(--tql-preview-match-cidr-bg, #f3e5f5);color:var(--tql-preview-match-cidr, #7b1fa2)}.tql-preview__operators-list[data-v-bae811e6]{display:flex;flex-wrap:wrap;gap:8px}.tql-preview__operator[data-v-bae811e6]{padding:2px 6px;background:var(--tql-preview-op-bg, #f0f0f0);border-radius:3px;font-size:11px}.tql-input-wrapper[data-v-0ddc40d6]{position:relative;display:flex;align-items:flex-start;border:1px solid var(--surface-border, #ddd);border-radius:var(--border-radius, 6px);background:var(--surface-ground, #fff);transition:border-color .2s,box-shadow .2s}.tql-input-wrapper.tql-input-has-min-height[data-v-0ddc40d6],.tql-input-wrapper.tql-input-has-min-height .tql-input[data-v-0ddc40d6]{min-height:var(--tql-min-height)}.tql-input-wrapper.tql-input-focused[data-v-0ddc40d6]{border-color:var(--primary-color, #3b82f6);box-shadow:0 0 0 2px var(--primary-100, rgba(59, 130, 246, .2))}.tql-input-wrapper.tql-input-invalid[data-v-0ddc40d6]{border-color:var(--red-500, #ef4444)}.tql-input-wrapper.tql-input-invalid.tql-input-focused[data-v-0ddc40d6]{box-shadow:0 0 0 2px var(--red-100, rgba(239, 68, 68, .2))}.tql-input-wrapper.tql-input-disabled[data-v-0ddc40d6]{opacity:.6;cursor:not-allowed}.tql-highlight-layer[data-v-0ddc40d6]{position:absolute;top:0;left:0;right:0;bottom:0;padding:.5rem .75rem;pointer-events:none;white-space:pre-wrap;word-wrap:break-word;font-family:Courier New,monospace;font-size:.875rem;line-height:1.5;overflow:hidden}.tql-input-multiline .tql-highlight-layer[data-v-0ddc40d6]{overflow-y:auto}.tql-input[data-v-0ddc40d6]{flex:1;width:100%;padding:.5rem 8rem .5rem .75rem;border:none;background:transparent;font-family:Courier New,monospace;font-size:.875rem;line-height:1.5;color:var(--text-color, #333);outline:none;resize:none}.tql-input.tql-input-highlighted[data-v-0ddc40d6]{color:transparent;caret-color:var(--text-color, #333)}.tql-input[data-v-0ddc40d6]::placeholder{color:var(--text-color-secondary, #666);opacity:.7}.tql-input[data-v-0ddc40d6]:disabled{cursor:not-allowed}.tql-token-field[data-v-0ddc40d6]{color:var(--tql-field-color, var(--blue-600, #2563eb))}.tql-token-operator[data-v-0ddc40d6]{color:var(--tql-operator-color, var(--pink-600, #db2777));font-weight:500}.tql-token-logicalOp[data-v-0ddc40d6]{color:var(--tql-logical-color, var(--purple-600, #9333ea));font-weight:600}.tql-token-collectionOp[data-v-0ddc40d6]{color:var(--tql-collection-color, var(--indigo-600, #4f46e5));font-weight:600}.tql-token-string[data-v-0ddc40d6]{color:var(--tql-string-color, var(--green-600, #16a34a))}.tql-token-number[data-v-0ddc40d6]{color:var(--tql-number-color, var(--orange-600, #ea580c))}.tql-token-boolean[data-v-0ddc40d6]{color:var(--tql-boolean-color, var(--cyan-600, #0891b2))}.tql-token-null[data-v-0ddc40d6]{color:var(--tql-null-color, var(--gray-500, #6b7280));font-style:italic}.tql-token-mutator[data-v-0ddc40d6]{color:var(--tql-mutator-color, var(--teal-600, #0d9488));font-style:italic}.tql-token-aggregation[data-v-0ddc40d6]{color:var(--tql-aggregation-color, var(--indigo-600, #4f46e5))}.tql-token-keyword[data-v-0ddc40d6]{color:var(--tql-keyword-color, var(--purple-500, #a855f7))}.tql-token-typeHint[data-v-0ddc40d6]{color:var(--tql-typehint-color, var(--teal-500, #14b8a6))}.tql-token-visualization[data-v-0ddc40d6]{color:var(--tql-viz-color, var(--red-500, #ef4444))}.tql-token-arrow[data-v-0ddc40d6]{color:var(--tql-arrow-color, var(--gray-600, #4b5563));font-weight:600}.tql-token-doubleColon[data-v-0ddc40d6]{color:var(--tql-colon-color, var(--gray-500, #6b7280))}.tql-token-paren[data-v-0ddc40d6],.tql-token-bracket[data-v-0ddc40d6]{color:var(--tql-bracket-color, var(--gray-600, #4b5563))}.tql-token-error[data-v-0ddc40d6]{color:var(--tql-error-color, var(--red-600, #dc2626));text-decoration:wavy underline;text-decoration-color:var(--red-400, #f87171)}.tql-token-error-range[data-v-0ddc40d6]{background-color:var(--red-50, #fef2f2)}.tql-token-unknown[data-v-0ddc40d6]{color:var(--text-color-secondary, #666)}.tql-validation-icon[data-v-0ddc40d6]{position:absolute;right:.5rem;top:50%;transform:translateY(-50%);display:flex;align-items:center;justify-content:center}.tql-input-multiline .tql-validation-icon[data-v-0ddc40d6]{top:.75rem;transform:none}.tql-icon-valid[data-v-0ddc40d6]{color:var(--green-500, #22c55e)}.tql-icon-invalid[data-v-0ddc40d6]{color:var(--red-500, #ef4444)}.tql-icon-clickable[data-v-0ddc40d6]{cursor:pointer;transition:transform .2s}.tql-icon-clickable[data-v-0ddc40d6]:hover{transform:scale(1.2)}.tql-icon-clickable[data-v-0ddc40d6]:focus{outline:2px solid var(--primary-color, #3b82f6);outline-offset:2px;border-radius:50%}.tql-snippet-button[data-v-0ddc40d6]{position:absolute;right:2rem;top:50%;transform:translateY(-50%);padding:.25rem;border:none;background:transparent;color:var(--text-color-secondary, #666);cursor:pointer;border-radius:var(--border-radius, 6px);transition:color .2s,background-color .2s}.tql-snippet-button[data-v-0ddc40d6]:hover{color:var(--primary-color, #3b82f6);background:var(--surface-100, #f5f5f5)}.tql-input-multiline .tql-snippet-button[data-v-0ddc40d6]{top:.75rem;transform:none}.tql-input-resizable-textarea[data-v-0ddc40d6]{resize:vertical;min-height:80px}.tql-input-wrapper.tql-input-resizable[data-v-0ddc40d6]{height:auto}.tql-input-wrapper.tql-input-resizable .tql-highlight-layer[data-v-0ddc40d6]{height:100%}.tql-validation-messages[data-v-0ddc40d6]{position:absolute;top:100%;left:0;right:0;margin-top:.25rem;background:var(--surface-overlay, #fff);border:1px solid var(--red-200, #fecaca);border-radius:var(--border-radius, 6px);padding:.5rem;z-index:10;box-shadow:0 2px 8px #0000001a}.tql-input-autocomplete-active .tql-validation-messages[data-v-0ddc40d6],.tql-input-autocomplete-active .tql-complexity-warnings[data-v-0ddc40d6],.tql-input-autocomplete-active .tql-history-dropdown[data-v-0ddc40d6],.tql-input-autocomplete-active .tql-preview-panel[data-v-0ddc40d6]{display:none!important}.tql-error-message[data-v-0ddc40d6]{display:flex;align-items:flex-start;gap:.5rem;padding:.25rem 0;font-size:.75rem;color:var(--red-600, #dc2626)}.tql-error-message i[data-v-0ddc40d6]{margin-top:.125rem;font-size:.75rem}.tql-error-suggestion[data-v-0ddc40d6]{display:block;color:var(--text-color-secondary, #666);font-style:italic;margin-left:1.25rem}.sr-only[data-v-0ddc40d6]{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.tql-toolbar[data-v-0ddc40d6]{position:absolute;right:.5rem;top:50%;transform:translateY(-50%);display:flex;align-items:center;gap:.25rem}.tql-input-multiline .tql-toolbar[data-v-0ddc40d6]{top:.5rem;transform:none}.tql-toolbar-button[data-v-0ddc40d6]{padding:.25rem;border:none;background:transparent;color:var(--text-color-secondary, #666);cursor:pointer;border-radius:var(--border-radius, 4px);transition:color .2s,background-color .2s;display:flex;align-items:center;justify-content:center}.tql-toolbar-button[data-v-0ddc40d6]:hover{color:var(--primary-color, #3b82f6);background:var(--surface-100, #f5f5f5)}.tql-toolbar-button--active[data-v-0ddc40d6]{color:var(--primary-color, #3b82f6);background:var(--primary-100, rgba(59, 130, 246, .1))}.tql-validation-status[data-v-0ddc40d6]{display:flex;align-items:center}.tql-complexity-badge[data-v-0ddc40d6]{display:flex;align-items:center;gap:.25rem;padding:.125rem .5rem;border-radius:9999px;font-size:.625rem;font-weight:600;text-transform:uppercase;letter-spacing:.025em}.tql-complexity-low[data-v-0ddc40d6]{background:var(--green-100, #dcfce7);color:var(--green-700, #15803d)}.tql-complexity-medium[data-v-0ddc40d6]{background:var(--yellow-100, #fef9c3);color:var(--yellow-700, #a16207)}.tql-complexity-high[data-v-0ddc40d6]{background:var(--red-100, #fee2e2);color:var(--red-700, #b91c1c)}.tql-complexity-count[data-v-0ddc40d6]{display:inline-flex;align-items:center;justify-content:center;min-width:1rem;height:1rem;padding:0 .25rem;border-radius:9999px;background:currentColor;color:#fff;font-size:.5rem}.tql-complexity-low .tql-complexity-count[data-v-0ddc40d6]{background:var(--green-600, #16a34a)}.tql-complexity-medium .tql-complexity-count[data-v-0ddc40d6]{background:var(--yellow-600, #ca8a04)}.tql-complexity-high .tql-complexity-count[data-v-0ddc40d6]{background:var(--red-600, #dc2626)}.tql-complexity-warnings[data-v-0ddc40d6]{position:absolute;top:100%;left:0;right:0;margin-top:.25rem;background:var(--surface-overlay, #fff);border:1px solid var(--surface-border, #e0e0e0);border-radius:var(--border-radius, 6px);padding:.5rem;z-index:9;box-shadow:0 2px 8px #0000001a}.tql-complexity-warning[data-v-0ddc40d6]{display:flex;align-items:flex-start;gap:.5rem;padding:.25rem 0;font-size:.75rem}.tql-complexity-warning i[data-v-0ddc40d6]{margin-top:.125rem;font-size:.75rem}.tql-complexity-warning--info[data-v-0ddc40d6]{color:var(--blue-600, #2563eb)}.tql-complexity-warning--warning[data-v-0ddc40d6]{color:var(--yellow-600, #ca8a04)}.tql-complexity-warning--error[data-v-0ddc40d6]{color:var(--red-600, #dc2626)}.tql-complexity-suggestions[data-v-0ddc40d6]{margin-top:.5rem;padding-top:.5rem;border-top:1px solid var(--surface-border, #e0e0e0)}.tql-complexity-suggestion[data-v-0ddc40d6]{display:flex;align-items:flex-start;gap:.5rem;padding:.25rem 0;font-size:.75rem;color:var(--text-color-secondary, #666)}.tql-complexity-suggestion i[data-v-0ddc40d6]{color:var(--yellow-500, #eab308)}.tql-history-dropdown[data-v-0ddc40d6]{position:absolute;top:100%;left:0;right:0;margin-top:.25rem;background:var(--surface-overlay, #fff);border:1px solid var(--surface-border, #e0e0e0);border-radius:var(--border-radius, 6px);z-index:20;box-shadow:0 4px 12px #00000026;max-height:300px;overflow:hidden;display:flex;flex-direction:column}.tql-history-header[data-v-0ddc40d6]{padding:.5rem;border-bottom:1px solid var(--surface-border, #e0e0e0)}.tql-history-search[data-v-0ddc40d6]{width:100%;padding:.375rem .5rem;border:1px solid var(--surface-border, #e0e0e0);border-radius:var(--border-radius, 4px);font-size:.75rem;outline:none}.tql-history-search[data-v-0ddc40d6]:focus{border-color:var(--primary-color, #3b82f6)}.tql-history-list[data-v-0ddc40d6]{overflow-y:auto;flex:1}.tql-history-item[data-v-0ddc40d6]{display:flex;align-items:flex-start;gap:.5rem;padding:.5rem;cursor:pointer;border-bottom:1px solid var(--surface-50, #f9fafb);transition:background-color .15s}.tql-history-item[data-v-0ddc40d6]:hover{background:var(--surface-100, #f5f5f5)}.tql-history-item--favorite[data-v-0ddc40d6]{background:var(--yellow-50, #fefce8)}.tql-history-item--favorite[data-v-0ddc40d6]:hover{background:var(--yellow-100, #fef9c3)}.tql-history-favorite[data-v-0ddc40d6]{padding:.125rem;border:none;background:transparent;color:var(--text-color-secondary, #999);cursor:pointer;flex-shrink:0}.tql-history-favorite[data-v-0ddc40d6]:hover,.tql-history-item--favorite .tql-history-favorite[data-v-0ddc40d6]{color:var(--yellow-500, #eab308)}.tql-history-content[data-v-0ddc40d6]{flex:1;min-width:0}.tql-history-label[data-v-0ddc40d6]{font-size:.6875rem;font-weight:600;color:var(--text-color, #333);margin-bottom:.125rem}.tql-history-query[data-v-0ddc40d6]{font-family:Courier New,monospace;font-size:.6875rem;color:var(--text-color-secondary, #666);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tql-history-time[data-v-0ddc40d6]{font-size:.625rem;color:var(--text-color-secondary, #999);flex-shrink:0}.tql-history-empty[data-v-0ddc40d6]{padding:1rem;text-align:center;color:var(--text-color-secondary, #666);font-size:.75rem}.tql-preview-panel[data-v-0ddc40d6]{position:absolute;top:100%;left:0;right:0;margin-top:.25rem;background:var(--surface-overlay, #fff);border:1px solid var(--surface-border, #e0e0e0);border-radius:var(--border-radius, 6px);z-index:15;box-shadow:0 4px 12px #00000026;max-height:400px;overflow:hidden;display:flex;flex-direction:column}.tql-preview-header[data-v-0ddc40d6]{display:flex;align-items:center;justify-content:space-between;padding:.5rem .75rem;border-bottom:1px solid var(--surface-border, #e0e0e0);font-size:.75rem;font-weight:600;color:var(--text-color, #333)}.tql-preview-close[data-v-0ddc40d6]{padding:.125rem;border:none;background:transparent;color:var(--text-color-secondary, #666);cursor:pointer;border-radius:var(--border-radius, 4px)}.tql-preview-close[data-v-0ddc40d6]:hover{background:var(--surface-100, #f5f5f5);color:var(--text-color, #333)}.tql-preview-panel[data-v-0ddc40d6] .tql-preview{border:none;border-radius:0;max-height:350px;overflow-y:auto}.tql-validation-messages-portal{position:fixed;top:var(--tql-msg-top, 0);left:var(--tql-msg-left, 0);width:var(--tql-msg-width, auto);z-index:9998;background:var(--surface-overlay, #fff);border:2px solid var(--red-500, #ef4444);border-radius:var(--border-radius, 6px);padding:.5rem;box-shadow:0 4px 12px #00000026}.tql-validation-messages-portal .tql-error-message{display:flex;align-items:flex-start;gap:.5rem;padding:.25rem 0;font-size:.75rem;color:var(--red-600, #dc2626)}.tql-validation-messages-portal .tql-error-message i{margin-top:.125rem;font-size:.75rem}.tql-validation-messages-portal .tql-error-suggestion{display:block;color:var(--text-color-secondary, #6b7280);font-style:italic;margin-left:1.25rem}

package/dist/vue/TqlInput.vue.js

@@ -1,7 +1,8 @@
 import o from "./TqlInput.vue2.js";
 /* empty css              */
+/* empty css              */
 import t from "../_virtual/_plugin-vue_export-helper.js";
-const a = /* @__PURE__ */ t(o, [["__scopeId", "data-v-debfa7f2"]]);
+const _ = /* @__PURE__ */ t(o, [["__scopeId", "data-v-0ddc40d6"]]);
 export {
-  a as default
+  _ as default
 };

package/dist/vue/TqlInput.vue2.js

@@ -1,47 +1,47 @@
-import { defineComponent as Ae, ref as g, toRef as J, computed as I, watch as Fe, onMounted as Le, onUnmounted as Oe, openBlock as o, createElementBlock as i, normalizeClass as w, unref as c, Fragment as B, renderList as M, toDisplayString as h, createCommentVNode as v, withDirectives as W, vModelText as X, createElementVNode as r, withModifiers as D, withKeys as ce, createVNode as de, nextTick as Q } from "vue";
-import Ne from "./TqlAutocomplete.vue.js";
-import Ue from "./components/TqlPreview.vue.js";
-import { useTqlInput as ze } from "./useTqlInput.js";
-import { useQueryHistory as je } from "./composables/useQueryHistory.js";
-import { analyzeComplexity as Ge } from "../src/complexityAnalyzer.js";
-const Je = {
+import { defineComponent as Ge, ref as p, toRef as W, computed as H, watch as ee, onMounted as Je, nextTick as S, onUnmounted as Xe, openBlock as o, createElementBlock as a, normalizeClass as w, unref as u, Fragment as D, renderList as Q, toDisplayString as y, createCommentVNode as v, withDirectives as te, vModelText as le, createElementVNode as r, withModifiers as I, withKeys as ye, createVNode as ge, createBlock as Ye, Teleport as Ze } from "vue";
+import _e from "./TqlAutocomplete.vue.js";
+import et from "./components/TqlPreview.vue.js";
+import { useTqlInput as tt } from "./useTqlInput.js";
+import { useQueryHistory as lt } from "./composables/useQueryHistory.js";
+import { analyzeComplexity as ot } from "../src/complexityAnalyzer.js";
+const it = {
   key: 0,
   class: "tql-highlight-layer",
   "aria-hidden": "true"
-}, We = ["placeholder", "disabled", "readonly", "rows", "aria-expanded", "aria-invalid", "aria-describedby"], Xe = ["placeholder", "disabled", "readonly", "aria-expanded", "aria-invalid", "aria-describedby"], Ye = { class: "tql-toolbar" }, Ze = ["title"], _e = { class: "tql-complexity-label" }, et = {
+}, at = ["placeholder", "disabled", "readonly", "rows", "aria-expanded", "aria-invalid", "aria-describedby"], st = ["placeholder", "disabled", "readonly", "aria-expanded", "aria-invalid", "aria-describedby"], nt = { class: "tql-toolbar" }, ut = ["title"], rt = { class: "tql-complexity-label" }, dt = {
   key: 0,
   class: "tql-complexity-count"
-}, tt = {
+}, ct = {
   key: 4,
   class: "tql-validation-status"
-}, lt = {
+}, vt = {
   key: 0,
   class: "pi pi-check-circle tql-icon-valid",
   "aria-label": "Query is valid"
-}, ot = ["aria-label", "aria-expanded"], it = { class: "tql-history-header" }, at = { class: "tql-history-list" }, st = ["onClick"], nt = ["title", "onClick"], ut = { class: "tql-history-content" }, rt = {
+}, ft = ["aria-label", "aria-expanded"], pt = { class: "tql-history-header" }, ht = { class: "tql-history-list" }, mt = ["onClick"], yt = ["title", "onClick"], gt = { class: "tql-history-content" }, wt = {
   key: 0,
   class: "tql-history-label"
-}, ct = { class: "tql-history-query" }, dt = { class: "tql-history-time" }, vt = {
+}, bt = { class: "tql-history-query" }, qt = { class: "tql-history-time" }, kt = {
   key: 0,
   class: "tql-history-empty"
-}, pt = {
+}, xt = {
   key: 0,
   class: "tql-error-suggestion"
-}, ft = {
-  key: 5,
+}, Ct = {
+  key: 4,
   class: "tql-complexity-warnings"
-}, yt = {
+}, Vt = {
   key: 0,
   class: "tql-complexity-suggestions"
-}, ht = {
-  key: 6,
+}, Pt = {
+  key: 5,
   class: "tql-preview-panel"
-}, mt = { class: "tql-preview-header" }, gt = {
+}, St = { class: "tql-preview-header" }, Rt = {
   class: "sr-only",
   role: "status",
   "aria-live": "polite",
   "aria-atomic": "true"
-}, wt = { key: 0 }, bt = { key: 1 }, Pt = /* @__PURE__ */ Ae({
+}, $t = { key: 0 }, Et = { key: 1 }, Lt = /* @__PURE__ */ Ge({
   __name: "TqlInput",
   props: {
     modelValue: {},
@@ -54,12 +54,15 @@ const Je = {
     validateOnInput: { type: Boolean, default: !0 },
     debounceMs: { default: 300 },
     fieldSchema: {},
+    fieldValues: {},
     modelName: {},
     snippets: {},
     showSnippetButton: { type: Boolean, default: !1 },
     autocomplete: { type: Boolean, default: !0 },
     syntaxHighlighting: { type: Boolean, default: !0 },
-    alwaysShowErrors: { type: Boolean },
+    alwaysShowErrors: { type: Boolean, default: !0 },
+    resizable: { type: Boolean, default: !1 },
+    minHeight: { default: void 0 },
     showComplexity: { type: Boolean, default: !1 },
     showHistory: { type: Boolean, default: !1 },
     showPreview: { type: Boolean, default: !1 },
@@ -68,431 +71,468 @@ const Je = {
     historyStorageKey: {}
   },
   emits: ["update:modelValue", "validation", "parse", "submit"],
-  setup(a, { expose: ve, emit: pe }) {
-    const d = a, b = pe, u = g(null), K = g(null), E = g(null), n = g(d.modelValue), S = g(!1), f = g(!1), q = g(!1), k = g(!1), P = g(""), O = `tql-input-${Math.random().toString(36).substring(2, 9)}`, Y = `${O}-input`, N = `${O}-autocomplete`, U = `${O}-errors`, H = g([]), R = g(-1), fe = J(d, "modelValue"), ye = J(d, "fieldSchema"), he = J(d, "snippets"), {
-      tokens: me,
-      cursorPosition: z,
-      completionItems: j,
+  setup(i, { expose: we, emit: be }) {
+    const c = i, b = be, d = p(null), q = p(null), M = p(null), n = p(c.modelValue), k = p(!1), h = p(!1), C = p(!1), V = p(!1), B = p(""), G = `tql-input-${Math.random().toString(36).substring(2, 9)}`, oe = `${G}-input`, J = `${G}-autocomplete`, X = `${G}-errors`, L = p([]), T = p(-1), qe = W(c, "modelValue"), ke = W(c, "fieldSchema"), xe = W(c, "fieldValues"), Ce = W(c, "snippets"), {
+      tokens: Ve,
+      cursorPosition: Y,
+      completionItems: K,
       showAutocomplete: x,
       isValid: Z,
-      errors: $,
-      hasErrors: T,
-      validate: ge,
-      handleInput: _,
-      handleCursorChange: V,
-      insertCompletion: we,
-      insertSnippet: be,
-      triggerAutocomplete: qe,
+      errors: R,
+      hasErrors: $,
+      validate: Pe,
+      handleInput: ie,
+      handleCursorChange: E,
+      insertCompletion: Se,
+      insertSnippet: Re,
+      triggerAutocomplete: ae,
       hideAutocomplete: A,
-      getTokenAtCursor: ke
-    } = ze({
-      modelValue: fe,
-      fieldSchema: ye,
-      snippets: he,
-      validateOnInput: d.validateOnInput,
-      debounceMs: d.debounceMs,
-      autocomplete: d.autocomplete,
+      getTokenAtCursor: $e
+    } = tt({
+      modelValue: qe,
+      fieldSchema: ke,
+      fieldValues: xe,
+      snippets: Ce,
+      validateOnInput: c.validateOnInput,
+      debounceMs: c.debounceMs,
+      autocomplete: c.autocomplete,
       onValidation: (e) => b("validation", e),
       onParse: (e) => b("parse", e)
-    }), C = d.showHistory ? je({
-      storageKey: d.historyStorageKey || "tql-history",
-      ...d.historyOptions
-    }) : null, y = I(() => !d.showComplexity || !n.value.trim() ? null : Ge(n.value, d.complexityThresholds)), xe = I(() => y.value ? `tql-complexity-${y.value.score}` : ""), ee = I(() => y.value && {
+    }), P = c.showHistory ? lt({
+      storageKey: c.historyStorageKey || "tql-history",
+      ...c.historyOptions
+    }) : null, m = H(() => !c.showComplexity || !n.value.trim() ? null : ot(n.value, c.complexityThresholds)), Ee = H(() => m.value ? `tql-complexity-${m.value.score}` : ""), se = H(() => m.value && {
       low: "Low",
       medium: "Medium",
       high: "High"
-    }[y.value.score] || ""), te = I(() => C ? P.value.trim() ? C.searchHistory(P.value).slice(0, 10) : C.getRecentQueries(10) : []);
-    function Ce(e) {
-      n.value = e.query, b("update:modelValue", e.query), _(e.query), q.value = !1, P.value = "", Q(() => {
+    }[m.value.score] || ""), ne = H(() => P ? B.value.trim() ? P.searchHistory(B.value).slice(0, 10) : P.getRecentQueries(10) : []);
+    function He(e) {
+      n.value = e.query, b("update:modelValue", e.query), ie(e.query), C.value = !1, B.value = "", S(() => {
         var t;
-        return (t = u.value) == null ? void 0 : t.focus();
+        return (t = d.value) == null ? void 0 : t.focus();
       });
     }
-    function Se(e, t) {
-      t.stopPropagation(), C == null || C.toggleFavorite(e.id);
+    function Be(e, t) {
+      t.stopPropagation(), P == null || P.toggleFavorite(e.id);
     }
-    function le() {
-      C && n.value.trim() && C.addQuery(n.value);
+    function ue() {
+      P && n.value.trim() && P.addQuery(n.value);
     }
-    function Ve() {
-      q.value = !q.value, q.value && (k.value = !1);
+    function Te() {
+      C.value = !C.value, C.value && (V.value = !1);
     }
-    function Pe() {
-      k.value = !k.value, k.value && (q.value = !1);
+    function De() {
+      V.value = !V.value, V.value && (C.value = !1);
     }
-    Fe(
-      () => d.modelValue,
+    ee(
+      () => c.modelValue,
       (e) => {
         e !== n.value && (n.value = e);
       }
+    ), ee(
+      () => c.minHeight,
+      (e) => {
+        q.value && (e ? q.value.style.setProperty("--tql-min-height", e) : q.value.style.removeProperty("--tql-min-height"));
+      },
+      { immediate: !0 }
     );
-    const Re = I(() => {
-      if (!u.value || !K.value)
-        return { top: 0, left: 0 };
-      const e = K.value.getBoundingClientRect();
-      return {
+    const Ie = H(() => c.alwaysShowErrors === !0 || c.alwaysShowErrors === void 0 || h.value), F = p({ top: 0, left: 0 }), Me = H(() => F.value.top > 0 || F.value.left > 0), re = p({ top: 0, left: 0, width: 0 }), z = p(null), Le = H(() => {
+      const e = re.value;
+      return e.top > 0 || e.left > 0 || e.width > 0;
+    });
+    function O() {
+      if (!q.value)
+        return;
+      const e = q.value.getBoundingClientRect();
+      F.value = {
         top: e.bottom + 4,
         left: e.left
-      };
-    });
-    function $e(e) {
+      }, re.value = {
+        top: e.bottom + 4,
+        left: e.left,
+        width: e.width
+      }, z.value && (z.value.style.setProperty("--tql-msg-top", `${e.bottom + 4}px`), z.value.style.setProperty("--tql-msg-left", `${e.left}px`), z.value.style.setProperty("--tql-msg-width", `${e.width}px`));
+    }
+    function ze(e) {
       const t = `tql-token tql-token-${e.type}`;
-      return $.value.some((s) => e.start >= s.start && e.end <= s.end) ? `${t} tql-token-error-range` : t;
+      return R.value.some((s) => e.start >= s.start && e.end <= s.end) ? `${t} tql-token-error-range` : t;
     }
-    function oe(e) {
+    function de(e) {
       const t = e.target;
-      n.value = t.value, b("update:modelValue", t.value), _(t.value), Q(() => {
-        u.value && V(u.value.selectionStart || 0);
+      n.value = t.value, b("update:modelValue", t.value), ie(t.value), S(() => {
+        d.value && E(d.value.selectionStart || 0);
       });
     }
-    function F() {
-      if (u.value) {
-        const e = u.value.selectionStart || 0;
-        e !== z.value && V(e);
+    function N() {
+      if (d.value) {
+        const e = d.value.selectionStart || 0;
+        e !== Y.value && E(e);
       }
     }
-    function ie(e) {
-      var t, l, s, p, m;
+    function ce(e) {
+      var t, l, s, f, g;
       if (e.key === "Tab" && !e.shiftKey) {
-        if (H.value.length > 0 && R.value >= 0) {
-          e.preventDefault(), Te();
+        if (L.value.length > 0 && T.value >= 0) {
+          e.preventDefault(), Qe();
           return;
         }
-        if (Be()) {
-          e.preventDefault(), De();
+        if (Ke()) {
+          e.preventDefault(), Ae();
           return;
         }
       }
-      if (x.value && j.value.length > 0)
+      if (x.value && K.value.length > 0)
         switch (e.key) {
           case "ArrowDown":
-            e.preventDefault(), (t = E.value) == null || t.moveDown();
+            e.preventDefault(), (t = M.value) == null || t.moveDown();
             return;
           case "ArrowUp":
-            e.preventDefault(), (l = E.value) == null || l.moveUp();
+            e.preventDefault(), (l = M.value) == null || l.moveUp();
             return;
           case "Tab":
-            e.preventDefault(), V(((s = u.value) == null ? void 0 : s.selectionStart) || 0), j.value.length > 0 && ((p = E.value) == null || p.selectCurrent());
+            e.preventDefault(), E(((s = d.value) == null ? void 0 : s.selectionStart) || 0), K.value.length > 0 && ((f = M.value) == null || f.selectCurrent());
             return;
           case "Enter":
-            if (!d.multiline)
+            if (!c.multiline)
               break;
-            e.preventDefault(), (m = E.value) == null || m.selectCurrent();
+            e.preventDefault(), (g = M.value) == null || g.selectCurrent();
             return;
           case "Escape":
-            e.preventDefault(), A(), G();
+            e.preventDefault(), A(), _();
             return;
         }
       if (e.key === " " && e.ctrlKey) {
-        e.preventDefault(), qe();
+        e.preventDefault(), ae();
         return;
       }
-      e.key === "Enter" && (d.multiline && e.ctrlKey || !d.multiline && !x.value) && (e.preventDefault(), le(), b("submit", n.value));
+      e.key === "Enter" && (c.multiline && e.ctrlKey || !c.multiline && !x.value) && (e.preventDefault(), ue(), b("submit", n.value));
     }
-    function Te() {
-      if (R.value++, R.value >= H.value.length) {
-        G();
+    function Qe() {
+      if (T.value++, T.value >= L.value.length) {
+        _();
         return;
       }
-      const e = H.value[R.value];
-      u.value && (u.value.setSelectionRange(e.start, e.end), u.value.focus(), V(e.start));
+      const e = L.value[T.value];
+      d.value && (d.value.setSelectionRange(e.start, e.end), d.value.focus(), E(e.start));
     }
-    function G() {
-      H.value = [], R.value = -1;
+    function _() {
+      L.value = [], T.value = -1;
     }
-    function Be() {
-      const e = z.value, t = n.value;
+    function Ke() {
+      const e = Y.value, t = n.value;
       let l = !1, s = null;
-      for (let p = 0; p < e; p++) {
-        const m = t[p], L = p > 0 ? t[p - 1] : "";
-        (m === '"' || m === "'") && L !== "\\" && (l ? m === s && (l = !1, s = null) : (l = !0, s = m));
+      for (let f = 0; f < e; f++) {
+        const g = t[f], j = f > 0 ? t[f - 1] : "";
+        (g === '"' || g === "'") && j !== "\\" && (l ? g === s && (l = !1, s = null) : (l = !0, s = g));
       }
       return l;
     }
-    function De() {
-      const e = z.value, t = n.value;
+    function Ae() {
+      const e = Y.value, t = n.value;
       for (let l = e; l < t.length; l++)
         if (t[l] === '"' || t[l] === "'") {
           const s = l + 1;
-          u.value && (u.value.setSelectionRange(s, s), V(s));
+          d.value && (d.value.setSelectionRange(s, s), E(s));
           return;
         }
     }
-    function ae() {
-      S.value = !0;
+    function ve() {
+      k.value = !0, S(() => {
+        O(), ae();
+      });
     }
-    function se(e) {
+    function fe(e) {
       const l = e.relatedTarget;
       if (l != null && l.closest(".tql-autocomplete-dropdown")) {
         setTimeout(() => {
-          S.value || (A(), f.value = !1);
+          k.value || (A(), h.value = !1);
         }, 300);
         return;
       }
-      S.value = !1, setTimeout(() => {
-        S.value || (A(), f.value = !1);
+      k.value = !1, setTimeout(() => {
+        k.value || (A(), h.value = !1);
       }, 200);
     }
-    function Ee(e) {
-      const t = we(e);
-      n.value = t.query, b("update:modelValue", t.query), t.placeholders.length > 0 ? (H.value = t.placeholders, R.value = 0) : G(), Q(() => {
-        u.value && (u.value.focus(), u.value.setSelectionRange(t.newCursorPosition, t.newCursorPosition), V(t.newCursorPosition));
+    function Fe(e) {
+      const t = Se(e);
+      n.value = t.query, b("update:modelValue", t.query), t.placeholders.length > 0 ? (L.value = t.placeholders, T.value = 0) : _(), S(() => {
+        d.value && (d.value.focus(), d.value.setSelectionRange(t.newCursorPosition, t.newCursorPosition), E(t.newCursorPosition));
       });
     }
-    function He(e) {
-      const t = be(e);
-      n.value = t, b("update:modelValue", t), Q(() => {
-        u.value && u.value.focus();
+    function Oe(e) {
+      const t = Re(e);
+      n.value = t, b("update:modelValue", t), S(() => {
+        d.value && d.value.focus();
       });
     }
-    function Ie() {
+    function Ne() {
       var e;
-      (e = u.value) == null || e.focus();
+      (e = d.value) == null || e.focus();
     }
-    function Me() {
+    function Ue() {
       var e;
-      (e = u.value) == null || e.blur();
+      (e = d.value) == null || e.blur();
     }
-    function ne() {
+    function pe() {
       var e;
-      return ((e = u.value) == null ? void 0 : e.selectionStart) || 0;
+      return ((e = d.value) == null ? void 0 : e.selectionStart) || 0;
     }
-    function ue(e) {
-      u.value && (u.value.setSelectionRange(e, e), V(e));
+    function he(e) {
+      d.value && (d.value.setSelectionRange(e, e), E(e));
     }
-    function Qe(e) {
-      const t = ne(), l = n.value.substring(0, t), s = n.value.substring(t), p = l + e + s;
-      n.value = p, b("update:modelValue", p), Q(() => {
-        ue(t + e.length);
+    function je(e) {
+      const t = pe(), l = n.value.substring(0, t), s = n.value.substring(t), f = l + e + s;
+      n.value = f, b("update:modelValue", f), S(() => {
+        he(t + e.length);
       });
     }
-    function Ke(e) {
-      const l = Date.now() - e, s = Math.floor(l / 1e3), p = Math.floor(s / 60), m = Math.floor(p / 60), L = Math.floor(m / 24);
-      return L > 0 ? `${L}d ago` : m > 0 ? `${m}h ago` : p > 0 ? `${p}m ago` : "just now";
+    function We(e) {
+      const l = Date.now() - e, s = Math.floor(l / 1e3), f = Math.floor(s / 60), g = Math.floor(f / 60), j = Math.floor(g / 24);
+      return j > 0 ? `${j}d ago` : g > 0 ? `${g}h ago` : f > 0 ? `${f}m ago` : "just now";
     }
-    function re(e) {
+    function me(e) {
       var l;
       const t = e.target;
-      (l = K.value) != null && l.contains(t) || (q.value = !1, k.value = !1);
+      (l = q.value) != null && l.contains(t) || (C.value = !1, V.value = !1);
     }
-    return ve({
-      focus: Ie,
-      blur: Me,
-      validate: ge,
-      insertText: Qe,
-      insertSnippet: He,
-      getTokenAtPosition: ke,
-      getCursorPosition: ne,
-      setCursorPosition: ue
-    }), Le(() => {
-      document.addEventListener("selectionchange", F), document.addEventListener("click", re);
-    }), Oe(() => {
-      document.removeEventListener("selectionchange", F), document.removeEventListener("click", re);
-    }), (e, t) => (o(), i("div", {
+    we({
+      focus: Ne,
+      blur: Ue,
+      validate: Pe,
+      insertText: je,
+      insertSnippet: Oe,
+      getTokenAtPosition: $e,
+      getCursorPosition: pe,
+      setCursorPosition: he
+    });
+    function U() {
+      (x.value || $.value) && k.value && O();
+    }
+    return Je(() => {
+      document.addEventListener("selectionchange", N), document.addEventListener("click", me), window.addEventListener("scroll", U, !0), window.addEventListener("resize", U), c.minHeight && q.value && q.value.style.setProperty("--tql-min-height", c.minHeight), S(() => {
+        O();
+      });
+    }), ee(
+      () => $.value,
+      (e) => {
+        e && S(() => {
+          O();
+        });
+      },
+      { immediate: !0 }
+    ), Xe(() => {
+      document.removeEventListener("selectionchange", N), document.removeEventListener("click", me), window.removeEventListener("scroll", U, !0), window.removeEventListener("resize", U);
+    }), (e, t) => (o(), a("div", {
       ref_key: "wrapperRef",
-      ref: K,
+      ref: q,
       class: w([
         "tql-input-wrapper",
         {
-          "tql-input-focused": S.value,
-          "tql-input-invalid": c(T) && a.showValidation,
-          "tql-input-disabled": a.disabled,
-          "tql-input-multiline": a.multiline,
-          "tql-input-autocomplete-active": c(x)
+          "tql-input-focused": k.value,
+          "tql-input-invalid": u($) && i.showValidation,
+          "tql-input-disabled": i.disabled,
+          "tql-input-multiline": i.multiline,
+          "tql-input-autocomplete-active": u(x),
+          "tql-input-resizable": i.resizable && i.multiline,
+          "tql-input-has-min-height": !!i.minHeight
         }
       ])
     }, [
-      a.syntaxHighlighting ? (o(), i("div", Je, [
-        (o(!0), i(B, null, M(c(me), (l, s) => (o(), i("span", {
+      i.syntaxHighlighting ? (o(), a("div", it, [
+        (o(!0), a(D, null, Q(u(Ve), (l, s) => (o(), a("span", {
           key: s,
-          class: w($e(l))
-        }, h(l.raw || l.value), 3))), 128))
+          class: w(ze(l))
+        }, y(l.raw || l.value), 3))), 128))
       ])) : v("", !0),
-      a.multiline ? W((o(), i("textarea", {
+      i.multiline ? te((o(), a("textarea", {
         key: 1,
-        id: Y,
+        id: oe,
         ref_key: "inputRef",
-        ref: u,
+        ref: d,
         "onUpdate:modelValue": t[0] || (t[0] = (l) => n.value = l),
-        class: w(["tql-input", { "tql-input-highlighted": a.syntaxHighlighting }]),
-        placeholder: a.placeholder,
-        disabled: a.disabled,
-        readonly: a.readonly,
-        rows: a.rows,
+        class: w(["tql-input", { "tql-input-highlighted": i.syntaxHighlighting, "tql-input-resizable-textarea": i.resizable }]),
+        placeholder: i.placeholder,
+        disabled: i.disabled,
+        readonly: i.readonly,
+        rows: i.rows,
         role: "combobox",
-        "aria-expanded": c(x) && S.value,
-        "aria-controls": N,
-        "aria-invalid": c(T) && a.showValidation,
-        "aria-describedby": c(T) && f.value ? U : void 0,
+        "aria-expanded": u(x) && k.value,
+        "aria-controls": J,
+        "aria-invalid": u($) && i.showValidation,
+        "aria-describedby": u($) && h.value ? X : void 0,
         "aria-autocomplete": "list",
         "aria-haspopup": "listbox",
         spellcheck: "false",
         autocomplete: "off",
         autocapitalize: "off",
-        onInput: oe,
-        onKeydown: ie,
-        onFocus: ae,
-        onBlur: se,
-        onClick: F
-      }, null, 42, We)), [
-        [X, n.value]
-      ]) : W((o(), i("input", {
+        onInput: de,
+        onKeydown: ce,
+        onFocus: ve,
+        onBlur: fe,
+        onClick: N
+      }, null, 42, at)), [
+        [le, n.value]
+      ]) : te((o(), a("input", {
         key: 2,
-        id: Y,
+        id: oe,
         ref_key: "inputRef",
-        ref: u,
+        ref: d,
         "onUpdate:modelValue": t[1] || (t[1] = (l) => n.value = l),
         type: "text",
-        class: w(["tql-input", { "tql-input-highlighted": a.syntaxHighlighting }]),
-        placeholder: a.placeholder,
-        disabled: a.disabled,
-        readonly: a.readonly,
+        class: w(["tql-input", { "tql-input-highlighted": i.syntaxHighlighting }]),
+        placeholder: i.placeholder,
+        disabled: i.disabled,
+        readonly: i.readonly,
         role: "combobox",
-        "aria-expanded": c(x) && S.value,
-        "aria-controls": N,
-        "aria-invalid": c(T) && a.showValidation,
-        "aria-describedby": c(T) && f.value ? U : void 0,
+        "aria-expanded": u(x) && k.value,
+        "aria-controls": J,
+        "aria-invalid": u($) && i.showValidation,
+        "aria-describedby": u($) && h.value ? X : void 0,
         "aria-autocomplete": "list",
         "aria-haspopup": "listbox",
         spellcheck: "false",
         autocomplete: "off",
         autocapitalize: "off",
-        onInput: oe,
-        onKeydown: ie,
-        onFocus: ae,
-        onBlur: se,
-        onClick: F
-      }, null, 42, Xe)), [
-        [X, n.value]
+        onInput: de,
+        onKeydown: ce,
+        onFocus: ve,
+        onBlur: fe,
+        onClick: N
+      }, null, 42, st)), [
+        [le, n.value]
       ]),
-      r("div", Ye, [
-        a.showComplexity && y.value && n.value.trim() ? (o(), i("div", {
+      r("div", nt, [
+        i.showComplexity && m.value && n.value.trim() ? (o(), a("div", {
           key: 0,
-          class: w(["tql-complexity-badge", xe.value]),
-          title: `${ee.value} complexity - ${y.value.warnings.length} warning(s)`
+          class: w(["tql-complexity-badge", Ee.value]),
+          title: `${se.value} complexity - ${m.value.warnings.length} warning(s)`
         }, [
-          r("span", _e, h(ee.value), 1),
-          y.value.warnings.length > 0 ? (o(), i("span", et, h(y.value.warnings.length), 1)) : v("", !0)
-        ], 10, Ze)) : v("", !0),
-        a.showHistory ? (o(), i("button", {
+          r("span", rt, y(se.value), 1),
+          m.value.warnings.length > 0 ? (o(), a("span", dt, y(m.value.warnings.length), 1)) : v("", !0)
+        ], 10, ut)) : v("", !0),
+        i.showHistory ? (o(), a("button", {
           key: 1,
           type: "button",
-          class: w(["tql-toolbar-button", { "tql-toolbar-button--active": q.value }]),
+          class: w(["tql-toolbar-button", { "tql-toolbar-button--active": C.value }]),
           title: "Query history",
-          onClick: D(Ve, ["stop"])
+          onClick: I(Te, ["stop"])
         }, [...t[10] || (t[10] = [
           r("i", { class: "pi pi-history" }, null, -1)
         ])], 2)) : v("", !0),
-        a.showPreview ? (o(), i("button", {
+        i.showPreview ? (o(), a("button", {
           key: 2,
           type: "button",
-          class: w(["tql-toolbar-button", { "tql-toolbar-button--active": k.value }]),
+          class: w(["tql-toolbar-button", { "tql-toolbar-button--active": V.value }]),
           title: "Preview query structure",
-          onClick: D(Pe, ["stop"])
+          onClick: I(De, ["stop"])
         }, [...t[11] || (t[11] = [
           r("i", { class: "pi pi-sitemap" }, null, -1)
         ])], 2)) : v("", !0),
-        a.showSnippetButton && a.snippets && a.snippets.length > 0 ? (o(), i("button", {
+        i.showSnippetButton && i.snippets && i.snippets.length > 0 ? (o(), a("button", {
           key: 3,
           type: "button",
           class: "tql-toolbar-button tql-snippet-button",
           title: "Insert snippet",
-          onClick: t[2] || (t[2] = D(() => {
+          onClick: t[2] || (t[2] = I(() => {
           }, ["stop"]))
         }, [...t[12] || (t[12] = [
           r("i", { class: "pi pi-code" }, null, -1)
         ])])) : v("", !0),
-        a.showValidation && n.value ? (o(), i("div", tt, [
-          c(Z) ? (o(), i("i", lt)) : (o(), i("i", {
+        i.showValidation && n.value ? (o(), a("div", ct, [
+          u(Z) ? (o(), a("i", vt)) : (o(), a("i", {
             key: 1,
             class: "pi pi-exclamation-circle tql-icon-invalid tql-icon-clickable",
             role: "button",
             tabindex: "0",
             title: "Click to show/hide errors",
-            "aria-label": `Query has ${c($).length} error${c($).length === 1 ? "" : "s"}. Click to ${f.value ? "hide" : "show"} details.`,
-            "aria-expanded": f.value,
-            onClick: t[3] || (t[3] = (l) => f.value = !f.value),
+            "aria-label": `Query has ${u(R).length} error${u(R).length === 1 ? "" : "s"}. Click to ${h.value ? "hide" : "show"} details.`,
+            "aria-expanded": h.value,
+            onClick: t[3] || (t[3] = (l) => h.value = !h.value),
             onKeydown: [
-              t[4] || (t[4] = ce((l) => f.value = !f.value, ["enter"])),
-              t[5] || (t[5] = ce(D((l) => f.value = !f.value, ["prevent"]), ["space"]))
+              t[4] || (t[4] = ye((l) => h.value = !h.value, ["enter"])),
+              t[5] || (t[5] = ye(I((l) => h.value = !h.value, ["prevent"]), ["space"]))
             ]
-          }, null, 40, ot))
+          }, null, 40, ft))
         ])) : v("", !0)
       ]),
-      a.showHistory && q.value ? (o(), i("div", {
+      i.showHistory && C.value ? (o(), a("div", {
         key: 3,
         class: "tql-history-dropdown",
-        onClick: t[8] || (t[8] = D(() => {
+        onClick: t[8] || (t[8] = I(() => {
         }, ["stop"]))
       }, [
-        r("div", it, [
-          W(r("input", {
-            "onUpdate:modelValue": t[6] || (t[6] = (l) => P.value = l),
+        r("div", pt, [
+          te(r("input", {
+            "onUpdate:modelValue": t[6] || (t[6] = (l) => B.value = l),
             type: "text",
             class: "tql-history-search",
             placeholder: "Search history...",
-            onKeydown: t[7] || (t[7] = D(() => {
+            onKeydown: t[7] || (t[7] = I(() => {
             }, ["stop"]))
           }, null, 544), [
-            [X, P.value]
+            [le, B.value]
           ])
         ]),
-        r("div", at, [
-          (o(!0), i(B, null, M(te.value, (l) => (o(), i("div", {
+        r("div", ht, [
+          (o(!0), a(D, null, Q(ne.value, (l) => (o(), a("div", {
             key: l.id,
             class: w(["tql-history-item", { "tql-history-item--favorite": l.isFavorite }]),
-            onClick: (s) => Ce(l)
+            onClick: (s) => He(l)
           }, [
             r("button", {
               type: "button",
               class: "tql-history-favorite",
               title: l.isFavorite ? "Remove from favorites" : "Add to favorites",
-              onClick: (s) => Se(l, s)
+              onClick: (s) => Be(l, s)
             }, [
               r("i", {
                 class: w(l.isFavorite ? "pi pi-star-fill" : "pi pi-star")
               }, null, 2)
-            ], 8, nt),
-            r("div", ut, [
-              l.label ? (o(), i("div", rt, h(l.label), 1)) : v("", !0),
-              r("div", ct, h(l.query), 1)
+            ], 8, yt),
+            r("div", gt, [
+              l.label ? (o(), a("div", wt, y(l.label), 1)) : v("", !0),
+              r("div", bt, y(l.query), 1)
             ]),
-            r("div", dt, h(Ke(l.timestamp)), 1)
-          ], 10, st))), 128)),
-          te.value.length === 0 ? (o(), i("div", vt, h(P.value ? "No matching queries" : "No query history"), 1)) : v("", !0)
+            r("div", qt, y(We(l.timestamp)), 1)
+          ], 10, mt))), 128)),
+          ne.value.length === 0 ? (o(), a("div", kt, y(B.value ? "No matching queries" : "No query history"), 1)) : v("", !0)
         ])
       ])) : v("", !0),
-      de(Ne, {
-        id: N,
+      ge(_e, {
+        id: J,
         ref_key: "autocompleteRef",
-        ref: E,
-        items: c(j),
-        visible: c(x),
-        position: Re.value,
-        onSelect: Ee,
-        onClose: c(A)
+        ref: M,
+        items: u(K),
+        visible: u(x) && k.value && Me.value,
+        position: F.value,
+        onSelect: Fe,
+        onClose: u(A)
       }, null, 8, ["items", "visible", "position", "onClose"]),
-      a.showValidation && c(T) && f.value && n.value && !c(x) ? (o(), i("div", {
-        key: 4,
-        id: U,
-        class: "tql-validation-messages",
-        role: "alert",
-        "aria-live": "polite"
-      }, [
-        (o(!0), i(B, null, M(c($).slice(0, 3), (l, s) => (o(), i("div", {
-          key: s,
-          class: "tql-error-message"
+      (o(), Ye(Ze, { to: "body" }, [
+        i.showValidation && !u(Z) && Ie.value && n.value && u(R).length > 0 && !(u(x) && u(K).length > 0) && Le.value ? (o(), a("div", {
+          key: 0,
+          ref_key: "validationMessagesRef",
+          ref: z,
+          id: X,
+          class: "tql-validation-messages-portal",
+          role: "alert",
+          "aria-live": "polite"
         }, [
-          t[13] || (t[13] = r("i", {
-            class: "pi pi-exclamation-triangle",
-            "aria-hidden": "true"
-          }, null, -1)),
-          r("span", null, h(l.message), 1),
-          l.suggestion ? (o(), i("span", pt, h(l.suggestion), 1)) : v("", !0)
-        ]))), 128))
-      ])) : v("", !0),
-      a.showComplexity && y.value && y.value.warnings.length > 0 && !c(x) ? (o(), i("div", ft, [
-        (o(!0), i(B, null, M(y.value.warnings.slice(0, 3), (l, s) => (o(), i("div", {
+          (o(!0), a(D, null, Q(u(R).slice(0, 3), (l, s) => (o(), a("div", {
+            key: s,
+            class: "tql-error-message"
+          }, [
+            t[13] || (t[13] = r("i", {
+              class: "pi pi-exclamation-triangle",
+              "aria-hidden": "true"
+            }, null, -1)),
+            r("span", null, y(l.message), 1),
+            l.suggestion ? (o(), a("span", xt, y(l.suggestion), 1)) : v("", !0)
+          ]))), 128))
+        ], 512)) : v("", !0)
+      ])),
+      i.showComplexity && m.value && m.value.warnings.length > 0 && !u(x) ? (o(), a("div", Ct, [
+        (o(!0), a(D, null, Q(m.value.warnings.slice(0, 3), (l, s) => (o(), a("div", {
           key: s,
           class: w(["tql-complexity-warning", `tql-complexity-warning--${l.severity}`])
         }, [
@@ -500,10 +540,10 @@ const Je = {
             class: "pi pi-info-circle",
             "aria-hidden": "true"
           }, null, -1)),
-          r("span", null, h(l.message), 1)
+          r("span", null, y(l.message), 1)
         ], 2))), 128)),
-        y.value.suggestions.length > 0 ? (o(), i("div", yt, [
-          (o(!0), i(B, null, M(y.value.suggestions.slice(0, 2), (l, s) => (o(), i("div", {
+        m.value.suggestions.length > 0 ? (o(), a("div", Vt, [
+          (o(!0), a(D, null, Q(m.value.suggestions.slice(0, 2), (l, s) => (o(), a("div", {
             key: s,
             class: "tql-complexity-suggestion"
           }, [
@@ -511,23 +551,23 @@ const Je = {
               class: "pi pi-lightbulb",
               "aria-hidden": "true"
             }, null, -1)),
-            r("span", null, h(l), 1)
+            r("span", null, y(l), 1)
           ]))), 128))
         ])) : v("", !0)
       ])) : v("", !0),
-      a.showPreview && k.value && n.value.trim() ? (o(), i("div", ht, [
-        r("div", mt, [
+      i.showPreview && V.value && n.value.trim() ? (o(), a("div", Pt, [
+        r("div", St, [
           t[17] || (t[17] = r("span", null, "Query Structure", -1)),
           r("button", {
             type: "button",
             class: "tql-preview-close",
             title: "Close preview",
-            onClick: t[9] || (t[9] = (l) => k.value = !1)
+            onClick: t[9] || (t[9] = (l) => V.value = !1)
           }, [...t[16] || (t[16] = [
             r("i", { class: "pi pi-times" }, null, -1)
           ])])
         ]),
-        de(Ue, {
+        ge(et, {
           query: n.value,
           "show-complexity": !1,
           "show-field-usage": !0,
@@ -535,14 +575,14 @@ const Je = {
           compact: ""
         }, null, 8, ["query"])
       ])) : v("", !0),
-      r("div", gt, [
-        a.showValidation && n.value ? (o(), i(B, { key: 0 }, [
-          c(Z) ? (o(), i("span", wt, "Query syntax is valid")) : (o(), i("span", bt, "Query has " + h(c($).length) + " validation error" + h(c($).length === 1 ? "" : "s"), 1))
+      r("div", Rt, [
+        i.showValidation && n.value ? (o(), a(D, { key: 0 }, [
+          u(Z) ? (o(), a("span", $t, "Query syntax is valid")) : (o(), a("span", Et, "Query has " + y(u(R).length) + " validation error" + y(u(R).length === 1 ? "" : "s"), 1))
         ], 64)) : v("", !0)
       ])
     ], 2));
   }
 });
 export {
-  Pt as default
+  Lt as default
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tellaro/tql",
-  "version": "0.1.1",
+  "version": "0.1.3",
   "description": "Tellaro Query Language (TQL) parser, validator, and autocomplete for JavaScript/TypeScript",
   "type": "module",
   "main": "./dist/index.js",
@@ -14,7 +14,9 @@
     "./vue": {
       "import": "./dist/vue/index.js",
       "types": "./dist/vue/index.d.ts"
-    }
+    },
+    "./style.css": "./dist/style.css",
+    "./dist/style.css": "./dist/style.css"
   },
   "files": [
     "dist",