@mcp-b/interactive-components 0.2.0

package/dist/sql-editor-CsNrjJ2_.js

@@ -0,0 +1,968 @@
+import "./code-editor-B94tewLC.js";
+import { t as __decorate } from "./decorate-DcF3lt7P.js";
+import { isRecord } from "./lib/runner-channel.js";
+import { getRunnerUrl } from "./lib/runner-url.js";
+import { css, html, nothing } from "lit";
+import { property, state } from "lit/decorators.js";
+import { SigveloElement } from "@mcp-b/wc-support/base/sigvelo-element";
+import hostStyles from "@mcp-b/wc-support/styles/host.styles";
+import "@mcp-b/web-components/components/spinner/spinner.js";
+import { ifDefined } from "lit/directives/if-defined.js";
+import "@mcp-b/web-components/components/splitter/splitter.js";
+import "@mcp-b/web-components/components/button/button.js";
+import "@mcp-b/web-components/components/button-group/button-group.js";
+import "@mcp-b/web-components/components/tooltip/tooltip.js";
+//#region src/components/sql-editor/sql-editor.styles.ts
+var sql_editor_styles_default = css`
+  /* ═══════════════════════════════════════════
+     HOST
+     ═══════════════════════════════════════════ */
+
+  :host {
+    display: flex;
+    flex-direction: column;
+    height: var(--sql-editor-height, 560px);
+    border: 1px solid var(--sigvelo-color-neutral-border-muted, #d1d5db);
+    border-radius: 8px;
+    overflow: hidden;
+    background: var(--sigvelo-color-surface, #fff);
+    font-family:
+      system-ui,
+      -apple-system,
+      sans-serif;
+    font-size: 13px;
+    color: var(--sigvelo-color-text, #1f2937);
+    position: relative;
+  }
+
+  /* ═══════════════════════════════════════════
+     CONTENT (desktop layout)
+     ═══════════════════════════════════════════ */
+
+  .content {
+    display: flex;
+    flex: 1;
+    min-height: 0;
+  }
+
+  .content sigvelo-splitter {
+    flex: 1;
+  }
+
+  /* ═══════════════════════════════════════════
+     EDITOR PANE (left side)
+     ═══════════════════════════════════════════ */
+
+  .editor-pane {
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+    height: 100%;
+  }
+
+  .editor-pane__toolbar {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    padding: 4px 8px;
+    border-bottom: 1px solid var(--sigvelo-color-neutral-border-subtle, #e5e7eb);
+    background: var(--sigvelo-color-neutral-bg-subtle, #f9fafb);
+    min-height: 32px;
+  }
+
+  .editor-pane__toolbar-title {
+    font-weight: 600;
+    font-size: 12px;
+    color: var(--sigvelo-color-neutral-text, #6b7280);
+    margin-right: auto;
+  }
+
+  .editor-pane__code {
+    flex: 1;
+    min-height: 0;
+    overflow: hidden;
+  }
+
+  .editor-pane__code sigvelo-code-editor {
+    display: block;
+    height: 100%;
+  }
+
+  /* ═══════════════════════════════════════════
+     RIGHT PANE (results + schema)
+     ═══════════════════════════════════════════ */
+
+  .right-pane {
+    display: flex;
+    flex-direction: column;
+    min-width: 0;
+    height: 100%;
+  }
+
+  .right-pane__header {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    padding: 4px 8px;
+    border-bottom: 1px solid var(--sigvelo-color-neutral-border-subtle, #e5e7eb);
+    background: var(--sigvelo-color-neutral-bg-subtle, #f9fafb);
+    min-height: 32px;
+  }
+
+  .right-pane__header sigvelo-button-group {
+    margin-right: auto;
+  }
+
+  .right-pane__content {
+    flex: 1;
+    min-height: 0;
+    overflow: auto;
+  }
+
+  /* ═══════════════════════════════════════════
+     RESULTS TABLE
+     ═══════════════════════════════════════════ */
+
+  .results-empty {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    color: var(--sigvelo-color-neutral-text, #9ca3af);
+    font-size: 13px;
+    padding: 24px;
+    text-align: center;
+  }
+
+  .results-wrapper {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+  }
+
+  .results-scroll {
+    flex: 1;
+    overflow: auto;
+    min-height: 0;
+  }
+
+  .results-table {
+    width: 100%;
+    border-collapse: collapse;
+    font-family: "SF Mono", "Cascadia Code", "Fira Code", "Consolas", monospace;
+    font-size: 12px;
+    line-height: 1.5;
+  }
+
+  .results-table thead {
+    position: sticky;
+    top: 0;
+    z-index: 1;
+  }
+
+  .results-table th {
+    background: var(--sigvelo-color-neutral-bg-subtle, #f9fafb);
+    border-bottom: 1px solid var(--sigvelo-color-neutral-border-subtle, #e5e7eb);
+    padding: 0;
+    text-align: left;
+    font-weight: 600;
+    font-size: 11px;
+    color: var(--sigvelo-color-neutral-text, #6b7280);
+    white-space: nowrap;
+    user-select: none;
+  }
+
+  .results-table th:has(.results-table__sort:hover) {
+    background: var(--sigvelo-color-neutral-bg-muted, #f3f4f6);
+  }
+
+  .results-table__sort {
+    display: block;
+    inline-size: 100%;
+    min-block-size: 24px;
+    padding: 4px 10px;
+    border: 0;
+    background: transparent;
+    color: inherit;
+    font: inherit;
+    text-align: inherit;
+    cursor: pointer;
+  }
+
+  .results-table__sort:focus-visible,
+  .schema-table__disclosure:focus-visible,
+  .schema-table__action:focus-visible {
+    outline: var(--sigvelo-focus-ring);
+    outline-offset: calc(-1 * var(--sigvelo-focus-offset));
+  }
+
+  .results-table__sort .sort-indicator {
+    margin-left: 4px;
+    opacity: 0.5;
+    font-size: 10px;
+  }
+
+  .results-table td {
+    padding: 3px 10px;
+    border-bottom: 1px solid var(--sigvelo-color-neutral-border-subtle, #e5e7eb);
+    white-space: pre-wrap;
+    word-break: break-word;
+    max-width: 300px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .results-table tr:hover td {
+    background: var(--sigvelo-color-neutral-bg-subtle, #f9fafb);
+  }
+
+  .results-table .cell--number {
+    text-align: right;
+    font-variant-numeric: tabular-nums;
+  }
+
+  .results-table .cell--null {
+    color: var(--sigvelo-color-neutral-text, #9ca3af);
+    font-style: italic;
+  }
+
+  .results-status {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding: 4px 10px;
+    border-top: 1px solid var(--sigvelo-color-neutral-border-subtle, #e5e7eb);
+    background: var(--sigvelo-color-neutral-bg-subtle, #f9fafb);
+    font-size: 11px;
+    color: var(--sigvelo-color-neutral-text, #6b7280);
+    min-height: 24px;
+    flex-shrink: 0;
+  }
+
+  /* ═══════════════════════════════════════════
+     SCHEMA BROWSER
+     ═══════════════════════════════════════════ */
+
+  .schema-empty {
+    color: var(--sigvelo-color-neutral-text, #9ca3af);
+    font-size: 13px;
+    padding: 24px;
+    text-align: center;
+  }
+
+  .schema-list {
+    padding: 4px 0;
+  }
+
+  .schema-table {
+    padding: 0 8px;
+  }
+
+  .schema-table__header {
+    display: flex;
+    align-items: center;
+    gap: 4px;
+    padding: 0;
+    border-radius: 4px;
+    font-weight: 600;
+    font-size: 12px;
+    color: var(--sigvelo-color-text, #1f2937);
+    user-select: none;
+  }
+
+  .schema-table__header:hover,
+  .schema-table__header:focus-within {
+    background: var(--sigvelo-color-neutral-bg-subtle, #f9fafb);
+  }
+
+  .schema-table__disclosure {
+    display: flex;
+    align-items: center;
+    flex: 1;
+    gap: 4px;
+    min-inline-size: 0;
+    min-block-size: 24px;
+    padding: 4px;
+    border: 0;
+    border-radius: inherit;
+    background: transparent;
+    color: inherit;
+    font: inherit;
+    text-align: left;
+    cursor: pointer;
+  }
+
+  .schema-table__chevron {
+    width: 12px;
+    height: 12px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: transform 0.15s;
+    color: var(--sigvelo-color-neutral-text, #9ca3af);
+  }
+
+  .schema-table__chevron--open {
+    transform: rotate(90deg);
+  }
+
+  .schema-table__name {
+    flex: 1;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .schema-table__action {
+    opacity: 0;
+    min-block-size: 24px;
+    border: 0;
+    border-radius: var(--sigvelo-radius-xs);
+    background: transparent;
+    font-size: 10px;
+    color: var(--sigvelo-color-primary-text, #2563eb);
+    cursor: pointer;
+    padding: 0 4px;
+  }
+
+  .schema-table__header:hover .schema-table__action,
+  .schema-table__header:focus-within .schema-table__action {
+    opacity: 1;
+  }
+
+  .schema-columns {
+    padding-left: 20px;
+  }
+
+  .schema-column {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    padding: 2px 4px;
+    font-size: 12px;
+    color: var(--sigvelo-color-neutral-text, #6b7280);
+  }
+
+  .schema-column__name {
+    font-family: "SF Mono", "Cascadia Code", "Fira Code", "Consolas", monospace;
+    font-size: 11px;
+    color: var(--sigvelo-color-text, #1f2937);
+  }
+
+  .schema-column__type {
+    font-size: 10px;
+    padding: 0 4px;
+    border-radius: 3px;
+    background: var(--sigvelo-color-neutral-bg-muted, #f3f4f6);
+    color: var(--sigvelo-color-neutral-text, #6b7280);
+    white-space: nowrap;
+  }
+
+  /* ═══════════════════════════════════════════
+     ERROR DISPLAY
+     ═══════════════════════════════════════════ */
+
+  .error-view {
+    padding: 12px;
+    font-family: "SF Mono", "Cascadia Code", "Fira Code", "Consolas", monospace;
+    font-size: 12px;
+    line-height: 1.5;
+    color: var(--sigvelo-color-danger-text, #dc2626);
+    white-space: pre-wrap;
+    word-break: break-word;
+  }
+
+  /* ═══════════════════════════════════════════
+     LOADING OVERLAY
+     ═══════════════════════════════════════════ */
+
+  .loading-overlay {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 12px;
+    background: color-mix(in srgb, var(--sigvelo-color-surface, #fff) 85%, transparent);
+    z-index: 10;
+    font-size: 13px;
+    color: var(--sigvelo-color-neutral-text, #6b7280);
+  }
+
+  .loading-overlay__message {
+    max-width: 280px;
+    text-align: center;
+    line-height: 1.4;
+  }
+
+  /* ═══════════════════════════════════════════
+     MOBILE / COMPACT LAYOUT
+     ═══════════════════════════════════════════ */
+
+  .mobile-nav {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    padding: 4px 8px;
+    border-bottom: 1px solid var(--sigvelo-color-neutral-border-subtle, #e5e7eb);
+    background: var(--sigvelo-color-neutral-bg-subtle, #f9fafb);
+  }
+
+  .mobile-nav sigvelo-button-group {
+    margin-right: auto;
+  }
+
+  .single-pane {
+    flex: 1;
+    min-height: 0;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .single-pane .editor-pane {
+    flex: 1;
+  }
+
+  .single-pane .results-wrapper {
+    flex: 1;
+  }
+
+  .single-pane .schema-list {
+    flex: 1;
+  }
+`;
+//#endregion
+//#region src/components/sql-editor/sql-editor.ts
+const ICON_PLAY = html`
+  <svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor" style="display: block">
+    <path d="M5 3l14 9-14 9V3z" />
+  </svg>
+`;
+const ICON_RESET = html`
+  <svg
+    width="12"
+    height="12"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    style="display: block"
+  >
+    <path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8" />
+    <path d="M3 3v5h5" />
+  </svg>
+`;
+const ICON_CHEVRON = html`
+  <svg
+    width="10"
+    height="10"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="2.5"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    style="display: block"
+  >
+    <path d="M9 18l6-6-6-6" />
+  </svg>
+`;
+const COMPACT_BREAKPOINT = 560;
+const MAX_DISPLAY_ROWS = 1e3;
+/**
+* Renders one result cell as text.
+*
+* Postgres returns `json`, `jsonb`, and array columns as objects, which
+* `String()` would render as `[object Object]` in both the table and the sort
+* comparator. Serialising them keeps the value legible and the ordering stable.
+*/
+function formatCell(value) {
+	if (value === null || value === void 0) return "";
+	if (typeof value === "string") return value;
+	if (typeof value === "object") return JSON.stringify(value) ?? "";
+	return typeof value === "symbol" ? value.toString() : `${value}`;
+}
+/**
+* `<sigvelo-sql-editor>`
+*
+* @summary An in-browser PostgreSQL editor powered by PGlite (WASM). Runs
+* SQL queries locally with no server. Includes a results table, schema
+* browser with autocompletion, and optional dataset preloading via the
+* `setup-sql` attribute.
+*
+* @tag sigvelo-sql-editor
+* @status experimental
+* @since 0.1
+*/
+var SigveloSqlEditor = class extends SigveloElement {
+	constructor(..._args) {
+		super(..._args);
+		this.setupSql = "";
+		this.code = "";
+		this.dbName = "";
+		this.postgis = false;
+		this.editorLabel = "SQL code editor";
+		this._editedCode = "";
+		this._pgliteReady = false;
+		this._pgliteLoading = true;
+		this._loadingMessage = "Initializing PostgreSQL...";
+		this._running = false;
+		this._resultFields = [];
+		this._resultRows = [];
+		this._rowCount = 0;
+		this._executionTimeMs = 0;
+		this._error = null;
+		this._schema = [];
+		this._expandedTables = /* @__PURE__ */ new Set();
+		this._sortColumn = null;
+		this._sortDirection = null;
+		this._compact = false;
+		this._compactView = "code";
+		this._rightPane = "results";
+		this._runner = null;
+		this._resizeObserver = null;
+		this._execId = 0;
+		this._boundOnKeydown = this._onKeydown.bind(this);
+	}
+	static {
+		this.styles = [hostStyles, sql_editor_styles_default];
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		this._editedCode = this.code;
+		this._resizeObserver = new ResizeObserver((entries) => {
+			for (const entry of entries) {
+				const compact = entry.contentRect.width < COMPACT_BREAKPOINT;
+				if (compact !== this._compact) this._compact = compact;
+			}
+		});
+		this._resizeObserver.observe(this);
+		this.addEventListener("keydown", this._boundOnKeydown);
+	}
+	firstUpdated() {
+		this._initRunner();
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this._resizeObserver?.disconnect();
+		this.removeEventListener("keydown", this._boundOnKeydown);
+		this._runner?.terminate();
+		this._runner = null;
+	}
+	_initRunner() {
+		const runner = new Worker(getRunnerUrl("pglite"), {
+			name: "sigvelo-pglite",
+			type: "module"
+		});
+		runner.addEventListener("message", (event) => {
+			this._onMessage(event.data);
+		});
+		runner.addEventListener("error", (event) => {
+			this._pgliteLoading = false;
+			this._error = event.message || "PostgreSQL runner failed to load";
+		});
+		runner.postMessage({
+			type: "pglite-init",
+			dbName: this.dbName,
+			postgis: this.postgis
+		});
+		this._runner = runner;
+	}
+	_postToRunner(msg) {
+		this._runner?.postMessage(msg);
+	}
+	_onMessage(data) {
+		if (!isRecord(data)) return;
+		if (data.__sigvelo_pglite_ready === true) {
+			this._pgliteReady = true;
+			this._pgliteLoading = false;
+			if (this.setupSql) this._postToRunner({
+				type: "pglite-setup",
+				sql: this.setupSql
+			});
+			else this._requestSchema();
+			return;
+		}
+		if (data.__sigvelo_pglite_loading === true) {
+			this._loadingMessage = typeof data.message === "string" ? data.message : "Loading...";
+			this._pgliteLoading = true;
+			return;
+		}
+		if (data.__sigvelo_pglite_setup_done === true) {
+			this._pgliteLoading = false;
+			this._requestSchema();
+			return;
+		}
+		if (data.__sigvelo_pglite_result === true && Array.isArray(data.fields) && data.fields.every((field) => isRecord(field) && typeof field.name === "string" && typeof field.dataTypeID === "number") && Array.isArray(data.rows) && data.rows.every(isRecord) && typeof data.rowCount === "number" && typeof data.executionTimeMs === "number") {
+			this._resultFields = data.fields;
+			this._resultRows = data.rows;
+			this._rowCount = data.rowCount;
+			this._executionTimeMs = data.executionTimeMs;
+			this._error = null;
+			this._sortColumn = null;
+			this._sortDirection = null;
+			this._rightPane = "results";
+			if (this._compact) this._compactView = "results";
+			return;
+		}
+		if (data.__sigvelo_pglite_error === true && typeof data.id === "number" && typeof data.message === "string") {
+			if (data.id >= 0) {
+				this._error = data.message;
+				this._resultFields = [];
+				this._resultRows = [];
+				this._rightPane = "results";
+				if (this._compact) this._compactView = "results";
+			}
+			this._pgliteLoading = false;
+			return;
+		}
+		if (data.__sigvelo_pglite_schema === true && Array.isArray(data.tables) && data.tables.every((table) => isRecord(table) && typeof table.name === "string" && Array.isArray(table.columns) && table.columns.every((column) => isRecord(column) && typeof column.name === "string" && typeof column.type === "string" && typeof column.nullable === "boolean"))) {
+			this._schema = data.tables;
+			if (this._expandedTables.size === 0) this._expandedTables = new Set(this._schema.map((t) => t.name));
+			return;
+		}
+		if (data.__sigvelo_pglite_done === true) {
+			this._running = false;
+			this._pgliteLoading = false;
+			this._requestSchema();
+			return;
+		}
+		if (data.__sigvelo_pglite_reset_done === true) {
+			this._pgliteLoading = false;
+			this._resultFields = [];
+			this._resultRows = [];
+			this._error = null;
+			this._requestSchema();
+			return;
+		}
+	}
+	_requestSchema() {
+		this._postToRunner({ type: "pglite-schema" });
+	}
+	_runCode() {
+		if (!this._pgliteReady || !this._runner) return;
+		this._running = true;
+		this._error = null;
+		const id = ++this._execId;
+		this._postToRunner({
+			type: "pglite-exec",
+			sql: this._editedCode,
+			id
+		});
+	}
+	_onEditorChange(e) {
+		this._editedCode = e.target.value;
+	}
+	_resetDatabase() {
+		if (!this._runner) return;
+		this._postToRunner({
+			type: "pglite-reset",
+			setupSql: this.setupSql || void 0
+		});
+	}
+	_onKeydown(e) {
+		if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) {
+			e.preventDefault();
+			this._runCode();
+		}
+	}
+	_toggleTable(name) {
+		const next = new Set(this._expandedTables);
+		if (next.has(name)) next.delete(name);
+		else next.add(name);
+		this._expandedTables = next;
+	}
+	_insertSelectQuery(tableName) {
+		this._editedCode = `SELECT * FROM "${tableName}" LIMIT 100;`;
+		if (this._compact) this._compactView = "code";
+	}
+	_toggleSort(columnName) {
+		if (this._sortColumn === columnName) {
+			this._sortDirection = this._sortDirection === "asc" ? "desc" : this._sortDirection === "desc" ? null : "asc";
+			if (this._sortDirection === null) this._sortColumn = null;
+		} else {
+			this._sortColumn = columnName;
+			this._sortDirection = "asc";
+		}
+	}
+	_getSortedRows() {
+		if (!this._sortColumn || !this._sortDirection) return this._resultRows;
+		const col = this._sortColumn;
+		const dir = this._sortDirection === "asc" ? 1 : -1;
+		return [...this._resultRows].sort((a, b) => {
+			const va = a[col];
+			const vb = b[col];
+			if (va == null && vb == null) return 0;
+			if (va == null) return dir;
+			if (vb == null) return -dir;
+			if (typeof va === "number" && typeof vb === "number") return (va - vb) * dir;
+			return formatCell(va).localeCompare(formatCell(vb)) * dir;
+		});
+	}
+	_renderEditorPane(slot) {
+		return html`
+      <div class="editor-pane" slot=${ifDefined(slot)}>
+        <div class="editor-pane__toolbar">
+          <span class="editor-pane__toolbar-title">SQL Editor</span>
+          <sigvelo-button
+            size="xs"
+            variant="ghost"
+            icon-label="Reset database"
+            ?disabled=${!this._pgliteReady || this._running}
+            @click=${() => this._resetDatabase()}
+          >
+            ${ICON_RESET}
+          </sigvelo-button>
+          <sigvelo-button
+            size="xs"
+            color="primary"
+            ?disabled=${!this._pgliteReady || this._running}
+            @click=${() => this._runCode()}
+          >
+            ${ICON_PLAY} Run
+          </sigvelo-button>
+        </div>
+        <div class="editor-pane__code">
+          <sigvelo-code-editor
+            .value=${this._editedCode}
+            language="sql"
+            editor-label=${this.editorLabel}
+            @sigvelo-change=${this._onEditorChange}
+          ></sigvelo-code-editor>
+        </div>
+      </div>
+    `;
+	}
+	_renderResultsView() {
+		if (this._error) return html`<div class="error-view">${this._error}</div>`;
+		if (this._resultFields.length === 0) return html`
+        <div class="results-empty">
+          No results yet. Type a SQL query and press Run or Ctrl+Enter.
+        </div>
+      `;
+		const rows = this._getSortedRows();
+		const displayRows = rows.slice(0, MAX_DISPLAY_ROWS);
+		const truncated = rows.length > MAX_DISPLAY_ROWS;
+		return html`
+      <div class="results-wrapper">
+        <div class="results-scroll">
+          <table class="results-table">
+            <thead>
+              <tr>
+                ${this._resultFields.map((f) => html`
+                    <th
+                      aria-sort=${this._sortColumn === f.name ? this._sortDirection === "desc" ? "descending" : "ascending" : "none"}
+                    >
+                      <button
+                        class="results-table__sort"
+                        type="button"
+                        @click=${() => this._toggleSort(f.name)}
+                      >
+                        ${f.name}${this._sortColumn === f.name ? html`<span class="sort-indicator" aria-hidden="true"
+                              >${this._sortDirection === "asc" ? "▲" : "▼"}</span
+                            >` : nothing}
+                      </button>
+                    </th>
+                  `)}
+              </tr>
+            </thead>
+            <tbody>
+              ${displayRows.map((row) => html`
+                  <tr>
+                    ${this._resultFields.map((f) => {
+			const val = row[f.name];
+			if (val === null || val === void 0) return html`<td class="cell--null">NULL</td>`;
+			return html`<td class=${typeof val === "number" ? "cell--number" : ""}>${formatCell(val)}</td>`;
+		})}
+                  </tr>
+                `)}
+            </tbody>
+          </table>
+        </div>
+        <div class="results-status">
+          <span
+            >${truncated ? `Showing ${MAX_DISPLAY_ROWS} of ${rows.length}` : `${this._rowCount} row${this._rowCount !== 1 ? "s" : ""}`}</span
+          >
+          <span>${this._executionTimeMs}ms</span>
+        </div>
+      </div>
+    `;
+	}
+	_renderSchemaView() {
+		if (this._schema.length === 0) return html`<div class="schema-empty">No tables yet. Run a CREATE TABLE statement.</div>`;
+		return html`
+      <div class="schema-list">
+        ${this._schema.map((table) => {
+			const expanded = this._expandedTables.has(table.name);
+			return html`
+            <div class="schema-table">
+              <div class="schema-table__header">
+                <button
+                  class="schema-table__disclosure"
+                  type="button"
+                  aria-expanded=${expanded}
+                  @click=${() => this._toggleTable(table.name)}
+                >
+                  <span
+                    class="schema-table__chevron ${expanded ? "schema-table__chevron--open" : ""}"
+                    aria-hidden="true"
+                  >
+                    ${ICON_CHEVRON}
+                  </span>
+                  <span class="schema-table__name">${table.name}</span>
+                </button>
+                <button
+                  class="schema-table__action"
+                  type="button"
+                  aria-label="Insert SELECT query for ${table.name}"
+                  @click=${() => this._insertSelectQuery(table.name)}
+                >
+                  SELECT
+                </button>
+              </div>
+              ${expanded ? html`
+                    <div class="schema-columns">
+                      ${table.columns.map((col) => html`
+                          <div class="schema-column">
+                            <span class="schema-column__name">${col.name}</span>
+                            <span class="schema-column__type">${col.type}</span>
+                          </div>
+                        `)}
+                    </div>
+                  ` : nothing}
+            </div>
+          `;
+		})}
+      </div>
+    `;
+	}
+	_renderRightPane(slot) {
+		const content = html`
+      <div class="right-pane__header">
+        <sigvelo-button-group label="Output toggle">
+          <sigvelo-button
+            size="xs"
+            variant=${this._rightPane === "results" ? "normal" : "ghost"}
+            color=${this._rightPane === "results" ? "primary" : "neutral"}
+            @click=${() => {
+			this._rightPane = "results";
+		}}
+          >
+            Results${this._resultRows.length > 0 ? html` (${Math.min(this._resultRows.length, MAX_DISPLAY_ROWS)})` : ""}
+          </sigvelo-button>
+          <sigvelo-button
+            size="xs"
+            variant=${this._rightPane === "schema" ? "normal" : "ghost"}
+            color=${this._rightPane === "schema" ? "primary" : "neutral"}
+            @click=${() => {
+			this._rightPane = "schema";
+		}}
+          >
+            Schema${this._schema.length > 0 ? html` (${this._schema.length})` : ""}
+          </sigvelo-button>
+        </sigvelo-button-group>
+      </div>
+      <div class="right-pane__content">
+        ${this._rightPane === "results" ? this._renderResultsView() : this._renderSchemaView()}
+      </div>
+    `;
+		return slot ? html`<div class="right-pane" slot=${slot}>${content}</div>` : html`<div class="right-pane">${content}</div>`;
+	}
+	_renderLoadingOverlay() {
+		if (!this._pgliteLoading) return nothing;
+		return html`
+      <div class="loading-overlay">
+        <sigvelo-spinner label="Loading PostgreSQL"></sigvelo-spinner>
+        <div class="loading-overlay__message">${this._loadingMessage}</div>
+      </div>
+    `;
+	}
+	_renderMobileNav() {
+		const btn = (view, label) => html`
+      <sigvelo-button
+        size="xs"
+        variant=${this._compactView === view ? "normal" : "ghost"}
+        color=${this._compactView === view ? "primary" : "neutral"}
+        @click=${() => {
+			this._compactView = view;
+		}}
+      >
+        ${label}
+      </sigvelo-button>
+    `;
+		return html`
+      <div class="mobile-nav">
+        <sigvelo-button-group label="View toggle">
+          ${btn("code", "Code")} ${btn("results", "Results")} ${btn("schema", "Schema")}
+        </sigvelo-button-group>
+        <sigvelo-button
+          size="xs"
+          variant="ghost"
+          icon-label="Reset database"
+          ?disabled=${!this._pgliteReady || this._running}
+          @click=${() => this._resetDatabase()}
+        >
+          ${ICON_RESET}
+        </sigvelo-button>
+        <sigvelo-button
+          size="xs"
+          color="primary"
+          icon-label="Run"
+          ?disabled=${!this._pgliteReady || this._running}
+          @click=${() => this._runCode()}
+        >
+          ${ICON_PLAY}
+        </sigvelo-button>
+      </div>
+    `;
+	}
+	render() {
+		if (this._compact) return html`
+        ${this._renderLoadingOverlay()} ${this._renderMobileNav()}
+        <div class="single-pane">
+          ${this._compactView === "code" ? this._renderEditorPane() : this._compactView === "results" ? this._renderResultsView() : this._renderSchemaView()}
+        </div>
+      `;
+		return html`
+      ${this._renderLoadingOverlay()}
+      <div class="content">
+        <sigvelo-splitter
+          orientation="vertical"
+          position="0.5"
+          style="--divider-min-position: 20%; --divider-max-position: 80%;"
+        >
+          ${this._renderEditorPane("start")} ${this._renderRightPane("end")}
+        </sigvelo-splitter>
+      </div>
+    `;
+	}
+};
+__decorate([property({ attribute: "setup-sql" })], SigveloSqlEditor.prototype, "setupSql", void 0);
+__decorate([property()], SigveloSqlEditor.prototype, "code", void 0);
+__decorate([property({ attribute: "db-name" })], SigveloSqlEditor.prototype, "dbName", void 0);
+__decorate([property({ type: Boolean })], SigveloSqlEditor.prototype, "postgis", void 0);
+__decorate([property({ attribute: "editor-label" })], SigveloSqlEditor.prototype, "editorLabel", void 0);
+__decorate([state()], SigveloSqlEditor.prototype, "_editedCode", void 0);
+__decorate([state()], SigveloSqlEditor.prototype, "_pgliteReady", void 0);
+__decorate([state()], SigveloSqlEditor.prototype, "_pgliteLoading", void 0);
+__decorate([state()], SigveloSqlEditor.prototype, "_loadingMessage", void 0);
+__decorate([state()], SigveloSqlEditor.prototype, "_running", void 0);
+__decorate([state()], SigveloSqlEditor.prototype, "_resultFields", void 0);
+__decorate([state()], SigveloSqlEditor.prototype, "_resultRows", void 0);
+__decorate([state()], SigveloSqlEditor.prototype, "_rowCount", void 0);
+__decorate([state()], SigveloSqlEditor.prototype, "_executionTimeMs", void 0);
+__decorate([state()], SigveloSqlEditor.prototype, "_error", void 0);
+__decorate([state()], SigveloSqlEditor.prototype, "_schema", void 0);
+__decorate([state()], SigveloSqlEditor.prototype, "_expandedTables", void 0);
+__decorate([state()], SigveloSqlEditor.prototype, "_sortColumn", void 0);
+__decorate([state()], SigveloSqlEditor.prototype, "_sortDirection", void 0);
+__decorate([state()], SigveloSqlEditor.prototype, "_compact", void 0);
+__decorate([state()], SigveloSqlEditor.prototype, "_compactView", void 0);
+__decorate([state()], SigveloSqlEditor.prototype, "_rightPane", void 0);
+customElements.define("sigvelo-sql-editor", SigveloSqlEditor);
+//#endregion
+export { SigveloSqlEditor as t };