diff --git a/.gitignore b/.gitignore
index 09a2363..c2c69fe 100644
--- a/.gitignore
+++ b/.gitignore
@@ -34,4 +34,5 @@ pnpm-debug.log*
 
 docs/designs/_ref
 
+.qoder/
 
diff --git a/bun.lock b/bun.lock
index 9db730e..8dc909d 100644
--- a/bun.lock
+++ b/bun.lock
@@ -6,6 +6,7 @@
       "name": "orchids-project",
       "dependencies": {
         "@astrojs/sitemap": "3.7.3",
+        "@libredb/libredb": "0.1.3",
         "@tailwindcss/vite": "4.3.1",
         "astro": "7.0.3",
         "tailwindcss": "4.3.1",
@@ -235,6 +236,8 @@
 
     "@jridgewell/trace-mapping": ["@jridgewell/trace-mapping@0.3.31", "", { "dependencies": { "@jridgewell/resolve-uri": "^3.1.0", "@jridgewell/sourcemap-codec": "^1.4.14" } }, "sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw=="],
 
+    "@libredb/libredb": ["@libredb/libredb@0.1.3", "", { "bin": { "libredb": "dist/cli/main.js" } }, "sha512-TuQRLz+sEIx0YJSvT9tiin4yehpqdG1kalPgVtnGhw78JmgUsLryS3/sbNMI2X3sTxE+8Gel7CvUim6s2azYDQ=="],
+
     "@napi-rs/wasm-runtime": ["@napi-rs/wasm-runtime@1.1.6", "", { "dependencies": { "@tybys/wasm-util": "^0.10.3" }, "peerDependencies": { "@emnapi/core": "^1.7.1", "@emnapi/runtime": "^1.7.1" } }, "sha512-ZLv/JdUfkvOy9eCnnBaGfiO+XimbjebAeO+MRQqD/B+FR1tnRN0tpKSJHRbE8sFfS6aqsXZ67TQjfwfsxULVbg=="],
 
     "@oslojs/encoding": ["@oslojs/encoding@1.1.0", "", {}, "sha512-70wQhgYmndg4GCPxPPxPGevRKqTIJ2Nh4OkiMWmDAVYsTQ+Ta7Sq+rPevXyXGdzr30/qZBnyOalCszoMxlyldQ=="],
diff --git a/docs/superpowers/plans/2026-06-30-playground-opfs-editor.md b/docs/superpowers/plans/2026-06-30-playground-opfs-editor.md
new file mode 100644
index 0000000..e4e13dc
--- /dev/null
+++ b/docs/superpowers/plans/2026-06-30-playground-opfs-editor.md
@@ -0,0 +1,1066 @@
+# /playground OPFS Editor Implementation Plan
+
+> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.
+
+**Goal:** Add a public `/playground` route that runs a real OPFS-backed LibreDB entirely in the browser — preloaded sample data, a clickable command cheatsheet, reset, and graceful in-memory fallback — with no backend and no login.
+
+**Architecture:** A SSR-safe Astro page reuses the site's `StudioShell` chrome and mounts a client-only island. The engine runs in a Web Worker (OPFS sync-access handles are Worker-only); the UI talks to it over `postMessage`. Pure, testable modules (`protocol`, `engine`) hold the command grammar and lens dispatch; the worker and client are thin shells around them.
+
+**Tech Stack:** Astro 7 (static, no React), TypeScript (strict), Tailwind 4, `@libredb/libredb@0.1.3` (`/browser` entry), `bun:test`, Playwright (MCP) for browser verification.
+
+## Global Constraints
+
+- Import the engine **only** from `@libredb/libredb/browser` (its import graph reaches no `node:` module). Never import the bare `@libredb/libredb`.
+- **No engine/DOM/Worker code may run during SSR.** All engine code lives in the Worker or in client `<script>` blocks that touch `navigator`/`Worker` only after load — never in Astro frontmatter.
+- The Worker is the **single owner** of the OPFS sync-access handle. OPFS file name: `playground.libredb`.
+- On any failure acquiring the handle (unsupported browser, insecure context, second-tab exclusive-lock contention) → fall back to in-memory `open()` and report `mode: "memory"`.
+- Call `db.close()` on worker teardown so the exclusive lock frees for the next reload.
+- Homepage / marketing build must stay unaffected. The route name is exactly `/playground`.
+- The repo's build mutates two tracked `docker-compose.example.yml` files via `scripts/sync-docker-compose.mjs`; revert them after any `bun run build` so the branch stays clean.
+- Verify with `bun run gate` (typecheck + format + lint + knip + test) before claiming done.
+
+## Verified `@libredb/libredb/browser` API (0.1.3)
+
+```ts
+import { open, opfsFileSystem, kv, doc, table } from "@libredb/libredb/browser";
+import type { Database, TableSchema, Row, Doc, SyncAccessHandle } from "@libredb/libredb/browser";
+
+open(): Database                                  // in-memory, works anywhere (incl. bun)
+open({ path, fs }): Database                      // durable; fs REQUIRED with path
+opfsFileSystem(handle: SyncAccessHandle): FileSystem
+db.close(): void
+
+kv(db).get(key): string | undefined
+kv(db).set(key, value): { changed: number }
+kv(db).delete(key): { changed: number }
+kv(db).prefix(p): { toArray(): { key: string; value: string }[] }   // throws if p === ""
+kv(db).range(start, end): { toArray(): { key: string; value: string }[] }
+
+doc(db, coll).put(id, docObj): { changed }
+doc(db, coll).get(id): Doc | undefined
+doc(db, coll).delete(id): { changed }
+doc(db, coll).all(): { toArray(): { id: string; doc: Doc }[] }
+doc(db, coll).find(predicate): { toArray(): { id: string; doc: Doc }[] }
+
+table(db, name, schema).insert(row): { changed }   // throws on invalid/unknown field
+table(db, name, schema).get(pk): Row | undefined
+table(db, name, schema).delete(pk): { changed }
+table(db, name, schema).all(): { toArray(): Row[] }
+// TableSchema = { primaryKey: string; columns: Record<string,"string"|"number"|"boolean"|"object"> }
+// primaryKey column must be type "string".
+```
+
+## File Structure
+
+| File | Responsibility |
+| --- | --- |
+| `src/scripts/playground/protocol.ts` | **Pure.** Message types (`WorkerRequest`/`WorkerResponse`/`Mode`/`RunResult`), `Command` union, `parseCommand(text): Command`. No DOM, no engine import. |
+| `src/scripts/playground/protocol.test.ts` | `bun:test` for `parseCommand`. |
+| `src/scripts/playground/engine.ts` | Lens dispatch: `USERS_SCHEMA`, `seed(db)`, `isSeeded(db)`, `execute(db, cmd): RunResult`. Imports `@libredb/libredb/browser`. |
+| `src/scripts/playground/engine.test.ts` | `bun:test` against an in-memory `open()` db. |
+| `src/scripts/playground/db.worker.ts` | Worker shell: boot (OPFS→memory fallback), seed-if-empty, message loop (`run`/`reset`/`close`/`ready`), `db.close()` teardown. |
+| `src/scripts/playground/client.ts` | Main-thread bridge: spawn worker, `call()` with ids, wire editor/cheatsheet/reset, render grid + console, persistence badge/banner, `pagehide` teardown. |
+| `src/components/studio/Cheatsheet.astro` | Clickable command list grouped per lens; each button has `data-cmd`. |
+| `src/components/studio/Playground.astro` | Editor pane markup (command input, Run, result grid, badge/banner, Reset) + mounts `Cheatsheet`; includes the client `<script>`. |
+| `src/pages/playground.astro` | Route; wraps `Playground` in `StudioShell`; SEO title/description. |
+| `package.json` | Add `@libredb/libredb@0.1.3` (already installed during planning). |
+| `src/components/studio/TopBar.astro` | Add a `/playground` nav link (homepage/sections nav data untouched). |
+
+---
+
+## Task 1: Command protocol & parser (pure, TDD)
+
+**Files:**
+- Create: `src/scripts/playground/protocol.ts`
+- Test: `src/scripts/playground/protocol.test.ts`
+
+**Interfaces:**
+- Produces: `parseCommand(text: string): Command`; types `Command`, `RunResult`, `WorkerRequest`, `WorkerResponse`, `Mode`.
+
+- [ ] **Step 1: Write the failing test** — `src/scripts/playground/protocol.test.ts`
+
+```ts
+import { test, expect } from "bun:test";
+import { parseCommand } from "./protocol";
+
+test("get parses key", () => {
+  expect(parseCommand("get config:theme")).toEqual({ op: "get", key: "config:theme" });
+});
+
+test("put captures the whole value tail", () => {
+  expect(parseCommand("put config:theme dark mode")).toEqual({
+    op: "put", key: "config:theme", value: "dark mode",
+  });
+});
+
+test("delete / prefix / range", () => {
+  expect(parseCommand("delete config:theme")).toEqual({ op: "delete", key: "config:theme" });
+  expect(parseCommand("prefix config:")).toEqual({ op: "prefix", prefix: "config:" });
+  expect(parseCommand("range a z")).toEqual({ op: "range", start: "a", end: "z" });
+});
+
+test("doc family", () => {
+  expect(parseCommand("doc.all articles")).toEqual({ op: "docall", collection: "articles" });
+  expect(parseCommand("doc.get articles a1")).toEqual({ op: "docget", collection: "articles", id: "a1" });
+  expect(parseCommand("doc.delete articles a1")).toEqual({ op: "docdel", collection: "articles", id: "a1" });
+  expect(parseCommand('doc.put articles a3 {"title":"Hi"}')).toEqual({
+    op: "docput", collection: "articles", id: "a3", json: { title: "Hi" },
+  });
+  expect(parseCommand('doc.find articles {"published":true}')).toEqual({
+    op: "docfind", collection: "articles", predicate: { published: true },
+  });
+});
+
+test("relational family", () => {
+  expect(parseCommand("select * from users")).toEqual({ op: "select", table: "users" });
+  expect(parseCommand("select * from users limit 2")).toEqual({ op: "select", table: "users", limit: 2 });
+  expect(parseCommand('insert into users {"id":"4","name":"Lin","age":29,"active":true}')).toEqual({
+    op: "insert", table: "users", row: { id: "4", name: "Lin", age: 29, active: true },
+  });
+  expect(parseCommand("delete from users 4")).toEqual({ op: "remove", table: "users", pk: "4" });
+});
+
+test("help", () => {
+  expect(parseCommand("help")).toEqual({ op: "help" });
+});
+
+test("empty input is an error", () => {
+  expect(parseCommand("   ")).toEqual({ op: "error", error: "empty command — type 'help'." });
+});
+
+test("unknown verb is a friendly error", () => {
+  expect(parseCommand("frobnicate x")).toMatchObject({ op: "error" });
+});
+
+test("invalid JSON tail is a friendly error, never a throw", () => {
+  expect(parseCommand("doc.put articles a3 {not json}")).toMatchObject({ op: "error" });
+  expect(parseCommand('insert into users ["not","an","object"]')).toMatchObject({ op: "error" });
+});
+
+test("prefix requires a non-empty argument", () => {
+  expect(parseCommand("prefix")).toMatchObject({ op: "error" });
+});
+```
+
+- [ ] **Step 2: Run test to verify it fails**
+
+Run: `bun test src/scripts/playground/protocol.test.ts`
+Expected: FAIL — `Cannot find module "./protocol"`.
+
+- [ ] **Step 3: Write the implementation** — `src/scripts/playground/protocol.ts`
+
+```ts
+/**
+ * Command grammar + worker message protocol for the /playground editor.
+ * Pure: no DOM, no engine import. Imports only types from the browser entry.
+ */
+import type { Doc, Row } from "@libredb/libredb/browser";
+
+export type Mode = "opfs" | "memory";
+
+/** A parsed, executable command (or a friendly parse error). */
+export type Command =
+  | { op: "get"; key: string }
+  | { op: "put"; key: string; value: string }
+  | { op: "delete"; key: string }
+  | { op: "prefix"; prefix: string }
+  | { op: "range"; start: string; end: string }
+  | { op: "docget"; collection: string; id: string }
+  | { op: "docput"; collection: string; id: string; json: Doc }
+  | { op: "docdel"; collection: string; id: string }
+  | { op: "docall"; collection: string }
+  | { op: "docfind"; collection: string; predicate: Doc }
+  | { op: "select"; table: string; limit?: number }
+  | { op: "insert"; table: string; row: Row }
+  | { op: "remove"; table: string; pk: string }
+  | { op: "help" }
+  | { op: "error"; error: string };
+
+/** Normalized result a command produces, shaped for the grid or a console line. */
+export type RunResult =
+  | { kind: "rows"; columns: string[]; rows: Array<Record<string, unknown>> }
+  | { kind: "message"; message: string }
+  | { kind: "error"; error: string };
+
+export type WorkerRequest =
+  | { id: number; op: "ready" }
+  | { id: number; op: "run"; text: string }
+  | { id: number; op: "reset" }
+  | { id: number; op: "close" };
+
+export type WorkerResponse =
+  | { id: number; kind: "ready"; mode: Mode }
+  | { id: number; kind: "result"; result: RunResult }
+  | { id: number; kind: "closed" };
+
+const err = (error: string): Command => ({ op: "error", error });
+
+/** Parse a JSON object tail; non-objects/arrays/garbage become a friendly error. */
+function parseObject(tail: string): Record<string, unknown> | { error: string } {
+  let value: unknown;
+  try {
+    value = JSON.parse(tail);
+  } catch {
+    return { error: `invalid JSON: ${tail}` };
+  }
+  if (value === null || typeof value !== "object" || Array.isArray(value)) {
+    return { error: "expected a JSON object, e.g. {\"key\":\"value\"}" };
+  }
+  return value as Record<string, unknown>;
+}
+
+/**
+ * Parse one command line. Total: never throws; unrecognized or malformed input
+ * returns `{ op: "error" }` so the worker boundary stays clean.
+ */
+export function parseCommand(text: string): Command {
+  const line = text.trim();
+  if (line === "") return err("empty command — type 'help'.");
+
+  // doc.<verb> <collection> ...
+  if (line.startsWith("doc.")) {
+    const [verb, ...rest] = line.split(/\s+/);
+    const collection = rest[0];
+    if (!collection) return err(`${verb} needs a collection — type 'help'.`);
+    switch (verb) {
+      case "doc.all":
+        return { op: "docall", collection };
+      case "doc.get": {
+        const id = rest[1];
+        return id ? { op: "docget", collection, id } : err("doc.get needs an id.");
+      }
+      case "doc.delete": {
+        const id = rest[1];
+        return id ? { op: "docdel", collection, id } : err("doc.delete needs an id.");
+      }
+      case "doc.put": {
+        const id = rest[1];
+        if (!id) return err("doc.put needs an id and a JSON document.");
+        const json = parseObject(line.slice(line.indexOf(id) + id.length).trim());
+        return "error" in json ? err(json.error) : { op: "docput", collection, id, json };
+      }
+      case "doc.find": {
+        const predicate = parseObject(line.slice(line.indexOf(collection) + collection.length).trim());
+        return "error" in predicate ? err(predicate.error) : { op: "docfind", collection, predicate };
+      }
+      default:
+        return err(`unknown command: ${verb} — type 'help'.`);
+    }
+  }
+
+  // select * from <table> [limit <n>]
+  const select = /^select\s+\*\s+from\s+(\S+)(?:\s+limit\s+(\d+))?\s*$/i.exec(line);
+  if (select) {
+    const table = select[1];
+    return select[2] ? { op: "select", table, limit: Number(select[2]) } : { op: "select", table };
+  }
+
+  // insert into <table> <json>
+  const insert = /^insert\s+into\s+(\S+)\s+(.+)$/i.exec(line);
+  if (insert) {
+    const row = parseObject(insert[2]);
+    return "error" in row ? err(row.error) : { op: "insert", table: insert[1], row };
+  }
+
+  // delete from <table> <pk>
+  const remove = /^delete\s+from\s+(\S+)\s+(\S+)\s*$/i.exec(line);
+  if (remove) return { op: "remove", table: remove[1], pk: remove[2] };
+
+  // single-keyword and kv verbs
+  const [verb, ...rest] = line.split(/\s+/);
+  switch (verb) {
+    case "help":
+      return { op: "help" };
+    case "get":
+      return rest[0] ? { op: "get", key: rest[0] } : err("get needs a key.");
+    case "delete":
+      return rest[0] ? { op: "delete", key: rest[0] } : err("delete needs a key.");
+    case "prefix":
+      return rest[0] ? { op: "prefix", prefix: rest[0] } : err("prefix needs a non-empty argument.");
+    case "range":
+      return rest[0] && rest[1]
+        ? { op: "range", start: rest[0], end: rest[1] }
+        : err("range needs a start and an end key.");
+    case "put": {
+      const key = rest[0];
+      if (!key) return err("put needs a key and a value.");
+      const value = line.slice(line.indexOf(key) + key.length).trim();
+      return value ? { op: "put", key, value } : err("put needs a value.");
+    }
+    default:
+      return err(`unknown command: ${verb} — type 'help'.`);
+  }
+}
+```
+
+- [ ] **Step 4: Run test to verify it passes**
+
+Run: `bun test src/scripts/playground/protocol.test.ts`
+Expected: PASS (all tests).
+
+- [ ] **Step 5: Commit**
+
+```bash
+git add src/scripts/playground/protocol.ts src/scripts/playground/protocol.test.ts
+git commit -m "feat(playground): command grammar + worker protocol parser (#19)"
+```
+
+---
+
+## Task 2: Engine — seed, isSeeded, execute (TDD against in-memory db)
+
+**Files:**
+- Create: `src/scripts/playground/engine.ts`
+- Test: `src/scripts/playground/engine.test.ts`
+
+**Interfaces:**
+- Consumes: `Command`, `RunResult` from `./protocol`.
+- Produces: `USERS_SCHEMA`, `seed(db: Database): void`, `isSeeded(db: Database): boolean`, `execute(db: Database, cmd: Command): RunResult`.
+
+- [ ] **Step 1: Write the failing test** — `src/scripts/playground/engine.test.ts`
+
+```ts
+import { test, expect } from "bun:test";
+import { open } from "@libredb/libredb/browser";
+import { seed, isSeeded, execute, USERS_SCHEMA } from "./engine";
+import { parseCommand } from "./protocol";
+
+function seeded() {
+  const db = open(); // in-memory; works under bun (no node: imports)
+  seed(db);
+  return db;
+}
+const run = (db: ReturnType<typeof open>, text: string) => execute(db, parseCommand(text));
+
+test("schema primary key is a string column", () => {
+  expect(USERS_SCHEMA.primaryKey).toBe("id");
+  expect(USERS_SCHEMA.columns.id).toBe("string");
+});
+
+test("seed populates all three lenses and isSeeded flips", () => {
+  const db = open();
+  expect(isSeeded(db)).toBe(false);
+  seed(db);
+  expect(isSeeded(db)).toBe(true);
+});
+
+test("kv get / put / prefix", () => {
+  const db = seeded();
+  expect(run(db, "get config:theme")).toEqual({ kind: "message", message: "config:theme = dark" });
+  expect(run(db, "put config:locale tr")).toMatchObject({ kind: "message" });
+  expect(run(db, "get config:locale")).toEqual({ kind: "message", message: "config:locale = tr" });
+  const prefixed = run(db, "prefix config:");
+  expect(prefixed.kind).toBe("rows");
+  if (prefixed.kind === "rows") {
+    expect(prefixed.columns).toEqual(["key", "value"]);
+    expect(prefixed.rows.length).toBeGreaterThanOrEqual(3);
+  }
+});
+
+test("relational select / insert / remove round-trips", () => {
+  const db = seeded();
+  const before = run(db, "select * from users");
+  expect(before.kind).toBe("rows");
+  if (before.kind === "rows") expect(before.rows.length).toBe(3);
+
+  run(db, 'insert into users {"id":"4","name":"Lin","age":29,"active":true}');
+  const after = run(db, "select * from users");
+  if (after.kind === "rows") expect(after.rows.length).toBe(4);
+
+  const limited = run(db, "select * from users limit 2");
+  if (limited.kind === "rows") expect(limited.rows.length).toBe(2);
+
+  run(db, "delete from users 4");
+  const final = run(db, "select * from users");
+  if (final.kind === "rows") expect(final.rows.length).toBe(3);
+});
+
+test("document all / find / put", () => {
+  const db = seeded();
+  const all = run(db, "doc.all articles");
+  expect(all.kind).toBe("rows");
+  if (all.kind === "rows") expect(all.rows.length).toBe(2);
+  const published = run(db, 'doc.find articles {"published":true}');
+  if (published.kind === "rows") expect(published.rows.length).toBe(1);
+});
+
+test("unknown table is a friendly error, not a throw", () => {
+  const db = seeded();
+  expect(run(db, "select * from ghosts").kind).toBe("error");
+});
+
+test("insert validation errors surface as error result, never throw", () => {
+  const db = seeded();
+  expect(run(db, 'insert into users {"id":"x"}').kind).toBe("error");
+});
+
+test("help returns a message listing commands", () => {
+  const db = seeded();
+  const r = run(db, "help");
+  expect(r.kind).toBe("message");
+  if (r.kind === "message") expect(r.message).toContain("get");
+});
+```
+
+- [ ] **Step 2: Run test to verify it fails**
+
+Run: `bun test src/scripts/playground/engine.test.ts`
+Expected: FAIL — `Cannot find module "./engine"`.
+
+- [ ] **Step 3: Write the implementation** — `src/scripts/playground/engine.ts`
+
+```ts
+/**
+ * Engine: maps a parsed Command onto the LibreDB lenses and normalizes the
+ * outcome into a RunResult. Pure of the DOM and the worker transport; uses the
+ * browser entry's in-memory open() in tests and the OPFS-backed db at runtime.
+ */
+import { kv, doc, table, type Database, type TableSchema } from "@libredb/libredb/browser";
+import type { Command, RunResult } from "./protocol";
+
+export const USERS_SCHEMA: TableSchema = {
+  primaryKey: "id",
+  columns: { id: "string", name: "string", age: "number", active: "boolean" },
+};
+
+/** The one demo table. Keeps `select/insert/remove` from applying a schema to an unknown name. */
+const TABLES: Record<string, TableSchema> = { users: USERS_SCHEMA };
+
+export function isSeeded(db: Database): boolean {
+  return kv(db).get("config:theme") !== undefined;
+}
+
+export function seed(db: Database): void {
+  const store = kv(db);
+  store.set("config:theme", "dark");
+  store.set("config:locale", "en");
+  store.set("config:engine", "libredb");
+
+  const articles = doc(db, "articles");
+  articles.put("a1", { title: "Local-first databases", author: "Ada", published: true });
+  articles.put("a2", { title: "OPFS in the browser", author: "Linus", published: false });
+
+  const users = table(db, "users", USERS_SCHEMA);
+  users.insert({ id: "1", name: "Ada", age: 36, active: true });
+  users.insert({ id: "2", name: "Linus", age: 41, active: true });
+  users.insert({ id: "3", name: "Grace", age: 31, active: false });
+}
+
+const HELP = [
+  "kv:    get <key> · put <key> <value> · delete <key> · prefix <p> · range <a> <b>",
+  "doc:   doc.all <coll> · doc.get <coll> <id> · doc.put <coll> <id> <json> · doc.find <coll> <json> · doc.delete <coll> <id>",
+  "table: select * from users [limit n] · insert into users <json> · delete from users <pk>",
+  "meta:  help · reset",
+].join("\n");
+
+function rowsFromDocs(entries: { id: string; doc: Record<string, unknown> }[]): RunResult {
+  const cols = new Set<string>(["id"]);
+  for (const e of entries) for (const k of Object.keys(e.doc)) cols.add(k);
+  return {
+    kind: "rows",
+    columns: [...cols],
+    rows: entries.map((e) => ({ id: e.id, ...e.doc })),
+  };
+}
+
+/** Execute a parsed command. Total: lens throws (validation, unknown table) become error results. */
+export function execute(db: Database, cmd: Command): RunResult {
+  try {
+    switch (cmd.op) {
+      case "error":
+        return { kind: "error", error: cmd.error };
+      case "help":
+        return { kind: "message", message: HELP };
+      case "get": {
+        const v = kv(db).get(cmd.key);
+        return { kind: "message", message: v === undefined ? `(nil) — no value at "${cmd.key}"` : `${cmd.key} = ${v}` };
+      }
+      case "put": {
+        const r = kv(db).set(cmd.key, cmd.value);
+        return { kind: "message", message: `OK — set "${cmd.key}" (${r.changed} changed)` };
+      }
+      case "delete": {
+        const r = kv(db).delete(cmd.key);
+        return { kind: "message", message: `OK — deleted "${cmd.key}" (${r.changed} changed)` };
+      }
+      case "prefix":
+        return { kind: "rows", columns: ["key", "value"], rows: kv(db).prefix(cmd.prefix).toArray() };
+      case "range":
+        return { kind: "rows", columns: ["key", "value"], rows: kv(db).range(cmd.start, cmd.end).toArray() };
+      case "docget": {
+        const d = doc(db, cmd.collection).get(cmd.id);
+        return { kind: "message", message: d === undefined ? `(nil) — no document ${cmd.collection}:${cmd.id}` : JSON.stringify(d, null, 2) };
+      }
+      case "docput": {
+        const r = doc(db, cmd.collection).put(cmd.id, cmd.json);
+        return { kind: "message", message: `OK — put ${cmd.collection}:${cmd.id} (${r.changed} changed)` };
+      }
+      case "docdel": {
+        const r = doc(db, cmd.collection).delete(cmd.id);
+        return { kind: "message", message: `OK — deleted ${cmd.collection}:${cmd.id} (${r.changed} changed)` };
+      }
+      case "docall":
+        return rowsFromDocs(doc(db, cmd.collection).all().toArray());
+      case "docfind":
+        return rowsFromDocs(doc(db, cmd.collection).find(cmd.predicate).toArray());
+      case "select": {
+        const schema = TABLES[cmd.table];
+        if (!schema) return { kind: "error", error: `unknown table: ${cmd.table}. try "users".` };
+        let rows = table(db, cmd.table, schema).all().toArray() as Array<Record<string, unknown>>;
+        if (cmd.limit !== undefined) rows = rows.slice(0, cmd.limit);
+        return { kind: "rows", columns: Object.keys(schema.columns), rows };
+      }
+      case "insert": {
+        const schema = TABLES[cmd.table];
+        if (!schema) return { kind: "error", error: `unknown table: ${cmd.table}. try "users".` };
+        const r = table(db, cmd.table, schema).insert(cmd.row);
+        return { kind: "message", message: `OK — inserted into ${cmd.table} (${r.changed} changed)` };
+      }
+      case "remove": {
+        const schema = TABLES[cmd.table];
+        if (!schema) return { kind: "error", error: `unknown table: ${cmd.table}. try "users".` };
+        const r = table(db, cmd.table, schema).delete(cmd.pk);
+        return { kind: "message", message: `OK — deleted ${cmd.table}:${cmd.pk} (${r.changed} changed)` };
+      }
+    }
+  } catch (e) {
+    return { kind: "error", error: (e as Error).message };
+  }
+}
+```
+
+- [ ] **Step 4: Run test to verify it passes**
+
+Run: `bun test src/scripts/playground/engine.test.ts`
+Expected: PASS. (If `open()` cannot run under bun, fall back to testing only the schema/`parseCommand` glue and verify `execute` behavior in the Playwright step instead — but it is expected to pass since the browser entry imports no `node:` module.)
+
+- [ ] **Step 5: Commit**
+
+```bash
+git add src/scripts/playground/engine.ts src/scripts/playground/engine.test.ts
+git commit -m "feat(playground): lens-dispatch engine + sample seed (#19)"
+```
+
+---
+
+## Task 3: Web Worker shell (boot, fallback, seed, reset, teardown)
+
+**Files:**
+- Create: `src/scripts/playground/db.worker.ts`
+
+**Interfaces:**
+- Consumes: `seed`, `isSeeded`, `execute` from `./engine`; `parseCommand` from `./protocol`; `WorkerRequest`, `WorkerResponse`, `Mode` from `./protocol`.
+- Produces: a module Worker that answers `WorkerRequest` with `WorkerResponse`. No unit test (Worker + OPFS env); verified by Playwright in Task 6.
+
+- [ ] **Step 1: Write the implementation** — `src/scripts/playground/db.worker.ts`
+
+```ts
+/**
+ * The /playground database worker. Sole owner of the OPFS sync-access handle.
+ * Durable when OPFS is available; otherwise transparently in-memory. Never
+ * throws across postMessage — every failure becomes a structured response.
+ */
+import { open, opfsFileSystem, type Database } from "@libredb/libredb/browser";
+import { seed, isSeeded, execute } from "./engine";
+import { parseCommand } from "./protocol";
+import type { WorkerRequest, WorkerResponse, Mode } from "./protocol";
+
+const FILE = "playground.libredb";
+
+let db: Database;
+let mode: Mode = "memory";
+
+/** Acquire the OPFS handle (Worker-only, secure context, exclusive lock) or fall back to in-memory. */
+async function boot(): Promise<void> {
+  try {
+    const root = await navigator.storage.getDirectory();
+    const file = await root.getFileHandle(FILE, { create: true });
+    const handle = await file.createSyncAccessHandle();
+    db = open({ path: FILE, fs: opfsFileSystem(handle) });
+    mode = "opfs";
+  } catch {
+    db = open();
+    mode = "memory";
+  }
+  if (!isSeeded(db)) seed(db);
+}
+
+/** Wipe the durable file (or the in-memory db) and reseed. */
+async function reset(): Promise<void> {
+  try {
+    db.close();
+  } catch {
+    /* already closed */
+  }
+  if (mode === "opfs") {
+    try {
+      const root = await navigator.storage.getDirectory();
+      await root.removeEntry(FILE).catch(() => {});
+    } catch {
+      /* ignore */
+    }
+  }
+  await boot();
+}
+
+let ready = boot();
+
+const reply = (msg: WorkerResponse) => self.postMessage(msg);
+
+self.onmessage = async (event: MessageEvent<WorkerRequest>) => {
+  await ready;
+  const msg = event.data;
+  try {
+    switch (msg.op) {
+      case "ready":
+        reply({ id: msg.id, kind: "ready", mode });
+        return;
+      case "run":
+        reply({ id: msg.id, kind: "result", result: execute(db, parseCommand(msg.text)) });
+        return;
+      case "reset":
+        ready = reset();
+        await ready;
+        reply({ id: msg.id, kind: "result", result: { kind: "message", message: "Sandbox reset to sample data." } });
+        return;
+      case "close":
+        try {
+          db.close();
+        } catch {
+          /* already closed */
+        }
+        reply({ id: msg.id, kind: "closed" });
+        return;
+    }
+  } catch (e) {
+    reply({ id: msg.id, kind: "result", result: { kind: "error", error: (e as Error).message } });
+  }
+};
+```
+
+- [ ] **Step 2: Typecheck**
+
+Run: `bunx astro check 2>&1 | tail -20` (worker file is type-checked; expect no errors in `db.worker.ts`).
+Expected: no TypeScript errors referencing `db.worker.ts`. (`navigator.storage.getDirectory` / `createSyncAccessHandle` resolve via the DOM lib bundled in TS; if the WebWorker lib types are missing, add a minimal local declaration rather than `any`.)
+
+- [ ] **Step 3: Commit**
+
+```bash
+git add src/scripts/playground/db.worker.ts
+git commit -m "feat(playground): OPFS worker with in-memory fallback + reset (#19)"
+```
+
+---
+
+## Task 4: Client bridge (main-thread transport + DOM)
+
+**Files:**
+- Create: `src/scripts/playground/client.ts`
+
+**Interfaces:**
+- Consumes: `WorkerRequest`, `WorkerResponse`, `RunResult`, `Mode` from `./protocol`.
+- Produces: a default side-effecting module that, on import, wires the `[data-pg-*]` DOM (defined in Task 5) to the worker. Expects these hooks in the DOM: `[data-pg-root]`, `[data-pg-input]`, `[data-pg-run]`, `[data-pg-reset]`, `[data-pg-grid]`, `[data-pg-badge]`, `[data-pg-banner]`, and cheatsheet buttons `[data-cmd]`.
+
+- [ ] **Step 1: Write the implementation** — `src/scripts/playground/client.ts`
+
+```ts
+/**
+ * Main-thread bridge for /playground. Spawns the db worker, exchanges
+ * id-tagged messages, and renders results into the editor's grid/console.
+ * Touches navigator/Worker only at import time on the client (never SSR).
+ */
+import type { WorkerRequest, WorkerResponse, RunResult, Mode } from "./protocol";
+
+const root = document.querySelector<HTMLElement>("[data-pg-root]");
+if (root) init(root);
+
+function init(root: HTMLElement): void {
+  const input = root.querySelector<HTMLTextAreaElement>("[data-pg-input]");
+  const runBtn = root.querySelector<HTMLButtonElement>("[data-pg-run]");
+  const resetBtn = root.querySelector<HTMLButtonElement>("[data-pg-reset]");
+  const grid = root.querySelector<HTMLElement>("[data-pg-grid]");
+  const badge = root.querySelector<HTMLElement>("[data-pg-badge]");
+  const banner = root.querySelector<HTMLElement>("[data-pg-banner]");
+  if (!input || !runBtn || !grid) return;
+
+  const worker = new Worker(new URL("./db.worker.ts", import.meta.url), { type: "module" });
+
+  let seq = 0;
+  const pending = new Map<number, (r: WorkerResponse) => void>();
+  worker.addEventListener("message", (e: MessageEvent<WorkerResponse>) => {
+    pending.get(e.data.id)?.(e.data);
+    pending.delete(e.data.id);
+  });
+  function call(req: Omit<WorkerRequest, "id">): Promise<WorkerResponse> {
+    const id = ++seq;
+    return new Promise((resolve) => {
+      pending.set(id, resolve);
+      worker.postMessage({ ...req, id } as WorkerRequest);
+    });
+  }
+
+  // Handshake: learn persistence mode, show badge/banner.
+  void call({ op: "ready" }).then((res) => {
+    if (res.kind === "ready") showMode(res.mode);
+  });
+  function showMode(mode: Mode): void {
+    if (badge) {
+      badge.textContent = mode === "opfs" ? "OPFS · persistent" : "in-memory · this session";
+      badge.dataset.mode = mode;
+    }
+    if (banner) banner.hidden = mode === "opfs";
+  }
+
+  async function run(text: string): Promise<void> {
+    const t = text.trim();
+    if (t === "") return;
+    if (t.toLowerCase() === "reset") return void doReset();
+    const res = await call({ op: "run", text: t });
+    if (res.kind === "result") render(res.result);
+  }
+
+  async function doReset(): Promise<void> {
+    const res = await call({ op: "reset" });
+    if (res.kind === "result") render(res.result);
+    await run("select * from users");
+  }
+
+  function render(result: RunResult): void {
+    if (result.kind === "rows") return renderGrid(grid!, result.columns, result.rows);
+    if (result.kind === "error") return renderConsole(`✕ ${result.error}`, "error");
+    renderConsole(result.message, "ok");
+  }
+
+  runBtn.addEventListener("click", () => void run(input.value));
+  input.addEventListener("keydown", (e) => {
+    if ((e.metaKey || e.ctrlKey) && e.key === "Enter") {
+      e.preventDefault();
+      void run(input.value);
+    }
+  });
+  resetBtn?.addEventListener("click", () => void doReset());
+
+  // Cheatsheet: clicking a command fills the editor and runs it (zero typing).
+  root.querySelectorAll<HTMLElement>("[data-cmd]").forEach((b) =>
+    b.addEventListener("click", () => {
+      const cmd = b.dataset.cmd ?? "";
+      input.value = cmd;
+      void run(cmd);
+    }),
+  );
+
+  // Free the exclusive OPFS lock so a reload reacquires cleanly. The worker
+  // runs db.close() then self.close() on 'close'; we must NOT terminate() here
+  // (it races and usually wins before the worker releases the handle). Skip
+  // bfcache (event.persisted) so a back/forward restore keeps a live worker.
+  window.addEventListener("pagehide", (e) => {
+    if (e.persisted) return;
+    void call({ op: "close" });
+  });
+
+  // First view: show the seeded users table.
+  void run("select * from users");
+}
+
+function renderGrid(grid: HTMLElement, columns: string[], rows: Array<Record<string, unknown>>): void {
+  if (rows.length === 0) {
+    grid.innerHTML = `<p class="p-4 text-[13px] text-faint">No rows.</p>`;
+    return;
+  }
+  const cell = (v: unknown) => String(v ?? "");
+  const head = columns.map((c) => `<th class="border-b border-edge px-3 py-2 text-left font-medium text-muted">${escapeHtml(c)}</th>`).join("");
+  const body = rows
+    .map(
+      (r) =>
+        `<tr class="hover:bg-panel/60">${columns
+          .map((c) => `<td class="border-b border-edge px-3 py-1.5 text-fg">${escapeHtml(cell(r[c]))}</td>`)
+          .join("")}</tr>`,
+    )
+    .join("");
+  grid.innerHTML = `<table class="w-full border-collapse font-mono text-[12.5px]"><thead><tr>${head}</tr></thead><tbody>${body}</tbody></table>`;
+}
+
+/** Reuse the studio console toast if present; otherwise inline-line fallback. */
+function renderConsole(message: string, kind: "ok" | "error"): void {
+  const host = document.querySelector<HTMLElement>("[data-pg-log]");
+  if (!host) return;
+  const line = document.createElement("pre");
+  line.className = kind === "error" ? "text-bad whitespace-pre-wrap" : "text-ok whitespace-pre-wrap";
+  line.textContent = message;
+  host.prepend(line);
+}
+
+function escapeHtml(s: string): string {
+  return s.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+}
+```
+
+- [ ] **Step 2: Commit** (typecheck happens in Task 5 once the DOM exists)
+
+```bash
+git add src/scripts/playground/client.ts
+git commit -m "feat(playground): main-thread worker bridge + grid renderer (#19)"
+```
+
+---
+
+## Task 5: UI — Cheatsheet, Playground pane, route, nav link
+
+**Files:**
+- Create: `src/components/studio/Cheatsheet.astro`
+- Create: `src/components/studio/Playground.astro`
+- Create: `src/pages/playground.astro`
+- Modify: `src/components/studio/TopBar.astro` (add `/playground` link)
+
+**Interfaces:**
+- Consumes: `StudioShell` from `../components/studio/StudioShell.astro`; client hooks named in Task 4.
+- Produces: a rendered `/playground` page with all `[data-pg-*]` hooks and `[data-cmd]` buttons.
+
+- [ ] **Step 1: Create `src/components/studio/Cheatsheet.astro`**
+
+```astro
+---
+// Clickable, ready-to-run commands grouped per lens. Each button carries the
+// exact command in data-cmd; client.ts fills the editor and runs it on click.
+interface Group {
+  label: string;
+  badge: string;
+  badgeClass: string;
+  commands: string[];
+}
+const groups: Group[] = [
+  {
+    label: "Key–Value",
+    badge: "kv",
+    badgeClass: "bg-primary/15 text-primary",
+    commands: ["get config:theme", "put config:theme light", "prefix config:", "range a z", "delete config:theme"],
+  },
+  {
+    label: "Document",
+    badge: "doc",
+    badgeClass: "bg-ok/15 text-ok",
+    commands: [
+      "doc.all articles",
+      "doc.get articles a1",
+      'doc.put articles a3 {"title":"Local-first","published":true}',
+      'doc.find articles {"published":true}',
+      "doc.delete articles a2",
+    ],
+  },
+  {
+    label: "Relational",
+    badge: "table",
+    badgeClass: "bg-warn/15 text-warn",
+    commands: [
+      "select * from users",
+      "select * from users limit 2",
+      'insert into users {"id":"4","name":"Lin","age":29,"active":true}',
+      "delete from users 4",
+    ],
+  },
+];
+---
+
+<aside class="w-full shrink-0 overflow-y-auto border-l border-edge bg-canvas lg:w-72" aria-label="Command cheatsheet">
+  <div class="border-b border-edge px-4 py-3">
+    <p class="text-[11px] tracking-wider text-faint uppercase">Cheatsheet</p>
+    <p class="mt-1 text-[12px] text-dim">Click any command to run it — no typing needed.</p>
+  </div>
+  {
+    groups.map((g) => (
+      <div class="border-b border-edge px-3 py-3">
+        <p class="mb-2 flex items-center gap-2 px-1 text-[12.5px] text-muted">
+          {g.label}
+          <span class:list={["rounded px-1.5 text-[10px] tracking-wide uppercase", g.badgeClass]}>{g.badge}</span>
+        </p>
+        <ul class="space-y-1">
+          {g.commands.map((cmd) => (
+            <li>
+              <button
+                type="button"
+                data-cmd={cmd}
+                class="block w-full truncate border border-edge bg-panel px-2.5 py-1.5 text-left font-mono text-[12px] text-fg hover:border-primary hover:text-primary focus:border-primary focus:outline-none"
+                title={cmd}
+              >
+                {cmd}
+              </button>
+            </li>
+          ))}
+        </ul>
+      </div>
+    ))
+  }
+</aside>
+```
+
+- [ ] **Step 2: Create `src/components/studio/Playground.astro`**
+
+```astro
+---
+import Cheatsheet from "./Cheatsheet.astro";
+---
+
+<div data-pg-root class="flex min-h-0 flex-1 flex-col lg:flex-row">
+  <section class="flex min-w-0 flex-1 flex-col">
+    <!-- Toolbar -->
+    <div class="flex shrink-0 flex-wrap items-center justify-between gap-2 border-b border-edge bg-canvas px-4 py-2.5">
+      <div class="flex items-center gap-2 text-[12.5px]">
+        <span class="text-primary" aria-hidden="true">#</span>
+        <span class="text-fg">playground.libredb</span>
+        <span
+          data-pg-badge
+          class="rounded border border-edge px-1.5 py-0.5 text-[10.5px] tracking-wide text-faint uppercase"
+          >detecting…</span
+        >
+      </div>
+      <div class="flex items-center gap-2">
+        <button
+          type="button"
+          data-pg-reset
+          class="border border-edge bg-panel px-3 py-1.5 text-[12px] text-muted hover:border-bad hover:text-bad focus:outline-none"
+          >↺ Reset sandbox</button
+        >
+      </div>
+    </div>
+
+    <!-- Fallback banner (hidden when OPFS is available) -->
+    <p
+      data-pg-banner
+      hidden
+      class="shrink-0 border-b border-warn/40 bg-warn/10 px-4 py-2 text-[12px] text-warn"
+    >
+      Persistence is disabled for this session (OPFS unavailable or this is a second tab) — running in-memory. Your
+      changes will not survive a reload.
+    </p>
+
+    <!-- Editor -->
+    <div class="shrink-0 border-b border-edge bg-panel">
+      <label class="sr-only" for="pg-input">Command input</label>
+      <textarea
+        id="pg-input"
+        data-pg-input
+        rows="2"
+        spellcheck="false"
+        autocapitalize="off"
+        autocomplete="off"
+        placeholder="Type a command and press ⌘/Ctrl+Enter — or click one on the right. Try: select * from users"
+        class="w-full resize-y bg-transparent px-4 py-3 font-mono text-[13px] text-fg placeholder:text-faint focus:outline-none"
+      ></textarea>
+      <div class="flex items-center justify-between border-t border-edge px-4 py-2">
+        <span class="text-[11.5px] text-faint">Runs entirely in your browser · no backend · no signup</span>
+        <button
+          type="button"
+          data-pg-run
+          class="bg-primary px-4 py-1.5 text-[12.5px] font-medium text-white hover:opacity-90 focus:outline-none"
+          >▶ Run</button
+        >
+      </div>
+    </div>
+
+    <!-- Result grid -->
+    <div data-pg-grid class="min-h-0 flex-1 overflow-auto" aria-live="polite" aria-label="Query results"></div>
+
+    <!-- Inline console log -->
+    <div
+      data-pg-log
+      class="max-h-32 shrink-0 space-y-1 overflow-auto border-t border-edge bg-canvas px-4 py-2 font-mono text-[12px]"
+      aria-live="polite"
+      aria-label="Console"
+    >
+    </div>
+  </section>
+
+  <Cheatsheet />
+</div>
+
+<script>
+  import "../../scripts/playground/client.ts";
+</script>
+```
+
+- [ ] **Step 3: Create `src/pages/playground.astro`**
+
+```astro
+---
+import Layout from "../layouts/Layout.astro";
+import StudioShell from "../components/studio/StudioShell.astro";
+import Playground from "../components/studio/Playground.astro";
+---
+
+<Layout
+  title="Playground — run LibreDB in your browser | LibreDB"
+  description="Run a real LibreDB database entirely in your browser, backed by OPFS. Preloaded sample data, clickable commands, zero backend, no signup."
+>
+  <StudioShell active="home">
+    <Playground />
+  </StudioShell>
+</Layout>
+```
+
+- [ ] **Step 4: Add the nav link in `src/components/studio/TopBar.astro`**
+
+Read the file first. Find the existing top-bar link/menu markup and add, following the surrounding pattern, a link whose `href="/playground"` labeled `Playground`. Do **not** modify `src/data/sections.ts` (that drives the schema explorer rows and homepage nav). Keep the change to a single anchor consistent with the existing nav items.
+
+- [ ] **Step 5: Verify it builds and renders**
+
+Run: `bun run build 2>&1 | tail -25`
+Expected: build succeeds; `dist/playground/index.html` exists.
+Then revert the build-mutated compose files:
+Run: `git checkout -- src/data/docker-compose.example.yml public/docker-compose.example.yml 2>/dev/null; git status --short`
+Expected: only the new/intended files show as changes.
+
+- [ ] **Step 6: Commit**
+
+```bash
+git add src/components/studio/Cheatsheet.astro src/components/studio/Playground.astro src/pages/playground.astro src/components/studio/TopBar.astro
+git commit -m "feat(playground): editor pane, cheatsheet, route, nav link (#19)"
+```
+
+---
+
+## Task 6: Gate + browser verification (Playwright)
+
+**Files:** none created — verification only.
+
+- [ ] **Step 1: Run the full gate**
+
+Run: `bun run gate 2>&1 | tail -30`
+Expected: typecheck, format, lint, knip, and all `bun:test` pass. Fix any failures (likely knip on unused exports — ensure every new export is consumed; prettier — run `bun run format:fix`).
+
+- [ ] **Step 2: Serve the production build with caching disabled**
+
+Run (background): `bunx http-server dist -p 8081 -c-1`
+(Use a cache-disabled static server per the repo's VT runtime-testing note.)
+
+- [ ] **Step 3: Playwright — load and assert seed renders**
+
+Navigate to `http://localhost:8081/playground`. Take a snapshot. Assert:
+- The result grid shows the 3 seeded users (Ada, Linus, Grace).
+- The persistence badge reads `OPFS · persistent` (Chromium on localhost is a secure context with OPFS).
+
+- [ ] **Step 4: Playwright — click-to-run, persist, reset**
+
+- Click the cheatsheet button `insert into users {"id":"4","name":"Lin","age":29,"active":true}`, then `select * from users` → assert a 4th row `Lin` appears.
+- Reload the page → assert `Lin` is still present (OPFS persistence across reload).
+- Click `↺ Reset sandbox` → assert the grid returns to exactly the 3 seed rows.
+- Click `prefix config:` → assert key/value rows for `config:*` render.
+
+- [ ] **Step 5: Confirm no `node:` in the client bundle**
+
+Run: `grep -rl "node:fs\|require(\"fs\")\|node_fs" dist/assets/*.js | head` (or scan the playground chunk).
+Expected: no matches — the browser entry pulled no `node:` module into the client bundle.
+
+- [ ] **Step 6: Final commit (if any verification fixes were needed)**
+
+```bash
+git add -A && git commit -m "test(playground): gate fixes + browser-verified OPFS demo (#19)"
+```
+
+---
+
+## Self-Review
+
+- **Spec coverage:** Public no-login route (Task 5) ✓ · client-side OPFS Worker, no backend (Tasks 3,6) ✓ · 3-lens seed (Task 2) ✓ · clickable palette (Tasks 4,5) ✓ · persist + isolate + reset (Tasks 3,6) ✓ · no `node:fs`, marketing build unaffected (Task 6, TopBar-only nav change) ✓ · in-memory fallback + notice (Tasks 3,4,5) ✓ · `db.close()` teardown (Tasks 3,4) ✓ · no SSR engine code (Task 5 client-only `<script>`, Task 4 import-time guard) ✓.
+- **Type consistency:** `WorkerResponse` uses a `kind` discriminator (`"ready"|"result"|"closed"`) consistently across protocol, worker, and client. `RunResult` discriminator `kind` (`"rows"|"message"|"error"`) consistent. `Mode` (`"opfs"|"memory"`) consistent. Command op names (`docget/docput/docdel/docall/docfind/select/insert/remove`) identical in parser (Task 1) and engine switch (Task 2).
+- **Placeholder scan:** none — all code blocks are complete; the only prose step (TopBar Task 5 Step 4) is a read-then-follow-pattern instruction because the exact surrounding markup must be matched in-file.
+- **Tailwind tokens:** uses existing tokens (`text-bad`, `text-warn`, `bg-ok`, `text-faint`, `border-edge`, `bg-panel`). Task 5 Step 5 must confirm these exist in `global.css`; if `text-bad`/`text-warn` differ, map to the actual token names found there.
diff --git a/docs/superpowers/specs/2026-06-30-playground-opfs-editor-design.md b/docs/superpowers/specs/2026-06-30-playground-opfs-editor-design.md
new file mode 100644
index 0000000..821b15f
--- /dev/null
+++ b/docs/superpowers/specs/2026-06-30-playground-opfs-editor-design.md
@@ -0,0 +1,199 @@
+# /playground — in-browser, zero-backend LibreDB editor (OPFS-backed)
+
+**Issue:** [libredb/libredb.github.io#19](https://github.com/libredb/libredb.github.io/issues/19)
+**Date:** 2026-06-30
+**Repo:** libredb-website (libredb.github.io)
+**Engine guide (authoritative):** `libredb-database/docs/BROWSER.md`
+
+## Goal
+
+Add a public route `/playground` that runs a **real LibreDB database entirely in the
+browser**, backed by OPFS persistence shipped in `@libredb/libredb@0.1.3`. A visitor
+lands on a working database preloaded with a sample dataset and a clickable command
+cheatsheet, and can operate the database without typing anything and without signing in.
+
+This is a **separate route**, not a change to the marketing homepage. The homepage hero
+"SQL editor" stays a stylized mock; `/playground` is the "use it for real, right now"
+surface.
+
+## Decisions (locked in brainstorming)
+
+- **Editor approach:** native editor built on the site's existing IDE-shell components.
+  The "real Studio Monaco editor" lives in the separate `libredb-studio` repo and is not
+  packaged for browser use — out of scope for this repo. We reuse `StudioShell`,
+  `Explorer`, `Console`, `CommandPalette`, `StatusBar`, and the `Sql.astro` highlighter.
+- **Route name:** `/playground`.
+- **Scope:** full feature set (OPFS worker + 3-lens seed + clickable cheatsheet + Reset
+  sandbox + in-memory fallback + `db.close()` teardown + SSR-safe island).
+
+## Constraints (from BROWSER.md / issue)
+
+- Import the **browser entry**: `@libredb/libredb/browser` (no `node:` in its import graph).
+- `open()` (no path) → in-memory, works anywhere. `open({ path, fs })` → durable, needs `fs`.
+- **OPFS sync access handles exist only inside a dedicated Web Worker, secure context only**
+  (HTTPS or `localhost`). Acquire the handle async once, then `open` is synchronous.
+- **Single-writer:** `createSyncAccessHandle()` takes an exclusive lock; a second tab cannot
+  open the same file. For a public demo, fall back to in-memory on contention.
+- **No LibreDB code during SSR** — Astro renders on Node where `window`/`navigator.storage`/
+  `Worker` don't exist. All engine code runs in client-only `<script>` / the Worker.
+- Call `db.close()` on teardown so the exclusive lock frees for the next reload.
+
+## Architecture
+
+```
+/playground (Astro page, SSR-safe — no engine code at build/SSR time)
+ └─ StudioShell (reused chrome)
+     └─ Playground island  ← plain client <script> (no React)
+         ├─ Editor pane: textarea + Sql-style highlight + Run + result grid
+         ├─ Cheatsheet sidebar: clickable ready-to-run commands per lens
+         └─ Toolbar: Reset sandbox · persistence badge (OPFS | in-memory)
+              │  postMessage({id, op, args})   ▲ onmessage({id, result|error})
+              ▼                                 │
+         db.worker.ts (Web Worker, type: module)
+           - navigator.storage.getDirectory()
+           - getFileHandle("playground.libredb", {create:true})
+           - createSyncAccessHandle()                       (Worker-only, exclusive)
+           - open({ path, fs: opfsFileSystem(handle) })     durable path
+           - on any failure → open()                        in-memory fallback
+           - seed sample data on first open (kv + doc + table)
+           - runs commands, returns rows/result
+           - db.close() on "close" op
+```
+
+The Worker is loaded the bundler-friendly way:
+`new Worker(new URL("./db.worker.ts", import.meta.url), { type: "module" })` — Vite (Astro's
+bundler) understands this in dev and production builds.
+
+## Files
+
+### New
+
+| File | Purpose |
+| --- | --- |
+| `src/pages/playground.astro` | The route. Wraps `Playground.astro` in `StudioShell`, sets SEO title/description. |
+| `src/components/studio/Playground.astro` | Editor pane markup: command input, Run button, result grid container, persistence badge, Reset button, mounts `Cheatsheet`. Includes the client `<script>`. |
+| `src/components/studio/Cheatsheet.astro` | Clickable command list grouped per lens (kv / document / relational / meta). Each button carries `data-cmd`. |
+| `src/scripts/playground/protocol.ts` | **Pure, testable.** Message types (`WorkerRequest`/`WorkerResponse`), command grammar, parser. No DOM, no engine import. |
+| `src/scripts/playground/engine.ts` | **Testable.** `seed(db)` (the sample dataset), `isSeeded(db)`, and `execute(db, cmd)` — lens dispatch over the browser entry. (The seed lives here, not a separate `seed.ts`.) |
+| `src/scripts/playground/db.worker.ts` | The Worker. Owns the OPFS handle, opens db (durable→memory fallback), seeds on first open, dispatches parsed commands, and on `close` runs `db.close()` then `self.close()`. |
+| `src/scripts/playground/client.ts` | Main-thread bridge: spawns worker, `call()` request/response with ids, wires Run + cheatsheet + Reset, renders the grid + status echo + activity log, shows fallback banner, and posts `close` on `pagehide` (the worker self-closes; the client does **not** `terminate()`). |
+| `src/scripts/playground/protocol.test.ts`, `engine.test.ts` | `bun:test` units for the parser and the seed/execute engine (against an in-memory `open()`). |
+
+### Reused as-is
+
+`StudioShell`, `Console` + `studioConsole` toast API (`src/scripts/lib/console-copy.ts`),
+`Sql.astro` highlighter, Tailwind design tokens (`bg-panel`, `border-edge`, `text-fg`,
+`text-primary`, `bg-ok`, …).
+
+### Modified
+
+| File | Change |
+| --- | --- |
+| `package.json` | Add dependency `@libredb/libredb@0.1.3`. |
+| `src/data/sections.ts` *(if needed for nav)* | Optionally add a `/playground` entry; otherwise link from TopBar only. Decide during implementation — keep homepage unaffected. |
+
+## Command grammar (mirrors Studio's `LibreDBProvider` exactly)
+
+LibreDB is an ordered key-value store; documents and relational tables are **conventions over
+the keyspace** (`<table>:<pk>`, `<collection>:<id>`) recorded in the catalog — **not** separate
+command dialects (see `libredb-studio/docs/providers/libredb.md` §1, §3.5). The playground exposes
+**one** grammar — the five kv-lens verbs — never a SQL/document translator. Parsed in `protocol.ts`,
+executed by `engine.ts` in the worker:
+
+```
+get <key>              read one key → key/value row (JSON value pretty-printed); missing → (nil)
+put <key> <value>      write; quote-aware value tail → "OK · changed N"
+delete <key>           remove → "OK · changed N"
+prefix <prefix>        scan all keys under a prefix → rows
+range <start> <end>    half-open [start,end) keyspace scan → rows
+```
+
+Plus the CLI's database-level commands (`libredb-database/docs/CLI.md`), which the
+browser build fully supports:
+
+```
+inspect                list catalogued namespaces + kind + relational schema (reads catalog(db))
+stats                  file size (OPFS handle.getSize()) + namespace counts by kind
+import <json-object>   bulk-set a JSON object of string values in ONE atomic db.transact()
+```
+
+`inspect`/`stats` read `catalog(db)`; `import` commits through `db.transact()` (byte-level
+`tx.set` with UTF-8 encoding) and refuses reserved keys via `isReservedKey`. These appear in a
+separate **Manage** group in the cheatsheet with a use-case line each. (CLI file concepts — a
+`<path>` argument, `.lock` files, `--force` — have no browser analog: the worker owns the OPFS
+exclusive sync-access handle, and a second tab falls back to in-memory.) The CLI verbs `scan`/`set`
+are intentionally NOT aliased — the playground keeps Studio's `prefix`/`put` names as canonical.
+
+Parser rules (mirroring the provider's `tokenize`):
+- Verbs case-insensitive. Quote-aware tokenization: single/double quotes preserve internal
+  whitespace; an unmatched quote is a friendly error; consecutive unquoted whitespace collapses.
+- Blank and `#`-comment lines are skipped; the first real line runs (a commented cheatsheet buffer
+  is directly runnable).
+- Empty / unknown verb / wrong arg count → `{ op: "error" }` (never throws across the worker boundary).
+- `prefix`/`range` results hide the reserved catalog namespace via the package's `isReservedKey`.
+- Results normalize to `{ kind:"rows", columns, rows }` for the grid, or `{ kind:"message" }` for
+  writes / `(nil)` reads.
+
+**Reset** is a host (sandbox) action, not a LibreDB verb: the toolbar button wipes the OPFS file and
+reseeds. The seed still writes through the `doc()` and `table()` lenses so the catalog is real; the
+visitor operates those namespaces through the same five kv verbs (`prefix users:`, `get users:1`,
+`put users:4 {…}`, …). The `Cheatsheet` groups buttons by namespace (`users:*` relational, `articles:*`
+document, `config:*` kv); clicking one fills the editor and runs it → **zero-typing**.
+
+## Data flow
+
+1. Page loads → client `<script>` runs only in browser → spawns Worker.
+2. Worker acquires OPFS handle (or falls back), opens db, seeds if empty, posts `{ready, mode}`.
+3. Client shows persistence badge from `mode` (`"opfs"` | `"memory"`); if `memory`, shows a
+   one-line banner: "Persistence disabled for this session — running in-memory."
+4. Visitor clicks a cheatsheet command (or types + Run) → client `call(op:"run", {text})`.
+5. Worker parses, executes against the right lens, posts `{id, result}` or `{id, error}`.
+6. Client renders rows in the grid; errors → red console toast.
+7. Reset → `call(op:"reset")` → worker truncates the relevant keys/tables and reseeds.
+8. `pagehide` (non-bfcache) → `call(op:"close")`; the worker runs `db.close()` then `self.close()`. The client does **not** call `worker.terminate()` — that would race and usually win before the worker releases the OPFS handle.
+
+## Error handling & edge cases
+
+- **OPFS unavailable** (no `getDirectory`, no `createSyncAccessHandle`, insecure context,
+  unsupported browser) → `try/catch` around handle acquisition → `open()` in-memory →
+  `mode:"memory"`.
+- **Second-tab single-writer lock** → `createSyncAccessHandle()` throws → same in-memory
+  fallback path → badge + banner explain it.
+- **Bad command / bad JSON** → worker returns `{error}`; the grid is left unchanged; a red
+  toast appears. The worker never throws across `postMessage`.
+- **Teardown** → `db.close()` on `close` op frees the exclusive lock so a quick reload
+  reacquires OPFS cleanly.
+- **Eviction** → acceptable for a demo; reseed on next visit (seed runs when the db is empty).
+
+## Testing
+
+- **Unit (`bun:test`)** — `protocol.test.ts`: each command parses to the right op+args;
+  garbage rejected with a friendly error; JSON tail parsed safely; `select … limit N` parsed.
+- **Gate** — `bun run gate` (typecheck + format + lint + knip + test) must pass.
+- **Playwright (real browser, local `astro preview` or `dist` server)**:
+  1. Navigate to `/playground`; assert seed `users` rows render in the grid.
+  2. Click a cheatsheet `insert into users {…}` → new row appears.
+  3. Reload → the inserted row persists (OPFS durable path on Chromium/`localhost`).
+  4. Click **Reset sandbox** → grid returns to the seed set.
+  5. Assert the persistence badge reads OPFS on a secure context.
+  6. Confirm no `node:`/`node_fs` reference in the emitted `/playground` client bundle.
+
+## Acceptance criteria (from issue #19)
+
+- [ ] Public route serves a real editor with no login.
+- [ ] Queries execute client-side against an OPFS-backed LibreDB in a Web Worker; no backend.
+- [ ] Sample dataset (kv + document + relational) preloaded on first visit.
+- [ ] Clickable command palette runs insert/get/update/delete/scan without typing.
+- [ ] Data persists across reloads, is per-visitor isolated, and can be reset.
+- [ ] Browser bundle does not pull `node:fs`; homepage/marketing build unaffected.
+- [ ] Graceful in-memory fallback + notice where OPFS/sync handles unavailable or on
+      second-tab lock contention.
+- [ ] Worker releases the handle (`db.close()`) on teardown.
+- [ ] No LibreDB code runs during SSR (client-only island; engine touched only after mount).
+
+## Non-goals
+
+- Not replacing the homepage hero editor.
+- Not the full multi-provider IDE (no Postgres/MySQL over the network).
+- Not the cross-repo Monaco bundle from libredb-studio.
+- Not cloud persistence or accounts.
diff --git a/package.json b/package.json
index a592e4a..12f54f1 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "libredb-studio-website",
   "type": "module",
-  "version": "0.5.5",
+  "version": "0.6.0",
   "scripts": {
     "dev": "astro dev",
     "build": "node scripts/sync-docker-compose.mjs && astro build",
@@ -20,6 +20,7 @@
   },
   "dependencies": {
     "@astrojs/sitemap": "3.7.3",
+    "@libredb/libredb": "0.1.3",
     "@tailwindcss/vite": "4.3.1",
     "astro": "7.0.3",
     "tailwindcss": "4.3.1"
diff --git a/src/components/studio/Cheatsheet.astro b/src/components/studio/Cheatsheet.astro
new file mode 100644
index 0000000..74f9ddf
--- /dev/null
+++ b/src/components/studio/Cheatsheet.astro
@@ -0,0 +1,124 @@
+---
+// Ready-to-run LibreDB commands, grouped by namespace. Every command is one of
+// the five real kv-lens verbs (get/put/delete/prefix/range) — the same grammar
+// as Studio's LibreDBProvider. "Tables" and "collections" are conventions over
+// the keyspace (users:<pk>, articles:<id>), shown here as their key prefixes;
+// the catalog kind is a label, not a separate command dialect.
+interface Group {
+  label: string; // namespace prefix, e.g. "users:*"
+  kind: string; // catalog kind label
+  kindClass: string;
+  note?: string; // optional clarifying line under the group header
+  commands: string[];
+}
+const groups: Group[] = [
+  {
+    label: 'users:*',
+    kind: 'relational table',
+    kindClass: 'bg-warn/15 text-warn',
+    note: 'A relational row keeps its primary key both in the key (users:4) and as its id column.',
+    commands: [
+      'prefix users:',
+      'get users:1',
+      'put users:4 {"id":"4","name":"Lin","age":29,"active":true}',
+      'delete users:4',
+    ],
+  },
+  {
+    label: 'articles:*',
+    kind: 'document collection',
+    kindClass: 'bg-ok/15 text-ok',
+    commands: [
+      'prefix articles:',
+      'get articles:a1',
+      'put articles:a3 {"title":"Local-first","published":true}',
+      'delete articles:a2',
+    ],
+  },
+  {
+    label: 'config:*',
+    kind: 'key–value',
+    kindClass: 'bg-primary/15 text-primary',
+    commands: ['prefix config:', 'get config:theme', 'put config:theme light', 'range a z', 'delete config:theme'],
+  },
+];
+
+// Database-level "manage" commands (the CLI's inspect/stats/import), each with a
+// use case. Clicking loads the command into the editor — press Run to execute.
+interface AdminCommand {
+  cmd: string;
+  use: string;
+}
+const adminCommands: AdminCommand[] = [
+  { cmd: 'inspect', use: 'List namespaces, their kind, and relational schemas (reads the catalog).' },
+  { cmd: 'stats', use: 'One-glance summary: file size on disk + namespace counts by kind.' },
+  {
+    cmd: 'import {"session:a1":"token-abc","session:a2":"token-xyz"}',
+    use: 'Bulk-load many keys (here a new session:* namespace) in one atomic commit.',
+  },
+];
+---
+
+<aside class="w-full shrink-0 overflow-y-auto border-l border-edge bg-canvas lg:w-72" aria-label="Command cheatsheet">
+  <div class="border-b border-edge px-4 py-3">
+    <p class="text-[11px] tracking-wider text-faint uppercase">Cheatsheet</p>
+    <p class="mt-1 text-[12px] text-dim">Click a command to load it into the editor, then press Run.</p>
+    <p class="mt-2 text-[11.5px] leading-relaxed text-faint">
+      LibreDB is an ordered key–value store. Tables and collections are conventions over keys (<code class="text-dim"
+        >users:1</code
+      >) — all operated with the same five verbs.
+    </p>
+  </div>
+  {
+    groups.map((g) => (
+      <div class="border-b border-edge px-3 py-3">
+        <p class="mb-2 flex items-center gap-2 px-1 font-mono text-[12.5px] text-muted">
+          {g.label}
+          <span class:list={['rounded px-1.5 font-sans text-[10px] tracking-wide uppercase', g.kindClass]}>
+            {g.kind}
+          </span>
+        </p>
+        {g.note && <p class="mb-2 px-1 text-[11px] leading-snug text-faint">{g.note}</p>}
+        <ul class="space-y-1">
+          {g.commands.map((cmd) => (
+            <li>
+              <button
+                type="button"
+                data-cmd={cmd}
+                class="block w-full truncate border border-edge bg-panel px-2.5 py-1.5 text-left font-mono text-[12px] text-fg hover:border-primary hover:text-primary focus:border-primary focus:outline-none"
+                title={cmd}
+              >
+                {cmd}
+              </button>
+            </li>
+          ))}
+        </ul>
+      </div>
+    ))
+  }
+
+  <!-- Database-level admin/manage commands -->
+  <div class="border-b border-edge px-3 py-3">
+    <p class="mb-2 flex items-center gap-2 px-1 text-[12.5px] text-muted">
+      Manage
+      <span class="rounded bg-ai/15 px-1.5 text-[10px] tracking-wide text-ai uppercase">admin</span>
+    </p>
+    <ul class="space-y-2">
+      {
+        adminCommands.map((c) => (
+          <li>
+            <button
+              type="button"
+              data-cmd={c.cmd}
+              class="block w-full truncate border border-edge bg-panel px-2.5 py-1.5 text-left font-mono text-[12px] text-fg hover:border-primary hover:text-primary focus:border-primary focus:outline-none"
+              title={c.cmd}
+            >
+              {c.cmd}
+            </button>
+            <p class="mt-1 px-0.5 text-[11px] leading-snug text-faint">{c.use}</p>
+          </li>
+        ))
+      }
+    </ul>
+  </div>
+</aside>
diff --git a/src/components/studio/Playground.astro b/src/components/studio/Playground.astro
new file mode 100644
index 0000000..5574267
--- /dev/null
+++ b/src/components/studio/Playground.astro
@@ -0,0 +1,85 @@
+---
+import Cheatsheet from './Cheatsheet.astro';
+---
+
+<div data-pg-root class="flex min-h-0 flex-1 flex-col lg:flex-row">
+  <section class="flex min-w-0 flex-1 flex-col">
+    <!-- Toolbar -->
+    <div class="flex shrink-0 flex-wrap items-center justify-between gap-2 border-b border-edge bg-canvas px-4 py-2.5">
+      <div class="flex items-center gap-2 text-[12.5px]">
+        <span class="text-primary" aria-hidden="true">#</span>
+        <span class="text-fg">playground.libredb</span>
+        <span
+          data-pg-badge
+          class="rounded border border-edge px-1.5 py-0.5 text-[10.5px] tracking-wide text-faint uppercase"
+          >detecting…</span
+        >
+      </div>
+      <div class="flex items-center gap-2">
+        <button
+          type="button"
+          data-pg-reset
+          class="border border-edge bg-panel px-3 py-1.5 text-[12px] text-muted hover:border-bad hover:text-bad focus:outline-none"
+          >↺ Reset sandbox</button
+        >
+      </div>
+    </div>
+
+    <!-- Fallback banner (hidden when OPFS is available) -->
+    <p data-pg-banner hidden class="shrink-0 border-b border-warn/40 bg-warn/10 px-4 py-2 text-[12px] text-warn">
+      Persistence is disabled for this session (OPFS unavailable or this is a second tab) — running in-memory. Your
+      changes will not survive a reload.
+    </p>
+
+    <!-- Editor -->
+    <div class="shrink-0 border-b border-edge bg-panel">
+      <label class="sr-only" for="pg-input">Command input</label>
+      <textarea
+        id="pg-input"
+        data-pg-input
+        rows="2"
+        spellcheck="false"
+        autocapitalize="off"
+        autocomplete="off"
+        placeholder="Type a LibreDB command and press ⌘/Ctrl+Enter — or click one on the right. Try: prefix users:"
+        class="w-full resize-y bg-transparent px-4 py-3 font-mono text-[13px] text-fg placeholder:text-faint focus:outline-none"
+      ></textarea>
+      <div class="flex items-center justify-between border-t border-edge px-4 py-2">
+        <span class="text-[11.5px] text-faint">Runs entirely in your browser · no backend · no signup</span>
+        <button
+          type="button"
+          data-pg-run
+          class="bg-primary px-4 py-1.5 text-[12.5px] font-medium text-white hover:opacity-90 focus:outline-none disabled:cursor-not-allowed disabled:opacity-60"
+          >▶ Run</button
+        >
+      </div>
+    </div>
+
+    <!-- Result status / command echo (also the screen-reader announcer) -->
+    <div
+      data-pg-status
+      hidden
+      class="flex shrink-0 items-center gap-2 border-b border-edge bg-canvas px-4 py-1.5 font-mono text-[11.5px] text-dim"
+      aria-live="polite"
+    >
+    </div>
+
+    <!-- Result grid -->
+    <div data-pg-grid role="region" class="min-h-0 flex-1 overflow-auto" aria-label="Query results"></div>
+
+    <!-- Activity log: one entry per run (time · status · command · summary · ms · source) -->
+    <div
+      data-pg-log
+      role="region"
+      class="max-h-48 shrink-0 space-y-1 overflow-auto border-t border-edge bg-canvas px-4 py-2 font-mono text-[12px]"
+      aria-label="Activity log"
+    >
+    </div>
+  </section>
+
+  <Cheatsheet />
+</div>
+
+<script>
+  import '../../scripts/playground/client.ts';
+</script>
diff --git a/src/components/studio/TopBar.astro b/src/components/studio/TopBar.astro
index 9bca776..2c80247 100644
--- a/src/components/studio/TopBar.astro
+++ b/src/components/studio/TopBar.astro
@@ -43,6 +43,9 @@ const DEMO = 'https://app.libredb.org';
       data-action="notice"
       data-notice="monitoring"><span aria-hidden="true">◷</span> Monitoring</button
     >
+    <a href="/playground" data-topbar-link="playground" class="flex items-center gap-1.5 text-muted hover:text-fg">
+      <span class="text-primary" aria-hidden="true">▶</span> Playground
+    </a>
     <button
       type="button"
       class="hidden items-center gap-1.5 rounded-md border border-edge-strong px-2 py-1 text-[11.5px] text-faint hover:text-fg xl:flex"
diff --git a/src/data/sections.test.ts b/src/data/sections.test.ts
index 265258d..8341c87 100644
--- a/src/data/sections.test.ts
+++ b/src/data/sections.test.ts
@@ -54,14 +54,15 @@ test('providers section replaces databases (id, slug, table)', () => {
   expect(p.schema).toBe('studio');
 });
 
-test('three database-schema sections exist with correct slugs', () => {
+test('database-schema sections exist with correct slugs', () => {
   const dbSections = sections.filter((s) => s.schema === 'database');
   expect(dbSections.map((s) => s.id).sort()).toEqual(
-    ['database', 'database_architecture', 'database_reliability'].sort(),
+    ['database', 'database_architecture', 'database_reliability', 'playground'].sort(),
   );
   expect(sectionById['database'].slug).toBe('database');
   expect(sectionById['database_architecture'].slug).toBe('database-architecture');
   expect(sectionById['database_reliability'].slug).toBe('database-reliability');
+  expect(sectionById['playground'].slug).toBe('playground');
 });
 
 test('platform overview section exists (internal /platform)', () => {
diff --git a/src/data/sections.ts b/src/data/sections.ts
index d8a507c..ca73677 100644
--- a/src/data/sections.ts
+++ b/src/data/sections.ts
@@ -143,6 +143,26 @@ export const sections: SectionMeta[] = [
       'LibreDB durability: a length-framed, CRC-32 checksummed write-ahead log fsync-d before commit, crash recovery proven by deterministic simulation testing, and 100% core line coverage. Honest about its v1 limits.',
     schema: 'database',
   },
+  {
+    id: 'playground',
+    table: 'playground',
+    query: 'prefix users:  -- LibreDB kv command, runs in your browser via OPFS',
+    rows: 3,
+    cols: 3,
+    execMs: 1,
+    columns: [
+      { name: 'kv', type: 'KV' },
+      { name: 'document', type: 'JSONB' },
+      { name: 'relational', type: 'TABLE' },
+    ],
+    explain:
+      'A real LibreDB database running entirely in your browser, backed by OPFS — preloaded sample data across all three lenses, clickable commands, persists across reloads, with zero backend and no signup.',
+    slug: 'playground',
+    pageTitle: 'Playground — run LibreDB in your browser | LibreDB',
+    pageDescription:
+      'Run a real LibreDB database entirely in your browser, backed by OPFS. Preloaded sample data, clickable commands, zero backend, no signup.',
+    schema: 'database',
+  },
   {
     id: 'compare',
     table: 'compare',
diff --git a/src/pages/[section].astro b/src/pages/[section].astro
index 3914087..c507d04 100644
--- a/src/pages/[section].astro
+++ b/src/pages/[section].astro
@@ -20,7 +20,10 @@ import DatabaseReliabilitySection from '../components/sections/DatabaseReliabili
 import PlatformSection from '../components/sections/PlatformSection.astro';
 
 export function getStaticPaths() {
-  return sections.filter((s) => s.id !== 'home').map((s) => ({ params: { section: s.slug }, props: { id: s.id } }));
+  // 'home' is served by index.astro; 'playground' by its own interactive page.
+  return sections
+    .filter((s) => s.id !== 'home' && s.id !== 'playground')
+    .map((s) => ({ params: { section: s.slug }, props: { id: s.id } }));
 }
 
 const COMPONENTS: Record<string, any> = {
diff --git a/src/pages/playground.astro b/src/pages/playground.astro
new file mode 100644
index 0000000..7d1eb73
--- /dev/null
+++ b/src/pages/playground.astro
@@ -0,0 +1,14 @@
+---
+import Layout from '../layouts/Layout.astro';
+import StudioShell from '../components/studio/StudioShell.astro';
+import Playground from '../components/studio/Playground.astro';
+---
+
+<Layout
+  title="Playground — run LibreDB in your browser | LibreDB"
+  description="Run a real LibreDB database entirely in your browser, backed by OPFS. Preloaded sample data, clickable commands, zero backend, no signup."
+>
+  <StudioShell active="playground" standalone>
+    <Playground />
+  </StudioShell>
+</Layout>
diff --git a/src/scripts/playground/client.ts b/src/scripts/playground/client.ts
new file mode 100644
index 0000000..a219c55
--- /dev/null
+++ b/src/scripts/playground/client.ts
@@ -0,0 +1,297 @@
+/**
+ * Main-thread bridge for /playground. Spawns the db worker, exchanges
+ * id-tagged messages, and renders results into the editor's grid/console.
+ * Touches navigator/Worker only at import time on the client (never SSR).
+ */
+import type { WorkerRequest, WorkerResponse, RunResult, Mode } from './protocol';
+
+/** What triggered a run — shown in the activity log. */
+type Source = 'editor' | 'system';
+
+type Level = 'ok' | 'warn' | 'error';
+
+interface ActivityEntry {
+  command: string;
+  summary: string;
+  ms: number;
+  level: Level;
+  source: Source;
+}
+
+const MAX_LOG_ENTRIES = 50;
+
+const pgRoot = document.querySelector<HTMLElement>('[data-pg-root]');
+if (pgRoot) init(pgRoot);
+
+function init(root: HTMLElement): void {
+  const input = root.querySelector<HTMLTextAreaElement>('[data-pg-input]');
+  const runBtn = root.querySelector<HTMLButtonElement>('[data-pg-run]');
+  const resetBtn = root.querySelector<HTMLButtonElement>('[data-pg-reset]');
+  const grid = root.querySelector<HTMLElement>('[data-pg-grid]');
+  const status = root.querySelector<HTMLElement>('[data-pg-status]');
+  const log = root.querySelector<HTMLElement>('[data-pg-log]');
+  const badge = root.querySelector<HTMLElement>('[data-pg-badge]');
+  const banner = root.querySelector<HTMLElement>('[data-pg-banner]');
+  if (!input || !runBtn || !grid) return;
+
+  const worker = new Worker(new URL('./db.worker.ts', import.meta.url), { type: 'module' });
+
+  // Distributive omit so each request variant keeps its own fields (`Omit` over a
+  // union would collapse to just the shared `op`, dropping `text`).
+  type RequestBody = WorkerRequest extends infer T ? (T extends { id: number } ? Omit<T, 'id'> : never) : never;
+
+  let seq = 0;
+  const pending = new Map<number, (r: WorkerResponse) => void>();
+  worker.addEventListener('message', (e: MessageEvent<WorkerResponse>) => {
+    pending.get(e.data.id)?.(e.data);
+    pending.delete(e.data.id);
+  });
+  function call(req: RequestBody): Promise<WorkerResponse> {
+    const id = ++seq;
+    return new Promise((resolve) => {
+      pending.set(id, resolve);
+      worker.postMessage({ ...req, id } as WorkerRequest);
+    });
+  }
+
+  // Handshake: learn persistence mode, show badge/banner.
+  void call({ op: 'ready' }).then((res) => {
+    if (res.kind === 'ready') showMode(res.mode);
+  });
+  function showMode(mode: Mode): void {
+    if (badge) {
+      badge.textContent = mode === 'opfs' ? 'OPFS · persistent' : 'in-memory · this session';
+      badge.dataset.mode = mode;
+    }
+    if (banner) banner.hidden = mode === 'opfs';
+  }
+
+  // One in-flight guard shared by run AND reset, so they can't overlap (which
+  // could skip the post-reset refresh or interleave UI state). While busy, both
+  // buttons are disabled and the Run label shows progress.
+  const RUN_LABEL = runBtn.textContent ?? '▶ Run';
+  let busy = false;
+  function setBusy(on: boolean): void {
+    busy = on;
+    runBtn!.disabled = on;
+    if (resetBtn) resetBtn.disabled = on;
+    runBtn!.textContent = on ? '… Running' : RUN_LABEL;
+  }
+
+  /** Send a command and render it — NOT guarded, so internal callers (reset refresh) always run. */
+  async function exec(text: string, source: Source): Promise<void> {
+    const started = performance.now();
+    const res = await call({ op: 'run', text });
+    const ms = performance.now() - started;
+    if (res.kind === 'result') render(res.result, text, ms, source);
+  }
+
+  async function run(text: string, source: Source = 'editor'): Promise<void> {
+    const t = text.trim();
+    if (t === '' || busy) return; // ignore re-entrant runs (double-click / repeated ⌘-Enter / reset)
+    setBusy(true);
+    try {
+      await exec(t, source);
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  async function doReset(): Promise<void> {
+    if (busy) return; // don't overlap a query in flight
+    setBusy(true);
+    try {
+      const res = await call({ op: 'reset' });
+      if (res.kind === 'result') render(res.result, 'reset', 0, 'system');
+      await exec('prefix users:', 'system'); // bypasses the busy guard — we own it here
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  // Every run updates the grid/status AND appends one activity-log entry, so the
+  // console is a complete history (not just the write commands).
+  function render(result: RunResult, command: string, ms: number, source: Source): void {
+    if (result.kind === 'rows') {
+      const n = result.rows.length;
+      const summary = `${n} ${n === 1 ? 'row' : 'rows'}`;
+      setStatus(command, summary, ms, 'ok');
+      renderGrid(grid!, result.columns, result.rows);
+      logActivity(log, { command, summary, ms, level: 'ok', source });
+    } else if (result.kind === 'error') {
+      setStatus(command, '✕ error', ms, 'error');
+      logActivity(log, { command, summary: result.error, ms, level: 'error', source });
+    } else {
+      const level: Level = result.level === 'warn' ? 'warn' : 'ok';
+      setStatus(command, result.message, ms, level);
+      logActivity(log, { command, summary: result.message, ms, level, source });
+    }
+  }
+
+  function setStatus(command: string, summary: string, ms: number, level: Level): void {
+    if (!status) return;
+    status.hidden = false;
+    status.replaceChildren();
+    const cmd = document.createElement('span');
+    cmd.className = 'text-fg';
+    cmd.textContent = `▸ ${command}`;
+    const meta = document.createElement('span');
+    meta.className = level === 'warn' ? 'text-warn' : level === 'error' ? 'text-bad' : 'text-faint';
+    meta.textContent = `· ${summary} · ${ms < 1 ? '<1' : ms.toFixed(1)} ms`;
+    status.append(cmd, meta);
+    retrigger(status); // replay the fade even when the text is identical
+  }
+
+  runBtn.addEventListener('click', () => void run(input.value));
+  input.addEventListener('keydown', (e) => {
+    if ((e.metaKey || e.ctrlKey) && e.key === 'Enter') {
+      e.preventDefault();
+      void run(input.value);
+    }
+  });
+  // Reset is destructive (wipes durable edits), so require a two-step confirm:
+  // first click arms it; a second click within 3s runs it; otherwise it disarms.
+  if (resetBtn) {
+    const RESET_LABEL = resetBtn.textContent ?? '↺ Reset sandbox';
+    let armed = false;
+    let armTimer: number | undefined;
+    const disarm = () => {
+      armed = false;
+      resetBtn.textContent = RESET_LABEL;
+    };
+    resetBtn.addEventListener('click', () => {
+      if (armed) {
+        if (armTimer) clearTimeout(armTimer);
+        disarm();
+        void doReset();
+        return;
+      }
+      armed = true;
+      resetBtn.textContent = '↺ Click again to confirm';
+      armTimer = window.setTimeout(disarm, 3000);
+    });
+  }
+
+  // Cheatsheet: clicking a command loads it into the editor and clears the
+  // current result (but NOT the activity log — that's history), so you can
+  // read/edit it before pressing Run.
+  root.querySelectorAll<HTMLElement>('[data-cmd]').forEach((b) =>
+    b.addEventListener('click', () => {
+      const cmd = b.dataset.cmd ?? '';
+      input.value = cmd;
+      grid.replaceChildren();
+      if (status) status.hidden = true; // stale timing/echo shouldn't linger before the run
+      renderHint(grid, 'Press ▶ Run (or ⌘/Ctrl+Enter) to execute.');
+      input.focus();
+      input.setSelectionRange(cmd.length, cmd.length);
+    }),
+  );
+
+  // Free the exclusive OPFS lock so a reload reacquires cleanly. The worker
+  // closes the db and self-terminates on 'close'; we must NOT terminate() here,
+  // or it would race (and usually win) before the worker runs db.close().
+  // Skip on bfcache (persisted) so a back/forward restore keeps a live worker.
+  window.addEventListener('pagehide', (e) => {
+    if (e.persisted) return;
+    void call({ op: 'close' });
+  });
+
+  // First view: scan the seeded users namespace.
+  void run('prefix users:', 'system');
+}
+
+/**
+ * Render rows as a table built entirely with DOM methods + textContent — never
+ * innerHTML with interpolated data — so database values (arbitrary user input)
+ * cannot inject markup. Only the static class strings are set as attributes.
+ */
+/** Replay a CSS animation on an element even if its content is unchanged. */
+function retrigger(el: HTMLElement): void {
+  el.classList.remove('pg-result-in');
+  void el.offsetWidth; // force reflow so the animation restarts
+  el.classList.add('pg-result-in');
+}
+
+/** Show a single guidance line in the result area (e.g. after loading a command). */
+function renderHint(grid: HTMLElement, message: string): void {
+  grid.replaceChildren();
+  const p = document.createElement('p');
+  p.className = 'p-4 text-[13px] text-faint';
+  p.textContent = message;
+  grid.append(p);
+}
+
+function renderGrid(grid: HTMLElement, columns: string[], rows: Array<Record<string, unknown>>): void {
+  grid.replaceChildren();
+  if (rows.length === 0) {
+    const empty = document.createElement('p');
+    empty.className = 'p-4 text-[13px] text-faint pg-result-in';
+    empty.textContent = 'No rows.';
+    grid.append(empty);
+    return;
+  }
+
+  const table = document.createElement('table');
+  table.className = 'w-full border-collapse font-mono text-[12.5px] pg-result-in';
+
+  const headRow = document.createElement('tr');
+  for (const c of columns) {
+    const th = document.createElement('th');
+    th.className = 'border-b border-edge px-3 py-2 text-left font-medium text-muted';
+    th.textContent = c;
+    headRow.append(th);
+  }
+  const thead = document.createElement('thead');
+  thead.append(headRow);
+  table.append(thead);
+
+  const tbody = document.createElement('tbody');
+  for (const r of rows) {
+    const tr = document.createElement('tr');
+    tr.className = 'hover:bg-panel/60';
+    for (const c of columns) {
+      const td = document.createElement('td');
+      td.className = 'border-b border-edge px-3 py-1.5 text-fg';
+      td.textContent = String(r[c] ?? '');
+      tr.append(td);
+    }
+    tbody.append(tr);
+  }
+  table.append(tbody);
+  grid.append(table);
+}
+
+/**
+ * Append one structured entry to the activity log — every run, not just writes.
+ * Fields: time (HH:MM:SS, full datetime on hover), status, command, outcome
+ * summary, duration, and the trigger source. Newest first, capped to keep the DOM small.
+ */
+function logActivity(host: HTMLElement | null, entry: ActivityEntry): void {
+  if (!host) return;
+  const now = new Date();
+
+  const line = document.createElement('div');
+  line.className = 'flex items-baseline gap-2 leading-relaxed';
+  line.title = now.toLocaleString();
+
+  const icon = entry.level === 'warn' ? '⚠' : entry.level === 'error' ? '✗' : '✓';
+  const color = entry.level === 'warn' ? 'text-warn' : entry.level === 'error' ? 'text-bad' : 'text-ok';
+  const time = span('shrink-0 text-faint tabular-nums', now.toTimeString().slice(0, 8));
+  const stat = span(`shrink-0 ${color}`, icon);
+  const cmd = span('min-w-0 flex-1 truncate text-fg', entry.command);
+  const summary = span('shrink-0 max-w-[40%] truncate text-faint', entry.summary);
+  const dur = span('shrink-0 text-faint tabular-nums', `${entry.ms < 1 ? '<1' : entry.ms.toFixed(1)} ms`);
+  const src = span('shrink-0 text-dim', entry.source);
+
+  line.append(time, stat, cmd, summary, dur, src);
+  host.prepend(line);
+
+  while (host.childElementCount > MAX_LOG_ENTRIES) host.lastElementChild?.remove();
+}
+
+function span(className: string, text: string): HTMLSpanElement {
+  const el = document.createElement('span');
+  el.className = className;
+  el.textContent = text;
+  return el;
+}
diff --git a/src/scripts/playground/db.worker.ts b/src/scripts/playground/db.worker.ts
new file mode 100644
index 0000000..953d4e1
--- /dev/null
+++ b/src/scripts/playground/db.worker.ts
@@ -0,0 +1,107 @@
+/**
+ * The /playground database worker. Sole owner of the OPFS sync-access handle.
+ * Durable when OPFS is available; otherwise transparently in-memory. Never
+ * throws across postMessage — every failure becomes a structured response.
+ */
+import { open, opfsFileSystem, type Database, type SyncAccessHandle } from '@libredb/libredb/browser';
+import { seed, isSeeded, execute } from './engine';
+import { parseCommand } from './protocol';
+import type { WorkerRequest, WorkerResponse, Mode } from './protocol';
+
+// `createSyncAccessHandle` is a dedicated-Worker-only API absent from TS's DOM lib.
+// Declare it against the package's own (structurally compatible) SyncAccessHandle.
+declare global {
+  interface FileSystemFileHandle {
+    createSyncAccessHandle(): Promise<SyncAccessHandle>;
+  }
+}
+
+const FILE = 'playground.libredb';
+
+let db: Database;
+let mode: Mode = 'memory';
+let handle: SyncAccessHandle | undefined;
+
+/** Acquire the OPFS handle (Worker-only, secure context, exclusive lock) or fall back to in-memory. */
+async function boot(): Promise<void> {
+  try {
+    const root = await navigator.storage.getDirectory();
+    const file = await root.getFileHandle(FILE, { create: true });
+    handle = await file.createSyncAccessHandle();
+    db = open({ path: FILE, fs: opfsFileSystem(handle) });
+    mode = 'opfs';
+  } catch {
+    handle = undefined;
+    db = open();
+    mode = 'memory';
+  }
+  if (!isSeeded(db)) seed(db);
+}
+
+/** Wipe the durable file (or the in-memory db) and reseed. */
+async function reset(): Promise<void> {
+  try {
+    db.close();
+  } catch {
+    /* already closed */
+  }
+  if (mode === 'opfs') {
+    try {
+      const root = await navigator.storage.getDirectory();
+      await root.removeEntry(FILE).catch(() => {});
+    } catch {
+      /* ignore */
+    }
+  }
+  await boot();
+}
+
+const reply = (msg: WorkerResponse) => self.postMessage(msg);
+
+// Serialize ALL message handling onto one promise chain (starting with boot), so
+// only one op ever touches `db` at a time — a `run` can't land mid-`reset`, and
+// `close` can't race an in-flight op. Single-threaded JS + this chain = strict order.
+let chain: Promise<void> = boot();
+
+self.onmessage = (event: MessageEvent<WorkerRequest>) => {
+  const msg = event.data;
+  chain = chain
+    .then(() => handleMessage(msg))
+    .catch((e) => {
+      reply({ id: msg.id, kind: 'result', result: { kind: 'error', error: (e as Error).message } });
+    });
+};
+
+async function handleMessage(msg: WorkerRequest): Promise<void> {
+  switch (msg.op) {
+    case 'ready':
+      reply({ id: msg.id, kind: 'ready', mode });
+      return;
+    case 'run': {
+      const cmd = parseCommand(msg.text);
+      // `stats` needs the on-disk size; getSize() only when relevant (and durable).
+      const fileSize = cmd.op === 'stats' && mode === 'opfs' && handle ? handle.getSize() : undefined;
+      reply({ id: msg.id, kind: 'result', result: execute(db, cmd, fileSize) });
+      return;
+    }
+    case 'reset':
+      await reset();
+      reply({
+        id: msg.id,
+        kind: 'result',
+        result: { kind: 'message', message: 'Sandbox reset to sample data.' },
+      });
+      return;
+    case 'close':
+      try {
+        db.close(); // flush WAL + release the exclusive OPFS sync-access handle
+      } catch {
+        /* already closed */
+      }
+      reply({ id: msg.id, kind: 'closed' });
+      // Self-terminate so the handle is released without the client racing us
+      // via worker.terminate() before this handler runs.
+      self.close();
+      return;
+  }
+}
diff --git a/src/scripts/playground/engine.test.ts b/src/scripts/playground/engine.test.ts
new file mode 100644
index 0000000..f1a23f7
--- /dev/null
+++ b/src/scripts/playground/engine.test.ts
@@ -0,0 +1,171 @@
+import { test, expect } from 'bun:test';
+import { open, isReservedKey } from '@libredb/libredb/browser';
+import { seed, isSeeded, execute, USERS_SCHEMA } from './engine';
+import { parseCommand } from './protocol';
+
+function seeded() {
+  const db = open(); // in-memory; works under bun (no node: imports)
+  seed(db);
+  return db;
+}
+const run = (db: ReturnType<typeof open>, text: string) => execute(db, parseCommand(text));
+
+test('schema primary key is a string column', () => {
+  expect(USERS_SCHEMA.primaryKey).toBe('id');
+  expect(USERS_SCHEMA.columns.id).toBe('string');
+});
+
+test('seed populates the catalog lenses and isSeeded flips', () => {
+  const db = open();
+  expect(isSeeded(db)).toBe(false);
+  seed(db);
+  expect(isSeeded(db)).toBe(true);
+});
+
+test('isSeeded keys off the catalog, so deleting a user kv key does not trigger a re-seed', () => {
+  const db = seeded();
+  run(db, 'delete config:theme'); // a user-writable key
+  expect(isSeeded(db)).toBe(true); // catalog (users/articles) still present
+});
+
+test('get returns a key/value row; missing key is a (nil) message', () => {
+  const db = seeded();
+  const hit = run(db, 'get config:theme');
+  expect(hit).toEqual({ kind: 'rows', columns: ['key', 'value'], rows: [{ key: 'config:theme', value: 'dark' }] });
+  expect(run(db, 'get config:nope').kind).toBe('message');
+});
+
+test('get on a relational key returns its JSON row, pretty-printed', () => {
+  const db = seeded();
+  const r = run(db, 'get users:1');
+  expect(r.kind).toBe('rows');
+  if (r.kind === 'rows') {
+    expect(r.rows[0].key).toBe('users:1');
+    expect(String(r.rows[0].value)).toContain('"name": "Ada"'); // 2-space pretty-print
+  }
+});
+
+test('put/delete give graded create/overwrite/delete feedback with the prior value', () => {
+  const db = seeded();
+
+  // create: a brand-new key is plain success (no warn).
+  const created = run(db, 'put session:1 token');
+  expect(created).toMatchObject({ kind: 'message' });
+  if (created.kind === 'message') {
+    expect(created.level).toBeUndefined();
+    expect(created.message).toContain('created');
+  }
+
+  // overwrite: existing key → warn level, echoes the prior value.
+  const over = run(db, 'put config:theme light');
+  if (over.kind === 'message') {
+    expect(over.level).toBe('warn');
+    expect(over.message).toContain('overwrote');
+    expect(over.message).toContain('dark'); // prior value surfaced for recovery
+  }
+  expect(run(db, 'get config:theme')).toMatchObject({ rows: [{ key: 'config:theme', value: 'light' }] });
+
+  // delete existing: warn level, echoes the removed value.
+  const del = run(db, 'delete config:theme');
+  if (del.kind === 'message') {
+    expect(del.level).toBe('warn');
+    expect(del.message).toContain('deleted');
+    expect(del.message).toContain('light');
+  }
+
+  // delete missing: neutral no-op, no warn.
+  const miss = run(db, 'delete nope:x');
+  if (miss.kind === 'message') {
+    expect(miss.level).toBeUndefined();
+    expect(miss.message).toContain('not found');
+  }
+});
+
+test('prefix scans a namespace — table rows live at users:<pk>', () => {
+  const db = seeded();
+  const r = run(db, 'prefix users:');
+  expect(r.kind).toBe('rows');
+  if (r.kind === 'rows') {
+    expect(r.rows.map((x) => x.key)).toEqual(['users:1', 'users:2', 'users:3']);
+  }
+});
+
+test('prefix articles: sees the document collection at articles:<id>', () => {
+  const db = seeded();
+  const r = run(db, 'prefix articles:');
+  if (r.kind === 'rows') expect(r.rows.map((x) => x.key)).toEqual(['articles:a1', 'articles:a2']);
+});
+
+test('range is a full-keyspace scan and hides the reserved catalog namespace', () => {
+  const db = seeded();
+  // Full keyspace via the lowest..highest code points.
+  const r = execute(db, { op: 'range', start: ' ', end: '\u{10FFFF}' });
+  expect(r.kind).toBe('rows');
+  if (r.kind === 'rows') {
+    const keys = r.rows.map((x) => String(x.key));
+    expect(keys.some((k) => isReservedKey(k))).toBe(false); // no catalog/reserved keys leak
+    expect(keys).toContain('users:1');
+    expect(keys).toContain('articles:a1');
+    expect(keys).toContain('config:theme');
+  }
+});
+
+test('empty prefix surfaces the lens error as an error result, never throws', () => {
+  const db = seeded();
+  expect(execute(db, { op: 'prefix', prefix: '' }).kind).toBe('error');
+});
+
+test('an unknown verb (e.g. SQL) is a friendly error', () => {
+  const db = seeded();
+  expect(run(db, 'select * from users').kind).toBe('error');
+});
+
+test('inspect lists catalogued namespaces with kind + relational schema', () => {
+  const db = seeded();
+  const r = run(db, 'inspect');
+  expect(r.kind).toBe('rows');
+  if (r.kind === 'rows') {
+    const byName = Object.fromEntries(r.rows.map((x) => [x.namespace, x]));
+    expect(byName['users'].kind).toBe('relational');
+    expect(String(byName['users'].schema)).toContain('primaryKey');
+    expect(byName['articles'].kind).toBe('document');
+    expect(byName['articles'].schema).toBe(''); // documents are schemaless
+  }
+});
+
+test('stats counts namespaces by kind (kv is uncatalogued → 0)', () => {
+  const db = seeded();
+  const r = run(db, 'stats');
+  expect(r.kind).toBe('rows');
+  if (r.kind === 'rows') {
+    expect(r.rows[0]).toMatchObject({ namespaces: 2, kv: 0, document: 1, relational: 1, size: 'in-memory' });
+  }
+});
+
+test('import sets every key in one commit, readable afterwards', () => {
+  const db = seeded();
+  const r = run(db, 'import {"color":"teal","mode":"dark"}');
+  expect(r.kind).toBe('message');
+  expect(run(db, 'get color')).toMatchObject({ rows: [{ key: 'color', value: 'teal' }] });
+  expect(run(db, 'get mode')).toMatchObject({ rows: [{ key: 'mode', value: 'dark' }] });
+});
+
+test('import refuses reserved-namespace keys', () => {
+  const db = seeded();
+  const reservedKey = String.fromCharCode(0) + 'libredb:catalog:hack';
+  expect(isReservedKey(reservedKey)).toBe(true);
+  expect(execute(db, { op: 'import', entries: { [reservedKey]: 'x' } }).kind).toBe('error');
+});
+
+test('put and delete also refuse reserved-namespace keys (parity with import)', () => {
+  const db = seeded();
+  const reservedKey = String.fromCharCode(0) + 'libredb:catalog:theme';
+  expect(execute(db, { op: 'put', key: reservedKey, value: 'x' }).kind).toBe('error');
+  expect(execute(db, { op: 'delete', key: reservedKey }).kind).toBe('error');
+});
+
+test('stats reports a byte size when the worker supplies one', () => {
+  const db = seeded();
+  const r = execute(db, { op: 'stats' }, 412);
+  if (r.kind === 'rows') expect(r.rows[0].size).toBe('412 bytes');
+});
diff --git a/src/scripts/playground/engine.ts b/src/scripts/playground/engine.ts
new file mode 100644
index 0000000..12887df
--- /dev/null
+++ b/src/scripts/playground/engine.ts
@@ -0,0 +1,179 @@
+/**
+ * Engine: runs a parsed Command against the LibreDB kv lens and normalizes the
+ * outcome into a RunResult. Mirrors Studio's LibreDBProvider (docs/providers/
+ * libredb.md): one grammar over the raw keyspace, reserved (catalog) keys hidden
+ * from scans via the package's `isReservedKey`, and JSON values pretty-printed.
+ *
+ * The seed writes through the document and relational lenses so the catalog is
+ * real — but the engine reads/writes everything through the kv lens, exactly as
+ * the visitor's commands do: a "table" row is just the key `users:<pk>`.
+ */
+import { kv, doc, table, catalog, isReservedKey, type Database, type TableSchema } from '@libredb/libredb/browser';
+import type { Command, RunResult } from './protocol';
+
+export const USERS_SCHEMA: TableSchema = {
+  primaryKey: 'id',
+  columns: { id: 'string', name: 'string', age: 'number', active: 'boolean' },
+};
+
+export function isSeeded(db: Database): boolean {
+  // Mark "seeded" by the catalog, not a user-writable key like `config:theme`:
+  // the catalog is reserved (and write-protected), survives row deletions, and a
+  // visitor can't empty it — so deleting a kv key never triggers an unwanted
+  // re-seed (which would clobber their edits) on the next reload.
+  return catalog(db).size > 0;
+}
+
+export function seed(db: Database): void {
+  // kv lens — raw key/value config.
+  const store = kv(db);
+  store.set('config:theme', 'dark');
+  store.set('config:locale', 'en');
+  store.set('config:engine', 'libredb');
+
+  // document lens — cataloged as kind "document"; rows live at articles:<id>.
+  const articles = doc(db, 'articles');
+  articles.put('a1', { title: 'Local-first databases', author: 'Ada', published: true });
+  articles.put('a2', { title: 'OPFS in the browser', author: 'Linus', published: false });
+
+  // relational lens — cataloged as kind "relational" + schema; rows live at users:<pk>.
+  const users = table(db, 'users', USERS_SCHEMA);
+  users.insert({ id: '1', name: 'Ada', age: 36, active: true });
+  users.insert({ id: '2', name: 'Linus', age: 41, active: true });
+  users.insert({ id: '3', name: 'Grace', age: 31, active: false });
+}
+
+/** Pretty-print JSON values for the grid; leave non-JSON strings as-is (mirrors Studio's renderValue). */
+function renderValue(value: string): string {
+  try {
+    return JSON.stringify(JSON.parse(value), null, 2);
+  } catch {
+    return value;
+  }
+}
+
+/** A compact, single-line preview of a value for caution messages (overwrote/deleted — was: …). */
+function preview(value: string, max = 60): string {
+  const compact = value.replace(/\s+/g, ' ').trim();
+  return compact.length > max ? `${compact.slice(0, max)}…` : compact;
+}
+
+/** Scan rows → grid rows, hiding the reserved (catalog) namespace and pretty-printing values. */
+function scanRows(entries: readonly { key: string; value: string }[]): Array<Record<string, unknown>> {
+  return entries.filter((e) => !isReservedKey(e.key)).map((e) => ({ key: e.key, value: renderValue(e.value) }));
+}
+
+/**
+ * Execute a parsed command. Total: a lens throw (e.g. empty prefix) becomes an
+ * error result. `fileSize` is the OPFS file's byte size (worker-supplied) for
+ * `stats`; undefined in in-memory mode.
+ */
+export function execute(db: Database, cmd: Command, fileSize?: number): RunResult {
+  try {
+    switch (cmd.op) {
+      case 'error':
+        return { kind: 'error', error: cmd.error };
+      case 'inspect': {
+        const reg = catalog(db);
+        if (reg.size === 0) {
+          return {
+            kind: 'message',
+            message:
+              '(no catalogued namespaces) — only document/relational namespaces are catalogued; raw kv keys live in the keyspace (use prefix/get).',
+          };
+        }
+        const rows = [...reg.entries()].map(([namespace, entry]) => ({
+          namespace,
+          kind: entry.kind,
+          schema: entry.schema ? JSON.stringify(entry.schema) : '',
+        }));
+        return { kind: 'rows', columns: ['namespace', 'kind', 'schema'], rows };
+      }
+      case 'stats': {
+        const reg = catalog(db);
+        let kvCount = 0;
+        let docCount = 0;
+        let relCount = 0;
+        for (const entry of reg.values()) {
+          switch (entry.kind) {
+            case 'document':
+              docCount++;
+              break;
+            case 'relational':
+              relCount++;
+              break;
+            case 'kv':
+              kvCount++;
+              break;
+            default: {
+              // Exhaustiveness guard: a new catalog kind becomes a compile error
+              // here rather than being silently miscounted as kv.
+              const _exhaustive: never = entry.kind;
+              void _exhaustive;
+            }
+          }
+        }
+        return {
+          kind: 'rows',
+          columns: ['size', 'namespaces', 'kv', 'document', 'relational'],
+          rows: [
+            {
+              size: fileSize === undefined ? 'in-memory' : `${fileSize} bytes`,
+              namespaces: reg.size,
+              kv: kvCount,
+              document: docCount,
+              relational: relCount,
+            },
+          ],
+        };
+      }
+      case 'import': {
+        const entries = Object.entries(cmd.entries);
+        for (const [k] of entries) {
+          if (isReservedKey(k)) return { kind: 'error', error: `refused: "${k}" is in the reserved namespace` };
+        }
+        const enc = new TextEncoder();
+        // One transaction → the whole load lands atomically, or none of it does.
+        db.transact((tx) => {
+          for (const [k, v] of entries) tx.set(enc.encode(k), enc.encode(v));
+        });
+        return { kind: 'message', message: `import ${entries.length} keys (one atomic commit)` };
+      }
+      case 'get': {
+        const v = kv(db).get(cmd.key);
+        return v === undefined
+          ? { kind: 'message', message: `(nil) — no key "${cmd.key}"` }
+          : { kind: 'rows', columns: ['key', 'value'], rows: [{ key: cmd.key, value: renderValue(v) }] };
+      }
+      case 'put': {
+        if (isReservedKey(cmd.key))
+          return { kind: 'error', error: `refused: "${cmd.key}" is in the reserved namespace` };
+        // Graded, non-blocking safeguard: a fresh write is silent success; an
+        // overwrite is flagged 'warn' and echoes the prior value so an accidental
+        // clobber is visible and recoverable (re-put it).
+        const prev = kv(db).get(cmd.key);
+        kv(db).set(cmd.key, cmd.value);
+        return prev === undefined
+          ? { kind: 'message', message: `created "${cmd.key}"` }
+          : { kind: 'message', level: 'warn', message: `overwrote "${cmd.key}" — was: ${preview(prev)}` };
+      }
+      case 'delete': {
+        if (isReservedKey(cmd.key))
+          return { kind: 'error', error: `refused: "${cmd.key}" is in the reserved namespace` };
+        // Deleting an existing key is flagged 'warn' and echoes the removed value
+        // (recoverable: put it back). Deleting a missing key is a neutral no-op.
+        const prev = kv(db).get(cmd.key);
+        kv(db).delete(cmd.key);
+        return prev === undefined
+          ? { kind: 'message', message: `nothing to delete — "${cmd.key}" not found` }
+          : { kind: 'message', level: 'warn', message: `deleted "${cmd.key}" — was: ${preview(prev)}` };
+      }
+      case 'prefix':
+        return { kind: 'rows', columns: ['key', 'value'], rows: scanRows(kv(db).prefix(cmd.prefix).toArray()) };
+      case 'range':
+        return { kind: 'rows', columns: ['key', 'value'], rows: scanRows(kv(db).range(cmd.start, cmd.end).toArray()) };
+    }
+  } catch (e) {
+    return { kind: 'error', error: (e as Error).message };
+  }
+}
diff --git a/src/scripts/playground/protocol.test.ts b/src/scripts/playground/protocol.test.ts
new file mode 100644
index 0000000..aad7636
--- /dev/null
+++ b/src/scripts/playground/protocol.test.ts
@@ -0,0 +1,82 @@
+import { test, expect } from 'bun:test';
+import { parseCommand } from './protocol';
+
+test('the five kv verbs parse', () => {
+  expect(parseCommand('get config:theme')).toEqual({ op: 'get', key: 'config:theme' });
+  expect(parseCommand('delete users:1')).toEqual({ op: 'delete', key: 'users:1' });
+  expect(parseCommand('prefix users:')).toEqual({ op: 'prefix', prefix: 'users:' });
+  expect(parseCommand('range a z')).toEqual({ op: 'range', start: 'a', end: 'z' });
+  expect(parseCommand('put session:1 token')).toEqual({ op: 'put', key: 'session:1', value: 'token' });
+});
+
+test('verbs are case-insensitive', () => {
+  expect(parseCommand('GET config:theme')).toEqual({ op: 'get', key: 'config:theme' });
+  expect(parseCommand('Prefix users:')).toEqual({ op: 'prefix', prefix: 'users:' });
+});
+
+test('put captures a JSON value tail verbatim', () => {
+  expect(parseCommand('put users:4 {"id":"4","name":"Lin"}')).toEqual({
+    op: 'put',
+    key: 'users:4',
+    value: '{"id":"4","name":"Lin"}',
+  });
+});
+
+test('put collapses unquoted whitespace, quotes preserve it', () => {
+  expect(parseCommand('put note hello   world')).toEqual({ op: 'put', key: 'note', value: 'hello world' });
+  expect(parseCommand('put note "hello   world"')).toEqual({ op: 'put', key: 'note', value: 'hello   world' });
+});
+
+test('unmatched quote is a friendly error', () => {
+  expect(parseCommand('put k "oops')).toMatchObject({ op: 'error' });
+});
+
+test('comment and blank lines are skipped; first real line runs', () => {
+  expect(parseCommand('# a cheatsheet comment\n\nprefix users:')).toEqual({ op: 'prefix', prefix: 'users:' });
+});
+
+test('empty / comment-only input is an error', () => {
+  expect(parseCommand('   ')).toMatchObject({ op: 'error' });
+  expect(parseCommand('# only a comment')).toMatchObject({ op: 'error' });
+});
+
+test('wrong arg count yields a usage error', () => {
+  expect(parseCommand('get')).toMatchObject({ op: 'error' });
+  expect(parseCommand('range a')).toMatchObject({ op: 'error' });
+  expect(parseCommand('put k')).toMatchObject({ op: 'error' });
+});
+
+test('unknown verb lists the supported verbs', () => {
+  const r = parseCommand('select * from users');
+  expect(r.op).toBe('error');
+  if (r.op === 'error') expect(r.error).toContain('get');
+});
+
+test('inspect / stats parse with no args', () => {
+  expect(parseCommand('inspect')).toEqual({ op: 'inspect' });
+  expect(parseCommand('stats')).toEqual({ op: 'stats' });
+  expect(parseCommand('inspect extra')).toMatchObject({ op: 'error' });
+});
+
+test('import parses a JSON object of string values', () => {
+  expect(parseCommand('import {"session:a1":"token-abc","session:a2":"token-xyz"}')).toEqual({
+    op: 'import',
+    entries: { 'session:a1': 'token-abc', 'session:a2': 'token-xyz' },
+  });
+});
+
+test('import keeps a literal "__proto__" key as an own property (no silent drop)', () => {
+  const r = parseCommand('import {"__proto__":"x","a":"1"}');
+  expect(r.op).toBe('import');
+  if (r.op === 'import') {
+    expect(Object.hasOwn(r.entries, '__proto__')).toBe(true);
+    expect(r.entries['__proto__']).toBe('x');
+    expect(r.entries['a']).toBe('1');
+  }
+});
+
+test('import rejects non-objects and non-string values', () => {
+  expect(parseCommand('import [1,2,3]')).toMatchObject({ op: 'error' });
+  expect(parseCommand('import {"n":1}')).toMatchObject({ op: 'error' });
+  expect(parseCommand('import not-json')).toMatchObject({ op: 'error' });
+});
diff --git a/src/scripts/playground/protocol.ts b/src/scripts/playground/protocol.ts
new file mode 100644
index 0000000..293731a
--- /dev/null
+++ b/src/scripts/playground/protocol.ts
@@ -0,0 +1,153 @@
+/**
+ * Command grammar + worker message protocol for the /playground editor.
+ *
+ * The grammar is LibreDB's real one — the five kv-lens verbs, mirroring Studio's
+ * LibreDBProvider (docs/providers/libredb.md §5). LibreDB is an ordered key-value
+ * store; "tables" and "document collections" are conventions over the keyspace
+ * (`<table>:<pk>`, `<collection>:<id>`) recorded in the catalog — NOT separate
+ * command dialects. So there is one grammar, not a SQL/document translator.
+ *
+ * Pure: no DOM, no engine import.
+ */
+
+export type Mode = 'opfs' | 'memory';
+
+/** A parsed, executable command (or a friendly parse error). */
+export type Command =
+  | { op: 'get'; key: string }
+  | { op: 'put'; key: string; value: string }
+  | { op: 'delete'; key: string }
+  | { op: 'prefix'; prefix: string }
+  | { op: 'range'; start: string; end: string }
+  | { op: 'inspect' }
+  | { op: 'stats' }
+  | { op: 'import'; entries: Record<string, string> }
+  | { op: 'error'; error: string };
+
+/** Normalized result a command produces, shaped for the grid or a console line. */
+export type RunResult =
+  | { kind: 'rows'; columns: string[]; rows: Array<Record<string, unknown>> }
+  | { kind: 'message'; message: string; level?: 'ok' | 'warn' } // 'warn' = a destructive write (overwrite/delete)
+  | { kind: 'error'; error: string };
+
+export type WorkerRequest =
+  | { id: number; op: 'ready' }
+  | { id: number; op: 'run'; text: string }
+  | { id: number; op: 'reset' }
+  | { id: number; op: 'close' };
+
+export type WorkerResponse =
+  | { id: number; kind: 'ready'; mode: Mode }
+  | { id: number; kind: 'result'; result: RunResult }
+  | { id: number; kind: 'closed' };
+
+const VERBS = 'get, put, delete, prefix, range, inspect, stats, import';
+const err = (error: string): Command => ({ op: 'error', error });
+
+/** Parse an `import` JSON tail into a validated object of string values (mirrors the CLI). */
+function parseImport(tail: string): Command {
+  let parsed: unknown;
+  try {
+    parsed = JSON.parse(tail);
+  } catch {
+    return err('import expects a JSON object of string values, e.g. import {"k":"v"}');
+  }
+  if (parsed === null || typeof parsed !== 'object' || Array.isArray(parsed)) {
+    return err('import expects a JSON object, e.g. import {"k":"v"}');
+  }
+  // Null-prototype accumulator: a literal "__proto__" key is an OWN property
+  // assignment here (not the Object.prototype setter), so it imports instead of
+  // silently no-op'ing.
+  const entries: Record<string, string> = Object.create(null);
+  for (const [k, v] of Object.entries(parsed)) {
+    if (typeof v !== 'string') return err(`import value for "${k}" must be a string`);
+    entries[k] = v;
+  }
+  return { op: 'import', entries };
+}
+
+/**
+ * Quote-aware tokenizer (mirrors Studio's `tokenize`): single/double quotes
+ * preserve internal whitespace, an unmatched quote is rejected, and consecutive
+ * unquoted whitespace collapses to one boundary.
+ */
+function tokenize(line: string): { ok: true; tokens: string[] } | { ok: false; error: string } {
+  const tokens: string[] = [];
+  const n = line.length;
+  let i = 0;
+  const isSpace = (c: string) => c === ' ' || c === '\t';
+  while (i < n) {
+    while (i < n && isSpace(line[i])) i++;
+    if (i >= n) break;
+    const ch = line[i];
+    let tok = '';
+    if (ch === '"' || ch === "'") {
+      i++;
+      let closed = false;
+      while (i < n) {
+        if (line[i] === ch) {
+          closed = true;
+          i++;
+          break;
+        }
+        tok += line[i++];
+      }
+      if (!closed) return { ok: false, error: 'Unmatched quote in command.' };
+    } else {
+      while (i < n && !isSpace(line[i])) tok += line[i++];
+    }
+    tokens.push(tok);
+  }
+  return { ok: true, tokens };
+}
+
+/** First non-blank, non-`#`-comment line — lets a commented cheatsheet buffer run its first command. */
+function firstCommandLine(text: string): string | undefined {
+  for (const raw of text.split('\n')) {
+    const line = raw.trim();
+    if (line === '' || line.startsWith('#')) continue;
+    return line;
+  }
+  return undefined;
+}
+
+/**
+ * Parse one command. Total: never throws; unrecognized or malformed input
+ * returns `{ op: "error" }` so the worker boundary stays clean.
+ */
+export function parseCommand(text: string): Command {
+  const line = firstCommandLine(text);
+  if (line === undefined) return err(`Empty command. Supported: ${VERBS}.`);
+
+  // `import` takes a raw JSON tail (quotes/braces), so handle it before tokenizing.
+  const imp = /^import\s+([\s\S]+)$/i.exec(line);
+  if (imp) return parseImport(imp[1]);
+
+  const t = tokenize(line);
+  if (!t.ok) return err(t.error);
+  const { tokens } = t;
+  const verb = (tokens[0] ?? '').toLowerCase();
+
+  switch (verb) {
+    case 'inspect':
+      return tokens.length === 1 ? { op: 'inspect' } : err('Usage: inspect');
+    case 'stats':
+      return tokens.length === 1 ? { op: 'stats' } : err('Usage: stats');
+    case 'get':
+      return tokens.length === 2 ? { op: 'get', key: tokens[1] } : err('Usage: get <key>');
+    case 'delete':
+      return tokens.length === 2 ? { op: 'delete', key: tokens[1] } : err('Usage: delete <key>');
+    case 'prefix':
+      return tokens.length === 2 ? { op: 'prefix', prefix: tokens[1] } : err('Usage: prefix <prefix>');
+    case 'range':
+      return tokens.length === 3
+        ? { op: 'range', start: tokens[1], end: tokens[2] }
+        : err('Usage: range <start> <end>');
+    case 'put':
+      return tokens.length >= 3
+        ? { op: 'put', key: tokens[1], value: tokens.slice(2).join(' ') }
+        : err('Usage: put <key> <value>');
+    default:
+      return err(`Unknown command "${tokens[0] ?? ''}". Supported: ${VERBS}.`);
+  }
+}
diff --git a/src/scripts/studio.ts b/src/scripts/studio.ts
index c299ad2..7229905 100644
--- a/src/scripts/studio.ts
+++ b/src/scripts/studio.ts
@@ -31,6 +31,14 @@ function syncActive() {
     a.closest<HTMLElement>('.exp-row')?.classList.toggle('active', on);
     a.setAttribute('aria-current', on ? 'true' : 'false');
   });
+  // Top-bar nav links (the bar is transition:persist'd, so reflect active here on
+  // every page-load rather than at SSR time, which would go stale across VT nav).
+  document.querySelectorAll<HTMLElement>('[data-topbar-link]').forEach((a) => {
+    const on = a.dataset.topbarLink === id;
+    a.classList.toggle('text-primary', on);
+    a.classList.toggle('text-muted', !on);
+    a.setAttribute('aria-current', on ? 'page' : 'false');
+  });
   const t = document.querySelector('[data-statusbar-table]');
   const r = document.querySelector('[data-statusbar-rows]');
   if (t) t.textContent = meta.table;
diff --git a/src/styles/global.css b/src/styles/global.css
index 4d98b39..f22e2c9 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -173,6 +173,26 @@
   }
 }
 
+/* Playground: fade+slide the result in on each run so an instant query is still perceptible */
+@keyframes pg-result-in {
+  0% {
+    opacity: 0;
+    transform: translateY(4px);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+.pg-result-in {
+  animation: pg-result-in 0.18s ease-out;
+}
+@media (prefers-reduced-motion: reduce) {
+  .pg-result-in {
+    animation: none;
+  }
+}
+
 /* Accordion (native <details>) */
 summary {
   list-style: none;