@tellaro/tql 0.1.18 → 0.2.0

package/dist/vue/components/TqlPreview.vue2.js

@@ -1,30 +1,30 @@
-import { defineComponent as $, computed as v, ref as D, openBlock as i, createElementBlock as o, normalizeClass as f, createElementVNode as s, Fragment as h, toDisplayString as a, createCommentVNode as u, renderList as q, createVNode as P, unref as j } from "vue";
-import { generatePreview as A } from "../../src/semanticPreview.js";
-const F = {
+import { defineComponent as E, computed as v, ref as B, openBlock as i, createElementBlock as o, normalizeClass as f, createElementVNode as s, Fragment as h, toDisplayString as a, createCommentVNode as u, renderList as q, createVNode as D, unref as P } from "vue";
+import { generatePreview as j } from "../../src/semanticPreview.js";
+const A = {
   key: 0,
   class: "tql-preview__empty"
-}, O = {
+}, F = {
   key: 0,
   class: "tql-preview__complexity"
-}, V = { class: "tql-preview__field-count" }, K = {
+}, O = { class: "tql-preview__field-count" }, V = {
   key: 1,
   class: "tql-preview__warnings"
-}, U = { class: "tql-preview__warning-icon" }, I = { class: "tql-preview__warning-text" }, M = {
+}, K = { class: "tql-preview__warning-icon" }, U = { class: "tql-preview__warning-text" }, I = {
   key: 2,
   class: "tql-preview__suggestions"
-}, z = { class: "tql-preview__suggestions-list" }, H = {
+}, M = { class: "tql-preview__suggestions-list" }, z = {
   key: 3,
   class: "tql-preview__tree"
-}, Q = { class: "tql-preview__tree-content" }, G = {
+}, H = { class: "tql-preview__tree-content" }, Q = {
   key: 4,
   class: "tql-preview__fields"
-}, J = { class: "tql-preview__fields-list" }, R = ["onClick"], W = { class: "tql-preview__field-name" }, X = {
+}, G = { class: "tql-preview__fields-list" }, J = ["onClick"], R = { class: "tql-preview__field-name" }, W = {
   key: 0,
   class: "tql-preview__field-mutators"
-}, Y = { class: "tql-preview__field-operator" }, Z = { class: "tql-preview__field-value" }, ee = ["title"], te = {
+}, X = { class: "tql-preview__field-operator" }, Y = { class: "tql-preview__field-value" }, Z = ["title"], ee = {
   key: 5,
   class: "tql-preview__operators"
-}, ne = { class: "tql-preview__operators-list" }, le = $({
+}, te = { class: "tql-preview__operators-list" }, ne = E({
   name: "TqlPreviewNode",
   props: {
     node: {
@@ -51,10 +51,9 @@ const F = {
   emits: ["toggle", "node-click"],
   setup(t, { emit: m }) {
     const _ = v(() => t.node.children && t.node.children.length > 0), y = v(() => {
-      var r;
       if (t.node.type === "comparison") {
-        const k = (r = t.node.mutators) != null && r.length ? ` | ${t.node.mutators.join(" | ")}` : "", C = n(t.node.value);
-        return `${t.node.field}${k} ${t.node.operator} ${C}`;
+        const r = t.node.mutators?.length ? ` | ${t.node.mutators.join(" | ")}` : "", k = n(t.node.value);
+        return `${t.node.field}${r} ${t.node.operator} ${k}`;
       }
       return t.node.type;
     });
@@ -119,7 +118,7 @@ const F = {
       </div>
     </div>
   `
-}), re = /* @__PURE__ */ $({
+}), se = /* @__PURE__ */ E({
   __name: "TqlPreview",
   props: {
     query: {},
@@ -132,7 +131,7 @@ const F = {
   },
   emits: ["field-click", "node-click"],
   setup(t, { emit: m }) {
-    const _ = t, y = m, n = v(() => A(_.query)), g = v(() => !_.query.trim() || !n.value.logicTree), w = v(() => {
+    const _ = t, y = m, n = v(() => j(_.query)), g = v(() => !_.query.trim() || !n.value.logicTree), w = v(() => {
       const e = n.value.complexity.score;
       return {
         "tql-preview--low": e === "low",
@@ -143,20 +142,20 @@ const F = {
       low: "Low complexity",
       medium: "Medium complexity",
       high: "High complexity"
-    })[n.value.complexity.score] || "Unknown"), p = D(/* @__PURE__ */ new Set());
+    })[n.value.complexity.score] || "Unknown"), p = B(/* @__PURE__ */ new Set());
     function r(e) {
       return p.value.has(e);
     }
     function k(e) {
       p.value.has(e) ? p.value.delete(e) : p.value.add(e);
     }
-    function C(e) {
+    function T(e) {
       return e < _.maxExpandedDepth;
     }
-    function E(e) {
-      return e === null ? "null" : e === void 0 ? "" : typeof e == "string" ? `"${e}"` : Array.isArray(e) ? `[${e.map(E).join(", ")}]` : String(e);
+    function C(e) {
+      return e === null ? "null" : e === void 0 ? "" : typeof e == "string" ? `"${e}"` : Array.isArray(e) ? `[${e.map(C).join(", ")}]` : String(e);
     }
-    function b(e) {
+    function $(e) {
       return {
         exact: "=",
         wildcard: "*",
@@ -167,87 +166,84 @@ const F = {
         cidr: "IP"
       }[e] || "?";
     }
-    function N(e) {
+    function b(e) {
       return `tql-preview__match-type--${e}`;
     }
-    function S(e) {
+    function N(e) {
       return `tql-preview__warning--${e}`;
     }
-    function L(e) {
+    function S(e) {
       y("field-click", e);
     }
-    function B(e) {
+    function L(e) {
       y("node-click", e);
     }
     return (e, d) => (i(), o("div", {
       class: f(["tql-preview", [w.value, { "tql-preview--compact": t.compact, "tql-preview--empty": g.value }]])
     }, [
-      g.value ? (i(), o("div", F, [...d[0] || (d[0] = [
+      g.value ? (i(), o("div", A, [...d[0] || (d[0] = [
         s("span", { class: "tql-preview__empty-text" }, "Enter a query to see preview", -1)
       ])])) : (i(), o(h, { key: 1 }, [
-        t.showComplexity ? (i(), o("div", O, [
+        t.showComplexity ? (i(), o("div", F, [
           s("span", {
             class: f(["tql-preview__complexity-badge", w.value])
           }, a(x.value), 3),
-          s("span", V, a(n.value.fieldCount) + " field" + a(n.value.fieldCount !== 1 ? "s" : ""), 1)
+          s("span", O, a(n.value.fieldCount) + " field" + a(n.value.fieldCount !== 1 ? "s" : ""), 1)
         ])) : u("", !0),
-        t.showComplexity && n.value.complexity.warnings.length > 0 ? (i(), o("div", K, [
+        t.showComplexity && n.value.complexity.warnings.length > 0 ? (i(), o("div", V, [
           (i(!0), o(h, null, q(n.value.complexity.warnings, (l, c) => (i(), o("div", {
             key: c,
-            class: f(["tql-preview__warning", S(l.severity)])
+            class: f(["tql-preview__warning", N(l.severity)])
           }, [
-            s("span", U, a(l.severity === "error" || l.severity === "warning" ? "!" : "i"), 1),
-            s("span", I, a(l.message), 1)
+            s("span", K, a(l.severity === "error" || l.severity === "warning" ? "!" : "i"), 1),
+            s("span", U, a(l.message), 1)
           ], 2))), 128))
         ])) : u("", !0),
-        t.showComplexity && n.value.complexity.suggestions.length > 0 ? (i(), o("div", M, [
+        t.showComplexity && n.value.complexity.suggestions.length > 0 ? (i(), o("div", I, [
           d[1] || (d[1] = s("div", { class: "tql-preview__suggestions-header" }, "Suggestions:", -1)),
-          s("ul", z, [
+          s("ul", M, [
             (i(!0), o(h, null, q(n.value.complexity.suggestions, (l, c) => (i(), o("li", {
               key: c,
               class: "tql-preview__suggestion"
             }, a(l), 1))), 128))
           ])
         ])) : u("", !0),
-        t.showLogicTree && n.value.logicTree ? (i(), o("div", H, [
+        t.showLogicTree && n.value.logicTree ? (i(), o("div", z, [
           d[2] || (d[2] = s("div", { class: "tql-preview__tree-header" }, "Query Structure", -1)),
-          s("div", Q, [
-            P(j(le), {
+          s("div", H, [
+            D(P(ne), {
               node: n.value.logicTree,
               depth: 0,
               "node-key": "root",
-              "is-expanded": C(0) || r("root"),
+              "is-expanded": T(0) || r("root"),
               "auto-expand-depth": t.maxExpandedDepth,
               onToggle: k,
-              onNodeClick: B
+              onNodeClick: L
             }, null, 8, ["node", "is-expanded", "auto-expand-depth"])
           ])
         ])) : u("", !0),
-        t.showFieldUsage && n.value.fields.length > 0 ? (i(), o("div", G, [
+        t.showFieldUsage && n.value.fields.length > 0 ? (i(), o("div", Q, [
           d[3] || (d[3] = s("div", { class: "tql-preview__fields-header" }, "Fields Used", -1)),
-          s("div", J, [
-            (i(!0), o(h, null, q(n.value.fields, (l, c) => {
-              var T;
-              return i(), o("div", {
-                key: c,
-                class: "tql-preview__field",
-                onClick: (ie) => L(l)
-              }, [
-                s("span", W, a(l.name), 1),
-                (T = l.mutators) != null && T.length ? (i(), o("span", X, " | " + a(l.mutators.join(" | ")), 1)) : u("", !0),
-                s("span", Y, a(l.operator), 1),
-                s("span", Z, a(E(l.value)), 1),
-                s("span", {
-                  class: f(["tql-preview__match-type", N(l.matchType)]),
-                  title: l.matchType
-                }, a(b(l.matchType)), 11, ee)
-              ], 8, R);
-            }), 128))
+          s("div", G, [
+            (i(!0), o(h, null, q(n.value.fields, (l, c) => (i(), o("div", {
+              key: c,
+              class: "tql-preview__field",
+              onClick: (le) => S(l)
+            }, [
+              s("span", R, a(l.name), 1),
+              l.mutators?.length ? (i(), o("span", W, " | " + a(l.mutators.join(" | ")), 1)) : u("", !0),
+              s("span", X, a(l.operator), 1),
+              s("span", Y, a(C(l.value)), 1),
+              s("span", {
+                class: f(["tql-preview__match-type", b(l.matchType)]),
+                title: l.matchType
+              }, a($(l.matchType)), 11, Z)
+            ], 8, J))), 128))
           ])
         ])) : u("", !0),
-        t.showOperatorSummary && Object.keys(n.value.operatorSummary).length > 0 ? (i(), o("div", te, [
+        t.showOperatorSummary && Object.keys(n.value.operatorSummary).length > 0 ? (i(), o("div", ee, [
           d[4] || (d[4] = s("div", { class: "tql-preview__operators-header" }, "Operators", -1)),
-          s("div", ne, [
+          s("div", te, [
             (i(!0), o(h, null, q(n.value.operatorSummary, (l, c) => (i(), o("span", {
               key: c,
               class: "tql-preview__operator"
@@ -259,6 +255,6 @@ const F = {
   }
 });
 export {
-  le as TqlPreviewNode,
-  re as default
+  ne as TqlPreviewNode,
+  se as default
 };

package/dist/vue/composables/useQueryHistory.d.ts

@@ -1,6 +1,5 @@
 import { Ref, ComputedRef } from 'vue';
 import { QueryHistoryEntry, UseQueryHistoryOptions } from '../../src/types';
-
 export interface UseQueryHistoryReturn {
     /** Reactive array of all history entries */
     history: Ref<QueryHistoryEntry[]>;

package/dist/vue/composables/useQueryHistory.js

@@ -106,10 +106,7 @@ function L(y) {
     if (!e.trim())
       return [...r.value];
     const t = e.toLowerCase();
-    return r.value.filter((i) => {
-      var a;
-      return !!(i.query.toLowerCase().includes(t) || (a = i.label) != null && a.toLowerCase().includes(t));
-    });
+    return r.value.filter((i) => !!(i.query.toLowerCase().includes(t) || i.label?.toLowerCase().includes(t)));
   }
   function E(e = 10, t = !1) {
     let i = [...r.value];

package/dist/vue/useTqlInput.js

@@ -1,168 +1,158 @@
-import { useDebounceFn as O } from "@vueuse/core";
-import { ref as p, computed as T, watch as oe } from "vue";
-import { getCompletions as re, shouldTriggerCompletion as ue } from "../src/completionProvider.js";
-import { parseTql as le } from "../src/parser.js";
-import { findTokenAtPosition as R, tokenizeTql as ae } from "../src/tokenizer.js";
+import { useDebounceFn as E } from "@vueuse/core";
+import { ref as i, computed as m, watch as se } from "vue";
+import { getCompletions as le, shouldTriggerCompletion as re } from "../src/completionProvider.js";
+import { parseTql as ue } from "../src/parser.js";
+import { findTokenAtPosition as W, tokenizeTql as ae } from "../src/tokenizer.js";
 import { validateTql as ie } from "../src/validator.js";
-function he(V) {
+function ge(z) {
   const {
-    modelValue: i,
-    fieldSchema: u,
+    modelValue: u,
+    fieldSchema: I,
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     snippets: ce,
     // Reserved for future snippet support
-    fieldValues: y,
-    validateOnInput: j = !0,
-    debounceMs: Q = 300,
-    completionDebounceMs: U = 50,
+    fieldValues: D,
+    validateOnInput: F = !0,
+    debounceMs: O = 300,
+    completionDebounceMs: R = 50,
     // Faster debounce for completions
-    autocomplete: A = !0,
-    onValidation: C,
-    onParse: k
-  } = V, v = p([]), w = p(null), m = p(null), c = p(0), g = p([]), f = p(!1), q = p(!1), _ = T(() => {
-    var e;
-    return ((e = m.value) == null ? void 0 : e.valid) ?? !0;
-  }), b = T(() => {
-    var e;
-    return ((e = m.value) == null ? void 0 : e.errors) ?? [];
-  }), P = T(() => {
-    var e;
-    return ((e = m.value) == null ? void 0 : e.warnings) ?? [];
-  }), $ = T(() => b.value.length > 0), B = T(() => P.value.length > 0);
-  function M() {
-    return v.value = ae(i.value), v.value;
+    autocomplete: C = !0,
+    onValidation: j,
+    onParse: Q
+  } = z, c = i([]), k = i(null), p = i(null), a = i(0), f = i([]), d = i(!1), x = i(!1), U = m(() => p.value?.valid ?? !0), h = m(() => p.value?.errors ?? []), q = m(() => p.value?.warnings ?? []), _ = m(() => h.value.length > 0), $ = m(() => q.value.length > 0);
+  function A() {
+    return c.value = ae(u.value), c.value;
   }
-  function G() {
-    const e = le(i.value);
-    return w.value = e, k == null || k(e), e;
+  function B() {
+    const e = ue(u.value);
+    return k.value = e, Q?.(e), e;
   }
-  function E() {
-    var s, r;
-    q.value = !0;
-    const e = (s = u == null ? void 0 : u.value) == null ? void 0 : s.map((l) => l.name), t = (r = u == null ? void 0 : u.value) == null ? void 0 : r.reduce(
-      (l, d) => (l[d.name] = d.type, l),
+  function P() {
+    x.value = !0;
+    const e = I?.value?.map((t) => t.name), n = I?.value?.reduce(
+      (t, l) => (t[l.name] = l.type, t),
       {}
-    ), n = ie(i.value, {
+    ), o = ie(u.value, {
       availableFields: e,
-      fieldTypes: t,
+      fieldTypes: n,
       strictMode: !1
     });
-    return m.value = n, q.value = !1, C == null || C(n), n;
+    return p.value = o, x.value = !1, j?.(o), o;
   }
-  const H = O(E, Q), J = O(I, U);
-  function I() {
-    if (!A) {
-      g.value = [], f.value = !1;
+  const G = E(P, O), H = E(g, R);
+  function g() {
+    if (!C) {
+      f.value = [], d.value = !1;
       return;
     }
-    const e = re(
+    const e = le(
       {
-        query: i.value,
-        cursorPosition: c.value
+        query: u.value,
+        cursorPosition: a.value
       },
       {
-        fields: u == null ? void 0 : u.value,
-        fieldValues: y == null ? void 0 : y.value,
+        fields: I?.value,
+        fieldValues: D?.value,
         includeSnippets: !0,
         maxItems: 15
       }
     );
-    g.value = e, f.value = e.length > 0;
+    f.value = e, d.value = e.length > 0;
   }
-  function K() {
-    I(), f.value = g.value.length > 0;
+  function J() {
+    g(), d.value = f.value.length > 0;
   }
-  function W() {
-    f.value = !1;
+  function w() {
+    d.value = !1;
   }
-  function z(e) {
-    M(), j && H(), A && ue(e, c.value) && (J(), g.value.length > 0 && (f.value = !0));
+  function V(e) {
+    A(), F && G(), C && re(e, a.value) && (H(), f.value.length > 0 && (d.value = !0));
   }
-  function L(e) {
-    c.value = e, I();
+  function K(e) {
+    a.value = e, g();
   }
-  function N(e) {
-    const t = i.value, n = c.value, s = R(v.value, n);
-    let r = n, l = n;
-    if (s && s.type !== "whitespace")
-      r = s.start, l = s.end;
+  function L(e) {
+    const n = u.value, o = a.value, t = W(c.value, o);
+    let l = o, T = o;
+    if (t && t.type !== "whitespace")
+      l = t.start, T = t.end;
     else {
-      const a = v.value.filter((o) => o.end <= n && o.type !== "whitespace");
-      if (a.length > 0) {
-        const o = a[a.length - 1];
-        o.end === n && (r = o.start, l = o.end);
+      const r = c.value.filter((s) => s.end <= o && s.type !== "whitespace");
+      if (r.length > 0) {
+        const s = r[r.length - 1];
+        s.end === o && (l = s.start, T = s.end);
       }
     }
-    const d = t.substring(0, r), ee = t.substring(l), x = [];
-    let h = e.insertText;
+    const y = n.substring(0, l), ee = n.substring(T), b = [];
+    let v = e.insertText;
     const te = [...e.insertText.matchAll(/\$(\d+)/g)].sort(
-      (a, o) => parseInt(a[1]) - parseInt(o[1])
+      (r, s) => parseInt(r[1]) - parseInt(s[1])
     );
-    let D = 0;
-    for (const a of te) {
-      const o = h.indexOf(a[0]);
-      if (o !== -1) {
-        const F = r + o - D;
-        x.push({
-          start: F,
-          end: F
+    let S = 0;
+    for (const r of te) {
+      const s = v.indexOf(r[0]);
+      if (s !== -1) {
+        const M = l + s - S;
+        b.push({
+          start: M,
+          end: M
           // Zero-width cursor position
-        }), h = h.replace(a[0], ""), D += a[0].length;
+        }), v = v.replace(r[0], ""), S += r[0].length;
       }
     }
-    const ne = d + h + ee, se = x.length > 0 ? x[0].start : r + h.length;
-    return W(), { query: ne, newCursorPosition: se, placeholders: x };
+    const ne = y + v + ee, oe = b.length > 0 ? b[0].start : l + v.length;
+    return w(), { query: ne, newCursorPosition: oe, placeholders: b };
   }
-  function X(e) {
-    const t = i.value, n = c.value, s = t.substring(0, n), r = t.substring(n), d = s.length > 0 && !s.endsWith(" ") && !s.endsWith("(") ? " " : "";
-    return s + d + e.insertText + r;
+  function N(e) {
+    const n = u.value, o = a.value, t = n.substring(0, o), l = n.substring(o), y = t.length > 0 && !t.endsWith(" ") && !t.endsWith("(") ? " " : "";
+    return t + y + e.insertText + l;
   }
-  function Y() {
-    return R(v.value, c.value);
+  function X() {
+    return W(c.value, a.value);
   }
-  function Z(e) {
-    return b.value.some((t) => e >= t.start && e < t.end);
+  function Y(e) {
+    return h.value.some((n) => e >= n.start && e < n.end);
   }
-  function S(e) {
-    return b.value.filter((t) => e >= t.start && e < t.end);
+  function Z(e) {
+    return h.value.filter((n) => e >= n.start && e < n.end);
   }
-  return oe(
-    i,
+  return se(
+    u,
     (e) => {
-      e !== void 0 && z(e);
+      e !== void 0 && V(e);
     },
     { immediate: !0 }
   ), {
     // State
-    tokens: v,
-    parseResult: w,
-    validationResult: m,
-    cursorPosition: c,
-    completionItems: g,
-    showAutocomplete: f,
-    isValidating: q,
+    tokens: c,
+    parseResult: k,
+    validationResult: p,
+    cursorPosition: a,
+    completionItems: f,
+    showAutocomplete: d,
+    isValidating: x,
     // Computed
-    isValid: _,
-    errors: b,
-    warnings: P,
-    hasErrors: $,
-    hasWarnings: B,
+    isValid: U,
+    errors: h,
+    warnings: q,
+    hasErrors: _,
+    hasWarnings: $,
     // Methods
-    tokenize: M,
-    parse: G,
-    validate: E,
-    updateCompletions: I,
-    triggerAutocomplete: K,
-    hideAutocomplete: W,
-    handleInput: z,
-    handleCursorChange: L,
-    insertCompletion: N,
-    insertSnippet: X,
-    getTokenAtCursor: Y,
-    isPositionInError: Z,
-    getErrorsAtPosition: S
+    tokenize: A,
+    parse: B,
+    validate: P,
+    updateCompletions: g,
+    triggerAutocomplete: J,
+    hideAutocomplete: w,
+    handleInput: V,
+    handleCursorChange: K,
+    insertCompletion: L,
+    insertSnippet: N,
+    getTokenAtCursor: X,
+    isPositionInError: Y,
+    getErrorsAtPosition: Z
   };
 }
 export {
-  he as useTqlInput
+  ge as useTqlInput
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tellaro/tql",
-  "version": "0.1.18",
+  "version": "0.2.0",
   "description": "Tellaro Query Language (TQL) parser, validator, and autocomplete for JavaScript/TypeScript",
   "type": "module",
   "main": "./dist/index.js",
@@ -23,11 +23,17 @@
     "README.md"
   ],
   "scripts": {
+    "build": "vite build",
     "test": "vitest run",
     "test:watch": "vitest",
     "test:shared": "vitest run --grep 'shared-fixtures'",
     "test:e2e": "playwright test",
-    "test:e2e:ui": "playwright test --ui"
+    "test:e2e:ui": "playwright test --ui",
+    "playground:serve": "vite --config vite.playground.config.ts --port 5174",
+    "playground:dev": "vite --config vite.playground.config.ts",
+    "lint": "eslint src vue tests --ext .ts,.vue",
+    "typecheck": "vue-tsc --noEmit",
+    "prepublishOnly": "npm run build"
   },
   "repository": {
     "type": "git",
@@ -70,9 +76,9 @@
     "js-yaml": "^4.1.0",
     "jsdom": "^24.0.0",
     "typescript": "^5.3.0",
-    "vite": "^5.0.0",
-    "vite-plugin-dts": "^3.7.0",
-    "vitest": "^1.0.0",
+    "vite": "^7.3.1",
+    "vite-plugin-dts": "^4.5.4",
+    "vitest": "^4.0.18",
     "vue": "^3.4.0",
     "vue-tsc": "^3.2.4"
   },

package/dist/style.css

@@ -1 +0,0 @@
-.tql-autocomplete-dropdown[data-v-e29dd6a7]{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-e29dd6a7]{overflow-y:auto;max-height:calc(var(--dropdown-max-height) - 60px)}.tql-completion-item[data-v-e29dd6a7]{display:flex;align-items:center;gap:.5rem;padding:.5rem .75rem;cursor:pointer;transition:background-color .15s}.tql-completion-item[data-v-e29dd6a7]:hover,.tql-completion-item.selected[data-v-e29dd6a7]{background:var(--highlight-bg, #f0f0f0)}.tql-completion-icon[data-v-e29dd6a7]{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-e29dd6a7]{background:var(--blue-100, #e3f2fd);color:var(--blue-600, #1e88e5)}.tql-completion-icon.tql-completion-kind-operator[data-v-e29dd6a7]{background:var(--pink-100, #fce4ec);color:var(--pink-600, #d81b60)}.tql-completion-icon.tql-completion-kind-value[data-v-e29dd6a7]{background:var(--green-100, #e8f5e9);color:var(--green-600, #43a047)}.tql-completion-icon.tql-completion-kind-keyword[data-v-e29dd6a7]{background:var(--purple-100, #f3e5f5);color:var(--purple-600, #8e24aa)}.tql-completion-icon.tql-completion-kind-snippet[data-v-e29dd6a7]{background:var(--orange-100, #fff3e0);color:var(--orange-600, #fb8c00)}.tql-completion-icon.tql-completion-kind-mutator[data-v-e29dd6a7]{background:var(--cyan-100, #e0f7fa);color:var(--cyan-600, #00acc1)}.tql-completion-icon.tql-completion-kind-aggregation[data-v-e29dd6a7]{background:var(--indigo-100, #e8eaf6);color:var(--indigo-600, #3949ab)}.tql-completion-icon.tql-completion-kind-logicalOp[data-v-e29dd6a7]{background:var(--yellow-100, #fffde7);color:var(--yellow-700, #fbc02d)}.tql-completion-icon.tql-completion-kind-typeHint[data-v-e29dd6a7]{background:var(--teal-100, #e0f2f1);color:var(--teal-600, #00897b)}.tql-completion-icon.tql-completion-kind-visualization[data-v-e29dd6a7]{background:var(--red-100, #ffebee);color:var(--red-600, #e53935)}.tql-completion-content[data-v-e29dd6a7]{flex:1;display:flex;flex-direction:column;min-width:0}.tql-completion-label[data-v-e29dd6a7]{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-e29dd6a7]{font-size:.75rem;color:var(--text-color-secondary, #666);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tql-completion-kind-badge[data-v-e29dd6a7]{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-e29dd6a7]{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-c7135df3]{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-c7135df3],.tql-input-wrapper.tql-input-has-min-height .tql-input[data-v-c7135df3]{min-height:var(--tql-min-height)}.tql-input-wrapper.tql-input-focused[data-v-c7135df3]{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-c7135df3]{border-color:var(--red-500, #ef4444)}.tql-input-wrapper.tql-input-invalid.tql-input-focused[data-v-c7135df3]{box-shadow:0 0 0 2px var(--red-100, rgba(239, 68, 68, .2))}.tql-input-wrapper.tql-input-valid[data-v-c7135df3]{border-color:var(--tql-valid-color, var(--green-500, #22c55e))}.tql-input-wrapper.tql-input-valid.tql-input-focused[data-v-c7135df3]{box-shadow:0 0 0 2px var(--green-100, rgba(34, 197, 94, .2))}.tql-input-wrapper.tql-input-slow[data-v-c7135df3]{border-color:var(--tql-slow-color, var(--yellow-500, #eab308))}.tql-input-wrapper.tql-input-slow.tql-input-focused[data-v-c7135df3]{box-shadow:0 0 0 2px var(--yellow-100, rgba(234, 179, 8, .2))}.tql-slow-indicator[data-v-c7135df3]{color:var(--tql-slow-color, var(--yellow-500, #eab308));margin-left:4px;cursor:help}.tql-input-wrapper.tql-input-disabled[data-v-c7135df3]{opacity:.6;cursor:not-allowed}.tql-highlight-layer[data-v-c7135df3]{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-c7135df3]{overflow-y:auto}.tql-input[data-v-c7135df3]{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-c7135df3]{color:transparent;caret-color:var(--text-color, #333)}.tql-input[data-v-c7135df3]::placeholder{color:var(--text-color-secondary, #666);opacity:.7}.tql-input[data-v-c7135df3]:disabled{cursor:not-allowed}.tql-token-field[data-v-c7135df3]{color:var(--tql-field-color, var(--blue-600, #2563eb))}.tql-token-operator[data-v-c7135df3]{color:var(--tql-operator-color, var(--pink-600, #db2777));font-weight:500}.tql-token-logicalOp[data-v-c7135df3]{color:var(--tql-logical-color, var(--purple-600, #9333ea));font-weight:600}.tql-token-collectionOp[data-v-c7135df3]{color:var(--tql-collection-color, var(--indigo-600, #4f46e5));font-weight:600}.tql-token-string[data-v-c7135df3]{color:var(--tql-string-color, var(--green-600, #16a34a))}.tql-token-number[data-v-c7135df3]{color:var(--tql-number-color, var(--orange-600, #ea580c))}.tql-token-boolean[data-v-c7135df3]{color:var(--tql-boolean-color, var(--cyan-600, #0891b2))}.tql-token-null[data-v-c7135df3]{color:var(--tql-null-color, var(--gray-500, #6b7280));font-style:italic}.tql-token-mutator[data-v-c7135df3]{color:var(--tql-mutator-color, var(--teal-600, #0d9488));font-style:italic}.tql-token-aggregation[data-v-c7135df3]{color:var(--tql-aggregation-color, var(--indigo-600, #4f46e5))}.tql-token-keyword[data-v-c7135df3]{color:var(--tql-keyword-color, var(--purple-500, #a855f7))}.tql-token-typeHint[data-v-c7135df3]{color:var(--tql-typehint-color, var(--teal-500, #14b8a6))}.tql-token-visualization[data-v-c7135df3]{color:var(--tql-viz-color, var(--red-500, #ef4444))}.tql-token-arrow[data-v-c7135df3]{color:var(--tql-arrow-color, var(--gray-600, #4b5563));font-weight:600}.tql-token-doubleColon[data-v-c7135df3]{color:var(--tql-colon-color, var(--gray-500, #6b7280))}.tql-token-paren[data-v-c7135df3],.tql-token-bracket[data-v-c7135df3]{color:var(--tql-bracket-color, var(--gray-600, #4b5563))}.tql-token-error[data-v-c7135df3]{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-c7135df3]{background-color:var(--red-50, #fef2f2)}.tql-token-unknown[data-v-c7135df3]{color:var(--text-color-secondary, #666)}.tql-validation-icon[data-v-c7135df3]{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-c7135df3]{top:.75rem;transform:none}.tql-icon-valid[data-v-c7135df3]{color:var(--green-500, #22c55e)}.tql-icon-invalid[data-v-c7135df3]{color:var(--red-500, #ef4444)}.tql-icon-clickable[data-v-c7135df3]{cursor:pointer;transition:transform .2s}.tql-icon-clickable[data-v-c7135df3]:hover{transform:scale(1.2)}.tql-icon-clickable[data-v-c7135df3]:focus{outline:2px solid var(--primary-color, #3b82f6);outline-offset:2px;border-radius:50%}.tql-snippet-button[data-v-c7135df3]{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-c7135df3]:hover{color:var(--primary-color, #3b82f6);background:var(--surface-100, #f5f5f5)}.tql-input-multiline .tql-snippet-button[data-v-c7135df3]{top:.75rem;transform:none}.tql-input-resizable-textarea[data-v-c7135df3]{resize:vertical;min-height:80px}.tql-input-wrapper.tql-input-resizable[data-v-c7135df3]{height:auto}.tql-input-wrapper.tql-input-resizable .tql-highlight-layer[data-v-c7135df3]{height:100%}.tql-validation-messages[data-v-c7135df3]{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-c7135df3],.tql-input-autocomplete-active .tql-complexity-warnings[data-v-c7135df3],.tql-input-autocomplete-active .tql-history-dropdown[data-v-c7135df3],.tql-input-autocomplete-active .tql-preview-panel[data-v-c7135df3]{display:none!important}.tql-error-message[data-v-c7135df3]{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-c7135df3]{margin-top:.125rem;font-size:.75rem}.tql-error-suggestion[data-v-c7135df3]{display:block;color:var(--text-color-secondary, #666);font-style:italic;margin-left:1.25rem}.sr-only[data-v-c7135df3]{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-c7135df3]{position:absolute;right:.5rem;top:50%;transform:translateY(-50%);display:flex;align-items:center;gap:.25rem}.tql-input-multiline .tql-toolbar[data-v-c7135df3]{top:.5rem;transform:none}.tql-toolbar-button[data-v-c7135df3]{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-c7135df3]:hover{color:var(--primary-color, #3b82f6);background:var(--surface-100, #f5f5f5)}.tql-toolbar-button--active[data-v-c7135df3]{color:var(--primary-color, #3b82f6);background:var(--primary-100, rgba(59, 130, 246, .1))}.tql-validation-status[data-v-c7135df3]{display:flex;align-items:center}.tql-complexity-badge[data-v-c7135df3]{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-c7135df3]{background:var(--green-100, #dcfce7);color:var(--green-700, #15803d)}.tql-complexity-medium[data-v-c7135df3]{background:var(--yellow-100, #fef9c3);color:var(--yellow-700, #a16207)}.tql-complexity-high[data-v-c7135df3]{background:var(--red-100, #fee2e2);color:var(--red-700, #b91c1c)}.tql-complexity-count[data-v-c7135df3]{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-c7135df3]{background:var(--green-600, #16a34a)}.tql-complexity-medium .tql-complexity-count[data-v-c7135df3]{background:var(--yellow-600, #ca8a04)}.tql-complexity-high .tql-complexity-count[data-v-c7135df3]{background:var(--red-600, #dc2626)}.tql-complexity-warnings[data-v-c7135df3]{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-c7135df3]{display:flex;align-items:flex-start;gap:.5rem;padding:.25rem 0;font-size:.75rem}.tql-complexity-warning i[data-v-c7135df3]{margin-top:.125rem;font-size:.75rem}.tql-complexity-warning--info[data-v-c7135df3]{color:var(--blue-600, #2563eb)}.tql-complexity-warning--warning[data-v-c7135df3]{color:var(--yellow-600, #ca8a04)}.tql-complexity-warning--error[data-v-c7135df3]{color:var(--red-600, #dc2626)}.tql-complexity-suggestions[data-v-c7135df3]{margin-top:.5rem;padding-top:.5rem;border-top:1px solid var(--surface-border, #e0e0e0)}.tql-complexity-suggestion[data-v-c7135df3]{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-c7135df3]{color:var(--yellow-500, #eab308)}.tql-history-dropdown[data-v-c7135df3]{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-c7135df3]{padding:.5rem;border-bottom:1px solid var(--surface-border, #e0e0e0)}.tql-history-search[data-v-c7135df3]{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-c7135df3]:focus{border-color:var(--primary-color, #3b82f6)}.tql-history-list[data-v-c7135df3]{overflow-y:auto;flex:1}.tql-history-item[data-v-c7135df3]{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-c7135df3]:hover{background:var(--surface-100, #f5f5f5)}.tql-history-item--favorite[data-v-c7135df3]{background:var(--yellow-50, #fefce8)}.tql-history-item--favorite[data-v-c7135df3]:hover{background:var(--yellow-100, #fef9c3)}.tql-history-favorite[data-v-c7135df3]{padding:.125rem;border:none;background:transparent;color:var(--text-color-secondary, #999);cursor:pointer;flex-shrink:0}.tql-history-favorite[data-v-c7135df3]:hover,.tql-history-item--favorite .tql-history-favorite[data-v-c7135df3]{color:var(--yellow-500, #eab308)}.tql-history-content[data-v-c7135df3]{flex:1;min-width:0}.tql-history-label[data-v-c7135df3]{font-size:.6875rem;font-weight:600;color:var(--text-color, #333);margin-bottom:.125rem}.tql-history-query[data-v-c7135df3]{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-c7135df3]{font-size:.625rem;color:var(--text-color-secondary, #999);flex-shrink:0}.tql-history-empty[data-v-c7135df3]{padding:1rem;text-align:center;color:var(--text-color-secondary, #666);font-size:.75rem}.tql-preview-panel[data-v-c7135df3]{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-c7135df3]{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-c7135df3]{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-c7135df3]:hover{background:var(--surface-100, #f5f5f5);color:var(--text-color, #333)}.tql-preview-panel[data-v-c7135df3] .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}