@korajs/cli 0.5.0 → 1.0.0-beta.0

package/dist/bin.cjs

@@ -5,25 +5,2411 @@ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __esm = (fn, res) => function __init() {
+  return fn && (res = (0, fn[__getOwnPropNames(fn)[0]])(fn = 0)), res;
+};
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
 var __copyProps = (to, from, except, desc) => {
   if (from && typeof from === "object" || typeof from === "function") {
     for (let key of __getOwnPropNames(from))
       if (!__hasOwnProp.call(to, key) && key !== except)
         __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
   }
-  return to;
-};
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+
+// src/utils/fs-helpers.ts
+async function directoryExists(path) {
+  try {
+    await (0, import_promises2.access)(path);
+    return true;
+  } catch {
+    return false;
+  }
+}
+async function findProjectRoot(startDir) {
+  let current = (0, import_node_path2.resolve)(startDir ?? process.cwd());
+  for (; ; ) {
+    const pkgPath = (0, import_node_path2.join)(current, "package.json");
+    try {
+      const content = await (0, import_promises2.readFile)(pkgPath, "utf-8");
+      const pkg = JSON.parse(content);
+      if (isKoraProject(pkg)) {
+        return current;
+      }
+    } catch {
+    }
+    const parent = (0, import_node_path2.dirname)(current);
+    if (parent === current) break;
+    current = parent;
+  }
+  return null;
+}
+async function findSchemaFile(projectRoot) {
+  const candidates = [
+    (0, import_node_path2.join)(projectRoot, "src", "schema.ts"),
+    (0, import_node_path2.join)(projectRoot, "schema.ts"),
+    (0, import_node_path2.join)(projectRoot, "src", "schema.js"),
+    (0, import_node_path2.join)(projectRoot, "schema.js")
+  ];
+  for (const candidate of candidates) {
+    try {
+      await (0, import_promises2.access)(candidate);
+      return candidate;
+    } catch {
+    }
+  }
+  return null;
+}
+async function hasTsxInstalled(projectRoot) {
+  try {
+    await (0, import_promises2.access)((0, import_node_path2.join)(projectRoot, "node_modules", "tsx", "package.json"));
+    return true;
+  } catch {
+    return false;
+  }
+}
+async function resolveProjectBinaryEntryPoint(projectRoot, packageName, binaryName) {
+  const pkgJsonPath = (0, import_node_path2.join)(projectRoot, "node_modules", packageName, "package.json");
+  try {
+    const content = await (0, import_promises2.readFile)(pkgJsonPath, "utf-8");
+    const pkg = JSON.parse(content);
+    let binPath;
+    if (typeof pkg.bin === "string") {
+      binPath = pkg.bin;
+    } else if (typeof pkg.bin === "object" && pkg.bin !== null) {
+      binPath = pkg.bin[binaryName];
+    }
+    if (!binPath) return null;
+    const fullPath = (0, import_node_path2.join)(projectRoot, "node_modules", packageName, binPath);
+    await (0, import_promises2.access)(fullPath);
+    return fullPath;
+  } catch {
+    return null;
+  }
+}
+function isKoraProject(pkg) {
+  if (typeof pkg !== "object" || pkg === null) return false;
+  const record = pkg;
+  return hasKoraDep(record.dependencies) || hasKoraDep(record.devDependencies);
+}
+function hasKoraDep(deps) {
+  if (typeof deps !== "object" || deps === null) return false;
+  return Object.keys(deps).some((key) => key === "kora" || key.startsWith("@korajs/"));
+}
+var import_promises2, import_node_path2;
+var init_fs_helpers = __esm({
+  "src/utils/fs-helpers.ts"() {
+    "use strict";
+    import_promises2 = require("fs/promises");
+    import_node_path2 = require("path");
+  }
+});
+
+// src/commands/migrate/schema-loader.ts
+var schema_loader_exports = {};
+__export(schema_loader_exports, {
+  loadSchemaDefinition: () => loadSchemaDefinition
+});
+async function loadSchemaDefinition(schemaPath, projectRoot) {
+  const ext = (0, import_node_path4.extname)(schemaPath);
+  const moduleValue = ext === ".ts" || ext === ".mts" || ext === ".cts" ? await loadTypeScriptModule(schemaPath, projectRoot) : await import(`${(0, import_node_url2.pathToFileURL)(schemaPath).href}?t=${Date.now()}-${Math.random()}`);
+  return extractSchema(moduleValue);
+}
+function extractSchema(value) {
+  if (typeof value !== "object" || value === null) {
+    throw new Error("Schema module must export an object.");
+  }
+  const moduleRecord = value;
+  const candidate = moduleRecord.default ?? moduleRecord;
+  if (!isSchemaDefinition(candidate)) {
+    throw new Error("Schema module must export a valid SchemaDefinition as default export.");
+  }
+  return candidate;
+}
+function isSchemaDefinition(value) {
+  if (typeof value !== "object" || value === null) return false;
+  const object = value;
+  return typeof object.version === "number" && typeof object.collections === "object" && object.collections !== null && typeof object.relations === "object" && object.relations !== null;
+}
+async function loadTypeScriptModule(schemaPath, projectRoot) {
+  if (!await hasTsxInstalled(projectRoot)) {
+    throw new Error(
+      `Schema file is TypeScript (${schemaPath}) but local "tsx" was not found. Install tsx in the project.`
+    );
+  }
+  const script = "const modulePath = process.argv[process.argv.length - 1];import('node:url').then(u => import(u.pathToFileURL(modulePath).href)).then(mod => { const v = mod.default ?? mod; process.stdout.write(JSON.stringify(v)) }).catch(e => { process.stderr.write(String(e)); process.exit(1) })";
+  const output = await runCommand2(
+    process.execPath,
+    ["--import", "tsx", "--eval", script, schemaPath],
+    projectRoot
+  );
+  try {
+    return JSON.parse(output);
+  } catch {
+    throw new Error(`Failed to parse schema module output for ${schemaPath}`);
+  }
+}
+async function runCommand2(command, args, cwd) {
+  return await new Promise((resolve12, reject) => {
+    const child = (0, import_node_child_process2.spawn)(command, args, {
+      cwd,
+      stdio: ["ignore", "pipe", "pipe"],
+      env: process.env
+    });
+    let stdout = "";
+    let stderr = "";
+    child.stdout?.on("data", (chunk) => {
+      stdout += chunk.toString("utf-8");
+    });
+    child.stderr?.on("data", (chunk) => {
+      stderr += chunk.toString("utf-8");
+    });
+    child.on("error", (error) => {
+      reject(error);
+    });
+    child.on("exit", (code) => {
+      if (code === 0) {
+        resolve12(stdout.trim());
+        return;
+      }
+      reject(
+        new Error(`Failed to load TypeScript schema (exit ${code ?? "unknown"}): ${stderr.trim()}`)
+      );
+    });
+  });
+}
+var import_node_child_process2, import_node_path4, import_node_url2;
+var init_schema_loader = __esm({
+  "src/commands/migrate/schema-loader.ts"() {
+    "use strict";
+    import_node_child_process2 = require("child_process");
+    import_node_path4 = require("path");
+    import_node_url2 = require("url");
+    init_fs_helpers();
+  }
+});
+
+// src/commands/studio/db-reader.ts
+function parseVersionStamp(raw) {
+  if (typeof raw !== "string" || raw.length === 0) {
+    return null;
+  }
+  const parts = raw.split(":");
+  if (parts.length < 3) {
+    return null;
+  }
+  const wallTime = Number.parseInt(parts[0] ?? "", 10);
+  const logical = Number.parseInt(parts[1] ?? "", 10);
+  if (Number.isNaN(wallTime) || Number.isNaN(logical)) {
+    return null;
+  }
+  return { wallTime, logical, nodeId: parts.slice(2).join(":") };
+}
+function parseFieldVersionsColumn(raw) {
+  if (typeof raw !== "string" || raw.length === 0) {
+    return {};
+  }
+  try {
+    const parsed = JSON.parse(raw);
+    const result = {};
+    for (const [field, value] of Object.entries(parsed)) {
+      const version = parseVersionStamp(value);
+      if (version) {
+        result[field] = version;
+      }
+    }
+    return result;
+  } catch {
+    return {};
+  }
+}
+function safeIdentifier(name) {
+  if (!/^[a-zA-Z0-9_]+$/.test(name)) {
+    throw new Error(`Unsafe SQL identifier: "${name}"`);
+  }
+  return name;
+}
+function parseJsonColumn(raw) {
+  if (typeof raw !== "string" || raw.length === 0) {
+    return null;
+  }
+  try {
+    return JSON.parse(raw);
+  } catch {
+    return null;
+  }
+}
+function parseJsonArrayColumn(raw) {
+  if (typeof raw !== "string" || raw.length === 0) {
+    return [];
+  }
+  try {
+    const parsed = JSON.parse(raw);
+    return Array.isArray(parsed) ? parsed.map(String) : [];
+  } catch {
+    return [];
+  }
+}
+var KORA_TABLE_PREFIX, OPS_TABLE_PREFIX, META_COLUMNS, StudioDbReader;
+var init_db_reader = __esm({
+  "src/commands/studio/db-reader.ts"() {
+    "use strict";
+    KORA_TABLE_PREFIX = "_kora_";
+    OPS_TABLE_PREFIX = "_kora_ops_";
+    META_COLUMNS = /* @__PURE__ */ new Set([
+      "id",
+      "_created_at",
+      "_updated_at",
+      "_version",
+      "_field_versions",
+      "_deleted"
+    ]);
+    StudioDbReader = class _StudioDbReader {
+      constructor(db, dbPath) {
+        this.db = db;
+        this.dbPath = dbPath;
+      }
+      db;
+      dbPath;
+      /**
+       * Open a Kora database strictly read-only.
+       * @throws when the file does not exist or is not a Kora database
+       */
+      static async open(dbPath) {
+        let Database;
+        try {
+          Database = (await import("better-sqlite3")).default;
+        } catch {
+          throw new Error(
+            'Kora Studio needs the "better-sqlite3" package to open database files. Install it in your project: pnpm add -D better-sqlite3'
+          );
+        }
+        const db = new Database(dbPath, { readonly: true, fileMustExist: true });
+        const reader = new _StudioDbReader(db, dbPath);
+        if (reader.listCollections().length === 0 && !reader.hasKoraTables()) {
+          db.close();
+          throw new Error(`"${dbPath}" does not look like a Kora database (no _kora_* tables found).`);
+        }
+        return reader;
+      }
+      close() {
+        this.db.close();
+      }
+      hasKoraTables() {
+        const row = this.db.prepare("SELECT COUNT(*) as count FROM sqlite_master WHERE type='table' AND name LIKE ?").get(`${KORA_TABLE_PREFIX}%`);
+        return row.count > 0;
+      }
+      /** Collections = tables that have a companion _kora_ops_<name> table. */
+      listCollections() {
+        const tables = this.db.prepare("SELECT name FROM sqlite_master WHERE type='table' ORDER BY name").all();
+        const names = new Set(tables.map((t2) => t2.name));
+        const collections = [];
+        for (const { name } of tables) {
+          if (name.startsWith(OPS_TABLE_PREFIX)) {
+            const collection = name.slice(OPS_TABLE_PREFIX.length);
+            if (names.has(collection)) {
+              collections.push(collection);
+            }
+          }
+        }
+        return collections.sort();
+      }
+      overview() {
+        const collections = this.listCollections().map((name) => {
+          const table = safeIdentifier(name);
+          const live = this.db.prepare(`SELECT COUNT(*) as count FROM ${table} WHERE _deleted = 0`).get();
+          const tombstones = this.db.prepare(`SELECT COUNT(*) as count FROM ${table} WHERE _deleted = 1`).get();
+          const operations = this.db.prepare(`SELECT COUNT(*) as count FROM ${OPS_TABLE_PREFIX}${table}`).get();
+          const columnRows = this.db.prepare(`PRAGMA table_info(${table})`).all();
+          return {
+            name,
+            liveRecords: live.count,
+            tombstones: tombstones.count,
+            operations: operations.count,
+            columns: columnRows.map((c) => c.name).filter((c) => !META_COLUMNS.has(c))
+          };
+        });
+        const versionVector = this.tableExists("_kora_version_vector") ? this.db.prepare(
+          "SELECT node_id as nodeId, sequence_number as sequenceNumber FROM _kora_version_vector ORDER BY node_id"
+        ).all() : [];
+        const meta = this.tableExists("_kora_meta") ? this.db.prepare("SELECT key, value FROM _kora_meta ORDER BY key").all() : [];
+        const pendingSyncOps = this.tableExists("_kora_sync_queue") ? this.db.prepare("SELECT COUNT(*) as count FROM _kora_sync_queue").get().count : 0;
+        const auditTraces = this.tableExists("_kora_audit_traces") ? this.db.prepare("SELECT COUNT(*) as count FROM _kora_audit_traces").get().count : 0;
+        return { dbPath: this.dbPath, collections, versionVector, meta, pendingSyncOps, auditTraces };
+      }
+      records(collection, options = {}) {
+        const table = safeIdentifier(collection);
+        const limit = Math.min(Math.max(options.limit ?? 50, 1), 500);
+        const offset = Math.max(options.offset ?? 0, 0);
+        const clauses = [];
+        const params = [];
+        if (!options.includeDeleted) {
+          clauses.push("_deleted = 0");
+        }
+        if (options.search && options.search.trim().length > 0) {
+          const textColumns = this.db.prepare(`PRAGMA table_info(${table})`).all().filter((c) => c.type.toUpperCase().includes("TEXT") || c.name === "id");
+          const term = `%${options.search.trim()}%`;
+          const likes = textColumns.map((c) => {
+            params.push(term);
+            return `${safeIdentifier(c.name)} LIKE ?`;
+          });
+          if (likes.length > 0) {
+            clauses.push(`(${likes.join(" OR ")})`);
+          }
+        }
+        const where = clauses.length > 0 ? `WHERE ${clauses.join(" AND ")}` : "";
+        const total = this.db.prepare(`SELECT COUNT(*) as count FROM ${table} ${where}`).get(...params).count;
+        const rows = this.db.prepare(`SELECT * FROM ${table} ${where} ORDER BY _updated_at DESC LIMIT ? OFFSET ?`).all(...params, limit, offset);
+        return { records: rows.map((row) => this.toStudioRecord(row)), total };
+      }
+      /** Full operation log for one collection (capped), for replay and the DAG. */
+      allOperations(collection, cap = 5e3) {
+        const table = safeIdentifier(collection);
+        const rows = this.db.prepare(`SELECT * FROM ${OPS_TABLE_PREFIX}${table} ORDER BY timestamp ASC LIMIT ?`).all(Math.min(Math.max(cap, 1), 2e4));
+        return rows.map((row) => this.toStudioOperation(row));
+      }
+      /**
+       * Cheap change fingerprint for live updates. SQLite's `data_version` PRAGMA
+       * increments whenever ANOTHER connection commits — exactly what a read-only
+       * watcher needs to know "something changed, refetch".
+       */
+      fingerprint() {
+        const row = this.db.prepare("PRAGMA data_version").get();
+        return String(row.data_version);
+      }
+      /** Raw value of a single column on a record (for richtext preview decode). */
+      rawFieldValue(collection, recordId, field) {
+        const table = safeIdentifier(collection);
+        const column = safeIdentifier(field);
+        const row = this.db.prepare(`SELECT ${column} as value FROM ${table} WHERE id = ?`).get(recordId);
+        return row?.value;
+      }
+      record(collection, recordId) {
+        const table = safeIdentifier(collection);
+        const row = this.db.prepare(`SELECT * FROM ${table} WHERE id = ?`).get(recordId);
+        return row ? this.toStudioRecord(row) : null;
+      }
+      /** Full operation history for one record, newest first. */
+      recordOperations(collection, recordId) {
+        const table = safeIdentifier(collection);
+        const rows = this.db.prepare(
+          `SELECT * FROM ${OPS_TABLE_PREFIX}${table} WHERE record_id = ? ORDER BY timestamp DESC`
+        ).all(recordId);
+        return rows.map((row) => this.toStudioOperation(row));
+      }
+      operations(collection, options = {}) {
+        const table = safeIdentifier(collection);
+        const limit = Math.min(Math.max(options.limit ?? 50, 1), 500);
+        const offset = Math.max(options.offset ?? 0, 0);
+        const total = this.db.prepare(`SELECT COUNT(*) as count FROM ${OPS_TABLE_PREFIX}${table}`).get().count;
+        const rows = this.db.prepare(`SELECT * FROM ${OPS_TABLE_PREFIX}${table} ORDER BY timestamp DESC LIMIT ? OFFSET ?`).all(limit, offset);
+        return { operations: rows.map((row) => this.toStudioOperation(row)), total };
+      }
+      auditTraces(limit = 100) {
+        if (!this.tableExists("_kora_audit_traces")) {
+          return [];
+        }
+        const rows = this.db.prepare(
+          `SELECT id, recorded_at, event_type, collection, record_id, field, strategy, tier, constraint_name
+				 FROM _kora_audit_traces ORDER BY recorded_at DESC LIMIT ?`
+        ).all(Math.min(Math.max(limit, 1), 500));
+        return rows.map((row) => ({
+          id: String(row.id),
+          recordedAt: Number(row.recorded_at),
+          eventType: String(row.event_type),
+          collection: String(row.collection),
+          recordId: String(row.record_id),
+          field: String(row.field),
+          strategy: String(row.strategy),
+          tier: Number(row.tier),
+          constraintName: row.constraint_name === null ? null : String(row.constraint_name)
+        }));
+      }
+      tableExists(name) {
+        const row = this.db.prepare("SELECT COUNT(*) as count FROM sqlite_master WHERE type='table' AND name = ?").get(name);
+        return row.count > 0;
+      }
+      toStudioRecord(row) {
+        const fields = {};
+        for (const [key, value] of Object.entries(row)) {
+          if (!META_COLUMNS.has(key)) {
+            fields[key] = value instanceof Uint8Array || Buffer.isBuffer(value) ? `<binary ${value.byteLength} bytes>` : value;
+          }
+        }
+        return {
+          id: String(row.id),
+          fields,
+          createdAt: Number(row._created_at),
+          updatedAt: Number(row._updated_at),
+          deleted: row._deleted === 1,
+          version: parseVersionStamp(row._version),
+          fieldVersions: parseFieldVersionsColumn(row._field_versions)
+        };
+      }
+      toStudioOperation(row) {
+        return {
+          id: String(row.id),
+          nodeId: String(row.node_id),
+          type: String(row.type),
+          recordId: String(row.record_id),
+          data: parseJsonColumn(row.data),
+          previousData: parseJsonColumn(row.previous_data),
+          timestamp: parseVersionStamp(row.timestamp),
+          sequenceNumber: Number(row.sequence_number),
+          causalDeps: parseJsonArrayColumn(row.causal_deps),
+          schemaVersion: Number(row.schema_version)
+        };
+      }
+    };
+  }
+});
+
+// src/commands/studio/studio-replay.ts
+function compareVersion(a, b) {
+  if (!a || !b) {
+    return a === b ? 0 : a ? 1 : -1;
+  }
+  if (a.wallTime !== b.wallTime) {
+    return a.wallTime - b.wallTime;
+  }
+  if (a.logical !== b.logical) {
+    return a.logical - b.logical;
+  }
+  return a.nodeId < b.nodeId ? -1 : a.nodeId > b.nodeId ? 1 : 0;
+}
+function sortByHlc(ops) {
+  return [...ops].sort((a, b) => compareVersion(a.timestamp, b.timestamp));
+}
+function replayToOperation(ops, upToOpId) {
+  const ordered = sortByHlc(ops);
+  let cutIndex = ordered.length - 1;
+  if (upToOpId !== null) {
+    const found = ordered.findIndex((o) => o.id === upToOpId);
+    if (found === -1) {
+      throw new Error(`Operation "${upToOpId}" not found in the log`);
+    }
+    cutIndex = found;
+  }
+  const records = /* @__PURE__ */ new Map();
+  for (let i = 0; i <= cutIndex; i++) {
+    const operation = ordered[i];
+    if (!operation) {
+      continue;
+    }
+    const writer = operation.timestamp ? shortNode(operation.timestamp.nodeId) : "?";
+    if (operation.type === "insert" && operation.data) {
+      const writers = {};
+      for (const field of Object.keys(operation.data)) {
+        writers[field] = writer;
+      }
+      records.set(operation.recordId, {
+        fields: { ...operation.data },
+        deleted: false,
+        writers
+      });
+    } else if (operation.type === "update" && operation.data) {
+      const existing = records.get(operation.recordId);
+      if (existing) {
+        for (const [field, value] of Object.entries(operation.data)) {
+          existing.fields[field] = value;
+          existing.writers[field] = writer;
+        }
+      } else {
+        const writers = {};
+        for (const field of Object.keys(operation.data)) {
+          writers[field] = writer;
+        }
+        records.set(operation.recordId, {
+          fields: { ...operation.data },
+          deleted: false,
+          writers
+        });
+      }
+    } else if (operation.type === "delete") {
+      const existing = records.get(operation.recordId);
+      if (existing) {
+        existing.deleted = true;
+      } else {
+        records.set(operation.recordId, { fields: {}, deleted: true, writers: {} });
+      }
+    }
+  }
+  return {
+    records: [...records.entries()].map(([id, r]) => ({
+      id,
+      fields: r.fields,
+      deleted: r.deleted,
+      lastWriterByField: r.writers
+    })),
+    appliedCount: cutIndex + 1,
+    totalCount: ordered.length,
+    cutOperation: ordered[cutIndex] ?? null
+  };
+}
+function buildCausalDag(ops) {
+  const ordered = sortByHlc(ops);
+  const laneByNode = /* @__PURE__ */ new Map();
+  const lanes = [];
+  for (const operation of ordered) {
+    if (!laneByNode.has(operation.nodeId)) {
+      laneByNode.set(operation.nodeId, lanes.length);
+      lanes.push({ nodeId: operation.nodeId, shortNodeId: shortNode(operation.nodeId) });
+    }
+  }
+  const idSet = new Set(ordered.map((o) => o.id));
+  const nodes = ordered.map((operation, index) => ({
+    id: operation.id,
+    type: operation.type,
+    recordId: operation.recordId,
+    nodeId: operation.nodeId,
+    shortNodeId: shortNode(operation.nodeId),
+    sequenceNumber: operation.sequenceNumber,
+    wallTime: operation.timestamp?.wallTime ?? 0,
+    x: index,
+    lane: laneByNode.get(operation.nodeId) ?? 0,
+    dataPreview: operation.data ? JSON.stringify(operation.data).slice(0, 80) : ""
+  }));
+  const edges = [];
+  for (const operation of ordered) {
+    for (const dep of operation.causalDeps) {
+      if (idSet.has(dep)) {
+        edges.push({ from: dep, to: operation.id });
+      }
+    }
+  }
+  return { nodes, edges, lanes };
+}
+function shortNode(nodeId) {
+  return nodeId.length > 8 ? nodeId.slice(-8) : nodeId;
+}
+var init_studio_replay = __esm({
+  "src/commands/studio/studio-replay.ts"() {
+    "use strict";
+  }
+});
+
+// src/commands/studio/studio-ui.ts
+var STUDIO_HTML;
+var init_studio_ui = __esm({
+  "src/commands/studio/studio-ui.ts"() {
+    "use strict";
+    STUDIO_HTML = `<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8" />
+<meta name="viewport" content="width=device-width, initial-scale=1" />
+<title>Kora Studio</title>
+<link rel="stylesheet" href="/style.css" />
+</head>
+<body>
+<header>
+  <div class="logo">kora <span>studio</span></div>
+  <div class="modebadge" id="modebadge"></div>
+  <div class="dbpath mono" id="dbpath"></div>
+  <div class="live" id="live"><div class="dot"></div><span>live</span></div>
+  <button id="refresh">Refresh</button>
+</header>
+<div class="tabs" id="tabs"></div>
+<div class="layout">
+  <nav class="sidebar" id="sidebar"></nav>
+  <main id="main"><div class="empty">Loading\u2026</div></main>
+</div>
+<div class="drawer" id="drawer"></div>
+<div class="dag-tip" id="dagtip"></div>
+<script src="/app.js"></script>
+</body>
+</html>
+`;
+  }
+});
+
+// src/commands/studio/studio-ui-app.ts
+var STUDIO_APP_JS;
+var init_studio_ui_app = __esm({
+  "src/commands/studio/studio-ui-app.ts"() {
+    "use strict";
+    STUDIO_APP_JS = `
+(function () {
+  'use strict';
+
+  // \u2500\u2500 State \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+  var state = {
+    mode: 'file',            // 'file' | 'lab'
+    tab: 'data',             // data | ops | timetravel | merges | sync | lab
+    device: null,            // selected lab device for data-ish tabs
+    devices: [],
+    collection: null,
+    page: 0,
+    includeDeleted: false,
+    search: '',
+    overview: null,
+    ttPosition: null,        // time-travel slider position
+    ttPlaying: null,
+    labState: null,
+    feed: [],
+    deviceColors: {},
+    live: false
+  };
+  var PAGE = 50;
+  var refreshTimer = null;
+
+  // \u2500\u2500 Utilities \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+  function qs(sel) { return document.querySelector(sel); }
+  function api(path) {
+    var sep = path.indexOf('?') === -1 ? '?' : '&';
+    var url = state.device ? path + sep + 'device=' + encodeURIComponent(state.device) : path;
+    return fetch(url).then(function (r) {
+      if (!r.ok) { return r.json().then(function (b) { throw new Error(b.error || r.statusText); }); }
+      return r.json();
+    });
+  }
+  function post(path, body) {
+    return fetch(path, {
+      method: 'POST',
+      headers: { 'content-type': 'application/json' },
+      body: JSON.stringify(body || {})
+    }).then(function (r) {
+      if (!r.ok) { return r.json().then(function (b) { throw new Error(b.error || r.statusText); }); }
+      return r.json();
+    });
+  }
+  function el(tag, attrs, children) {
+    var node = document.createElement(tag);
+    if (attrs) { Object.keys(attrs).forEach(function (k) {
+      if (k === 'class') node.className = attrs[k];
+      else if (k === 'text') node.textContent = attrs[k];
+      else if (k === 'html') node.innerHTML = attrs[k];
+      else if (k.slice(0, 2) === 'on') node.addEventListener(k.slice(2), attrs[k]);
+      else node.setAttribute(k, attrs[k]);
+    }); }
+    (children || []).forEach(function (c) { if (c) node.appendChild(c); });
+    return node;
+  }
+  function fmtTime(ms) {
+    if (!ms) return '\xB7';
+    var d = new Date(ms);
+    return d.toLocaleTimeString() + '.' + ('00' + d.getMilliseconds()).slice(-3);
+  }
+  function fmtDateTime(ms) {
+    if (!ms) return '\xB7';
+    var d = new Date(ms);
+    return d.toLocaleDateString() + ' ' + d.toLocaleTimeString();
+  }
+  function shortNode(id) { return id && id.length > 8 ? id.slice(-8) : (id || '\xB7'); }
+  function shortId(id) { return id && id.length > 13 ? id.slice(0, 13) + '\u2026' : (id || ''); }
+  function fmtVal(v) {
+    if (v === null || v === undefined) return 'null';
+    if (typeof v === 'object') return JSON.stringify(v);
+    return String(v);
+  }
+  function deviceColor(name) {
+    if (!(name in state.deviceColors)) {
+      state.deviceColors[name] = 'dev-c' + (Object.keys(state.deviceColors).length % 6);
+    }
+    return state.deviceColors[name];
+  }
+  function debounceRefresh() {
+    if (refreshTimer) clearTimeout(refreshTimer);
+    refreshTimer = setTimeout(function () { render(false); }, 250);
+  }
+
+  // \u2500\u2500 Boot + live events \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+  fetch('/api/mode').then(function (r) { return r.json(); }).then(function (info) {
+    state.mode = info.mode;
+    state.devices = info.devices || [];
+    if (state.mode === 'lab') { state.tab = 'lab'; state.device = state.devices[0] || null; }
+    qs('#modebadge').textContent = state.mode;
+    if (info.spectator) {
+      qs('#dbpath').textContent = '\u21C4 ' + info.spectator.url +
+        (info.spectator.connected ? ' \xB7 connected' : ' \xB7 connecting\u2026') +
+        ' \xB7 ' + info.spectator.operationsReceived + ' ops received';
+    }
+    connectEvents();
+    render(true);
+  });
+
+  function connectEvents() {
+    var source = new EventSource('/api/events');
+    source.addEventListener('hello', function () {
+      state.live = true; qs('#live').className = 'live on';
+    });
+    source.addEventListener('change', function () {
+      if (state.tab !== 'timetravel') debounceRefresh();
+    });
+    source.addEventListener('lab', function (event) {
+      var data = JSON.parse(event.data);
+      state.feed.push(data);
+      if (state.feed.length > 400) state.feed.shift();
+      appendFeedLine(data);
+    });
+    source.addEventListener('spectator', function (event) {
+      var data = JSON.parse(event.data);
+      data.device = 'server';
+      state.feed.push(data);
+      if (state.feed.length > 400) state.feed.shift();
+      appendFeedLine(data);
+      // Keep the header status fresh as ops stream in.
+      fetch('/api/spectator/status').then(function (r) { return r.json(); }).then(function (s) {
+        qs('#dbpath').textContent = '\u21C4 ' + s.url +
+          (s.connected ? ' \xB7 connected' : ' \xB7 reconnecting\u2026') +
+          ' \xB7 ' + s.operationsReceived + ' ops received';
+      }).catch(function () {});
+    });
+    source.onerror = function () {
+      state.live = false; qs('#live').className = 'live';
+    };
+  }
+
+  // \u2500\u2500 Tabs + chrome \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+  function renderTabs() {
+    var tabs = qs('#tabs');
+    tabs.textContent = '';
+    var defs = [];
+    if (state.mode === 'lab') defs.push(['lab', 'Lab']);
+    defs.push(['data', 'Data'], ['ops', 'Operations'], ['timetravel', 'Time Travel'], ['merges', 'Merges'], ['sync', 'Sync']);
+    defs.forEach(function (d) {
+      tabs.appendChild(el('div', {
+        class: 'tab' + (state.tab === d[0] ? ' active' : ''),
+        text: d[1],
+        onclick: function () { state.tab = d[0]; state.page = 0; closeDrawer(); render(true); }
+      }));
+    });
+    tabs.appendChild(el('div', { class: 'spacer' }));
+    if (state.mode === 'lab' && state.tab !== 'lab') {
+      var pick = el('select', { onchange: function () { state.device = pick.value; state.page = 0; render(true); } },
+        state.devices.map(function (d) {
+          var o = el('option', { value: d, text: d });
+          if (d === state.device) o.selected = true;
+          return o;
+        }));
+      tabs.appendChild(el('div', { class: 'devicepick' }, [el('span', { text: 'device:' }), pick]));
+    }
+  }
+
+  function renderSidebar() {
+    var nav = qs('#sidebar');
+    nav.textContent = '';
+    if (state.tab === 'lab' || state.tab === 'sync' || state.tab === 'merges') {
+      nav.style.display = 'none';
+      return;
+    }
+    nav.style.display = '';
+    nav.appendChild(el('h3', { text: 'Collections' }));
+    (state.overview ? state.overview.collections : []).forEach(function (c) {
+      nav.appendChild(el('div', {
+        class: 'item' + (state.collection === c.name ? ' active' : ''),
+        onclick: function () { state.collection = c.name; state.page = 0; closeDrawer(); render(false); }
+      }, [
+        el('span', { text: c.name }),
+        el('span', { class: 'count', text: String(c.liveRecords) + (c.tombstones ? ' +' + c.tombstones + '\u2020' : '') })
+      ]));
+    });
+  }
+
+  // \u2500\u2500 Main render \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+  function render(full) {
+    renderTabs();
+    if (state.tab === 'lab') { renderSidebar(); renderLab(full); return; }
+    api('/api/overview').then(function (overview) {
+      state.overview = overview;
+      qs('#dbpath').textContent = overview.dbPath || '';
+      if (!state.collection || !overview.collections.some(function (c) { return c.name === state.collection; })) {
+        state.collection = overview.collections.length ? overview.collections[0].name : null;
+      }
+      renderSidebar();
+      var main = qs('#main');
+      main.textContent = '';
+      if (state.tab === 'data') return renderData(main);
+      if (state.tab === 'ops') return renderOps(main);
+      if (state.tab === 'timetravel') return renderTimeTravel(main);
+      if (state.tab === 'merges') return renderMerges(main);
+      if (state.tab === 'sync') return renderSync(main);
+    }).catch(function (e) {
+      qs('#main').innerHTML = '<div class="error">' + e.message + '</div>';
+    });
+  }
+
+  function toolbar(main, title, extra) {
+    main.appendChild(el('div', { class: 'toolbar' }, [el('h2', { text: title })].concat(extra || [])));
+  }
+  function pager(main, total) {
+    var pages = Math.max(1, Math.ceil(total / PAGE));
+    main.appendChild(el('div', { class: 'pager' }, [
+      el('button', { text: '\u2039 Prev', onclick: function () { if (state.page > 0) { state.page--; render(false); } } }),
+      el('span', { text: 'page ' + (state.page + 1) + ' / ' + pages + ' \xB7 ' + total + ' total' }),
+      el('button', { text: 'Next \u203A', onclick: function () { if (state.page < pages - 1) { state.page++; render(false); } } })
+    ]));
+  }
+
+  // \u2500\u2500 Data tab \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+  function renderData(main) {
+    if (!state.collection) { main.appendChild(el('div', { class: 'empty', text: 'No collections.' })); return; }
+    var searchBox = el('input', { type: 'text', placeholder: 'search\u2026', value: state.search });
+    searchBox.oninput = function () { state.search = searchBox.value; state.page = 0; debounceRefresh(); };
+    var deletedToggle = el('label', {}, [
+      (function () { var cb = el('input', { type: 'checkbox' }); cb.checked = state.includeDeleted;
+        cb.onchange = function () { state.includeDeleted = cb.checked; state.page = 0; render(false); }; return cb; })(),
+      el('span', { text: 'tombstones' })
+    ]);
+    toolbar(main, state.collection, [searchBox, deletedToggle]);
+
+    var q = '/api/collections/' + state.collection + '/records?limit=' + PAGE +
+      '&offset=' + (state.page * PAGE) + '&includeDeleted=' + state.includeDeleted +
+      (state.search ? '&search=' + encodeURIComponent(state.search) : '');
+    api(q).then(function (data) {
+      var info = state.overview.collections.filter(function (c) { return c.name === state.collection; })[0];
+      var columns = info ? info.columns : [];
+      if (!data.records.length) { main.appendChild(el('div', { class: 'empty', text: 'No records.' })); return; }
+      var thead = el('tr', {}, [el('th', { text: 'id' })].concat(
+        columns.map(function (c) { return el('th', { text: c }); }),
+        [el('th', { text: 'updated' })]
+      ));
+      var tbody = el('tbody', {}, data.records.map(function (r) {
+        return el('tr', { class: 'clickable' + (r.deleted ? ' tombstone' : ''), onclick: function () { openRecord(r.id); } },
+          [el('td', { class: 'mono', text: shortId(r.id) })].concat(
+            columns.map(function (c) { return el('td', { text: fmtVal(r.fields[c]).slice(0, 60) }); }),
+            [el('td', { class: 'mono', text: fmtDateTime(r.updatedAt) })]
+          ));
+      }));
+      main.appendChild(el('table', { class: 'grid' }, [el('thead', {}, [thead]), tbody]));
+      pager(main, data.total);
+    }).catch(showError(main));
+  }
+
+  // \u2500\u2500 Record drawer \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+  function openRecord(id) {
+    api('/api/collections/' + state.collection + '/records/' + encodeURIComponent(id)).then(function (data) {
+      var drawer = qs('#drawer');
+      drawer.textContent = '';
+      var r = data.record;
+      drawer.appendChild(el('h3', {}, [
+        el('span', { class: 'mono', text: r.id }),
+        el('span', { class: 'close', text: '\u2715', onclick: closeDrawer })
+      ]));
+      if (r.deleted) drawer.appendChild(el('span', { class: 'badge delete', text: 'tombstone' }));
+
+      drawer.appendChild(el('h4', { text: 'Fields \u2014 with last writer per field' }));
+      Object.keys(r.fields).forEach(function (f) {
+        var fv = r.fieldVersions[f];
+        var val = fmtVal(r.fields[f]);
+        var preview = data.richtextPreviews && data.richtextPreviews[f];
+        drawer.appendChild(el('div', { class: 'fieldrow' }, [
+          el('div', { class: 'fname mono', text: f }),
+          el('div', { class: 'fval', text: val }),
+          preview ? el('div', { class: 'preview', text: '\u201C' + preview + '\u201D' }) : null,
+          fv ? el('span', { class: 'chip' }, [
+            el('span', { text: 'last writer' }),
+            el('b', { class: 'mono', text: shortNode(fv.nodeId) }),
+            el('span', { class: 'mono', text: fmtDateTime(fv.wallTime) })
+          ]) : el('span', { class: 'chip', text: 'no field version' })
+        ]));
+      });
+
+      drawer.appendChild(el('h4', { text: 'Causal graph for this record' }));
+      var dagBox = el('div', { class: 'dagwrap' });
+      drawer.appendChild(dagBox);
+      api('/api/collections/' + state.collection + '/dag?record=' + encodeURIComponent(id)).then(function (dag) {
+        renderDag(dagBox, dag, 500);
+      });
+
+      drawer.appendChild(el('h4', { text: 'Operation history (newest first)' }));
+      if (!data.operations.length) drawer.appendChild(el('div', { class: 'empty', text: 'No operations (compacted?).' }));
+      data.operations.forEach(function (o) {
+        var body = el('div', { class: 'op ' + o.type }, [
+          el('div', {}, [
+            el('span', { class: 'badge ' + o.type, text: o.type }),
+            el('span', { class: 'meta', text: '  ' + shortNode(o.nodeId) + ' \xB7 seq ' + o.sequenceNumber + ' \xB7 ' + (o.timestamp ? fmtDateTime(o.timestamp.wallTime) : '\xB7') })
+          ])
+        ]);
+        if (o.data) {
+          var pre = el('pre', { class: 'mono' });
+          pre.textContent = JSON.stringify(o.data, null, 1);
+          body.appendChild(pre);
+        }
+        drawer.appendChild(body);
+      });
+      drawer.className = 'drawer open';
+    }).catch(function (e) { alertError(e); });
+  }
+  function closeDrawer() { qs('#drawer').className = 'drawer'; }
+
+  // \u2500\u2500 Operations tab (DAG + table) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+  function renderOps(main) {
+    if (!state.collection) { main.appendChild(el('div', { class: 'empty', text: 'No collections.' })); return; }
+    toolbar(main, state.collection + ' \u2014 operation log');
+    var dagBox = el('div', { class: 'dagwrap' });
+    main.appendChild(dagBox);
+    api('/api/collections/' + state.collection + '/dag?limit=120').then(function (dag) {
+      renderDag(dagBox, dag, null);
+    });
+
+    api('/api/collections/' + state.collection + '/ops?limit=' + PAGE + '&offset=' + (state.page * PAGE)).then(function (data) {
+      if (!data.operations.length) { main.appendChild(el('div', { class: 'empty', text: 'Empty (compacted?).' })); return; }
+      var thead = el('tr', {}, ['type', 'record', 'node', 'seq', 'time', 'data'].map(function (h) { return el('th', { text: h }); }));
+      var tbody = el('tbody', {}, data.operations.map(function (o) {
+        return el('tr', { class: 'clickable', onclick: function () { openRecord(o.recordId); } }, [
+          el('td', {}, [el('span', { class: 'badge ' + o.type, text: o.type })]),
+          el('td', { class: 'mono', text: shortId(o.recordId) }),
+          el('td', { class: 'mono', text: shortNode(o.nodeId) }),
+          el('td', { class: 'mono', text: String(o.sequenceNumber) }),
+          el('td', { class: 'mono', text: o.timestamp ? fmtDateTime(o.timestamp.wallTime) : '\xB7' }),
+          el('td', { class: 'mono', text: o.data ? JSON.stringify(o.data).slice(0, 70) : '\xB7' })
+        ]);
+      }));
+      main.appendChild(el('table', { class: 'grid' }, [el('thead', {}, [thead]), tbody]));
+      pager(main, data.total);
+    }).catch(showError(main));
+  }
+
+  // \u2500\u2500 Causal DAG renderer (SVG) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+  function renderDag(container, dag, maxWidth) {
+    container.textContent = '';
+    if (!dag.nodes.length) { container.appendChild(el('div', { class: 'empty', text: 'No operations to graph.' })); return; }
+    var XSTEP = 46, YSTEP = 44, PADX = 90, PADY = 26, R = 7;
+    var width = PADX + dag.nodes.length * XSTEP + 30;
+    var height = PADY + dag.lanes.length * YSTEP + 16;
+    var svgns = 'http://www.w3.org/2000/svg';
+    var svg = document.createElementNS(svgns, 'svg');
+    svg.setAttribute('width', String(width));
+    svg.setAttribute('height', String(height));
+
+    var defs = document.createElementNS(svgns, 'defs');
+    defs.innerHTML = '<marker id="arrow" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="6" markerHeight="6" orient="auto-start-reverse"><path d="M 0 0 L 10 5 L 0 10 z" fill="#3a4356"/></marker>';
+    svg.appendChild(defs);
+
+    var colors = { insert: '#48bb78', update: '#4299e1', delete: '#f56565' };
+    var pos = {};
+    dag.nodes.forEach(function (n) {
+      pos[n.id] = { x: PADX + n.x * XSTEP, y: PADY + n.lane * YSTEP + YSTEP / 2 };
+    });
+
+    dag.lanes.forEach(function (lane, i) {
+      var y = PADY + i * YSTEP + YSTEP / 2;
+      var line = document.createElementNS(svgns, 'line');
+      line.setAttribute('x1', '10'); line.setAttribute('x2', String(width - 10));
+      line.setAttribute('y1', String(y)); line.setAttribute('y2', String(y));
+      line.setAttribute('class', 'dag-lane-line');
+      svg.appendChild(line);
+      var label = document.createElementNS(svgns, 'text');
+      label.setAttribute('x', '10'); label.setAttribute('y', String(y - 8));
+      label.setAttribute('class', 'dag-lane-label');
+      label.textContent = lane.shortNodeId;
+      svg.appendChild(label);
+    });
+
+    dag.edges.forEach(function (e) {
+      var a = pos[e.from], b = pos[e.to];
+      if (!a || !b) return;
+      var path = document.createElementNS(svgns, 'path');
+      var midX = (a.x + b.x) / 2;
+      path.setAttribute('d', 'M ' + a.x + ' ' + a.y + ' C ' + midX + ' ' + a.y + ', ' + midX + ' ' + b.y + ', ' + (b.x - R - 2) + ' ' + b.y);
+      path.setAttribute('class', 'dag-edge');
+      svg.appendChild(path);
+    });
+
+    var tip = qs('#dagtip');
+    dag.nodes.forEach(function (n) {
+      var g = document.createElementNS(svgns, 'g');
+      g.setAttribute('class', 'dag-node');
+      var c = document.createElementNS(svgns, 'circle');
+      var p = pos[n.id];
+      c.setAttribute('cx', String(p.x)); c.setAttribute('cy', String(p.y)); c.setAttribute('r', String(R));
+      c.setAttribute('fill', '#161a22');
+      c.setAttribute('stroke', colors[n.type] || '#8b93a7');
+      g.appendChild(c);
+      g.addEventListener('mousemove', function (ev) {
+        tip.style.display = 'block';
+        tip.style.left = (ev.clientX + 14) + 'px';
+        tip.style.top = (ev.clientY + 14) + 'px';
+        tip.innerHTML = '<b>' + n.type + '</b> by ' + n.shortNodeId + ' \xB7 seq ' + n.sequenceNumber +
+          '<br/>record ' + shortId(n.recordId) +
+          (n.dataPreview ? '<br/><span class="mono">' + escapeHtml(n.dataPreview) + '</span>' : '');
+      });
+      g.addEventListener('mouseleave', function () { tip.style.display = 'none'; });
+      g.addEventListener('click', function () { openRecord(n.recordId); });
+      svg.appendChild(g);
+    });
+
+    if (maxWidth) container.style.maxWidth = maxWidth + 'px';
+    container.appendChild(svg);
+    container.scrollLeft = width;
+  }
+  function escapeHtml(s) {
+    return s.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+  }
+
+  // \u2500\u2500 Time travel tab \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+  function renderTimeTravel(main) {
+    if (!state.collection) { main.appendChild(el('div', { class: 'empty', text: 'No collections.' })); return; }
+    toolbar(main, state.collection + ' \u2014 time travel');
+    api('/api/collections/' + state.collection + '/replay').then(function (full) {
+      var total = full.totalCount;
+      if (!total) { main.appendChild(el('div', { class: 'empty', text: 'No operations to replay.' })); return; }
+      if (state.ttPosition === null || state.ttPosition > total) state.ttPosition = total;
+
+      var posLabel = el('span', { class: 'mono', text: '' });
+      var slider = el('input', { type: 'range', min: '1', max: String(total), value: String(state.ttPosition) });
+      var playBtn = el('button', { text: '\u25B6 replay' });
+      var cutBox = el('div', { class: 'tt-cut mono' });
+      var stateBox = el('div', {});
+
+      function show(position) {
+        state.ttPosition = position;
+        posLabel.textContent = position + ' / ' + total + ' ops';
+        api('/api/collections/' + state.collection + '/replay?upTo=' + encodeURIComponent(opIdAt(position))).then(function (cut) {
+          var o = cut.cutOperation;
+          cutBox.innerHTML = o
+            ? 'cut at <b>' + o.type + '</b> by ' + shortNode(o.nodeId) + ' \xB7 ' + (o.timestamp ? fmtDateTime(o.timestamp.wallTime) : '') +
+              (o.data ? ' \xB7 ' + escapeHtml(JSON.stringify(o.data).slice(0, 90)) : '')
+            : '';
+          renderReplayState(stateBox, cut);
+        });
+      }
+      // The full replay result orders ops by HLC; fetch the ordered id list once.
+      var orderedIds = [];
+      api('/api/collections/' + state.collection + '/dag?limit=20000').then(function (dag) {
+        orderedIds = dag.nodes.map(function (n) { return n.id; });
+        show(Math.min(state.ttPosition, orderedIds.length));
+      });
+      function opIdAt(position) { return orderedIds[position - 1]; }
+
+      slider.oninput = function () { show(Number(slider.value)); };
+      playBtn.onclick = function () {
+        if (state.ttPlaying) { clearInterval(state.ttPlaying); state.ttPlaying = null; playBtn.textContent = '\u25B6 replay'; return; }
+        var pos = 1;
+        playBtn.textContent = '\u23F8 pause';
+        state.ttPlaying = setInterval(function () {
+          if (pos > orderedIds.length) { clearInterval(state.ttPlaying); state.ttPlaying = null; playBtn.textContent = '\u25B6 replay'; return; }
+          slider.value = String(pos);
+          show(pos);
+          pos++;
+        }, 350);
+      };
+
+      main.appendChild(el('div', { class: 'tt-controls' }, [playBtn, slider, posLabel]));
+      main.appendChild(cutBox);
+      main.appendChild(stateBox);
+    }).catch(showError(main));
+  }
+
+  function renderReplayState(box, cut) {
+    box.textContent = '';
+    if (!cut.records.length) { box.appendChild(el('div', { class: 'empty', text: 'No records at this point.' })); return; }
+    var fieldSet = {};
+    cut.records.forEach(function (r) { Object.keys(r.fields).forEach(function (f) { fieldSet[f] = true; }); });
+    var fields = Object.keys(fieldSet);
+    var thead = el('tr', {}, [el('th', { text: 'id' })].concat(fields.map(function (f) { return el('th', { text: f }); })));
+    var tbody = el('tbody', {}, cut.records.map(function (r) {
+      return el('tr', { class: r.deleted ? 'tombstone' : '' },
+        [el('td', { class: 'mono', text: shortId(r.id) })].concat(fields.map(function (f) {
+          return el('td', { text: r.fields[f] === undefined ? '' : fmtVal(r.fields[f]).slice(0, 40) });
+        })));
+    }));
+    box.appendChild(el('table', { class: 'grid' }, [el('thead', {}, [thead]), tbody]));
+  }
+
+  // \u2500\u2500 Merges tab \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+  function renderMerges(main) {
+    toolbar(main, 'Merge audit trail');
+    api('/api/audit?limit=200').then(function (data) {
+      if (!data.traces.length) { main.appendChild(el('div', { class: 'empty', text: 'No merge audit traces recorded.' })); return; }
+      var thead = el('tr', {}, ['when', 'event', 'collection', 'record', 'field', 'strategy', 'tier'].map(function (h) { return el('th', { text: h }); }));
+      var tbody = el('tbody', {}, data.traces.map(function (t) {
+        return el('tr', {}, [
+          el('td', { class: 'mono', text: fmtDateTime(t.recordedAt) }),
+          el('td', { text: t.eventType }),
+          el('td', { text: t.collection }),
+          el('td', { class: 'mono', text: shortId(t.recordId) }),
+          el('td', { text: t.field }),
+          el('td', { text: t.strategy }),
+          el('td', { text: String(t.tier) })
+        ]);
+      }));
+      main.appendChild(el('table', { class: 'grid' }, [el('thead', {}, [thead]), tbody]));
+    }).catch(showError(main));
+  }
+
+  // \u2500\u2500 Sync tab \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+  function renderSync(main) {
+    toolbar(main, 'Sync state' + (state.device ? ' \u2014 ' + state.device : ''));
+    var o = state.overview;
+    main.appendChild(el('div', { class: 'panel' }, [
+      el('h3', { text: 'Version vector \u2014 what this store has seen from each node' }),
+      el('table', { class: 'grid' }, [
+        el('thead', {}, [el('tr', {}, [el('th', { text: 'node' }), el('th', { text: 'max sequence' })])]),
+        el('tbody', {}, o.versionVector.map(function (v) {
+          return el('tr', {}, [el('td', { class: 'mono', text: v.nodeId }), el('td', { class: 'mono', text: String(v.sequenceNumber) })]);
+        }))
+      ])
+    ]));
+    main.appendChild(el('div', { class: 'panel' }, [
+      el('h3', { text: 'Outbound queue' }),
+      el('div', { text: o.pendingSyncOps + ' operation(s) waiting to sync' })
+    ]));
+    main.appendChild(el('div', { class: 'panel' }, [
+      el('h3', { text: 'Store meta' }),
+      el('table', { class: 'grid' }, [
+        el('tbody', {}, o.meta.map(function (m) {
+          return el('tr', {}, [el('td', { class: 'mono', text: m.key }), el('td', { class: 'mono', text: m.value })]);
+        }))
+      ])
+    ]));
+    if (state.mode === 'spectator') {
+      var feedBox = el('div', { class: 'lab-feed', style: 'width:100%;max-height:340px' }, [
+        el('h3', { text: 'Live events from the server' }),
+        el('div', { class: 'feed', id: 'feed' })
+      ]);
+      main.appendChild(feedBox);
+      state.feed.slice(-200).forEach(appendFeedLine);
+    }
+  }
+
+  // \u2500\u2500 Lab tab \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+  function renderLab(full) {
+    var main = qs('#main');
+    qs('#sidebar').style.display = 'none';
+    Promise.all([fetch('/api/lab/state').then(function (r) { return r.json(); }),
+                 fetch('/api/lab/convergence').then(function (r) { return r.json(); })])
+      .then(function (results) {
+        state.labState = results[0];
+        state.devices = results[0].devices.map(function (d) { return d.name; });
+        var convergence = results[1];
+        main.textContent = '';
+        qs('#dbpath').textContent = 'sync laboratory \xB7 ' + results[0].serverOperations + ' ops on server';
+
+        var conv = el('div', { class: 'convergence ' + (convergence.converged ? 'ok' : 'bad') }, [
+          el('div', { text: convergence.converged
+            ? '\u2713 ALL ' + convergence.deviceCount + ' DEVICES CONVERGED'
+            : '\u2717 DEVICES DIVERGED (' + convergence.differences.length + ' difference(s)) \u2014 sync to converge' })
+        ]);
+        if (!convergence.converged) {
+          conv.appendChild(el('div', { class: 'diffs', text: convergence.differences.slice(0, 4).join(' \xB7 ') }));
+        }
+        var addBtn = el('button', { class: 'primary', text: '+ add device', onclick: function () {
+          post('/api/lab/devices', {}).then(function () { render(true); }).catch(alertError);
+        } });
+        var syncAllBtn = el('button', { text: 'sync all', onclick: function () {
+          var chain = Promise.resolve();
+          state.devices.forEach(function (d) { chain = chain.then(function () { return post('/api/lab/devices/' + d + '/sync', {}); }); });
+          chain.then(function () { return post('/api/lab/devices/' + state.devices[0] + '/sync', {}); })
+               .then(function () { render(true); }).catch(alertError);
+        } });
+        main.appendChild(el('div', { class: 'lab-top' }, [conv, addBtn, syncAllBtn]));
+
+        var devicesBox = el('div', { class: 'lab-devices' });
+        results[0].devices.forEach(function (d) { devicesBox.appendChild(deviceCard(d, results[0].collections)); });
+
+        var feedBox = el('div', { class: 'lab-feed' }, [
+          el('h3', { text: 'Live events' }),
+          el('div', { class: 'feed', id: 'feed' })
+        ]);
+        main.appendChild(el('div', { class: 'lab-grid' }, [devicesBox, feedBox]));
+        state.feed.slice(-200).forEach(appendFeedLine);
+      })
+      .catch(showError(qs('#main')));
+  }
+
+  function deviceCard(d, collections) {
+    var collection = collections[0];
+    var card = el('div', { class: 'device-card' + (d.connected ? '' : ' offline') });
+    card.appendChild(el('div', { class: 'device-head' }, [
+      el('span', { class: 'name ' + deviceColor(d.name), text: d.name }),
+      el('span', { class: 'node mono', text: shortNode(d.nodeId) }),
+      el('span', { class: 'badge ' + (d.connected ? 'ok' : 'bad'), text: d.connected ? 'online' : 'offline' }),
+      d.pendingOperations ? el('span', { class: 'badge neutral', text: d.pendingOperations + ' queued' }) : null,
+      el('span', { class: 'spacer' }),
+      el('button', { text: d.connected ? 'disconnect' : 'connect', onclick: function () {
+        post('/api/lab/devices/' + d.name + '/' + (d.connected ? 'disconnect' : 'connect'), {})
+          .then(function () { render(true); }).catch(alertError);
+      } }),
+      el('button', { text: 'sync', onclick: function () {
+        post('/api/lab/devices/' + d.name + '/sync', {}).then(function () { render(true); }).catch(alertError);
+      } })
+    ]));
+
+    var body = el('div', { class: 'device-body' });
+    card.appendChild(body);
+
+    // Chaos controls
+    body.appendChild(el('h5', { text: 'Network chaos (applies on next connect)' }));
+    var chaosDefs = [['dropRate', 'drop'], ['duplicateRate', 'duplicate'], ['reorderRate', 'reorder']];
+    chaosDefs.forEach(function (cd) {
+      var key = cd[0];
+      var valueLabel = el('span', { class: 'mono', text: String(d.chaos[key]) });
+      var range = el('input', { type: 'range', min: '0', max: '0.5', step: '0.05', value: String(d.chaos[key]) });
+      range.oninput = function () { valueLabel.textContent = range.value; };
+      range.onchange = function () {
+        var body2 = {}; body2[key] = Number(range.value);
+        post('/api/lab/devices/' + d.name + '/chaos', body2).catch(alertError);
+      };
+      body.appendChild(el('div', { class: 'chaos-row' }, [el('span', { text: cd[1] }), range, valueLabel]));
+    });
+
+    // Records with inline editing
+    body.appendChild(el('h5', { text: 'records (' + collection.name + ') \u2014 edits happen ON this device' }));
+    var recBox = el('div', {});
+    body.appendChild(recBox);
+    api('/api/collections/' + collection.name + '/records?limit=20&device=' + encodeURIComponent(d.name)).then(function (data) {
+      data.records.forEach(function (r) {
+        var titleInput = el('input', { type: 'text', value: String(r.fields.title || '') });
+        titleInput.onchange = function () {
+          post('/api/lab/devices/' + d.name + '/update', { collection: collection.name, id: r.id, data: { title: titleInput.value } }).catch(alertError);
+        };
+        var doneCb = el('input', { type: 'checkbox', title: 'done' });
+        doneCb.checked = !!r.fields.done;
+        doneCb.onchange = function () {
+          post('/api/lab/devices/' + d.name + '/update', { collection: collection.name, id: r.id, data: { done: doneCb.checked } }).catch(alertError);
+        };
+        var incBtn = el('button', { text: '+1', title: 'atomic increment \u2014 composes across devices', onclick: function () {
+          post('/api/lab/devices/' + d.name + '/update', { collection: collection.name, id: r.id, data: {}, increments: { points: 1 } })
+            .then(function () { debounceRefresh(); }).catch(alertError);
+        } });
+        var delBtn = el('button', { class: 'danger', text: '\u2715', title: 'delete', onclick: function () {
+          post('/api/lab/devices/' + d.name + '/delete', { collection: collection.name, id: r.id })
+            .then(function () { debounceRefresh(); }).catch(alertError);
+        } });
+        recBox.appendChild(el('div', { class: 'rec-line' }, [
+          doneCb, titleInput,
+          el('span', { class: 'pts mono', text: String(r.fields.points === undefined ? '' : r.fields.points) }),
+          incBtn, delBtn,
+          el('button', { text: '\u2315', title: 'inspect', onclick: function () { state.device = d.name; state.collection = collection.name; openRecord(r.id); } })
+        ]));
+      });
+      if (!data.records.length) recBox.appendChild(el('div', { class: 'empty', text: 'no records yet' }));
+    });
+
+    // Insert form
+    var newTitle = el('input', { type: 'text', placeholder: 'new task title\u2026' });
+    var insertBtn = el('button', { class: 'primary', text: 'insert', onclick: function () {
+      if (!newTitle.value.trim()) return;
+      post('/api/lab/devices/' + d.name + '/insert', { collection: collection.name, data: { title: newTitle.value.trim() } })
+        .then(function () { newTitle.value = ''; debounceRefresh(); }).catch(alertError);
+    } });
+    newTitle.addEventListener('keydown', function (e) { if (e.key === 'Enter') insertBtn.click(); });
+    body.appendChild(el('div', { class: 'insert-form' }, [newTitle, insertBtn]));
+    return card;
+  }
+
+  function appendFeedLine(event) {
+    var feed = qs('#feed');
+    if (!feed) return;
+    var cls = 'feed-line';
+    if (event.type === 'operation:created') cls += ' evt-created';
+    if (event.type === 'operation:applied') cls += ' evt-applied';
+    if (event.type === 'merge:conflict') cls += ' evt-conflict';
+    if (event.type === 'sync:apply-failed') cls += ' evt-failed';
+    feed.appendChild(el('div', { class: cls }, [
+      el('span', { class: 'mono', text: fmtTime(event.at) }),
+      el('span', { class: 'dev ' + deviceColor(event.device), text: event.device }),
+      el('span', { class: 'what', text: event.type.replace('operation:', '').replace('sync:', '') + ' \xB7 ' + event.summary })
+    ]));
+    feed.scrollTop = feed.scrollHeight;
+  }
+
+  // \u2500\u2500 Misc \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
+  function showError(main) {
+    return function (e) { main.appendChild(el('div', { class: 'error', text: e.message })); };
+  }
+  function alertError(e) { console.error(e); qs('#dbpath').textContent = 'error: ' + e.message; }
+
+  qs('#refresh').onclick = function () { render(true); };
+  document.addEventListener('keydown', function (e) { if (e.key === 'Escape') closeDrawer(); });
+})();
+`;
+  }
+});
+
+// src/commands/studio/studio-ui-css.ts
+var STUDIO_CSS;
+var init_studio_ui_css = __esm({
+  "src/commands/studio/studio-ui-css.ts"() {
+    "use strict";
+    STUDIO_CSS = `
+:root {
+  --bg: #0e1015; --panel: #161a22; --panel-2: #1c212c; --panel-3: #232936;
+  --border: #262c3a; --text: #e6e9f0; --muted: #8b93a7;
+  --accent: #4fd1c5; --accent-2: #9f7aea;
+  --insert: #48bb78; --update: #4299e1; --delete: #f56565; --warn: #ed8936;
+  --ok-bg: rgba(72,187,120,.12); --bad-bg: rgba(245,101,101,.12);
+}
+* { box-sizing: border-box; margin: 0; padding: 0; }
+html, body { height: 100%; }
+body {
+  background: var(--bg); color: var(--text); overflow: hidden;
+  font: 14px/1.5 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+}
+.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; }
+button {
+  background: var(--panel-2); color: var(--text); border: 1px solid var(--border);
+  border-radius: 6px; padding: 5px 12px; cursor: pointer; font-size: 13px;
+}
+button:hover { border-color: var(--accent); }
+button.primary { background: rgba(79,209,197,.12); border-color: var(--accent); color: var(--accent); }
+button.danger { color: var(--delete); }
+button:disabled { opacity: .4; cursor: default; }
+input, select {
+  background: var(--bg); color: var(--text); border: 1px solid var(--border);
+  border-radius: 6px; padding: 4px 8px; font-size: 13px;
+}
+input:focus, select:focus { outline: none; border-color: var(--accent); }
+input[type="checkbox"] { width: auto; }
+input[type="range"] { padding: 0; }
+
+header {
+  display: flex; align-items: center; gap: 14px; padding: 10px 16px;
+  background: var(--panel); border-bottom: 1px solid var(--border); height: 48px;
+}
+header .logo { font-weight: 700; letter-spacing: .3px; white-space: nowrap; }
+header .logo span { color: var(--accent); }
+header .modebadge {
+  font-size: 10px; text-transform: uppercase; letter-spacing: 1px; padding: 2px 8px;
+  border-radius: 10px; background: rgba(159,122,234,.15); color: var(--accent-2);
+}
+header .dbpath { color: var(--muted); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
+header .live { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 12px; }
+header .live .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); }
+header .live.on .dot { background: var(--insert); box-shadow: 0 0 8px rgba(72,187,120,.8); }
+
+.tabs { display: flex; gap: 2px; padding: 0 16px; background: var(--panel); border-bottom: 1px solid var(--border); }
+.tabs .tab {
+  padding: 8px 16px; cursor: pointer; color: var(--muted); font-size: 13px;
+  border-bottom: 2px solid transparent; user-select: none;
+}
+.tabs .tab:hover { color: var(--text); }
+.tabs .tab.active { color: var(--accent); border-bottom-color: var(--accent); }
+.tabs .spacer { flex: 1; }
+.tabs .devicepick { display: flex; align-items: center; gap: 6px; padding: 6px 0; color: var(--muted); font-size: 12px; }
+
+.layout { display: flex; height: calc(100vh - 85px); }
+nav.sidebar {
+  width: 220px; background: var(--panel); border-right: 1px solid var(--border);
+  padding: 12px 0; overflow-y: auto; flex-shrink: 0;
+}
+nav.sidebar h3 { font-size: 11px; text-transform: uppercase; letter-spacing: .8px; color: var(--muted); padding: 8px 16px 4px; }
+nav.sidebar .item {
+  display: flex; justify-content: space-between; align-items: center;
+  padding: 6px 16px; cursor: pointer; border-left: 2px solid transparent; font-size: 13px;
+}
+nav.sidebar .item:hover { background: var(--panel-2); }
+nav.sidebar .item.active { border-left-color: var(--accent); background: var(--panel-2); }
+nav.sidebar .item .count { color: var(--muted); font-size: 11px; }
+main { flex: 1; overflow: auto; padding: 16px 20px; }
+
+.toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
+.toolbar h2 { font-size: 16px; margin-right: auto; }
+.toolbar label { color: var(--muted); font-size: 12px; display: flex; align-items: center; gap: 5px; cursor: pointer; }
+
+table.grid { width: 100%; border-collapse: collapse; background: var(--panel); border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
+table.grid th, table.grid td { text-align: left; padding: 7px 10px; border-bottom: 1px solid var(--border); vertical-align: top; }
+table.grid th { background: var(--panel-2); color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .5px; position: sticky; top: 0; z-index: 1; }
+table.grid tbody tr.clickable { cursor: pointer; }
+table.grid tbody tr.clickable:hover { background: var(--panel-2); }
+tr.tombstone td { color: var(--muted); text-decoration: line-through; }
+
+.badge { display: inline-block; padding: 1px 8px; border-radius: 10px; font-size: 11px; font-weight: 600; }
+.badge.insert { background: rgba(72,187,120,.15); color: var(--insert); }
+.badge.update { background: rgba(66,153,225,.15); color: var(--update); }
+.badge.delete { background: rgba(245,101,101,.15); color: var(--delete); }
+.badge.neutral { background: var(--panel-3); color: var(--muted); }
+.badge.ok { background: var(--ok-bg); color: var(--insert); }
+.badge.bad { background: var(--bad-bg); color: var(--delete); }
+
+.chip {
+  display: inline-flex; gap: 6px; align-items: center; background: var(--panel-2);
+  border: 1px solid var(--border); border-radius: 6px; padding: 2px 8px; font-size: 11px; color: var(--muted);
+}
+.chip b { color: var(--accent-2); font-weight: 600; }
+
+.pager { display: flex; gap: 8px; align-items: center; margin-top: 10px; color: var(--muted); font-size: 12px; }
+.empty { color: var(--muted); padding: 40px; text-align: center; }
+.error { color: var(--delete); padding: 20px; }
+
+.drawer {
+  position: fixed; top: 85px; right: 0; bottom: 0; width: 560px; max-width: 92vw;
+  background: var(--panel); border-left: 1px solid var(--border); overflow-y: auto;
+  padding: 16px; box-shadow: -12px 0 30px rgba(0,0,0,.45); display: none; z-index: 20;
+}
+.drawer.open { display: block; }
+.drawer h3 { font-size: 14px; margin-bottom: 10px; display: flex; justify-content: space-between; align-items: center; }
+.drawer h4 { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .6px; margin: 16px 0 8px; }
+.drawer .close { cursor: pointer; color: var(--muted); padding: 4px 8px; }
+.fieldrow { padding: 8px 10px; background: var(--panel-2); border: 1px solid var(--border); border-radius: 8px; margin-bottom: 6px; }
+.fieldrow .fname { color: var(--accent); font-size: 12px; }
+.fieldrow .fval { word-break: break-word; margin: 2px 0 4px; }
+.fieldrow .preview { color: var(--muted); font-style: italic; }
+
+.op { border-left: 2px solid var(--border); margin-left: 6px; padding: 6px 0 6px 14px; position: relative; }
+.op::before { content: ""; position: absolute; left: -5px; top: 13px; width: 8px; height: 8px; border-radius: 50%; background: var(--muted); }
+.op.insert::before { background: var(--insert); } .op.update::before { background: var(--update); } .op.delete::before { background: var(--delete); }
+.op .meta { color: var(--muted); font-size: 11px; }
+.op pre { background: var(--bg); border: 1px solid var(--border); border-radius: 6px; padding: 6px 8px; margin-top: 4px; overflow-x: auto; }
+
+.panel { background: var(--panel); border: 1px solid var(--border); border-radius: 8px; padding: 14px; margin-bottom: 14px; }
+.panel h3 { font-size: 13px; margin-bottom: 8px; color: var(--accent); }
+
+/* DAG */
+.dagwrap { background: var(--panel); border: 1px solid var(--border); border-radius: 8px; overflow-x: auto; margin-bottom: 14px; }
+.dagwrap svg { display: block; }
+.dag-node { cursor: pointer; }
+.dag-node circle { stroke-width: 2; }
+.dag-node text { fill: var(--muted); font-size: 10px; font-family: ui-monospace, Menlo, monospace; }
+.dag-edge { stroke: #3a4356; stroke-width: 1.4; fill: none; marker-end: url(#arrow); }
+.dag-lane-label { fill: var(--accent-2); font-size: 11px; font-family: ui-monospace, Menlo, monospace; }
+.dag-lane-line { stroke: #1d2330; stroke-width: 1; }
+.dag-tip {
+  position: fixed; background: var(--panel-3); border: 1px solid var(--border); border-radius: 6px;
+  padding: 6px 10px; font-size: 12px; pointer-events: none; z-index: 50; max-width: 380px; display: none;
+}
+
+/* Time travel */
+.tt-controls { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
+.tt-controls input[type="range"] { flex: 1; }
+.tt-cut { background: var(--panel-2); border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; margin-bottom: 14px; font-size: 12px; }
+
+/* Lab */
+.lab-top { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
+.convergence { padding: 8px 14px; border-radius: 8px; font-weight: 600; font-size: 13px; }
+.convergence.ok { background: var(--ok-bg); color: var(--insert); border: 1px solid rgba(72,187,120,.4); }
+.convergence.bad { background: var(--bad-bg); color: var(--delete); border: 1px solid rgba(245,101,101,.4); }
+.convergence .diffs { font-weight: 400; font-size: 11px; margin-top: 4px; color: var(--muted); }
+.lab-grid { display: flex; gap: 14px; align-items: flex-start; }
+.lab-devices { flex: 1; display: grid; grid-template-columns: repeat(auto-fill, minmax(390px, 1fr)); gap: 14px; }
+.device-card { background: var(--panel); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
+.device-card.offline { border-color: rgba(245,101,101,.35); }
+.device-head { display: flex; align-items: center; gap: 8px; padding: 10px 12px; background: var(--panel-2); }
+.device-head .name { font-weight: 700; }
+.device-head .node { color: var(--muted); font-size: 11px; }
+.device-head .spacer { flex: 1; }
+.device-body { padding: 10px 12px; }
+.device-body h5 { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .6px; margin: 10px 0 6px; }
+.chaos-row { display: grid; grid-template-columns: 78px 1fr 44px; gap: 6px; align-items: center; font-size: 11px; color: var(--muted); margin-bottom: 3px; }
+.rec-line { display: flex; align-items: center; gap: 6px; padding: 5px 6px; border-bottom: 1px solid var(--border); font-size: 12px; flex-wrap: wrap; }
+.rec-line:hover { background: var(--panel-2); }
+.rec-line .title { flex: 1; min-width: 120px; }
+.rec-line input[type="text"] { font-size: 12px; padding: 2px 6px; width: 130px; }
+.rec-line .pts { color: var(--accent); min-width: 30px; text-align: right; }
+.insert-form { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
+.insert-form input { flex: 1; min-width: 120px; }
+.lab-feed { width: 360px; flex-shrink: 0; background: var(--panel); border: 1px solid var(--border); border-radius: 10px; display: flex; flex-direction: column; max-height: calc(100vh - 200px); }
+.lab-feed h3 { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .6px; padding: 10px 12px; border-bottom: 1px solid var(--border); }
+.lab-feed .feed { overflow-y: auto; padding: 6px 0; flex: 1; }
+.feed-line { display: flex; gap: 8px; padding: 3px 12px; font-size: 11px; align-items: baseline; }
+.feed-line .dev { min-width: 66px; font-weight: 600; }
+.feed-line .what { color: var(--muted); }
+.feed-line.evt-created .what, .feed-line.evt-applied .what { color: var(--text); }
+.feed-line.evt-conflict .what { color: var(--warn); }
+.feed-line.evt-failed .what { color: var(--delete); font-weight: 700; }
+.dev-c0 { color: #4fd1c5; } .dev-c1 { color: #9f7aea; } .dev-c2 { color: #f6ad55; }
+.dev-c3 { color: #63b3ed; } .dev-c4 { color: #f687b3; } .dev-c5 { color: #68d391; }
+`;
+  }
+});
+
+// src/commands/studio/studio-server.ts
+var studio_server_exports = {};
+__export(studio_server_exports, {
+  startStudioServer: () => startStudioServer
+});
+async function startStudioServer(options) {
+  const host = options.host ?? "127.0.0.1";
+  const dbPath = options.spectator ? options.spectator.dbPath : options.dbPath;
+  const context = {
+    mode: options.spectator ? "spectator" : options.lab ? "lab" : "file",
+    lab: options.lab ?? null,
+    spectator: options.spectator ?? null,
+    mainReader: dbPath ? await StudioDbReader.open(dbPath) : null,
+    deviceReaders: /* @__PURE__ */ new Map()
+  };
+  const sseClients = /* @__PURE__ */ new Set();
+  const broadcast = (event, data) => {
+    const payload = `event: ${event}
+data: ${JSON.stringify(data)}
+
+`;
+    for (const client of sseClients) {
+      client.write(payload);
+    }
+  };
+  let unsubscribeSpectator = null;
+  if (context.spectator) {
+    unsubscribeSpectator = context.spectator.onEvent((event) => {
+      broadcast("spectator", event);
+      broadcast("change", { at: event.at });
+    });
+  }
+  let pollTimer = null;
+  if (context.mode === "file" && context.mainReader) {
+    let lastFingerprint = context.mainReader.fingerprint();
+    pollTimer = setInterval(() => {
+      try {
+        const current = context.mainReader?.fingerprint();
+        if (current !== void 0 && current !== lastFingerprint) {
+          lastFingerprint = current;
+          broadcast("change", { at: Date.now() });
+        }
+      } catch {
+      }
+    }, SSE_POLL_MS);
+  }
+  let unsubscribeLab = null;
+  if (context.lab) {
+    unsubscribeLab = context.lab.onEvent((event) => {
+      broadcast("lab", event);
+      broadcast("change", { at: event.at });
+    });
+  }
+  const server = (0, import_node_http.createServer)((req, res) => {
+    handleRequest(context, sseClients, req, res).catch((error) => {
+      const message = error instanceof Error ? error.message : "Internal error";
+      if (!res.headersSent) {
+        sendJson(res, 500, { error: message });
+      } else {
+        res.end();
+      }
+    });
+  });
+  await new Promise((resolve12, reject) => {
+    server.once("error", reject);
+    server.listen(options.port, host, () => {
+      server.removeListener("error", reject);
+      resolve12();
+    });
+  });
+  const address = server.address();
+  const port = typeof address === "object" && address !== null ? address.port : options.port;
+  return {
+    server,
+    port,
+    url: `http://${host}:${port}`,
+    close: async () => {
+      if (pollTimer) {
+        clearInterval(pollTimer);
+      }
+      unsubscribeSpectator?.();
+      unsubscribeLab?.();
+      for (const client of sseClients) {
+        client.end();
+      }
+      sseClients.clear();
+      context.mainReader?.close();
+      for (const [, reader] of context.deviceReaders) {
+        reader.close();
+      }
+      context.deviceReaders.clear();
+      await new Promise((resolve12, reject) => {
+        server.close((error) => error ? reject(error) : resolve12());
+      });
+    }
+  };
+}
+async function resolveReader(context, url) {
+  const device = url.searchParams.get("device");
+  if (device && context.lab) {
+    const cached = context.deviceReaders.get(device);
+    if (cached) {
+      return cached;
+    }
+    const state = context.lab.deviceState(device);
+    const reader = await StudioDbReader.open(state.dbPath);
+    context.deviceReaders.set(device, reader);
+    return reader;
+  }
+  if (context.mainReader) {
+    return context.mainReader;
+  }
+  if (context.lab) {
+    const first = context.lab.listDevices()[0];
+    if (first) {
+      return resolveReader(context, new URL(`${url.origin}${url.pathname}?device=${first.name}`));
+    }
+  }
+  throw new Error("No database available");
+}
+async function handleRequest(context, sseClients, req, res) {
+  const url = new URL(req.url ?? "/", "http://studio.local");
+  const path = url.pathname;
+  const method = req.method ?? "GET";
+  if (method === "GET" && (path === "/" || path === "/index.html")) {
+    res.writeHead(200, { "content-type": "text/html; charset=utf-8" });
+    res.end(STUDIO_HTML);
+    return;
+  }
+  if (method === "GET" && path === "/app.js") {
+    res.writeHead(200, { "content-type": "text/javascript; charset=utf-8" });
+    res.end(STUDIO_APP_JS);
+    return;
+  }
+  if (method === "GET" && path === "/style.css") {
+    res.writeHead(200, { "content-type": "text/css; charset=utf-8" });
+    res.end(STUDIO_CSS);
+    return;
+  }
+  if (method === "GET" && path === "/api/events") {
+    res.writeHead(200, {
+      "content-type": "text/event-stream",
+      "cache-control": "no-store",
+      connection: "keep-alive"
+    });
+    res.write(`event: hello
+data: ${JSON.stringify({ mode: context.mode })}
+
+`);
+    if (context.lab) {
+      for (const event of context.lab.recentEvents().slice(-100)) {
+        res.write(`event: lab
+data: ${JSON.stringify(event)}
+
+`);
+      }
+    }
+    if (context.spectator) {
+      for (const event of context.spectator.recentEvents().slice(-100)) {
+        res.write(`event: spectator
+data: ${JSON.stringify(event)}
+
+`);
+      }
+    }
+    sseClients.add(res);
+    req.on("close", () => {
+      sseClients.delete(res);
+    });
+    return;
+  }
+  if (path.startsWith("/api/lab")) {
+    if (!context.lab) {
+      sendJson(res, 404, {
+        error: "Studio is not running in lab mode. Start with: kora studio --lab"
+      });
+      return;
+    }
+    await handleLabRoute(context, context.lab, req, res, url);
+    return;
+  }
+  if (method !== "GET") {
+    sendJson(res, 405, { error: "Studio data routes are read-only: GET only." });
+    return;
+  }
+  if (path === "/api/mode") {
+    sendJson(res, 200, {
+      mode: context.mode,
+      devices: context.lab?.listDevices().map((d) => d.name) ?? [],
+      ...context.spectator ? { spectator: context.spectator.status() } : {}
+    });
+    return;
+  }
+  if (path === "/api/spectator/status") {
+    if (!context.spectator) {
+      sendJson(res, 404, { error: "Not in spectator mode" });
+      return;
+    }
+    sendJson(res, 200, context.spectator.status());
+    return;
+  }
+  if (path === "/api/overview") {
+    const reader = await resolveReader(context, url);
+    sendJson(res, 200, reader.overview());
+    return;
+  }
+  if (path === "/api/audit") {
+    const reader = await resolveReader(context, url);
+    sendJson(res, 200, { traces: reader.auditTraces(intParam(url, "limit") ?? 100) });
+    return;
+  }
+  const collectionMatch = path.match(
+    /^\/api\/collections\/([a-zA-Z0-9_]+)\/(records|ops|replay|dag)(?:\/([^/]+))?(?:\/(ops))?$/
+  );
+  if (collectionMatch) {
+    const [, collection, kind, recordId, sub] = collectionMatch;
+    if (!collection || !kind) {
+      sendJson(res, 400, { error: "Bad request" });
+      return;
+    }
+    const reader = await resolveReader(context, url);
+    if (!reader.listCollections().includes(collection)) {
+      sendJson(res, 404, { error: `Unknown collection "${collection}"` });
+      return;
+    }
+    if (kind === "replay") {
+      const ops = reader.allOperations(collection);
+      const upTo = url.searchParams.get("upTo");
+      sendJson(res, 200, replayToOperation(ops, upTo));
+      return;
+    }
+    if (kind === "dag") {
+      const record = url.searchParams.get("record");
+      const limit = intParam(url, "limit") ?? 200;
+      let ops = reader.allOperations(collection);
+      if (record) {
+        ops = ops.filter((o) => o.recordId === record);
+      } else {
+        ops = ops.slice(-limit);
+      }
+      sendJson(res, 200, buildCausalDag(ops));
+      return;
+    }
+    if (kind === "ops") {
+      sendJson(
+        res,
+        200,
+        reader.operations(collection, {
+          limit: intParam(url, "limit"),
+          offset: intParam(url, "offset")
+        })
+      );
+      return;
+    }
+    if (recordId && sub === "ops") {
+      sendJson(res, 200, { operations: reader.recordOperations(collection, recordId) });
+      return;
+    }
+    if (recordId) {
+      const record = reader.record(collection, recordId);
+      if (!record) {
+        sendJson(res, 404, { error: `Record "${recordId}" not found` });
+        return;
+      }
+      const richtextPreviews = await decodeRichtextFields(
+        reader,
+        collection,
+        recordId,
+        record.fields
+      );
+      sendJson(res, 200, {
+        record,
+        richtextPreviews,
+        operations: reader.recordOperations(collection, recordId)
+      });
+      return;
+    }
+    sendJson(
+      res,
+      200,
+      reader.records(collection, {
+        limit: intParam(url, "limit"),
+        offset: intParam(url, "offset"),
+        includeDeleted: url.searchParams.get("includeDeleted") === "true",
+        search: url.searchParams.get("search") ?? void 0
+      })
+    );
+    return;
+  }
+  sendJson(res, 404, { error: `No route for ${path}` });
+}
+async function handleLabRoute(context, lab, req, res, url) {
+  const path = url.pathname;
+  const method = req.method ?? "GET";
+  if (method === "GET" && path === "/api/lab/state") {
+    const schema = lab.getSchema();
+    sendJson(res, 200, {
+      devices: lab.listDevices(),
+      serverOperations: lab.serverOperationCount(),
+      collections: Object.entries(schema.collections).map(([name, def]) => ({
+        name,
+        fields: Object.entries(def.fields).map(([fieldName, descriptor]) => ({
+          name: fieldName,
+          kind: descriptor.kind,
+          optional: !descriptor.required,
+          enumValues: descriptor.enumValues ?? null,
+          defaultValue: descriptor.defaultValue ?? null
+        }))
+      }))
+    });
+    return;
+  }
+  if (method === "GET" && path === "/api/lab/convergence") {
+    sendJson(res, 200, await lab.convergence());
+    return;
+  }
+  if (method !== "POST") {
+    sendJson(res, 405, { error: "POST required" });
+    return;
+  }
+  const body = await readJsonBody(req);
+  if (path === "/api/lab/devices") {
+    const state = await lab.addDevice(typeof body.name === "string" ? body.name : void 0);
+    sendJson(res, 200, state);
+    return;
+  }
+  const deviceMatch = path.match(
+    /^\/api\/lab\/devices\/([a-zA-Z0-9_-]+)\/(connect|disconnect|sync|chaos|insert|update|delete)$/
+  );
+  if (!deviceMatch) {
+    sendJson(res, 404, { error: `No lab route for ${path}` });
+    return;
+  }
+  const [, device, action] = deviceMatch;
+  if (!device || !action) {
+    sendJson(res, 400, { error: "Bad request" });
+    return;
+  }
+  switch (action) {
+    case "connect":
+      await lab.connect(device);
+      break;
+    case "disconnect": {
+      await lab.disconnect(device);
+      break;
+    }
+    case "sync":
+      await lab.sync(device);
+      break;
+    case "chaos":
+      sendJson(
+        res,
+        200,
+        lab.setChaos(device, body)
+      );
+      return;
+    case "insert": {
+      const record = await lab.insert(
+        device,
+        String(body.collection ?? ""),
+        body.data ?? {}
+      );
+      sendJson(res, 200, { record });
+      return;
+    }
+    case "update": {
+      const record = await lab.update(
+        device,
+        String(body.collection ?? ""),
+        String(body.id ?? ""),
+        body.data ?? {},
+        body.increments ?? void 0
+      );
+      sendJson(res, 200, { record });
+      return;
+    }
+    case "delete":
+      await lab.delete(device, String(body.collection ?? ""), String(body.id ?? ""));
+      break;
+  }
+  sendJson(res, 200, { ok: true, device: lab.deviceState(device) });
+}
+async function decodeRichtextFields(reader, collection, recordId, fields) {
+  const previews = {};
+  const binaryFields = Object.entries(fields).filter(
+    ([, value]) => typeof value === "string" && value.startsWith("<binary ")
+  );
+  if (binaryFields.length === 0) {
+    return previews;
+  }
+  let toPlainText = null;
+  try {
+    const storePkg = await import("@korajs/store");
+    toPlainText = storePkg.richtextToPlainText ?? null;
+  } catch {
+    return previews;
+  }
+  if (!toPlainText) {
+    return previews;
+  }
+  for (const [field] of binaryFields) {
+    try {
+      const raw = reader.rawFieldValue(collection, recordId, field);
+      if (raw instanceof Uint8Array || Buffer.isBuffer(raw)) {
+        previews[field] = toPlainText(new Uint8Array(raw));
+      }
+    } catch {
+    }
+  }
+  return previews;
+}
+async function readJsonBody(req) {
+  const chunks = [];
+  let size = 0;
+  for await (const chunk of req) {
+    size += chunk.length;
+    if (size > 256 * 1024) {
+      throw new Error("Request body too large");
+    }
+    chunks.push(chunk);
+  }
+  if (chunks.length === 0) {
+    return {};
+  }
+  try {
+    return JSON.parse(Buffer.concat(chunks).toString("utf8"));
+  } catch {
+    throw new Error("Invalid JSON body");
+  }
+}
+function intParam(url, name) {
+  const raw = url.searchParams.get(name);
+  if (raw === null) {
+    return void 0;
+  }
+  const parsed = Number.parseInt(raw, 10);
+  return Number.isNaN(parsed) ? void 0 : parsed;
+}
+function sendJson(res, status, body) {
+  res.writeHead(status, {
+    "content-type": "application/json; charset=utf-8",
+    "cache-control": "no-store"
+  });
+  res.end(JSON.stringify(body));
+}
+var import_node_http, SSE_POLL_MS;
+var init_studio_server = __esm({
+  "src/commands/studio/studio-server.ts"() {
+    "use strict";
+    import_node_http = require("http");
+    init_db_reader();
+    init_studio_replay();
+    init_studio_ui();
+    init_studio_ui_app();
+    init_studio_ui_css();
+    SSE_POLL_MS = 700;
+  }
+});
+
+// src/commands/studio/spectator-manager.ts
+var spectator_manager_exports = {};
+__export(spectator_manager_exports, {
+  SpectatorManager: () => SpectatorManager
+});
+var import_node_fs6, import_node_os, import_node_path27, FORWARDED_EVENTS, MAX_EVENT_BUFFER, SpectatorManager;
+var init_spectator_manager = __esm({
+  "src/commands/studio/spectator-manager.ts"() {
+    "use strict";
+    import_node_fs6 = require("fs");
+    import_node_os = require("os");
+    import_node_path27 = require("path");
+    FORWARDED_EVENTS = [
+      "merge:started",
+      "merge:conflict",
+      "merge:completed",
+      "sync:connected",
+      "sync:disconnected",
+      "sync:received",
+      "sync:apply-failed"
+    ];
+    MAX_EVENT_BUFFER = 500;
+    SpectatorManager = class {
+      constructor(options) {
+        this.options = options;
+        this.tmpDir = (0, import_node_fs6.mkdtempSync)((0, import_node_path27.join)((0, import_node_os.tmpdir)(), "kora-studio-spectator-"));
+        this.dbPath = (0, import_node_path27.join)(this.tmpDir, "spectator-replica.db");
+      }
+      options;
+      runtime = null;
+      tmpDir = null;
+      connected = false;
+      operationsReceived = 0;
+      lastEventAt = null;
+      eventSeq = 0;
+      eventBuffer = [];
+      eventListeners = /* @__PURE__ */ new Set();
+      dbPath;
+      async start() {
+        let mods;
+        try {
+          mods = {
+            Store: (await import("@korajs/store")).Store,
+            BetterSqlite3Adapter: (await import("@korajs/store/better-sqlite3")).BetterSqlite3Adapter,
+            MergeEngine: (await import("@korajs/merge")).MergeEngine,
+            SyncEngine: (await import("@korajs/sync")).SyncEngine,
+            WebSocketTransport: (await import("@korajs/sync")).WebSocketTransport,
+            testing: await import("korajs/testing"),
+            SimpleEventEmitter: (await import("@korajs/core/internal")).SimpleEventEmitter
+          };
+        } catch (error) {
+          throw new Error(
+            `Spectator mode needs the Kora runtime packages installed (pnpm add -D korajs @korajs/store @korajs/merge @korajs/sync better-sqlite3). Underlying error: ${error instanceof Error ? error.message : String(error)}`
+          );
+        }
+        const emitter = new mods.SimpleEventEmitter();
+        const adapter = new mods.BetterSqlite3Adapter(this.dbPath);
+        const store = new mods.Store({ schema: this.options.schema, adapter, emitter });
+        await store.open();
+        const mergeEngine = new mods.MergeEngine();
+        const pipeline = new mods.testing.ApplyPipeline({ store, mergeEngine, emitter });
+        store.setLocalMutationHandler(pipeline);
+        const unsubscribeAudit = mods.testing.wireAuditPersistence(store, emitter);
+        const syncStore = new mods.testing.MergeAwareSyncStore(store, mergeEngine, emitter);
+        const engine = new mods.SyncEngine({
+          transport: new mods.WebSocketTransport(),
+          store: syncStore,
+          queueStorage: new mods.testing.StoreQueueStorage(adapter),
+          syncState: new mods.testing.StoreSyncStatePersistence(store),
+          config: {
+            url: this.options.url,
+            schemaVersion: this.options.schemaVersion ?? this.options.schema.version,
+            ...this.options.token ? { auth: async () => ({ token: this.options.token }) } : {}
+          },
+          emitter
+        });
+        const unsubscribers = FORWARDED_EVENTS.map(
+          (type) => emitter.on(type, (event) => {
+            this.lastEventAt = Date.now();
+            if (type === "sync:connected") {
+              this.connected = true;
+            }
+            if (type === "sync:disconnected") {
+              this.connected = false;
+            }
+            if (type === "sync:received" && Array.isArray(event.operations)) {
+              this.operationsReceived += event.operations.length;
+            }
+            this.pushEvent(type, event);
+          })
+        );
+        unsubscribers.push(unsubscribeAudit);
+        this.runtime = { store, engine, unsubscribers };
+        await engine.start();
+      }
+      status() {
+        return {
+          url: this.options.url,
+          connected: this.connected,
+          operationsReceived: this.operationsReceived,
+          lastEventAt: this.lastEventAt,
+          dbPath: this.dbPath
+        };
+      }
+      recentEvents() {
+        return [...this.eventBuffer];
+      }
+      onEvent(listener) {
+        this.eventListeners.add(listener);
+        return () => this.eventListeners.delete(listener);
+      }
+      async close() {
+        if (this.runtime) {
+          for (const unsub of this.runtime.unsubscribers) {
+            unsub();
+          }
+          await this.runtime.engine.stop().catch(() => {
+          });
+          await this.runtime.store.close().catch(() => {
+          });
+          this.runtime = null;
+        }
+        if (this.tmpDir) {
+          (0, import_node_fs6.rmSync)(this.tmpDir, { recursive: true, force: true });
+          this.tmpDir = null;
+        }
+      }
+      pushEvent(type, payload) {
+        const summary = type === "sync:received" && Array.isArray(payload.operations) ? `received ${payload.operations.length} op(s)` : type.replace("sync:", "").replace("merge:", "merge ");
+        const event = {
+          seq: ++this.eventSeq,
+          at: Date.now(),
+          type,
+          summary
+        };
+        this.eventBuffer.push(event);
+        if (this.eventBuffer.length > MAX_EVENT_BUFFER) {
+          this.eventBuffer.shift();
+        }
+        for (const listener of this.eventListeners) {
+          listener(event);
+        }
+      }
+    };
+  }
+});
+
+// src/commands/studio/lab-manager.ts
+var lab_manager_exports = {};
+__export(lab_manager_exports, {
+  LabManager: () => LabManager,
+  defaultLabSchema: () => defaultLabSchema
+});
+function defaultLabSchema() {
+  return (0, import_core3.defineSchema)({
+    version: 1,
+    collections: {
+      tasks: {
+        fields: {
+          title: import_core3.t.string(),
+          assignee: import_core3.t.string().optional(),
+          priority: import_core3.t.enum(["low", "medium", "high"]).default("medium"),
+          done: import_core3.t.boolean().default(false),
+          tags: import_core3.t.array(import_core3.t.string()).default([]),
+          points: import_core3.t.number().default(0)
+        }
+      }
+    }
+  });
+}
+function clamp01(n) {
+  return Math.min(1, Math.max(0, n));
+}
+function summarizeEvent(type, payload) {
+  const op = payload.operation;
+  switch (type) {
+    case "operation:created":
+      return op ? `${op.type} ${op.collection}/${String(op.recordId).slice(0, 8)}\u2026 ${op.data ? JSON.stringify(op.data).slice(0, 60) : ""}` : "operation created";
+    case "operation:applied":
+      return op ? `applied ${op.type} ${op.collection}/${String(op.recordId).slice(0, 8)}\u2026` : "applied";
+    case "merge:conflict":
+      return "merge conflict resolved";
+    case "merge:started":
+      return "merge started";
+    case "merge:completed":
+      return "merge completed";
+    case "sync:sent": {
+      const count = Array.isArray(payload.operations) ? payload.operations.length : 0;
+      return `sent ${count} op(s)`;
+    }
+    case "sync:received": {
+      const count = Array.isArray(payload.operations) ? payload.operations.length : 0;
+      return `received ${count} op(s)`;
+    }
+    case "sync:connected":
+      return "connected to server";
+    case "sync:disconnected":
+      return "disconnected";
+    case "sync:apply-failed":
+      return "APPLY FAILED";
+    case "lab:chaos-changed":
+      return `chaos \u2192 drop ${payload.dropRate} dup ${payload.duplicateRate} reorder ${payload.reorderRate} latency ${payload.maxLatency}ms`;
+    default:
+      return type.replace("lab:", "");
+  }
+}
+var import_node_fs7, import_node_os2, import_node_path28, import_core3, DEFAULT_CHAOS, FORWARDED_EVENTS2, MAX_EVENT_BUFFER2, LabManager;
+var init_lab_manager = __esm({
+  "src/commands/studio/lab-manager.ts"() {
+    "use strict";
+    import_node_fs7 = require("fs");
+    import_node_os2 = require("os");
+    import_node_path28 = require("path");
+    import_core3 = require("@korajs/core");
+    DEFAULT_CHAOS = {
+      dropRate: 0,
+      duplicateRate: 0,
+      reorderRate: 0,
+      maxLatency: 0
+    };
+    FORWARDED_EVENTS2 = [
+      "operation:created",
+      "operation:applied",
+      "merge:started",
+      "merge:conflict",
+      "merge:completed",
+      "sync:connected",
+      "sync:disconnected",
+      "sync:sent",
+      "sync:received",
+      "sync:apply-failed"
+    ];
+    MAX_EVENT_BUFFER2 = 500;
+    LabManager = class {
+      constructor(schema) {
+        this.schema = schema;
+      }
+      schema;
+      devices = /* @__PURE__ */ new Map();
+      server = null;
+      harness = null;
+      tmpDir = null;
+      eventSeq = 0;
+      eventBuffer = [];
+      eventListeners = /* @__PURE__ */ new Set();
+      deviceCounter = 0;
+      /** Load the harness lazily so file-mode Studio never needs @korajs/test. */
+      async loadHarness() {
+        if (this.harness) {
+          return this.harness;
+        }
+        try {
+          const testPkg = await import("@korajs/test");
+          const serverInternal = await import("@korajs/server/internal");
+          this.harness = {
+            TestServer: testPkg.TestServer,
+            TestDevice: testPkg.TestDevice,
+            checkConvergence: testPkg.checkConvergence,
+            ChaosTransport: testPkg.ChaosTransport,
+            createServerTransportPair: serverInternal.createServerTransportPair
+          };
+          return this.harness;
+        } catch (error) {
+          throw new Error(
+            `Kora Studio Lab needs "@korajs/test" and "@korajs/server" installed (pnpm add -D @korajs/test @korajs/server). Underlying error: ${error instanceof Error ? error.message : String(error)}`
+          );
+        }
+      }
+      async start(initialDevices = 2) {
+        const harness = await this.loadHarness();
+        this.tmpDir = (0, import_node_fs7.mkdtempSync)((0, import_node_path28.join)((0, import_node_os2.tmpdir)(), "kora-studio-lab-"));
+        this.server = new harness.TestServer(this.schema);
+        for (let i = 0; i < initialDevices; i++) {
+          await this.addDevice();
+        }
+      }
+      async addDevice(name) {
+        const harness = await this.loadHarness();
+        if (!this.server || !this.tmpDir) {
+          throw new Error("Lab is not started");
+        }
+        const deviceName = name?.trim() || `device-${String.fromCharCode(65 + this.deviceCounter)}`;
+        this.deviceCounter++;
+        if (this.devices.has(deviceName)) {
+          throw new Error(`Device "${deviceName}" already exists`);
+        }
+        const chaos = { ...DEFAULT_CHAOS };
+        const entry = { chaos };
+        const device = new harness.TestDevice({
+          name: deviceName,
+          schema: this.schema,
+          server: this.server,
+          // Read the CURRENT chaos settings each time a connection is made, so
+          // toggling chaos + reconnecting applies it without rebuilding the device.
+          createTransportPair: () => {
+            const pair = harness.createServerTransportPair();
+            const hasChaos = entry.chaos.dropRate > 0 || entry.chaos.duplicateRate > 0 || entry.chaos.reorderRate > 0 || entry.chaos.maxLatency > 0;
+            return {
+              client: hasChaos ? new harness.ChaosTransport(pair.client, { ...entry.chaos }) : pair.client,
+              serverTransport: pair.server
+            };
+          },
+          tmpDir: this.tmpDir
+        });
+        await device.open();
+        const unsubscribes = FORWARDED_EVENTS2.map(
+          (type) => device.emitter.on(type, (event) => this.pushEvent(deviceName, type, event))
+        );
+        this.devices.set(deviceName, { device, chaos, unsubscribes });
+        this.pushEvent(deviceName, "lab:device-added", {});
+        return this.deviceState(deviceName);
+      }
+      listDevices() {
+        return [...this.devices.keys()].map((name) => this.deviceState(name));
+      }
+      deviceState(name) {
+        const entry = this.mustGet(name);
+        return {
+          name,
+          nodeId: entry.device.getNodeId(),
+          connected: entry.device.isConnected(),
+          chaos: { ...entry.chaos },
+          dbPath: (0, import_node_path28.join)(this.tmpDir ?? "", `test-device-${name}.db`),
+          pendingOperations: entry.device.getSyncEngine()?.getStatus().pendingOperations ?? 0
+        };
+      }
+      async connect(name) {
+        await this.mustGet(name).device.sync();
+        this.pushEvent(name, "lab:connected", {});
+      }
+      async disconnect(name) {
+        await this.mustGet(name).device.disconnect();
+        this.pushEvent(name, "lab:disconnected", {});
+      }
+      async sync(name) {
+        await this.mustGet(name).device.sync();
+      }
+      setChaos(name, chaos) {
+        const entry = this.mustGet(name);
+        entry.chaos.dropRate = clamp01(chaos.dropRate ?? entry.chaos.dropRate);
+        entry.chaos.duplicateRate = clamp01(chaos.duplicateRate ?? entry.chaos.duplicateRate);
+        entry.chaos.reorderRate = clamp01(chaos.reorderRate ?? entry.chaos.reorderRate);
+        entry.chaos.maxLatency = Math.max(0, chaos.maxLatency ?? entry.chaos.maxLatency);
+        this.pushEvent(name, "lab:chaos-changed", { ...entry.chaos });
+        return { ...entry.chaos };
+      }
+      async insert(name, collection, data) {
+        return this.mustGet(name).device.collection(collection).insert(data);
+      }
+      async update(name, collection, recordId, data, increments) {
+        const payload = { ...data };
+        for (const [field, delta] of Object.entries(increments ?? {})) {
+          payload[field] = import_core3.op.increment(delta);
+        }
+        return this.mustGet(name).device.collection(collection).update(recordId, payload);
+      }
+      async delete(name, collection, recordId) {
+        await this.mustGet(name).device.collection(collection).delete(recordId);
+      }
+      async convergence() {
+        const harness = await this.loadHarness();
+        const devices = [...this.devices.values()].map((e) => e.device);
+        if (devices.length < 2) {
+          return { converged: true, deviceCount: devices.length, differences: [] };
+        }
+        const result = await harness.checkConvergence(devices, this.schema);
+        return {
+          converged: result.converged,
+          deviceCount: devices.length,
+          differences: result.differences.map(
+            (d) => d.description ?? `collection "${d.collection}" differs`
+          )
+        };
+      }
+      serverOperationCount() {
+        return this.server?.getAllOperations().length ?? 0;
+      }
+      getSchema() {
+        return this.schema;
+      }
+      /** Recent events (for initial page load), oldest first. */
+      recentEvents() {
+        return [...this.eventBuffer];
+      }
+      onEvent(listener) {
+        this.eventListeners.add(listener);
+        return () => this.eventListeners.delete(listener);
+      }
+      async close() {
+        for (const [, entry] of this.devices) {
+          for (const unsub of entry.unsubscribes) {
+            unsub();
+          }
+          await entry.device.close().catch(() => {
+          });
+        }
+        this.devices.clear();
+        await this.server?.close().catch(() => {
+        });
+        this.server = null;
+        if (this.tmpDir) {
+          (0, import_node_fs7.rmSync)(this.tmpDir, { recursive: true, force: true });
+          this.tmpDir = null;
+        }
+      }
+      mustGet(name) {
+        const entry = this.devices.get(name);
+        if (!entry) {
+          throw new Error(`Unknown device "${name}"`);
+        }
+        return entry;
+      }
+      pushEvent(device, type, payload) {
+        const event = {
+          seq: ++this.eventSeq,
+          at: Date.now(),
+          device,
+          type,
+          summary: summarizeEvent(type, payload)
+        };
+        this.eventBuffer.push(event);
+        if (this.eventBuffer.length > MAX_EVENT_BUFFER2) {
+          this.eventBuffer.shift();
+        }
+        for (const listener of this.eventListeners) {
+          listener(event);
+        }
+      }
+    };
+  }
+});
 
 // src/bin.ts
