From 2319f058f3bdf0422ca57850254671ccfe65f63a Mon Sep 17 00:00:00 2001
From: Eliya Cohen <co.eliya2@gmail.com>
Date: Thu, 11 Jun 2026 14:52:39 +0300
Subject: [PATCH] feat: SafeQL playground

Add an in-browser playground (apps/playground) that runs the genuine
@ts-safeql/check-sql ESLint rule entirely in the browser: write a query
and see SafeQL's inferred result types and inline lint diagnostics live.

The rule drives an async PGlite-backed `generate` from inside its sync
ESLint context via a SharedArrayBuffer + Atomics bridge across two workers,
with a small browser-compat shim layer for the node builtins it loads.

Registers apps/* in the pnpm workspace and adds a root `playground` script.
---
 apps/playground/index.html                    |  21 +
 apps/playground/package.json                  |  36 ++
 apps/playground/public/_headers               |   6 +
 apps/playground/src/App.vue                   | 315 +++++++++++++++
 .../src/components/MonacoEditor.vue           | 125 ++++++
 apps/playground/src/lib/defaults.ts           |  37 ++
 apps/playground/src/lib/eslint-engine.ts      |  94 +++++
 apps/playground/src/lib/monaco-quickfix.ts    |  70 ++++
 apps/playground/src/lib/monaco-shiki.ts       |  40 ++
 apps/playground/src/lib/pglite-sql.ts         | 139 +++++++
 apps/playground/src/lib/playground-config.ts  | 103 +++++
 apps/playground/src/lib/real-lint-client.ts   | 113 ++++++
 apps/playground/src/lib/safeql-theme.ts       |  47 +++
 apps/playground/src/lib/share-url.ts          | 101 +++++
 apps/playground/src/lib/ts-vfs.ts             | 111 +++++
 apps/playground/src/main.ts                   |   5 +
 apps/playground/src/postgres-socket.d.ts      |   7 +
 apps/playground/src/shims/eslint-browser.ts   |  25 ++
 .../src/shims/eslint-unsupported.ts           |  13 +
 apps/playground/src/shims/libpg-query.ts      | 123 ++++++
 apps/playground/src/shims/node-crypto.ts      |  26 ++
 apps/playground/src/shims/node-empty.ts       |  34 ++
 apps/playground/src/shims/node-globals.ts     |  38 ++
 apps/playground/src/shims/node-os.ts          |  24 ++
 apps/playground/src/shims/node-url.ts         |  14 +
 apps/playground/src/shims/node-util.ts        |  30 ++
 apps/playground/src/shims/path-stub.ts        | 104 +++++
 apps/playground/src/shims/postgres-errors.ts  |  18 +
 apps/playground/src/shims/postgres.ts         |  10 +
 apps/playground/src/shims/synckit.ts          |  33 ++
 apps/playground/src/style.css                 | 269 ++++++++++++
 apps/playground/src/worker/db.worker.ts       | 144 +++++++
 .../playground/src/worker/real-lint.worker.ts | 103 +++++
 apps/playground/tsconfig.json                 |  20 +
 apps/playground/vercel.json                   |  12 +
 apps/playground/vite.config.ts                | 118 ++++++
 package.json                                  |   3 +-
 pnpm-lock.yaml                                | 382 ++++++++++++++++--
 pnpm-workspace.yaml                           |   1 +
 39 files changed, 2880 insertions(+), 34 deletions(-)
 create mode 100644 apps/playground/index.html
 create mode 100644 apps/playground/package.json
 create mode 100644 apps/playground/public/_headers
 create mode 100644 apps/playground/src/App.vue
 create mode 100644 apps/playground/src/components/MonacoEditor.vue
 create mode 100644 apps/playground/src/lib/defaults.ts
 create mode 100644 apps/playground/src/lib/eslint-engine.ts
 create mode 100644 apps/playground/src/lib/monaco-quickfix.ts
 create mode 100644 apps/playground/src/lib/monaco-shiki.ts
 create mode 100644 apps/playground/src/lib/pglite-sql.ts
 create mode 100644 apps/playground/src/lib/playground-config.ts
 create mode 100644 apps/playground/src/lib/real-lint-client.ts
 create mode 100644 apps/playground/src/lib/safeql-theme.ts
 create mode 100644 apps/playground/src/lib/share-url.ts
 create mode 100644 apps/playground/src/lib/ts-vfs.ts
 create mode 100644 apps/playground/src/main.ts
 create mode 100644 apps/playground/src/postgres-socket.d.ts
 create mode 100644 apps/playground/src/shims/eslint-browser.ts
 create mode 100644 apps/playground/src/shims/eslint-unsupported.ts
 create mode 100644 apps/playground/src/shims/libpg-query.ts
 create mode 100644 apps/playground/src/shims/node-crypto.ts
 create mode 100644 apps/playground/src/shims/node-empty.ts
 create mode 100644 apps/playground/src/shims/node-globals.ts
 create mode 100644 apps/playground/src/shims/node-os.ts
 create mode 100644 apps/playground/src/shims/node-url.ts
 create mode 100644 apps/playground/src/shims/node-util.ts
 create mode 100644 apps/playground/src/shims/path-stub.ts
 create mode 100644 apps/playground/src/shims/postgres-errors.ts
 create mode 100644 apps/playground/src/shims/postgres.ts
 create mode 100644 apps/playground/src/shims/synckit.ts
 create mode 100644 apps/playground/src/style.css
 create mode 100644 apps/playground/src/worker/db.worker.ts
 create mode 100644 apps/playground/src/worker/real-lint.worker.ts
 create mode 100644 apps/playground/tsconfig.json
 create mode 100644 apps/playground/vercel.json
 create mode 100644 apps/playground/vite.config.ts

diff --git a/apps/playground/index.html b/apps/playground/index.html
new file mode 100644
index 00000000..651b75af
--- /dev/null
+++ b/apps/playground/index.html
@@ -0,0 +1,21 @@
+<!doctype html>
+<html lang="en" class="dark">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="color-scheme" content="dark" />
+    <title>SafeQL Playground</title>
+    <!-- crossorigin so the cross-origin font requests pass the COEP (require-corp) check. -->
+    <link rel="preconnect" href="https://fonts.googleapis.com" crossorigin />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      rel="stylesheet"
+      href="https://fonts.googleapis.com/css2?family=Geist+Mono:wght@400;500;600&family=Geist:wght@400;500;600;700&display=swap"
+      crossorigin
+    />
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>
diff --git a/apps/playground/package.json b/apps/playground/package.json
new file mode 100644
index 00000000..ea793e7f
--- /dev/null
+++ b/apps/playground/package.json
@@ -0,0 +1,36 @@
+{
+  "name": "@ts-safeql/playground",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vue-tsc -b && vite build",
+    "preview": "vite preview",
+    "typecheck": "vue-tsc -b"
+  },
+  "dependencies": {
+    "@electric-sql/pglite": "^0.5.1",
+    "@shikijs/monaco": "^4.2.0",
+    "@ts-safeql/eslint-plugin": "workspace:*",
+    "@ts-safeql/generate": "workspace:*",
+    "@ts-safeql/shared": "workspace:*",
+    "@ts-safeql/sql-ast": "workspace:*",
+    "@typescript-eslint/parser": "catalog:",
+    "eslint": "catalog:",
+    "eslint-linter-browserify": "^10.4.1",
+    "fp-ts": "^2.16.9",
+    "libpg-query": "catalog:",
+    "monaco-editor": "^0.55.1",
+    "shiki": "^4.2.0",
+    "vue": "^3.5.13"
+  },
+  "devDependencies": {
+    "@types/node": "catalog:",
+    "@vitejs/plugin-vue": "^5.2.3",
+    "postgres": "catalog:",
+    "typescript": "catalog:",
+    "vite": "^6.4.3",
+    "vue-tsc": "^2.2.8"
+  }
+}
diff --git a/apps/playground/public/_headers b/apps/playground/public/_headers
new file mode 100644
index 00000000..592cbbda
--- /dev/null
+++ b/apps/playground/public/_headers
@@ -0,0 +1,6 @@
+# Cross-origin isolation is required for SharedArrayBuffer (the Atomics bridge to the DB worker).
+# Netlify / Cloudflare Pages read this file; Vercel uses vercel.json; the dev/preview servers
+# get the same headers from the crossOriginIsolation plugin in vite.config.ts.
+/*
+  Cross-Origin-Opener-Policy: same-origin
+  Cross-Origin-Embedder-Policy: require-corp
diff --git a/apps/playground/src/App.vue b/apps/playground/src/App.vue
new file mode 100644
index 00000000..6a181b15
--- /dev/null
+++ b/apps/playground/src/App.vue
@@ -0,0 +1,315 @@
+<script setup lang="ts">
+import { computed, onMounted, onUnmounted, ref, watch, type Ref } from "vue";
+import MonacoEditor from "./components/MonacoEditor.vue";
+import { DEFAULT_CODE, DEFAULT_CONFIG, DEFAULT_SCHEMA } from "./lib/defaults";
+import type { EngineDiagnostic } from "./lib/eslint-engine";
+import { parsePlaygroundConfig } from "./lib/playground-config";
+import { lintReal } from "./lib/real-lint-client";
+import { readPlaygroundStateFromUrl, writePlaygroundStateToUrl } from "./lib/share-url";
+
+// Start from defaults; if the URL carries shared state we hydrate it in onMounted (decoding is
+// async because it inflates a compressed hash).
+const schema = ref(DEFAULT_SCHEMA);
+const code = ref(DEFAULT_CODE);
+const config = ref(DEFAULT_CONFIG);
+const diagnostics = ref<EngineDiagnostic[]>([]);
+const status = ref("Ready");
+const lintError = ref<string | null>(null);
+const configError = ref<string | null>(null);
+const loading = ref(false);
+
+let lintTimer: ReturnType<typeof setTimeout> | undefined;
+let urlTimer: ReturnType<typeof setTimeout> | undefined;
+let lintId = 0;
+let hydrateId = 0;
+const shareStatus = ref<string | null>(null);
+
+async function runLint() {
+  const currentId = ++lintId;
+  loading.value = true;
+  status.value = "Linting…";
+  lintError.value = null;
+
+  const parsedConfig = parsePlaygroundConfig(config.value);
+  configError.value = parsedConfig.error ?? null;
+
+  try {
+    const result = await lintReal({
+      schema: schema.value,
+      code: code.value,
+      config: parsedConfig.config,
+    });
+
+    // A newer lint started while we were awaiting — drop this stale result.
+    if (currentId !== lintId) {
+      return;
+    }
+    diagnostics.value = result;
+    const count = result.length;
+    status.value = count === 0 ? "No issues" : count === 1 ? "1 issue" : `${count} issues`;
+  } catch (error) {
+    if (currentId !== lintId) {
+      return;
+    }
+    lintError.value = error instanceof Error ? error.message : String(error);
+    diagnostics.value = [];
+    status.value = "Lint failed";
+  } finally {
+    if (currentId === lintId) {
+      loading.value = false;
+    }
+  }
+}
+
+function scheduleLint() {
+  clearTimeout(lintTimer);
+  lintTimer = setTimeout(() => void runLint(), 200);
+}
+
+// Fire-and-forget hash sync. Swallows a rare encode failure (e.g. CompressionStream abort) so it
+// can't surface as an unhandled rejection; the hash simply stays at its previous value.
+function syncUrlToState() {
+  void writePlaygroundStateToUrl({
+    schema: schema.value,
+    code: code.value,
+    config: config.value,
+  }).catch(() => undefined);
+}
+
+function scheduleUrlSync() {
+  // writePlaygroundStateToUrl no-ops when the encoded state is unchanged, so applying state from
+  // a hashchange and re-syncing is harmless.
+  clearTimeout(urlTimer);
+  urlTimer = setTimeout(syncUrlToState, 300);
+}
+
+async function applyStateFromUrl() {
+  // Guard against overlapping hydrations (rapid hashchanges, or one during initial mount): only
+  // the most recent invocation applies, so results can't land out of order.
+  const id = ++hydrateId;
+  const hadHash = window.location.hash.replace(/^#/, "").length > 0;
+  const next = await readPlaygroundStateFromUrl();
+  if (id !== hydrateId) {
+    return;
+  }
+
+  if (!next) {
+    // A non-empty but undecodable hash is a broken share link — tell the user rather than
+    // silently showing the defaults (which looks identical to a fresh visit).
+    if (hadHash) {
+      shareStatus.value = "Failed to load shared link";
+      setTimeout(() => {
+        shareStatus.value = null;
+      }, 2000);
+    }
+    return;
+  }
+
+  schema.value = next.schema;
+  code.value = next.code;
+  config.value = next.config ?? DEFAULT_CONFIG;
+}
+
+async function copyShareUrl() {
+  // Flush the pending URL-sync debounce so we never copy a hash that lags the latest edits.
+  clearTimeout(urlTimer);
+
+  try {
+    await writePlaygroundStateToUrl({
+      schema: schema.value,
+      code: code.value,
+      config: config.value,
+    });
+    await navigator.clipboard.writeText(window.location.href);
+    shareStatus.value = "Link copied";
+    setTimeout(() => {
+      shareStatus.value = null;
+    }, 2000);
+  } catch {
+    shareStatus.value = "Copy failed";
+    setTimeout(() => {
+      shareStatus.value = null;
+    }, 2000);
+  }
+}
+
+const panelsEl = ref<HTMLElement | null>(null);
+const rightColumnEl = ref<HTMLElement | null>(null);
+const columnSizes = ref([1, 1, 1]);
+const rightSizes = ref([1, 0.5]);
+const dragging = ref(false);
+
+function ratioStyle(sizes: number[], index: number) {
+  return { flex: `${sizes[index]} 1 0`, minWidth: "0", minHeight: "0" };
+}
+
+function columnStyle(index: number) {
+  return ratioStyle(columnSizes.value, index);
+}
+
+function rightStyle(index: number) {
+  return ratioStyle(rightSizes.value, index);
+}
+
+function createResizer(
+  sizes: Ref<number[]>,
+  axis: "x" | "y",
+  getContainer: () => HTMLElement | null,
+) {
+  let index = -1;
+  let startPos = 0;
+  let startSizes: number[] = [];
+  let extent = 1;
+
+  function onMove(event: PointerEvent) {
+    if (index < 0) {
+      return;
+    }
+
+    const total = startSizes.reduce((sum, size) => sum + size, 0);
+    const pos = axis === "x" ? event.clientX : event.clientY;
+    const delta = ((pos - startPos) / extent) * total;
+    const before = startSizes[index] + delta;
+    const after = startSizes[index + 1] - delta;
+    const min = 0.15;
+
+    if (before < min || after < min) {
+      return;
+    }
+
+    const next = [...startSizes];
+    next[index] = before;
+    next[index + 1] = after;
+    sizes.value = next;
+  }
+
+  function stop() {
+    index = -1;
+    dragging.value = false;
+    window.removeEventListener("pointermove", onMove);
+    window.removeEventListener("pointerup", stop);
+  }
+
+  function start(handleIndex: number, event: PointerEvent) {
+    event.preventDefault();
+    index = handleIndex;
+    startPos = axis === "x" ? event.clientX : event.clientY;
+    startSizes = [...sizes.value];
+    const rect = getContainer()?.getBoundingClientRect();
+    extent = (axis === "x" ? rect?.width : rect?.height) ?? 1;
+    dragging.value = true;
+    window.addEventListener("pointermove", onMove);
+    window.addEventListener("pointerup", stop);
+  }
+
+  return { start, stop };
+}
+
+const columnResizer = createResizer(columnSizes, "x", () => panelsEl.value);
+const rightResizer = createResizer(rightSizes, "y", () => rightColumnEl.value);
+
+const statusText = computed(
+  () => lintError.value ?? configError.value ?? shareStatus.value ?? status.value,
+);
+const statusTone = computed<"error" | "ok" | "neutral">(() => {
+  if (
+    lintError.value ||
+    configError.value ||
+    shareStatus.value === "Copy failed" ||
+    shareStatus.value === "Failed to load shared link"
+  ) {
+    return "error";
+  }
+  if (loading.value || shareStatus.value === "Link copied") {
+    return "neutral";
+  }
+  return diagnostics.value.length > 0 ? "error" : "ok";
+});
+
+onMounted(async () => {
+  // Register before the first await so an unmount during hydration can't leave a stale listener.
+  window.addEventListener("hashchange", applyStateFromUrl);
+  // Hydrate shared state before the first lint so we lint the shared content, not the defaults.
+  await applyStateFromUrl();
+  syncUrlToState();
+  // Hydration may have scheduled a debounced lint via the watcher; drop it and lint once now.
+  clearTimeout(lintTimer);
+  void runLint();
+});
+
+onUnmounted(() => {
+  window.removeEventListener("hashchange", applyStateFromUrl);
+  columnResizer.stop();
+  rightResizer.stop();
+  clearTimeout(lintTimer);
+  clearTimeout(urlTimer);
+});
+
+watch([schema, code, config], () => {
+  scheduleLint();
+  scheduleUrlSync();
+});
+</script>
+
+<template>
+  <div class="playground">
+    <header class="header">
+      <h1>SafeQL Playground</h1>
+      <div class="header-actions">
+        <span class="status" :class="`status-${statusTone}`">
+          <span class="status-dot"></span>
+          {{ statusText }}
+        </span>
+        <button type="button" class="share-button" @click="copyShareUrl">Copy link</button>
+      </div>
+    </header>
+
+    <div class="panels" ref="panelsEl" :class="{ dragging }">
+      <section class="panel" :style="columnStyle(0)">
+        <div class="panel-header">Schema (SQL)</div>
+        <MonacoEditor v-model="schema" language="sql" />
+      </section>
+
+      <div class="splitter" @pointerdown="columnResizer.start(0, $event)"></div>
+
+      <section class="panel" :style="columnStyle(1)">
+        <div class="panel-header">TypeScript</div>
+        <MonacoEditor
+          v-model="code"
+          language="typescript"
+          :diagnostics="lintError ? [] : diagnostics"
+        />
+      </section>
+
+      <div class="splitter" @pointerdown="columnResizer.start(1, $event)"></div>
+
+      <div class="panel-column" ref="rightColumnEl" :style="columnStyle(2)">
+        <section class="panel" :style="rightStyle(0)">
+          <div class="panel-header">Diagnostics</div>
+          <div class="errors">
+            <p v-if="loading" class="empty">Running SafeQL…</p>
+            <p v-else-if="lintError" class="empty">{{ lintError }}</p>
+            <p v-else-if="diagnostics.length === 0" class="empty">No SafeQL issues found.</p>
+            <article v-for="(diagnostic, index) in diagnostics" :key="index" class="error-card">
+              <div class="error-meta">
+                {{ diagnostic.ruleId ?? "error" }} · Line {{ diagnostic.line }}, column
+                {{ diagnostic.column }}
+              </div>
+              <pre class="error-plain">{{ diagnostic.message }}</pre>
+            </article>
+          </div>
+        </section>
+
+        <div class="splitter splitter-h" @pointerdown="rightResizer.start(0, $event)"></div>
+
+        <section class="panel" :style="rightStyle(1)">
+          <div class="panel-header" :class="{ 'header-error': configError }">
+            Config (JSON){{ configError ? " — invalid" : "" }}
+          </div>
+          <p v-if="configError" class="config-error">{{ configError }}</p>
+          <MonacoEditor v-model="config" language="json" />
+        </section>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/apps/playground/src/components/MonacoEditor.vue b/apps/playground/src/components/MonacoEditor.vue
new file mode 100644
index 00000000..a5b83c44
--- /dev/null
+++ b/apps/playground/src/components/MonacoEditor.vue
@@ -0,0 +1,125 @@
+<script setup lang="ts">
+import * as monaco from "monaco-editor";
+import editorWorker from "monaco-editor/esm/vs/editor/editor.worker?worker";
+import jsonWorker from "monaco-editor/esm/vs/language/json/json.worker?worker";
+import tsWorker from "monaco-editor/esm/vs/language/typescript/ts.worker?worker";
+import { onBeforeUnmount, onMounted, ref, watch } from "vue";
+import type { EngineDiagnostic } from "../lib/eslint-engine";
+import { registerSafeqlQuickFix, setModelDiagnostics } from "../lib/monaco-quickfix";
+import { MONACO_THEME, setupMonacoShiki } from "../lib/monaco-shiki";
+
+self.MonacoEnvironment = {
+  getWorker(_workerId, label) {
+    if (label === "typescript" || label === "javascript") {
+      return new tsWorker();
+    }
+    if (label === "json") {
+      return new jsonWorker();
+    }
+    return new editorWorker();
+  },
+};
+
+// We render SafeQL diagnostics ourselves; silence Monaco's own TS checker (it doesn't know the
+// `sql`/`conn` globals and would add unrelated squiggles). The `typescript` namespace is typed
+// as deprecated on the barrel but is present at runtime.
+interface TsLanguageDefaults {
+  setDiagnosticsOptions(options: {
+    noSemanticValidation: boolean;
+    noSyntaxValidation: boolean;
+  }): void;
+}
+const typescriptLanguage = monaco.languages.typescript as unknown as {
+  typescriptDefaults: TsLanguageDefaults;
+};
+typescriptLanguage.typescriptDefaults.setDiagnosticsOptions({
+  noSemanticValidation: true,
+  noSyntaxValidation: true,
+});
+
+const props = defineProps<{
+  modelValue: string;
+  language: "typescript" | "sql" | "json";
+  diagnostics?: EngineDiagnostic[];
+}>();
+
+const emit = defineEmits<{ "update:modelValue": [value: string] }>();
+
+const host = ref<HTMLElement | null>(null);
+let editor: monaco.editor.IStandaloneCodeEditor | undefined;
+
+function applyMarkers(): void {
+  const model = editor?.getModel();
+  if (!model) {
+    return;
+  }
+
+  if (props.language === "typescript") {
+    setModelDiagnostics(model, props.diagnostics ?? []);
+  }
+
+  monaco.editor.setModelMarkers(
+    model,
+    "safeql",
+    (props.diagnostics ?? []).map((diagnostic) => ({
+      severity: monaco.MarkerSeverity.Error,
+      message: diagnostic.message,
+      startLineNumber: diagnostic.line,
+      startColumn: diagnostic.column,
+      endLineNumber: diagnostic.endLine,
+      endColumn: diagnostic.endColumn,
+    })),
+  );
+}
+
+onMounted(async () => {
+  try {
+    await setupMonacoShiki();
+  } catch (error) {
+    console.error("[monaco-shiki] setup failed:", error instanceof Error ? error.stack : error);
+  }
+  if (props.language === "typescript") {
+    registerSafeqlQuickFix();
+  }
+  if (host.value === null) {
+    return;
+  }
+
+  editor = monaco.editor.create(host.value, {
+    value: props.modelValue,
+    language: props.language,
+    theme: MONACO_THEME,
+    automaticLayout: true,
+    minimap: { enabled: false },
+    fontSize: 13,
+    scrollBeyondLastLine: false,
+    // Render hover/suggest widgets at the document body so the panel's overflow:hidden
+    // doesn't clip them.
+    fixedOverflowWidgets: true,
+  });
+
+  editor.onDidChangeModelContent(() => emit("update:modelValue", editor?.getValue() ?? ""));
+  applyMarkers();
+});
+
+watch(
+  () => props.modelValue,
+  (value) => {
+    const model = editor?.getModel();
+    if (!editor || !model || editor.getValue() === value) {
+      return;
+    }
+    // Replace via an edit rather than setValue so an external update (e.g. URL hydration) keeps
+    // the cursor position and undo history instead of resetting to the top.
+    editor.executeEdits("external", [{ range: model.getFullModelRange(), text: value }]);
+  },
+);
+
+watch(() => props.diagnostics, applyMarkers, { deep: true });
+
+onBeforeUnmount(() => editor?.dispose());
+</script>
+
+<template>
+  <div ref="host" class="editor-wrap"></div>
+</template>
diff --git a/apps/playground/src/lib/defaults.ts b/apps/playground/src/lib/defaults.ts
new file mode 100644
index 00000000..0ce78df1
--- /dev/null
+++ b/apps/playground/src/lib/defaults.ts
@@ -0,0 +1,37 @@
+export const DEFAULT_SCHEMA = `CREATE TYPE role AS ENUM ('owner', 'admin', 'member');
+
+CREATE TABLE "user" (
+  id integer PRIMARY KEY GENERATED ALWAYS AS IDENTITY,
+  email text NOT NULL UNIQUE,
+  display_name text,
+  role role NOT NULL DEFAULT 'member',
+  created_at timestamptz NOT NULL DEFAULT now()
+);
+
+CREATE TABLE post (
+  id integer PRIMARY KEY GENERATED ALWAYS AS IDENTITY,
+  author_id integer NOT NULL REFERENCES "user" (id),
+  title text NOT NULL,
+  body text,
+  published_at timestamptz
+);`;
+
+export const DEFAULT_CODE = `const feed = await sql\`
+  select
+    post.title,
+    post.published_at,
+    author.display_name,
+    author.role
+  from post
+    join "user" author on author.id = post.author_id
+  order by post.published_at desc nulls last
+\`;`;
+
+export const DEFAULT_CONFIG = `{
+  "targets": [{ "tag": "sql" }],
+  "fieldTransform": null,
+  "nullAsOptional": false,
+  "nullAsUndefined": false,
+  "overrides": { "types": {} },
+  "skipTypeAnnotations": false
+}`;
diff --git a/apps/playground/src/lib/eslint-engine.ts b/apps/playground/src/lib/eslint-engine.ts
new file mode 100644
index 00000000..098ec338
--- /dev/null
+++ b/apps/playground/src/lib/eslint-engine.ts
@@ -0,0 +1,94 @@
+// Linter only — importing from the "eslint" barrel pulls in the ESLint class (fs globbing,
+// glob-parent) which can't run in the browser. eslint-linter-browserify is the Linter alone.
+import { Linter } from "eslint-linter-browserify";
+import type { ESLint, Linter as LinterTypes } from "eslint";
+import * as tsParser from "@typescript-eslint/parser";
+import { rules } from "@ts-safeql/eslint-plugin";
+import type { PlaygroundConfig } from "./playground-config";
+import { createTsProgram } from "./ts-vfs";
+
+// typescript-eslint's RuleModule and ESLint core's Plugin type don't line up structurally;
+// this is the standard ESLint-API boundary cast.
+const safeqlPlugin = { rules } as unknown as ESLint.Plugin;
+const tseslintParser = tsParser as unknown as LinterTypes.Parser;
+
+export interface EngineDiagnostic {
+  line: number;
+  column: number;
+  endLine: number;
+  endColumn: number;
+  message: string;
+  ruleId: string | null;
+  // ESLint autofix as character offsets into the source, when the rule provides one.
+  fix?: { from: number; to: number; text: string };
+}
+
+export interface LintInput {
+  code: string;
+  databaseUrl: string;
+  config: PlaygroundConfig;
+}
+
+const linter = new Linter();
+
+// Map the playground's config to the rule's connection options. fieldTransform + overrides ride
+// along to `generate` via the worker params the rule builds, so the whole config takes effect.
+function toRuleConnection(databaseUrl: string, config: PlaygroundConfig) {
+  return {
+    databaseUrl,
+    targets: [
+      {
+        tag: config.tag,
+        fieldTransform: config.fieldTransform,
+        skipTypeAnnotations: config.skipTypeAnnotations,
+      },
+    ],
+    overrides: config.overrides,
+    nullAsOptional: config.nullAsOptional,
+    nullAsUndefined: config.nullAsUndefined,
+  };
+}
+
+// Reused across lints so TypeScript can incrementally rebuild instead of re-parsing lib files.
+let lastProgram: import("typescript").Program | undefined;
+
+export function lintWithRealRule(input: LintInput): EngineDiagnostic[] {
+  const { program, filename } = createTsProgram(input.code, lastProgram);
+  lastProgram = program;
+
+  const messages = linter.verify(
+    input.code,
+    {
+      files: ["**/*.ts"],
+      languageOptions: {
+        parser: tseslintParser,
+        parserOptions: {
+          programs: [program],
+          project: false,
+          ecmaVersion: 2020,
+          sourceType: "module",
+        },
+      },
+      plugins: { "@ts-safeql": safeqlPlugin },
+      rules: {
+        "@ts-safeql/check-sql": [
+          "error",
+          { connections: [toRuleConnection(input.databaseUrl, input.config)] },
+        ],
+      },
+    },
+    filename,
+  );
+
+  return messages.map((message) => ({
+    line: message.line,
+    column: message.column,
+    endLine: message.endLine ?? message.line,
+    endColumn: message.endColumn ?? message.column,
+    message: message.message,
+    ruleId: message.ruleId,
+    fix: message.fix
+      ? { from: message.fix.range[0], to: message.fix.range[1], text: message.fix.text }
+      : undefined,
+  }));
+}
diff --git a/apps/playground/src/lib/monaco-quickfix.ts b/apps/playground/src/lib/monaco-quickfix.ts
new file mode 100644
index 00000000..175d6d40
--- /dev/null
+++ b/apps/playground/src/lib/monaco-quickfix.ts
@@ -0,0 +1,70 @@
+import * as monaco from "monaco-editor";
+import type { EngineDiagnostic } from "./eslint-engine";
+
+// True module scope (a .ts module, unlike a Vue <script setup> block which runs per-instance):
+// the provider is registered exactly once per page and reads per-model diagnostics, so multiple
+// editor instances neither duplicate the registration nor clobber each other's diagnostics.
+const diagnosticsByModel = new WeakMap<monaco.editor.ITextModel, EngineDiagnostic[]>();
+let registered = false;
+
+export function setModelDiagnostics(
+  model: monaco.editor.ITextModel,
+  diagnostics: EngineDiagnostic[],
+): void {
+  diagnosticsByModel.set(model, diagnostics);
+}
+
+export function registerSafeqlQuickFix(): void {
+  if (registered) {
+    return;
+  }
+  registered = true;
+
+  monaco.languages.registerCodeActionProvider("typescript", {
+    provideCodeActions(model, _range, context) {
+      const tsDiagnostics = diagnosticsByModel.get(model) ?? [];
+      const actions = context.markers.flatMap((marker) => {
+        const diagnostic = tsDiagnostics.find(
+          (entry) =>
+            entry.fix !== undefined &&
+            entry.message === marker.message &&
+            entry.line === marker.startLineNumber &&
+            entry.column === marker.startColumn,
+        );
+        if (diagnostic?.fix === undefined) {
+          return [];
+        }
+
+        const start = model.getPositionAt(diagnostic.fix.from);
+        const end = model.getPositionAt(diagnostic.fix.to);
+        return [
+          {
+            title: "SafeQL: apply suggested type annotation",
+            kind: "quickfix",
+            diagnostics: [marker],
+            isPreferred: true,
+            edit: {
+              edits: [
+                {
+                  resource: model.uri,
+                  versionId: model.getVersionId(),
+                  textEdit: {
+                    range: new monaco.Range(
+                      start.lineNumber,
+                      start.column,
+                      end.lineNumber,
+                      end.column,
+                    ),
+                    text: diagnostic.fix.text,
+                  },
+                },
+              ],
+            },
+          },
+        ];
+      });
+
+      return { actions, dispose: () => undefined };
+    },
+  });
+}
diff --git a/apps/playground/src/lib/monaco-shiki.ts b/apps/playground/src/lib/monaco-shiki.ts
new file mode 100644
index 00000000..4d50f813
--- /dev/null
+++ b/apps/playground/src/lib/monaco-shiki.ts
@@ -0,0 +1,40 @@
+import { shikiToMonaco } from "@shikijs/monaco";
+import * as monaco from "monaco-editor";
+import { createHighlighterCore } from "shiki/core";
+import { createOnigurumaEngine } from "shiki/engine/oniguruma";
+import jsonLang from "shiki/langs/json.mjs";
+import sqlLang from "shiki/langs/sql.mjs";
+import typescriptLang from "shiki/langs/typescript.mjs";
+import { safeqlDarkTheme } from "./safeql-theme";
+
+// Drive all Monaco editors with Shiki's TextMate grammars + a custom theme matching the
+// playground palette, for consistent highlighting across TypeScript / SQL / JSON. We use the
+// core API with explicit language imports rather than the full `shiki` bundle, so only the three
+// grammars we use are shipped.
+export const MONACO_THEME = safeqlDarkTheme.name as string;
+const LANGUAGES = ["typescript", "sql", "json"] as const;
+
+let setupPromise: Promise<void> | undefined;
+
+async function doSetup(): Promise<void> {
+  for (const language of LANGUAGES) {
+    monaco.languages.register({ id: language });
+  }
+  const highlighter = await createHighlighterCore({
+    themes: [safeqlDarkTheme],
+    langs: [typescriptLang, sqlLang, jsonLang],
+    engine: createOnigurumaEngine(import("shiki/wasm")),
+  });
+  shikiToMonaco(highlighter, monaco);
+}
+
+export function setupMonacoShiki(): Promise<void> {
+  // Clear the cached promise on failure so a transient init error doesn't permanently disable
+  // highlighting until a full page reload.
+  setupPromise ??= doSetup().catch((error) => {
+    setupPromise = undefined;
+    throw error;
+  });
+
+  return setupPromise;
+}
diff --git a/apps/playground/src/lib/pglite-sql.ts b/apps/playground/src/lib/pglite-sql.ts
new file mode 100644
index 00000000..dd7e3da4
--- /dev/null
+++ b/apps/playground/src/lib/pglite-sql.ts
@@ -0,0 +1,139 @@
+import type { PGlite } from "@electric-sql/pglite";
+import { PostgresError as WirePostgresError } from "../shims/postgres-errors";
+import type postgres from "postgres";
+
+type PgErrorFields = {
+  message?: string;
+  code?: string;
+  position?: string | number;
+  line?: string | number;
+  severity?: string;
+  detail?: string;
+  hint?: string;
+  schema?: string;
+  table?: string;
+  column?: string;
+};
+
+function toWirePostgresError(error: unknown): WirePostgresError {
+  if (error instanceof WirePostgresError) {
+    return error;
+  }
+
+  // Anything else (incl. PGlite's own error shape) is copied field-by-field into a real
+  // WirePostgresError rather than unsafely cast, so the downstream rule always sees its fields.
+  const fields = (error ?? {}) as PgErrorFields;
+  return new WirePostgresError({
+    message: fields.message ?? String(error),
+    code: fields.code,
+    position: fields.position,
+    line: fields.line ?? "1",
+    severity: fields.severity,
+    detail: fields.detail,
+    hint: fields.hint,
+    schema: fields.schema,
+    table: fields.table,
+    column: fields.column,
+  });
+}
+
+// The leading SQL keyword, so non-SELECT queries don't all report command: "SELECT". Known
+// limitation: a leading CTE reports "WITH" rather than the inner command — harmless here because
+// safeql's generate reads the type via sql.unsafe().describe(), which never goes through this.
+function commandOf(sql: string): string {
+  return /^\s*(\w+)/.exec(sql)?.[1]?.toUpperCase() ?? "SELECT";
+}
+
+function toRowList<T extends readonly postgres.Row[]>(
+  rows: T,
+  command = "SELECT",
+): postgres.RowList<T> {
+  const list = rows as postgres.RowList<T>;
+  list.count = rows.length;
+  list.command = command;
+  return list;
+}
+
+function describeQuery(db: PGlite, query: string): Promise<postgres.Statement> {
+  return db
+    .describeQuery(query)
+    .then((description) => ({
+      name: "",
+      string: query,
+      types: description.queryParams.map((param) => param.dataTypeID),
+      columns: description.resultFields.map((field, index) => ({
+        name: field.name,
+        type: field.dataTypeID,
+        table: 0,
+        number: index + 1,
+      })),
+    }))
+    .catch((error) => {
+      throw toWirePostgresError(error);
+    });
+}
+
+function createPendingQuery<T extends readonly postgres.Row[]>(
+  db: PGlite,
+  query: string,
+  parameters: unknown[] = [],
+): postgres.PendingQuery<T> {
+  const pending = {
+    describe(): postgres.PendingDescribeQuery {
+      return describeQuery(db, query) as postgres.PendingDescribeQuery;
+    },
+    then<TResult1 = postgres.RowList<T>, TResult2 = never>(
+      onfulfilled?: ((value: postgres.RowList<T>) => TResult1 | PromiseLike<TResult1>) | null,
+      onrejected?: ((reason: unknown) => TResult2 | PromiseLike<TResult2>) | null,
+    ) {
+      return db
+        .query(query, parameters)
+        .then((result) => toRowList(result.rows as unknown as T, commandOf(query)))
+        .catch((error) => {
+          throw toWirePostgresError(error);
+        })
+        .then(onfulfilled, onrejected);
+    },
+    // postgres.PendingQuery extends Promise, so provide catch/finally too — delegating to then
+    // keeps the thenable a complete Promise for any caller that uses them.
+    catch<TResult = never>(
+      onrejected?: ((reason: unknown) => TResult | PromiseLike<TResult>) | null,
+    ) {
+      return this.then(undefined, onrejected);
+    },
+    finally(onfinally?: (() => void) | null) {
+      return this.then(
+        (value) => {
+          onfinally?.();
+          return value;
+        },
+        (reason) => {
+          onfinally?.();
+          throw reason;
+        },
+      );
+    },
+  };
+
+  return pending as postgres.PendingQuery<T>;
+}
+
+export function createPgliteSql(db: PGlite): postgres.Sql {
+  const sql = ((strings: TemplateStringsArray, ...values: unknown[]) => {
+    return db
+      .sql(strings, ...values)
+      .then((result) => toRowList(result.rows as postgres.Row[], commandOf(strings[0] ?? "")))
+      .catch((error) => {
+        throw toWirePostgresError(error);
+      });
+  }) as postgres.Sql;
+
+  sql.unsafe = <T extends readonly postgres.Row[] = postgres.Row[]>(
+    query: string,
+    parameters?: unknown[],
+  ) => createPendingQuery<T>(db, query, parameters ?? []);
+
+  sql.end = async () => {};
+
+  return sql;
+}
diff --git a/apps/playground/src/lib/playground-config.ts b/apps/playground/src/lib/playground-config.ts
new file mode 100644
index 00000000..78fe8edd
--- /dev/null
+++ b/apps/playground/src/lib/playground-config.ts
@@ -0,0 +1,103 @@
+import type { IdentiferCase } from "@ts-safeql/shared";
+
+export interface PlaygroundConfig {
+  tag: string;
+  fieldTransform: IdentiferCase | undefined;
+  nullAsOptional: boolean;
+  nullAsUndefined: boolean;
+  overrides: { types?: Record<string, string>; columns?: Record<string, string> } | undefined;
+  skipTypeAnnotations: boolean;
+}
+
+export const DEFAULT_PLAYGROUND_CONFIG: PlaygroundConfig = {
+  tag: "sql",
+  fieldTransform: undefined,
+  nullAsOptional: false,
+  nullAsUndefined: false,
+  overrides: { types: {} },
+  skipTypeAnnotations: false,
+};
+
+const FIELD_TRANSFORMS: readonly IdentiferCase[] = ["snake", "camel", "pascal", "screaming snake"];
+
+function isRecord(value: unknown): value is Record<string, unknown> {
+  return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+
+function readTag(targets: unknown): string {
+  if (!Array.isArray(targets)) {
+    return DEFAULT_PLAYGROUND_CONFIG.tag;
+  }
+
+  for (const target of targets) {
+    // Ignore empty tags — they'd match nearly any template literal and break lint targeting.
+    if (isRecord(target) && typeof target.tag === "string" && target.tag.trim() !== "") {
+      return target.tag;
+    }
+  }
+
+  return DEFAULT_PLAYGROUND_CONFIG.tag;
+}
+
+function readFieldTransform(value: unknown): IdentiferCase | undefined {
+  return FIELD_TRANSFORMS.find((transform) => transform === value);
+}
+
+function pickStrings(record: Record<string, unknown>): Record<string, string> {
+  const result: Record<string, string> = {};
+
+  for (const [key, value] of Object.entries(record)) {
+    if (typeof value === "string") {
+      result[key] = value;
+    }
+  }
+
+  return result;
+}
+
+function readOverrides(value: unknown): PlaygroundConfig["overrides"] {
+  if (!isRecord(value)) {
+    return undefined;
+  }
+
+  return {
+    types: isRecord(value.types) ? pickStrings(value.types) : undefined,
+    columns: isRecord(value.columns) ? pickStrings(value.columns) : undefined,
+  };
+}
+
+export interface ParsedConfig {
+  config: PlaygroundConfig;
+  error?: string;
+}
+
+export function parsePlaygroundConfig(raw: string): ParsedConfig {
+  if (!raw.trim()) {
+    return { config: DEFAULT_PLAYGROUND_CONFIG };
+  }
+
+  let parsed: unknown;
+  try {
+    parsed = JSON.parse(raw);
+  } catch (error) {
+    return {
+      config: DEFAULT_PLAYGROUND_CONFIG,
+      error: `Invalid config JSON: ${error instanceof Error ? error.message : String(error)}`,
+    };
+  }
+
+  if (!isRecord(parsed)) {
+    return { config: DEFAULT_PLAYGROUND_CONFIG, error: "Config must be a JSON object" };
+  }
+
+  return {
+    config: {
+      tag: readTag(parsed.targets),
+      fieldTransform: readFieldTransform(parsed.fieldTransform),
+      nullAsOptional: parsed.nullAsOptional === true,
+      nullAsUndefined: parsed.nullAsUndefined === true,
+      overrides: readOverrides(parsed.overrides),
+      skipTypeAnnotations: parsed.skipTypeAnnotations === true,
+    },
+  };
+}
diff --git a/apps/playground/src/lib/real-lint-client.ts b/apps/playground/src/lib/real-lint-client.ts
new file mode 100644
index 00000000..3692c84d
--- /dev/null
+++ b/apps/playground/src/lib/real-lint-client.ts
@@ -0,0 +1,113 @@
+import type { EngineDiagnostic } from "./eslint-engine";
+import type { PlaygroundConfig } from "./playground-config";
+
+// Wires the lint worker (real check-sql rule, blocks on Atomics) to the DB worker (PGlite +
+// generate) through shared buffers, relaying the lint worker's generate requests to the DB
+// worker while the lint worker is blocked.
+const CONTROL_LENGTH = 2; // Int32: [latestResultSeq, byteLength]
+const DATA_BYTES = 8 * 1024 * 1024;
+
+interface PendingLint {
+  resolve: (diagnostics: EngineDiagnostic[]) => void;
+  reject: (error: Error) => void;
+}
+
+let lintWorker: Worker | undefined;
+let dbWorker: Worker | undefined;
+let nextId = 1;
+const pending = new Map<number, PendingLint>();
+
+// Tear the pipeline down on a worker crash: reject everything in flight and drop the cached
+// workers so the next lintReal rebuilds a fresh pair instead of posting to a dead worker.
+function teardown(reason: string): void {
+  for (const entry of pending.values()) {
+    entry.reject(new Error(reason));
+  }
+  pending.clear();
+  lintWorker?.terminate();
+  dbWorker?.terminate();
+  lintWorker = undefined;
+  dbWorker = undefined;
+}
+
+function ensureWorkers(): { lint: Worker } {
+  if (lintWorker !== undefined) {
+    return { lint: lintWorker };
+  }
+
+  // SharedArrayBuffer only exists under cross-origin isolation. Fail with a clear message rather
+  // than a cryptic ReferenceError when a deploy is missing the COOP/COEP headers (see vercel.json
+  // / public/_headers).
+  if (typeof SharedArrayBuffer === "undefined" || !globalThis.crossOriginIsolated) {
+    throw new Error(
+      "SafeQL playground requires cross-origin isolation. The host must send " +
+        "Cross-Origin-Opener-Policy: same-origin and Cross-Origin-Embedder-Policy: require-corp.",
+    );
+  }
+
+  const controlSab = new SharedArrayBuffer(CONTROL_LENGTH * Int32Array.BYTES_PER_ELEMENT);
+  const dataSab = new SharedArrayBuffer(DATA_BYTES);
+
+  const db = new Worker(new URL("../worker/db.worker.ts", import.meta.url), { type: "module" });
+  const lint = new Worker(new URL("../worker/real-lint.worker.ts", import.meta.url), {
+    type: "module",
+  });
+
+  // Attach handlers before init so an early message can't be missed.
+  lint.onmessage = (event: MessageEvent) => {
+    const message = event.data;
+    if (message.type === "generate-request") {
+      db.postMessage({
+        type: "generate",
+        seq: message.seq,
+        schema: message.schema,
+        request: message.request,
+      });
+      return;
+    }
+
+    const entry = pending.get(message.id);
+    if (entry === undefined) {
+      return;
+    }
+    pending.delete(message.id);
+
+    if (message.type === "result") {
+      entry.resolve(message.diagnostics);
+    } else {
+      entry.reject(new Error(message.error ?? `Unknown worker error: ${JSON.stringify(message)}`));
+    }
+  };
+
+  // Either worker crashing leaves the other half-wired and the lint worker possibly blocked on
+  // Atomics; tear the whole pipeline down so the next request starts clean.
+  lint.onerror = (event) => teardown(event.message || "Lint worker crashed");
+  db.onerror = (event) => teardown(event.message || "DB worker crashed");
+
+  db.postMessage({ type: "init", controlSab, dataSab });
+  lint.postMessage({ type: "init", controlSab, dataSab });
+
+  lintWorker = lint;
+  dbWorker = db;
+  return { lint };
+}
+
+export function lintReal(input: {
+  code: string;
+  schema: string;
+  config: PlaygroundConfig;
+}): Promise<EngineDiagnostic[]> {
+  const { lint } = ensureWorkers();
+  const id = nextId++;
+
+  return new Promise<EngineDiagnostic[]>((resolve, reject) => {
+    pending.set(id, { resolve, reject });
+    lint.postMessage({
+      type: "lint",
+      id,
+      code: input.code,
+      schema: input.schema,
+      config: input.config,
+    });
+  });
+}
diff --git a/apps/playground/src/lib/safeql-theme.ts b/apps/playground/src/lib/safeql-theme.ts
new file mode 100644
index 00000000..293e22c1
--- /dev/null
+++ b/apps/playground/src/lib/safeql-theme.ts
@@ -0,0 +1,47 @@
+import type { ThemeRegistration } from "shiki";
+
+// Dark theme matching the playground's original editor palette: near-black background, blue
+// keywords/functions, green strings, amber numbers, muted-grey comments. (hex approximations of
+// the oklch tokens, since Monaco themes require hex colors.)
+export const safeqlDarkTheme: ThemeRegistration = {
+  name: "safeql-dark",
+  type: "dark",
+  colors: {
+    "editor.background": "#0e0f12",
+    "editor.foreground": "#f3f4f6",
+    "editorLineNumber.foreground": "#4b5563",
+    "editorLineNumber.activeForeground": "#9aa0ab",
+    "editor.selectionBackground": "#1f4b73",
+    "editorCursor.foreground": "#5aa0f0",
+  },
+  tokenColors: [
+    {
+      scope: ["comment", "punctuation.definition.comment"],
+      settings: { foreground: "#8b919e", fontStyle: "italic" },
+    },
+    {
+      scope: ["keyword", "storage.type", "storage.modifier"],
+      settings: { foreground: "#5aa0f0" },
+    },
+    {
+      scope: ["string", "constant.other.database-name"],
+      settings: { foreground: "#38bd92" },
+    },
+    {
+      scope: ["constant.numeric", "constant.language"],
+      settings: { foreground: "#d8aa57" },
+    },
+    {
+      scope: ["entity.name.function", "support.function"],
+      settings: { foreground: "#5aa0f0" },
+    },
+    {
+      scope: ["variable", "entity.name.type", "support.type"],
+      settings: { foreground: "#f3f4f6" },
+    },
+    {
+      scope: ["keyword.operator", "punctuation"],
+      settings: { foreground: "#8b919e" },
+    },
+  ],
+};
diff --git a/apps/playground/src/lib/share-url.ts b/apps/playground/src/lib/share-url.ts
new file mode 100644
index 00000000..38b7fee2
--- /dev/null
+++ b/apps/playground/src/lib/share-url.ts
@@ -0,0 +1,101 @@
+export interface PlaygroundState {
+  schema: string;
+  code: string;
+  config?: string;
+}
+
+function bytesToBase64Url(bytes: Uint8Array): string {
+  // Build in chunks: per-byte string concatenation is O(n²) in some engines, and spreading the
+  // whole array into fromCharCode can blow the call-stack on large payloads.
+  const CHUNK = 0x8000;
+  let binary = "";
+  for (let i = 0; i < bytes.length; i += CHUNK) {
+    binary += String.fromCharCode(...bytes.subarray(i, i + CHUNK));
+  }
+  return btoa(binary).replace(/\+/g, "-").replace(/\//g, "_").replace(/=+$/g, "");
+}
+
+function base64UrlToBytes(encoded: string): Uint8Array {
+  const base64 = encoded.replace(/-/g, "+").replace(/_/g, "/");
+  const padding = base64.length % 4 === 0 ? "" : "=".repeat(4 - (base64.length % 4));
+  const binary = atob(base64 + padding);
+  const bytes = new Uint8Array(binary.length);
+  for (let index = 0; index < binary.length; index++) {
+    bytes[index] = binary.charCodeAt(index);
+  }
+  return bytes;
+}
+
+async function pipeThrough(
+  bytes: Uint8Array,
+  transform: GenericTransformStream,
+): Promise<Uint8Array> {
+  const stream = new Blob([bytes as BlobPart]).stream().pipeThrough(transform);
+  return new Uint8Array(await new Response(stream).arrayBuffer());
+}
+
+const supportsCompression = typeof CompressionStream !== "undefined";
+
+// Deflate before Base64 so even multi-table schemas stay well within URL-length limits. Where the
+// Compression Streams API is unavailable, fall back to uncompressed Base64; decode tries inflate
+// first and falls back to raw, so either form round-trips.
+export async function encodePlaygroundState(state: PlaygroundState): Promise<string> {
+  const json = new TextEncoder().encode(JSON.stringify(state));
+  const bytes = supportsCompression
+    ? await pipeThrough(json, new CompressionStream("deflate-raw"))
+    : json;
+  return bytesToBase64Url(bytes);
+}
+
+export async function decodePlaygroundState(encoded: string): Promise<PlaygroundState | null> {
+  try {
+    const bytes = base64UrlToBytes(encoded.trim());
+    let jsonBytes = bytes;
+    if (typeof DecompressionStream !== "undefined") {
+      // The payload may be raw (encoded without compression support); fall back to it on failure.
+      jsonBytes = await pipeThrough(bytes, new DecompressionStream("deflate-raw")).catch(
+        () => bytes,
+      );
+    }
+    const json = new TextDecoder().decode(jsonBytes);
+    const parsed: unknown = JSON.parse(json);
+
+    if (
+      typeof parsed === "object" &&
+      parsed !== null &&
+      "schema" in parsed &&
+      "code" in parsed &&
+      typeof parsed.schema === "string" &&
+      typeof parsed.code === "string"
+    ) {
+      const config =
+        "config" in parsed && typeof parsed.config === "string" ? parsed.config : undefined;
+      return { schema: parsed.schema, code: parsed.code, config };
+    }
+  } catch {
+    return null;
+  }
+
+  return null;
+}
+
+export async function readPlaygroundStateFromUrl(): Promise<PlaygroundState | null> {
+  const encoded = window.location.hash.replace(/^#/, "");
+  if (!encoded) {
+    return null;
+  }
+
+  return decodePlaygroundState(encoded);
+}
+
+export async function writePlaygroundStateToUrl(state: PlaygroundState): Promise<void> {
+  const encoded = await encodePlaygroundState(state);
+  const nextUrl = `${window.location.pathname}${window.location.search}#${encoded}`;
+  const currentHash = window.location.hash.replace(/^#/, "");
+
+  if (currentHash === encoded) {
+    return;
+  }
+
+  window.history.replaceState(null, "", nextUrl);
+}
diff --git a/apps/playground/src/lib/ts-vfs.ts b/apps/playground/src/lib/ts-vfs.ts
new file mode 100644
index 00000000..8e274ea1
--- /dev/null
+++ b/apps/playground/src/lib/ts-vfs.ts
@@ -0,0 +1,111 @@
+import ts from "typescript";
+
+// Bundle TypeScript's lib.*.d.ts locally — fetching them from a CDN would be blocked by the
+// COEP `require-corp` we need for SharedArrayBuffer.
+const libSources = import.meta.glob("/node_modules/typescript/lib/lib*.d.ts", {
+  query: "?raw",
+  import: "default",
+  eager: true,
+}) as Record<string, string>;
+
+export const PLAYGROUND_FILE = "/playground.ts";
+const PRELUDE_FILE = "/safeql-playground-prelude.d.ts";
+
+// Lib files live under node_modules so the rule's getResolvedTargetByTypeNode treats library
+// types (Date, etc.) as named references instead of expanding their members — matching a real
+// tsconfig environment (it keys off `filePath.includes("node_modules")`).
+const LIB_DIR = "/node_modules/typescript/lib";
+
+// Minimal ambient declarations so the user's `sql`/`conn.query` tagged templates type-check;
+// the real result types come from SafeQL, not these.
+const PRELUDE = `
+export {};
+declare global {
+  function sql<T = unknown>(strings: TemplateStringsArray, ...values: unknown[]): Promise<T>;
+  const conn: {
+    query<T = unknown>(promise: Promise<T> | T): Promise<T>;
+  };
+}
+`;
+
+const compilerOptions: ts.CompilerOptions = {
+  target: ts.ScriptTarget.ES2020,
+  lib: ["lib.es2020.d.ts", "lib.dom.d.ts"],
+  module: ts.ModuleKind.ESNext,
+  moduleResolution: ts.ModuleResolutionKind.Bundler,
+  strict: true,
+  skipLibCheck: true,
+  noEmit: true,
+};
+
+function buildFileMap(): Map<string, string> {
+  const map = new Map<string, string>();
+
+  for (const [filePath, content] of Object.entries(libSources)) {
+    const name = filePath.split("/").pop();
+    if (name !== undefined) {
+      map.set(`${LIB_DIR}/${name}`, content);
+    }
+  }
+
+  return map;
+}
+
+const baseFiles = buildFileMap();
+
+// The lib (and prelude) files never change between lints, so parse each one once and reuse the
+// SourceFile across calls. Only the playground file is re-parsed per keystroke. This — together
+// with the oldProgram hint below — lets TypeScript skip re-parsing the large lib.*.d.ts files on
+// every debounced lint.
+const sourceFileCache = new Map<string, ts.SourceFile>();
+
+function createHost(fsMap: Map<string, string>): ts.CompilerHost {
+  return {
+    fileExists: (fileName) => fsMap.has(fileName),
+    readFile: (fileName) => fsMap.get(fileName),
+    getSourceFile: (fileName, languageVersion) => {
+      const content = fsMap.get(fileName);
+      if (content === undefined) {
+        return undefined;
+      }
+      if (fileName === PLAYGROUND_FILE) {
+        return ts.createSourceFile(fileName, content, languageVersion, true);
+      }
+      let sourceFile = sourceFileCache.get(fileName);
+      if (sourceFile === undefined) {
+        sourceFile = ts.createSourceFile(fileName, content, languageVersion, true);
+        sourceFileCache.set(fileName, sourceFile);
+      }
+      return sourceFile;
+    },
+    getDefaultLibFileName: (options) => `${LIB_DIR}/${ts.getDefaultLibFileName(options)}`,
+    getDefaultLibLocation: () => LIB_DIR,
+    writeFile: () => undefined,
+    getCurrentDirectory: () => "/",
+    getCanonicalFileName: (fileName) => fileName,
+    useCaseSensitiveFileNames: () => true,
+    getNewLine: () => "\n",
+    getDirectories: () => [],
+    readDirectory: () => [],
+  };
+}
+
+export interface TsProgramResult {
+  program: ts.Program;
+  filename: string;
+}
+
+export function createTsProgram(code: string, oldProgram?: ts.Program): TsProgramResult {
+  const fsMap = new Map(baseFiles);
+  fsMap.set(PRELUDE_FILE, PRELUDE);
+  fsMap.set(PLAYGROUND_FILE, code);
+
+  const program = ts.createProgram({
+    rootNames: [PRELUDE_FILE, PLAYGROUND_FILE],
+    options: compilerOptions,
+    host: createHost(fsMap),
+    oldProgram,
+  });
+
+  return { program, filename: PLAYGROUND_FILE };
+}
diff --git a/apps/playground/src/main.ts b/apps/playground/src/main.ts
new file mode 100644
index 00000000..de275e7a
--- /dev/null
+++ b/apps/playground/src/main.ts
@@ -0,0 +1,5 @@
+import { createApp } from "vue";
+import App from "./App.vue";
+import "./style.css";
+
+createApp(App).mount("#app");
diff --git a/apps/playground/src/postgres-socket.d.ts b/apps/playground/src/postgres-socket.d.ts
new file mode 100644
index 00000000..08019ae3
--- /dev/null
+++ b/apps/playground/src/postgres-socket.d.ts
@@ -0,0 +1,7 @@
+import "postgres";
+
+declare module "postgres" {
+  interface Options<T extends Record<string, postgres.PostgresType>> {
+    socket?: (options: Options<T>) => Promise<unknown>;
+  }
+}
diff --git a/apps/playground/src/shims/eslint-browser.ts b/apps/playground/src/shims/eslint-browser.ts
new file mode 100644
index 00000000..b1490cf2
--- /dev/null
+++ b/apps/playground/src/shims/eslint-browser.ts
@@ -0,0 +1,25 @@
+// Browser replacement for the `eslint` barrel. Re-exports the real browser Linter and provides
+// version-bearing stubs for the classes @typescript-eslint/utils references at module load
+// (ESLint / LegacyESLint / RuleTester / SourceCode) — none of which we actually use.
+import { Linter } from "eslint-linter-browserify";
+
+// @typescript-eslint/utils only reads ESLint.version for a compatibility gate. Report the version
+// of the browser Linter that actually runs so the two can't drift, falling back to its major.
+const version: string = (Linter as unknown as { version?: string }).version ?? "10.0.0";
+
+class ESLint {
+  static version = version;
+}
+
+class LegacyESLint {
+  static version = version;
+}
+
+class RuleTester {}
+class SourceCode {}
+
+export const builtinRules = new Map<string, unknown>();
+
+export { Linter, ESLint, LegacyESLint, RuleTester, SourceCode, version };
+
+export default { Linter, ESLint, LegacyESLint, RuleTester, SourceCode, version, builtinRules };
diff --git a/apps/playground/src/shims/eslint-unsupported.ts b/apps/playground/src/shims/eslint-unsupported.ts
new file mode 100644
index 00000000..8549ecee
--- /dev/null
+++ b/apps/playground/src/shims/eslint-unsupported.ts
@@ -0,0 +1,13 @@
+// Stub for `eslint/use-at-your-own-risk`. @typescript-eslint/utils imports the FlatESLint /
+// LegacyESLint classes from here at module load; we only use the Linter, so empty stubs avoid
+// loading eslint's node-coupled ESLint class (fs globbing, glob-parent).
+export const builtinRules = new Map<string, unknown>();
+
+export class FlatESLint {}
+export class LegacyESLint {}
+
+export function shouldUseFlatConfig(): boolean {
+  return true;
+}
+
+export default { builtinRules, FlatESLint, LegacyESLint, shouldUseFlatConfig };
diff --git a/apps/playground/src/shims/libpg-query.ts b/apps/playground/src/shims/libpg-query.ts
new file mode 100644
index 00000000..93fe18a1
--- /dev/null
+++ b/apps/playground/src/shims/libpg-query.ts
@@ -0,0 +1,123 @@
+// @ts-expect-error Emscripten bundle has no types.
+import PgQueryModule from "virtual:libpg-query-emscripten";
+import wasmUrl from "libpg-query/wasm/libpg-query.wasm?url";
+
+interface WasmModule {
+  lengthBytesUTF8: (value: string) => number;
+  _malloc: (size: number) => number;
+  _free: (ptr: number) => void;
+  stringToUTF8: (value: string, ptr: number, maxBytes: number) => void;
+  UTF8ToString: (ptr: number) => string;
+  _wasm_parse_query: (queryPtr: number) => number;
+  _wasm_free_string: (ptr: number) => void;
+}
+
+let wasmModule: WasmModule | undefined;
+let initPromise: Promise<void> | undefined;
+
+// Lazy, self-clearing: a transient WASM load failure (network/CSP) clears the cached promise so
+// the next call retries instead of failing permanently until a page reload.
+function init(): Promise<void> {
+  if (initPromise) {
+    return initPromise;
+  }
+  const promise = PgQueryModule({
+    locateFile: (path: string) => (path.endsWith(".wasm") ? wasmUrl : path),
+  })
+    .then((module: WasmModule) => {
+      wasmModule = module;
+    })
+    .catch((error: unknown) => {
+      initPromise = undefined;
+      throw error;
+    });
+  initPromise = promise;
+  return promise;
+}
+
+function ensureLoaded() {
+  if (!wasmModule) {
+    throw new Error("WASM module not initialized. Call `loadModule()` first.");
+  }
+}
+
+export async function loadModule() {
+  if (!wasmModule) {
+    await init();
+  }
+}
+
+function awaitInit<T extends (...args: never[]) => unknown>(fn: T) {
+  return (async (...args: Parameters<T>) => {
+    await init();
+    return fn(...args);
+  }) as T;
+}
+
+function stringToPtr(str: string) {
+  ensureLoaded();
+  const len = wasmModule!.lengthBytesUTF8(str) + 1;
+  const ptr = wasmModule!._malloc(len);
+  try {
+    wasmModule!.stringToUTF8(str, ptr, len);
+    return ptr;
+  } catch (error) {
+    wasmModule!._free(ptr);
+    throw error;
+  }
+}
+
+function ptrToString(ptr: number) {
+  ensureLoaded();
+  return wasmModule!.UTF8ToString(ptr);
+}
+
+export const parse = awaitInit(async (query: string) => {
+  const queryPtr = stringToPtr(query);
+  let resultPtr = 0;
+  try {
+    resultPtr = wasmModule!._wasm_parse_query(queryPtr);
+    if (resultPtr === 0) {
+      throw new Error("libpg-query: parse returned a null pointer");
+    }
+    const resultStr = ptrToString(resultPtr);
+    if (
+      resultStr.startsWith("syntax error") ||
+      resultStr.startsWith("deparse error") ||
+      resultStr.startsWith("ERROR")
+    ) {
+      throw new Error(resultStr);
+    }
+    return JSON.parse(resultStr);
+  } finally {
+    wasmModule!._free(queryPtr);
+    if (resultPtr) {
+      wasmModule!._wasm_free_string(resultPtr);
+    }
+  }
+});
+
+export function parseSync(query: string) {
+  const queryPtr = stringToPtr(query);
+  let resultPtr = 0;
+  try {
+    resultPtr = wasmModule!._wasm_parse_query(queryPtr);
+    if (resultPtr === 0) {
+      throw new Error("libpg-query: parse returned a null pointer");
+    }
+    const resultStr = ptrToString(resultPtr);
+    if (
+      resultStr.startsWith("syntax error") ||
+      resultStr.startsWith("deparse error") ||
+      resultStr.startsWith("ERROR")
+    ) {
+      throw new Error(resultStr);
+    }
+    return JSON.parse(resultStr);
+  } finally {
+    wasmModule!._free(queryPtr);
+    if (resultPtr) {
+      wasmModule!._wasm_free_string(resultPtr);
+    }
+  }
+}
diff --git a/apps/playground/src/shims/node-crypto.ts b/apps/playground/src/shims/node-crypto.ts
new file mode 100644
index 00000000..1f638623
--- /dev/null
+++ b/apps/playground/src/shims/node-crypto.ts
@@ -0,0 +1,26 @@
+// Stub for `crypto`. Only used by the rule's migrations path (sha1 of the migrations dir),
+// which the browser playground never reaches.
+const hasher = {
+  update: () => hasher,
+  digest: () => "00000000",
+};
+
+const cryptoLike = {
+  createHash: () => hasher,
+  // Delegate to the Web Crypto API so distinct calls get distinct ids (the constant fallback is
+  // only for environments without it).
+  randomUUID: () =>
+    typeof crypto !== "undefined" && typeof crypto.randomUUID === "function"
+      ? crypto.randomUUID()
+      : // Fallback for environments without Web Crypto — not cryptographically strong, but unique
+        // enough for the rule's cache keys (which is all this shim feeds).
+        "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, (char) => {
+          const random = (Math.random() * 16) | 0;
+          const value = char === "x" ? random : (random & 0x3) | 0x8;
+          return value.toString(16);
+        }),
+};
+
+export const createHash = cryptoLike.createHash;
+export const randomUUID = cryptoLike.randomUUID;
+export default cryptoLike;
diff --git a/apps/playground/src/shims/node-empty.ts b/apps/playground/src/shims/node-empty.ts
new file mode 100644
index 00000000..e92000b0
--- /dev/null
+++ b/apps/playground/src/shims/node-empty.ts
@@ -0,0 +1,34 @@
+// Stub for `fs` / `module`. The check-sql rule imports these at module load but only calls
+// into them on the migrations path, which the browser playground never takes (databaseUrl only).
+const noop = () => undefined;
+
+const stat = {
+  isFile: () => false,
+  isDirectory: () => false,
+  isSymbolicLink: () => false,
+};
+
+const fsLike = {
+  readdirSync: () => [] as string[],
+  statSync: () => stat,
+  lstatSync: () => stat,
+  // Report package.json as present so the rule's locateNearestPackageJsonDir (which walks up
+  // until it finds one and has no root guard) terminates at the virtual file's directory.
+  existsSync: (filePath: string) =>
+    typeof filePath === "string" && filePath.endsWith("package.json"),
+  readFileSync: () => "",
+  realpathSync: (filePath: string) => filePath,
+  promises: { readFile: async () => "", stat: async () => stat, readdir: async () => [] },
+  createRequire: () => () => ({}),
+};
+
+export const promises = fsLike.promises;
+export const readdirSync = fsLike.readdirSync;
+export const statSync = fsLike.statSync;
+export const lstatSync = fsLike.lstatSync;
+export const existsSync = fsLike.existsSync;
+export const readFileSync = fsLike.readFileSync;
+export const realpathSync = fsLike.realpathSync;
+export const createRequire = fsLike.createRequire;
+export { noop };
+export default fsLike;
diff --git a/apps/playground/src/shims/node-globals.ts b/apps/playground/src/shims/node-globals.ts
new file mode 100644
index 00000000..757a3d76
--- /dev/null
+++ b/apps/playground/src/shims/node-globals.ts
@@ -0,0 +1,38 @@
+// ESLint / jiti / typescript-eslint reference node globals (`process`, `global`) at module
+// load. Provide minimal browser polyfills before any of them is imported.
+const nodeProcess = {
+  // TypeScript checks `process.browser` to pick its browser sys instead of getNodeSystem
+  // (which would call into a real filesystem at module load).
+  browser: true,
+  env: { NODE_ENV: "production" } as Record<string, string>,
+  platform: "browser",
+  arch: "wasm",
+  argv: [] as string[],
+  cwd: () => "/",
+  version: "",
+  versions: { node: "" } as Record<string, string>,
+  nextTick: (callback: () => void) => queueMicrotask(callback),
+  stdout: { write: () => true },
+  stderr: { write: () => true },
+};
+
+const globals = globalThis as Record<string, unknown>;
+
+if (globals.process === undefined) {
+  globals.process = nodeProcess;
+}
+
+if (globals.global === undefined) {
+  globals.global = globalThis;
+}
+
+// Some CJS deps reference these module globals; an unqualified read resolves to globalThis.
+if (globals.__filename === undefined) {
+  globals.__filename = "/index.js";
+}
+
+if (globals.__dirname === undefined) {
+  globals.__dirname = "/";
+}
+
+export {};
diff --git a/apps/playground/src/shims/node-os.ts b/apps/playground/src/shims/node-os.ts
new file mode 100644
index 00000000..75bb39cd
--- /dev/null
+++ b/apps/playground/src/shims/node-os.ts
@@ -0,0 +1,24 @@
+// Minimal `os` polyfill. typescript / typescript-eslint probe os.platform / EOL at load.
+export function platform(): string {
+  return "browser";
+}
+
+export function homedir(): string {
+  return "/";
+}
+
+export function tmpdir(): string {
+  return "/tmp";
+}
+
+export function cpus(): unknown[] {
+  return [];
+}
+
+export function release(): string {
+  return "";
+}
+
+export const EOL = "\n";
+
+export default { platform, homedir, tmpdir, cpus, release, EOL };
diff --git a/apps/playground/src/shims/node-url.ts b/apps/playground/src/shims/node-url.ts
new file mode 100644
index 00000000..458418db
--- /dev/null
+++ b/apps/playground/src/shims/node-url.ts
@@ -0,0 +1,14 @@
+// Stub for `node:url`. The rule's worker loader calls fileURLToPath to locate the worker
+// file on disk; in the browser the worker is never loaded that way (synckit is shimmed).
+export function fileURLToPath(url: string | URL): string {
+  const value = String(url);
+  // Extract the bare path from a file:// URL (e.g. "file:///foo" → "/foo"); pass through anything
+  // that isn't a file URL unchanged.
+  return value.startsWith("file:") ? new URL(value).pathname : value;
+}
+
+export function pathToFileURL(value: string): URL {
+  return new URL(`file://${value}`);
+}
+
+export default { fileURLToPath, pathToFileURL };
diff --git a/apps/playground/src/shims/node-util.ts b/apps/playground/src/shims/node-util.ts
new file mode 100644
index 00000000..7b4955b5
--- /dev/null
+++ b/apps/playground/src/shims/node-util.ts
@@ -0,0 +1,30 @@
+// Minimal `util` polyfill.
+type Callback = (error: unknown, value?: unknown) => void;
+
+export function promisify<T>(fn: (...args: unknown[]) => void): (...args: unknown[]) => Promise<T> {
+  return (...args: unknown[]) =>
+    new Promise<T>((resolve, reject) => {
+      fn(...args, ((error: unknown, value: unknown) => {
+        if (error) reject(error);
+        else resolve(value as T);
+      }) as Callback);
+    });
+}
+
+export function inherits(ctor: { prototype: object }, superCtor: { prototype: object }): void {
+  Object.setPrototypeOf(ctor.prototype, superCtor.prototype);
+}
+
+export function inspect(value: unknown): string {
+  return String(value);
+}
+
+export function format(...args: unknown[]): string {
+  return args.map((arg) => (typeof arg === "string" ? arg : inspect(arg))).join(" ");
+}
+
+export const TextEncoder = globalThis.TextEncoder;
+export const TextDecoder = globalThis.TextDecoder;
+export const types = { isUint8Array: (value: unknown) => value instanceof Uint8Array };
+
+export default { promisify, inherits, inspect, format, TextEncoder, TextDecoder, types };
diff --git a/apps/playground/src/shims/path-stub.ts b/apps/playground/src/shims/path-stub.ts
new file mode 100644
index 00000000..a0bbc7dc
--- /dev/null
+++ b/apps/playground/src/shims/path-stub.ts
@@ -0,0 +1,104 @@
+// Minimal POSIX `path` polyfill for the browser. The rule + eslint touch a handful of path
+// helpers at load/lint time; full Node semantics aren't needed (no real filesystem here).
+export function basename(filePath: string, ext?: string): string {
+  if (filePath === "/") {
+    return "/";
+  }
+  // Strip trailing slashes first, like Node, so basename("/foo/bar/") is "bar".
+  const parts = (filePath.replace(/\/+$/, "") || filePath).split(/[/\\]/);
+  const base = parts[parts.length - 1] ?? "";
+  return ext && base.endsWith(ext) ? base.slice(0, -ext.length) : base;
+}
+
+export function normalize(filePath: string): string {
+  const isAbsolutePath = filePath.startsWith("/");
+  const parts: string[] = [];
+
+  for (const part of filePath.split("/")) {
+    if (part === "" || part === ".") continue;
+    if (part === "..") {
+      if (parts.length > 0 && parts[parts.length - 1] !== "..") parts.pop();
+      else if (!isAbsolutePath) parts.push("..");
+    } else {
+      parts.push(part);
+    }
+  }
+
+  const joined = (isAbsolutePath ? "/" : "") + parts.join("/");
+  return joined === "" ? (isAbsolutePath ? "/" : ".") : joined;
+}
+
+export function dirname(filePath: string): string {
+  if (filePath === "") return ".";
+
+  let normalized = filePath;
+  while (normalized.length > 1 && normalized.endsWith("/")) {
+    normalized = normalized.slice(0, -1);
+  }
+
+  const index = normalized.lastIndexOf("/");
+  if (index === -1) return ".";
+  if (index === 0) return "/"; // covers "/" and "/file" → "/"
+  return normalized.slice(0, index);
+}
+
+export function extname(filePath: string): string {
+  const base = basename(filePath);
+  const index = base.lastIndexOf(".");
+  return index > 0 ? base.slice(index) : "";
+}
+
+export function join(...segments: string[]): string {
+  return normalize(segments.filter((segment) => segment.length > 0).join("/"));
+}
+
+export function resolve(...segments: string[]): string {
+  let resolved = "";
+  for (const segment of segments) {
+    resolved = segment.startsWith("/") ? segment : `${resolved}/${segment}`;
+  }
+  return normalize(resolved.startsWith("/") ? resolved : `/${resolved}`);
+}
+
+export function isAbsolute(filePath: string): boolean {
+  return filePath.startsWith("/");
+}
+
+export function relative(from: string, to: string): string {
+  const fromParts = from.split("/").filter(Boolean);
+  const toParts = to.split("/").filter(Boolean);
+
+  let common = 0;
+  while (
+    common < fromParts.length &&
+    common < toParts.length &&
+    fromParts[common] === toParts[common]
+  ) {
+    common++;
+  }
+
+  const up = fromParts.slice(common).map(() => "..");
+  const rel = [...up, ...toParts.slice(common)].join("/");
+  // Match Node: identical paths are ".", not "" (callers use the result as a truthy "differs" check).
+  return rel === "" ? "." : rel;
+}
+
+export const sep = "/";
+export const delimiter = ":";
+
+const path = {
+  basename,
+  normalize,
+  dirname,
+  extname,
+  join,
+  resolve,
+  isAbsolute,
+  relative,
+  sep,
+  delimiter,
+};
+
+export const posix = path;
+export const win32 = path;
+export default path;
diff --git a/apps/playground/src/shims/postgres-errors.ts b/apps/playground/src/shims/postgres-errors.ts
new file mode 100644
index 00000000..7662da09
--- /dev/null
+++ b/apps/playground/src/shims/postgres-errors.ts
@@ -0,0 +1,18 @@
+/** Minimal postgres.js PostgresError compatible with @ts-safeql/shared isPostgresError */
+export class PostgresError extends Error {
+  code?: string;
+  position?: string | number;
+  line?: string | number;
+  severity?: string;
+  detail?: string;
+  hint?: string;
+  schema?: string;
+  table?: string;
+  column?: string;
+
+  constructor(fields: Record<string, unknown> & { message: string }) {
+    super(fields.message);
+    this.name = "PostgresError";
+    Object.assign(this, fields);
+  }
+}
diff --git a/apps/playground/src/shims/postgres.ts b/apps/playground/src/shims/postgres.ts
new file mode 100644
index 00000000..d68f1e0c
--- /dev/null
+++ b/apps/playground/src/shims/postgres.ts
@@ -0,0 +1,10 @@
+import { PostgresError } from "./postgres-errors";
+
+function postgres(): never {
+  throw new Error("postgres() is not available in the browser playground");
+}
+
+postgres.PostgresError = PostgresError;
+
+export { PostgresError };
+export default postgres;
diff --git a/apps/playground/src/shims/synckit.ts b/apps/playground/src/shims/synckit.ts
new file mode 100644
index 00000000..3c8dff73
--- /dev/null
+++ b/apps/playground/src/shims/synckit.ts
@@ -0,0 +1,33 @@
+// Browser replacement for `synckit`. The real plugin uses synckit to call the async
+// `generate` worker synchronously from inside the (sync) ESLint rule. In the browser we
+// bridge to a worker via SharedArrayBuffer + Atomics — see installGenerateBridge below.
+//
+// Contract: the rule reads the worker result via `flow(generateSync, E.chain(J.parse), ...)`,
+// so generateSync must return an fp-ts Either *object* whose Right holds the JSON string of
+// the inner Either<WorkerError, GenerateResult> (mirroring the worker's `J.stringify(result)`).
+
+type SyncFn = (...args: unknown[]) => unknown;
+
+// Inner Either<WorkerError, GenerateResult>, JSON-stringified. Empty = a query with no columns.
+const EMPTY_INNER = JSON.stringify({
+  _tag: "Right",
+  right: { output: null, unknownColumns: [], stmt: {}, query: { text: "", sourcemaps: [] } },
+});
+
+// Returns the inner Either JSON string for the given worker args (or undefined to fall back).
+let bridge: ((args: unknown[]) => string) | undefined;
+
+export function installGenerateBridge(fn: (args: unknown[]) => string): void {
+  bridge = fn;
+}
+
+export function createSyncFn<T extends SyncFn>(): T {
+  return ((...args: unknown[]) => {
+    const innerJson = bridge ? bridge(args) : EMPTY_INNER;
+    return { _tag: "Right", right: innerJson };
+  }) as T;
+}
+
+export function runAsWorker(): void {
+  // No-op: the worker body never executes in the browser.
+}
diff --git a/apps/playground/src/style.css b/apps/playground/src/style.css
new file mode 100644
index 00000000..b1118630
--- /dev/null
+++ b/apps/playground/src/style.css
@@ -0,0 +1,269 @@
+:root {
+  --background: oklch(0.13 0.004 250);
+  --foreground: oklch(0.965 0.003 250);
+  --card: oklch(0.158 0.004 250);
+  --muted: oklch(0.225 0.005 250);
+  --muted-foreground: oklch(0.66 0.012 250);
+  --border: oklch(0.255 0.006 250);
+  --brand: oklch(0.74 0.12 240);
+  --brand-soft: oklch(0.74 0.12 240 / 0.14);
+  --chart-fail: oklch(0.64 0.15 25);
+  --chart-warn: oklch(0.76 0.1 80);
+  --chart-pass: oklch(0.7 0.11 158);
+  --font-sans: "Geist", "Geist Fallback", ui-sans-serif, system-ui, sans-serif;
+  --font-mono: "Geist Mono", ui-monospace, monospace;
+  --text-label: 11px;
+  --text-meta: 12px;
+  --text-body: 13px;
+  --text-title: 14px;
+  --tracking-label: 0.08em;
+  color-scheme: dark;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+html,
+body,
+#app {
+  height: 100%;
+  margin: 0;
+}
+
+body {
+  font-family: var(--font-sans);
+  font-size: var(--text-body);
+  line-height: 1.5;
+  background: var(--background);
+  color: var(--foreground);
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+}
+
+.playground {
+  display: grid;
+  grid-template-rows: auto 1fr;
+  height: 100%;
+}
+
+.header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px 16px;
+  border-bottom: 1px solid var(--border);
+  background: var(--card);
+}
+
+.header h1 {
+  font-size: var(--text-title);
+  margin: 0;
+  font-weight: 600;
+  letter-spacing: -0.01em;
+}
+
+.header-actions {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.share-button {
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  background: var(--muted);
+  color: var(--foreground);
+  font-family: var(--font-mono);
+  font-size: var(--text-label);
+  letter-spacing: 0.01em;
+  padding: 5px 12px;
+  cursor: pointer;
+  transition: border-color 0.12s ease, background 0.12s ease;
+}
+
+.share-button:hover {
+  border-color: var(--brand);
+  background: var(--brand-soft);
+}
+
+.share-button:focus-visible {
+  outline: 2px solid var(--brand);
+  outline-offset: 2px;
+}
+
+.status {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-family: var(--font-mono);
+  font-size: var(--text-label);
+  color: var(--muted-foreground);
+}
+
+.status-dot {
+  width: 7px;
+  height: 7px;
+  border-radius: 50%;
+  background: currentColor;
+  flex: none;
+}
+
+.status-ok {
+  color: var(--chart-pass);
+}
+
+.status-error {
+  color: var(--chart-fail);
+}
+
+.status-neutral {
+  color: var(--muted-foreground);
+}
+
+.panels {
+  display: flex;
+  min-height: 0;
+  min-width: 0;
+}
+
+.panel {
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  min-width: 0;
+  background: var(--background);
+  overflow: hidden;
+}
+
+.panel-column {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  min-height: 0;
+  overflow: hidden;
+}
+
+.panel-header {
+  padding: 8px 12px;
+  font-family: var(--font-mono);
+  font-size: var(--text-label);
+  font-weight: 500;
+  text-transform: uppercase;
+  letter-spacing: var(--tracking-label);
+  color: var(--muted-foreground);
+  border-bottom: 1px solid var(--border);
+  background: var(--card);
+}
+
+.panel-header.header-error {
+  color: var(--chart-fail);
+}
+
+.splitter {
+  flex: 0 0 5px;
+  cursor: col-resize;
+  background: var(--border);
+  touch-action: none;
+}
+
+.splitter-h {
+  cursor: row-resize;
+}
+
+.splitter:hover,
+.panels.dragging .splitter {
+  background: var(--brand);
+}
+
+.panels.dragging {
+  user-select: none;
+  cursor: col-resize;
+}
+
+.editor-wrap {
+  flex: 1;
+  min-height: 0;
+  overflow: hidden;
+}
+
+.config-error {
+  margin: 0;
+  padding: 10px 12px;
+  font-family: var(--font-mono);
+  font-size: var(--text-meta);
+  color: var(--chart-fail);
+  background: oklch(0.64 0.15 25 / 0.1);
+  border-bottom: 1px solid var(--border);
+  white-space: pre-wrap;
+}
+
+.errors {
+  overflow: auto;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+.error-card {
+  border-bottom: 1px solid var(--border);
+  border-left: 3px solid var(--chart-fail);
+  background: var(--card);
+  padding: 10px 12px;
+}
+
+.error-meta {
+  font-family: var(--font-mono);
+  font-size: var(--text-label);
+  color: var(--muted-foreground);
+  margin-bottom: 8px;
+}
+
+.error-plain {
+  white-space: pre-wrap;
+  font-family: var(--font-mono);
+  font-size: var(--text-meta);
+  line-height: 1.55;
+  margin: 0;
+}
+
+.empty {
+  color: var(--muted-foreground);
+  font-family: var(--font-mono);
+  font-size: var(--text-meta);
+  padding: 24px 12px;
+}
+
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  background: oklch(0.28 0 0);
+  border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: oklch(0.35 0 0);
+}
+
+@media (max-width: 1100px) {
+  .panels {
+    flex-direction: column;
+    overflow: auto;
+  }
+
+  .panel {
+    border-bottom: 1px solid var(--border);
+    min-height: 240px;
+  }
+
+  .splitter {
+    display: none;
+  }
+}
diff --git a/apps/playground/src/worker/db.worker.ts b/apps/playground/src/worker/db.worker.ts
new file mode 100644
index 00000000..93fedb4f
--- /dev/null
+++ b/apps/playground/src/worker/db.worker.ts
@@ -0,0 +1,144 @@
+import { createGenerator, type GenerateParams } from "@ts-safeql/generate";
+import { PGlite } from "@electric-sql/pglite";
+import { either } from "fp-ts";
+import { loadModule as loadLibPgQuery } from "libpg-query";
+import { createPgliteSql } from "../lib/pglite-sql";
+
+// Runs the real PGlite-backed `generate` and hands results back to the (blocked) lint worker
+// through a SharedArrayBuffer: write the JSON, set [1]=length and [0]=1, then notify.
+interface InitMessage {
+  type: "init";
+  controlSab: SharedArrayBuffer;
+  dataSab: SharedArrayBuffer;
+}
+
+interface GenerateMessage {
+  type: "generate";
+  seq: number;
+  schema: string;
+  request: {
+    query: GenerateParams["query"];
+    target?: { fieldTransform?: GenerateParams["fieldTransform"] };
+    connection?: { overrides?: GenerateParams["overrides"] };
+  };
+}
+
+const RESET_SCHEMA_SQL = `
+DROP SCHEMA IF EXISTS public CASCADE;
+CREATE SCHEMA public;
+GRANT ALL ON SCHEMA public TO postgres;
+GRANT ALL ON SCHEMA public TO public;
+`;
+
+const generator = createGenerator();
+
+let control: Int32Array | undefined;
+let data: Uint8Array | undefined;
+let db: PGlite | undefined;
+let initPromise: Promise<PGlite> | undefined;
+let lastSchema = "";
+let schemaVersion = 0;
+
+async function getDb(): Promise<PGlite> {
+  initPromise ??= PGlite.create();
+  try {
+    db = await initPromise;
+    await db.waitReady;
+  } catch (error) {
+    // Don't cache a failed init (create or waitReady) — let the next request retry.
+    initPromise = undefined;
+    throw error;
+  }
+  return db;
+}
+
+async function ensureSchema(schema: string): Promise<PGlite> {
+  const database = await getDb();
+  if (schema === lastSchema) {
+    return database;
+  }
+  await database.exec(RESET_SCHEMA_SQL);
+  // The DB is now empty; bump the version and clear lastSchema first so that if exec(schema)
+  // throws, a later request with the same schema still reloads instead of running against an
+  // empty database. Drop the previous generation's cache so it doesn't grow per schema edit.
+  lastSchema = "";
+  generator.dropCacheKey(`playground:${schemaVersion}`);
+  schemaVersion += 1;
+  if (schema.trim()) {
+    await database.exec(schema);
+  }
+  lastSchema = schema;
+  return database;
+}
+
+function writeResult(innerJson: string, seq: number): void {
+  if (control === undefined || data === undefined) {
+    return;
+  }
+  let bytes = new TextEncoder().encode(innerJson);
+  // The result has to fit the shared buffer. Truncating would corrupt the JSON the lint worker
+  // parses, so on overflow send a well-formed error instead of garbage.
+  if (bytes.length > data.length) {
+    bytes = new TextEncoder().encode(
+      JSON.stringify({
+        _tag: "Left",
+        left: { _tag: "InternalError", message: "Result exceeds the playground's transfer buffer" },
+      }),
+    );
+  }
+  data.set(bytes);
+  Atomics.store(control, 1, bytes.length);
+  // Publish length before seq: the lint worker keys on control[0] === its seq, so by the time it
+  // sees the seq the length and bytes are already in place.
+  Atomics.store(control, 0, seq);
+  Atomics.notify(control, 0);
+}
+
+async function handleGenerate(message: GenerateMessage): Promise<void> {
+  try {
+    // Call inline (not a cached module-level promise) so libpg-query's self-clearing init can
+    // retry a transient WASM load failure instead of being stuck on a permanently rejected one.
+    await loadLibPgQuery();
+    const database = await ensureSchema(message.schema);
+    const sql = createPgliteSql(database);
+    const result = await generator.generate({
+      sql,
+      query: message.request.query,
+      cacheKey: `playground:${schemaVersion}`,
+      fieldTransform: message.request.target?.fieldTransform,
+      overrides: message.request.connection?.overrides,
+    });
+
+    const inner = either.isLeft(result)
+      ? { _tag: "Left", left: result.left }
+      : { _tag: "Right", right: result.right };
+    writeResult(JSON.stringify(inner), message.seq);
+  } catch (error) {
+    writeResult(
+      JSON.stringify({
+        _tag: "Left",
+        left: {
+          _tag: "InternalError",
+          message: error instanceof Error ? error.message : `${error}`,
+        },
+      }),
+      message.seq,
+    );
+  }
+}
+
+// The lint worker blocks on Atomics until each result is written, so only one request is ever
+// outstanding. We still chain them to guarantee a single writer to the shared buffer regardless.
+let queue: Promise<void> = Promise.resolve();
+
+self.onmessage = (event: MessageEvent<InitMessage | GenerateMessage>) => {
+  const message = event.data;
+  if (message.type === "init") {
+    control = new Int32Array(message.controlSab);
+    data = new Uint8Array(message.dataSab);
+    return;
+  }
+  // handleGenerate writes its own errors to the buffer; the catch only keeps an unexpected
+  // rejection from poisoning the queue and dropping every later request.
+  queue = queue.then(() => handleGenerate(message)).catch(() => {});
+};
diff --git a/apps/playground/src/worker/real-lint.worker.ts b/apps/playground/src/worker/real-lint.worker.ts
new file mode 100644
index 00000000..e6a43788
--- /dev/null
+++ b/apps/playground/src/worker/real-lint.worker.ts
@@ -0,0 +1,103 @@
+import "../shims/node-globals";
+import { installGenerateBridge } from "../shims/synckit";
+import { lintWithRealRule, type EngineDiagnostic } from "../lib/eslint-engine";
+import type { PlaygroundConfig } from "../lib/playground-config";
+
+// Runs the real check-sql rule. When the rule asks `generate` for a query, post the request to
+// the main thread (which relays it to the DB worker) and block on Atomics.wait until the DB
+// worker writes the result into the shared buffer.
+interface InitMessage {
+  type: "init";
+  controlSab: SharedArrayBuffer;
+  dataSab: SharedArrayBuffer;
+}
+
+interface LintMessage {
+  type: "lint";
+  id: number;
+  code: string;
+  schema: string;
+  config: PlaygroundConfig;
+}
+
+// Generous ceiling for a whole lint run — covers first-call PGlite WASM init + schema load while
+// bounding a stuck DB worker. It's a per-run budget shared across every query in the file (set in
+// runLint), so a file with many queries can't block the worker for N × the timeout.
+const GENERATE_TIMEOUT_MS = 30_000;
+
+let control: Int32Array | undefined;
+let data: Uint8Array | undefined;
+let currentSchema = "";
+let requestSeq = 0;
+let lintDeadline = 0;
+
+function timedOutResult(): string {
+  return JSON.stringify({
+    _tag: "Left",
+    left: { _tag: "InternalError", message: "Timed out waiting for the database worker" },
+  });
+}
+
+installGenerateBridge((args) => {
+  if (control === undefined || data === undefined) {
+    // Unreachable in practice (init is processed before any lint), but surface it as an error
+    // rather than a fake-empty success that could mask an ordering bug.
+    return JSON.stringify({
+      _tag: "Left",
+      left: { _tag: "InternalError", message: "Generate bridge not initialized" },
+    });
+  }
+
+  // Keep seq within Int32Array's positive range (it's stored into control[0]) and never 0, which
+  // is the "no result yet" sentinel — so it stays correct past ~2³¹ generate calls in a session.
+  requestSeq = (requestSeq % 0x7fffffff) + 1;
+  const seq = requestSeq;
+  self.postMessage({ type: "generate-request", seq, schema: currentSchema, request: args[0] });
+
+  // control[0] holds the seq of the latest result the DB worker has written. Wait until it equals
+  // ours — bounding each wait so a stuck worker can't hang us, and ignoring a late result from a
+  // previously timed-out request (whose seq won't match) instead of reading its stale bytes.
+  for (;;) {
+    const written = Atomics.load(control, 0);
+    if (written === seq) {
+      const length = Atomics.load(control, 1);
+      // .slice() copies out of the SharedArrayBuffer — TextDecoder rejects shared views.
+      return new TextDecoder().decode(data.slice(0, length));
+    }
+    const remaining = lintDeadline - Date.now();
+    if (remaining <= 0 || Atomics.wait(control, 0, written, remaining) === "timed-out") {
+      return timedOutResult();
+    }
+  }
+});
+
+function runLint(message: LintMessage): void {
+  currentSchema = message.schema;
+  // One budget for the whole run, shared by every generate call the rule makes for this file.
+  lintDeadline = Date.now() + GENERATE_TIMEOUT_MS;
+
+  try {
+    const diagnostics: EngineDiagnostic[] = lintWithRealRule({
+      code: message.code,
+      databaseUrl: "postgres://postgres:postgres@localhost:5432/playground",
+      config: message.config,
+    });
+    self.postMessage({ type: "result", id: message.id, diagnostics });
+  } catch (error) {
+    self.postMessage({
+      type: "error",
+      id: message.id,
+      error: error instanceof Error ? error.message : `${error}`,
+    });
+  }
+}
+
+self.onmessage = (event: MessageEvent<InitMessage | LintMessage>) => {
+  const message = event.data;
+  if (message.type === "init") {
+    control = new Int32Array(message.controlSab);
+    data = new Uint8Array(message.dataSab);
+    return;
+  }
+  runLint(message);
+};
diff --git a/apps/playground/tsconfig.json b/apps/playground/tsconfig.json
new file mode 100644
index 00000000..a5332cf6
--- /dev/null
+++ b/apps/playground/tsconfig.json
@@ -0,0 +1,20 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "strict": true,
+    "jsx": "preserve",
+    "lib": ["ESNext", "DOM"],
+    "skipLibCheck": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "types": ["vite/client", "node"],
+    "paths": {
+      "@ts-safeql/generate": ["../../packages/generate/index.ts"],
+      "@ts-safeql/shared": ["../../packages/shared/src/index.ts"],
+      "@ts-safeql/sql-ast": ["../../packages/ast-types/src/index.ts"]
+    }
+  },
+  "include": ["src/**/*.ts", "src/**/*.vue", "src/**/*.d.ts"]
+}
diff --git a/apps/playground/vercel.json b/apps/playground/vercel.json
new file mode 100644
index 00000000..a1713cc2
--- /dev/null
+++ b/apps/playground/vercel.json
@@ -0,0 +1,12 @@
+{
+  "$schema": "https://openapi.vercel.sh/vercel.json",
+  "headers": [
+    {
+      "source": "/(.*)",
+      "headers": [
+        { "key": "Cross-Origin-Opener-Policy", "value": "same-origin" },
+        { "key": "Cross-Origin-Embedder-Policy", "value": "require-corp" }
+      ]
+    }
+  ]
+}
diff --git a/apps/playground/vite.config.ts b/apps/playground/vite.config.ts
new file mode 100644
index 00000000..da21cfa6
--- /dev/null
+++ b/apps/playground/vite.config.ts
@@ -0,0 +1,118 @@
+import vue from "@vitejs/plugin-vue";
+import fs from "node:fs/promises";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+import { defineConfig, type Plugin } from "vite";
+
+const rootDir = path.dirname(fileURLToPath(import.meta.url));
+const repoRoot = path.resolve(rootDir, "../..");
+const libpgQueryEmscriptenPath = path.resolve(
+  rootDir,
+  "node_modules/libpg-query/wasm/libpg-query.js",
+);
+const libpgQueryEmscriptenId = "\0virtual:libpg-query-emscripten";
+
+function libpgQueryBrowser(): Plugin {
+  return {
+    name: "libpg-query-browser",
+    resolveId(source) {
+      if (source === "virtual:libpg-query-emscripten") {
+        return libpgQueryEmscriptenId;
+      }
+    },
+    async load(id) {
+      if (id !== libpgQueryEmscriptenId) {
+        return;
+      }
+
+      const code = await fs.readFile(libpgQueryEmscriptenPath, "utf8");
+      // Whitespace-tolerant so a libpg-query bump that re-minifies differently doesn't silently
+      // skip the patch (a structural change still trips the assertion below).
+      const browserCode = code.replace(
+        /ENVIRONMENT_IS_NODE\s*=\s*typeof\s+process\s*==\s*"object"\s*&&\s*process\.versions\?\.node\s*&&\s*process\.type\s*!=\s*"renderer"/,
+        "ENVIRONMENT_IS_NODE=false",
+      );
+
+      if (browserCode === code) {
+        throw new Error(`Failed to patch ENVIRONMENT_IS_NODE in ${libpgQueryEmscriptenPath}`);
+      }
+
+      return `${browserCode}\nexport default PgQueryModule;\n`;
+    },
+  };
+}
+
+// SharedArrayBuffer (for the synckit Atomics bridge) requires cross-origin isolation.
+function crossOriginIsolation(): Plugin {
+  const setHeaders = (
+    _req: unknown,
+    res: { setHeader(name: string, value: string): void },
+    next: () => void,
+  ) => {
+    res.setHeader("Cross-Origin-Opener-Policy", "same-origin");
+    res.setHeader("Cross-Origin-Embedder-Policy", "require-corp");
+    next();
+  };
+
+  return {
+    name: "cross-origin-isolation",
+    configureServer: (server) => void server.middlewares.use(setHeaders),
+    configurePreviewServer: (server) => void server.middlewares.use(setHeaders),
+  };
+}
+
+export default defineConfig({
+  plugins: [vue(), libpgQueryBrowser(), crossOriginIsolation()],
+  server: { port: 5174 },
+  optimizeDeps: {
+    exclude: ["@electric-sql/pglite", "libpg-query"],
+  },
+  assetsInclude: ["**/*.wasm"],
+  worker: {
+    format: "es",
+    plugins: () => [libpgQueryBrowser()],
+  },
+  resolve: {
+    alias: [
+      {
+        find: "@ts-safeql/generate",
+        replacement: path.resolve(repoRoot, "packages/generate/index.ts"),
+      },
+      {
+        find: "@ts-safeql/shared",
+        replacement: path.resolve(repoRoot, "packages/shared/src/index.ts"),
+      },
+      {
+        find: "@ts-safeql/sql-ast",
+        replacement: path.resolve(repoRoot, "packages/ast-types/src/index.ts"),
+      },
+      { find: "postgres", replacement: path.resolve(rootDir, "src/shims/postgres.ts") },
+      {
+        find: /^libpg-query\/wasm\/libpg-query\.wasm$/,
+        replacement: path.resolve(rootDir, "node_modules/libpg-query/wasm/libpg-query.wasm"),
+      },
+      { find: /^libpg-query$/, replacement: path.resolve(rootDir, "src/shims/libpg-query.ts") },
+      { find: /^(node:)?path$/, replacement: path.resolve(rootDir, "src/shims/path-stub.ts") },
+      // Redirect the whole `eslint` barrel (pulled in by @typescript-eslint/utils) to the
+      // browser Linter build, avoiding the node-coupled ESLint class (fs globbing, glob-parent).
+      { find: /^eslint$/, replacement: path.resolve(rootDir, "src/shims/eslint-browser.ts") },
+      {
+        find: /^eslint\/use-at-your-own-risk$/,
+        replacement: path.resolve(rootDir, "src/shims/eslint-unsupported.ts"),
+      },
+      // The real check-sql rule blocks on synckit; in the browser we bridge to a worker
+      // running PGlite via SharedArrayBuffer + Atomics (see src/shims/synckit.ts).
+      { find: /^synckit$/, replacement: path.resolve(rootDir, "src/shims/synckit.ts") },
+      // Node builtins the rule imports at module load but never calls on the lint path.
+      { find: /^(node:)?fs$/, replacement: path.resolve(rootDir, "src/shims/node-empty.ts") },
+      { find: /^(node:)?crypto$/, replacement: path.resolve(rootDir, "src/shims/node-crypto.ts") },
+      { find: /^(node:)?module$/, replacement: path.resolve(rootDir, "src/shims/node-empty.ts") },
+      { find: /^(node:)?url$/, replacement: path.resolve(rootDir, "src/shims/node-url.ts") },
+      { find: /^(node:)?os$/, replacement: path.resolve(rootDir, "src/shims/node-os.ts") },
+      { find: /^(node:)?util$/, replacement: path.resolve(rootDir, "src/shims/node-util.ts") },
+    ],
+  },
+  build: {
+    target: "esnext",
+  },
+});
diff --git a/package.json b/package.json
index 3ecb5dd3..fb43a314 100644
--- a/package.json
+++ b/package.json
@@ -19,7 +19,8 @@
     "clean": "pnpm run --parallel --filter './packages/**' clean",
     "release": "pnpm build --filter='./packages/**' -- --declaration && pnpm publint && changeset publish",
     "version": "changeset version && pnpm i --frozen-lockfile=false",
