@zwayam/sql-query-editor 1.0.0

package/LICENSE

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

package/README.md

@@ -0,0 +1,346 @@
+# SQL Query Editor
+
+A framework-agnostic SQL editor built as a single native [Web Component](https://developer.mozilla.org/en-US/docs/Web/API/Web_components). Syntax highlighting, schema-aware autocomplete, and Shadow DOM style isolation — with zero runtime dependencies (~5 KB gzipped).
+
+Because it's a Web Component rather than a React/Angular/Vue-specific library, it registers once as a real HTML element (`<sql-query-editor>`) and can be dropped into any of them, or into plain HTML with no framework at all.
+
+## Contents
+
+- [Features](#features)
+- [Install](#install)
+- [Quick start](#quick-start)
+- [Public API](#public-api)
+- [Events](#events)
+- [Theming](#theming)
+- [TypeScript](#typescript)
+- [Framework integration](#framework-integration)
+  - [Vanilla JS](#vanilla-js)
+  - [Angular](#angular)
+  - [React](#react)
+  - [Vue](#vue)
+- [Server-side rendering (SSR)](#server-side-rendering-ssr)
+- [Known limitations](#known-limitations)
+- [Development](#development)
+
+## Features
+
+- SQL syntax highlighting (keywords, functions, strings, numbers, operators, comments)
+- Context-aware autocomplete: keywords/functions everywhere, tables after `FROM`/`JOIN`, columns after `WHERE`/`ON`
+- Table/column autocomplete from a schema you supply
+- `query` / `schema` work as both HTML attributes and JS properties, kept in sync live
+- `query-change` and `query-submit` (Ctrl/Cmd+Enter) events
+- Shadow DOM isolation — the editor's internal styles never leak into your page, and your page's styles never leak in
+- Bundled TypeScript declarations
+- Zero dependencies
+
+## Install
+
+```bash
+npm install @zwayam/sql-query-editor
+```
+
+## Quick start
+
+Register the element once, anywhere early in your app (an entry file, root module, or root component):
+
+```js
+import "@zwayam/sql-query-editor";
+```
+
+Then use the tag anywhere in your markup:
+
+```html
+<sql-query-editor
+  id="editor"
+  query="SELECT * FROM users"
+  schema='{"users": ["id", "name", "email"]}'
+></sql-query-editor>
+```
+
+```js
+const editor = document.getElementById("editor");
+
+editor.addEventListener("query-change", (event) => {
+  console.log("current SQL:", event.detail.query);
+});
+
+editor.addEventListener("query-submit", (event) => {
+  // fires on Ctrl+Enter / Cmd+Enter
+  runQuery(event.detail.query);
+});
+```
+
+`query` and `schema` are also plain JS properties, useful when you're building the value programmatically instead of writing it as a literal attribute:
+
+```js
+editor.query = "SELECT * FROM orders";
+editor.schema = { orders: ["id", "user_id", "amount"] };
+```
+
+## Public API
+
+### Attributes / properties
+
+| Name | Type | Notes |
+|---|---|---|
+| `query` | `string` | The current SQL text. Settable as an attribute (`query="..."`) or a property (`el.query = "..."`). Changing either updates the other — and updates the editor live, even after it's already rendered. |
+| `schema` | `object` | Tables/columns used by autocomplete. As an attribute it must be a JSON string (`schema='{"users":["id"]}'`); as a property it's a plain object (`el.schema = { users: ["id"] }`). Accepts `{ table: [columns] }` or `{ table: { columns: [...] } }`. |
+
+### Methods
+
+| Method | Returns | Description |
+|---|---|---|
+| `getQuery()` | `string` | Returns the current SQL text. Equivalent to reading `.query`. |
+| `setQuery(query)` | `void` | Sets the SQL text and re-highlights it. Equivalent to writing `.query`. |
+| `setSchema(schema)` | `void` | Sets the autocomplete schema. Equivalent to writing `.schema`. |
+| `clear()` | `void` | Empties the editor. |
+| `focus()` | `void` | Focuses the editor's text input. |
+
+The property/attribute forms and the method forms are interchangeable — use whichever reads more naturally for your framework's binding syntax (see [Framework integration](#framework-integration)).
+
+## Events
+
+Both events are standard `CustomEvent`s dispatched on the element itself, so they bubble and can be listened for with `addEventListener` (or your framework's native event-binding syntax) anywhere in the DOM tree above the element.
+
+| Event | Fires when | `event.detail` |
+|---|---|---|
+| `query-change` | The text changes (every keystroke, or a completed autocomplete suggestion) | `{ query: string }` |
+| `query-submit` | The user presses Ctrl+Enter (or Cmd+Enter on macOS) | `{ query: string }` |
+
+## Theming
+
+The editor exposes its colors as CSS custom properties on the host element, so you can restyle it from outside without piercing the Shadow DOM:
+
+```css
+sql-query-editor {
+  --sql-editor-border: #444;
+  --sql-editor-background: #1e1e1e;
+  --sql-editor-text: #ffffff;
+  --sql-editor-keyword: #569cd6;
+  --sql-editor-function: #dcdcaa;
+  --sql-editor-string: #ce9178;
+  --sql-editor-number: #b5cea8;
+  --sql-editor-operator: #d4d4d4;
+  --sql-editor-comment: #6a9955;
+  --sql-editor-active: #2a2d2e;
+}
+```
+
+| Variable | Controls | Default |
+|---|---|---|
+| `--sql-editor-border` | Editor border | `#d0d5dd` |
+| `--sql-editor-background` | Editor background | `#ffffff` |
+| `--sql-editor-text` | Base text color | `#1f2937` |
+| `--sql-editor-keyword` | Keywords (`SELECT`, `WHERE`, ...) | `#0066cc` |
+| `--sql-editor-function` | Functions (`COUNT`, `SUM`, ...) | `#8e44ad` |
+| `--sql-editor-string` | String literals | `#008000` |
+| `--sql-editor-number` | Numeric literals | `#d35400` |
+| `--sql-editor-operator` | Operators (`=`, `>`, ...) | `#c0392b` |
+| `--sql-editor-comment` | `--` line comments | `#777777` |
+| `--sql-editor-active` | Highlighted autocomplete suggestion | `#e8f0fe` |
+
+## TypeScript
+
+Type declarations are bundled with the package — no `@types/*` install needed. Importing the package gives you a typed `SqlQueryEditor` class and augments the global `HTMLElementTagNameMap`, so plain DOM calls are typed automatically in any framework:
+
+```ts
+import "@zwayam/sql-query-editor";
+
+const editor = document.querySelector("sql-query-editor"); // typed as SqlQueryEditor
+editor.setSchema({ users: ["id", "name"] });
+```
+
+If you use JSX (React/Preact) and want `<sql-query-editor>` recognized as a valid intrinsic element with typed props, add this once in your own project (not needed for Angular or Vue templates, which don't type-check tag names this way):
+
+```ts
+// e.g. src/sql-query-editor.d.ts
+import type { SqlQueryEditor } from "@zwayam/sql-query-editor";
+
+declare global {
+  namespace JSX {
+    interface IntrinsicElements {
+      "sql-query-editor": React.DetailedHTMLProps<
+        React.HTMLAttributes<SqlQueryEditor>,
+        SqlQueryEditor
+      > & { query?: string };
+    }
+  }
+}
+```
+
+## Framework integration
+
+### Vanilla JS
+
+No wrapper needed — use it exactly as shown in [Quick start](#quick-start).
+
+### Angular
+
+Angular's template compiler rejects unknown tags by default, so tell it to accept custom elements once, either on a standalone component or an `NgModule`:
+
+```ts
+import { Component, CUSTOM_ELEMENTS_SCHEMA } from "@angular/core";
+import "@zwayam/sql-query-editor";
+
+@Component({
+  selector: "app-query-page",
+  standalone: true,
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  template: `
+    <sql-query-editor
+      [query]="sql"
+      [schema]="schema"
+      (query-change)="sql = $event.detail.query"
+      (query-submit)="runQuery($event.detail.query)"
+    ></sql-query-editor>
+  `
+})
+export class QueryPageComponent {
+  sql = "SELECT * FROM users";
+
+  schema = {
+    users: ["id", "name", "email"]
+  };
+
+  runQuery(query: string) {
+    // send query to your backend
+  }
+}
+```
+
+For an `NgModule`-based app, add the same `schemas: [CUSTOM_ELEMENTS_SCHEMA]` to the `@NgModule` decorator instead, and put `import "@zwayam/sql-query-editor"` in `main.ts`.
+
+`[query]` and `[schema]` are Angular property bindings — they assign straight to the element's `query`/`schema` properties, so no `ViewChild` or imperative lifecycle code is required. Note that Angular's `[(x)]` two-way binding shorthand expects an `xChange` event name, and this component's event is `query-change` (not `queryChange`), so two-way sync is written explicitly as `[query]="sql" (query-change)="sql = $event.detail.query"` rather than `[(query)]="sql"`.
+
+### React
+
+JSX has no way to bind a custom DOM event (`query-change`) to a prop, so React needs a small `ref`-based wrapper — write it once, then use `<SqlEditor>` like any other component:
+
+```tsx
+import { useEffect, useRef } from "react";
+import "@zwayam/sql-query-editor";
+import type { SqlQueryEditor, SqlSchema } from "@zwayam/sql-query-editor";
+
+interface SqlEditorProps {
+  query: string;
+  schema: SqlSchema;
+  onQueryChange: (query: string) => void;
+  onQuerySubmit?: (query: string) => void;
+}
+
+function SqlEditor({ query, schema, onQueryChange, onQuerySubmit }: SqlEditorProps) {
+  const ref = useRef<SqlQueryEditor>(null);
+
+  // Only push `query` in when it actually differs, so typing doesn't fight
+  // the parent's re-render (which would otherwise reset the cursor position).
+  useEffect(() => {
+    if (ref.current && ref.current.getQuery() !== query) {
+      ref.current.setQuery(query);
+    }
+  }, [query]);
+
+  useEffect(() => {
+    ref.current?.setSchema(schema);
+  }, [schema]);
+
+  useEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+
+    const handleChange = (e: Event) => onQueryChange((e as CustomEvent).detail.query);
+    const handleSubmit = (e: Event) => onQuerySubmit?.((e as CustomEvent).detail.query);
+
+    el.addEventListener("query-change", handleChange);
+    el.addEventListener("query-submit", handleSubmit);
+
+    return () => {
+      el.removeEventListener("query-change", handleChange);
+      el.removeEventListener("query-submit", handleSubmit);
+    };
+  }, [onQueryChange, onQuerySubmit]);
+
+  return <sql-query-editor ref={ref} />;
+}
+```
+
+Usage:
+
+```tsx
+<SqlEditor
+  query={sql}
+  schema={{ users: ["id", "name"] }}
+  onQueryChange={setSql}
+  onQuerySubmit={runQuery}
+/>
+```
+
+This pattern works on every React version. (React 19 added some built-in property detection for custom elements, so passing `schema={...}` directly as a JSX prop may also work there — but the `ref` approach above is the version-agnostic, reliable one, and you still need it for the event listeners regardless.)
+
+### Vue
+
+Vue treats any tag containing a dash as a native custom element automatically in standard Vite/Vue CLI setups, binds `:prop` to matching DOM properties, and listens for custom events with `@event-name` — no wrapper needed:
+
+```vue
+<template>
+  <sql-query-editor
+    :query="sql"
+    :schema="schema"
+    @query-change="sql = $event.detail.query"
+    @query-submit="runQuery($event.detail.query)"
+  />
+</template>
+
+<script setup>
+import { ref } from "vue";
+import "@zwayam/sql-query-editor";
+
+const sql = ref("SELECT * FROM users");
+const schema = ref({ users: ["id", "name"] });
+
+function runQuery(query) {
+  // send query to your backend
+}
+</script>
+```
+
+If your build ever warns about an unresolved component, tell the compiler to treat the tag as a custom element:
+
+```js
+// vite.config.js
+export default {
+  vue: {
+    template: {
+      compilerOptions: {
+        isCustomElement: (tag) => tag === "sql-query-editor"
+      }
+    }
+  }
+};
+```
+
+## Server-side rendering (SSR)
+
+The component registers itself via `customElements.define` and extends `HTMLElement`, neither of which exist in a Node.js SSR environment (Next.js, Nuxt, Angular Universal, etc.). Make sure it's only imported/rendered on the client:
+
+- **Next.js** — import it inside `useEffect`, or use `next/dynamic` with `{ ssr: false }`, or mark the importing component `"use client"` and defer the import to the client bundle.
+- **Nuxt** — wrap usage in `<ClientOnly>`.
+- **Angular Universal** — guard the `import "@zwayam/sql-query-editor"` call with `isPlatformBrowser(this.platformId)`.
+
+## Known limitations
+
+- The editor's height is fixed at `350px` and isn't exposed as a CSS custom property or a `::part`. To resize it, wrap it in a container and reach into its Shadow DOM directly: `document.querySelector("sql-query-editor").shadowRoot.querySelector(".editor").style.height = "600px"`.
+- Autocomplete context detection (which clause you're in) is a heuristic based on the nearest preceding keyword, not a full SQL parser — it's reliable for single, flat statements but can guess wrong inside subqueries.
+- Quoted identifiers (MySQL backticks, Postgres double quotes, SQL Server brackets) and block comments (`/* ... */`) aren't tokenized/highlighted — only `'strings'` and `-- line comments`.
+
+## Development
+
+```bash
+npm install
+npm run dev      # start the demo (demo/index.html) with live reload
+npm run build    # build dist/
+npm run preview  # preview the production build
+```
+
+## License
+
+MIT

package/dist/sql-query-editor.js

@@ -0,0 +1,639 @@
+const f = {
+  keywords: [
+    "SELECT",
+    "FROM",
+    "WHERE",
+    "AND",
+    "OR",
+    "NOT",
+    "NULL",
+    "IS",
+    "IN",
+    "BETWEEN",
+    "LIKE",
+    "AS",
+    "DISTINCT",
+    "ALL",
+    "TOP",
+    "LIMIT",
+    "OFFSET",
+    "ORDER",
+    "BY",
+    "ASC",
+    "DESC",
+    "GROUP",
+    "HAVING",
+    "JOIN",
+    "INNER",
+    "LEFT",
+    "RIGHT",
+    "FULL",
+    "OUTER",
+    "CROSS",
+    "ON",
+    "UNION",
+    "UNION ALL",
+    "INTERSECT",
+    "EXCEPT",
+    "INSERT",
+    "INTO",
+    "VALUES",
+    "UPDATE",
+    "SET",
+    "DELETE",
+    "CREATE",
+    "ALTER",
+    "DROP",
+    "TABLE",
+    "DATABASE",
+    "INDEX",
+    "VIEW",
+    "PRIMARY",
+    "KEY",
+    "FOREIGN",
+    "REFERENCES",
+    "CONSTRAINT",
+    "DEFAULT",
+    "UNIQUE",
+    "CASE",
+    "WHEN",
+    "THEN",
+    "ELSE",
+    "END",
+    "WITH",
+    "RECURSIVE",
+    "EXISTS",
+    "CAST",
+    "CONVERT",
+    "TRUE",
+    "FALSE"
+  ],
+  functions: [
+    "COUNT",
+    "SUM",
+    "AVG",
+    "MIN",
+    "MAX",
+    "ROUND",
+    "CEIL",
+    "FLOOR",
+    "ABS",
+    "LENGTH",
+    "LOWER",
+    "UPPER",
+    "TRIM",
+    "SUBSTRING",
+    "CONCAT",
+    "REPLACE",
+    "NOW",
+    "CURRENT_DATE",
+    "CURRENT_TIMESTAMP",
+    "DATE",
+    "YEAR",
+    "MONTH",
+    "DAY"
+  ],
+  operators: [
+    "=",
+    "!=",
+    "<>",
+    ">",
+    "<",
+    ">=",
+    "<=",
+    "+",
+    "-",
+    "*",
+    "/",
+    "%"
+  ]
+};
+class y {
+  constructor(t = {}) {
+    this.setSchema(t);
+  }
+  setSchema(t = {}) {
+    this.schema = t || {};
+  }
+  getTables() {
+    return Object.keys(this.schema);
+  }
+  getColumns(t) {
+    const i = this.schema?.[t];
+    return Array.isArray(i) ? i : i && Array.isArray(i.columns) ? i.columns : [];
+  }
+}
+function E(n, t) {
+  const i = [];
+  let e = 0;
+  for (; e < n.length; ) {
+    if (n[e] === "'") {
+      let o = e + 1;
+      for (; o < n.length; ) {
+        if (n[o] === "'" && n[o - 1] !== "\\") {
+          o++;
+          break;
+        }
+        o++;
+      }
+      i.push({
+        type: "string",
+        value: n.slice(e, o)
+      }), e = o;
+      continue;
+    }
+    if (n[e] === "-" && n[e + 1] === "-") {
+      let o = n.indexOf(`
+`, e);
+      o === -1 && (o = n.length), i.push({
+        type: "comment",
+        value: n.slice(e, o)
+      }), e = o;
+      continue;
+    }
+    const r = n.slice(e).match(/^\d+(?:\.\d+)?/);
+    if (r) {
+      i.push({
+        type: "number",
+        value: r[0]
+      }), e += r[0].length;
+      continue;
+    }
+    const c = n.slice(e).match(/^[A-Za-z_][A-Za-z0-9_]*/);
+    if (c) {
+      const o = c[0], h = o.toUpperCase();
+      let s = "identifier";
+      t.keywords.includes(h) ? s = "keyword" : t.functions.includes(h) && (s = "function"), i.push({
+        type: s,
+        value: o
+      }), e += o.length;
+      continue;
+    }
+    const a = n.slice(e).match(/^(<>|!=|>=|<=|=|>|<|\+|-|\*|\/|%)/);
+    if (a) {
+      i.push({
+        type: "operator",
+        value: a[0]
+      }), e += a[0].length;
+      continue;
+    }
+    i.push({
+      type: "text",
+      value: n[e]
+    }), e++;
+  }
+  return i;
+}
+function b(n) {
+  return n.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#039;");
+}
+function S(n, t) {
+  return E(n, t).map((e) => {
+    const r = b(e.value);
+    switch (e.type) {
+      case "keyword":
+        return `<span class="sql-keyword">${r}</span>`;
+      case "function":
+        return `<span class="sql-function">${r}</span>`;
+      case "string":
+        return `<span class="sql-string">${r}</span>`;
+      case "number":
+        return `<span class="sql-number">${r}</span>`;
+      case "operator":
+        return `<span class="sql-operator">${r}</span>`;
+      case "comment":
+        return `<span class="sql-comment">${r}</span>`;
+      default:
+        return r;
+    }
+  }).join("");
+}
+class T {
+  constructor(t, i) {
+    this.dictionary = t, this.schemaDictionary = i;
+  }
+  getCurrentWord(t, i) {
+    const r = t.slice(0, i).match(/([A-Za-z_][A-Za-z0-9_]*)$/);
+    return r ? r[1] : "";
+  }
+  getContext(t, i) {
+    const e = t.slice(0, i).toUpperCase(), r = this.getCurrentWord(
+      t,
+      i
+    ), c = [
+      "ORDER BY",
+      "GROUP BY",
+      "LEFT JOIN",
+      "RIGHT JOIN",
+      "INNER JOIN",
+      "FULL JOIN",
+      "JOIN",
+      "WHERE",
+      "FROM",
+      "SELECT",
+      "ON"
+    ];
+    let a = "keyword";
+    for (const o of c)
+      if (e.includes(o)) {
+        a = o;
+        break;
+      }
+    return {
+      context: a,
+      currentWord: r
+    };
+  }
+  getSuggestions(t, i) {
+    const {
+      context: e,
+      currentWord: r
+    } = this.getContext(t, i), c = r.toLowerCase(), a = [], o = (s, l) => {
+      !s || !s.toLowerCase().startsWith(c) || a.push({
+        value: s,
+        type: l
+      });
+    };
+    e === "FROM" || e.includes("JOIN") ? (this.schemaDictionary.getTables().forEach((s) => o(s, "table")), this.dictionary.keywords.forEach((s) => {
+      ["JOIN", "INNER", "LEFT", "RIGHT", "FULL", "CROSS"].includes(s) && o(s, "keyword");
+    })) : e === "WHERE" || e === "ON" ? (this.dictionary.keywords.filter(
+      (s) => ["AND", "OR", "NOT", "IN", "LIKE", "IS", "BETWEEN", "NULL"].includes(s)
+    ).forEach((s) => o(s, "keyword")), this.dictionary.operators.forEach((s) => o(s, "operator")), this.schemaDictionary.getTables().forEach((s) => {
+      this.schemaDictionary.getColumns(s).forEach((l) => o(l, "column"));
+    })) : (this.dictionary.keywords.forEach((s) => o(s, "keyword")), this.dictionary.functions.forEach((s) => o(s, "function")), this.schemaDictionary.getTables().forEach((s) => o(s, "table")), this.schemaDictionary.getTables().forEach((s) => {
+      this.schemaDictionary.getColumns(s).forEach((l) => o(l, "column"));
+    }));
+    const h = /* @__PURE__ */ new Map();
+    for (const s of a) {
+      const l = `${s.type}:${s.value.toLowerCase()}`;
+      h.has(l) || h.set(l, s);
+    }
+    return [...h.values()].sort((s, l) => {
+      const p = s.value.toLowerCase() === c, u = l.value.toLowerCase() === c;
+      return p !== u ? p ? -1 : 1 : s.value.length - l.value.length;
+    }).slice(0, 10);
+  }
+}
+class x extends HTMLElement {
+  static get observedAttributes() {
+    return ["query", "schema"];
+  }
+  constructor() {
+    super(), this.attachShadow({ mode: "open" }), this.schemaDictionary = new y(), this.autocompleteEngine = new T(
+      f,
+      this.schemaDictionary
+    ), this.suggestions = [], this.selectedIndex = 0, this.initialized = !1, this._pendingQuery = void 0;
+  }
+  connectedCallback() {
+    if (this.initialized)
+      return;
+    this.initialized = !0, this.render(), this.attachEvents();
+    const t = this._pendingQuery !== void 0 ? this._pendingQuery : this.getAttribute("query") || "";
+    this._pendingQuery = void 0, t ? this.setQuery(t) : this.updateHighlight();
+  }
+  attributeChangedCallback(t, i, e) {
+    if (i !== e) {
+      if (t === "query") {
+        this.query = e || "";
+        return;
+      }
+      if (t === "schema") {
+        if (!e) {
+          this.setSchema({});
+          return;
+        }
+        try {
+          this.setSchema(JSON.parse(e));
+        } catch (r) {
+          console.warn(
+            'sql-query-editor: could not parse "schema" attribute as JSON',
+            r
+          );
+        }
+      }
+    }
+  }
+  render() {
+    this.shadowRoot.innerHTML = `
+      <style>
+        :host {
+          display: block;
+          width: 100%;
+          --sql-editor-border: #d0d5dd;
+          --sql-editor-background: #ffffff;
+          --sql-editor-text: #1f2937;
+          --sql-editor-keyword: #0066cc;
+          --sql-editor-function: #8e44ad;
+          --sql-editor-string: #008000;
+          --sql-editor-number: #d35400;
+          --sql-editor-operator: #c0392b;
+          --sql-editor-comment: #777777;
+          --sql-editor-active: #e8f0fe;
+        }
+
+        .editor {
+          position: relative;
+          width: 100%;
+          height: 350px;
+          border: 1px solid var(--sql-editor-border);
+          border-radius: 8px;
+          overflow: hidden;
+          background: var(--sql-editor-background);
+        }
+
+        textarea,
+        .highlight {
+          position: absolute;
+          inset: 0;
+          width: 100%;
+          height: 100%;
+          margin: 0;
+          padding: 16px;
+          border: 0;
+          outline: 0;
+          box-sizing: border-box;
+          font-family: Consolas, Monaco, "Courier New", monospace;
+          font-size: 14px;
+          line-height: 1.6;
+          letter-spacing: normal;
+          white-space: pre-wrap;
+          overflow: auto;
+          tab-size: 2;
+        }
+
+        .highlight {
+          z-index: 1;
+          pointer-events: none;
+          color: var(--sql-editor-text);
+          overflow: hidden;
+        }
+
+        textarea {
+          z-index: 2;
+          resize: none;
+          background: transparent;
+          color: transparent;
+          caret-color: var(--sql-editor-text);
+          -webkit-text-fill-color: transparent;
+        }
+
+        textarea::placeholder {
+          color: #98a2b3;
+          -webkit-text-fill-color: #98a2b3;
+        }
+
+        .sql-keyword {
+          color: var(--sql-editor-keyword);
+          font-weight: 700;
+        }
+
+        .sql-function {
+          color: var(--sql-editor-function);
+          font-weight: 700;
+        }
+
+        .sql-string {
+          color: var(--sql-editor-string);
+        }
+
+        .sql-number {
+          color: var(--sql-editor-number);
+        }
+
+        .sql-operator {
+          color: var(--sql-editor-operator);
+          font-weight: 700;
+        }
+
+        .sql-comment {
+          color: var(--sql-editor-comment);
+          font-style: italic;
+        }
+
+        .autocomplete {
+          position: absolute;
+          display: none;
+          z-index: 10;
+          width: 280px;
+          max-height: 220px;
+          overflow-y: auto;
+          background: #ffffff;
+          border: 1px solid var(--sql-editor-border);
+          border-radius: 6px;
+          box-shadow: 0 8px 24px rgba(16, 24, 40, 0.14);
+        }
+
+        .suggestion {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          gap: 16px;
+          padding: 8px 12px;
+          cursor: pointer;
+          font-family: Consolas, Monaco, "Courier New", monospace;
+          font-size: 13px;
+          color: #1f2937;
+        }
+
+        .suggestion:hover,
+        .suggestion.active {
+          background: var(--sql-editor-active);
+        }
+
+        .suggestion-type {
+          color: #98a2b3;
+          font-size: 10px;
+          text-transform: uppercase;
+        }
+      </style>
+
+      <div class="editor">
+        <div class="highlight" aria-hidden="true"></div>
+
+        <textarea
+          spellcheck="false"
+          autocomplete="off"
+          autocorrect="off"
+          autocapitalize="off"
+          placeholder="Write SQL query..."
+          aria-label="SQL query editor"
+        ></textarea>
+
+        <div
+          class="autocomplete"
+          role="listbox"
+        ></div>
+      </div>
+    `, this.editor = this.shadowRoot.querySelector("textarea"), this.highlight = this.shadowRoot.querySelector(".highlight"), this.autocomplete = this.shadowRoot.querySelector(".autocomplete");
+  }
+  attachEvents() {
+    this.editor.addEventListener("input", () => {
+      this.updateHighlight(), this.updateAutocomplete(), this.emitQueryChange();
+    }), this.editor.addEventListener("click", () => {
+      this.updateAutocomplete();
+    }), this.editor.addEventListener("keyup", (t) => {
+      [
+        "ArrowUp",
+        "ArrowDown",
+        "Enter",
+        "Tab",
+        "Escape"
+      ].includes(t.key) || this.updateAutocomplete();
+    }), this.editor.addEventListener("scroll", () => {
+      this.syncScroll(), this.isAutocompleteVisible() && this.positionAutocomplete();
+    }), this.editor.addEventListener("keydown", (t) => {
+      this.handleKeyboard(t);
+    });
+  }
+  handleKeyboard(t) {
+    if ((t.ctrlKey || t.metaKey) && t.key === "Enter") {
+      t.preventDefault(), this.emitQuerySubmit();
+      return;
+    }
+    if (!(!this.isAutocompleteVisible() || !this.suggestions.length)) {
+      if (t.key === "ArrowDown") {
+        t.preventDefault(), this.selectedIndex = (this.selectedIndex + 1) % this.suggestions.length, this.renderSuggestions();
+        return;
+      }
+      if (t.key === "ArrowUp") {
+        t.preventDefault(), this.selectedIndex--, this.selectedIndex < 0 && (this.selectedIndex = this.suggestions.length - 1), this.renderSuggestions();
+        return;
+      }
+      if (t.key === "Enter" || t.key === "Tab") {
+        t.preventDefault(), this.applySuggestion(
+          this.selectedIndex
+        );
+        return;
+      }
+      t.key === "Escape" && (t.preventDefault(), this.hideAutocomplete());
+    }
+  }
+  updateHighlight() {
+    const t = S(
+      this.editor.value,
+      f
+    );
+    this.highlight.innerHTML = t || "&nbsp;", this.syncScroll();
+  }
+  syncScroll() {
+    this.highlight.scrollTop = this.editor.scrollTop, this.highlight.scrollLeft = this.editor.scrollLeft;
+  }
+  updateAutocomplete() {
+    if (this.suggestions = this.autocompleteEngine.getSuggestions(
+      this.editor.value,
+      this.editor.selectionStart
+    ), !this.suggestions.length) {
+      this.hideAutocomplete();
+      return;
+    }
+    this.selectedIndex = 0, this.renderSuggestions(), this.positionAutocomplete();
+  }
+  renderSuggestions() {
+    this.autocomplete.innerHTML = "", this.suggestions.forEach(
+      (t, i) => {
+        const e = document.createElement("div");
+        e.className = "suggestion", e.setAttribute(
+          "role",
+          "option"
+        ), i === this.selectedIndex && e.classList.add("active");
+        const r = document.createElement("span");
+        r.textContent = t.value;
+        const c = document.createElement("span");
+        c.className = "suggestion-type", c.textContent = t.type, e.append(
+          r,
+          c
+        ), e.addEventListener(
+          "mousedown",
+          (a) => {
+            a.preventDefault(), this.applySuggestion(i);
+          }
+        ), this.autocomplete.appendChild(
+          e
+        );
+      }
+    ), this.autocomplete.style.display = "block";
+  }
+  positionAutocomplete() {
+    const t = this.editor.selectionStart, e = this.editor.value.slice(0, t).split(`
+`), r = e.length - 1, c = e[e.length - 1].length, a = getComputedStyle(this.editor), o = parseFloat(a.lineHeight) || 22, h = parseFloat(a.fontSize) || 14, s = parseFloat(a.paddingLeft) || 16, l = parseFloat(a.paddingTop) || 16, p = h * 0.6;
+    let u = s + c * p - this.editor.scrollLeft, d = l + (r + 1) * o - this.editor.scrollTop;
+    const g = this.editor.clientWidth - this.autocomplete.offsetWidth - 8;
+    u > g && (u = g), u = Math.max(4, u);
+    const m = this.editor.clientHeight - this.autocomplete.offsetHeight - 8;
+    d > m && (d = l + r * o - this.autocomplete.offsetHeight - 4 - this.editor.scrollTop), d = Math.max(4, d), this.autocomplete.style.left = `${u}px`, this.autocomplete.style.top = `${d}px`;
+  }
+  applySuggestion(t) {
+    const i = this.suggestions[t];
+    if (!i)
+      return;
+    const e = this.editor.selectionStart, c = this.editor.value.slice(0, e).match(
+      /([A-Za-z_][A-Za-z0-9_]*)$/
+    ), a = c ? c[1] : "", o = e - a.length;
+    this.editor.setRangeText(
+      i.value,
+      o,
+      e,
+      "end"
+    ), this.hideAutocomplete(), this.updateHighlight(), this.emitQueryChange(), this.editor.focus();
+  }
+  isAutocompleteVisible() {
+    return this.autocomplete.style.display === "block";
+  }
+  hideAutocomplete() {
+    this.autocomplete.style.display = "none", this.suggestions = [];
+  }
+  emitQueryChange() {
+    this.dispatchEvent(
+      new CustomEvent("query-change", {
+        detail: {
+          query: this.editor.value
+        }
+      })
+    );
+  }
+  emitQuerySubmit() {
+    this.dispatchEvent(
+      new CustomEvent("query-submit", {
+        detail: {
+          query: this.editor.value
+        }
+      })
+    );
+  }
+  getQuery() {
+    return this.editor.value;
+  }
+  setQuery(t = "") {
+    this.editor.value = String(t), this.updateHighlight(), this.hideAutocomplete();
+  }
+  clear() {
+    this.setQuery("");
+  }
+  focus() {
+    this.editor.focus();
+  }
+  setSchema(t = {}) {
+    this.schemaDictionary.setSchema(t), this.autocompleteEngine.schemaDictionary = this.schemaDictionary;
+  }
+  get query() {
+    return this.editor ? this.getQuery() : this._pendingQuery || "";
+  }
+  set query(t) {
+    const i = t == null ? "" : String(t);
+    if (!this.editor) {
+      this._pendingQuery = i;
+      return;
+    }
+    this.setQuery(i);
+  }
+  get schema() {
+    return this.schemaDictionary.schema;
+  }
+  set schema(t) {
+    this.setSchema(t || {});
+  }
+}
+customElements.get("sql-query-editor") || customElements.define("sql-query-editor", x);
+export {
+  x as SqlQueryEditor
+};

package/dist/sql-query-editor.umd.cjs

@@ -0,0 +1,153 @@
+(function(d,p){typeof exports=="object"&&typeof module<"u"?p(exports):typeof define=="function"&&define.amd?define(["exports"],p):(d=typeof globalThis<"u"?globalThis:d||self,p(d.SqlQueryEditor={}))})(this,(function(d){"use strict";const p={keywords:["SELECT","FROM","WHERE","AND","OR","NOT","NULL","IS","IN","BETWEEN","LIKE","AS","DISTINCT","ALL","TOP","LIMIT","OFFSET","ORDER","BY","ASC","DESC","GROUP","HAVING","JOIN","INNER","LEFT","RIGHT","FULL","OUTER","CROSS","ON","UNION","UNION ALL","INTERSECT","EXCEPT","INSERT","INTO","VALUES","UPDATE","SET","DELETE","CREATE","ALTER","DROP","TABLE","DATABASE","INDEX","VIEW","PRIMARY","KEY","FOREIGN","REFERENCES","CONSTRAINT","DEFAULT","UNIQUE","CASE","WHEN","THEN","ELSE","END","WITH","RECURSIVE","EXISTS","CAST","CONVERT","TRUE","FALSE"],functions:["COUNT","SUM","AVG","MIN","MAX","ROUND","CEIL","FLOOR","ABS","LENGTH","LOWER","UPPER","TRIM","SUBSTRING","CONCAT","REPLACE","NOW","CURRENT_DATE","CURRENT_TIMESTAMP","DATE","YEAR","MONTH","DAY"],operators:["=","!=","<>",">","<",">=","<=","+","-","*","/","%"]};class E{constructor(e={}){this.setSchema(e)}setSchema(e={}){this.schema=e||{}}getTables(){return Object.keys(this.schema)}getColumns(e){const s=this.schema?.[e];return Array.isArray(s)?s:s&&Array.isArray(s.columns)?s.columns:[]}}function b(n,e){const s=[];let t=0;for(;t<n.length;){if(n[t]==="'"){let o=t+1;for(;o<n.length;){if(n[o]==="'"&&n[o-1]!=="\\"){o++;break}o++}s.push({type:"string",value:n.slice(t,o)}),t=o;continue}if(n[t]==="-"&&n[t+1]==="-"){let o=n.indexOf(`
+`,t);o===-1&&(o=n.length),s.push({type:"comment",value:n.slice(t,o)}),t=o;continue}const r=n.slice(t).match(/^\d+(?:\.\d+)?/);if(r){s.push({type:"number",value:r[0]}),t+=r[0].length;continue}const c=n.slice(t).match(/^[A-Za-z_][A-Za-z0-9_]*/);if(c){const o=c[0],h=o.toUpperCase();let i="identifier";e.keywords.includes(h)?i="keyword":e.functions.includes(h)&&(i="function"),s.push({type:i,value:o}),t+=o.length;continue}const a=n.slice(t).match(/^(<>|!=|>=|<=|=|>|<|\+|-|\*|\/|%)/);if(a){s.push({type:"operator",value:a[0]}),t+=a[0].length;continue}s.push({type:"text",value:n[t]}),t++}return s}function S(n){return n.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;").replace(/'/g,"&#039;")}function T(n,e){return b(n,e).map(t=>{const r=S(t.value);switch(t.type){case"keyword":return`<span class="sql-keyword">${r}</span>`;case"function":return`<span class="sql-function">${r}</span>`;case"string":return`<span class="sql-string">${r}</span>`;case"number":return`<span class="sql-number">${r}</span>`;case"operator":return`<span class="sql-operator">${r}</span>`;case"comment":return`<span class="sql-comment">${r}</span>`;default:return r}}).join("")}class x{constructor(e,s){this.dictionary=e,this.schemaDictionary=s}getCurrentWord(e,s){const r=e.slice(0,s).match(/([A-Za-z_][A-Za-z0-9_]*)$/);return r?r[1]:""}getContext(e,s){const t=e.slice(0,s).toUpperCase(),r=this.getCurrentWord(e,s),c=["ORDER BY","GROUP BY","LEFT JOIN","RIGHT JOIN","INNER JOIN","FULL JOIN","JOIN","WHERE","FROM","SELECT","ON"];let a="keyword";for(const o of c)if(t.includes(o)){a=o;break}return{context:a,currentWord:r}}getSuggestions(e,s){const{context:t,currentWord:r}=this.getContext(e,s),c=r.toLowerCase(),a=[],o=(i,l)=>{!i||!i.toLowerCase().startsWith(c)||a.push({value:i,type:l})};t==="FROM"||t.includes("JOIN")?(this.schemaDictionary.getTables().forEach(i=>o(i,"table")),this.dictionary.keywords.forEach(i=>{["JOIN","INNER","LEFT","RIGHT","FULL","CROSS"].includes(i)&&o(i,"keyword")})):t==="WHERE"||t==="ON"?(this.dictionary.keywords.filter(i=>["AND","OR","NOT","IN","LIKE","IS","BETWEEN","NULL"].includes(i)).forEach(i=>o(i,"keyword")),this.dictionary.operators.forEach(i=>o(i,"operator")),this.schemaDictionary.getTables().forEach(i=>{this.schemaDictionary.getColumns(i).forEach(l=>o(l,"column"))})):(this.dictionary.keywords.forEach(i=>o(i,"keyword")),this.dictionary.functions.forEach(i=>o(i,"function")),this.schemaDictionary.getTables().forEach(i=>o(i,"table")),this.schemaDictionary.getTables().forEach(i=>{this.schemaDictionary.getColumns(i).forEach(l=>o(l,"column"))}));const h=new Map;for(const i of a){const l=`${i.type}:${i.value.toLowerCase()}`;h.has(l)||h.set(l,i)}return[...h.values()].sort((i,l)=>{const f=i.value.toLowerCase()===c,u=l.value.toLowerCase()===c;return f!==u?f?-1:1:i.value.length-l.value.length}).slice(0,10)}}class m extends HTMLElement{static get observedAttributes(){return["query","schema"]}constructor(){super(),this.attachShadow({mode:"open"}),this.schemaDictionary=new E,this.autocompleteEngine=new x(p,this.schemaDictionary),this.suggestions=[],this.selectedIndex=0,this.initialized=!1,this._pendingQuery=void 0}connectedCallback(){if(this.initialized)return;this.initialized=!0,this.render(),this.attachEvents();const e=this._pendingQuery!==void 0?this._pendingQuery:this.getAttribute("query")||"";this._pendingQuery=void 0,e?this.setQuery(e):this.updateHighlight()}attributeChangedCallback(e,s,t){if(s!==t){if(e==="query"){this.query=t||"";return}if(e==="schema"){if(!t){this.setSchema({});return}try{this.setSchema(JSON.parse(t))}catch(r){console.warn('sql-query-editor: could not parse "schema" attribute as JSON',r)}}}}render(){this.shadowRoot.innerHTML=`
+      <style>
+        :host {
+          display: block;
+          width: 100%;
+          --sql-editor-border: #d0d5dd;
+          --sql-editor-background: #ffffff;
+          --sql-editor-text: #1f2937;
+          --sql-editor-keyword: #0066cc;
+          --sql-editor-function: #8e44ad;
+          --sql-editor-string: #008000;
+          --sql-editor-number: #d35400;
+          --sql-editor-operator: #c0392b;
+          --sql-editor-comment: #777777;
+          --sql-editor-active: #e8f0fe;
+        }
+
+        .editor {
+          position: relative;
+          width: 100%;
+          height: 350px;
+          border: 1px solid var(--sql-editor-border);
+          border-radius: 8px;
+          overflow: hidden;
+          background: var(--sql-editor-background);
+        }
+
+        textarea,
+        .highlight {
+          position: absolute;
+          inset: 0;
+          width: 100%;
+          height: 100%;
+          margin: 0;
+          padding: 16px;
+          border: 0;
+          outline: 0;
+          box-sizing: border-box;
+          font-family: Consolas, Monaco, "Courier New", monospace;
+          font-size: 14px;
+          line-height: 1.6;
+          letter-spacing: normal;
+          white-space: pre-wrap;
+          overflow: auto;
+          tab-size: 2;
+        }
+
+        .highlight {
+          z-index: 1;
+          pointer-events: none;
+          color: var(--sql-editor-text);
+          overflow: hidden;
+        }
+
+        textarea {
+          z-index: 2;
+          resize: none;
+          background: transparent;
+          color: transparent;
+          caret-color: var(--sql-editor-text);
+          -webkit-text-fill-color: transparent;
+        }
+
+        textarea::placeholder {
+          color: #98a2b3;
+          -webkit-text-fill-color: #98a2b3;
+        }
+
+        .sql-keyword {
+          color: var(--sql-editor-keyword);
+          font-weight: 700;
+        }
+
+        .sql-function {
+          color: var(--sql-editor-function);
+          font-weight: 700;
+        }
+
+        .sql-string {
+          color: var(--sql-editor-string);
+        }
+
+        .sql-number {
+          color: var(--sql-editor-number);
+        }
+
+        .sql-operator {
+          color: var(--sql-editor-operator);
+          font-weight: 700;
+        }
+
+        .sql-comment {
+          color: var(--sql-editor-comment);
+          font-style: italic;
+        }
+
+        .autocomplete {
+          position: absolute;
+          display: none;
+          z-index: 10;
+          width: 280px;
+          max-height: 220px;
+          overflow-y: auto;
+          background: #ffffff;
+          border: 1px solid var(--sql-editor-border);
+          border-radius: 6px;
+          box-shadow: 0 8px 24px rgba(16, 24, 40, 0.14);
+        }
+
+        .suggestion {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          gap: 16px;
+          padding: 8px 12px;
+          cursor: pointer;
+          font-family: Consolas, Monaco, "Courier New", monospace;
+          font-size: 13px;
+          color: #1f2937;
+        }
+
+        .suggestion:hover,
+        .suggestion.active {
+          background: var(--sql-editor-active);
+        }
+
+        .suggestion-type {
+          color: #98a2b3;
+          font-size: 10px;
+          text-transform: uppercase;
+        }
+      </style>
+
+      <div class="editor">
+        <div class="highlight" aria-hidden="true"></div>
+
+        <textarea
+          spellcheck="false"
+          autocomplete="off"
+          autocorrect="off"
+          autocapitalize="off"
+          placeholder="Write SQL query..."
+          aria-label="SQL query editor"
+        ></textarea>
+
+        <div
+          class="autocomplete"
+          role="listbox"
+        ></div>
+      </div>
+    `,this.editor=this.shadowRoot.querySelector("textarea"),this.highlight=this.shadowRoot.querySelector(".highlight"),this.autocomplete=this.shadowRoot.querySelector(".autocomplete")}attachEvents(){this.editor.addEventListener("input",()=>{this.updateHighlight(),this.updateAutocomplete(),this.emitQueryChange()}),this.editor.addEventListener("click",()=>{this.updateAutocomplete()}),this.editor.addEventListener("keyup",e=>{["ArrowUp","ArrowDown","Enter","Tab","Escape"].includes(e.key)||this.updateAutocomplete()}),this.editor.addEventListener("scroll",()=>{this.syncScroll(),this.isAutocompleteVisible()&&this.positionAutocomplete()}),this.editor.addEventListener("keydown",e=>{this.handleKeyboard(e)})}handleKeyboard(e){if((e.ctrlKey||e.metaKey)&&e.key==="Enter"){e.preventDefault(),this.emitQuerySubmit();return}if(!(!this.isAutocompleteVisible()||!this.suggestions.length)){if(e.key==="ArrowDown"){e.preventDefault(),this.selectedIndex=(this.selectedIndex+1)%this.suggestions.length,this.renderSuggestions();return}if(e.key==="ArrowUp"){e.preventDefault(),this.selectedIndex--,this.selectedIndex<0&&(this.selectedIndex=this.suggestions.length-1),this.renderSuggestions();return}if(e.key==="Enter"||e.key==="Tab"){e.preventDefault(),this.applySuggestion(this.selectedIndex);return}e.key==="Escape"&&(e.preventDefault(),this.hideAutocomplete())}}updateHighlight(){const e=T(this.editor.value,p);this.highlight.innerHTML=e||"&nbsp;",this.syncScroll()}syncScroll(){this.highlight.scrollTop=this.editor.scrollTop,this.highlight.scrollLeft=this.editor.scrollLeft}updateAutocomplete(){if(this.suggestions=this.autocompleteEngine.getSuggestions(this.editor.value,this.editor.selectionStart),!this.suggestions.length){this.hideAutocomplete();return}this.selectedIndex=0,this.renderSuggestions(),this.positionAutocomplete()}renderSuggestions(){this.autocomplete.innerHTML="",this.suggestions.forEach((e,s)=>{const t=document.createElement("div");t.className="suggestion",t.setAttribute("role","option"),s===this.selectedIndex&&t.classList.add("active");const r=document.createElement("span");r.textContent=e.value;const c=document.createElement("span");c.className="suggestion-type",c.textContent=e.type,t.append(r,c),t.addEventListener("mousedown",a=>{a.preventDefault(),this.applySuggestion(s)}),this.autocomplete.appendChild(t)}),this.autocomplete.style.display="block"}positionAutocomplete(){const e=this.editor.selectionStart,t=this.editor.value.slice(0,e).split(`
+`),r=t.length-1,c=t[t.length-1].length,a=getComputedStyle(this.editor),o=parseFloat(a.lineHeight)||22,h=parseFloat(a.fontSize)||14,i=parseFloat(a.paddingLeft)||16,l=parseFloat(a.paddingTop)||16,f=h*.6;let u=i+c*f-this.editor.scrollLeft,g=l+(r+1)*o-this.editor.scrollTop;const y=this.editor.clientWidth-this.autocomplete.offsetWidth-8;u>y&&(u=y),u=Math.max(4,u);const A=this.editor.clientHeight-this.autocomplete.offsetHeight-8;g>A&&(g=l+r*o-this.autocomplete.offsetHeight-4-this.editor.scrollTop),g=Math.max(4,g),this.autocomplete.style.left=`${u}px`,this.autocomplete.style.top=`${g}px`}applySuggestion(e){const s=this.suggestions[e];if(!s)return;const t=this.editor.selectionStart,c=this.editor.value.slice(0,t).match(/([A-Za-z_][A-Za-z0-9_]*)$/),a=c?c[1]:"",o=t-a.length;this.editor.setRangeText(s.value,o,t,"end"),this.hideAutocomplete(),this.updateHighlight(),this.emitQueryChange(),this.editor.focus()}isAutocompleteVisible(){return this.autocomplete.style.display==="block"}hideAutocomplete(){this.autocomplete.style.display="none",this.suggestions=[]}emitQueryChange(){this.dispatchEvent(new CustomEvent("query-change",{detail:{query:this.editor.value}}))}emitQuerySubmit(){this.dispatchEvent(new CustomEvent("query-submit",{detail:{query:this.editor.value}}))}getQuery(){return this.editor.value}setQuery(e=""){this.editor.value=String(e),this.updateHighlight(),this.hideAutocomplete()}clear(){this.setQuery("")}focus(){this.editor.focus()}setSchema(e={}){this.schemaDictionary.setSchema(e),this.autocompleteEngine.schemaDictionary=this.schemaDictionary}get query(){return this.editor?this.getQuery():this._pendingQuery||""}set query(e){const s=e==null?"":String(e);if(!this.editor){this._pendingQuery=s;return}this.setQuery(s)}get schema(){return this.schemaDictionary.schema}set schema(e){this.setSchema(e||{})}}customElements.get("sql-query-editor")||customElements.define("sql-query-editor",m),d.SqlQueryEditor=m,Object.defineProperty(d,Symbol.toStringTag,{value:"Module"})}));

package/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "@zwayam/sql-query-editor",
+  "version": "1.0.0",
+  "description": "Framework-agnostic SQL query editor Web Component with syntax highlighting and autocomplete.",
+  "type": "module",
+  "publishConfig": {
+    "access": "public"
+  },
+  "main": "./dist/sql-query-editor.umd.cjs",
+  "module": "./dist/sql-query-editor.js",
+  "types": "./sql-query-editor.d.ts",
+  "exports": {
+    ".": {
+      "types": "./sql-query-editor.d.ts",
+      "import": "./dist/sql-query-editor.js",
+      "require": "./dist/sql-query-editor.umd.cjs"
+    }
+  },
+  "files": [
+    "dist",
+    "sql-query-editor.d.ts"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "keywords": [
+    "sql",
+    "query-editor",
+    "sql-editor",
+    "autocomplete",
+    "syntax-highlighting",
+    "web-component",
+    "framework-agnostic"
+  ],
+  "license": "MIT",
+  "devDependencies": {
+    "vite": "^7.0.0"
+  }
+}

package/sql-query-editor.d.ts

@@ -0,0 +1,50 @@
+export type SqlSchema = Record<
+  string,
+  string[] | { columns: string[] }
+>;
+
+export interface QueryChangeEventDetail {
+  query: string;
+}
+
+export declare class SqlQueryEditor extends HTMLElement {
+  /** Current SQL text. Also settable/gettable as the `query` attribute. */
+  query: string;
+
+  /** Tables/columns used by autocomplete. Also settable as a JSON `schema` attribute. */
+  schema: SqlSchema;
+
+  getQuery(): string;
+  setQuery(query?: string): void;
+  clear(): void;
+  focus(): void;
+  setSchema(schema?: SqlSchema): void;
+
+  addEventListener<K extends "query-change" | "query-submit">(
+    type: K,
+    listener: (event: CustomEvent<QueryChangeEventDetail>) => void,
+    options?: boolean | AddEventListenerOptions
+  ): void;
+  addEventListener(
+    type: string,
+    listener: EventListenerOrEventListenerObject,
+    options?: boolean | AddEventListenerOptions
+  ): void;
+
+  removeEventListener<K extends "query-change" | "query-submit">(
+    type: K,
+    listener: (event: CustomEvent<QueryChangeEventDetail>) => void,
+    options?: boolean | EventListenerOptions
+  ): void;
+  removeEventListener(
+    type: string,
+    listener: EventListenerOrEventListenerObject,
+    options?: boolean | EventListenerOptions
+  ): void;
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "sql-query-editor": SqlQueryEditor;
+  }
+}