-var import_citty11 = require("citty");
+var import_citty12 = require("citty");
 
 // src/commands/backup/backup-command.ts
 var import_promises = require("fs/promises");
@@ -294,93 +2680,15 @@ var DevServerError = class extends import_core.KoraError {
   searchPath;
 };
 
-// src/utils/fs-helpers.ts
-var import_promises2 = require("fs/promises");
-var import_node_path2 = require("path");
-async function directoryExists(path) {
-  try {
-    await (0, import_promises2.access)(path);
-    return true;
-  } catch {
-    return false;
-  }
-}
-async function findProjectRoot(startDir) {
-  let current = (0, import_node_path2.resolve)(startDir ?? process.cwd());
-  for (; ; ) {
-    const pkgPath = (0, import_node_path2.join)(current, "package.json");
-    try {
-      const content = await (0, import_promises2.readFile)(pkgPath, "utf-8");
-      const pkg = JSON.parse(content);
-      if (isKoraProject(pkg)) {
-        return current;
-      }
-    } catch {
-    }
-    const parent = (0, import_node_path2.dirname)(current);
-    if (parent === current) break;
-    current = parent;
-  }
-  return null;
-}
-async function findSchemaFile(projectRoot) {
-  const candidates = [
-    (0, import_node_path2.join)(projectRoot, "src", "schema.ts"),
-    (0, import_node_path2.join)(projectRoot, "schema.ts"),
-    (0, import_node_path2.join)(projectRoot, "src", "schema.js"),
-    (0, import_node_path2.join)(projectRoot, "schema.js")
-  ];
-  for (const candidate of candidates) {
-    try {
-      await (0, import_promises2.access)(candidate);
-      return candidate;
-    } catch {
-    }
-  }
-  return null;
-}
-async function hasTsxInstalled(projectRoot) {
-  try {
-    await (0, import_promises2.access)((0, import_node_path2.join)(projectRoot, "node_modules", "tsx", "package.json"));
-    return true;
-  } catch {
-    return false;
-  }
-}
-async function resolveProjectBinaryEntryPoint(projectRoot, packageName, binaryName) {
-  const pkgJsonPath = (0, import_node_path2.join)(projectRoot, "node_modules", packageName, "package.json");
-  try {
-    const content = await (0, import_promises2.readFile)(pkgJsonPath, "utf-8");
-    const pkg = JSON.parse(content);
-    let binPath;
-    if (typeof pkg.bin === "string") {
-      binPath = pkg.bin;
-    } else if (typeof pkg.bin === "object" && pkg.bin !== null) {
-      binPath = pkg.bin[binaryName];
-    }
-    if (!binPath) return null;
-    const fullPath = (0, import_node_path2.join)(projectRoot, "node_modules", packageName, binPath);
-    await (0, import_promises2.access)(fullPath);
-    return fullPath;
-  } catch {
-    return null;
-  }
-}
-function isKoraProject(pkg) {
-  if (typeof pkg !== "object" || pkg === null) return false;
-  const record = pkg;
-  return hasKoraDep(record.dependencies) || hasKoraDep(record.devDependencies);
-}
-function hasKoraDep(deps) {
-  if (typeof deps !== "object" || deps === null) return false;
-  return Object.keys(deps).some((key) => key === "kora" || key.startsWith("@korajs/"));
-}
+// src/commands/compact/compact-command.ts
+init_fs_helpers();
 
 // src/commands/dev/kora-config.ts
 var import_node_child_process = require("child_process");
 var import_promises3 = require("fs/promises");
 var import_node_path3 = require("path");
 var import_node_url = require("url");