-    "setup": "pnpm run --parallel setup"
+    "setup": "pnpm run --parallel setup",
+    "playground": "pnpm --filter @ts-safeql/playground dev"
   },
   "workspaces": [
     "packages/**",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 31ee15e7..64ae406a 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -87,6 +87,70 @@ importers:
         specifier: 'catalog:'
         version: 8.57.1(eslint@10.0.3(jiti@2.4.2))(typescript@5.8.2)
 
+  apps/playground:
+    dependencies:
+      '@electric-sql/pglite':
+        specifier: ^0.5.1
+        version: 0.5.1
+      '@shikijs/monaco':
+        specifier: ^4.2.0
+        version: 4.2.0
+      '@ts-safeql/eslint-plugin':
+        specifier: workspace:*
+        version: link:../../packages/eslint-plugin
+      '@ts-safeql/generate':
+        specifier: workspace:*
+        version: link:../../packages/generate
+      '@ts-safeql/shared':
+        specifier: workspace:*
+        version: link:../../packages/shared
+      '@ts-safeql/sql-ast':
+        specifier: workspace:*
+        version: link:../../packages/ast-types
+      '@typescript-eslint/parser':
+        specifier: 'catalog:'
+        version: 8.57.1(eslint@10.0.3(jiti@2.4.2))(typescript@5.8.2)
+      eslint:
+        specifier: 'catalog:'
+        version: 10.0.3(jiti@2.4.2)
+      eslint-linter-browserify:
+        specifier: ^10.4.1
+        version: 10.4.1
+      fp-ts:
+        specifier: ^2.16.9
+        version: 2.16.9
+      libpg-query:
+        specifier: 'catalog:'
+        version: 17.5.2
+      monaco-editor:
+        specifier: ^0.55.1
+        version: 0.55.1
+      shiki:
+        specifier: ^4.2.0
+        version: 4.2.0
+      vue:
+        specifier: ^3.5.13
+        version: 3.5.13(typescript@5.8.2)
+    devDependencies:
+      '@types/node':
+        specifier: 'catalog:'
+        version: 24.12.0
+      '@vitejs/plugin-vue':
+        specifier: ^5.2.3
+        version: 5.2.3(vite@6.4.3(@types/node@24.12.0)(jiti@2.4.2)(tsx@4.19.3))(vue@3.5.13(typescript@5.8.2))
+      postgres:
+        specifier: 'catalog:'
+        version: 3.4.7
+      typescript:
+        specifier: 'catalog:'
+        version: 5.8.2
+      vite:
+        specifier: ^6.4.3
+        version: 6.4.3(@types/node@24.12.0)(jiti@2.4.2)(tsx@4.19.3)
+      vue-tsc:
+        specifier: ^2.2.8
+        version: 2.2.12(typescript@5.8.2)
+
   demos/basic:
     dependencies:
       '@ts-safeql-demos/shared':
@@ -640,7 +704,7 @@ importers:
         version: 5.8.2
       unbuild:
         specifier: 'catalog:'
-        version: 3.5.0(typescript@5.8.2)(vue@3.5.13(typescript@5.8.2))
+        version: 3.5.0(typescript@5.8.2)(vue-tsc@2.2.12(typescript@5.8.2))(vue@3.5.13(typescript@5.8.2))
 
   packages/connection-manager:
     dependencies:
@@ -674,10 +738,10 @@ importers:
         version: 5.8.2
       unbuild:
         specifier: 'catalog:'
-        version: 3.5.0(typescript@5.8.2)(vue@3.5.13(typescript@5.8.2))
+        version: 3.5.0(typescript@5.8.2)(vue-tsc@2.2.12(typescript@5.8.2))(vue@3.5.13(typescript@5.8.2))
       vitest:
         specifier: 'catalog:'
-        version: 4.1.7(@opentelemetry/api@1.9.0)(@types/node@24.12.0)(vite@6.2.3(@types/node@24.12.0)(jiti@2.4.2)(tsx@4.19.3))
+        version: 4.1.7(@opentelemetry/api@1.9.0)(@types/node@24.12.0)(vite@6.4.3(@types/node@24.12.0)(jiti@2.4.2)(tsx@4.19.3))
 
   packages/eslint-plugin:
     dependencies:
@@ -759,10 +823,10 @@ importers:
         version: 5.8.2
       unbuild:
         specifier: 'catalog:'
-        version: 3.5.0(typescript@5.8.2)(vue@3.5.13(typescript@5.8.2))
+        version: 3.5.0(typescript@5.8.2)(vue-tsc@2.2.12(typescript@5.8.2))(vue@3.5.13(typescript@5.8.2))
       vitest:
         specifier: 'catalog:'
-        version: 4.1.7(@opentelemetry/api@1.9.0)(@types/node@24.12.0)(vite@6.2.3(@types/node@24.12.0)(jiti@2.4.2)(tsx@4.19.3))
+        version: 4.1.7(@opentelemetry/api@1.9.0)(@types/node@24.12.0)(vite@6.4.3(@types/node@24.12.0)(jiti@2.4.2)(tsx@4.19.3))
 
   packages/generate:
     dependencies:
@@ -811,10 +875,10 @@ importers:
         version: 5.8.2
       unbuild:
         specifier: 'catalog:'
-        version: 3.5.0(typescript@5.8.2)(vue@3.5.13(typescript@5.8.2))
+        version: 3.5.0(typescript@5.8.2)(vue-tsc@2.2.12(typescript@5.8.2))(vue@3.5.13(typescript@5.8.2))
       vitest:
         specifier: 'catalog:'
-        version: 4.1.7(@opentelemetry/api@1.9.0)(@types/node@24.12.0)(vite@6.2.3(@types/node@24.12.0)(jiti@2.4.2)(tsx@4.19.3))
+        version: 4.1.7(@opentelemetry/api@1.9.0)(@types/node@24.12.0)(vite@6.4.3(@types/node@24.12.0)(jiti@2.4.2)(tsx@4.19.3))
 
   packages/plugin-utils:
     dependencies:
@@ -842,7 +906,7 @@ importers:
         version: 5.8.2
       unbuild:
         specifier: 'catalog:'
-        version: 3.5.0(typescript@5.8.2)(vue@3.5.13(typescript@5.8.2))
+        version: 3.5.0(typescript@5.8.2)(vue-tsc@2.2.12(typescript@5.8.2))(vue@3.5.13(typescript@5.8.2))
 
   packages/plugins/auth-aws:
     dependencies:
@@ -870,10 +934,10 @@ importers:
         version: 5.8.2
       unbuild:
         specifier: 'catalog:'
-        version: 3.5.0(typescript@5.8.2)(vue@3.5.13(typescript@5.8.2))
+        version: 3.5.0(typescript@5.8.2)(vue-tsc@2.2.12(typescript@5.8.2))(vue@3.5.13(typescript@5.8.2))
       vitest:
         specifier: 'catalog:'
-        version: 4.1.7(@opentelemetry/api@1.9.0)(@types/node@24.12.0)(vite@6.2.3(@types/node@24.12.0)(jiti@2.4.2)(tsx@4.19.3))
+        version: 4.1.7(@opentelemetry/api@1.9.0)(@types/node@24.12.0)(vite@6.4.3(@types/node@24.12.0)(jiti@2.4.2)(tsx@4.19.3))
 
   packages/plugins/postgres-js:
     devDependencies:
@@ -906,10 +970,10 @@ importers:
         version: 5.8.2
       unbuild:
         specifier: 'catalog:'
-        version: 3.5.0(typescript@5.8.2)(vue@3.5.13(typescript@5.8.2))
+        version: 3.5.0(typescript@5.8.2)(vue-tsc@2.2.12(typescript@5.8.2))(vue@3.5.13(typescript@5.8.2))
       vitest:
         specifier: 'catalog:'
-        version: 4.1.7(@opentelemetry/api@1.9.0)(@types/node@24.12.0)(vite@6.2.3(@types/node@24.12.0)(jiti@2.4.2)(tsx@4.19.3))
+        version: 4.1.7(@opentelemetry/api@1.9.0)(@types/node@24.12.0)(vite@6.4.3(@types/node@24.12.0)(jiti@2.4.2)(tsx@4.19.3))
 
   packages/plugins/slonik:
     devDependencies:
@@ -948,10 +1012,10 @@ importers:
         version: 5.8.2
       unbuild:
         specifier: 'catalog:'
-        version: 3.5.0(typescript@5.8.2)(vue@3.5.13(typescript@5.8.2))
+        version: 3.5.0(typescript@5.8.2)(vue-tsc@2.2.12(typescript@5.8.2))(vue@3.5.13(typescript@5.8.2))
       vitest:
         specifier: 'catalog:'
-        version: 4.1.7(@opentelemetry/api@1.9.0)(@types/node@24.12.0)(vite@6.2.3(@types/node@24.12.0)(jiti@2.4.2)(tsx@4.19.3))
+        version: 4.1.7(@opentelemetry/api@1.9.0)(@types/node@24.12.0)(vite@6.4.3(@types/node@24.12.0)(jiti@2.4.2)(tsx@4.19.3))
       zod:
         specifier: ^4.3.6
         version: 4.3.6
@@ -982,10 +1046,10 @@ importers:
         version: 5.8.2
       unbuild:
         specifier: 'catalog:'
-        version: 3.5.0(typescript@5.8.2)(vue@3.5.13(typescript@5.8.2))
+        version: 3.5.0(typescript@5.8.2)(vue-tsc@2.2.12(typescript@5.8.2))(vue@3.5.13(typescript@5.8.2))
       vitest:
         specifier: 'catalog:'
-        version: 4.1.7(@opentelemetry/api@1.9.0)(@types/node@24.12.0)(vite@6.2.3(@types/node@24.12.0)(jiti@2.4.2)(tsx@4.19.3))
+        version: 4.1.7(@opentelemetry/api@1.9.0)(@types/node@24.12.0)(vite@6.4.3(@types/node@24.12.0)(jiti@2.4.2)(tsx@4.19.3))
 
   packages/sql-tag:
     devDependencies:
@@ -1009,10 +1073,10 @@ importers:
         version: 5.8.2
       unbuild:
         specifier: 'catalog:'
-        version: 3.5.0(typescript@5.8.2)(vue@3.5.13(typescript@5.8.2))
+        version: 3.5.0(typescript@5.8.2)(vue-tsc@2.2.12(typescript@5.8.2))(vue@3.5.13(typescript@5.8.2))
       vitest:
         specifier: 'catalog:'
-        version: 4.1.7(@opentelemetry/api@1.9.0)(@types/node@24.12.0)(vite@6.2.3(@types/node@24.12.0)(jiti@2.4.2)(tsx@4.19.3))
+        version: 4.1.7(@opentelemetry/api@1.9.0)(@types/node@24.12.0)(vite@6.4.3(@types/node@24.12.0)(jiti@2.4.2)(tsx@4.19.3))
 
   packages/test-utils:
     dependencies:
@@ -1049,7 +1113,7 @@ importers:
         version: 5.8.2
       unbuild:
         specifier: 'catalog:'
-        version: 3.5.0(typescript@5.8.2)(vue@3.5.13(typescript@5.8.2))
+        version: 3.5.0(typescript@5.8.2)(vue-tsc@2.2.12(typescript@5.8.2))(vue@3.5.13(typescript@5.8.2))
 
   packages/zod-annotator:
     dependencies:
@@ -1074,10 +1138,10 @@ importers:
         version: 5.8.2
       unbuild:
         specifier: 'catalog:'
-        version: 3.5.0(typescript@5.8.2)(vue@3.5.13(typescript@5.8.2))
+        version: 3.5.0(typescript@5.8.2)(vue-tsc@2.2.12(typescript@5.8.2))(vue@3.5.13(typescript@5.8.2))
       vitest:
         specifier: 'catalog:'
-        version: 4.1.7(@opentelemetry/api@1.9.0)(@types/node@24.12.0)(vite@6.2.3(@types/node@24.12.0)(jiti@2.4.2)(tsx@4.19.3))
+        version: 4.1.7(@opentelemetry/api@1.9.0)(@types/node@24.12.0)(vite@6.4.3(@types/node@24.12.0)(jiti@2.4.2)(tsx@4.19.3))
       zod:
         specifier: ^4.3.6
         version: 4.3.6
@@ -1392,6 +1456,9 @@ packages:
       search-insights:
         optional: true
 
+  '@electric-sql/pglite@0.5.1':
+    resolution: {integrity: sha512-h2Vc+qkQqsEL5kvyN5nBAxn3Vbyvka7QfDW7Io+CdcwU1+X8JbCAN2og+5dI11S3eJuDfroUCxzJaap6k+ezEw==}
+
   '@esbuild/aix-ppc64@0.21.5':
     resolution: {integrity: sha512-1SDgH6ZSPTlggy1yI6+Dbkiz8xzpHJEVAlF/AM1tHPLsf5STom9rwtjE4hKAF20FfXXNTFqEYXyJNWh1GiZedQ==}
     engines: {node: '>=12'}
@@ -2153,24 +2220,56 @@ packages:
   '@shikijs/core@2.5.0':
     resolution: {integrity: sha512-uu/8RExTKtavlpH7XqnVYBrfBkUc20ngXiX9NSrBhOVZYv/7XQRKUyhtkeflY5QsxC0GbJThCerruZfsUaSldg==}
 
+  '@shikijs/core@4.2.0':
+    resolution: {integrity: sha512-Hc87Ab1Ld/vEbZRCbwx344I5v+4RU8CVToUTRkqXL1+TjbuOp9U5Xa0M23V4GEWHxVn+yO5otb+HkQVm3ptWQQ==}
+    engines: {node: '>=20'}
+
   '@shikijs/engine-javascript@2.5.0':
     resolution: {integrity: sha512-VjnOpnQf8WuCEZtNUdjjwGUbtAVKuZkVQ/5cHy/tojVVRIRtlWMYVjyWhxOmIq05AlSOv72z7hRNRGVBgQOl0w==}
 
+  '@shikijs/engine-javascript@4.2.0':
+    resolution: {integrity: sha512-fjETeq1k5ffyXqRgS6+3hpvqseLalp1kjNfRbXpUgWR8FpZ1CmQfiNHovc5lncYjt/Vg5JK/WJEmLahjwMa0og==}
+    engines: {node: '>=20'}
+
   '@shikijs/engine-oniguruma@2.5.0':
     resolution: {integrity: sha512-pGd1wRATzbo/uatrCIILlAdFVKdxImWJGQ5rFiB5VZi2ve5xj3Ax9jny8QvkaV93btQEwR/rSz5ERFpC5mKNIw==}
 
+  '@shikijs/engine-oniguruma@4.2.0':
+    resolution: {integrity: sha512-hTorK1dffPkpbMUk6Z+828PgRo7d07HbnizoP0hNPFjhxMHctj0Px/qoHeGMYafc6ju+u9iMldN4JbVzNQM++g==}
+    engines: {node: '>=20'}
+
   '@shikijs/langs@2.5.0':
     resolution: {integrity: sha512-Qfrrt5OsNH5R+5tJ/3uYBBZv3SuGmnRPejV9IlIbFH3HTGLDlkqgHymAlzklVmKBjAaVmkPkyikAV/sQ1wSL+w==}
 
+  '@shikijs/langs@4.2.0':
+    resolution: {integrity: sha512-bwrVRlJ0wUhZxAbVdvBbv2TTC9yLsh4C/IO5Ofz0T8MQntgDvyVnkbjw9vi50r1kx7RCIJdnJnjZAwmAsXFLZQ==}
+    engines: {node: '>=20'}
+
+  '@shikijs/monaco@4.2.0':
+    resolution: {integrity: sha512-NBAY81HWX6wNYsbedqzkg3c75/XiwncUthARZNMp2Ac3656HjCfyfAdiRujdxq93LFTZJ5545yIyBz8hKMKZpw==}
+    engines: {node: '>=20'}
+
+  '@shikijs/primitive@4.2.0':
+    resolution: {integrity: sha512-NOq+DtUkVBJtZMVXL5A0vI0Xk8nvDYaXetFHSJFlOqjDZIVhIPRYFdGkSoElDqNuegikcc3A76SNUa8dTqtAYA==}
+    engines: {node: '>=20'}
+
   '@shikijs/themes@2.5.0':
     resolution: {integrity: sha512-wGrk+R8tJnO0VMzmUExHR+QdSaPUl/NKs+a4cQQRWyoc3YFbUzuLEi/KWK1hj+8BfHRKm2jNhhJck1dfstJpiw==}
 
+  '@shikijs/themes@4.2.0':
+    resolution: {integrity: sha512-RX8IHYeLv8Cu2W6ruc3RxUqWn0IYCqSrMBzi/uRGAmfyDNOnNO5BF/Px7o97n4XTpmFTo5GbRaazuOWj+2ak2w==}
+    engines: {node: '>=20'}
+
   '@shikijs/transformers@2.5.0':
     resolution: {integrity: sha512-SI494W5X60CaUwgi8u4q4m4s3YAFSxln3tzNjOSYqq54wlVgz0/NbbXEb3mdLbqMBztcmS7bVTaEd2w0qMmfeg==}
 
   '@shikijs/types@2.5.0':
     resolution: {integrity: sha512-ygl5yhxki9ZLNuNpPitBWvcy9fsSKKaRuO4BAlMyagszQidxcpLAr0qiW/q43DtSIDxO6hEbtYLiFZNXO/hdGw==}
 
+  '@shikijs/types@4.2.0':
+    resolution: {integrity: sha512-VT/MKtlpOhEPZloSH3Pb9WCZEBDoQVMa9jedp5UAwmJOar1DVc9DRODAxmYPW9M93IK4ryuqRejFfmlvlVDemw==}
+    engines: {node: '>=20'}
+
   '@shikijs/vscode-textmate@10.0.2':
     resolution: {integrity: sha512-83yeghZ2xxin3Nj8z1NMd/NCuca+gsYXswywDy5bHvwlWL8tpTQmzGeUuHd9FC3E/SBEMvzJRwWEOz5gGes9Qg==}
 
@@ -2448,6 +2547,9 @@ packages:
   '@types/resolve@1.20.2':
     resolution: {integrity: sha512-60BCwRFOZCQhDncwQdxxeOEEkbc5dIMccYLwbxsS4TUNeVECQ/pBJ0j09mrHOl/JJvpRPGwO9SvE4nR2Nb/a4Q==}
 
+  '@types/trusted-types@2.0.7':
+    resolution: {integrity: sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw==}
+
   '@types/unist@3.0.3':
     resolution: {integrity: sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q==}
 
@@ -2590,6 +2692,15 @@ packages:
   '@vitest/utils@4.1.7':
     resolution: {integrity: sha512-T532WBu791cBxJlCl6SO+J14l81DQx6uQHm1bQbmCDY7nqlEIgkza/UFnSBNaUtSf41unldDFjdOBYEQC4b5Hw==}
 
+  '@volar/language-core@2.4.15':
+    resolution: {integrity: sha512-3VHw+QZU0ZG9IuQmzT68IyN4hZNd9GchGPhbD9+pa8CVv7rnoOZwo7T8weIbrRmihqy3ATpdfXFnqRrfPVK6CA==}
+
+  '@volar/source-map@2.4.15':
+    resolution: {integrity: sha512-CPbMWlUN6hVZJYGcU/GSoHu4EnCHiLaXI9n8c9la6RaI9W5JHX+NqG+GSQcB0JdC2FIBLdZJwGsfKyBB71VlTg==}
+
+  '@volar/typescript@2.4.15':
+    resolution: {integrity: sha512-2aZ8i0cqPGjXb4BhkMsPYDkkuc2ZQ6yOpqwAuNwUoncELqoy5fRgOQtLR9gB0g902iS0NAkvpIzs27geVyVdPg==}
+
   '@vue/compiler-core@3.5.13':
     resolution: {integrity: sha512-oOdAkwqUfW1WqpwSYJce06wvt6HljgY3fGeM9NcVA1HaYOij3mZG9Rkysn0OHuyUAGMbEbARIpsG+LPVlBJ5/Q==}
 
@@ -2602,6 +2713,9 @@ packages:
   '@vue/compiler-ssr@3.5.13':
     resolution: {integrity: sha512-wMH6vrYHxQl/IybKJagqbquvxpWCuVYpoUJfCqFZwa/JY1GdATAQ+TgVtgrwwMZ0D07QhA99rs/EAAWfvG6KpA==}
 
+  '@vue/compiler-vue2@2.7.16':
+    resolution: {integrity: sha512-qYC3Psj9S/mfu9uVi5WvNZIzq+xnXMhOwbTFKKDD7b1lhpnn71jXSFdTQ+WsIEk0ONCd7VV2IMm7ONl6tbQ86A==}
+
   '@vue/devtools-api@7.7.2':
     resolution: {integrity: sha512-1syn558KhyN+chO5SjlZIwJ8bV/bQ1nOVTG66t2RbG66ZGekyiYNmRO7X9BJCXQqPsFHlnksqvPhce2qpzxFnA==}
 
@@ -2611,6 +2725,14 @@ packages:
   '@vue/devtools-shared@7.7.2':
     resolution: {integrity: sha512-uBFxnp8gwW2vD6FrJB8JZLUzVb6PNRG0B0jBnHsOH8uKyva2qINY8PTF5Te4QlTbMDqU5K6qtJDr6cNsKWhbOA==}
 
+  '@vue/language-core@2.2.12':
+    resolution: {integrity: sha512-IsGljWbKGU1MZpBPN+BvPAdr55YPkj2nB/TBNGNC32Vy2qLG25DYu/NBN2vNtZqdRbTRjaoYrahLrToim2NanA==}
+    peerDependencies:
+      typescript: '*'
+    peerDependenciesMeta:
+      typescript:
+        optional: true
+
   '@vue/reactivity@3.5.13':
     resolution: {integrity: sha512-NaCwtw8o48B9I6L1zl2p41OHo/2Z4wqYGGIK1Khu5T7yxrn+ATOixn/Udn2m+6kZKB/J7cuT9DbWWhRxqixACg==}
 
@@ -2704,6 +2826,9 @@ packages:
     resolution: {integrity: sha512-Epyi6P2TePHzNdUxtLlaI19x4/r4QXocoL2zyidDtTTSN7CY8cmYKQ0pTn0YfFJePtwX7oNjnQiiEPMBPI4QuQ==}
     engines: {node: '>= 14.0.0'}
 
+  alien-signals@1.0.13:
+    resolution: {integrity: sha512-OGj9yyTnJEttvzhTUWuscOvtqxq5vrhF7vL9oS0xJ2mK0ItPYP1/y+vCFebfxoEyAz0++1AIwJ5CMr+Fk3nDmg==}
+
   ansi-colors@4.1.3:
     resolution: {integrity: sha512-/6w/C21Pm1A7aZitlI5Ni/2J6FFQN8i1Cvz3kHABAAbw93v/NlvKdVOqz7CCWz/3iv/JplRSEEZ83XION15ovw==}
     engines: {node: '>=6'}
@@ -2937,6 +3062,9 @@ packages:
   dayjs@1.11.13:
     resolution: {integrity: sha512-oaMBel6gjolK862uaPQOVTA7q3TZhuSvuMQAAglQDOWYO9A91IrAOUJEyKVlqJlHE0vq5p5UXxzdPfMH/x6xNg==}
 
+  de-indent@1.0.2:
+    resolution: {integrity: sha512-e/1zu3xH5MQryN2zdVaF0OrdNLUbvWxzMbi+iNA6Bky7l1RoP8a2fIbRocyHclXt/arDrrR6lL3TqFD9pMQTsg==}
+
   debug@4.4.0:
     resolution: {integrity: sha512-6WTZ/IxCY/T6BALoZHaE4ctp9xm+Z5kY/pzYaCHRFeyVhojxlrm+46y68HA6hr0TcwEssoxNiDEUJQjfPZ/RYA==}
     engines: {node: '>=6.0'}
@@ -2994,6 +3122,9 @@ packages:
     resolution: {integrity: sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==}
     engines: {node: '>= 4'}
 
+  dompurify@3.2.7:
+    resolution: {integrity: sha512-WhL/YuveyGXJaerVlMYGWhvQswa7myDG17P7Vu65EWC05o8vfeNbvNf4d/BOvH99+ZW+LlQsc1GDKMa1vNK6dw==}
+
   domutils@3.2.2:
     resolution: {integrity: sha512-6kZKyUajlDuqlHKVX1w7gyslj9MPIXzIFiz/rGu35uC1wMi+kMhQwGhl4lt9unC9Vb9INnY9Z3/ZA3+FhASLaw==}
 
@@ -3055,6 +3186,9 @@ packages:
     resolution: {integrity: sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==}
     engines: {node: '>=10'}
 
+  eslint-linter-browserify@10.4.1:
+    resolution: {integrity: sha512-mIs4xbUDjkijfVNs3F973k7HPJ0MhQZ77PotlaCX9xUbI/jwgv5sAh+O2mgKr6j3CM2aaGlbdvRFOyycN5VZxg==}
+
   eslint-scope@9.1.2:
     resolution: {integrity: sha512-xS90H51cKw0jltxmvmHy2Iai1LIqrfbw57b79w/J7MfvDfkIkFZ+kj6zC3BjtUwh150HsSSdxXZcsuv72miDFQ==}
     engines: {node: ^20.19.0 || ^22.13.0 || >=24}
@@ -3250,6 +3384,10 @@ packages:
   hast-util-whitespace@3.0.0:
     resolution: {integrity: sha512-88JUN06ipLwsnv+dVn+OIYOvAuvBMy/Qoi6O7mQHxdPXpjy+Cd6xRkWwux7DKO+4sYILtLBRIKgsdpS2gQc7qw==}
 
+  he@1.2.0:
+    resolution: {integrity: sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==}
+    hasBin: true
+
   hookable@5.5.3:
     resolution: {integrity: sha512-Yc+BQe8SvoXH1643Qez1zqLRmbA5rCL+sSmk6TVos0LWVfNIB7PGncdlId77WzLGSIB5KaWgTaNTs2lNVEI6VQ==}
 
@@ -3408,6 +3546,11 @@ packages:
   mark.js@8.11.1:
     resolution: {integrity: sha512-1I+1qpDt4idfgLQG+BNWmrqku+7/2bi5nLf4YwF8y8zXvmfiTBY3PV3ZibfrjBueCByROpuBjLLFCajqkgYoLQ==}
 
+  marked@14.0.0:
+    resolution: {integrity: sha512-uIj4+faQ+MgHgwUW1l2PsPglZLOLOT1uErt06dAPtx2kjteLAkbsd/0FiYg/MGS+i7ZKLb7w2WClxHkzOOuryQ==}
+    engines: {node: '>= 18'}
+    hasBin: true
+
   mdast-util-to-hast@13.2.0:
     resolution: {integrity: sha512-QGYKEuUsYT9ykKBCMOEDLsU5JRObWQusAolFMeko/tYPufNkRffBAQjIE+99jbA87xv6FgmjLtwjh9wBWajwAA==}
 
@@ -3483,6 +3626,9 @@ packages:
   mlly@1.7.4:
     resolution: {integrity: sha512-qmdSIPC4bDJXgZTCR7XosJiNKySV7O215tsPtDN9iEO/7q/76b/ijtgRu/+epFXSJhijtTCCGp3DWS549P3xKw==}
 
+  monaco-editor@0.55.1:
+    resolution: {integrity: sha512-jz4x+TJNFHwHtwuV9vA9rMujcZRb0CEilTEwG2rRSpe/A7Jdkuj8xPKttCgOh+v/lkHy7HsZ64oj+q3xoAFl9A==}
+
   mri@1.2.0:
     resolution: {integrity: sha512-tzzskb3bG8LvYGFF/mDTpq3jpI6Q9wc3LEmBaghu+DdCssd1FakN7Bc0hVNmEyGq1bq3RgfkCb3cmQLpNPOroA==}
     engines: {node: '>=4'}
@@ -3490,6 +3636,9 @@ packages:
   ms@2.1.3:
     resolution: {integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==}
 
+  muggle-string@0.4.1:
+    resolution: {integrity: sha512-VNTrAak/KhO2i8dqqnqnAHOa3cYBwXEZe9h+D5h/1ZqFSTEFHdM65lR7RoIqq3tBBYavsOXV84NoHXZ0AkPyqQ==}
+
   nanoid@3.3.11:
     resolution: {integrity: sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==}
     engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
@@ -3523,9 +3672,15 @@ packages:
   obug@2.1.1:
     resolution: {integrity: sha512-uTqF9MuPraAQ+IsnPf366RG4cP9RtUi7MLO1N3KEc+wb0a6yKpeL0lmk2IB1jY5KHPAlTc6T/JRdC/YqxHNwkQ==}
 
+  oniguruma-parser@0.12.2:
+    resolution: {integrity: sha512-6HVa5oIrgMC6aA6WF6XyyqbhRPJrKR02L20+2+zpDtO5QAzGHAUGw5TKQvwi5vctNnRHkJYmjAhRVQF2EKdTQw==}
+
   oniguruma-to-es@3.1.1:
     resolution: {integrity: sha512-bUH8SDvPkH3ho3dvwJwfonjlQ4R80vjyvrU8YpxuROddv55vAEJrTuCuCVUhhsHbtlD9tGGbaNApGQckXhS8iQ==}
 
+  oniguruma-to-es@4.3.6:
+    resolution: {integrity: sha512-csuQ9x3Yr0cEIs/Zgx/OEt9iBw9vqIunAPQkx19R/fiMq2oGVTgcMqO/V3Ybqefr1TBvosI6jU539ksaBULJyA==}
+
   optionator@0.9.4:
     resolution: {integrity: sha512-6IpQ7mKUxRcZNLIObR0hz7lxsapSSIYNZJwXPGeF0mTVqGKFIXj1DQcMoT22S3ROcLyY/rz0PWaWZ9ayWmad9g==}
     engines: {node: '>= 0.8.0'}
@@ -3578,6 +3733,9 @@ packages:
   package-manager-detector@1.6.0:
     resolution: {integrity: sha512-61A5ThoTiDG/C8s8UMZwSorAGwMJ0ERVGj2OjoW5pAalsNOg15+iQiPzrLJ4jhZ1HJzmC2PIHT2oEiH3R5fzNA==}
 
+  path-browserify@1.0.1:
+    resolution: {integrity: sha512-b7uo2UCUOYZcnF/3ID0lulOJi/bafxa1xPe7ZPsammBSpjSWQkjNxlt635YGS2MiR9GjvuXCtz2emr3jbsz98g==}
+
   path-exists@4.0.0:
     resolution: {integrity: sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==}
     engines: {node: '>=8'}
@@ -4008,6 +4166,9 @@ packages:
   regex@6.0.1:
     resolution: {integrity: sha512-uorlqlzAKjKQZ5P+kTJr3eeJGSVroLKoHmquUj4zHWuR+hEyNqlXsSKlYYF5F4NI6nl7tWCs0apKJ0lmfsXAPA==}
 
+  regex@6.1.0:
+    resolution: {integrity: sha512-6VwtthbV4o/7+OaAF9I5L5V3llLEsoPyq9P1JVXkedTP33c7MfCG0/5NOPcSJn0TzXcG9YUrR0gQSWioew3LDg==}
+
   require-directory@2.1.1:
     resolution: {integrity: sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==}
     engines: {node: '>=0.10.0'}
@@ -4097,6 +4258,10 @@ packages:
   shiki@2.5.0:
     resolution: {integrity: sha512-mI//trrsaiCIPsja5CNfsyNOqgAZUb6VpJA+340toL42UpzQlXpwRV9nch69X6gaUxrr9kaOOa6e3y3uAkGFxQ==}
 
+  shiki@4.2.0:
+    resolution: {integrity: sha512-hjNax6o/ylDy9lefQEaSDtzaT3iVNtZ3WmpQnbuQNoG4xvnSKf2kSKbihZVO4JRG1TTMejs7CmNRYlWgAL66pQ==}
+    engines: {node: '>=20'}
+
   siginfo@2.0.0:
     resolution: {integrity: sha512-ybx0WO1/8bSBLEWXZvEd7gMW3Sn3JFlW3TvX1nREbDLRNQNaeNN8WK0meBwPdAaOI7TtRRRJn/Es1zhrrCHu7g==}
 
@@ -4466,8 +4631,8 @@ packages:
       terser:
         optional: true
 
-  vite@6.2.3:
-    resolution: {integrity: sha512-IzwM54g4y9JA/xAeBPNaDXiBF8Jsgl3VBQ2YQ/wOY6fyW3xMdSoltIV3Bo59DErdqdE6RxUfv8W69DvUorE4Eg==}
+  vite@6.4.3:
+    resolution: {integrity: sha512-NTKlcQjlAK7MlQoyb6LgaqHc8sso/pVyUJYWMws3jg21uTJw/LddqIFPcPqP6PzpgbIcZyKI85sFE4HBrQDA8A==}
     engines: {node: ^18.0.0 || ^20.0.0 || >=22.0.0}
     hasBin: true
     peerDependencies:
@@ -4565,6 +4730,15 @@ packages:
       jsdom:
         optional: true
 
+  vscode-uri@3.1.0:
+    resolution: {integrity: sha512-/BpdSx+yCQGnCvecbyXdxHDkuk55/G3xwnC0GqY4gmQ3j+A+g8kzzgB4Nk/SINjqn6+waqw3EgbVF2QKExkRxQ==}
+
+  vue-tsc@2.2.12:
+    resolution: {integrity: sha512-P7OP77b2h/Pmk+lZdJ0YWs+5tJ6J2+uOQPo7tlBnY44QqQSPYvS0qVT4wqDJgwrZaLe47etJLLQRFia71GYITw==}
+    hasBin: true
+    peerDependencies:
+      typescript: '>=5.0.0'
+
   vue@3.5.13:
     resolution: {integrity: sha512-wmeiSMxkZCSc+PM2w2VRsOYAZC8GdipNFRTsLSfodVqI9mbejKeXEGr8SckuLnrQPGe3oJN5c3K0vpoU9q/wCQ==}
     peerDependencies:
@@ -5332,6 +5506,8 @@ snapshots:
     transitivePeerDependencies:
       - '@algolia/client-search'
 
+  '@electric-sql/pglite@0.5.1': {}
+
   '@esbuild/aix-ppc64@0.21.5':
     optional: true
 
@@ -5818,25 +5994,64 @@ snapshots:
       '@types/hast': 3.0.4
       hast-util-to-html: 9.0.5
 
+  '@shikijs/core@4.2.0':
+    dependencies:
+      '@shikijs/primitive': 4.2.0
+      '@shikijs/types': 4.2.0
+      '@shikijs/vscode-textmate': 10.0.2
+      '@types/hast': 3.0.4
+      hast-util-to-html: 9.0.5
+
   '@shikijs/engine-javascript@2.5.0':
     dependencies:
       '@shikijs/types': 2.5.0
       '@shikijs/vscode-textmate': 10.0.2
       oniguruma-to-es: 3.1.1
 
+  '@shikijs/engine-javascript@4.2.0':
+    dependencies:
+      '@shikijs/types': 4.2.0
+      '@shikijs/vscode-textmate': 10.0.2
+      oniguruma-to-es: 4.3.6
+
   '@shikijs/engine-oniguruma@2.5.0':
     dependencies:
       '@shikijs/types': 2.5.0
       '@shikijs/vscode-textmate': 10.0.2
 
+  '@shikijs/engine-oniguruma@4.2.0':
+    dependencies:
+      '@shikijs/types': 4.2.0
+      '@shikijs/vscode-textmate': 10.0.2
+
   '@shikijs/langs@2.5.0':
     dependencies:
       '@shikijs/types': 2.5.0
 
+  '@shikijs/langs@4.2.0':
+    dependencies:
+      '@shikijs/types': 4.2.0
+
+  '@shikijs/monaco@4.2.0':
+    dependencies:
+      '@shikijs/core': 4.2.0
+      '@shikijs/types': 4.2.0
+      '@shikijs/vscode-textmate': 10.0.2
+
+  '@shikijs/primitive@4.2.0':
+    dependencies:
+      '@shikijs/types': 4.2.0
+      '@shikijs/vscode-textmate': 10.0.2
+      '@types/hast': 3.0.4
+
   '@shikijs/themes@2.5.0':
     dependencies:
       '@shikijs/types': 2.5.0
 
+  '@shikijs/themes@4.2.0':
+    dependencies:
+      '@shikijs/types': 4.2.0
+
   '@shikijs/transformers@2.5.0':
     dependencies:
       '@shikijs/core': 2.5.0
@@ -5847,6 +6062,11 @@ snapshots:
       '@shikijs/vscode-textmate': 10.0.2
       '@types/hast': 3.0.4
 
+  '@shikijs/types@4.2.0':
+    dependencies:
+      '@shikijs/vscode-textmate': 10.0.2
+      '@types/hast': 3.0.4
+
   '@shikijs/vscode-textmate@10.0.2': {}
 
   '@slonik/driver@48.13.2(zod@4.3.6)':
@@ -6239,6 +6459,9 @@ snapshots:
 
   '@types/resolve@1.20.2': {}
 
+  '@types/trusted-types@2.0.7':
+    optional: true
+
   '@types/unist@3.0.3': {}
 
   '@types/web-bluetooth@0.0.21': {}
@@ -6367,6 +6590,11 @@ snapshots:
       vite: 5.4.15(@types/node@24.12.0)
       vue: 3.5.13(typescript@5.8.2)
 
+  '@vitejs/plugin-vue@5.2.3(vite@6.4.3(@types/node@24.12.0)(jiti@2.4.2)(tsx@4.19.3))(vue@3.5.13(typescript@5.8.2))':
+    dependencies:
+      vite: 6.4.3(@types/node@24.12.0)(jiti@2.4.2)(tsx@4.19.3)
+      vue: 3.5.13(typescript@5.8.2)
+
   '@vitest/expect@4.1.7':
     dependencies:
       '@standard-schema/spec': 1.1.0
@@ -6376,13 +6604,13 @@ snapshots:
       chai: 6.2.2
       tinyrainbow: 3.1.0
 
-  '@vitest/mocker@4.1.7(vite@6.2.3(@types/node@24.12.0)(jiti@2.4.2)(tsx@4.19.3))':
+  '@vitest/mocker@4.1.7(vite@6.4.3(@types/node@24.12.0)(jiti@2.4.2)(tsx@4.19.3))':
     dependencies:
       '@vitest/spy': 4.1.7
       estree-walker: 3.0.3
       magic-string: 0.30.21
     optionalDependencies:
-      vite: 6.2.3(@types/node@24.12.0)(jiti@2.4.2)(tsx@4.19.3)
+      vite: 6.4.3(@types/node@24.12.0)(jiti@2.4.2)(tsx@4.19.3)
 
   '@vitest/pretty-format@4.1.7':
     dependencies:
@@ -6408,6 +6636,18 @@ snapshots:
       convert-source-map: 2.0.0
       tinyrainbow: 3.1.0
 
+  '@volar/language-core@2.4.15':
+    dependencies:
+      '@volar/source-map': 2.4.15
+
+  '@volar/source-map@2.4.15': {}
+
+  '@volar/typescript@2.4.15':
+    dependencies:
+      '@volar/language-core': 2.4.15
+      path-browserify: 1.0.1
+      vscode-uri: 3.1.0
+
   '@vue/compiler-core@3.5.13':
     dependencies:
       '@babel/parser': 7.27.0
@@ -6429,7 +6669,7 @@ snapshots:
       '@vue/compiler-ssr': 3.5.13
       '@vue/shared': 3.5.13
       estree-walker: 2.0.2
-      magic-string: 0.30.17
+      magic-string: 0.30.21
       postcss: 8.5.3
       source-map-js: 1.2.1
 
@@ -6438,6 +6678,11 @@ snapshots:
       '@vue/compiler-dom': 3.5.13
       '@vue/shared': 3.5.13
 
+  '@vue/compiler-vue2@2.7.16':
+    dependencies:
+      de-indent: 1.0.2
+      he: 1.2.0
+
   '@vue/devtools-api@7.7.2':
     dependencies:
       '@vue/devtools-kit': 7.7.2
@@ -6456,6 +6701,19 @@ snapshots:
     dependencies:
       rfdc: 1.4.1
 
+  '@vue/language-core@2.2.12(typescript@5.8.2)':
+    dependencies:
+      '@volar/language-core': 2.4.15
+      '@vue/compiler-dom': 3.5.13
+      '@vue/compiler-vue2': 2.7.16
+      '@vue/shared': 3.5.13
+      alien-signals: 1.0.13
+      minimatch: 9.0.5
+      muggle-string: 0.4.1
+      path-browserify: 1.0.1
+    optionalDependencies:
+      typescript: 5.8.2
+
   '@vue/reactivity@3.5.13':
     dependencies:
       '@vue/shared': 3.5.13
@@ -6542,6 +6800,8 @@ snapshots:
       '@algolia/requester-fetch': 5.22.0
       '@algolia/requester-node-http': 5.22.0
 
+  alien-signals@1.0.13: {}
+
   ansi-colors@4.1.3: {}
 
   ansi-regex@5.0.1: {}
@@ -6771,6 +7031,8 @@ snapshots:
 
   dayjs@1.11.13: {}
 
+  de-indent@1.0.2: {}
+
   debug@4.4.0:
     dependencies:
       ms: 2.1.3
@@ -6811,6 +7073,10 @@ snapshots:
     dependencies:
       domelementtype: 2.3.0
 
+  dompurify@3.2.7:
+    optionalDependencies:
+      '@types/trusted-types': 2.0.7
+
   domutils@3.2.2:
     dependencies:
       dom-serializer: 2.0.0
@@ -6931,6 +7197,8 @@ snapshots:
 
   escape-string-regexp@4.0.0: {}
 
+  eslint-linter-browserify@10.4.1: {}
+
   eslint-scope@9.1.2:
     dependencies:
       '@types/esrecurse': 4.3.1
@@ -7167,6 +7435,8 @@ snapshots:
     dependencies:
       '@types/hast': 3.0.4
 
+  he@1.2.0: {}
+
   hookable@5.5.3: {}
 
   html-void-elements@3.0.0: {}
@@ -7294,6 +7564,8 @@ snapshots:
 
   mark.js@8.11.1: {}
 
+  marked@14.0.0: {}
+
   mdast-util-to-hast@13.2.0:
     dependencies:
       '@types/hast': 3.0.4
@@ -7352,7 +7624,7 @@ snapshots:
 
   mitt@3.0.1: {}
 
-  mkdist@2.2.0(typescript@5.8.2)(vue@3.5.13(typescript@5.8.2)):
+  mkdist@2.2.0(typescript@5.8.2)(vue-tsc@2.2.12(typescript@5.8.2))(vue@3.5.13(typescript@5.8.2)):
     dependencies:
       autoprefixer: 10.4.21(postcss@8.5.3)
       citty: 0.1.6
@@ -7370,6 +7642,7 @@ snapshots:
     optionalDependencies:
       typescript: 5.8.2
       vue: 3.5.13(typescript@5.8.2)
+      vue-tsc: 2.2.12(typescript@5.8.2)
 
   mlly@1.7.4:
     dependencies:
@@ -7378,10 +7651,17 @@ snapshots:
       pkg-types: 1.3.1
       ufo: 1.5.4
 
+  monaco-editor@0.55.1:
+    dependencies:
+      dompurify: 3.2.7
+      marked: 14.0.0
+
   mri@1.2.0: {}
 
   ms@2.1.3: {}
 
+  muggle-string@0.4.1: {}
+
   nanoid@3.3.11: {}
 
   nanoid@5.1.5: {}
@@ -7402,12 +7682,20 @@ snapshots:
 
   obug@2.1.1: {}
 
+  oniguruma-parser@0.12.2: {}
+
   oniguruma-to-es@3.1.1:
     dependencies:
       emoji-regex-xs: 1.0.0
       regex: 6.0.1
       regex-recursion: 6.0.2
 
+  oniguruma-to-es@4.3.6:
+    dependencies:
+      oniguruma-parser: 0.12.2
+      regex: 6.1.0
+      regex-recursion: 6.0.2
+
   optionator@0.9.4:
     dependencies:
       deep-is: 0.1.4
@@ -7457,6 +7745,8 @@ snapshots:
 
   package-manager-detector@1.6.0: {}
 
+  path-browserify@1.0.1: {}
+
   path-exists@4.0.0: {}
 
   path-expression-matcher@1.1.3: {}
@@ -7852,6 +8142,10 @@ snapshots:
     dependencies:
       regex-utilities: 2.3.0
 
+  regex@6.1.0:
+    dependencies:
+      regex-utilities: 2.3.0
+
   require-directory@2.1.1: {}
 
   resolve-from@5.0.0: {}
@@ -7956,6 +8250,17 @@ snapshots:
       '@shikijs/vscode-textmate': 10.0.2
       '@types/hast': 3.0.4
 
+  shiki@4.2.0:
+    dependencies:
+      '@shikijs/core': 4.2.0
+      '@shikijs/engine-javascript': 4.2.0
+      '@shikijs/engine-oniguruma': 4.2.0
+      '@shikijs/langs': 4.2.0
+      '@shikijs/themes': 4.2.0
+      '@shikijs/types': 4.2.0
+      '@shikijs/vscode-textmate': 10.0.2
+      '@types/hast': 3.0.4
+
   siginfo@2.0.0: {}
 
   signal-exit@4.1.0: {}
@@ -8189,7 +8494,7 @@ snapshots:
 
   ufo@1.5.4: {}
 
-  unbuild@3.5.0(typescript@5.8.2)(vue@3.5.13(typescript@5.8.2)):
+  unbuild@3.5.0(typescript@5.8.2)(vue-tsc@2.2.12(typescript@5.8.2))(vue@3.5.13(typescript@5.8.2)):
     dependencies:
       '@rollup/plugin-alias': 5.1.1(rollup@4.37.0)
       '@rollup/plugin-commonjs': 28.0.3(rollup@4.37.0)
@@ -8205,7 +8510,7 @@ snapshots:
       hookable: 5.5.3
       jiti: 2.4.2
       magic-string: 0.30.17
-      mkdist: 2.2.0(typescript@5.8.2)(vue@3.5.13(typescript@5.8.2))
+      mkdist: 2.2.0(typescript@5.8.2)(vue-tsc@2.2.12(typescript@5.8.2))(vue@3.5.13(typescript@5.8.2))
       mlly: 1.7.4
       pathe: 2.0.3
       pkg-types: 2.1.0
@@ -8292,11 +8597,14 @@ snapshots:
       '@types/node': 24.12.0
       fsevents: 2.3.3
 
-  vite@6.2.3(@types/node@24.12.0)(jiti@2.4.2)(tsx@4.19.3):
+  vite@6.4.3(@types/node@24.12.0)(jiti@2.4.2)(tsx@4.19.3):
     dependencies:
       esbuild: 0.25.1
+      fdir: 6.5.0(picomatch@4.0.3)
+      picomatch: 4.0.3
       postcss: 8.5.3
       rollup: 4.37.0
+      tinyglobby: 0.2.15
     optionalDependencies:
       '@types/node': 24.12.0
       fsevents: 2.3.3
@@ -8357,10 +8665,10 @@ snapshots:
       - typescript
       - universal-cookie
 
-  vitest@4.1.7(@opentelemetry/api@1.9.0)(@types/node@24.12.0)(vite@6.2.3(@types/node@24.12.0)(jiti@2.4.2)(tsx@4.19.3)):
+  vitest@4.1.7(@opentelemetry/api@1.9.0)(@types/node@24.12.0)(vite@6.4.3(@types/node@24.12.0)(jiti@2.4.2)(tsx@4.19.3)):
     dependencies:
       '@vitest/expect': 4.1.7
-      '@vitest/mocker': 4.1.7(vite@6.2.3(@types/node@24.12.0)(jiti@2.4.2)(tsx@4.19.3))
+      '@vitest/mocker': 4.1.7(vite@6.4.3(@types/node@24.12.0)(jiti@2.4.2)(tsx@4.19.3))
       '@vitest/pretty-format': 4.1.7
       '@vitest/runner': 4.1.7
       '@vitest/snapshot': 4.1.7
@@ -8377,7 +8685,7 @@ snapshots:
       tinyexec: 1.2.3
       tinyglobby: 0.2.15
       tinyrainbow: 3.1.0
-      vite: 6.2.3(@types/node@24.12.0)(jiti@2.4.2)(tsx@4.19.3)
+      vite: 6.4.3(@types/node@24.12.0)(jiti@2.4.2)(tsx@4.19.3)
       why-is-node-running: 2.3.0
     optionalDependencies:
       '@opentelemetry/api': 1.9.0
@@ -8385,6 +8693,14 @@ snapshots:
     transitivePeerDependencies:
       - msw
 
+  vscode-uri@3.1.0: {}
+
+  vue-tsc@2.2.12(typescript@5.8.2):
+    dependencies:
+      '@volar/typescript': 2.4.15
+      '@vue/language-core': 2.2.12(typescript@5.8.2)
+      typescript: 5.8.2
+
   vue@3.5.13(typescript@5.8.2):
     dependencies:
       '@vue/compiler-dom': 3.5.13
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
index 9dab8abc..d91576d1 100644
--- a/pnpm-workspace.yaml
+++ b/pnpm-workspace.yaml
@@ -1,6 +1,7 @@
 packages:
   - "packages/*"
   - "packages/plugins/*"
+  - "apps/*"
   - "demos/*"
   - "docs"