+init_fs_helpers();
 var CONFIG_CANDIDATES = [
   "kora.config.ts",
   "kora.config.mts",
@@ -430,7 +2738,7 @@ async function loadTypeScriptConfig(configPath, projectRoot) {
   }
 }
 async function runCommand(command, args, cwd) {
-  return await new Promise((resolve11, reject) => {
+  return await new Promise((resolve12, reject) => {
     const child = (0, import_node_child_process.spawn)(command, args, {
       cwd,
       stdio: ["ignore", "pipe", "pipe"],
@@ -449,7 +2757,7 @@ async function runCommand(command, args, cwd) {
     });
     child.on("exit", (code) => {
       if (code === 0) {
-        resolve11(stdout.trim());
+        resolve12(stdout.trim());
         return;
       }
       reject(new Error(`Failed to load kora config (exit ${code ?? "unknown"}): ${stderr.trim()}`));
@@ -467,80 +2775,8 @@ function toConfigObject(mod) {
   return value;
 }
 
-// src/commands/migrate/schema-loader.ts
-var import_node_child_process2 = require("child_process");
-var import_node_path4 = require("path");
-var import_node_url2 = require("url");
-async function loadSchemaDefinition(schemaPath, projectRoot) {
-  const ext = (0, import_node_path4.extname)(schemaPath);
-  const moduleValue = ext === ".ts" || ext === ".mts" || ext === ".cts" ? await loadTypeScriptModule(schemaPath, projectRoot) : await import(`${(0, import_node_url2.pathToFileURL)(schemaPath).href}?t=${Date.now()}-${Math.random()}`);
-  return extractSchema(moduleValue);
-}
-function extractSchema(value) {
-  if (typeof value !== "object" || value === null) {
-    throw new Error("Schema module must export an object.");
-  }
-  const moduleRecord = value;
-  const candidate = moduleRecord.default ?? moduleRecord;
-  if (!isSchemaDefinition(candidate)) {
-    throw new Error("Schema module must export a valid SchemaDefinition as default export.");
-  }
-  return candidate;
-}
-function isSchemaDefinition(value) {
-  if (typeof value !== "object" || value === null) return false;
-  const object = value;
-  return typeof object.version === "number" && typeof object.collections === "object" && object.collections !== null && typeof object.relations === "object" && object.relations !== null;
-}
-async function loadTypeScriptModule(schemaPath, projectRoot) {
-  if (!await hasTsxInstalled(projectRoot)) {
-    throw new Error(
-      `Schema file is TypeScript (${schemaPath}) but local "tsx" was not found. Install tsx in the project.`
-    );
-  }
-  const script = "const modulePath = process.argv[process.argv.length - 1];import('node:url').then(u => import(u.pathToFileURL(modulePath).href)).then(mod => { const v = mod.default ?? mod; process.stdout.write(JSON.stringify(v)) }).catch(e => { process.stderr.write(String(e)); process.exit(1) })";
-  const output = await runCommand2(
-    process.execPath,
-    ["--import", "tsx", "--eval", script, schemaPath],
-    projectRoot
-  );
-  try {
-    return JSON.parse(output);
-  } catch {
-    throw new Error(`Failed to parse schema module output for ${schemaPath}`);
-  }
-}
-async function runCommand2(command, args, cwd) {
-  return await new Promise((resolve11, reject) => {
-    const child = (0, import_node_child_process2.spawn)(command, args, {
-      cwd,
-      stdio: ["ignore", "pipe", "pipe"],
-      env: process.env
-    });
-    let stdout = "";
-    let stderr = "";
-    child.stdout?.on("data", (chunk) => {
-      stdout += chunk.toString("utf-8");
-    });
-    child.stderr?.on("data", (chunk) => {
-      stderr += chunk.toString("utf-8");
-    });
-    child.on("error", (error) => {
-      reject(error);
-    });
-    child.on("exit", (code) => {
-      if (code === 0) {
-        resolve11(stdout.trim());
-        return;
-      }
-      reject(
-        new Error(`Failed to load TypeScript schema (exit ${code ?? "unknown"}): ${stderr.trim()}`)
-      );
-    });
-  });
-}
-
 // src/commands/compact/compact-command.ts
+init_schema_loader();
 var compactCommand = (0, import_citty2.defineCommand)({
   meta: {
     name: "compact",
@@ -661,18 +2897,18 @@ var import_prompts = require("@clack/prompts");
 // src/utils/prompt.ts
 var import_node_readline = require("readline");
 function promptText(message, defaultValue, options) {
-  return new Promise((resolve11) => {
+  return new Promise((resolve12) => {
     const rl = createReadline(options);
     const suffix = defaultValue !== void 0 ? ` (${defaultValue})` : "";
     rl.question(`  ? ${message}${suffix}: `, (answer) => {
       rl.close();
       const trimmed = answer.trim();
-      resolve11(trimmed || defaultValue || "");
+      resolve12(trimmed || defaultValue || "");
     });
   });
 }
 function promptSelect(message, choices, options) {
-  return new Promise((resolve11) => {
+  return new Promise((resolve12) => {
     const rl = createReadline(options);
     const out = options?.output ?? process.stdout;
     out.write(`  ? ${message}
@@ -690,7 +2926,7 @@ function promptSelect(message, choices, options) {
         const selected = choices[index];
         if (selected) {
           rl.close();
-          resolve11(selected.value);
+          resolve12(selected.value);
         } else {
           out.write(`  Please enter a number between 1 and ${choices.length}
 `);
@@ -702,7 +2938,7 @@ function promptSelect(message, choices, options) {
   });
 }
 function promptConfirm(message, defaultValue = false, options) {
-  return new Promise((resolve11) => {
+  return new Promise((resolve12) => {
     const rl = createReadline(options);
     const suffix = defaultValue ? "Y/n" : "y/N";
     const ask = () => {
@@ -710,17 +2946,17 @@ function promptConfirm(message, defaultValue = false, options) {
         const normalized = answer.trim().toLowerCase();
         if (normalized.length === 0) {
           rl.close();
-          resolve11(defaultValue);
+          resolve12(defaultValue);
           return;
         }
         if (normalized === "y" || normalized === "yes") {
           rl.close();
-          resolve11(true);
+          resolve12(true);
           return;
         }
         if (normalized === "n" || normalized === "no") {
           rl.close();
-          resolve11(false);
+          resolve12(false);
           return;
         }
         ;
@@ -830,9 +3066,20 @@ var TEMPLATES = [
   "react-tailwind",
   "react-sync",
   "react-basic",
+  "vue-sync",
+  "vue-basic",
+  "vue-tailwind-sync",
+  "vue-tailwind",
+  "svelte-sync",
+  "svelte-basic",
+  "svelte-tailwind-sync",
+  "svelte-tailwind",
   "tauri-react"
 ];
 
+// src/commands/create/create-command.ts
+init_fs_helpers();
+
 // src/utils/package-manager.ts
 var import_node_child_process3 = require("child_process");
 function detectPackageManager() {
@@ -976,6 +3223,19 @@ async function findNearestAncestorWithEntry(startDir, entryName) {
 function determineTemplateFromSelections(input) {
   if (input.platform === "desktop-tauri") return "tauri-react";
   const shouldSync = input.sync && input.db !== "none";
+  if (input.framework === "vue") {
+    if (input.tailwind && shouldSync) return "vue-tailwind-sync";
+    if (input.tailwind && !shouldSync) return "vue-tailwind";
+    return shouldSync ? "vue-sync" : "vue-basic";
+  }
+  if (input.framework === "svelte") {
+    if (input.tailwind && shouldSync) return "svelte-tailwind-sync";
+    if (input.tailwind && !shouldSync) return "svelte-tailwind";
+    return shouldSync ? "svelte-sync" : "svelte-basic";
+  }
+  if (input.framework === "solid") {
+    throw new Error("Solid templates are not available yet. Use react, vue, or svelte.");
+  }
   if (input.tailwind && shouldSync) return "react-tailwind-sync";
   if (input.tailwind && !shouldSync) return "react-tailwind";
   if (!input.tailwind && shouldSync) return "react-sync";
@@ -996,6 +3256,9 @@ function isDatabaseValue(value) {
 function isDatabaseProviderValue(value) {
   return value === "none" || value === "local" || value === "supabase" || value === "neon" || value === "railway" || value === "vercel-postgres" || value === "custom";
 }
+function isSupportedWebFramework(framework) {
+  return framework === "react" || framework === "vue" || framework === "svelte";
+}
 
 // src/commands/create/preferences-flow.ts
 async function resolveCreatePreferencesFlow(params) {
@@ -1089,8 +3352,8 @@ async function resolveCreatePreferencesFlow(params) {
     } else if (!flags.useDefaults && !usedStoredPreferences) {
       effective.framework = await prompts.select("UI framework:", [
         { label: "React", value: "react" },
-        { label: "Vue (coming soon)", value: "vue", disabled: true },
-        { label: "Svelte (coming soon)", value: "svelte", disabled: true },
+        { label: "Vue 3", value: "vue" },
+        { label: "Svelte 5", value: "svelte" },
         { label: "Solid (coming soon)", value: "solid", disabled: true }
       ]);
     }
@@ -1155,6 +3418,7 @@ async function resolveCreatePreferencesFlow(params) {
   }
   const template = determineTemplateFromSelections({
     platform: effective.platform,
+    framework: effective.framework,
     tailwind: effective.tailwind,
     sync: effective.sync,
     db: effective.db
@@ -1265,7 +3529,7 @@ async function applySyncProviderPreset(options) {
   await (0, import_promises5.writeFile)(readmePath, readmeTemplate, "utf-8");
 }
 function isSyncTemplate(template) {
-  return template === "react-sync" || template === "react-tailwind-sync" || template === "tauri-react";
+  return template === "react-sync" || template === "react-tailwind-sync" || template === "vue-sync" || template === "vue-tailwind-sync" || template === "svelte-sync" || template === "svelte-tailwind-sync" || template === "tauri-react";
 }
 function getProviderDisplayName(provider) {
   switch (provider) {
@@ -1393,6 +3657,54 @@ function createCompatibilityLayerPlan(templateName) {
           authLayer
         ]
       };
+    case "vue-sync":
+      return {
+        compatibilityTarget: templateName,
+        layers: [{ category: "base", name: "vue-sync", sourceTemplate: "vue-sync" }]
+      };
+    case "vue-basic":
+      return {
+        compatibilityTarget: templateName,
+        layers: [{ category: "base", name: "vue-basic", sourceTemplate: "vue-basic" }]
+      };
+    case "svelte-sync":
+      return {
+        compatibilityTarget: templateName,
+        layers: [{ category: "base", name: "svelte-sync", sourceTemplate: "svelte-sync" }]
+      };
+    case "svelte-basic":
+      return {
+        compatibilityTarget: templateName,
+        layers: [{ category: "base", name: "svelte-basic", sourceTemplate: "svelte-basic" }]
+      };
+    case "vue-tailwind-sync":
+      return {
+        compatibilityTarget: templateName,
+        layers: [
+          { category: "base", name: "vue-tailwind-sync", sourceTemplate: "vue-tailwind-sync" }
+        ]
+      };
+    case "vue-tailwind":
+      return {
+        compatibilityTarget: templateName,
+        layers: [{ category: "base", name: "vue-tailwind", sourceTemplate: "vue-tailwind" }]
+      };
+    case "svelte-tailwind-sync":
+      return {
+        compatibilityTarget: templateName,
+        layers: [
+          {
+            category: "base",
+            name: "svelte-tailwind-sync",
+            sourceTemplate: "svelte-tailwind-sync"
+          }
+        ]
+      };
+    case "svelte-tailwind":
+      return {
+        compatibilityTarget: templateName,
+        layers: [{ category: "base", name: "svelte-tailwind", sourceTemplate: "svelte-tailwind" }]
+      };
   }
 }
 async function composeTemplateLayers(plan, targetDir, context) {
@@ -1455,7 +3767,7 @@ var createCommand = (0, import_citty3.defineCommand)({
     },
     template: {
       type: "string",
-      description: "Project template (react-tailwind-sync, react-tailwind, react-sync, react-basic, tauri-react)"
+      description: "Project template (react-tailwind-sync, react-sync, vue-sync, svelte-sync, tauri-react, ...)"
     },
     pm: {
       type: "string",
@@ -1540,8 +3852,10 @@ var createCommand = (0, import_citty3.defineCommand)({
         prompts,
         store: preferenceStore
       });
-      if (selection.framework !== "react") {
-        logger.error(`Framework "${selection.framework}" is not available yet. Use "react".`);
+      if (!isSupportedWebFramework(selection.framework)) {
+        logger.error(
+          `Framework "${selection.framework}" is not available yet. Use react, vue, or svelte.`
+        );
         if (!useDefaults) {
           prompts.outro("Project creation aborted.");
         }
@@ -1686,7 +4000,7 @@ function isValidPackageManager(value) {
   return PACKAGE_MANAGERS.includes(value);
 }
 function isSyncTemplate2(template) {
-  return template === "react-sync" || template === "react-tailwind-sync" || template === "tauri-react";
+  return template === "react-sync" || template === "react-tailwind-sync" || template === "vue-sync" || template === "vue-tailwind-sync" || template === "svelte-sync" || template === "svelte-tailwind-sync" || template === "tauri-react";
 }
 function formatDbProviderForLog(dbProvider) {
   switch (dbProvider) {
@@ -1770,6 +4084,7 @@ function resolveKoraVersion() {
 var import_node_fs4 = require("fs");
 var import_node_path20 = require("path");
 var import_citty4 = require("citty");
+init_fs_helpers();
 
 // src/commands/deploy/adapters/adapter.ts
 var DEPLOY_PLATFORMS = [
@@ -1794,6 +4109,7 @@ var import_node_child_process5 = require("child_process");
 var import_node_fs3 = require("fs");
 var import_promises7 = require("fs/promises");
 var import_node_path10 = require("path");
+init_fs_helpers();
 async function buildClient(options) {
   const viteEntryPoint = await resolveProjectBinaryEntryPoint(options.projectRoot, "vite", "vite");
   if (!viteEntryPoint) {
@@ -1837,7 +4153,7 @@ async function patchSqliteWasmAssets(projectRoot, outDir) {
   }
 }
 async function runProcess(command, args, cwd) {
-  await new Promise((resolve11, reject) => {
+  await new Promise((resolve12, reject) => {
     const child = (0, import_node_child_process5.spawn)(command, args, {
       cwd,
       stdio: "inherit",
@@ -1848,7 +4164,7 @@ async function runProcess(command, args, cwd) {
     });
     child.on("exit", (code) => {
       if (code === 0) {
-        resolve11();
+        resolve12();
         return;
       }
       reject(new Error(`Client build failed with exit code ${String(code ?? "unknown")}.`));
@@ -2246,7 +4562,7 @@ var AwsEcsAdapter = class {
 };
 var NodeAwsCommandRunner = class {
   async run(command, args, cwd) {
-    return new Promise((resolve11) => {
+    return new Promise((resolve12) => {
       const child = (0, import_node_child_process6.spawn)(command, args, {
         cwd,
         env: process.env,
@@ -2261,11 +4577,11 @@ var NodeAwsCommandRunner = class {
         stderr += chunk.toString("utf-8");
       });
       child.on("error", (error) => {
-        resolve11({ exitCode: 1, stdout, stderr: `${stderr}
+        resolve12({ exitCode: 1, stdout, stderr: `${stderr}
 ${error.message}` });
       });
       child.on("exit", (code) => {
-        resolve11({ exitCode: code ?? 1, stdout: stdout.trim(), stderr: stderr.trim() });
+        resolve12({ exitCode: code ?? 1, stdout: stdout.trim(), stderr: stderr.trim() });
       });
     });
   }
@@ -2593,7 +4909,7 @@ var AwsLightsailAdapter = class {
 };
 var NodeAwsLightsailCommandRunner = class {
   async run(command, args, cwd) {
-    return new Promise((resolve11) => {
+    return new Promise((resolve12) => {
       const child = (0, import_node_child_process7.spawn)(command, args, {
         cwd,
         env: process.env,
@@ -2608,11 +4924,11 @@ var NodeAwsLightsailCommandRunner = class {
         stderr += chunk.toString("utf-8");
       });
       child.on("error", (error) => {
-        resolve11({ exitCode: 1, stdout, stderr: `${stderr}
+        resolve12({ exitCode: 1, stdout, stderr: `${stderr}
 ${error.message}` });
       });
       child.on("exit", (code) => {
-        resolve11({ exitCode: code ?? 1, stdout: stdout.trim(), stderr: stderr.trim() });
+        resolve12({ exitCode: code ?? 1, stdout: stdout.trim(), stderr: stderr.trim() });
       });
     });
   }
@@ -2937,7 +5253,7 @@ var FlyAdapter = class {
 };
 var NodeFlyCommandRunner = class {
   async run(command, args, cwd) {
-    return await new Promise((resolve11) => {
+    return await new Promise((resolve12) => {
       const child = (0, import_node_child_process8.spawn)(command, args, {
         cwd,
         env: process.env,
@@ -2952,7 +5268,7 @@ var NodeFlyCommandRunner = class {
         stderr += chunk.toString("utf-8");
       });
       child.on("error", (error) => {
-        resolve11({
+        resolve12({
           exitCode: 1,
           stdout,
           stderr: `${stderr}
@@ -2960,7 +5276,7 @@ ${error.message}`
         });
       });
       child.on("exit", (code) => {
-        resolve11({
+        resolve12({
           exitCode: code ?? 1,
           stdout: stdout.trim(),
           stderr: stderr.trim()
@@ -3273,7 +5589,7 @@ var RailwayAdapter = class {
 };
 var NodeRailwayCommandRunner = class {
   async run(command, args, cwd) {
-    return await new Promise((resolve11) => {
+    return await new Promise((resolve12) => {
       const child = (0, import_node_child_process9.spawn)(command, args, {
         cwd,
         env: process.env,
@@ -3288,7 +5604,7 @@ var NodeRailwayCommandRunner = class {
         stderr += chunk.toString("utf-8");
       });
       child.on("error", (error) => {
-        resolve11({
+        resolve12({
           exitCode: 1,
           stdout,
           stderr: `${stderr}
@@ -3296,7 +5612,7 @@ ${error.message}`
         });
       });
       child.on("exit", (code) => {
-        resolve11({
+        resolve12({
           exitCode: code ?? 1,
           stdout: stdout.trim(),
           stderr: stderr.trim()
@@ -3984,6 +6300,7 @@ var import_promises14 = require("fs/promises");
 var import_node_path22 = require("path");
 var import_node_path23 = require("path");
 var import_citty5 = require("citty");
+init_fs_helpers();
 
 // src/commands/dev/process-manager.ts
 var import_node_child_process10 = require("child_process");
@@ -3999,8 +6316,8 @@ var ProcessManager = class {
     let resolveExit;
     const runningProcess = {
       child,
-      exitPromise: new Promise((resolve11) => {
-        resolveExit = resolve11;
+      exitPromise: new Promise((resolve12) => {
+        resolveExit = resolve12;
       }),
       stdoutBuffer: "",
       stderrBuffer: ""
@@ -4067,8 +6384,8 @@ var ProcessManager = class {
   }
 };
 function delay(ms) {
-  return new Promise((resolve11) => {
-    setTimeout(resolve11, ms);
+  return new Promise((resolve12) => {
+    setTimeout(resolve12, ms);
   });
 }
 
@@ -4076,6 +6393,7 @@ function delay(ms) {
 var import_node_child_process11 = require("child_process");
 var import_node_fs5 = require("fs");
 var import_node_path21 = require("path");
+init_fs_helpers();
 var SchemaWatcher = class {
   constructor(config) {
     this.config = config;
@@ -4130,7 +6448,7 @@ var SchemaWatcher = class {
   }
 };
 async function spawnCommand(command, args, cwd) {
-  await new Promise((resolve11, reject) => {
+  await new Promise((resolve12, reject) => {
     const child = (0, import_node_child_process11.spawn)(command, args, {
       cwd,
       stdio: ["ignore", "pipe", "pipe"],
@@ -4147,7 +6465,7 @@ async function spawnCommand(command, args, cwd) {
     });
     child.on("exit", (code) => {
       if (code === 0) {
-        resolve11();
+        resolve12();
         return;
       }
       reject(new Error(`Type generation exited with code ${code ?? "unknown"}.`));
@@ -4257,8 +6575,8 @@ var devCommand = (0, import_citty5.defineCommand)({
     let schemaWatcher = null;
     let shuttingDown = false;
     let resolveFinished;
-    const finished = new Promise((resolve11) => {
-      resolveFinished = resolve11;
+    const finished = new Promise((resolve12) => {
+      resolveFinished = resolve12;
     });
     const onManagedProcessExit = () => {
       if (!processManager.hasRunning() && !shuttingDown) {
@@ -4458,10 +6776,13 @@ await new Promise(() => {});
 
 // src/commands/doctor/doctor-command.ts
 var import_citty6 = require("citty");
+init_fs_helpers();
 
 // src/commands/doctor/doctor-checks.ts
 var import_promises15 = require("fs/promises");
 var import_node_path24 = require("path");
+init_fs_helpers();
+init_schema_loader();
 var STATUS_ENDPOINT = "/__kora/status";
 async function runDoctorChecks(options) {
   const { projectRoot } = options;
@@ -4775,6 +7096,8 @@ var doctorCommand = (0, import_citty6.defineCommand)({
 var import_promises16 = require("fs/promises");
 var import_node_path25 = require("path");
 var import_citty7 = require("citty");
+init_fs_helpers();
+init_schema_loader();
 
 // src/commands/generate/hook-generator.ts
 function generateCollectionHooks(schema) {
@@ -5167,6 +7490,7 @@ var logsCommand = (0, import_citty8.defineCommand)({
 var import_promises17 = require("fs/promises");
 var import_node_path26 = require("path");
 var import_citty9 = require("citty");
+init_fs_helpers();
 
 // src/commands/migrate/migration-generator.ts
 var import_core2 = require("@korajs/core");
@@ -5757,6 +8081,7 @@ function generateOperationTransformModule(fromVersion, toVersion) {
 }
 
 // src/commands/migrate/migrate-command.ts
+init_schema_loader();
 var SNAPSHOT_PATH = "kora/schema.snapshot.json";
 var MIGRATIONS_DIR = "kora/migrations";
 var migrateCommand = (0, import_citty9.defineCommand)({
@@ -6219,8 +8544,131 @@ function printStatus(status, url, logger) {
   }
 }
 
+// src/commands/studio/studio-command.ts
+var import_node_fs8 = require("fs");
+var import_node_path29 = require("path");
+var import_citty11 = require("citty");
+var studioCommand = (0, import_citty11.defineCommand)({
+  meta: {
+    name: "studio",
+    description: "Kora Studio: visualize records, operations, and sync \u2014 or run the sync lab"
+  },
+  args: {
+    db: {
+      type: "string",
+      description: "Path to a Kora SQLite database file (file mode, read-only)"
+    },
+    lab: {
+      type: "boolean",
+      description: "Start the interactive multi-device sync laboratory"
+    },
+    connect: {
+      type: "string",
+      description: "Spectator mode: WebSocket URL of a live Kora sync server (read-only replica)"
+    },
+    token: {
+      type: "string",
+      description: "Spectator mode: bearer token for the sync auth handshake"
+    },
+    devices: {
+      type: "string",
+      description: "Lab mode: number of initial devices (default 2)"
+    },
+    schema: {
+      type: "string",
+      description: "Lab mode: path to a schema file (defaults to a built-in demo schema)"
+    },
+    port: {
+      type: "string",
+      description: "Port for the Studio UI (default 4321, 0 for a random free port)"
+    }
+  },
+  async run({ args }) {
+    const logger = createLogger();
+    const port = args.port !== void 0 ? Number.parseInt(args.port, 10) : 4321;
+    if (Number.isNaN(port) || port < 0 || port > 65535) {
+      throw new Error(`Invalid port "${args.port}"`);
+    }
+    const { startStudioServer: startStudioServer2 } = await Promise.resolve().then(() => (init_studio_server(), studio_server_exports));
+    if (typeof args.connect === "string") {
+      if (typeof args.schema !== "string") {
+        throw new Error(
+          "Spectator mode needs your schema to materialize records: kora studio --connect wss://\u2026 --schema ./kora/schema.ts"
+        );
+      }
+      const { loadSchemaDefinition: loadSchemaDefinition2 } = await Promise.resolve().then(() => (init_schema_loader(), schema_loader_exports));
+      const schema = await loadSchemaDefinition2((0, import_node_path29.resolve)(process.cwd(), args.schema), process.cwd());
+      const { SpectatorManager: SpectatorManager2 } = await Promise.resolve().then(() => (init_spectator_manager(), spectator_manager_exports));
+      const spectator = new SpectatorManager2({
+        url: args.connect,
+        schema,
+        ...typeof args.token === "string" ? { token: args.token } : {}
+      });
+      await spectator.start();
+      const server2 = await startStudioServer2({ port, spectator });
+      logger.banner();
+      logger.success(`Kora Studio SPECTATOR running at ${server2.url}`);
+      logger.step(`Watching ${args.connect} (read-only replica \u2014 nothing is ever pushed)`);
+      logger.step("Press Ctrl+C to stop.");
+      const shutdown2 = async () => {
+        await server2.close();
+        await spectator.close();
+        process.exit(0);
+      };
+      process.on("SIGINT", () => void shutdown2());
+      process.on("SIGTERM", () => void shutdown2());
+      return;
+    }
+    if (args.lab) {
+      const { LabManager: LabManager2, defaultLabSchema: defaultLabSchema2 } = await Promise.resolve().then(() => (init_lab_manager(), lab_manager_exports));
+      let schema = defaultLabSchema2();
+      if (typeof args.schema === "string") {
+        const { loadSchemaDefinition: loadSchemaDefinition2 } = await Promise.resolve().then(() => (init_schema_loader(), schema_loader_exports));
+        schema = await loadSchemaDefinition2((0, import_node_path29.resolve)(process.cwd(), args.schema), process.cwd());
+      }
+      const initialDevices = args.devices !== void 0 ? Math.max(1, Number.parseInt(args.devices, 10) || 2) : 2;
+      const lab = new LabManager2(schema);
+      await lab.start(initialDevices);
+      const server2 = await startStudioServer2({ port, lab });
+      logger.banner();
+      logger.success(`Kora Studio LAB running at ${server2.url}`);
+      logger.step(`${initialDevices} device(s) started against an in-process sync server.`);
+      logger.step("Everything in the lab is throwaway \u2014 experiment freely.");
+      logger.step("Press Ctrl+C to stop.");
+      const shutdown2 = async () => {
+        await server2.close();
+        await lab.close();
+        process.exit(0);
+      };
+      process.on("SIGINT", () => void shutdown2());
+      process.on("SIGTERM", () => void shutdown2());
+      return;
+    }
+    if (typeof args.db !== "string") {
+      throw new Error(
+        "Pass --db <path> to inspect a database, --lab for the sync laboratory, or --connect <wss url> for live spectator mode."
+      );
+    }
+    const dbPath = (0, import_node_path29.resolve)(process.cwd(), args.db);
+    if (!(0, import_node_fs8.existsSync)(dbPath)) {
+      throw new Error(`Database file not found: ${dbPath}`);
+    }
+    const server = await startStudioServer2({ port, dbPath });
+    logger.banner();
+    logger.success(`Kora Studio running at ${server.url}`);
+    logger.step(`Database: ${dbPath} (read-only)`);
+    logger.step("Press Ctrl+C to stop.");
+    const shutdown = async () => {
+      await server.close();
+      process.exit(0);
+    };
+    process.on("SIGINT", () => void shutdown());
+    process.on("SIGTERM", () => void shutdown());
+  }
+});
+
 // src/bin.ts
-var main = (0, import_citty11.defineCommand)({
+var main = (0, import_citty12.defineCommand)({
   meta: {
     name: "kora",
     description: "Kora.js \u2014 Offline-first application framework"
@@ -6235,8 +8683,9 @@ var main = (0, import_citty11.defineCommand)({
     generate: generateCommand,
     logs: logsCommand,
     migrate: migrateCommand,
-    status: statusCommand
+    status: statusCommand,
+    studio: studioCommand
   }
 });
-(0, import_citty11.runMain)(main);
+(0, import_citty12.runMain)(main);
 //# sourceMappingURL=bin.cjs.map